/* ==========================================================================
   RomaFlow Sticky Bar 816
   Compliant with SYSTEM.md (RomaFlow CSS + Fonts + Globals):
     §1 never reads/writes --text-primary / --text-secondary / --rf-ink
     §2 theme swap through [data-rf-theme] only — no prefers-color-scheme
     §3 fonts inherited via var(--rf-font) / var(--rf-font-mono)
     §4 mobile-first, real HTML flow (min-width queries only)
     §5 own namespace (--rfsb-816-*) with literal values
     §6 data-rf-atmo is never read — space inherits the dark text contract
   Mobile-first. Tokens follow the RomaFlow brand kit v2.
   Every visual value below is overridable from the Elementor Style tab.
   ========================================================================== */

.rfsb-816-root {
	/* --- Brand seeds ------------------------------------------------- */
	--rfsb-816-cyan: #00E5CC;
	--rfsb-816-blue: #0057FF;
	--rfsb-816-grad: linear-gradient(90deg, var(--rfsb-816-cyan) 0%, var(--rfsb-816-blue) 100%);
	--rfsb-816-conic: conic-gradient(from 180deg, var(--rfsb-816-cyan), var(--rfsb-816-blue), var(--rfsb-816-cyan));

	/* --- Surfaces (dark = site default; light swaps in below) ---------- */
	--rfsb-816-bar-bg: #12181F;
	--rfsb-816-bar-glass: rgba(18, 24, 31, .84);
	--rfsb-816-bar-veil: rgba(11, 15, 20, .90);
	--rfsb-816-bar-fg: #E6EBF2;
	--rfsb-816-muted: #B8C2D0;
	--rfsb-816-meta: #8B95A5;
	--rfsb-816-eyebrow-fg: #7FF5E6;
	--rfsb-816-line: rgba(255, 255, 255, .10);
	--rfsb-816-line-strong: rgba(255, 255, 255, .16);
	--rfsb-816-hover: rgba(255, 255, 255, .045);
	--rfsb-816-panel-bg: #161D26;
	--rfsb-816-close-bg: rgba(255, 255, 255, .07);
	--rfsb-816-elev: 0 8px 12px 6px rgba(0, 0, 0, .24), 0 4px 4px rgba(0, 0, 0, .38);
	--rfsb-816-overlay: rgba(6, 9, 13, .74);

	/* --- Typography — inherited from the site, never hardcoded --------- */
	--rfsb-816-font: var(--rf-font, "Noto Sans Hebrew", system-ui, sans-serif);
	--rfsb-816-font-mono: var(--rf-font-mono, "JetBrains Mono", ui-monospace, monospace);

	/* --- Metrics ------------------------------------------------------ */
	--rfsb-816-bar-min-h: 56px;
	--rfsb-816-icon-size: 18px;
	--rfsb-816-close-size: 40px;
	--rfsb-816-gap: 12px;
	--rfsb-816-popup-w: 760px;
	--rfsb-816-ticker-dur: 26s;
	--rfsb-816-z: 9990;

	/* --- Motion ------------------------------------------------------- */
	--rfsb-816-ease: cubic-bezier(.2, 0, 0, 1);
	--rfsb-816-ease-out: cubic-bezier(.16, 1, .3, 1);
	--rfsb-816-dur: .24s;

	position: fixed;
	inset-inline: 0;
	z-index: var(--rfsb-816-z);
	pointer-events: none;
	box-sizing: border-box;
	font-family: var(--rfsb-816-font);
	line-height: 1.35;
}

