/* Shortbread - Banner, Modal, Softwall */

/* ── Bundled font: Plus Jakarta Sans (self-hosted, OFL) ─────────────────── */
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal; font-weight: 400; font-display: swap;
	src: url('../fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal; font-weight: 500; font-display: swap;
	src: url('../fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal; font-weight: 600; font-display: swap;
	src: url('../fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal; font-weight: 700; font-display: swap;
	src: url('../fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');
}

:root {
	/* Accent — the single knob. Overridden per-site via an injected :root rule.
	   --sb-primary is the accent; --sb-primary-contrast (button/label text on the
	   accent) is computed from the accent's luminance in PHP. Everything else is
	   derived here at runtime with color-mix(), so changing the accent restyles
	   hover / active / tint / focus automatically (Tailwind-style shade scale). */
	--sb-primary:          #E11A7F;
	--sb-primary-contrast: #ffffff;
	--sb-primary-hover:    color-mix(in srgb, var(--sb-primary) 86%, #000);
	--sb-primary-active:   color-mix(in srgb, var(--sb-primary) 74%, #000);
	--sb-primary-tint:     color-mix(in srgb, var(--sb-primary) 12%, #fff);
	--sb-ring:             color-mix(in srgb, var(--sb-primary) 45%, #fff);
	/* Back-compat alias for the old button-text variable. */
	--sb-btn-text:         var(--sb-primary-contrast);
	/* Accent used as a foreground/fill on the white card (toggle "on" track,
	   links). Defaults to the accent; when the accent is too light to read on
	   white, accent_css() overrides this to --sb-primary-contrast (the dark YIQ
	   colour) so toggles and links stay legible. */
	--sb-accent-on-white:  var(--sb-primary);

	/* Neutral base — white surfaces, grey accents (Tailwind gray scale). */
	--sb-bg:         #ffffff;
	--sb-surface:    #ffffff;
	--sb-border:     #e5e7eb; /* gray-200 */
	--sb-dark:       #111827; /* gray-900 — primary text */
	--sb-muted:      #6b7280; /* gray-500 — secondary text */
	--sb-muted-2:    #9ca3af; /* gray-400 */

	--sb-radius:     12px;
	/* Default font — overridden to `inherit` when "Use site font" is on
	   (see SB_Settings::accent_css, injected on :root). */
	--sb-font:       'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--sb-z-banner:   99997;
	--sb-z-modal:    99999;
	--sb-z-softwall: 99998;
	--sb-z-reopen:   99996;
}

/* ── Specificity guard against theme/Elementor global kit ───────────────── */
/* Page-builder kits style bare h2/h3/p/button/a. We win by scoping every rule
   under our component ids — an id outranks any number of theme classes — so
   almost nothing here needs !important. The single exception is font-family:
   some kits force it globally with !important, and losing the font is very
   visible, so we answer !important with !important on that one property only. */
#sb-banner, #sb-banner *,
#sb-modal, #sb-modal *,
#sb-softwall, #sb-softwall *,
#sb-reopen, .sb-placeholder, .sb-placeholder * {
	font-family: var(--sb-font) !important; /* deliberate exception */
	box-sizing: border-box;
	letter-spacing: normal;
}
/* [hidden] must beat our own display rules. #id[hidden] (1,1,0) already outranks
   .class{display} (0,1,0), so specificity alone does it. */
#sb-banner[hidden], #sb-modal[hidden], #sb-softwall[hidden], #sb-reopen[hidden] {
	display: none;
}
#sb-modal .sb-modal__title,
#sb-softwall .sb-softwall__title {
	/* !important: some theme/Elementor kits set heading font-size with
	   !important, which beats plain id specificity — answer it in kind. */
	font-size: 20px !important;
	font-weight: 700;
	color: var(--sb-dark);
	text-transform: none;
	line-height: 1.3;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}
#sb-modal .sb-acc__name {
	font-size: 16px !important;
	font-weight: 700;
	color: var(--sb-dark);
	text-transform: none;
	line-height: 1.3;
	margin: 0;
}
/* Dark text base so a theme's light body colour can't bleed onto the white surface. */
#sb-banner, #sb-banner .sb-banner__inner,
#sb-modal .sb-modal__box,
#sb-softwall .sb-softwall__inner {
	color: var(--sb-dark);
}
#sb-modal p, #sb-banner p, #sb-softwall p {
	margin: 0;
	padding: 0;
	text-transform: none;
}
/* Muted copy stays a legible grey. Set on the classed element, so it beats the
   inherited dark base above without needing !important. */
