/* ═══════════════════════════════════════════════════════════════════
   WEBWALL SITES — AI WEBSITE BUILDER
   Premium SaaS onboarding experience
   ═══════════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────────── */
:root {
	--accent:      #5b5cf0;
	--accent-h:    #4a4bd8;
	--bg-0:        #f8f9fb;
	--bg-1:        #eef0f5;
	--panel:       #ffffff;
	--panel-2:     #f3f4f8;
	--border:      #e2e4ec;
	--border-s:    #cbd0dd;
	--text-1:      #0f1117;
	--text-2:      #4b5162;
	--text-3:      #8690a8;
	--radius:      12px;
	--radius-lg:   20px;
	--shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
	--shadow-md:   0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
	--shadow-lg:   0 12px 40px rgba(0,0,0,.14), 0 4px 16px rgba(0,0,0,.08);
	--pvw-bg:      #1e2230;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg-0:    #0f1117;
		--bg-1:    #171b27;
		--panel:   #1c2035;
		--panel-2: #222840;
		--border:  #2d3348;
		--border-s:#3d4360;
		--text-1:  #f0f2f8;
		--text-2:  #9ba3bc;
		--text-3:  #6b7491;
	}
}

/* ── WordPress Breakout ─────────────────────────────────────────── */
html.wws-builder-fullscreen,
body.wws-builder-fullscreen {
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: none !important;
	background: var(--bg-0) !important;
}

body.wws-builder-fullscreen .site-header,
body.wws-builder-fullscreen .site-footer,
body.wws-builder-fullscreen .wp-block-template-part,
body.wws-builder-fullscreen #wpadminbar,
body.wws-builder-fullscreen .admin-bar.wpadminbar,
body.wws-builder-fullscreen header[role="banner"],
body.wws-builder-fullscreen footer[role="contentinfo"],
body.wws-builder-fullscreen .site-branding,
body.wws-builder-fullscreen .entry-header,
body.wws-builder-fullscreen .post-title,
body.wws-builder-fullscreen .page-title {
	display: none !important;
}

body.admin-bar.wws-builder-fullscreen #wws-builder-app {
	top: 0 !important;
	height: 100vh !important;
	height: 100dvh !important;
}

body.wws-builder-fullscreen .site-content,
body.wws-builder-fullscreen .site-content-wrap,
body.wws-builder-fullscreen .site-main,
body.wws-builder-fullscreen .entry-content,
body.wws-builder-fullscreen .wp-site-blocks,
body.wws-builder-fullscreen .is-layout-constrained,
body.wws-builder-fullscreen .container,
body.wws-builder-fullscreen .wrap {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
}

/* ── App Shell ──────────────────────────────────────────────────── */
#wws-builder-app {
	position: fixed !important;
	inset: 0 !important;
	z-index: 999999 !important;
	width: 100vw !important;
	height: 100vh !important;
	overflow: hidden !important;
	background: var(--bg-0);
	color: var(--text-1);
	font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* ── Shared Buttons ─────────────────────────────────────────────── */
/* .wwsb-btn works on <button>, <a>, and <div role=button> */
.wwsb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 20px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	transition: all .15s ease;
	white-space: nowrap;
	text-decoration: none;
	user-select: none;
	font-family: inherit;
	box-sizing: border-box;
}
.wwsb-btn:disabled, .wwsb-btn.wwsb-btn-disabled { opacity: .42; cursor: not-allowed; pointer-events: none; }

.wwsb-btn-primary {
	background: var(--accent);
	color: #fff;
}
.wwsb-btn-primary:hover:not(:disabled) { background: var(--accent-h); }

.wwsb-btn-ghost {
	background: transparent;
	color: var(--text-2);
	border: 1px solid var(--border-s);
}
.wwsb-btn-ghost:hover { background: var(--panel-2); }

.wwsb-btn-subtle {
	background: var(--panel-2);
	color: var(--text-2);
}
.wwsb-btn-subtle:hover { background: var(--border); }

.wwsb-btn-lg { padding: 14px 32px; font-size: 16px; border-radius: 12px; }

.wwsb-btn-gen {
	background: linear-gradient(135deg, var(--accent), #8b5cf6);
	box-shadow: 0 4px 20px rgba(91,92,240,.35);
}
.wwsb-btn-gen:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 28px rgba(91,92,240,.45); }

/* ── Shared Logo ────────────────────────────────────────────────── */
.wwsb-logo {
	display: flex;
	align-items: center;
	gap: 10px;
}
.wwsb-logo-dot {
	width: 32px; height: 32px;
	background: linear-gradient(135deg, var(--accent), #8b5cf6);
	border-radius: 8px;
	flex-shrink: 0;
}
.wwsb-logo strong { font-size: 15px; font-weight: 700; color: var(--text-1); }
.wwsb-logo small  { display: block; font-size: 11px; color: var(--text-3); font-weight: 500; margin-top: -1px; }

/* ═══════════════════════════════════════════════════════════════════
   TEMPLATE SELECTION SCREEN
   ═══════════════════════════════════════════════════════════════════ */

.wwsb-tpl-screen {
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.wwsb-tpl-screen-header {
	display: flex;
	align-items: center;
	padding: 0 40px;
	height: 64px;
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
}

.wwsb-tpl-intro {
	text-align: center;
	padding: 40px 20px 24px;
	flex-shrink: 0;
}
.wwsb-tpl-intro h1 {
	font-size: clamp(28px, 3vw, 44px);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--text-1);
	margin: 0 0 10px;
}
.wwsb-tpl-intro p {
	font-size: 16px;
	color: var(--text-2);
	margin: 0;
	max-width: 500px;
	margin-inline: auto;
}

.wwsb-tpl-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	padding: 0 40px;
	overflow-y: auto;
	flex: 1;
	min-height: 0;
}

.wwsb-tpl-card {
	display: flex;
	flex-direction: column;
	background: var(--panel);
	border: 2px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.wwsb-tpl-card:hover {
	border-color: var(--border-s);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
.wwsb-tpl-card.is-selected {
	border-color: var(--tpl-accent, var(--accent));
	box-shadow: 0 0 0 1px var(--tpl-accent, var(--accent)), var(--shadow-md);
}

.wwsb-tpl-thumb {
	position: relative;
	background: linear-gradient(140deg,
		color-mix(in srgb, var(--tpl-accent, var(--accent)) 20%, var(--bg-1)),
		color-mix(in srgb, var(--tpl-accent, var(--accent)) 8%, var(--bg-0)));
	aspect-ratio: 16/9;
	overflow: hidden;
}
.wwsb-tpl-thumb img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	mix-blend-mode: luminosity;
	opacity: .7;
}
.wwsb-tpl-thumb-tint {
	position: absolute; inset: 0;
	background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.15));
}
.wwsb-tpl-checkmark {
	position: absolute; top: 12px; right: 12px;
	width: 28px; height: 28px;
	background: var(--tpl-accent, var(--accent));
	color: #fff;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 14px; font-weight: 700;
	box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.wwsb-tpl-info {
	padding: 16px 18px 12px;
	flex: 1;
}
.wwsb-tpl-info h3 {
	font-size: 16px; font-weight: 700;
	margin: 0 0 4px;
	color: var(--text-1);
}
.wwsb-tpl-info p {
	font-size: 13px; color: var(--text-2);
	margin: 0;
	line-height: 1.4;
}

.wwsb-tpl-ideal-for {
	margin: 0 18px 0;
	padding: 14px 16px;
	background: color-mix(in srgb, var(--accent) 8%, var(--bg-0));
	border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
	border-radius: 10px;
}

.wwsb-ideal-for-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 10px;
	line-height: 1;
}

.wwsb-ideal-for-group {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 8px;
}
.wwsb-ideal-for-group:last-child {
	margin-bottom: 0;
}

.wwsb-ideal-for-group-name {
	font-size: 11px;
	font-weight: 600;
	color: var(--text-1);
	line-height: 1.3;
}

.wwsb-ideal-for-cats {
	font-size: 11px;
	color: var(--text-2);
	line-height: 1.4;
}

.wwsb-tpl-card-foot {
	padding: 12px 18px 16px;
	border-top: 1px solid var(--border);
	display: flex;
	justify-content: flex-end;
}