/* SYSTEM.md §2 + §6 — light is the only other text contract; space reuses dark. */
[data-rf-theme="light"] .rfsb-816-root {
	--rfsb-816-bar-bg: #FFFFFF;
	--rfsb-816-bar-glass: rgba(255, 255, 255, .88);
	--rfsb-816-bar-veil: rgba(255, 255, 255, .92);
	--rfsb-816-bar-fg: #0F172A;
	--rfsb-816-muted: #475569;
	--rfsb-816-meta: #64748B;
	--rfsb-816-eyebrow-fg: #006E63;
	--rfsb-816-line: rgba(15, 23, 42, .12);
	--rfsb-816-line-strong: rgba(15, 23, 42, .20);
	--rfsb-816-hover: rgba(15, 23, 42, .05);
	--rfsb-816-panel-bg: #FFFFFF;
	--rfsb-816-close-bg: rgba(15, 23, 42, .07);
	--rfsb-816-elev: 0 8px 12px 6px rgba(15, 23, 42, .10), 0 4px 4px rgba(15, 23, 42, .14);
	--rfsb-816-overlay: rgba(15, 23, 42, .58);
}

.rfsb-816-root *,
.rfsb-816-root *::before,
.rfsb-816-root *::after { box-sizing: border-box; }

.rfsb-816-root--bottom { bottom: 0; }
.rfsb-816-root--top    { top: 0; }

.rfsb-816-root.is-dismissed { display: none; }

.rfsb-816-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Bar shell
   -------------------------------------------------------------------------- */

.rfsb-816-bar {
	pointer-events: auto;
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: 100%;
	background-color: var(--rfsb-816-bar-bg);
	color: var(--rfsb-816-bar-fg);
	overflow: hidden;
	isolation: isolate;
	will-change: transform;
	transition: transform .55s var(--rfsb-816-ease-out), opacity .35s linear;
}

.rfsb-816-root--bottom .rfsb-816-bar {
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Decorative rail — only surfaces on the layouts that use it. */
.rfsb-816-rail {
	display: none;
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background-image: var(--rfsb-816-grad);
	z-index: 3;
}

.rfsb-816-trigger {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: var(--rfsb-816-gap);
	min-width: 0;
	min-height: var(--rfsb-816-bar-min-h);
	padding: 10px 14px;
	margin: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: start;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color var(--rfsb-816-dur) var(--rfsb-816-ease);
}

.rfsb-816-trigger:hover { background-color: var(--rfsb-816-hover); }

.rfsb-816-trigger:focus-visible,
.rfsb-816-dismiss:focus-visible,
.rfsb-816-close:focus-visible,
.rfsb-816-banner a:focus-visible {
	outline: 2px solid var(--rfsb-816-cyan);
	outline-offset: -3px;
}

/* Action-only mode: the bar stops swallowing clicks, the button keeps them. */
.rfsb-816-trigger--cta-only { pointer-events: none; cursor: default; }
.rfsb-816-trigger--cta-only:hover { background-color: transparent; }
.rfsb-816-trigger--cta-only .rfsb-816-cta { pointer-events: auto; cursor: pointer; }

.rfsb-816-lead {
	display: flex;
	align-items: center;
	gap: var(--rfsb-816-gap);
	flex: 1 1 auto;
	min-width: 0;
}

.rfsb-816-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--rfsb-816-icon-size);
	line-height: 1;
	color: var(--rfsb-816-cyan);
}

.rfsb-816-icon svg {
	width: var(--rfsb-816-icon-size);
	height: var(--rfsb-816-icon-size);
	fill: currentColor;
}

.rfsb-816-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.rfsb-816-eyebrow {
	font-family: var(--rfsb-816-font-mono);
	font-size: .6875rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--rfsb-816-eyebrow-fg);
	line-height: 1.2;
}

.rfsb-816-text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
	font-size: 1rem;
	line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Action button
   -------------------------------------------------------------------------- */

