/* sales_extras.css -- what a sales page gets on top of its own stylesheet.
 *
 * Loaded by sales_page_extras.php, after corner.css, on the product pages and
 * their upsells only. Two jobs: take the old Top button off the screen, and
 * dress the sales video while it floats.
 *
 * WHY SO MANY !important's IN ONE FILE
 *   Each of the 366 sales pages has its own images/style.css, written over
 *   fifteen years, and none of them can be read from here. This file cannot
 *   know what a page says about .video-wrapper, so where it has to win it says
 *   so outright rather than racing a selector it has never seen. Every one
 *   below is on a rule that only applies while the video is floating, so the
 *   page in its resting state is untouched.
 */

/* ==========================================================================
   THE OLD TOP BUTTON
   Hard-coded into every page as <button id="topbtn">, and the corner control
   now does its job with two arrows instead of one.

   HIDDEN, NOT REMOVED, FOR A REASON
     js/smoothscroll.js runs this on every scroll event:

       document.getElementById("topbtn").style.display = "block";

     with no check that the button is there. Take the element out of the page
     and that line throws on the first scroll, and because it is the whole of
     window.onscroll, it throws again on every scroll after. So the button
     stays in the document, keeps being told to display:block, and is simply
     never seen. That inline style is also why this needs !important: an
     inline declaration outranks any plain stylesheet rule.
   ========================================================================== */
#topbtn { display: none !important; }

/* The hairline in the corner capsule separates the two jump arrows from the
   light/dark switch above them. A sales page has no switch -- its artwork has
   white baked into it -- so the line would sit above nothing. */
#ssm-corner .ssm-corner-rule { display: none !important; }

/* ==========================================================================
   THE FLOATING SALES VIDEO
   js/sales_video.js finds the sales video, inserts a placeholder to hold its
   place, and puts .ssm-float-on on the wrapper once the page has scrolled past
   it. Nothing here applies until that class lands.
   ========================================================================== */

/* The gap the video leaves behind. It takes no room at all until the video
   lifts out of the flow, and then exactly the room the video had: script
   copies the wrapper's measured height AND its margins onto it, so the
   content below does not shift by a pixel at the moment of the swap. */
.ssm-float-spot { display: none; }
.ssm-float-spot.is-holding { display: block; }

.video-wrapper.ssm-float-on,
.ssm-float-on {
	position: fixed !important;
	/* Which corner is set by one of the .ssm-at-* rules below, so that the
	   visitor's choice is a class swap and nothing else. */
	/* 340x191 is 16:9. Written as two lengths rather than an aspect-ratio so
	   the box is the same on every browser that reaches these pages, and so
	   the player inside can be told to fill it exactly. */
	width: 340px !important;
	height: 191px !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	/* Over the page, under the exit popup (2147483000) and under the corner
	   capsule (1000001), so neither of those is ever covered by a video. */
	z-index: 999998;
	overflow: hidden;
	border-radius: 10px;
	background: #000;
	box-shadow: 0 10px 34px rgba(0, 0, 0, .38), 0 0 0 1px rgba(0, 0, 0, .25);
	/* Fades up rather than appearing: the movement is what tells the visitor
	   this is the video they were watching, and not a new thing on the page.
	   No fill mode, deliberately. A filled animation keeps its last frame
	   applied for as long as the class is on, and an animated transform
	   outranks an inline one -- which would silently cancel the position
	   correction js/sales_video.js applies on pages where an ancestor has
	   captured the fixed positioning. Without a fill, the rule stops mattering
	   the moment it has finished. */
	animation: ssm-float-in .22s ease-out;
}
@keyframes ssm-float-in {
	from { opacity: 0; transform: translateY(-8px) scale(.96); }
	to   { opacity: 1; transform: none; }
}

/* ---- the four corners --------------------------------------------------
   The visitor drags the video by its grip and it settles into whichever
   corner it was nearest when they let go. js/sales_video.js remembers the
   choice and puts the video there on every page after that.

   These come after the block above on purpose. They carry the same weight as
   it does, so it is their position in the file that lets them win. */