.wwsb-tpl-cta {
	display: flex;
	justify-content: center;
	padding: 24px 40px;
	flex-shrink: 0;
	border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════════
   WIZARD LAYOUT
   ═══════════════════════════════════════════════════════════════════ */

.wwsb-wizard {
	height: 100vh;
	display: grid;
	grid-template-rows: auto 6px 1fr;
	overflow: hidden;
}

.wwsb-wizard-hdr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 28px;
	height: 60px;
	background: var(--panel);
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
	z-index: 10;
}
.wwsb-wizard-hdr-r { display: flex; align-items: center; gap: 14px; }
.wwsb-pct { font-size: 13px; color: var(--text-3); font-weight: 500; }

.wwsb-auth-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 28px;
	background: #fff7ed;
	border-bottom: 1px solid #fed7aa;
	color: #9a3412;
	font-size: 13px;
	font-weight: 600;
	flex-shrink: 0;
}

.wwsb-auth-banner a {
	color: #c2410c;
	text-decoration: underline;
	white-space: nowrap;
}

.wwsb-wizard-bar {
	background: var(--border);
	overflow: hidden;
}
.wwsb-wizard-bar span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--accent), #8b5cf6);
	transition: width .4s cubic-bezier(.4,0,.2,1);
}

.wwsb-wizard-body {
	display: grid;
	grid-template-columns: minmax(300px, 34%) 1fr;
	min-height: 0;
	overflow: hidden;
}

/* Last step: maximize preview area for desktop review */
.wwsb-wizard-body.is-review-mode {
	grid-template-columns: minmax(280px, 30%) 1fr;
}

/* ── Wizard Left Panel (Question) ─────────────────────────────── */
.wwsb-wizard-left {
	display: flex;
	flex-direction: column;
	background: var(--panel);
	overflow: hidden;
	position: relative;
	z-index: 20;
	isolation: isolate;
}

.wwsb-wizard-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 40px;
	border-top: 1px solid var(--border);
	background: var(--panel);
	flex-shrink: 0;
	position: relative;
	z-index: 30;
}

.wwsb-question-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 12px;
	padding: 20px 40px 20px;
	min-height: 0;
	overflow-y: auto;
}

.wwsb-kicker {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--accent);
	margin: 0;
}

.wwsb-question-card h2 {
	font-size: clamp(24px, 2.8vw, 38px);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.15;
	color: var(--text-1);
	margin: 0;
}

.wwsb-hint {
	font-size: 14px;
	color: var(--text-2);
	margin: 0;
}

/* ── Question Inputs ──────────────────────────────────────────── */
.wwsb-qi {
	width: 100%;
	max-width: 480px;
	height: 54px;
	padding: 0 18px;
	font-size: 18px;
	font-weight: 500;
	color: var(--text-1);
	background: var(--bg-0);
	border: 2px solid var(--border-s);
	border-radius: 10px;
	outline: none;
	box-sizing: border-box;
	transition: border-color .15s;
	font-family: inherit;
}
.wwsb-qi:focus {
	border-color: var(--accent);
	background: var(--panel);
	box-shadow: 0 0 0 4px rgba(91,92,240,.12);
}
.wwsb-qi::placeholder { color: var(--text-3); font-weight: 400; font-size: 15px; }

.wwsb-qi-ta {
	height: 100px;
	padding: 14px 18px;
	resize: none;
	line-height: 1.5;
	font-size: 15px;
}

/* ── Category Choices ────────────────────────────────────────── */
.wwsb-grid-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 500px;
}
.wwsb-choice {
	padding: 9px 18px;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-2);
	background: var(--panel-2);
	border: 1.5px solid var(--border);
	border-radius: 100px;
	cursor: pointer;
	transition: all .12s;
	font-family: inherit;
}
.wwsb-choice:hover { border-color: var(--border-s); color: var(--text-1); }
.wwsb-choice.is-sel {
	background: color-mix(in srgb, var(--accent) 12%, var(--panel));
	border-color: var(--accent);
	color: var(--accent);
	font-weight: 600;
}

/* ── Service Builder (new manual builder UI) ─────────────────── */
.wwsb-svc-suggestions {
	margin-bottom: 12px;
}
.wwsb-svc-hint {
	font-size: 12px;
	color: var(--text-3);
	margin: 0 0 8px;
	font-weight: 500;
}
.wwsb-svc-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 500;
	color: var(--text-2);
	background: var(--panel-2);
	border: 1.5px solid var(--border);
	border-radius: 100px;
	cursor: pointer;
	transition: all .12s;
	font-family: inherit;
	margin: 0 4px 6px 0;
}
.wwsb-svc-chip:hover:not(:disabled) {
	border-color: var(--accent);
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}
.wwsb-svc-chip.is-added {
	border-color: var(--accent);
	color: var(--accent);
	opacity: .6;
}
.wwsb-svc-chip:disabled { opacity: .4; cursor: not-allowed; }