.rfsb-816-cta {
	position: relative;
	isolation: isolate;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	padding: 9px 16px;
	border-radius: 26px 4px 26px 4px;
	background-image: linear-gradient(45deg, #00776B 0%, #0044C7 100%);
	background-size: 180% 180%;
	color: #FFFFFF;
	font-size: .9375rem;
	font-weight: 600;
	white-space: nowrap;
	transition: transform var(--rfsb-816-dur) var(--rfsb-816-ease),
	            box-shadow var(--rfsb-816-dur) var(--rfsb-816-ease),
	            background-position .4s var(--rfsb-816-ease);
}

.rfsb-816-trigger:hover .rfsb-816-cta,
.rfsb-816-cta:hover {
	box-shadow: 0 6px 18px -6px rgba(0, 87, 255, .75);
	background-position: 100% 0;
}

.rfsb-816-cta-arrow {
	display: inline-flex;
	font-size: .8em;
	line-height: 1;
}

.rfsb-816-cta-arrow svg { width: 1em; height: 1em; fill: currentColor; }

.rfsb-816-dismiss {
	flex: 0 0 auto;
	width: 44px;
	min-height: 44px;
	align-self: center;
	margin-inline-end: 4px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--rfsb-816-meta);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	transition: color var(--rfsb-816-dur) linear, background-color var(--rfsb-816-dur) linear;
}

.rfsb-816-dismiss:hover { color: var(--rfsb-816-bar-fg); background-color: var(--rfsb-816-hover); }
.rfsb-816-dismiss svg { width: 13px; height: 13px; fill: currentColor; }

/* --------------------------------------------------------------------------
   Layout 1 — Ticker rail
   -------------------------------------------------------------------------- */

.rfsb-816-root--ticker .rfsb-816-rail { display: block; }
.rfsb-816-root--ticker .rfsb-816-bar  { border-radius: 0; }
.rfsb-816-root--ticker .rfsb-816-trigger { padding-block: 8px; gap: 10px; }
.rfsb-816-root--ticker .rfsb-816-copy { flex: 1 1 auto; overflow: hidden; }

.rfsb-816-ticker {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
}

/* v1.1.2 (2026-08-29): direction is explicit, not inherited (this site is Hebrew-only,
   always dir="rtl" -- there is no LTR mode to branch on). The mask-image edge-fade above
   (mask-image + transform + overflow:hidden is a known WebKit/iOS fragile combination)
   was removed as the leading suspect for the ticker text not rendering at all on mobile.
   v1.1.3 (2026-08-29): the direction FIX in v1.1.2 was a no-op -- `transform: translateX`
   is a physical transform, unaffected by the `direction` property, so swapping the
   keyframe's from/to while also dropping `[dir="rtl"]{animation-direction:reverse}`
   reproduced the exact same net motion as before (confirmed algebraically, then by Roma
   still seeing it backwards). The real bug: `[dir="rtl"]{reverse}` was reversing an
   animation whose UNREVERSED default (0% -> -50%, sliding the track left) was already the
   wanted RTL motion -- new text enters from the visible window's right edge as the track
   moves left, exits at the left edge. Restored the original keyframe values and dropped
   the reverse entirely: this ticker never needs conditional direction handling. */
.rfsb-816-ticker-track {
	display: flex;
	direction: rtl;
	width: max-content;
	gap: 44px;
	animation: rfsb816-ticker var(--rfsb-816-ticker-dur) linear infinite;
}

.rfsb-816-root--ticker .rfsb-816-trigger:hover .rfsb-816-ticker-track { animation-play-state: paused; }

.rfsb-816-ticker-item {
	flex: 0 0 auto;
	font-size: .9375rem;
	letter-spacing: .01em;
}