.ssm-float-on.ssm-at-tr { top: 16px !important; right: 16px !important; bottom: auto !important; left: auto !important; transform-origin: 100% 0; }
.ssm-float-on.ssm-at-tl { top: 16px !important; left: 16px !important; bottom: auto !important; right: auto !important; transform-origin: 0 0; }
.ssm-float-on.ssm-at-bl { bottom: 16px !important; left: 16px !important; top: auto !important; right: auto !important; transform-origin: 0 100%; }
/* Bottom right is the one corner that is already occupied: the capsule with
   the jump arrows sits 20px in and 40px wide, so a video flush to the edge
   would cover the controls. It stops 72px short, clear of them. */
.ssm-float-on.ssm-at-br { bottom: 16px !important; right: 72px !important; top: auto !important; left: auto !important; transform-origin: 100% 100%; }

/* ---- while it is being dragged -----------------------------------------
   The pointer must not be able to start selecting the page, and the player is
   switched off for the pointer as well: pointer capture already routes the
   events to the grip, but a dead iframe also stops the video reacting to a
   drag that passes over it.

   The entry animation is stopped from script rather than here. Turning it off
   with a class and then taking the class away again sets the animation
   property back to what it was, and a browser reads that as a new animation
   and plays it -- so the video would do its little fade-and-rise every time it
   was dropped into a corner. */
.ssm-float-on.is-dragging {
	cursor: grabbing;
	user-select: none;
	-webkit-user-select: none;
	box-shadow: 0 16px 44px rgba(0, 0, 0, .46), 0 0 0 1px rgba(0, 0, 0, .3);
}
.ssm-float-on.is-dragging iframe,
.ssm-float-on.is-dragging video { pointer-events: none !important; }

/* ---- put away, not thrown away -----------------------------------------
   Closing the video shrinks it to a button in the same corner rather than
   getting rid of it, so it can be brought back.

   visibility, not display. A display:none iframe is pulled out of the layout
   and some players stop or reset when that happens; a hidden one keeps its
   box, keeps its connection and keeps its place in the video. It is pointer
   dead as well, so the invisible rectangle cannot swallow clicks meant for
   the page underneath. */
.ssm-float-on.is-minimized {
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Built from the jump arrows' capsule rather than from the video: same width,
   same hairline, same frosted white, same quiet 55% until a cursor comes near.
   The two are the only furniture this page adds, and a black disc sitting
   above a pale capsule read as two different things from two different sites.
   Values are taken from #ssm-corner in corner.css -- change them together. */
#ssm-float-bubble {
	display: none;
	position: fixed;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 999px;
	background: rgba(255, 255, 255, .86);
	-webkit-backdrop-filter: saturate(140%) blur(8px);
	backdrop-filter: saturate(140%) blur(8px);
	box-shadow: 0 2px 12px rgba(16, 24, 40, .14);
	color: #5b6672;
	cursor: pointer;
	z-index: 999998;
	opacity: .55;
	transition: opacity .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
}
#ssm-float-bubble.is-on { display: flex; animation: ssm-bubble-in .18s ease-out; }
/* The capsule brightens rather than growing, so this does too. */
#ssm-float-bubble:hover {
	opacity: 1;
	background: rgba(236, 246, 252, .94);
	box-shadow: 0 4px 18px rgba(16, 24, 40, .2);
	color: #2c80b4;
}
#ssm-float-bubble:focus-visible { opacity: 1; outline: 2px solid #3498db; outline-offset: 2px; }
/* A triangle is heavier on its left, so it is nudged right to look centred. */
#ssm-float-bubble svg { display: block; margin-left: 2px; }
@keyframes ssm-bubble-in {
	from { opacity: 0; }
	to   { opacity: .55; }
}
/* The same four corners, and the same 72px clearance from the jump arrows, so
   the video is put away where it was and comes back where it was. */
#ssm-float-bubble.ssm-at-tr { top: 16px; right: 16px; }
#ssm-float-bubble.ssm-at-tl { top: 16px; left: 16px; }
#ssm-float-bubble.ssm-at-bl { bottom: 16px; left: 16px; }
#ssm-float-bubble.ssm-at-br { bottom: 16px; right: 72px; }

/* ---- the grip ----------------------------------------------------------
   Dragging has to start somewhere that is not the video. A cross-origin
   player takes every pointer event that lands on it and tells the page
   nothing, so a drag begun on the picture itself would never be seen here. */
