/*
 * Promoted-brand furniture — the contact rail and the sticky action bar.
 * Rendered by inc/promo.php; loaded only when a brand is configured.
 *
 * The two never appear together and between them they cover every width: the
 * rail is a DESKTOP element and the bar is the everywhere-else element.
 *
 * THE BREAKPOINT IS 1360px, AND IT IS A COMPLIANCE NUMBER, NOT A TASTE ONE.
 * The rail is fixed to the right edge, so it may only exist where the page has
 * a free gutter to put it in: container 1200px + 2 x 74px rail + air = 1360.
 * At the old 1024px switch the rail sat ON TOP of the reading column — measured
 * at a 1096px viewport it covered table cells, paragraphs, list items and a FAQ
 * accordion button, i.e. it also swallowed a click target. That breaks the
 * standing rule that nothing may cover page content (CLAUDE.md §7, and the
 * 2026-07-14 pass that deleted the hero peek animation for the same reason).
 * If you widen --sn-container, widen this query with it.
 */

/* ---------- Floating contact rail (desktop) ---------- */

.xac4a4a21 {
	display: none;
}

@media (min-width: 1360px) {
	.xac4a4a21 {
		position: fixed;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		z-index: 90; /* under the sticky header (100), over page content */
		display: flex;
		flex-direction: column;
		/* The 1px gaps let the container colour through as hairline dividers,
		   which is what stops the stack reading as one undifferentiated blob. */
		gap: 1px;
		background: var(--sn-acc-1);
		border: var(--sn-rule) solid var(--sn-acc-3);
		border-right: 0;
		border-radius: var(--sn-radius) 0 0 var(--sn-radius);
		box-shadow:
			0 0 22px color-mix(in srgb, var(--sn-acc-1) 45%, transparent),
			0 0 56px color-mix(in srgb, var(--sn-acc-3) 25%, transparent);
		/* NO overflow: hidden here. It used to clip the QR flyout out of
		   existence — the panel was painted and then cropped by the parent, so
		   the feature looked dead. Corners are rounded per item instead. */
	}

	.x45151fb8 {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--sn-sp-1);
		width: 74px;
		min-height: 74px;
		padding: var(--sn-sp-3) var(--sn-sp-2);
		background: var(--sn-lacquer-grad);
		color: var(--sn-on-chrome);
		font-family: var(--sn-font-display);
		font-size: .8125rem;
		font-weight: 600;
		/* 1.45, not the 1.3 this had: the labels can be Thai (the CTA label is)
		   and Thai stacks marks above and below the baseline (CLAUDE.md §1). */
		line-height: 1.45;
		text-align: center;
		text-decoration: none;
		/* The QR item is a <button>; strip the UA chrome so it matches the links. */
		border: 0;
		cursor: pointer;
		transition: background .15s ease, color .15s ease;
	}

	/*
	 * :visited — THE SAME BUG AS 2026-07-29, in a new place. base.css sets
	 * `a:visited { color: var(--sn-accent) }`, which is specificity (0,1,1) and
	 * therefore BEATS a plain class rule like .x33efe856 (0,1,0). The
	 * moment a visitor had followed the rail link, its label repainted itself
	 * magenta — on a cyan tab, and on the LINE green. Every rail item that
	 * declares a colour has to declare it for :visited too. The .x5861cc7d family
	 * dodges this by routing ink through --sn-btn-ink; these are not buttons.
	 */
	.x45151fb8,
	.x45151fb8:visited { color: var(--sn-on-chrome); }

	/*
	 * The end items follow the container's curve from the INSIDE: the rail
	 * is --sn-radius (8px) behind a --sn-rule (2px) frame, so the inner
	 * corner an item sits in is 8 - 2 = 6px. A smaller value leaves a wedge
	 * of the rail's slime background in the corner; a larger one cuts into
	 * the frame. BOTH NUMBERS MOVE WITH THE TOKENS — re-derive it if
	 * --sn-radius or --sn-rule changes.
	 *
	 * PER-CORNER, NOT A SHORTHAND, and that is the bug this fixes: when the
	 * admin has filled in ONLY the CTA (no LINE, phone or QR), one element is
	 * both first and last child, and a later shorthand reset the corner the
	 * earlier rule had just set. Any rule keyed to a rail end must set a
	 * single corner.
	 */
	.xac4a4a21 > :first-child { border-top-left-radius: 6px; }
	.xac4a4a21 > :last-child  { border-bottom-left-radius: 6px; }

	.x45151fb8 svg {
		width: 24px;
		height: 24px;
		flex: 0 0 auto;
	}

	/* Hover BRIGHTENS to the cyan fill with ink on it. The rail item is a dark
	   slab, so brightening is the safe direction here — the rule to keep is
	   "move AWAY from the surface underneath", not "always darken". */
	.x45151fb8:hover,
	.x45151fb8:focus-visible,
	.x45151fb8:visited:hover {
		background: var(--sn-acc-3);
		color: var(--sn-bg);
		text-decoration: none;
	}

	/* The action item. The rail leads with it because the sticky bar — the only
	   other persistent CTA — is a phone-only surface. */
	/* A flat slime key, NOT the action gradient. The gradient survives in
	   exactly two places on this skin (the progress bar and the cta-banner
	   slab) and a third use here would stop it meaning anything; the rail
	   CTA reads as the action because it is the one SLIME item in a stack of
	   dark ones, which is the same signal the arcade keys use everywhere
	   else. */
	.x33efe856,
	.x33efe856:visited {
		background: var(--sn-acc-1);
		color: var(--sn-bg);
		animation: x829bc9f3 2.6s ease-in-out infinite;
	}

	.x33efe856:hover,
	.x33efe856:focus-visible {
		background: var(--sn-primary-hover);
		color: var(--sn-bg);
	}

	/* LINE keeps its own green so the channel is recognisable at a glance —
	   this is the one place brand recognition beats palette consistency.
	   The bubble is WHITE (that is the actual LINE lock-up; as dark ink it read
	   as a muddy blob against the green) while the LABEL stays dark ink, which
	   is the only way text clears AA on this green — white would be 2.6:1. */
	.xc1abc6c1,
	.xc1abc6c1:visited {
		background: linear-gradient(170deg, #4BE08A 0%, #06C755 55%, #04A445 100%);
		color: #05320F;
	}

	.xc1abc6c1 svg {
		color: #FFFFFF;
		filter: drop-shadow(0 1px 2px rgba(4, 74, 30, .45));
	}

	.xc1abc6c1:hover,
	.xc1abc6c1:focus-visible {
		background: linear-gradient(170deg, #38D97C 0%, #05B44C 55%, #038B3A 100%);
		color: #FFFFFF;
	}

	/* The label is long (a phone number, or a Thai CTA); let it wrap. */
	.x481509ca {
		display: block;
		word-break: break-word;
	}

	/*
	 * QR flyout. Opens on hover AND on click/keyboard: the click path is
	 * assets/js/promo.js flipping aria-expanded on the button, so the mouse
	 * needs no JS and the keyboard is not locked out.
	 */
	/* The panel stays WHITE even though the skin is dark — a QR code needs a
	   light quiet zone to scan reliably, and the exported code carries a white
	   field anyway. Its caption therefore has to be INK: --sn-text is a light
	   grey on this skin and would have been invisible on this one white surface
	   (see the caption rule below). */
	.xf68993ed {
		position: absolute;
		right: calc(100% + 10px);
		top: 50%;
		transform: translateY(-50%) scale(.94);
		width: 176px;
		padding: var(--sn-sp-3);
		background: #FFFFFF;
		border: var(--sn-rule) solid var(--sn-acc-1);
		border-radius: var(--sn-radius);
		box-shadow: 0 0 26px color-mix(in srgb, var(--sn-acc-1) 55%, transparent);
		opacity: 0;
		visibility: hidden;
		transition: opacity .18s ease, transform .18s ease, visibility .18s;
	}

	.xf68993ed img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: var(--sn-radius-sm);
	}

	.x806e4ca1 {
		display: block;
		margin-top: var(--sn-sp-2);
		/* INK, not --sn-text: this is the theme's one white surface, and
		   --sn-text is a near-white that would be invisible on it. */
		color: var(--sn-bg);
		font-family: var(--sn-font);
		font-size: var(--sn-fs-xs);
		font-weight: 400;
		line-height: var(--sn-lh-body);
	}

	.xa641aafa:hover .xf68993ed,
	.xa641aafa[aria-expanded="true"] .xf68993ed {
		opacity: 1;
		visibility: visible;
		transform: translateY(-50%) scale(1);
	}
}

