/* SpecialBliss — Right of Withdrawal widget · v2.5.1 full refactor
   Unified layout system:
   - ONE content width (--sbw-content-w) applied identically to every section.
   - Every visual box spans the full content width (no per-box insets).
   - Uniform vertical rhythm via --sbw-gap between sections.
   - No section numbering. */

.sbw {
	--sbw-content-w: none; /* Elementor container controls width by default */
	--sbw-gap:     34px;
	--sbw-accent:  var(--sb-pink, #c84b6e);
	--sbw-accent-d:var(--sb-pink-dark, #a03055);
	--sbw-heading: var(--sb-heading, #1a1a1a);
	--sbw-text:    var(--sb-text, #33323a);
	--sbw-surface: var(--sb-surface, #ffffff);
	--sbw-border:  var(--sb-border, #e4e4e7);
	--sbw-soft:    rgba(200, 75, 110, .06);
	--sbw-radius:  var(--sb-radius-md, 12px);

	max-width: none; margin: 0;
	color: var(--sbw-text);
	font-family: var(--sb-font, inherit);
	line-height: 1.7;
}
.sb-wd.sbw { max-width: none; margin: 0; }

[data-theme="dark"] .sbw,
.sb-dark .sbw {
	--sbw-heading: #f4f4f5;
	--sbw-text:    #d7d7db;
	--sbw-surface: #1f1f22;
	--sbw-border:  rgba(255, 255, 255, .12);
	--sbw-soft:    rgba(200, 75, 110, .12);
}

/* ── Unified section frame ─────────────────────────────────────────── */
.sbw > section {
	box-sizing: border-box; width: 100%;
	max-width: var(--sbw-content-w);
	margin: 0 auto var(--sbw-gap);
	padding: 0;
}
.sbw > section:last-child { margin-bottom: 0; }

/* ── Typography (no counters / numbering) ──────────────────────────── */
.sbw h1, .sbw h2, .sbw h3 { color: var(--sbw-heading); line-height: 1.25; }
.sbw h1 { font-size: clamp(26px, 4vw, 34px); margin: 0 0 18px; }
.sbw h2 { font-size: clamp(19px, 3vw, 23px); margin: 0 0 14px; }
.sbw h3 { font-size: 16px; margin: 0 0 8px; }
.sbw p  { margin: 0 0 12px; font-size: 15.2px; }
.sbw a  { color: var(--sbw-accent); }
.sbw a:hover { color: var(--sbw-accent-d); }

.sbw-eyebrow {
	display: inline-block; margin-bottom: 10px;
	font-size: 11px; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--sbw-accent);
}

/* ── Buttons (all states exposed as Elementor-controllable vars) ──── */
.sbw {
	--sbw-btn-bg:       var(--sbw-accent);
	--sbw-btn-text:     #fff;
	--sbw-btn-bg-h:     var(--sbw-accent-d);
	--sbw-btn-text-h:   #fff;
	--sbw-ghost-text:   var(--sbw-accent);
	--sbw-ghost-bg-h:   var(--sbw-accent);
	--sbw-ghost-text-h: #fff;
	--sbw-btn-radius:   6px;
}
.sbw .sbw-btn,
.sbw a.sbw-btn, .sbw a.sbw-btn:visited {
	display: inline-block; box-sizing: border-box;
	padding: 12px 24px; border-radius: var(--sbw-btn-radius);
	background: var(--sbw-btn-bg); color: var(--sbw-btn-text);
	border: 1.5px solid var(--sbw-btn-bg);
	font-size: 14px; font-weight: 600; letter-spacing: .01em;
	text-decoration: none; cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.sbw .sbw-btn:hover, .sbw .sbw-btn:focus-visible, .sbw .sbw-btn:active,
.sbw a.sbw-btn:hover, .sbw a.sbw-btn:focus-visible, .sbw a.sbw-btn:active {
	background: var(--sbw-btn-bg-h); border-color: var(--sbw-btn-bg-h); color: var(--sbw-btn-text-h);
}
.sbw .sbw-btn--ghost,
.sbw a.sbw-btn--ghost, .sbw a.sbw-btn--ghost:visited {
	background: transparent; color: var(--sbw-ghost-text); border-color: currentColor;
}
.sbw .sbw-btn--ghost:hover, .sbw .sbw-btn--ghost:focus-visible, .sbw .sbw-btn--ghost:active,
.sbw a.sbw-btn--ghost:hover, .sbw a.sbw-btn--ghost:focus-visible, .sbw a.sbw-btn--ghost:active {
	background: var(--sbw-ghost-bg-h); border-color: var(--sbw-ghost-bg-h); color: var(--sbw-ghost-text-h);
}
.sbw .sbw-btn:focus-visible { outline: 2px solid var(--sbw-btn-bg); outline-offset: 2px; }

/* ── Hero / notice ─────────────────────────────────────────────────── */
.sbw-notice p:last-child { margin-bottom: 0; }

.sbw-scope {
	box-sizing: border-box; width: 100%;
	display: flex; gap: 10px; align-items: flex-start;
	margin: 18px 0 0; padding: 12px 16px;
	background: var(--sbw-soft);
	border-left: 3px solid var(--sbw-accent);
	border-radius: 0 6px 6px 0;
	font-size: 14px;
}
.sbw-scope::before { content: "ⓘ"; color: var(--sbw-accent); font-weight: 700; flex-shrink: 0; }

/* ── Timeline ──────────────────────────────────────────────────────── */
.sbw-tl {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.sbw-tl__step {
	position: relative; padding: 0 6px;
	display: flex; flex-direction: column; align-items: center; gap: 3px;
	text-align: center;
}
.sbw-tl__step::before {
	content: ""; position: absolute;
	top: 16px; left: calc(50% + 22px); right: calc(-50% + 22px);
	height: 1.5px; background: var(--sbw-border);
}
.sbw-tl__step:last-child::before { display: none; }
.sbw-tl__dot {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%;
	border: 1.5px solid var(--sbw-accent); color: var(--sbw-accent);
	background: var(--sbw-soft);
	font-size: 13px; font-weight: 700; margin-bottom: 5px;
}
.sbw-tl__step strong { font-size: 13.5px; color: var(--sbw-heading); line-height: 1.3; }
.sbw-tl__step em { font-style: normal; font-size: 12px; opacity: .65; line-height: 1.45; }

@media (max-width: 720px) {
	.sbw-tl { grid-template-columns: 1fr; gap: 0; }
	.sbw-tl__step {
		flex-direction: row; align-items: flex-start; text-align: left;
		gap: 12px; padding: 10px 0;
	}
	.sbw-tl__step::before {
		top: 44px; bottom: -8px; left: 15px; right: auto;
		width: 1.5px; height: auto;
	}
	.sbw-tl__dot { margin: 0; flex-shrink: 0; }
	.sbw-tl__step strong { flex-shrink: 0; min-width: 122px; padding-top: 6px; }
	.sbw-tl__step em { padding-top: 7px; }
}

/* ── Exception callout ─────────────────────────────────────────────── */
.sbw-exception {
	box-sizing: border-box;
	background: var(--sbw-soft);
	border-left: 3px solid var(--sbw-accent);
	border-radius: 0 var(--sbw-radius) var(--sbw-radius) 0;
	padding: 18px 20px !important;
}
.sbw-exception h3 { margin-bottom: 6px; }
.sbw-exception p:last-child { margin-bottom: 0; }

/* ── Dual-path cards ───────────────────────────────────────────────── */
.sbw-paths__grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
	margin-top: 4px;
}
@media (max-width: 720px) { .sbw-paths__grid { grid-template-columns: 1fr; } }
.sbw-path {
	position: relative; box-sizing: border-box;
	border: 1px solid var(--sbw-border);
	border-radius: var(--sbw-radius);
	background: var(--sbw-surface);
	padding: 24px 22px;
	display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.sbw-path h3 { margin: 0; }
.sbw-path p { margin: 0; flex: 1; font-size: 14.5px; }
.sbw-path .sbw-btn { margin-top: 6px; }
.sbw-path__badge {
	position: absolute; top: -10px; left: 18px;
	background: var(--sbw-accent); color: #fff;
	font-size: 10px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	padding: 3px 10px; border-radius: 999px;
}

/* ── Model form (printable document card) ──────────────────────────── */
.sbw-model { scroll-margin-top: 90px; } /* anchor jump breathing room */
.sbw-lead { font-size: 14.5px; }

.sbw-form-text {
	box-sizing: border-box; width: 100%;
	position: relative; overflow-x: auto;
	margin: 14px 0 16px;
	background: var(--sbw-surface);
	border: 1px dashed var(--sbw-accent);
	border-radius: var(--sbw-radius);
	padding: 46px 24px 20px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px; line-height: 1.9;
	color: var(--sbw-text);
	white-space: pre-wrap; word-break: break-word;
}
.sbw-form-text::before {
	content: "MODEL WITHDRAWAL FORM";
	position: absolute; top: 18px; left: 24px;
	font-family: var(--sb-font, inherit);
	font-size: 10px; font-weight: 700; letter-spacing: .16em;
	color: var(--sbw-accent);
}

.sbw-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sbw-actions .sb-wd__msg { font-size: 14px; opacity: .8; }

/* ── Print ─────────────────────────────────────────────────────────── */
@media print {
	.sbw > section { max-width: none; padding: 0; margin-bottom: 22px; }
	.sbw-paths, .sbw-timeline, .sbw-actions { display: none !important; }
	.sbw-form-text { border-color: #000; }
	.sbw-form-text::before { color: #000; }
}
