/* QRS-390: the "See QRystal in action" tab on the home page (includes/videos-action-tab.php, assets/js/videos-action-tab.js).
   In the page (.qr-action-pill): a dark glass pill in the white space directly after the hero row. When it reaches the
   header, the fixed tab (.qr-action-tab) takes its place and turns into the side tab; scrolling back, it turns back and
   hands over to the pill (videos-action-tab.js). Without a hero row, the tab starts as a pill at the bottom centre.
   Side tab (.is-docked): the pill turned -90deg around its bottom-right corner, a slim tab on the right edge with its
   label read from bottom to top. top/right/transform use the same units in both states, so the change is one movement. */
.qr-action-tab,
.qr-action-pill {
	--qat-h: 48px;
	--qat-w: 238px;
	--qat-gap: 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	width: var(--qat-w);
	height: var(--qat-h);
	margin: 0;
	padding: 0 20px 0 6px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	background: rgba(24, 22, 20, .64);
	box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .16);
	color: #fff;
	font-family: Raleway, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}
.qr-action-tab {
	position: fixed;
	top: calc(100% - var(--qat-h) - var(--qat-gap) - env(safe-area-inset-bottom, 0px));
	right: 50%;
	z-index: 9990;
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	transform: translateX(50%) rotate(0deg);
	transform-origin: 100% 100%;
	transition: top .65s cubic-bezier(.2, .8, .2, 1), right .65s cubic-bezier(.2, .8, .2, 1), transform .65s cubic-bezier(.2, .8, .2, 1),
		border-radius .65s ease, background-color .3s ease, opacity .35s ease, translate .35s ease, visibility 0s linear 0s;
}
.qr-action-tab[hidden] { display: none !important; }
/* The site-wide * { font-family: inter, "Courier New" } rule also reaches the label; where Inter is not loaded it shows Courier. */
.qr-action-tab *,
.qr-action-pill * { font-family: Raleway, sans-serif; }
.qr-action-tab:hover,
.qr-action-tab:focus-visible,
.qr-action-pill:hover,
.qr-action-pill:focus-visible {
	background: rgba(24, 22, 20, .8);
	color: #fff;
	text-decoration: none;
}
.qr-action-tab:focus-visible,
.qr-action-pill:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.qr-action-pill:focus-visible { outline-color: #161412; }

/* In the page: the script sets the slot height (room added only where the white space is too small) and the pill top. */
.qr-action-slot { position: relative; height: 0; }
.qr-action-pill {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	translate: -50% 0;
	transition: background-color .3s ease;
}
/* While the fixed tab is out (side tab, or on its way back), the pill in the page is hidden: also under a see-through header. */
.qr-action-pill.is-away { visibility: hidden; }
/* While the pill shows in the page, the fixed tab waits hidden. No transitions: the change happens in one frame. */
.qr-action-tab.is-parked {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: none;
}
/* On its way back to the pill, the script moves the top (the pill moves with the page); CSS turns it and moves it sideways. */
.qr-action-tab.is-returning {
	transition: right .65s cubic-bezier(.2, .8, .2, 1), transform .65s cubic-bezier(.2, .8, .2, 1), border-radius .65s ease,
		background-color .3s ease, opacity .35s ease, translate .35s ease, visibility 0s linear 0s;
}

.qr-action-tab__icon {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff;
	color: #161616;
}
.qr-action-tab__icon svg { margin-left: 2px; transition: rotate .65s cubic-bezier(.2, .8, .2, 1); }
.qr-action-tab__icon::after {
	content: "";
	position: absolute;
	inset: -5px;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 50%;
	animation: qr-action-tab-pulse 2.8s cubic-bezier(.2, .6, .3, 1) infinite;
}
@keyframes qr-action-tab-pulse {
	0% { transform: scale(.85); opacity: .9; }
	70%, 100% { transform: scale(1.45); opacity: 0; }
}

/* Docked: the rotated tab covers the right edge from 58% - width/2 to 58% + width/2 of the screen height.
   Its original bottom side touches the screen edge, so those corners are square. */
.qr-action-tab.is-docked {
	top: calc(58% - var(--qat-w) / 2 - var(--qat-h));
	right: 0px;
	border-radius: 16px 16px 0 0;
	transform: translateX(0px) rotate(-90deg);
}
/* The play triangle keeps pointing to the reading direction of the label. */
.qr-action-tab.is-docked .qr-action-tab__icon svg { rotate: 90deg; }

/* Hidden while the videos are on screen, and while the phone menu or the video viewer is open. */
.qr-action-tab.is-hidden,
.qr-drawer-open .qr-action-tab,
.qvc-lightbox-open .qr-action-tab {
	opacity: 0;
	translate: 0 14px;
	visibility: hidden;
	pointer-events: none;
	transition: top .65s cubic-bezier(.2, .8, .2, 1), right .65s cubic-bezier(.2, .8, .2, 1), transform .65s cubic-bezier(.2, .8, .2, 1),
		border-radius .65s ease, background-color .3s ease, opacity .35s ease, translate .35s ease, visibility 0s linear .35s;
}
.qr-action-tab.is-docked.is-hidden { translate: 14px 0; }

@media (max-width: 680px) {
	.qr-action-tab,
	.qr-action-pill {
		--qat-h: 44px;
		--qat-w: 212px;
		--qat-gap: 16px;
		gap: 10px;
		padding-right: 16px;
		font-size: 13px;
	}
	.qr-action-tab__icon { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
	.qr-action-tab,
	.qr-action-tab.is-hidden,
	.qr-action-tab__icon svg { transition: opacity .2s ease, visibility 0s linear 0s; }
	.qr-action-tab__icon::after { display: none; }
}