@keyframes rfsb816-ticker {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.rfsb-816-root--ticker .rfsb-816-cta {
	border-radius: 999px;
	min-height: 34px;
	padding: 6px 14px;
	font-size: .8125rem;
}

/* --------------------------------------------------------------------------
   Layout 2 — Split
   -------------------------------------------------------------------------- */

.rfsb-816-root--split .rfsb-816-bar { border-top: 1px solid var(--rfsb-816-line); }
.rfsb-816-root--split .rfsb-816-trigger { padding-inline-end: 0; gap: 10px; }

.rfsb-816-root--split .rfsb-816-cta {
	align-self: stretch;
	border-radius: 0;
	padding-inline: 18px;
	min-height: 100%;
}

/* --------------------------------------------------------------------------
   Layout 3 — Capsule
   -------------------------------------------------------------------------- */

.rfsb-816-root--capsule {
	padding: 12px;
	padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.rfsb-816-root--capsule .rfsb-816-bar {
	max-width: 660px;
	margin-inline: auto;
	border: 1px solid var(--rfsb-816-line-strong);
	border-radius: 999px;
	background-color: var(--rfsb-816-bar-glass);
	-webkit-backdrop-filter: blur(16px);
	        backdrop-filter: blur(16px);
	box-shadow: var(--rfsb-816-elev);
	padding-bottom: 0;
}

.rfsb-816-root--capsule .rfsb-816-trigger { padding: 8px 8px 8px 18px; min-height: 52px; }
[dir="rtl"] .rfsb-816-root--capsule .rfsb-816-trigger { padding: 8px 18px 8px 8px; }
.rfsb-816-root--capsule .rfsb-816-cta { border-radius: 999px; }
.rfsb-816-root--capsule .rfsb-816-dismiss { width: 38px; min-height: 38px; }

/* --------------------------------------------------------------------------
   Layout 4 — Hairline
   -------------------------------------------------------------------------- */

.rfsb-816-root--hairline .rfsb-816-bar {
	background-color: var(--rfsb-816-bar-veil);
	-webkit-backdrop-filter: blur(10px);
	        backdrop-filter: blur(10px);
	border-top: 1px solid var(--rfsb-816-line);
}

.rfsb-816-root--hairline .rfsb-816-trigger { min-height: 46px; padding-block: 6px; }
.rfsb-816-root--hairline .rfsb-816-text { -webkit-line-clamp: 1; font-size: .9375rem; }

.rfsb-816-root--hairline .rfsb-816-cta {
	background-image: none;
	background-color: transparent;
	color: var(--rfsb-816-cyan);
	border-radius: 0;
	padding: 0;
	min-height: 0;
	font-weight: 500;
	box-shadow: none;
}

.rfsb-816-root--hairline .rfsb-816-cta-label {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 0 1px;
	background-position: 100% 100%;
	transition: background-size .3s var(--rfsb-816-ease-out);
	padding-bottom: 2px;
}

[dir="rtl"] .rfsb-816-root--hairline .rfsb-816-cta-label { background-position: 0 100%; }

.rfsb-816-root--hairline .rfsb-816-trigger:hover .rfsb-816-cta-label,
.rfsb-816-root--hairline .rfsb-816-cta:hover .rfsb-816-cta-label { background-size: 100% 1px; }

.rfsb-816-root--hairline .rfsb-816-trigger:hover .rfsb-816-cta,
.rfsb-816-root--hairline .rfsb-816-cta:hover { box-shadow: none; }

/* --------------------------------------------------------------------------
   Layout 5 — Stack (mobile-native two rows)
   -------------------------------------------------------------------------- */

.rfsb-816-root--stack .rfsb-816-rail { display: block; }
.rfsb-816-root--stack .rfsb-816-bar  { border-top: 1px solid var(--rfsb-816-line); }

.rfsb-816-root--stack .rfsb-816-trigger {
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	padding: 14px 14px 12px;
}

.rfsb-816-root--stack .rfsb-816-cta { width: 100%; min-height: 48px; }
.rfsb-816-root--stack .rfsb-816-text { -webkit-line-clamp: 3; }

.rfsb-816-root--stack .rfsb-816-dismiss {
	position: absolute;
	inset-block-start: 6px;
	inset-inline-end: 6px;
	align-self: flex-start;
	z-index: 4;
	width: 36px;
	min-height: 36px;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Entrance animations — JS adds .is-visible
   -------------------------------------------------------------------------- */

.rfsb-816-in--rise .rfsb-816-bar,
.rfsb-816-in--fade .rfsb-816-bar,
.rfsb-816-in--expand .rfsb-816-bar,
.rfsb-816-in--skew .rfsb-816-bar { opacity: 0; }

.rfsb-816-root--bottom.rfsb-816-in--rise .rfsb-816-bar { transform: translate3d(0, 115%, 0); }
.rfsb-816-root--top.rfsb-816-in--rise    .rfsb-816-bar { transform: translate3d(0, -115%, 0); }

.rfsb-816-root--bottom.rfsb-816-in--expand .rfsb-816-bar { transform: scaleY(.35); transform-origin: bottom center; }
.rfsb-816-root--top.rfsb-816-in--expand    .rfsb-816-bar { transform: scaleY(.35); transform-origin: top center; }

.rfsb-816-root--bottom.rfsb-816-in--skew .rfsb-816-bar { transform: translate3d(0, 60%, 0) skewY(2.5deg); transform-origin: bottom center; }
.rfsb-816-root--top.rfsb-816-in--skew    .rfsb-816-bar { transform: translate3d(0, -60%, 0) skewY(-2.5deg); transform-origin: top center; }

.rfsb-816-root.is-visible .rfsb-816-bar {
	opacity: 1;
	transform: translate3d(0, 0, 0) scaleY(1) skewY(0);
}

/* Tuck away on downward scroll. */
.rfsb-816-root--bottom.is-tucked .rfsb-816-bar { transform: translate3d(0, 115%, 0); opacity: 0; }
.rfsb-816-root--top.is-tucked    .rfsb-816-bar { transform: translate3d(0, -115%, 0); opacity: 0; }

/* --------------------------------------------------------------------------
   Attention effects
   -------------------------------------------------------------------------- */

/* Glow — breathing light hugging the bar edge. */
.rfsb-816-fx--glow .rfsb-816-bar::before {
	content: "";
	position: absolute;
	inset-inline: 12%;
	inset-block-start: 0;
	height: 3px;
	background-image: var(--rfsb-816-grad);
	filter: blur(7px);
	opacity: .5;
	z-index: 2;
	animation: rfsb816-glow 3.4s var(--rfsb-816-ease) infinite alternate;
	pointer-events: none;
}

@keyframes rfsb816-glow {
	from { opacity: .28; transform: scaleX(.72); }
	to   { opacity: .95; transform: scaleX(1); }
}

/* Sweep — a light band crosses the bar. */
.rfsb-816-fx--sweep .rfsb-816-bar::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 38%;
	background-image: linear-gradient(100deg, transparent 0%, rgba(0, 229, 204, .16) 45%, rgba(255, 255, 255, .12) 55%, transparent 100%);
	transform: translate3d(-140%, 0, 0);
	animation: rfsb816-sweep 5.2s var(--rfsb-816-ease) infinite;
	z-index: 1;
	pointer-events: none;
}

@keyframes rfsb816-sweep {
	0%   { transform: translate3d(-140%, 0, 0); }
	62%  { transform: translate3d(320%, 0, 0); }
	100% { transform: translate3d(320%, 0, 0); }
}

[dir="rtl"] .rfsb-816-fx--sweep .rfsb-816-bar::after { animation-direction: reverse; }

/* Beam — a gradient segment runs along the top edge. */
.rfsb-816-fx--beam .rfsb-816-bar::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	height: 2px;
	width: 34%;
	background-image: linear-gradient(90deg, transparent, var(--rfsb-816-cyan), var(--rfsb-816-blue), transparent);
	animation: rfsb816-beam 3.8s var(--rfsb-816-ease) infinite;
	z-index: 3;
	pointer-events: none;
}

@keyframes rfsb816-beam {
	0%   { transform: translate3d(-110%, 0, 0); }
	100% { transform: translate3d(400%, 0, 0); }
}

[dir="rtl"] .rfsb-816-fx--beam .rfsb-816-bar::before { animation-direction: reverse; }

/* Conic — gradient rim sweeping around the action. */
@property --rfsb-816-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
	.rfsb-816-fx--conic .rfsb-816-cta::before {
		content: "";
		position: absolute;
		inset: -2px;
		border-radius: inherit;
		padding: 2px;
		/* Static fallback angle so browsers without @property still show the rim. */
		--rfsb-816-angle: 0deg;
		background-image: conic-gradient(from var(--rfsb-816-angle), var(--rfsb-816-cyan), var(--rfsb-816-blue), var(--rfsb-816-cyan));
		-webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
		-webkit-mask-clip: content-box, border-box;
		-webkit-mask-composite: xor;
		        mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
		        mask-clip: content-box, border-box;
		        mask-composite: exclude;
		animation: rfsb816-angle 5s linear infinite;
		pointer-events: none;
	}
}