.wwsb-svc-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 520px;
	margin-bottom: 12px;
}
.wwsb-svc-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: var(--panel-2);
	border: 1.5px solid var(--border);
	border-radius: 10px;
}
.wwsb-svc-num {
	font-size: 12px;
	font-weight: 700;
	color: var(--accent);
	min-width: 18px;
	text-align: center;
}
.wwsb-svc-row-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.wwsb-svc-row-body strong {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wwsb-svc-desc-text {
	font-size: 11px;
	color: var(--text-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wwsb-svc-row-ctrls {
	display: flex;
	gap: 2px;
	align-items: center;
}
.wwsb-svc-ctrl {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-3);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	transition: all .12s;
	font-family: inherit;
	padding: 0;
}
.wwsb-svc-ctrl:hover { border-color: var(--border); color: var(--text-2); background: var(--panel); }
.wwsb-svc-ctrl.is-ph { visibility: hidden; }
.wwsb-svc-remove:hover { color: #ef4444; border-color: #fecaca; background: #fef2f2; }

.wwsb-svc-add-form {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	max-width: 520px;
	margin-bottom: 8px;
}
.wwsb-svc-add-fields {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.wwsb-svc-title-input,
.wwsb-svc-desc-input { margin: 0 !important; }
.wwsb-svc-add-form .wwsb-btn { margin-top: 2px; white-space: nowrap; }

.wwsb-svc-empty {
	font-size: 13px;
	color: var(--text-3);
	margin: 0 0 12px;
	font-style: italic;
}
.wwsb-sel-count { font-size: 12px; color: var(--text-3); margin: 4px 0 0; }

/* ── Category Grid (bigger, icon + label) ────────────────────── */
.wwsb-cat-grid {
	grid-template-columns: repeat(3, 1fr) !important;
	max-width: 560px !important;
	gap: 8px !important;
}
.wwsb-cat-choice {
	flex-direction: column !important;
	align-items: center !important;
	padding: 12px 8px !important;
	gap: 4px !important;
	text-align: center !important;
}
.wwsb-cat-icon { font-size: 22px; line-height: 1; }
.wwsb-cat-label { font-size: 11px; font-weight: 600; line-height: 1.2; }

/* ── Social Media Step ───────────────────────────────────────── */
.wwsb-socials-grid {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 480px;
	margin-bottom: 16px;
}
.wwsb-social-field {
	display: flex;
	align-items: center;
	gap: 10px;
}
.wwsb-social-label {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 120px;
}
.wwsb-social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: var(--panel-2);
	border: 1px solid var(--border);
	border-radius: 6px;
	font-size: 14px;
	color: var(--text-2);
}
.wwsb-social-name { font-size: 13px; font-weight: 500; color: var(--text-2); }
.wwsb-social-input { flex: 1; margin: 0 !important; }

/* ── Color label / secondary ─────────────────────────────────── */
.wwsb-color-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-2);
	margin: 0 0 8px;
}
.wwsb-req { color: #ef4444; }
.wwsb-opt { font-size: 11px; font-weight: 400; color: var(--text-3); }
.wwsb-color-grid-sm .wwsb-swatch-sm {
	width: 52px !important;
	height: 36px !important;
}
.wwsb-color-grid-sm .wwsb-swatch-sm span { font-size: 9px !important; }

/* ── Error state for inputs ──────────────────────────────────── */
.wwsb-qi-error {
	border-color: #ef4444 !important;
	box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important;
}

/* ── Logo Dropzone ───────────────────────────────────────────── */
.wwsb-dropzone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 400px;
	min-height: 100px;
	border: 2px dashed var(--border-s);
	border-radius: 12px;
	background: var(--panel-2);
	color: var(--text-2);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all .15s;
	font-family: inherit;
	flex-direction: column;
	gap: 4px;
}
.wwsb-dropzone:hover,
.wwsb-dropzone.drag-over {
	border-color: var(--accent);
	background: color-mix(in srgb, var(--accent) 6%, var(--panel));
	color: var(--accent);
}
.wwsb-hidden-file { display: none; }
.wwsb-skip {
	background: none; border: none; padding: 0;
	font-size: 13px; color: var(--text-3); cursor: pointer;
	text-decoration: underline; font-family: inherit;
}
.wwsb-skip:hover { color: var(--text-2); }

/* ── Color Swatches ─────────────────────────────────────────── */
.wwsb-color-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 400px;
}
.wwsb-swatch {
	position: relative;
	width: 88px; height: 72px;
	border-radius: 10px;
	background: var(--sw, #5b5cf0);
	border: 2.5px solid transparent;
	cursor: pointer;
	transition: all .12s;
	overflow: hidden;
}
.wwsb-swatch:hover { transform: scale(1.05); }
.wwsb-swatch.is-sel {
	border-color: var(--text-1);
	box-shadow: 0 0 0 3px var(--sw), 0 0 0 5px var(--text-1);
}
.wwsb-swatch span {
	position: absolute;
	bottom: 6px; left: 0; right: 0;
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* ── CTA Suggestion Pills ────────────────────────────────────── */
.wwsb-cta-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 480px;
}
.wwsb-pill-sug {
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 500;
	color: var(--text-2);
	background: var(--panel-2);
	border: 1.5px solid var(--border);
	border-radius: 100px;
	cursor: pointer;
	transition: all .12s;
	font-family: inherit;
}
.wwsb-pill-sug:hover { border-color: var(--accent); color: var(--accent); }
.wwsb-pill-sug.is-sel { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Weekly Schedule Builder ─────────────────────────────────── */

/* Option picker */
.wwsb-sched-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}
.wwsb-sched-opt {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	background: #fff;
	border: 2px solid #e8e8ef;
	border-radius: 10px;
	cursor: pointer;
	text-align: left;
	transition: border-color .18s, background .18s;
	font-size: 14px;
	line-height: 1;
}
.wwsb-sched-opt:hover { border-color: var(--accent); background: #f9f9ff; }
.wwsb-sched-opt-icon { font-size: 22px; flex-shrink: 0; width: 32px; text-align: center; }
.wwsb-sched-opt strong { display: block; font-weight: 700; color: #1a1a2e; margin-bottom: 3px; }
.wwsb-sched-opt-desc { font-size: 12px; color: #666; }
.wwsb-sched-opt-skip { opacity: .7; }
.wwsb-sched-opt-skip:hover { border-color: #d1d5db; background: #f8f8f8; opacity: 1; }
/* Wrap label and desc */
.wwsb-sched-opt > *:not(.wwsb-sched-opt-icon) { display: flex; flex-direction: column; }

/* Confirmation banners */
.wwsb-sched-confirm {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 20px;
	border-radius: 10px;
	margin-top: 18px;
	font-size: 14px;
	line-height: 1.5;
}
.wwsb-sched-confirm-generate { background: #f0f0ff; border: 1.5px solid #c7c7fb; }
.wwsb-sched-confirm-skip     { background: #f8f8f8; border: 1.5px solid #e0e0e0; }
.wwsb-sched-confirm-icon { font-size: 22px; flex-shrink: 0; line-height: 1.3; }
.wwsb-sched-confirm p { margin: 0 0 10px; }

/* Toolbar */
.wwsb-sched-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 14px 0 8px;
}
.wwsb-sched-total { font-size: 12px; color: #888; }

/* Day list */
.wwsb-sched-days { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }

.wwsb-sched-day {
	border: 1.5px solid #e8e8ef;
	border-radius: 9px;
	background: #fff;
	overflow: hidden;
}
.wwsb-sched-day-empty { border-style: dashed; opacity: .7; }
.wwsb-sched-day-empty:hover { opacity: 1; }

.wwsb-sched-day-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	background: #fafafa;
	border-bottom: 1px solid transparent;
}
.wwsb-sched-day:not(.wwsb-sched-day-empty) .wwsb-sched-day-header {
	border-bottom-color: #ebebf0;
}
.wwsb-sched-day-name { font-weight: 700; font-size: 13px; color: #1a1a2e; min-width: 80px; }
.wwsb-sched-count    { font-size: 11px; color: #888; flex: 1; }

/* Slot rows */
.wwsb-sched-slots { padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 6px; }

.wwsb-sched-slot {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #f8f8fb;
	border-radius: 6px;
	padding: 7px 10px;
}
.wwsb-sched-input {
	border: 1px solid #dde0ea;
	border-radius: 5px;
	padding: 5px 8px;
	font-size: 12px;
	background: #fff;
	color: #1a1a2e;
	transition: border-color .15s;
}
.wwsb-sched-input:focus { outline: none; border-color: var(--accent); }
.wwsb-sched-time       { width: 88px; }
.wwsb-sched-sep        { font-size: 12px; color: #999; }
.wwsb-sched-activity   { flex: 1; min-width: 0; }
.wwsb-sched-instructor { width: 120px; }
.wwsb-sched-remove-slot {
	background: none;
	border: none;
	cursor: pointer;
	color: #bbb;
	font-size: 13px;
	line-height: 1;
	padding: 2px 4px;
	border-radius: 4px;
	transition: color .15s, background .15s;
	flex-shrink: 0;
}
.wwsb-sched-remove-slot:hover { color: #e53e3e; background: #fff0f0; }

@media (max-width: 640px) {
	.wwsb-sched-slot { flex-wrap: wrap; }
	.wwsb-sched-instructor { width: 100%; }
}

/* ── Wizard Footer ───────────────────────────────────────────── */
.wwsb-wizard-foot .wwsb-btn-gen {
	position: relative;
	z-index: 31;
	min-width: 180px;
	justify-content: center;
}

.wwsb-gen-inline-wrap {
	margin-top: 8px;
}

.wwsb-gen-inline {
	width: 100%;
	max-width: 480px;
	justify-content: center;
}
.wwsb-dots { display: flex; gap: 6px; align-items: center; }
.wwsb-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--border-s);
	transition: all .2s;
}
.wwsb-dot.done { background: var(--accent); opacity: .5; }
.wwsb-dot.active { width: 20px; border-radius: 4px; background: var(--accent); }

/* (old mock-preview CSS removed — replaced by the REAL TEMPLATE IFRAME PREVIEW section below) */

/* ═══════════════════════════════════════════════════════════════════
   GENERATION MODAL
   ═══════════════════════════════════════════════════════════════════ */

.wwsb-gen-overlay {
	position: fixed; inset: 0; z-index: 1000000;
	background: rgba(10,12,20,.6);
	backdrop-filter: blur(8px);
	display: flex; align-items: center; justify-content: center;
}

.wwsb-gen-card {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 40px;
	width: 100%;
	max-width: 480px;
	box-shadow: var(--shadow-lg);
}
.wwsb-gen-card h2 { font-size: 24px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.02em; }
.wwsb-gen-card > p { font-size: 14px; color: var(--text-2); margin: 0 0 20px; }

.wwsb-gen-bar {
	height: 6px; background: var(--border);
	border-radius: 3px; overflow: hidden; margin-bottom: 8px;
}
.wwsb-gen-bar span {
	display: block; height: 100%;
	background: linear-gradient(90deg, var(--accent), #8b5cf6);
	transition: width .4s ease;
	border-radius: 3px;
}
.wwsb-gen-pct { font-size: 13px; color: var(--text-2); }

.wwsb-gen-card ul { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 10px; }
.wwsb-gen-step { display: flex; align-items: center; gap: 12px; }
.wwsb-gen-step span {
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--panel-2); display: flex; align-items: center; justify-content: center;
	font-size: 12px; font-weight: 700; flex-shrink: 0;
	color: var(--text-3);
}
.wwsb-gen-step.done span { background: #22c55e; color: #fff; }
.wwsb-gen-step.active span {
	background: var(--accent); color: #fff;
	animation: spin .8s linear infinite;
}
.wwsb-gen-step p { font-size: 14px; margin: 0; color: var(--text-2); }
.wwsb-gen-step.done p { color: var(--text-1); }
.wwsb-gen-step.active p { color: var(--text-1); font-weight: 600; }

.wwsb-gen-success { text-align: center; }
.wwsb-gen-success h3 { font-size: 20px; font-weight: 800; margin: 0 0 8px; }
.wwsb-gen-success p  { font-size: 14px; color: var(--text-2); margin: 0 0 20px; }
.wwsb-gen-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.wwsb-gen-counter { margin: 0 0 20px; }
.wwsb-gen-counter-pill {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: var(--accent);
	background: rgba(91,92,240,.10);
	border-radius: 20px;
	padding: 5px 14px;
	border: 1px solid rgba(91,92,240,.18);
}
.wwsb-gen-eta { font-size: 13px; color: var(--text-3); margin: 0 0 20px; }

.wwsb-gen-error-block {
	text-align: center;
	padding: 8px 0;
}
.wwsb-gen-error-icon { font-size: 40px; margin: 0 0 8px; }
.wwsb-gen-error-block h3 { font-size: 18px; font-weight: 800; color: #ef4444; margin: 0 0 12px; }
.wwsb-gen-error-msg {
	font-size: 14px;
	color: var(--text-1);
	background: #fef2f2;
	border: 1px solid #fca5a5;
	border-radius: 8px;
	padding: 10px 14px;
	margin: 0 0 8px;
	word-break: break-word;
}
.wwsb-gen-error-hint { font-size: 12px; color: var(--text-3); margin: 0 0 20px; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD — premium SaaS card list layout
   ═══════════════════════════════════════════════════════════════════ */

.wwsb-dashboard {
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--bg-0);
}
.wwsb-dash-hero {
	padding: 36px 40px 20px;
	flex-shrink: 0;
	border-bottom: 1px solid var(--border);
	background: var(--panel);
}
.wwsb-dash-hero h1 { font-size: 30px; font-weight: 800; margin: 0 0 4px; letter-spacing: -.02em; }
.wwsb-dash-hero p  { font-size: 14px; color: var(--text-2); margin: 0; }
.wwsb-dash-hero strong { color: var(--text-1); }

.wwsb-dash-list {
	flex: 1;
	overflow-y: auto;
	padding: 24px 40px 40px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ── Card2 — horizontal card ── */
.wwsb-dash-card2 {
	display: flex;
	gap: 0;
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow .18s, border-color .18s;
}
.wwsb-dash-card2:hover {
	box-shadow: var(--shadow-md);
	border-color: var(--border-s);
}

/* ── Card2 with status panel — CSS Grid layout (image / content / panel) ──
   Applied only when the site has a "Website Status" timeline to show; the
   card is otherwise laid out with the default flex rule above. Because this
   markup is built in the same render pass as the rest of the card (never
   attached afterward), there is no separate "mounted" state to manage. */
.wwsb-dash-card2.wws-has-sc.wws-3col {
	display: grid;
	grid-template-columns: 220px 1fr 340px;
	align-items: start;
	gap: 0;
}
.wwsb-dash-card2.wws-has-sc.wws-2col {
	display: grid;
	grid-template-columns: 1fr 340px;
	align-items: start;
	gap: 0;
}
.wws-grid-img { min-width: 0; overflow: hidden; }
.wws-grid-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wws-grid-content { min-width: 0; }

/* ── Status panel — floating card in the last grid column ── */
.wws-sc-panel {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 22px 24px;
	margin: 10px 14px 10px 0;
	box-shadow: 0 2px 8px rgba(0,0,0,.06);
	box-sizing: border-box;
	min-width: 0;
}
.wws-scp-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--text-3);
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0 0 18px;
	padding: 0;
	line-height: 1.2;
}
.wws-scp-steps { display: flex; flex-direction: column; }
.wws-scp-step { display: flex; gap: 12px; align-items: flex-start; }
.wws-scp-indicator {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	width: 16px;
	padding-top: 4px;
}
.wws-scp-dot { width: 10px; height: 10px; border-radius: 50%; background: #d1d5db; flex-shrink: 0; }
.wws-scp-connector { width: 2px; flex: 1; min-height: 18px; background: #e5e7eb; margin-top: 3px; }
.wws-scp-step:last-child .wws-scp-connector { display: none; }
.wws-scp-body { padding-bottom: 14px; min-width: 0; flex: 1; }
.wws-scp-step:last-child .wws-scp-body { padding-bottom: 0; }
.wws-scp-done .wws-scp-dot { background: #22c55e; }
.wws-scp-done .wws-scp-connector { background: #bbf7d0; }
.wws-scp-done .wws-scp-lbl { color: #166534; font-weight: 500; }
.wws-scp-wait .wws-scp-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.wws-scp-wait .wws-scp-connector { background: #e5e7eb; }
.wws-scp-wait .wws-scp-lbl { color: #92400e; font-weight: 600; }
.wws-scp-future .wws-scp-dot { background: #f9fafb; border: 2px solid #d1d5db; box-sizing: border-box; }
.wws-scp-future .wws-scp-connector { background: #e5e7eb; }
.wws-scp-future .wws-scp-lbl { color: #9ca3af; font-weight: 400; }
.wws-scp-lbl { font-size: 14px; line-height: 1.5; display: block; margin-top: -1px; }
.wws-scp-domain {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-2);
	margin-top: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wws-scp-btn-wrap { margin-top: 8px; }
.wws-sc-check-dns {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 14px;
	background: #2563eb;
	color: #fff;
	border: none;
	border-radius: 7px;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: background .15s, transform .1s;
	white-space: nowrap;
}
.wws-sc-check-dns:hover { background: #1d4ed8; transform: translateY(-1px); }
.wws-sc-check-dns:active { transform: translateY(0); }
.wws-sc-check-dns:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.wws-sc-check-dns.wws-sc-cta-connect { background: #16a34a; }
.wws-sc-check-dns.wws-sc-cta-connect:hover { background: #15803d; }
.wws-scp-view { font-size: 12px; font-weight: 500; color: #2563eb; text-decoration: none; margin-left: 4px; opacity: .85; }
.wws-scp-view:hover { opacity: 1; }

/* ── Domain management section inside site cards ── */
.wwsb-domain-section {
	border-top: 1px solid var(--border);
	margin-top: 14px;
	padding-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.wwsb-domain-hint { margin: 0; font-size: 13px; color: var(--text-3); }
.wwsb-domain-label {
	margin: 0;
	font-size: 12px;
	color: var(--text-3);
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 600;
}
.wwsb-domain-value { font-size: 14.5px; font-weight: 700; color: var(--text-1); word-break: break-all; }
.wwsb-domain-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.wwsb-dns-status-label { margin: 0; font-size: 12.5px; }
.wwsb-dns-ok { color: #16a34a; font-weight: 600; }
.wwsb-dns-wait { color: #d97706; }
.wwsb-btn-domain { background: #2563eb; color: #fff; }
.wwsb-btn-domain:hover { background: #1d4ed8; }

/* thumbnail */
.wwsb-dash-thumb {
	width: 200px;
	min-height: 160px;
	flex-shrink: 0;
	object-fit: cover;
	display: block;
}
.wwsb-dash-thumb--placeholder {
	background: linear-gradient(135deg, var(--bg-1) 0%, var(--panel-2) 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.wwsb-dash-thumb-icon { font-size: 36px; }
.wwsb-dash-thumb-cat  { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

/* body */
.wwsb-dash-card2-body {
	flex: 1;
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}
.wwsb-dash-card2-header {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
}
.wwsb-dash-card2-title {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.wwsb-dash-card2-title strong {
	font-size: 17px;
	font-weight: 700;
	color: var(--text-1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wwsb-dash-cat-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	color: var(--accent);
	background: rgba(91,92,240,.08);
	border-radius: 6px;
	padding: 2px 8px;
	text-transform: capitalize;
	width: fit-content;
}
.wwsb-dash-card2-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.wwsb-dash-date {
	font-size: 12px;
	color: var(--text-3);
	margin: 0;
}
.wwsb-dash-gen-count {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-3);
	background: var(--panel-2);
	border-radius: 20px;
	padding: 3px 10px;
	border: 1px solid var(--border);
}

/* status badges */
.wwsb-dash-badge {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	border-radius: 20px;
	padding: 4px 10px;
	letter-spacing: .02em;
	white-space: nowrap;
}
.wwsb-dash-badge--paid      { background: #dcfce7; color: #166534; }
.wwsb-dash-badge--published { background: #dcfce7; color: #166534; }
.wwsb-dash-badge--live      { background: #d1fae5; color: #065f46; }
.wwsb-dash-badge--review    { background: #fef9c3; color: #854d0e; }
.wwsb-dash-badge--unpaid    { background: rgba(91,92,240,.10); color: var(--accent); }
.wwsb-dash-badge--draft     { background: var(--panel-2); color: var(--text-2); }
.wwsb-dash-badge--waiting-dns  { background: #fef3c7; color: #92400e; }
.wwsb-dash-badge--dns-verified { background: #dbeafe; color: #1e40af; }
@media (prefers-color-scheme: dark) {
	.wwsb-dash-badge--paid         { background: rgba(34,197,94,.18); color: #4ade80; }
	.wwsb-dash-badge--published    { background: rgba(34,197,94,.18); color: #4ade80; }
	.wwsb-dash-badge--live         { background: rgba(16,185,129,.18); color: #6ee7b7; }
	.wwsb-dash-badge--review       { background: rgba(234,179,8,.15);  color: #fbbf24; }
	.wwsb-dash-badge--waiting-dns  { background: rgba(217,119,6,.18);  color: #fcd34d; }
	.wwsb-dash-badge--dns-verified { background: rgba(37,99,235,.2);   color: #93c5fd; }
}

/* action buttons row */
.wwsb-dash-card2-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: auto;
}
.wwsb-btn-secondary {
	background: transparent;
	border: 1.5px solid var(--accent);
	color: var(--accent);
}
.wwsb-btn-secondary:hover {
	background: rgba(91,92,240,.07);
}
.wwsb-btn-danger {
	background: transparent;
	border: 1.5px solid #ef4444;
	color: #ef4444;
}
.wwsb-btn-danger:hover {
	background: rgba(239,68,68,.08);
}
.wwsb-btn-disabled {
	opacity: .5;
	pointer-events: none;
	cursor: default;
}
.wwsb-btn-sm {
	font-size: 12px;
	padding: 6px 14px;
	border-radius: 8px;
}

/* ── Header action group ── */
.wwsb-dash-hdr-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ── Account quota badge in hero ── */
.wwsb-dash-quota-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	color: var(--accent);
	background: rgba(91,92,240,.08);
	border-radius: 20px;
	padding: 2px 10px;
	margin-left: 6px;
	vertical-align: middle;
}

/* ── Quota wall ── */
.wwsb-quota-wall {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 24px;
	text-align: center;
	gap: 16px;
}
.wwsb-quota-wall-icon   { font-size: 72px; }
.wwsb-quota-wall-title  { font-size: 26px; font-weight: 800; margin: 0; color: var(--text-1); }
.wwsb-quota-wall-body   { font-size: 15px; color: var(--text-2); margin: 0; max-width: 480px; line-height: 1.6; }
.wwsb-quota-wall-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* empty state */
.wwsb-dash-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80px 24px;
	text-align: center;
	gap: 12px;
}
.wwsb-dash-empty-icon { font-size: 64px; }
.wwsb-dash-empty h3   { font-size: 22px; font-weight: 700; margin: 0; color: var(--text-1); }
.wwsb-dash-empty p    { font-size: 15px; color: var(--text-2); margin: 0; }

/* legacy card kept for compatibility */
.wwsb-dash-card {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 20px;
	display: flex; flex-direction: column; gap: 6px;
}
.wwsb-dash-card strong { font-size: 16px; font-weight: 700; }
.wwsb-dash-card p { font-size: 13px; color: var(--text-2); margin: 0; }
.wwsb-dash-card small { font-size: 11px; color: var(--text-3); }
.wwsb-dash-btns { display: flex; gap: 8px; margin-top: 8px; }

/* ── Mobile: stack card vertically ── */
@media (max-width: 640px) {
	.wwsb-dash-list { padding: 16px; gap: 14px; }
	.wwsb-dash-hero { padding: 24px 16px 16px; }
	.wwsb-dash-card2 { flex-direction: column; }
	.wwsb-dash-thumb { width: 100%; height: 160px; min-height: auto; }
	.wwsb-dash-card2-body { padding: 16px; }
	.wwsb-dash-card2-actions { gap: 6px; }
	.wwsb-dash-card2.wws-has-sc.wws-3col,
	.wwsb-dash-card2.wws-has-sc.wws-2col { grid-template-columns: 1fr; }
	.wws-sc-panel { margin: 0 16px 16px; }
}

/* ═══════════════════════════════════════════════════════════════════
   REAL TEMPLATE IFRAME PREVIEW
   The iframe is sized to the target viewport (1440/768/390px) and
   scaled down via transform: scale() to fit the preview panel.
   applyIframeScaling() in app.js adjusts transform at runtime;
   the CSS defaults ensure the template LOADS at 1440px desktop width.
   ═══════════════════════════════════════════════════════════════════ */

.wwsb-preview {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
	background: var(--bg-0);
	position: relative;
	z-index: 1;
}

/* Preview chrome: macOS traffic-light dots + URL bar + mode buttons */
.wwsb-pvw-chrome {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: var(--panel);
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
	pointer-events: auto;
}

.wwsb-pvw-dots { display: flex; gap: 5px; flex-shrink: 0; }
.wwsb-pvw-dots span { width: 9px; height: 9px; border-radius: 50%; background: #3d4055; }
.wwsb-pvw-dots span:nth-child(1) { background: #ff5f56; }
.wwsb-pvw-dots span:nth-child(2) { background: #ffbd2e; }
.wwsb-pvw-dots span:nth-child(3) { background: #27c93f; }

.wwsb-pvw-url {
	flex: 1;
	font-size: 11px;
	color: var(--text-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Mode toggle bar */
.wwsb-pvw-mode-bar {
	display: flex;
	gap: 2px;
	flex-shrink: 0;
}

.wwsb-pvw-mode-btn {
	background: none;
	border: 1px solid transparent;
	border-radius: 6px;
	padding: 4px 8px;
	font-size: 13px;
	cursor: pointer;
	color: var(--text-3);
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	line-height: 1;
}

.wwsb-pvw-mode-btn:hover {
	background: var(--panel-2);
	color: var(--text-1);
}

.wwsb-pvw-mode-btn.is-active {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
}

/* Frame wrapper — clips the oversized iframe; overflow:hidden so it never
   causes the page to scroll. The preview is a "window" into the template. */
.wwsb-pvw-frame-wrap {
	flex: 1;
	min-height: 0;
	position: relative;
	overflow-x: hidden;
	overflow-y: auto;
	background: #f4f4f5;
	pointer-events: auto;
	-webkit-overflow-scrolling: touch;
}

.wwsb-pvw-scroll-spacer {
	width: 1px;
	pointer-events: none;
	visibility: hidden;
}

/* The iframe itself — positioned absolute, anchored top-left.
   Default width 1440px ensures the template LOADS in desktop mode
   (not squeezed to the container width which would trigger mobile CSS).
   applyIframeScaling() applies transform:scale() to fit the panel.
   pointer-events:none prevents the oversized hit-box from blocking footer clicks. */
.wwsb-preview-iframe {
	position: relative;
	top: 0;
	left: 0;
	width: 1440px;
	height: 5200px;
	border: 0;
	display: block;
	transform-origin: top left;
	pointer-events: auto;
}

/* Mobile mode: centered phone frame */
.wwsb-pvw-frame-wrap.mode-mobile {
	background: #e5e7eb;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 12px;
	overflow: hidden;
}

.wwsb-pvw-frame-wrap.mode-mobile .wwsb-preview-iframe {
	width: 390px;
	height: 844px;
	border-radius: 24px;
	box-shadow: 0 0 0 10px #1a1a1a, 0 20px 50px rgba(0,0,0,0.35);
	position: relative;
	top: auto;
	left: auto;
	transform: none; /* mobile shows at native size — no scale needed */
}

/* Tablet mode: subtle bezel */
.wwsb-pvw-frame-wrap.mode-tablet .wwsb-preview-iframe {
	width: 768px;
	box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}

.wwsb-pvw-no-template {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 200px;
	color: var(--text-3);
	font-size: 14px;
	text-align: center;
	padding: 40px 24px;
}
.wwsb-pvw-no-template p { line-height: 1.9; }

/* ═══════════════════════════════════════════════════════════════════
   MEDIA / PHOTO UPLOAD STEP
   ═══════════════════════════════════════════════════════════════════ */

.wwsb-media-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 16px;
}

.wwsb-media-zone {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wwsb-media-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-3);
	margin: 0;
}

.wwsb-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 90px;
	border: 2px dashed var(--border);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
	padding: 12px 8px;
	text-align: center;
	position: relative;
	overflow: hidden;
	background: var(--surface);
}

.wwsb-dropzone:hover,
.wwsb-dropzone.drag-over {
	border-color: var(--primary);
	background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.wwsb-dropzone.has-file {
	border-style: solid;
	border-color: var(--primary);
}

.wwsb-dropzone span {
	font-size: 12px;
	color: var(--text-3);
	pointer-events: none;
}

.wwsb-dropzone.has-file span {
	color: var(--primary);
	font-weight: 600;
}

.wwsb-media-thumb {
	width: 100%;
	height: 70px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

.wwsb-hidden-file {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.wwsb-skip {
	margin-top: 12px;
	background: none;
	border: none;
	color: var(--text-3);
	font-size: 13px;
	cursor: pointer;
	padding: 4px 0;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.wwsb-skip:hover { color: var(--text-1); }

/* ═══════════════════════════════════════════════════════════════════
   LOGIN GATE (full-screen prompt when user is not logged in)
   ═══════════════════════════════════════════════════════════════════ */

.wwsb-login-gate,
#wws-login-prompt {
	position: fixed;
	inset: 0;
	background: rgba(10, 12, 20, 0.78);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000001;
	padding: 24px;
	backdrop-filter: blur(6px);
}

.wwsb-login-card {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 20px;
	padding: 48px 40px;
	max-width: 440px;
	width: 100%;
	text-align: center;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

.wwsb-login-card h2 {
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 12px;
	letter-spacing: -0.02em;
}

.wwsb-login-card p {
	font-size: 15px;
	color: var(--text-2);
	line-height: 1.6;
	margin: 0 0 24px;
}

.wwsb-login-card .wwsb-btn-lg {
	width: 100%;
	justify-content: center;
}

.wwsb-auth-card {
	text-align: left;
	position: relative;
}

.wwsb-auth-close {
	position: absolute;
	top: 14px;
	right: 16px;
	border: 0;
	background: none;
	font-size: 28px;
	line-height: 1;
	color: var(--text-3);
	cursor: pointer;
}

.wwsb-auth-form {
	display: grid;
	gap: 14px;
	margin-top: 8px;
}

.wwsb-auth-form label {
	display: grid;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-2);
}

.wwsb-auth-switch {
	margin: 18px 0 0;
	text-align: center;
	font-size: 14px;
	color: var(--text-2);
}

.wwsb-auth-switch button {
	border: 0;
	background: none;
	color: var(--accent);
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wwsb-auth-error {
	background: rgba(239, 68, 68, 0.08);
	border: 1px solid rgba(239, 68, 68, 0.25);
	color: #b91c1c;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 14px;
	margin-bottom: 8px;
}

.wwsb-update-success {
	position: fixed;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000002;
	width: min(560px, calc(100vw - 32px));
	padding: 14px 18px;
	border: 1px solid rgba(22, 163, 74, 0.35);
	border-radius: 12px;
	background: #f0fdf4;
	color: #166534;
	font-weight: 600;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}

.wwsb-btn-sm {
	padding: 8px 14px;
	font-size: 13px;
}
.wwsb-btn-xs {
	padding: 5px 10px;
	font-size: 11px;
	border-radius: 5px;
}

/* ── Advanced Section Customization Step ─────────────────────── */

/* Mode selection (AI vs Customize) */
.wwsb-adv-mode-opts {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 4px;
}
.wwsb-adv-mode-opt {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	text-align: left;
	cursor: pointer;
	background: #fff;
	transition: border-color .2s, box-shadow .2s;
	width: 100%;
}
.wwsb-adv-mode-opt:hover {
	border-color: #a5b4fc;
	box-shadow: 0 0 0 4px rgba(99,102,241,.06);
}
.wwsb-adv-mode-opt--active {
	border-color: #6366f1;
	box-shadow: 0 0 0 4px rgba(99,102,241,.1);
}
.wwsb-adv-opt-icon {
	font-size: 22px;
	flex-shrink: 0;
	width: 32px;
	text-align: center;
}
.wwsb-adv-opt-text {
	flex: 1;
}
.wwsb-adv-opt-text strong {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #1e293b;
}
.wwsb-adv-opt-text em {
	display: block;
	font-size: 12px;
	color: #64748b;
	font-style: normal;
	margin-top: 2px;
}
.wwsb-adv-badge {
	margin-left: auto;
	padding: 2px 10px;
	background: #e0e7ff;
	color: #4f46e5;
	border-radius: 99px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .4px;
	flex-shrink: 0;
}

/* Back button */
.wwsb-sec-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1.5px solid #cbd5e1;
	border-radius: 8px;
	background: #fff;
	color: #64748b;
	font-size: 12px;
	cursor: pointer;
	margin-bottom: 14px;
	transition: border-color .15s, color .15s;
}
.wwsb-sec-back-btn:hover { border-color: #818cf8; color: #4f46e5; }

/* Section cards container */
.wwsb-sec-cards {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Individual section card */
.wwsb-sec-card {
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	transition: border-color .2s;
}
/* Card with a mode actively selected (ai or manual) */
.wwsb-sec-card--active { border-color: #a5b4fc; background: #fafbff; }

/* Card explicitly skipped — visually dimmed */
.wwsb-sec-card--skipped {
	border-color: #e2e8f0;
	background: #f8fafc;
	opacity: 0.65;
}
.wwsb-sec-card--skipped .wwsb-sec-card-header { opacity: 0.6; }

.wwsb-sec-card-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: #f8fafc;
}
.wwsb-sec-card-icon { font-size: 18px; flex-shrink: 0; }
.wwsb-sec-card-label {
	font-weight: 600;
	font-size: 13px;
	color: #1e293b;
	flex: 1;
}
.wwsb-sec-card-desc {
	font-size: 11px;
	color: #94a3b8;
}

/* Mode buttons row */
.wwsb-sec-card-modes {
	display: flex;
	gap: 6px;
	padding: 10px 14px;
	background: #f8fafc;
	border-top: 1px solid #f1f5f9;
	flex-wrap: wrap;
}
.wwsb-sec-mode-btn {
	padding: 5px 12px;
	border: 1.5px solid #cbd5e1;
	border-radius: 6px;
	font-size: 12px;
	cursor: pointer;
	background: #fff;
	color: #64748b;
	transition: all .15s;
	white-space: nowrap;
}
.wwsb-sec-mode-btn:hover { border-color: #818cf8; color: #4f46e5; background: #f5f3ff; }
/* AI / Manual active → indigo pill */
.wwsb-sec-mode-btn.active { background: #6366f1; border-color: #6366f1; color: #fff; font-weight: 600; }
.wwsb-sec-mode-btn.active:hover { background: #4f46e5; }
/* Skip active → red-tinted so it reads as "off" rather than "on" */
.wwsb-sec-mode-btn[data-mode="skip"].active {
	background: #fef2f2; border-color: #fca5a5; color: #dc2626; font-weight: 600;
}
.wwsb-sec-mode-btn[data-mode="skip"].active:hover { background: #fee2e2; }

/* Form area inside a card */
.wwsb-sec-card-form {
	padding: 14px 16px;
	border-top: 1px solid #e2e8f0;
	background: #fcfcff;
}
.wwsb-sec-textarea {
	min-height: 60px;
	resize: vertical;
}

/* FAQ items */
.wwsb-faq-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 12px;
}
.wwsb-faq-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.wwsb-faq-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: #e0e7ff;
	color: #4f46e5;
	border-radius: 50%;
	font-size: 11px;
	font-weight: 600;
	flex-shrink: 0;
	margin-top: 8px;
}
.wwsb-faq-fields {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Testimonial items */
.wwsb-testi-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 12px;
}
.wwsb-testi-item {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}
.wwsb-testi-fields {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Program items */
.wwsb-prog-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 12px;
}
.wwsb-prog-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}
.wwsb-prog-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: #d1fae5;
	color: #047857;
	border-radius: 50%;
	font-size: 11px;
	font-weight: 600;
	flex-shrink: 0;
	margin-top: 8px;
}
.wwsb-prog-fields {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Remove button for section items */
.wwsb-sec-remove {
	padding: 4px 8px;
	border: 1.5px solid #fca5a5;
	border-radius: 6px;
	background: #fff;
	color: #ef4444;
	cursor: pointer;
	font-size: 11px;
	flex-shrink: 0;
	margin-top: 6px;
	transition: background .15s;
}
.wwsb-sec-remove:hover { background: #fef2f2; }

/* Login prompt overlay (injected dynamically for mid-session auth expiry) */
#wws-login-prompt,
#wws-auth-modal {
	position: fixed;
	inset: 0;
	z-index: 1000002;
	background: rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(4px);
}

/* ═══════════════════════════════════════════════════════════════════
   OTHER CATEGORY — custom description textarea
   ═══════════════════════════════════════════════════════════════════ */

.wwsb-other-desc-wrap {
	margin-top: 20px;
	padding: 16px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	animation: fadeInUp .25s ease;
}

.wwsb-label-req {
	display: block;
	font-weight: 600;
	font-size: 14px;
	color: #111827;
	margin-bottom: 2px;
}

.wwsb-req {
	color: #ef4444;
	margin-left: 2px;
}

.wwsb-field-error {
	font-size: 12px;
	color: #ef4444;
	margin: 6px 0 0;
}

/* ═══════════════════════════════════════════════════════════════════
   CLASSIFICATION GATE — business type selector in modal
   ═══════════════════════════════════════════════════════════════════ */

.wwsb-classify-gate {
	text-align: center;
	padding: 8px 0;
}

.wwsb-classify-gate h3 {
	font-size: 20px;
	font-weight: 700;
	margin: 8px 0 10px;
	color: #111827;
}

.wwsb-classify-gate p {
	font-size: 14px;
	color: #6b7280;
	margin: 0 0 20px;
	line-height: 1.5;
}

.wwsb-classify-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 24px;
	text-align: left;
}

.wwsb-classify-opt {
	display: block;
	width: 100%;
	padding: 12px 16px;
	background: #ffffff;
	border: 2px solid #e5e7eb;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 500;
	color: #374151;
	cursor: pointer;
	transition: border-color .15s, background .15s;
	text-align: left;
}

.wwsb-classify-opt:hover {
	border-color: #4f46e5;
	background: #f5f3ff;
}

.wwsb-classify-opt.is-sel {
	border-color: #4f46e5;
	background: #ede9fe;
	color: #3730a3;
	font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
	.wwsb-wizard-body { grid-template-columns: 45% 55%; }
}

@media (max-width: 880px) {
	.wwsb-wizard-body {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
	}
	.wwsb-preview { display: none; }
	.wwsb-tpl-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
	.wwsb-tpl-grid { grid-template-columns: 1fr; padding: 0 16px; }
	.wwsb-tpl-screen-header { padding: 0 16px; }
	.wwsb-tpl-intro { padding: 20px 16px 16px; }
	.wwsb-tpl-cta { padding: 16px; }
/* ═══════════════════════════════════════════════════════════════════
   CATEGORY DROPDOWN
   ═══════════════════════════════════════════════════════════════════ */

.wwsb-select-wrap {
	position: relative;
	display: block;
	margin-top: 4px;
}

.wwsb-select {
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	background: #ffffff;
	border: 2px solid #e5e7eb;
	border-radius: 10px;
	padding: 12px 40px 12px 14px;
	font-size: 15px;
	font-family: inherit;
	color: #111827;
	cursor: pointer;
	transition: border-color .2s;
}

.wwsb-select:focus {
	outline: none;
	border-color: #5b5cf0;
	box-shadow: 0 0 0 3px rgba(91, 92, 240, .12);
}

.wwsb-select-arrow {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: #6b7280;
	font-size: 16px;
}

/* ════════════════════════════════════════════════════════════════════════════
   CATEGORY SELECTOR  –  Step 2
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Selection confirmation bar (compact inline) ─────────────────────────── */
.wwsb-cat-confirm {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px 6px 12px;
	background: #F8FAFC;
	border: 1px solid #E4E9F0;
	border-radius: 10px;
	margin-bottom: 12px;
	animation: wwsb-cat-confirm-in .18s ease;
	flex-wrap: wrap;
}
@keyframes wwsb-cat-confirm-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}
.wwsb-cat-confirm-check {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: #6366F1;
}
.wwsb-cat-confirm-check svg { display: block; width: 16px; height: 16px; }
.wwsb-cat-confirm-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #64748B;
	white-space: nowrap;
	margin-right: 2px;
}
.wwsb-cat-confirm-group-tag {
	font-size: 12px;
	font-weight: 500;
	color: #374151;
	background: #F1F5F9;
	border: 1px solid #E2E8F0;
	border-radius: 6px;
	padding: 3px 8px;
	white-space: nowrap;
	line-height: 1.4;
}
.wwsb-cat-confirm-sep {
	font-size: 12px;
	color: #CBD5E1;
	flex-shrink: 0;
}
.wwsb-cat-confirm-cat-tag {
	font-size: 12px;
	font-weight: 600;
	color: #4338CA;
	background: #EEF2FF;
	border: 1px solid #C7D2FE;
	border-radius: 6px;
	padding: 3px 8px;
	white-space: nowrap;
	line-height: 1.4;
}
.wwsb-cat-confirm-change {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
	height: 36px;
	padding: 0 14px;
	border-radius: 10px;
	background: #F8FAFC;
	border: 1px solid #DDE3EC;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	color: #374151;
	cursor: pointer;
	transition: all .2s ease;
	white-space: nowrap;
	flex-shrink: 0;
}
.wwsb-cat-confirm-change:hover {
	background: #EEF2FF;
	border-color: #6366F1;
	color: #4338CA;
}

/* ── Card list ────────────────────────────────────────────────────────────── */
.wwsb-cat-groups {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* ── Group card ───────────────────────────────────────────────────────────── */
.wwsb-cat-group {
	background: #ffffff;
	border: 1px solid #E4E9F0;
	border-radius: 14px;
	padding: 16px 20px;
	box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 6px rgba(0,0,0,.03);
	transition: box-shadow .2s ease, border-color .2s ease;
}
.wwsb-cat-group:hover {
	box-shadow: 0 4px 14px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.05);
	border-color: #CBD5E1;
}
.wwsb-cat-group--soon {
	opacity: .45;
	pointer-events: none;
	box-shadow: none;
	background: #FAFAFA;
	border-color: #F3F4F6;
}
.wwsb-cat-group--soon:hover { box-shadow: none; border-color: #F3F4F6; }

/* ── Card header ──────────────────────────────────────────────────────────── */
.wwsb-cat-group-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}
.wwsb-cat-icon-circle {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.wwsb-cat-icon-circle svg { display: block; }
.wwsb-cat-group-meta { flex: 1; min-width: 0; }
.wwsb-cat-group-name {
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: #111827;
	margin: 0 0 2px;
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: 1.3;
}
.wwsb-cat-group-desc {
	font-size: 12px;
	font-weight: 400;
	margin: 0;
	line-height: 1.3;
	/* color set inline per group */
}

/* ── Pill chips ───────────────────────────────────────────────────────────── */
.wwsb-cat-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}
.wwsb-cat-pill {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 40px;
	padding: 0 16px;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 500;
	font-family: inherit;
	background: #ffffff;
	color: #374151;
	border: 1px solid #DDE3EC;
	cursor: pointer;
	transition: all .2s ease;
	white-space: nowrap;
	line-height: 1;
	user-select: none;
}
.wwsb-cat-pill:hover:not(.is-disabled):not([disabled]) {
	background: #F8FAFC;
	border-color: #94A3B8;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.wwsb-cat-pill.is-selected {
	background: #EEF2FF;
	border-color: #6366F1;
	color: #4338CA;
	font-weight: 600;
	box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.wwsb-cat-pill.is-selected:hover {
	transform: translateY(-1px);
	box-shadow: 0 0 0 3px rgba(99,102,241,.12), 0 2px 8px rgba(99,102,241,.15);
}
.wwsb-pill-check {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	color: #6366F1;
}
.wwsb-pill-check svg { display: block; width: 14px; height: 14px; }
.wwsb-cat-pill.is-disabled,
.wwsb-cat-pill[disabled] {
	opacity: .4;
	cursor: not-allowed;
	pointer-events: none;
}

/* ── Coming-soon section ──────────────────────────────────────────────────── */
.wwsb-cat-soon-section {
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid #F3F4F6;
}
.wwsb-cat-soon-title {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #D1D5DB;
	margin: 0 0 10px;
}
.wwsb-cat-soon-badge {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #9CA3AF;
	background: #F3F4F6;
	border: 1px solid #E5E7EB;
	border-radius: 4px;
	padding: 2px 6px;
	line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════
   CHAR COUNTER ROW (description + other desc)
   ═══════════════════════════════════════════════════════════════════ */

.wwsb-char-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 6px;
	font-size: 12px;
}

.wwsb-char-count {
	color: #9ca3af;
	font-variant-numeric: tabular-nums;
}

.wwsb-char-ok {
	color: #16a34a;
	font-weight: 600;
}

.wwsb-desc-ta {
	min-height: 120px;
}

/* ═══════════════════════════════════════════════════════════════════
   COMPANY INFORMATION STEP
   ═══════════════════════════════════════════════════════════════════ */

.wwsb-co-section {
	margin-bottom: 24px;
}

.wwsb-co-section-opt {
	padding-top: 4px;
	border-top: 1px solid #f3f4f6;
}

.wwsb-co-section-label {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #6b7280;
	margin: 0 0 14px;
}

.wwsb-co-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.wwsb-co-grid-sm {
	grid-template-columns: 1fr 1fr 1fr;
}

.wwsb-co-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wwsb-co-label {
	font-size: 13px;
	font-weight: 600;
	color: #374151;
}

.wwsb-co-hint {
	margin: 0;
	font-size: 11px;
	color: #9ca3af;
}

.wwsb-co-input {
	width: 100%;
}

.wwsb-opt {
	font-size: 11px;
	font-weight: 400;
	color: #9ca3af;
}

@media (max-width: 600px) {
	.wwsb-co-grid,
	.wwsb-co-grid-sm {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.wwsb-question-card { padding: 20px 20px 12px; }
	.wwsb-wizard-foot { padding: 12px 20px; }
	.wwsb-wizard-hdr { padding: 0 16px; }
	.wwsb-svc-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   SPRINT 1 — LANGUAGE STEP  (premium selectable cards)
   ═══════════════════════════════════════════════════════════════════ */

/* Keep old class for any legacy references */
.wwsb-lang-options { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }

/* New premium card layout */
/* ── Language card grid ─────────────────────────────────────────────────── */
/* !important beats WordPress theme global resets on * / div */
.wwsb-lang-cards {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 16px !important;
	margin-top: 16px !important;
	list-style: none !important;
	padding: 0 !important;
}

/* div[role=button] cards — no native button chrome, layout guaranteed */
.wwsb-lang-card {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	padding: 32px 20px 28px !important;
	background: #ffffff !important;
	background: var(--panel, #ffffff) !important;
	border: 2px solid #e2e4ec !important;
	border: 2px solid var(--border, #e2e4ec) !important;
	border-radius: 20px !important;
	border-radius: var(--radius-lg, 20px) !important;
	cursor: pointer !important;
	transition: border-color .18s, box-shadow .18s, background .18s !important;
	text-align: center !important;
	position: relative !important;
	font-family: inherit !important;
	font-size: 14px !important;
	color: #0f1117 !important;
	color: var(--text-1, #0f1117) !important;
	line-height: 1.4 !important;
	box-sizing: border-box !important;
	user-select: none !important;
	min-height: 160px !important;
}
.wwsb-lang-card:hover, .wwsb-lang-card:focus-visible {
	border-color: #5b5cf0 !important;
	border-color: var(--accent, #5b5cf0) !important;
	box-shadow: 0 0 0 4px rgba(91,92,240,.10) !important;
	outline: none !important;
}
.wwsb-lang-card.is-selected {
	border-color: #5b5cf0 !important;
	border-color: var(--accent, #5b5cf0) !important;
	background: rgba(91,92,240,.05) !important;
	box-shadow: 0 0 0 4px rgba(91,92,240,.14) !important;
}
.wwsb-lang-card-flag {
	font-size: 48px !important;
	line-height: 1 !important;
	display: block !important;
}
.wwsb-lang-card-label {
	display: block !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #0f1117 !important;
	color: var(--text-1, #0f1117) !important;
}
.wwsb-lang-card-sub {
	display: block !important;
	font-size: 12px !important;
	color: #8690a8 !important;
	color: var(--text-3, #8690a8) !important;
}
.wwsb-lang-card-check {
	position: absolute !important;
	top: 12px !important;
	right: 14px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #5b5cf0 !important;
	color: var(--accent, #5b5cf0) !important;
	background: rgba(91,92,240,.12) !important;
	width: 26px !important;
	height: 26px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
@media (max-width: 480px) {
	.wwsb-lang-cards { grid-template-columns: 1fr !important; }
}

/* ── Keep legacy .wwsb-lang-btn for any code still referencing it ── */
.wwsb-lang-btn {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 18px 20px;
	background: var(--panel);
	border: 2px solid var(--border);
	border-radius: var(--radius);
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	color: var(--text-1);
	text-align: left;
	transition: border-color .18s, box-shadow .18s, background .18s;
}

.wwsb-lang-btn:hover {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(91,92,240,.10);
}

.wwsb-lang-btn.is-selected {
	border-color: var(--accent);
	background: rgba(91,92,240,.05);
	box-shadow: 0 0 0 3px rgba(91,92,240,.14);
}

.wwsb-lang-flag {
	font-size: 28px;
	line-height: 1;
	flex-shrink: 0;
}

.wwsb-lang-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
}

.wwsb-lang-label {
	font-size: 16px;
	font-weight: 600;
	color: var(--text-1);
}

.wwsb-lang-sublabel {
	font-size: 13px;
	font-weight: 400;
	color: var(--text-2);
}

.wwsb-lang-tick {
	font-size: 18px;
	color: var(--accent);
	font-weight: 700;
	margin-left: auto;
	flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   SPRINT 1 — CREATE ACCOUNT STEP
   ═══════════════════════════════════════════════════════════════════ */

.wwsb-free-banner {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: linear-gradient(135deg, #eef2ff, #f5f3ff);
	border: 1px solid #c7d2fe;
	border-radius: var(--radius);
	padding: 16px 18px;
	margin: 14px 0 20px;
}

.wwsb-free-banner-icon {
	font-size: 26px;
	line-height: 1;
	flex-shrink: 0;
}

.wwsb-free-banner-body strong {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #3730a3;
	margin-bottom: 4px;
}

.wwsb-free-banner-body p {
	font-size: 13px;
	color: #4338ca;
	margin: 0;
	line-height: 1.4;
}

.wwsb-account-ready {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 24px 20px;
	background: var(--panel-2);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	text-align: center;
}

.wwsb-account-ready-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 700;
}

.wwsb-account-ready p {
	margin: 0;
	font-size: 14px;
	color: var(--text-1);
}

.wwsb-inline-auth-form {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wwsb-btn-full {
	width: 100%;
	justify-content: center;
	margin-top: 8px;
}