/* =========================================================
   DáBomb Portal — Component layer
   Consumes the child theme's dabomb-tokens.css variables.
   All classes prefixed .dp- so they cannot collide with
   marketing / Elementor / Woo styling.
   ========================================================= */

/* Local token layer — duplicated from dabomb-tokens.css so the portal can
   render even if the theme's tokens aren't loaded (e.g. preview outside WP).
   Names match the theme. */
.dabomb-portal {
	--bg:          #000000;
	--bg-2:        #0a0a14;
	--bg-3:        #0f1020;
	--ink:         #f4f1ea;
	--ink-dim:     rgba(244,241,234,0.62);
	--ink-faint:   rgba(244,241,234,0.32);
	--ink-ghost:   rgba(244,241,234,0.14);
	--silver:      #D9D9D6;
	--silver-bright:#E8E8E6;
	--glow:        18, 44, 103;
	--glow-hue:    #122C67;
	--hairline:    rgba(244,241,234,0.12);
	--hairline-strong: rgba(244,241,234,0.2);
	--ok:          #7ce5a6;
	--warn:        #f5c05a;
	--danger:      #f07070;
	/* v8 Production-aligned — matches Elementor kit on webdabomb. */
	--serif:       'Syne', sans-serif;
	--sans:        'Quicksand',system-ui,-apple-system,sans-serif;
	--italic:      'Syne', sans-serif;
	--mono:        'JetBrains Mono','SF Mono','Fira Code',monospace;
	--tr-lux:      0.28em;
	--tr-nav:      0.22em;
	--tr-btn:      0.24em;
	--tr-label:    0.18em;
	--pad-x:       56px;
	--pad-section: 140px;
	--ease:        cubic-bezier(0.22,0.61,0.36,1);
}

/* Reset for portal-scoped content only */
.dabomb-portal,
.dabomb-portal * { box-sizing: border-box; }
.dabomb-portal {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100svh;
	/* Syne has no italic cut — block browser synth so <em> tags don't
	   render slanted. */
	font-synthesis: none;
}
.dabomb-portal a { color: inherit; text-decoration: none; }
.dabomb-portal em { font-style: normal; }
.dabomb-portal button { font-family: inherit; }
.dabomb-portal img { max-width: 100%; display: block; }
.dabomb-portal ::selection { background: rgba(var(--glow), 0.3); }

/* Scrollbars — subtle, platinum hairline */
.dabomb-portal ::-webkit-scrollbar { width: 6px; height: 6px; }
.dabomb-portal ::-webkit-scrollbar-thumb { background: rgba(200,205,214,0.15); border-radius: 3px; }
.dabomb-portal ::-webkit-scrollbar-track { background: transparent; }

/* ─── Star logo ─── */
.dp-star {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--dp-logo-size, 34px);
	height: var(--dp-logo-size, 34px);
	border-radius: 50%;
	border: 1px solid var(--silver);
	color: #d8dde5;
	flex-shrink: 0;
}
.dp-star--glow { box-shadow: 0 0 22px rgba(var(--glow), 0.25); }
.dp-star svg { width: 55%; height: 55%; }

/* ─── Eyebrow ─── */
.dp-eyebrow {
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: var(--tr-lux);
	text-transform: uppercase;
	color: var(--silver);
}
.dp-eyebrow--default { color: var(--ink-dim); }
.dp-eyebrow--glow    { color: var(--gold); }
.dp-eyebrow--ink     { color: var(--ink); }

/* ─── Hairline ─── */
.dp-hairline       { height: 1px; width: 100%; background: var(--hairline); }
.dp-hairline--v    { width: 1px; height: auto; align-self: stretch; background: var(--hairline); }

/* ─── Buttons ─── */
.dp-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 22px;
	border: 0;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: var(--tr-btn);
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
	text-align: center;
	line-height: 1;
}
.dp-btn--small { padding: 10px 18px; font-size: 10px; }
.dp-btn--full  { width: 100%; }
.dp-btn:active:not(.is-disabled) { transform: translateY(1px); }

/* Double-class specificity so `.dabomb-portal a { color: inherit }` (higher specificity
   than a bare class selector) doesn't force the label to the cream --ink color. */