@keyframes rfsb816-angle {
	to { --rfsb-816-angle: 360deg; }
}

/* Nudge — the arrow taps toward the reading direction. */
.rfsb-816-fx--nudge .rfsb-816-cta-arrow {
	--rfsb-816-nudge: -5px;
	animation: rfsb816-nudge 2.2s var(--rfsb-816-ease) infinite;
}

[dir="ltr"] .rfsb-816-fx--nudge .rfsb-816-cta-arrow { --rfsb-816-nudge: 5px; }

@keyframes rfsb816-nudge {
	0%, 62%, 100% { transform: translate3d(0, 0, 0); }
	74%           { transform: translate3d(var(--rfsb-816-nudge), 0, 0); }
	86%           { transform: translate3d(calc(var(--rfsb-816-nudge) / 4), 0, 0); }
}

/* Pulse — a ring escapes the action. */
.rfsb-816-fx--pulse .rfsb-816-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1px solid var(--rfsb-816-cyan);
	animation: rfsb816-pulse 2.6s var(--rfsb-816-ease-out) infinite;
	pointer-events: none;
}

@keyframes rfsb816-pulse {
	0%       { opacity: .75; transform: scale(1); }
	70%,100% { opacity: 0;   transform: scale(1.22); }
}

/* Shift — the action gradient drifts continuously. */
.rfsb-816-fx--shift .rfsb-816-cta {
	background-size: 240% 240%;
	animation: rfsb816-shift 7s var(--rfsb-816-ease) infinite alternate;
}

