/* ==========================================================================
   Stellar Mailer Builder — Frontend page chrome  (v1.11.0)
   Scoped to .smb-page wrapper so styles never leak into the WP media modal.
   Brand colours: Stellar magenta #D50057 + Stellar navy #00205C.
   ========================================================================== */

/* ---- Body reset only (no inheritance-leaking styles) ---- */
body.smb-frontend-body {
	margin: 0;
	padding: 0;
}

/* ---- Page wrapper holds all visual styles ---- */
.smb-page {
	background: var(--smb-bg);
	color: var(--smb-text);
	font-family: var(--smb-font);
	font-size: 14px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100vh;
}

.smb-page,
.smb-page *,
.smb-page *::before,
.smb-page *::after {
	box-sizing: border-box;
}

.smb-page a { color: var(--smb-primary); }

/* ==========================================================================
   Page header — Stellar navy gradient with magenta glow accents
   ========================================================================== */
.smb-page-header {
	background:
		/* Magenta glow top-right (Stellar primary) */
		radial-gradient(ellipse at top right, rgba(213, 0, 87, 0.32) 0%, transparent 55%),
		/* Bright pink glow bottom-left */
		radial-gradient(ellipse at bottom left,  rgba(230, 0, 115, 0.28) 0%, transparent 55%),
		/* Navy base — exactly matches stellarmea.com */
		linear-gradient(135deg, #00102E 0%, #00205C 50%, #0A2D70 100%);
	color: #fff;
	padding: 26px 0;
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid rgba(213, 0, 87, 0.20);   /* Subtle magenta line */
}

/* Subtle grid pattern behind */
.smb-page-header::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
	background-size: 56px 56px;
	pointer-events: none;
	mask-image: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 100%);
	-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 100%);
}

.smb-page-header__inner {
	position: relative;
	z-index: 1;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.smb-page-header__brand {
	display: flex;
	align-items: center;
	gap: 18px;
}

/* Real Stellar logo image — replaces the old gradient square + emoji. */
.smb-page-header__logo-img {
	display: block;
	max-height: 52px;
	width: auto;
	filter: drop-shadow(0 6px 18px rgba(213, 0, 87, 0.4));
	transition: transform 0.25s ease, filter 0.25s ease;
}

.smb-page-header__logo-img:hover {
	transform: scale(1.04);
	filter: drop-shadow(0 8px 24px rgba(213, 0, 87, 0.55));
}

.smb-page-header__titles {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Small brand-name pill above the product title — anchors the brand even
   if the logo doesn't render (LiteSpeed image lazy-loading, etc.) */
.smb-page-header__brand-tag {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #FFB3D1;   /* soft Stellar pink */
	margin-bottom: 2px;
}

.smb-page-header h1 {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #fff;
}

.smb-page-header p {
	margin: 2px 0 0;
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.72);
}

.smb-page-header__user {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.92);
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.smb-page-header__user > span:first-child {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 179, 209, 0.20);
	border-radius: 999px;
	backdrop-filter: blur(8px);
	font-weight: 500;
}

.smb-page-header__user .smb-text-link {
	color: rgba(255, 255, 255, 0.92);
	text-decoration: none;
	padding: 6px 12px;
	border-radius: 6px;
	font-weight: 600;
	transition: background 0.15s ease;
}

.smb-page-header__user .smb-text-link:hover {
	background: rgba(213, 0, 87, 0.22);    /* Magenta wash on hover */
	color: #fff;
}

/* v1.22.7 — Highlighted variant for the "Open [other mode] →" link.
   Stands out so PMs see the alternate mode is one click away. */
.smb-page-header__user .smb-text-link--accent {
	background: rgba(213, 0, 87, 0.28);
	border: 1px solid rgba(255, 179, 209, 0.32);
	color: #fff;
	font-weight: 700;
}
.smb-page-header__user .smb-text-link--accent:hover {
	background: rgba(230, 0, 115, 0.55);
	border-color: rgba(255, 179, 209, 0.55);
}

.smb-sep { opacity: 0.4; }

/* ==========================================================================
   Main content area
   ========================================================================== */
.smb-frontend-main {
	max-width: 1400px;
	margin: 0 auto;
	padding: 32px;
}

.smb-page-footer {
	margin-top: 36px;
	padding-top: 20px;
	border-top: 1px solid var(--smb-border);
	color: var(--smb-text-3);
	font-size: 12px;
	text-align: center;
	font-weight: 500;
}

.smb-page-footer a {
	color: var(--smb-primary);
	text-decoration: none;
	font-weight: 700;
}

.smb-page-footer a:hover { text-decoration: underline; }

.smb-page-footer em {
	font-style: italic;
	color: var(--smb-text-3);
	opacity: 0.85;
}

.smb-page-footer code {
	background: var(--smb-card);
	padding: 1px 8px;
	border-radius: 4px;
	border: 1px solid var(--smb-border);
	font-family: var(--smb-font-mono);
	font-size: 11px;
}

/* ==========================================================================
   Mobile responsive
   ========================================================================== */
@media (max-width: 720px) {
	.smb-page-header__inner    { padding: 0 18px; }
	.smb-frontend-main         { padding: 20px 14px; }
	.smb-page-header h1        { font-size: 19px; }
	.smb-page-header__logo-img { max-height: 40px; }
}