.dp-btn.dp-btn--primary {
	background: linear-gradient(180deg, #f5f6f8 0%, #e6e8ec 55%, #c4c9d1 100%);
	color: #000;
	font-weight: 700;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.dp-btn--primary.is-disabled,
.dp-btn--primary[disabled] {
	background: linear-gradient(180deg, #3a3a42 0%, #2a2a31 50%, #1c1c22 100%);
	color: rgba(244,241,234,0.3);
	cursor: not-allowed;
}

.dp-btn--ghost {
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--hairline-strong);
}
.dp-btn--ghost:hover { border-color: var(--silver); }

/* ─── Chip ─── */
.dp-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 9px;
	border: 1px solid var(--hairline);
	border-radius: 999px;
	color: var(--ink-dim);
	font-family: var(--mono);
	font-size: 9px;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.dp-chip--silver { color: var(--silver); border-color: var(--silver); }
.dp-chip--glow   { color: var(--glow-hue); border-color: rgba(var(--glow), 0.5); }
.dp-chip--ok     { color: var(--ok); border-color: rgba(124,229,166,0.4); }
.dp-chip--warn   { color: var(--warn); border-color: rgba(245,192,90,0.4); }
.dp-chip--danger { color: var(--danger); border-color: rgba(240,112,112,0.4); }

/* ─── Status dot ─── */
.dp-status-dot {
	display: inline-block;
	width: var(--dp-dot-size, 6px);
	height: var(--dp-dot-size, 6px);
	border-radius: 50%;
}
.dp-status-dot--ok     { background: var(--ok);     box-shadow: 0 0 8px var(--ok); }
.dp-status-dot--warn   { background: var(--warn);   box-shadow: 0 0 8px var(--warn); }
.dp-status-dot--danger { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.dp-status-dot--silver { background: var(--silver); box-shadow: 0 0 8px var(--silver); }

/* ─── Stat (big number + small mono label) ─── */
.dp-stat__v { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 30px); font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.dp-stat__l { font-family: var(--mono); font-size: 9px; letter-spacing: var(--tr-lux); text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; }

/* ─── Phone topbar ─── */
.dp-phone-topbar {
	position: sticky;
	top: 0;
	z-index: 10;
	display: grid;
	grid-template-columns: 28px 1fr 28px;
	align-items: center;
	gap: 12px;
	padding: 16px 20px 12px;
	border-bottom: 1px solid var(--hairline);
	background: rgba(8,7,10,0.94);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.dp-phone-topbar__slot--right { justify-self: end; }
.dp-phone-topbar__title     { text-align: center; min-width: 0; }
.dp-phone-topbar__eyebrow   { font-family: var(--mono); font-size: 9px; letter-spacing: var(--tr-lux); text-transform: uppercase; color: var(--ink-faint); }
.dp-phone-topbar__subtitle  { font-family: var(--serif); font-size: 13px; font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: 0.08em; color: var(--silver); line-height: 1; margin-top: 2px; }

/* ─── Phone tab bar (bottom nav) ─── */
.dp-phone-tabbar {
	position: sticky;
	bottom: 0;
	left: 0; right: 0;
	z-index: 20;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	background: rgba(8,7,10,0.96);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--hairline);
	padding: 10px 8px calc(28px + env(safe-area-inset-bottom));
}
.dp-phone-tabbar__tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 6px 10px;
	color: var(--ink-faint);
	font-family: var(--mono);
	font-size: 8px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 400;
	transition: color 0.2s var(--ease);
}
.dp-phone-tabbar__tab.is-active { color: var(--silver); }
.dp-phone-tabbar__icon { display: inline-flex; width: 22px; height: 22px; }

/* ─── Phone frame (canvas preview + mobile viewport) ─── */
.dp-phone-frame-wrap { display: flex; flex-direction: column; gap: 12px; }
.dp-phone-frame-label {
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: var(--tr-lux);
	text-transform: uppercase;
	color: rgba(244,241,234,0.3);
}
.dp-phone-frame {
	width: var(--dp-phone-w, 380px);
	height: var(--dp-phone-h, 820px);
	background: #000;
	border-radius: 38px;
	padding: 10px;
	box-shadow: 0 50px 100px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
	position: relative;
	overflow: hidden;
}
.dp-phone-frame__notch {
	position: absolute;
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
	width: 120px;
	height: 28px;
	background: #000;
	border-radius: 20px;
	z-index: 30;
}
.dp-phone-frame__inner {
	position: relative;
	width: 100%;
	height: 100%;
	background: var(--bg);
	border-radius: 28px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* On real mobile routes, unwrap the frame */
.dabomb-portal--scene-02-login .dp-phone-frame,
.dabomb-portal--scene-02-dashboard .dp-phone-frame,
.dabomb-portal--scene-02-promos .dp-phone-frame,
.dabomb-portal--scene-03-catalog .dp-phone-frame,
.dabomb-portal--scene-03-pdp .dp-phone-frame,
.dabomb-portal--scene-03-cart .dp-phone-frame,
.dabomb-portal--scene-03-checkout .dp-phone-frame,
.dabomb-portal--scene-04-confirmation .dp-phone-frame,
.dabomb-portal--scene-04-orders .dp-phone-frame,
.dabomb-portal--scene-04-order-detail .dp-phone-frame,
.dabomb-portal--scene-04-credit .dp-phone-frame,
.dabomb-portal--scene-05-account .dp-phone-frame,
.dabomb-portal--scene-05-whatsapp .dp-phone-frame {
	/* placeholder — real-route unwrap handled per-screen later */
}

/* ─── Desktop nav (landing, admin) ─── */
.dp-desktop-nav {
	position: sticky;
	top: 0;
	z-index: 10;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 22px var(--pad-x);
	border-bottom: 1px solid var(--hairline);
	background: rgba(8,7,10,0.8);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.dp-desktop-nav__left,
.dp-desktop-nav__right {
	display: flex;
	gap: 36px;
	align-items: center;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--tr-nav);
	text-transform: uppercase;
	color: var(--ink-dim);
}
.dp-desktop-nav__right { justify-content: flex-end; gap: 20px; }
.dp-desktop-nav__center { justify-self: center; }
.dp-desktop-nav a { color: var(--ink-dim); transition: color 0.2s var(--ease); }
.dp-desktop-nav a:hover { color: var(--ink); }

/* ─── Section helpers ─── */
.dp-section {
	padding: 100px var(--pad-x);
	border-top: 1px solid var(--hairline);
	position: relative;
}
.dp-section--first { border-top: 0; padding-top: 80px; }
.dp-section__kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.dp-section__kicker::before {
	content: '';
	display: block;
	width: 40px;
	height: 1px;
	background: var(--silver);
}
.dp-section h2 {
	font-family: var(--serif);
	font-weight: 400;
	/* Syne is substantially wider than the prior Cormorant Garamond — size
	   re-balanced fluidly so the headline fits its container from 320px up
	   through desktop without wrapping into giant stacks. */
	font-size: clamp(24px, 3.6vw, 40px);
	line-height: 1.15;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	max-width: 720px;
	margin: 0;
}
.dp-section h2 em {
	font-family: inherit;
	font-style: normal;
	font-weight: inherit;
	color: inherit;
}

/* ─── Utility: silver / glow emphasis (italics removed — Syne has no
   italic cut and synthetic italic is banned in v7 Ethereal Vector) ─── */
.dp-em-silver {
	font-style: normal;
	background: linear-gradient(135deg, var(--silver-bright), var(--silver) 60%, #8a8f98);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.dp-em-glow {
	font-style: normal;
	color: var(--glow-hue);
	text-shadow: 0 0 30px rgba(var(--glow), 0.6);
}

/* ─── Mobile breakpoint ─── */
@media (max-width: 900px) {
	.dabomb-portal { --pad-x: 22px; --pad-section: 80px; }
	.dp-section { padding: 70px var(--pad-x); }
}

/* =========================================================
   Language toggle — floating pill, top-right.
   Hidden on canvas (the canvas already embeds the toggle via iframes).
   ========================================================= */
.dabomb-portal .dp-lang {
	position: fixed;
	top: 14px;
	right: 14px;
	z-index: 9999;
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	background: rgba(8,7,10,0.82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--hairline);
	border-radius: 999px;
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.dabomb-portal .dp-lang__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	padding: 6px 10px;
	color: var(--ink-dim);
	text-decoration: none;
	border-radius: 999px;
	transition: color 120ms var(--ease), background 120ms var(--ease);
}
.dabomb-portal .dp-lang__btn:hover { color: var(--ink); }
.dabomb-portal .dp-lang__btn.is-active {
	background: rgba(var(--glow), 0.18);
	color: var(--silver-bright);
	box-shadow: 0 0 10px rgba(var(--glow), 0.3);
}
.dabomb-portal--canvas .dp-lang,
.dabomb-portal--scene-06-admin-queue .dp-lang,
.dabomb-portal--scene-07-admin-detail .dp-lang {
	/* admin + canvas already have headers; keep toggle visible there */
}

/* ─── Form loading state — used by signup, profile, login. ─────────── */
/* portal.js adds .is-loading on submit (after validators don't preventDefault). */
.dabomb-portal form.is-loading { pointer-events: none; }
.dabomb-portal form.is-loading input,
.dabomb-portal form.is-loading select,
.dabomb-portal form.is-loading textarea { opacity: 0.45; }
.dabomb-portal form.is-loading button[type="submit"],
.dabomb-portal form.is-loading input[type="submit"] {
	cursor: wait;
	opacity: 0.85;
}
.dabomb-portal .dp-loading-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 10px;
	vertical-align: -2px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: dp-spin 0.7s linear infinite;
}
.dabomb-portal .dp-loading-text {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
@keyframes dp-spin { to { transform: rotate(360deg); } }

/* ─── Empty-state panel — used wherever a data source is unwired/empty. */
.dabomb-portal .dp-empty {
	margin: 28px 20px;
	padding: 36px 22px 32px;
	border: 1px dashed var(--hairline);
	border-radius: 10px;
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	text-align: center;
	background: rgba(255,255,255,0.015);
}
.dabomb-portal .dp-empty__icon { color: var(--silver); opacity: 0.6; margin-bottom: 4px; }
.dabomb-portal .dp-empty__title {
	font-family: var(--serif);
	font-size: 22px;
	font-weight: 300;
	letter-spacing: -0.01em;
	color: var(--ink);
}
.dabomb-portal .dp-empty__body {
	font-size: 13px;
	color: var(--ink-dim);
	line-height: 1.55;
	font-weight: 300;
	margin: 0;
	max-width: 380px;
}
.dabomb-portal .dp-empty__cta {
	margin-top: 8px;
	display: inline-flex;
	padding: 12px 22px;
	border: 1px solid var(--hairline-strong);
	border-radius: 6px;
	color: var(--silver);
	text-decoration: none;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.dabomb-portal .dp-empty__cta:hover { border-color: var(--silver); color: var(--ink); }

/* Exit to marketing site — fixed top-left, symmetric with `.dp-lang` (top-right). */
.dabomb-portal .dp-portal-exit {
	position: fixed;
	top: max(14px, env(safe-area-inset-top, 0px));
	left: max(14px, env(safe-area-inset-left, 0px));
	z-index: 9998;
	pointer-events: none;
}
.dabomb-portal .dp-portal-exit__link {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 10px;
	background: rgba(8,7,10,0.82);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--hairline);
	border-radius: 999px;
	font-family: var(--mono);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-dim);
	text-decoration: none;
	transition: color 120ms var(--ease), background 120ms var(--ease), border-color 120ms var(--ease);
}
.dabomb-portal .dp-portal-exit__link:hover {
	color: var(--silver-bright);
	border-color: rgba(var(--glow), 0.35);
}
.dabomb-portal .dp-portal-exit__arrow {
	transition: transform 0.2s ease;
	display: inline-block;
	font-size: 12px;
	line-height: 1;
}
.dabomb-portal .dp-portal-exit__link:hover .dp-portal-exit__arrow {
	transform: translateX(-3px);
}
@media (max-width: 420px) {
	.dabomb-portal .dp-portal-exit__label {
		font-size: 8px;
		letter-spacing: 0.12em;
	}
	.dabomb-portal .dp-portal-exit__link {
		padding: 8px 11px;
	}
}