.ssm-float-grip { display: none; }
.ssm-float-on > .ssm-float-grip {
	display: flex !important;
	position: absolute !important;
	top: 4px;
	left: 4px;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	box-shadow: none;
	color: #fff;
	cursor: grab;
	opacity: .75;
	transition: opacity .15s ease, background-color .15s ease;
	z-index: 2;
	/* So a drag on a touch screen moves the video instead of scrolling. */
	touch-action: none;
	-webkit-appearance: none;
	appearance: none;
}
.ssm-float-on > .ssm-float-grip:hover { opacity: 1; background: rgba(0, 0, 0, .78); }
.ssm-float-on > .ssm-float-grip:focus-visible { outline: 2px solid #fff; outline-offset: 1px; opacity: 1; }
.ssm-float-on.is-dragging > .ssm-float-grip { cursor: grabbing; opacity: 1; }
.ssm-float-on > .ssm-float-grip svg { display: block; }

/* The player, and whatever the page has wrapped it in. Several pages nest the
   iframe two divs deep (.video-wrapper > .video-wrap > .video), so the
   in-between boxes are stretched to the float as well -- otherwise the player
   sits inside a 640px box inside a 340px one and is cropped. */
.ssm-float-on > div,
.ssm-float-on > div > div {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
}
.ssm-float-on iframe,
.ssm-float-on video,
.ssm-float-on embed,
.ssm-float-on object {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	display: block !important;
	object-fit: contain;
}

/* ---- the close button --------------------------------------------------
   In the document from the start so that floating costs no DOM work, and
   shown only while the video is up. */
.ssm-float-close { display: none; }
.ssm-float-on > .ssm-float-close {
	display: flex !important;
	position: absolute !important;
	top: 4px;
	right: 4px;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	opacity: .75;
	transition: opacity .15s ease, background-color .15s ease;
	/* Above the player, which is absolutely positioned across the whole box. */
	z-index: 2;
	-webkit-appearance: none;
	appearance: none;
}
.ssm-float-on > .ssm-float-close:hover { opacity: 1; background: rgba(0, 0, 0, .78); }
.ssm-float-on > .ssm-float-close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; opacity: 1; }
.ssm-float-on > .ssm-float-close svg { display: block; }

/* ---- narrow screens ----------------------------------------------------
   A 340px box in a 390px window is most of the width, so it shrinks.

   IN PRACTICE THIS BLOCK IS ASLEEP, and it is worth knowing why rather than
   assuming the phones are handled. Not one of the 366 sales pages declares
   <meta name="viewport">, so a phone lays them out at the desktop width it
   defaults to -- measured at 1,232px on an iPhone -- and scales the whole
   page down to fit the screen. The media query is asking about that layout
   width, not the glass, so it does not match, and the float stays 340px of a
   1,232px page: about a third of the width, which is the same share of the
   screen a phone owner sees anyway. The rule is kept for the day a page gains
   a viewport tag, when it starts mattering on its own. */
@media (max-width: 600px) {
	.video-wrapper.ssm-float-on,
	.ssm-float-on {
		width: 200px !important;
		height: 113px !important;
		border-radius: 8px;
	}
	/* The gap narrows with the box. Each corner is given its own pair rather
	   than a blanket top/right, which would move whichever corner the visitor
	   chose back to the top right. */
	.ssm-float-on.ssm-at-tr { top: 10px !important; right: 10px !important; }
	.ssm-float-on.ssm-at-tl { top: 10px !important; left: 10px !important; }
	.ssm-float-on.ssm-at-bl { bottom: 10px !important; left: 10px !important; }
	.ssm-float-on.ssm-at-br { bottom: 10px !important; right: 66px !important; }
	.ssm-float-on > .ssm-float-close,
	.ssm-float-on > .ssm-float-grip { width: 26px; height: 26px; opacity: .9; }
	#ssm-float-bubble { width: 42px; height: 42px; }
	#ssm-float-bubble.ssm-at-tr { top: 10px; right: 10px; }
	#ssm-float-bubble.ssm-at-tl { top: 10px; left: 10px; }
	#ssm-float-bubble.ssm-at-bl { bottom: 10px; left: 10px; }
	#ssm-float-bubble.ssm-at-br { bottom: 10px; right: 66px; }
}

/* Someone who has asked for less movement gets the video in place, with no
   slide. It still floats -- that is the feature, not the decoration. */
@media (prefers-reduced-motion: reduce) {
	.video-wrapper.ssm-float-on,
	.ssm-float-on { animation: none; }
}