#sb-modal .sb-modal__intro,
#sb-modal .sb-acc__desc,
#sb-modal .sb-service__desc,
#sb-banner .sb-banner__body {
	color: var(--sb-muted);
}
#sb-modal .sb-modal__intro { padding: 0 24px 14px; }
/* Links: accent colour, id-scoped so a theme / Elementor global kit styling
   bare <a> can't override it (id 1,1,0 beats their class/element selectors).
   Uses the same accent-on-white fallback as toggles — if the accent is too
   light to read on the white card, links use the dark contrast colour. */
#sb-modal a, #sb-banner a {
	color: var(--sb-accent-on-white);
	box-shadow: none;
	text-decoration: underline;
}
#sb-modal a:hover, #sb-banner a:hover { color: var(--sb-primary-hover); }

/* Buttons — id-scoped so they beat theme button styling by specificity. */
#sb-banner .sb-btn, #sb-modal .sb-btn, #sb-softwall .sb-btn, .sb-placeholder .sb-placeholder__btn {
	font-family: var(--sb-font) !important; /* deliberate exception */
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-transform: none;
	text-decoration: none;
	border-radius: 8px;
	border-width: 2px;
	border-style: solid;
	box-shadow: none;
	width: auto;
	min-width: 0;
	text-shadow: none;
}
#sb-banner .sb-btn--primary, #sb-modal .sb-btn--primary, #sb-softwall .sb-btn--primary {
	background: var(--sb-primary);
	color: var(--sb-primary-contrast, #fff);
	border-color: var(--sb-primary);
}
#sb-banner .sb-btn--primary:hover, #sb-modal .sb-btn--primary:hover, #sb-softwall .sb-btn--primary:hover {
	background: var(--sb-primary-hover, var(--sb-primary));
	border-color: var(--sb-primary-hover, var(--sb-primary));
	color: var(--sb-primary-contrast, #fff);
}
#sb-banner .sb-btn--secondary, #sb-modal .sb-btn--secondary, #sb-softwall .sb-btn--secondary {
	background: var(--sb-surface, #fff);
	color: var(--sb-dark);
	border-color: var(--sb-border);
}
#sb-banner .sb-btn--ghost, #sb-modal .sb-btn--ghost, #sb-softwall .sb-btn--ghost {
	background: transparent;
	color: var(--sb-muted);
	border-color: transparent;
}
#sb-banner .sb-btn--ghost:hover, #sb-modal .sb-btn--ghost:hover, #sb-softwall .sb-btn--ghost:hover {
	color: var(--sb-dark);
}

/* ── Shared button base ─────────────────────────────────────────── */

.sb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sb-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	padding: 10px 20px;
	border-radius: 8px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
	white-space: nowrap;
	text-decoration: none;
}
.sb-btn:focus-visible { outline: 3px solid var(--sb-ring, var(--sb-primary)); outline-offset: 2px; }