@keyframes rfsb816-shift {
	from { background-position: 0% 50%; }
	to   { background-position: 100% 50%; }
}

/* --------------------------------------------------------------------------
   Dialog
   -------------------------------------------------------------------------- */

.rfsb-816-overlay {
	position: fixed;
	inset: 0;
	z-index: 1;
	background-color: var(--rfsb-816-overlay);
	opacity: 0;
	pointer-events: none;
	transition: opacity .22s linear;
}

.rfsb-816-root.is-open .rfsb-816-overlay { opacity: 1; pointer-events: auto; }

.rfsb-816-dialog {
	position: fixed;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	pointer-events: none;
	visibility: hidden;
}

.rfsb-816-root.is-open .rfsb-816-dialog { pointer-events: auto; visibility: visible; }

.rfsb-816-panel {
	position: relative;
	width: 100%;
	max-width: var(--rfsb-816-popup-w);
	max-height: 86vh;
	max-height: 86dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 18px;
	border: 1px solid var(--rfsb-816-line);
	border-radius: 20px 4px 20px 4px;
	background-color: var(--rfsb-816-panel-bg);
	color: var(--rfsb-816-bar-fg);
	box-shadow: var(--rfsb-816-elev);
	opacity: 0;
	transition: transform .32s var(--rfsb-816-ease-out), opacity .22s linear;
}

.rfsb-816-root.is-open .rfsb-816-panel { opacity: 1; transform: none; }

.rfsb-816-pop--rise .rfsb-816-panel { transform: translate3d(0, 28px, 0); }
.rfsb-816-pop--zoom .rfsb-816-panel { transform: scale(.93); }
.rfsb-816-pop--fade .rfsb-816-panel { transform: none; }

.rfsb-816-close {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--rfsb-816-close-size);
	height: var(--rfsb-816-close-size);
	padding: 0;
	border: 0;
	border-radius: 999px;
	background-color: var(--rfsb-816-close-bg);
	color: var(--rfsb-816-muted);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .16s linear, color .16s linear;
}

.rfsb-816-close svg { width: 14px; height: 14px; fill: currentColor; }

.rfsb-816-panel-heading {
	margin: 0 var(--rfsb-816-close-size) 14px 0;
	font-size: 1.25rem;
	line-height: 1.3;
	letter-spacing: -.01em;
}