/* ---------- Sticky action bar (everything under the rail's breakpoint) ---------- */

.xeaa43607 {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 95;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sn-sp-3);
	padding: var(--sn-sp-3) var(--sn-sp-4);
	/* Sits above the iOS home indicator instead of under it. */
	padding-bottom: max(var(--sn-sp-3), env(safe-area-inset-bottom));
	background: var(--sn-pat-scanlines), var(--sn-lacquer-grad);
	border-top: var(--sn-rule) solid var(--sn-acc-1);
	box-shadow: 0 0 26px color-mix(in srgb, var(--sn-acc-1) 40%, transparent);
	color: var(--sn-on-chrome);
}

/*
 * Reserve the bar's height at the bottom of the document.
 *
 * COMPLIANCE: this theme has a standing rule that nothing may cover page
 * content (CLAUDE.md §12, 2026-07-14 — it is why the old hero peek animation
 * was removed). A fixed bar breaks that rule unless the page grows to
 * compensate, so it does: at the end of a scroll the last element clears the
 * bar and nothing is permanently hidden. Do not remove this padding to
 * "reclaim" the space.
 */
body:has(.xeaa43607) {
	padding-bottom: 88px;
}

.xce8dd077 {
	display: flex;
	align-items: center;
	gap: var(--sn-sp-3);
	min-width: 0; /* lets the text column shrink instead of pushing the button */
}