.sb-btn--primary {
	background: var(--sb-primary);
	color: var(--sb-primary-contrast, #fff);
	border-color: var(--sb-primary);
}
.sb-btn--primary:hover {
	background: var(--sb-primary-hover, var(--sb-primary));
	border-color: var(--sb-primary-hover, var(--sb-primary));
}
.sb-btn--primary:active { background: var(--sb-primary-active, var(--sb-primary)); border-color: var(--sb-primary-active, var(--sb-primary)); }

.sb-btn--secondary {
	background: var(--sb-surface, #fff);
	color: var(--sb-dark);
	border-color: var(--sb-border);
}
.sb-btn--secondary:hover { border-color: var(--sb-muted-2, #9ca3af); background: color-mix(in srgb, var(--sb-primary) 5%, #fff); }

.sb-btn--ghost {
	background: transparent;
	color: var(--sb-muted, #6b7280);
	border-color: transparent;
	padding-left: 8px;
	padding-right: 8px;
}
.sb-btn--ghost:hover { color: var(--sb-dark); }

/* ── Banner ─────────────────────────────────────────────────────── */

.sb-banner {
	position: fixed;
	left: 0;
	right: 0;
	z-index: var(--sb-z-banner);
	background: #fff;
	font-family: var(--sb-font);
	font-size: 14px;
	line-height: 1.5;
	color: var(--sb-dark);
	box-shadow: 0 -4px 24px rgba(1,36,58,.1);
	border-top: 3px solid var(--sb-primary);
}

/* Position variants */
.sb-banner--top    { top: 0; bottom: auto; border-top: none; border-bottom: 3px solid var(--sb-primary); box-shadow: 0 4px 24px rgba(1,36,58,.1); }
.sb-banner--bottom { bottom: 0; top: auto; }

/* Layout: bar (default) */
.sb-banner--bar .sb-banner__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px 24px;
	flex-wrap: wrap;
}
.sb-banner--bar .sb-banner__content { flex: 1; min-width: 200px; }
.sb-banner--bar .sb-banner__actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }

/* Layout: box (floating card, bottom-left — Complianz-style) */
.sb-banner--box {
	left: 24px;
	right: auto;
	bottom: 24px;
	top: auto;
	width: 400px;
	max-width: calc(100vw - 48px);
	border-radius: 14px;
	border: 1px solid var(--sb-border);
	border-top: 1px solid var(--sb-border);
	box-shadow: 0 12px 40px rgba(17,24,39,.16), 0 2px 8px rgba(17,24,39,.08);
}
.sb-banner--box.sb-banner--top    { top: 24px; bottom: auto; }
/* Horizontal float for the box (defaults to left; see base rule above). */
.sb-banner--box.sb-banner--align-left  { left: 24px; right: auto; }
.sb-banner--box.sb-banner--align-right { left: auto; right: 24px; }
.sb-banner--box .sb-banner__inner {
	padding: 20px;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 12px;
	row-gap: 12px;
	align-items: start;
}
/* Small icon sits inline to the left of the title; body spans full width below. */
.sb-banner--box .sb-banner__icon { grid-column: 1; align-self: center; }
.sb-banner--box .sb-banner__content { grid-column: 2; }
.sb-banner--box .sb-banner__title { font-size: 16px; font-weight: 700; margin: 0; }
.sb-banner--box .sb-banner__body  { grid-column: 1 / -1; font-size: 13.5px; margin: 0; }
/* Primary full width, secondary actions share a row underneath. */
.sb-banner--box .sb-banner__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.sb-banner--box #sb-accept-all { flex: 1 1 100%; }
.sb-banner--box #sb-reject-all,
.sb-banner--box #sb-manage      { flex: 1 1 calc(50% - 4px); }

/* Layout: modal (centred with backdrop) */
.sb-banner--modal {
	left: 50%;
	top: 50%;
	bottom: auto;
	right: auto;
	transform: translate(-50%, -50%);
	border-radius: var(--sb-radius);
	max-width: 480px;
	width: 90%;
	border-top: none;
	box-shadow: 0 20px 60px rgba(1,36,58,.25);
	border: 1px solid var(--sb-border);
}
.sb-banner--modal .sb-banner__inner {
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.sb-banner--modal .sb-banner__icon { font-size: 32px; }
.sb-banner--modal .sb-banner__actions { display: flex; flex-direction: column; gap: 8px; }
.sb-banner--modal .sb-btn { width: 100%; }

.sb-banner__title { font-size: 15px; font-weight: 700; margin: 0 0 3px; }
.sb-banner__body  { margin: 0; color: rgba(1,36,58,.72); font-size: 13px; }
.sb-policy-link   { color: var(--sb-accent-on-white); text-decoration: underline; margin-left: 4px; }

/* ── Softwall ───────────────────────────────────────────────────── */
/* Not a banner of its own — a page-blocking backdrop that sits BEHIND
   whichever banner layout is chosen (bar / box / modal). It's the
   "block the page until a choice is made" modifier, independent of
   layout. The banner renders on top; the backdrop dims/blurs the page. */
.sb-softwall-backdrop {
	position: fixed;
	inset: 0;
	z-index: calc(var(--sb-z-banner) - 1);
	background: rgba(17,24,39,.55);
}
.sb-softwall-backdrop[hidden] { display: none; }
.sb-softwall-backdrop--blur {
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.sb-banner__icon { line-height: 0; }
/* Constrain the inline SVG icon (id-scoped, so a theme svg rule can't grow it). */
#sb-banner .sb-cookie-icon,
#sb-reopen .sb-cookie-icon {
	display: inline-block;
	color: var(--sb-primary);
	width: 26px;
	height: 26px;
	max-width: 26px;
	max-height: 26px;
	flex: 0 0 auto;
}
/* Reopen pill: white cookie on the accent-filled button. */
#sb-reopen .sb-cookie-icon { width: 28px; height: 28px; max-width: 32px; max-height: 32px; color: var(--sb-primary-contrast, #fff); }

/* Body lock when softwall is active */
body.sb-softwall-active { overflow: hidden; }

/* ── Preferences modal ──────────────────────────────────────────── */

.sb-modal {
	position: fixed;
	inset: 0;
	z-index: var(--sb-z-modal);
	font-family: var(--sb-font);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sb-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(1,36,58,.5);
}

.sb-modal__box {
	position: relative;
	background: #fff;
	border-radius: var(--sb-radius);
	width: 90%;
	max-width: 580px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 60px rgba(1,36,58,.25);
}

.sb-modal__header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 48px 16px;
	flex-shrink: 0;
}

.sb-modal__title {
	font-size: 20px;
	font-weight: 700;
	color: var(--sb-dark);
	margin: 0;
	text-align: center;
}

#sb-modal .sb-modal__close {
	position: absolute;
	top: 14px;
	right: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	box-shadow: none;
	font-size: 22px;
	width: 34px;
	height: 34px;
	min-width: 0;
	padding: 0;
	cursor: pointer;
	color: var(--sb-muted, #6b7280);
	border-radius: 50%;
	line-height: 1;
	transition: color 0.15s, background 0.15s;
}
#sb-modal .sb-modal__close:hover {
	background: color-mix(in srgb, var(--sb-dark) 7%, transparent);
	color: var(--sb-dark);
}
#sb-modal .sb-modal__close:focus-visible { outline: 2px solid var(--sb-ring, var(--sb-primary)); outline-offset: 1px; }

.sb-modal__intro {
	padding: 0 24px 4px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--sb-muted);
}

/* The scroll region + its custom OVERLAY scrollbar. Hiding the native
   scrollbar keeps the body full-width (rows never narrow, everything stays
   aligned with the header/footer, no width jump). A thin custom thumb floats
   over the content's right edge instead. */
.sb-scrollwrap {
	position: relative;
	flex: 1;
	min-height: 0;
}
.sb-modal__body {
	overflow-y: auto;
	padding: 12px 24px;
	scrollbar-width: none;              /* Firefox */
	-ms-overflow-style: none;          /* old Edge */
}
.sb-modal__body::-webkit-scrollbar { width: 0; height: 0; }  /* WebKit */

.sb-thumb {
	position: absolute;
	top: 4px;
	right: 3px;
	width: 6px;
	border-radius: 6px;
	background: color-mix(in srgb, var(--sb-dark) 30%, transparent);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s;
}
.sb-scrollwrap.sb-scrollable:hover .sb-thumb,
.sb-scrollwrap.is-scrolling .sb-thumb { opacity: 1; pointer-events: auto; }
.sb-thumb:hover, .sb-thumb.is-dragging { background: color-mix(in srgb, var(--sb-dark) 46%, transparent); }

.sb-modal__footer {
	padding: 16px 24px 8px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	flex-shrink: 0;
}
.sb-modal__footer .sb-btn { flex: 1 1 auto; }

.sb-modal__links {
	display: flex;
	gap: 20px;
	justify-content: center;
	padding: 6px 24px 20px;
	flex-wrap: wrap;
}
.sb-modal__links a {
	color: var(--sb-accent-on-white);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
}

/* ── Accordion category rows (Complianz-style) ─────────────────────────── */

.sb-acc {
	border: 1px solid var(--sb-border);
	border-radius: 10px;
	margin-bottom: 8px;
	background: #f7f8f9;
	overflow: hidden;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.sb-acc:last-child { margin-bottom: 0; }
.sb-acc.is-open {
	border-color: var(--sb-muted-2, #9ca3af);
	background: #fff;
}
/* Strictly-necessary block — a static card, not an accordion. */
.sb-acc--static { background: #fff; }

.sb-acc__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 16px;
	cursor: pointer;
	user-select: none;
}
.sb-acc__row--static { cursor: default; padding-bottom: 6px; }
.sb-acc__row:focus-visible { outline: 2px solid var(--sb-ring, var(--sb-primary)); outline-offset: -2px; }
/* When open, tuck the row's bottom padding so the description sits close. */
.sb-acc.is-open .sb-acc__row { padding-bottom: 6px; }

.sb-acc__name { font-size: 15px; font-weight: 700; color: var(--sb-dark); }

.sb-acc__right { display: flex; align-items: center; gap: 12px; }

.sb-acc__always { color: #16794c; font-weight: 600; font-size: 13px; white-space: nowrap; }
.sb-acc__always--sm { font-size: 12px; }

.sb-acc__chev { display: inline-flex; color: var(--sb-muted); transition: transform 0.2s; }
.sb-acc.is-open .sb-acc__chev { transform: rotate(180deg); }

.sb-acc__panel { padding: 0 16px 14px; }
.sb-acc__desc { font-size: 13.5px; color: var(--sb-muted); margin: 0; line-height: 1.55; }

/* ── Per-service list ───────────────────────────────────────────── */

.sb-services {
	margin-top: 12px;
	padding: 12px 14px;
	background: #f8f9fa;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sb-services__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sb-muted-2, #9ca3af);
	margin: 0;
}

.sb-service {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sb-service__info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.sb-service__name { font-size: 13px; font-weight: 600; color: var(--sb-dark); }
.sb-service__desc { font-size: 12px; color: rgba(1,36,58,.6); line-height: 1.4; }
.sb-service__link { font-size: 11px; color: var(--sb-accent-on-white); text-decoration: none; margin-top: 2px; }
.sb-service__link:hover { text-decoration: underline; }

/* ── Toggle switch ──────────────────────────────────────────────── */

.sb-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	cursor: pointer;
}

.sb-toggle__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.sb-toggle__slider {
	display: block;
	width: 44px;
	height: 24px;
	background: #d1d5db;
	border-radius: 24px;
	position: relative;
	transition: background 0.2s;
	flex-shrink: 0;
}
.sb-toggle__slider::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.2s;
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.sb-toggle__input:checked + .sb-toggle__slider { background: var(--sb-accent-on-white); }
.sb-toggle__input:checked + .sb-toggle__slider::after { transform: translateX(20px); }
.sb-toggle__input:focus-visible + .sb-toggle__slider { outline: 2px solid var(--sb-primary); outline-offset: 2px; }

/* Small toggle for services */
.sb-toggle--sm .sb-toggle__slider {
	width: 36px;
	height: 20px;
}
.sb-toggle--sm .sb-toggle__slider::after {
	width: 14px;
	height: 14px;
}
.sb-toggle--sm .sb-toggle__input:checked + .sb-toggle__slider::after {
	transform: translateX(16px);
}

.sb-toggle--locked { cursor: default; }
.sb-toggle__always {
	font-size: 11px;
	font-weight: 600;
	color: #059669;
	white-space: nowrap;
}
.sb-toggle__always--sm { font-size: 11px; color: rgba(1,36,58,.45); white-space: nowrap; }

/* ── Re-open button ─────────────────────────────────────────────── */

/* ID-scoped (1,0,0) so a theme's or Elementor's class-based button styling
   can't override the floating cookie button — no !important needed. */
#sb-reopen {
	position: fixed;
	bottom: 16px;
	left: 16px;
	z-index: var(--sb-z-reopen);
	width: auto;
	height: auto;
	border-radius: 50%;
	background: var(--sb-primary);
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0,0,0,.22);
	transition: transform 0.2s, opacity 0.2s;
	padding: 10px;
	line-height: 0;
	margin: 0;
	font-size: 32px;
}
#sb-reopen:hover { transform: scale(1.1); opacity: .9; }
#sb-reopen:focus-visible { outline: 3px solid var(--sb-primary); outline-offset: 3px; }

/* ── Accessibility ──────────────────────────────────────────────── */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.sb-banner--bar .sb-banner__inner { padding: 12px 16px; gap: 12px; }
	.sb-banner--bar .sb-banner__actions { width: 100%; }
	.sb-banner--bar .sb-btn--ghost { display: none; }
	/* Full-width on mobile — .sb-banner.sb-banner--box (0,2,0) beats the
	   align classes so the float is dropped on small screens. */
	.sb-banner.sb-banner--box { left: 12px; right: 12px; bottom: 12px; max-width: none; }
	.sb-modal__box { width: 100%; max-width: 100%; max-height: 88vh; border-radius: 16px 16px 0 0; position: absolute; bottom: 0; }
	.sb-softwall__inner { padding: 28px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.sb-toggle__slider,
	.sb-toggle__slider::after,
	.sb-btn,
	#sb-reopen { transition: none; }
}

/* ── Blocked-embed placeholders (YouTube, Maps, Vimeo…) ─────────────────── */

/* A blocked iframe has its src stripped to data-src; hide the empty frame and
   let the placeholder stand in until the visitor consents. */
.sb-blocked-iframe { display: none !important; }

.sb-placeholder {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	padding: 24px;
	background: #f2f3f5;
	border: 1px dashed #c3c4c7;
	border-radius: 8px;
	color: #50575e;
	box-sizing: border-box;
}

.sb-placeholder__inner {
	max-width: 420px;
	text-align: center;
}

.sb-placeholder__text {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.5;
}

.sb-placeholder__btn {
	display: inline-block;
	padding: 9px 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sb-primary-contrast, #fff);
	background: var(--sb-primary, #E11A7F);
	border: 0;
	border-radius: 6px;
	cursor: pointer;
}

.sb-placeholder__btn:hover { background: var(--sb-primary-hover, var(--sb-primary)); }
.sb-placeholder__btn:focus-visible { outline: 2px solid var(--sb-ring, var(--sb-primary)); outline-offset: 2px; }