[dir="rtl"] .rfsb-816-panel-heading { margin: 0 0 14px var(--rfsb-816-close-size); }

.rfsb-816-banner { width: 100%; }
.rfsb-816-banner img { max-width: 100%; height: auto; display: block; margin-inline: auto; }
.rfsb-816-banner iframe { max-width: 100%; border: 0; }
.rfsb-816-banner-link { display: inline-block; }

.rfsb-816-note {
	margin: 14px 0 0;
	font-size: .75rem;
	line-height: 1.5;
	color: var(--rfsb-816-meta);
}

/* --------------------------------------------------------------------------
   Editor canvas — bar sits in flow, dialog stays open for styling
   -------------------------------------------------------------------------- */

.rfsb-816-root--editor { position: relative; pointer-events: auto; }
.rfsb-816-root--editor .rfsb-816-bar { transform: none; opacity: 1; }
.rfsb-816-root--editor .rfsb-816-overlay { display: none; }

.rfsb-816-root--editor .rfsb-816-dialog {
	position: relative;
	inset: auto;
	visibility: visible;
	pointer-events: auto;
	padding: 16px 0 0;
}

.rfsb-816-root--editor .rfsb-816-panel { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Narrow viewports (<=480px) — row-under-row reflow, SYSTEM.md §4
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
	.rfsb-816-root--split .rfsb-816-trigger,
	.rfsb-816-root--capsule .rfsb-816-trigger {
		flex-wrap: wrap;
		row-gap: 10px;
		padding-inline-end: 14px;
	}

	.rfsb-816-root--split .rfsb-816-lead,
	.rfsb-816-root--capsule .rfsb-816-lead { flex: 1 1 100%; }

	.rfsb-816-root--split .rfsb-816-cta,
	.rfsb-816-root--capsule .rfsb-816-cta {
		flex: 1 1 100%;
		align-self: auto;
		min-height: 44px;
		border-radius: var(--rfsb-816-r-cta, 26px 4px 26px 4px);
	}

	.rfsb-816-root--capsule .rfsb-816-bar { border-radius: 22px; }
	.rfsb-816-text { -webkit-line-clamp: 3; }
	.rfsb-816-panel-heading { font-size: 1.125rem; }
}

/* --------------------------------------------------------------------------
   Breakpoints — mobile is the base, these only add room
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
	.rfsb-816-root { --rfsb-816-gap: 16px; }
	.rfsb-816-trigger { padding: 12px 24px; }
	.rfsb-816-text { -webkit-line-clamp: 1; font-size: 1.0625rem; }
	.rfsb-816-cta { padding: 11px 22px; min-height: 44px; }
	.rfsb-816-root--capsule .rfsb-816-trigger { padding: 8px 8px 8px 22px; }
	[dir="rtl"] .rfsb-816-root--capsule .rfsb-816-trigger { padding: 8px 22px 8px 8px; }
	.rfsb-816-root--stack .rfsb-816-trigger { flex-direction: row; align-items: center; padding: 12px 24px; }
	.rfsb-816-root--stack .rfsb-816-cta { width: auto; }
	.rfsb-816-root--stack .rfsb-816-dismiss { position: static; align-self: center; }
	.rfsb-816-root--split .rfsb-816-cta { padding-inline: 28px; }
	.rfsb-816-panel { padding: 28px; }
	.rfsb-816-panel-heading { font-size: 1.5rem; }
	.rfsb-816-ticker-item { font-size: 1rem; }
}

@media (min-width: 1024px) {
	.rfsb-816-trigger { padding: 12px 40px; }
	.rfsb-816-root--capsule .rfsb-816-bar { max-width: 760px; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.rfsb-816-root,
	.rfsb-816-root *,
	.rfsb-816-root *::before,
	.rfsb-816-root *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	.rfsb-816-root .rfsb-816-bar,
	.rfsb-816-root .rfsb-816-panel { transform: none !important; opacity: 1 !important; }
	.rfsb-816-ticker-track { animation: none !important; }
}