.x176d4f93 {
	flex: 0 0 auto;
	display: block;
	width: 44px;
	height: 44px;
	border-radius: var(--sn-radius-sm);
	overflow: hidden;
	background: var(--sn-surface-2);
	border: var(--sn-rule) solid var(--sn-acc-3);
}

.x176d4f93 img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.x14695f0f {
	display: flex;
	flex-direction: column;
	min-width: 0;
	font-size: var(--sn-fs-xs);
	line-height: 1.45;
}

.x14695f0f strong {
	font-family: var(--sn-font-display);
	font-weight: 600;
	color: var(--sn-acc-1);
}

/* One line only — a wrapped tagline would double the bar's height and eat
   the fold on the phones this bar exists for. */
.x14695f0f span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: color-mix(in srgb, var(--sn-on-chrome) 72%, transparent);
}

.x0c25e337 {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--sn-sp-2);
}

/* LINE, icon only. 44px is the touch-target floor, and it stays green for the
   same recognition reason as the rail item. */
/* :visited here too — see the rail note above. */
.x933c9a15,
.x933c9a15:visited {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--sn-radius-sm);
	border: var(--sn-rule) solid var(--sn-heading);
	background: linear-gradient(170deg, #4BE08A 0%, #06C755 55%, #04A445 100%);
	color: #FFFFFF;
}

.x933c9a15 svg {
	width: 24px;
	height: 24px;
}

.x933c9a15:hover,
.x933c9a15:focus-visible {
	background: linear-gradient(170deg, #38D97C 0%, #05B44C 55%, #038B3A 100%);
	color: #FFFFFF;
}

/*
 * The bar's height is set by its tallest child, and that is this key — so
 * every pixel here is a pixel of viewport taken away from the page above it,
 * which on a phone is the page that has to show the first casino pick.
 * 44px is the touch-target floor and the bar is 8px shorter for it.
 */
.x12830c50 {
	flex: 0 0 auto;
	min-height: 44px;
	padding: var(--sn-sp-2) var(--sn-sp-6);
}

@media (min-width: 1360px) {
	.xeaa43607 {
		display: none;
	}

	body:has(.xeaa43607) {
		padding-bottom: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.x45151fb8,
	.xf68993ed {
		transition: none;
	}

	.x33efe856 {
		animation: none;
	}
}