/*
 * Retaj Center — Liquid Glass design system.
 * Loaded after style.css. Glass is for fixed/floating chrome only (header,
 * FABs, sheets, filter pills) — never behind large scrollable content.
 * See design-handoff/project/uploads/lms-theme-design-brief-glass.md for source.
 */

:root {
	/* Glass surface tokens */
	--glass-blur: 28px;
	--glass-saturate: 170%;
	--glass-tint-light: rgba(255, 255, 255, 0.55);
	--glass-tint-light-scrolled: rgba(255, 255, 255, 0.78);
	--glass-tint-dark: rgba(22, 22, 26, 0.55);
	--glass-tint-dark-scrolled: rgba(22, 22, 26, 0.8);
	--glass-edge-light: rgba(255, 255, 255, 0.42);
	--glass-edge-dark: rgba(255, 255, 255, 0.14);
	--glass-radius: 28px;
	--glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
	--glass-backdrop: blur(var(--glass-blur)) saturate(var(--glass-saturate));

	/* Semantic color */
	--color-primary: #0a84ff;
	--color-primary-hover: #0069d9;
	--color-secondary: #5e5ce6;
	--color-success: #34c759;
	--color-success-bg: #e6f8ee;
	--color-success-text: #157f3b;
	--color-error: #ff3b30;
	--color-error-bg: #ffebea;
	--color-error-text: #a32218;
	--color-warning: #ff9f0a;
	--color-warning-bg: #fff3e0;
	--color-warning-text: #8a5300;
	--color-bg-light: #f5f5f7;
	--color-bg-dark: #0b0b0c;
	--color-surface: #ffffff;
	--color-surface-dark: #1c1c1e;
	--color-text: #1d1d1f;
	--color-text-secondary: #6e6e73;
	--color-text-tertiary: #86868b;
	--color-divider: rgba(0, 0, 0, 0.08);

	/* Type scale */
	--font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
	--font-family-ar: "IBM Plex Sans Arabic", -apple-system, sans-serif;
	--text-large-title: 34px;
	--text-title: 22px;
	--text-body: 17px;
	--text-subhead: 15px;
	--text-caption: 13px;

	/* Grid */
	--space-unit: 8px;
	--tap-target: 44px;
	--content-max: 1160px;
	--radius-card: 22px;
	--radius-pill: 999px;
}

/* Reduced transparency / no backdrop-filter support: solid fallback, no blur */
@media (prefers-reduced-transparency: reduce) {
	:root {
		--glass-tint-light: #ffffff;
		--glass-tint-light-scrolled: #ffffff;
		--glass-tint-dark: #16161a;
		--glass-tint-dark-scrolled: #16161a;
		--glass-backdrop: none;
	}
}

@supports not (backdrop-filter: blur(1px)) {
	:root {
		--glass-tint-light: #ffffff;
		--glass-tint-light-scrolled: #ffffff;
		--glass-tint-dark: #16161a;
		--glass-tint-dark-scrolled: #16161a;
		--glass-backdrop: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.glass-rise,
	[data-pulse] {
		animation: none !important;
		transition: none !important;
	}
}

@keyframes glass-rise {
	from { transform: translateY(6px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

@keyframes live-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.45; transform: scale(0.82); }
}

/* ---------------------------------------------------------------
   Base
--------------------------------------------------------------- */
body {
	background: var(--color-bg-light);
	color: var(--color-text);
	font-family: var(--font-family);
	font-size: var(--text-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

html[lang="ar"] body,
[dir="rtl"] body {
	font-family: var(--font-family-ar);
}

a {
	color: var(--color-primary);
	text-decoration: none;
}

a:hover {
	color: var(--color-primary-hover);
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
}

.container {
	max-width: var(--content-max);
	margin-inline: auto;
	padding-inline: 40px;
}

@media (max-width: 782px) {
	.container {
		padding-inline: 20px;
	}
}

/* ---------------------------------------------------------------
   Glass surfaces — chrome only
--------------------------------------------------------------- */
.glass {
	background: var(--glass-tint-light);
	backdrop-filter: var(--glass-backdrop);
	-webkit-backdrop-filter: var(--glass-backdrop);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.65),
		inset 0 0 0 1px var(--glass-edge-light),
		var(--glass-shadow);
	border-radius: var(--glass-radius);
}

.glass--dark {
	background: var(--glass-tint-dark);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		inset 0 0 0 1px var(--glass-edge-dark),
		0 12px 40px rgba(0, 0, 0, 0.5);
	color: var(--color-bg-light);
}

.glass--scrolled {
	background: var(--glass-tint-light-scrolled);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.7),
		inset 0 0 0 1px var(--glass-edge-light),
		0 6px 24px rgba(0, 0, 0, 0.12);
}

.glass-fab {
	position: fixed;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 56px;
	padding-inline: 24px;
	border-radius: var(--radius-pill);
	color: #fff;
	background: rgba(10, 132, 255, 0.82);
	backdrop-filter: var(--glass-backdrop);
	-webkit-backdrop-filter: var(--glass-backdrop);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.35),
		inset 0 0 0 1px rgba(255, 255, 255, 0.25),
		0 14px 44px rgba(10, 132, 255, 0.35);
	font-size: 17px;
	font-weight: 600;
}

.glass-fab--danger {
	background: rgba(255, 59, 48, 0.86);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.35),
		inset 0 0 0 1px rgba(255, 255, 255, 0.25),
		0 14px 44px rgba(255, 59, 48, 0.4);
}

/* ---------------------------------------------------------------
   Site header — sticky glass, legibility layer on scroll
--------------------------------------------------------------- */
.site-header-wrap {
	position: fixed;
	top: 0;
	inset-inline: 0;
	z-index: 40;
	display: flex;
	justify-content: center;
	padding: 16px 20px;
	transition: padding 0.3s ease;
}

.site-header-wrap.is-scrolled {
	padding: 8px 16px;
}

.site-header {
	width: 100%;
	max-width: 1280px;
	height: 68px;
	display: flex;
	align-items: center;
	gap: 26px;
	padding-inline: 20px;
	transition: height 0.3s ease, background 0.3s ease;
}

.site-header-wrap.is-scrolled .site-header {
	height: 60px;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
	min-width: 0;
}

/*
 * WP outputs the_custom_logo() at the uploaded image's real pixel
 * dimensions (e.g. a wide 200x50 logo renders at a literal 200px), with no
 * built-in size cap. On a narrow header that alone can exceed the
 * available width and push the nav/actions past the viewport edge —
 * scale it to a fixed header-appropriate height instead, width following
 * proportionally.
 */
.custom-logo-link img {
	height: 34px;
	width: auto;
	max-width: 140px;
	object-fit: contain;
}

.site-branding__mark {
	width: 34px;
	height: 34px;
	border-radius: 11px;
	background: linear-gradient(145deg, var(--color-primary), var(--color-secondary));
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	display: grid;
	place-items: center;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
	flex: none;
}

.site-branding__text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.site-branding__name {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--color-text);
}

.site-branding__tag {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--color-text-tertiary);
}

.main-navigation ul {
	display: flex;
	align-items: center;
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 500;
}

.main-navigation a {
	display: flex;
	align-items: center;
	gap: 5px;
	color: var(--color-text);
}

.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: var(--color-primary);
	font-weight: 600;
}

.main-navigation .menu-item-has-children > a::after {
	content: "";
	width: 11px;
	height: 11px;
	margin-inline-start: 5px;
	display: inline-block;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.main-navigation ul ul {
	display: none;
	position: absolute;
	top: 100%;
	/* No margin-top here on purpose — a real gap between the nav item and
	   the dropdown breaks the hover chain (moving the cursor down through
	   empty space un-hovers the parent <li> before reaching the dropdown,
	   closing it). The dropdown sits flush against the nav row instead;
	   its own padding still gives the menu items visual breathing room. */
	background: var(--color-surface);
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
	padding: 8px;
	min-width: 200px;
	flex-direction: column;
	gap: 0;
	z-index: 41;
}

.main-navigation ul li {
	position: relative;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	display: flex;
}

.main-navigation ul ul li a {
	padding: 10px 14px;
	border-radius: 10px;
	white-space: nowrap;
}

.main-navigation ul ul li a:hover {
	background: var(--color-bg-light);
}

.header-live-dot {
	width: 8px;
	height: 8px;
	border-radius: var(--radius-pill);
	background: var(--color-error);
	box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.18);
	display: inline-block;
}

[data-pulse] {
	animation: live-pulse 1.8s ease-in-out infinite;
}

.header-actions {
	margin-inline-start: auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

.header-icon-btn {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.5);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
	color: var(--color-text);
	position: relative;
}

.header-avatar-btn {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	display: block;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
	flex: none;
	transition: box-shadow 0.15s ease;
}

.header-avatar-btn:hover {
	box-shadow: inset 0 0 0 2px var(--color-primary);
}

.header-avatar-btn img.avatar {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	border-radius: 50% !important;
	margin: 0 !important;
}

.vitra-cart-badge {
	position: absolute;
	top: -2px;
	inset-inline-end: -2px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: var(--radius-pill);
	background: linear-gradient(145deg, var(--color-primary), var(--color-secondary));
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 0 0 2px #fff;
}

.header-lang-btn {
	font-family: var(--font-family-ar);
	font-size: 14px;
	font-weight: 600;
}

.menu-toggle {
	display: none;
}

@media (max-width: 960px) {
	/* The <nav> itself must stay visible — the toggle button lives inside
	   it (navigation.js requires this: it only looks for a <button>
	   descendant of #site-navigation, and silently no-ops if it can't find
	   one). Only the actual menu <ul> hides/shows on toggle, never the nav
	   wrapper itself — otherwise the button used to reveal the menu would
	   be hidden along with it. */
	.main-navigation {
		display: flex;
		align-items: center;
	}

	.main-navigation > ul {
		display: none;
	}

	.main-navigation.toggled > ul {
		display: flex;
	}

	.menu-toggle {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		border-radius: var(--radius-pill);
		background: rgba(255, 255, 255, 0.5);
		border: none;
		margin-inline-start: auto;
	}

	.main-navigation.toggled > ul {
		position: fixed;
		top: 84px;
		inset-inline: 16px;
		max-height: calc(100vh - 104px);
		overflow-y: auto;
		flex-direction: column;
		padding: 16px;
		z-index: 39;
		background: var(--color-surface);
		border-radius: 22px;
		box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
	}

	.main-navigation.toggled ul {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		width: 100%;
	}

	/* .site-header carries backdrop-filter for the glass look, which (like
	   filter) makes it the positioning containing block for its position:
	   fixed descendants instead of the viewport — so this panel was being
	   sized/positioned relative to the header's own narrower box. Because
	   .site-header's own box happens to already sit symmetrically inside
	   the viewport (see .site-header-wrap's equal left/right padding), its
	   16px inset-inline still lands centered — but the width:100% rule
	   above has equal specificity and loads later, so it was winning the
	   cascade tie and overriding the "right" inset with the containing
	   block's own (offset) width, which is what pushed the panel visibly
	   off-center. Restoring width:auto here (same specificity, later in
	   source, so it wins) lets both insets apply again. */
	.main-navigation.toggled > ul {
		width: auto;
	}

	.main-navigation.toggled ul li {
		width: 100%;
	}

	.main-navigation.toggled ul a {
		padding: 12px 10px;
		border-radius: 12px;
		width: 100%;
		box-sizing: border-box;
	}

	.main-navigation.toggled ul a:hover {
		background: var(--color-bg-light);
	}

	/* Submenus become inline/expanded within the mobile panel instead of a
	   floating absolute-positioned dropdown, which would run off-screen. */
	.main-navigation.toggled ul ul {
		position: static;
		box-shadow: none;
		background: var(--color-bg-light);
		margin: 4px 0 8px 12px;
		display: none;
	}

	.main-navigation.toggled ul li.focus > ul {
		display: flex;
	}
}

/* ---------------------------------------------------------------
   Buttons
--------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: var(--tap-target);
	padding-inline: 22px;
	border-radius: var(--radius-pill);
	font-size: 16px;
	font-weight: 600;
	border: none;
	cursor: pointer;
	white-space: nowrap;
}

.btn-primary {
	background: var(--color-primary);
	color: #fff;
	box-shadow: 0 10px 26px rgba(10, 132, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn-primary:hover {
	background: var(--color-primary-hover);
	color: #fff;
}

.btn-secondary {
	background: #fff;
	color: var(--color-text);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.btn-ghost {
	background: var(--color-bg-light);
	color: var(--color-text);
}

.btn-dark {
	background: var(--color-text);
	color: #fff;
}

.btn-lg {
	height: 56px;
	padding-inline: 28px;
	font-size: 17px;
}

/* ---------------------------------------------------------------
   Cards
--------------------------------------------------------------- */
.card {
	background: var(--color-surface);
	border-radius: var(--radius-card);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	padding: 24px;
}

.card-grid {
	display: grid;
	gap: 20px;
}

.stat-card {
	background: var(--color-surface);
	border-radius: var(--radius-card);
	padding: 24px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.stat-card__num {
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.stat-card__label {
	font-size: 15px;
	color: var(--color-text-secondary);
	margin-top: 4px;
}

/* ---------------------------------------------------------------
   Course card
--------------------------------------------------------------- */
.course-card {
	background: var(--color-surface);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	display: flex;
	flex-direction: column;
}

.course-card__thumb {
	height: 150px;
	background: linear-gradient(140deg, #cfe2ff, #dcd7ff);
	position: relative;
}

.course-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.course-card__badge {
	position: absolute;
	top: 12px;
	inset-inline-start: 12px;
	height: 26px;
	padding-inline: 10px;
	border-radius: var(--radius-pill);
	background: var(--color-success);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	display: grid;
	place-items: center;
}

.course-card__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.course-card__title {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--color-text);
}

.course-card__meta {
	font-size: 14px;
	color: var(--color-text-tertiary);
}

.course-card__foot {
	display: flex;
	gap: 14px;
	font-size: 14px;
	color: var(--color-text-secondary);
	padding-top: 10px;
	border-top: 1px solid var(--color-divider);
	margin-top: 4px;
}

/* ---------------------------------------------------------------
   Hero
--------------------------------------------------------------- */
.hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, #eaf2ff 0%, #f5f5f7 58%, #fff6e8 100%);
}

.hero__blob {
	position: absolute;
	border-radius: var(--radius-pill);
	pointer-events: none;
}

.hero-inner {
	position: relative;
	max-width: 1280px;
	margin-inline: auto;
	padding: 150px 40px 72px;
}

/* ---------------------------------------------------------------
   Site footer — solid, no glass
--------------------------------------------------------------- */
.site-footer {
	background: var(--color-surface-dark);
	color: #f5f5f7;
	padding: 56px 40px 30px;
}

.site-footer a {
	color: rgba(245, 245, 247, 0.82);
}

.site-footer a:hover {
	color: #fff;
}

.footer-grid {
	max-width: 1280px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.7fr 1fr 1fr 1.3fr;
	gap: 32px;
}

.footer-col h4 {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: rgba(245, 245, 247, 0.5);
	margin-bottom: 12px;
}

.footer-col a,
.footer-col p {
	display: block;
	font-size: 16px;
	color: rgba(245, 245, 247, 0.82);
	margin-bottom: 12px;
}

.footer-legal {
	max-width: 1280px;
	margin-inline: auto;
	margin-top: 34px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-size: 14px;
	color: rgba(245, 245, 247, 0.5);
	flex-wrap: wrap;
}

/* ---------------------------------------------------------------
   Forms / inputs
--------------------------------------------------------------- */
.field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.field label {
	font-size: 15px;
	font-weight: 600;
	color: #3a3a3c;
}

.field input,
.field select,
.field textarea {
	height: 56px;
	border-radius: 16px;
	border: none;
	background: var(--color-bg-light);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
	padding-inline: 18px;
	font-size: 17px;
	font-weight: 600;
	color: var(--color-text);
	font-family: inherit;
	width: 100%;
	box-sizing: border-box;
}

.field textarea {
	height: auto;
	padding-block: 14px;
	min-height: 120px;
}

/* ---------------------------------------------------------------
   404
--------------------------------------------------------------- */
.error-404-wrap {
	position: relative;
	overflow: hidden;
	background: var(--color-bg-dark);
	min-height: 100vh;
	display: grid;
	place-items: center;
}

.error-404-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(100% 80% at 30% 10%, #1b3a6b 0%, #0b0b0c 65%),
		radial-gradient(70% 60% at 85% 90%, #3a2560 0%, transparent 70%);
}

.error-404-card {
	position: relative;
	width: 420px;
	max-width: calc(100vw - 40px);
	padding: 32px;
	color: #f5f5f7;
}

.error-404-code {
	font-size: 72px;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
}

/* ---------------------------------------------------------------
   RTL
--------------------------------------------------------------- */
[dir="rtl"] .hero-inner,
[dir="rtl"] .container {
	direction: rtl;
}

[dir="rtl"] .ltr-island {
	direction: ltr;
	display: inline-block;
}

/* Utility */
.text-center { text-align: center; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ---------------------------------------------------------------
   Responsive / mobile
   Templates set desktop column counts via inline `grid-template-columns`
   (needed since each layout's proportions differ — 1.08fr .92fr, 340px 1fr,
   etc.). `.responsive-grid` is added alongside those inline styles purely as
   a hook for the overrides below; `!important` here is intentional and
   necessary — it's the only thing that can beat a plain (non-!important)
   inline style, and every affected element only ever carries the one
   grid-template-columns declaration inline, so this can't fight itself.
--------------------------------------------------------------- */
html, body {
	overflow-x: hidden;
	max-width: 100%;
}

img, svg, iframe {
	max-width: 100%;
}

@media (max-width: 900px) {
	.responsive-grid {
		grid-template-columns: 1fr !important;
	}

	/*
	 * CTA gradient banners (homepage, About Us) size their inner text
	 * column with an inline min-width:380px meant for desktop — inside a
	 * narrow mobile container (padding 44px each side) that overflows the
	 * card and gets clipped by its own overflow:hidden. Force it to shrink.
	 */
	div[style*="min-width:380px"] {
		min-width: 0 !important;
	}

	div[style*="padding:52px 44px"] {
		padding: 32px 24px !important;
		flex-direction: column !important;
		align-items: flex-start !important;
	}

	div[style*="padding:52px 44px"] div[style*="font-size:34px"],
	div[style*="padding:52px 44px"] div[style*="font-size:38px"] {
		font-size: 24px !important;
	}

	div[style*="padding:52px 44px"] > a.btn {
		width: 100%;
		justify-content: center;
	}

	.responsive-grid--compact {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.responsive-grid--hero {
		padding-top: 128px !important;
	}

	.responsive-grid--divider > div:nth-child(2) {
		display: none;
	}

	.responsive-grid--sidebar {
		align-items: stretch !important;
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 28px 20px !important;
	}

	.site-header {
		gap: 10px !important;
		padding-inline: 14px !important;
	}

	.custom-logo-link img {
		height: 28px !important;
		max-width: 100px !important;
	}

	.site-branding__name {
		font-size: 15px !important;
	}

	.hero-inner,
	.hero {
		padding-inline: 20px !important;
	}

	h1 {
		font-size: 34px !important;
		line-height: 1.15 !important;
	}

	h2 {
		font-size: 26px !important;
	}

	#sc-total {
		font-size: 56px !important;
	}

	.error-404-code {
		font-size: 48px !important;
	}

	/* Sections use inline padding-block (e.g. 88px); scale it down so mobile
	   doesn't scroll through huge empty gaps between sections. */
	[style*="padding-block:88px"] {
		padding-block: 40px 0 !important;
	}

	[style*="padding-top:150px"],
	[style*="padding-top:168px"],
	[style*="padding-top:148px"] {
		padding-top: 128px !important;
	}

	/* Any sticky sidebar/TOC shouldn't stay pinned mid-scroll once it's
	   stacked full-width above/below other content on a small screen.
	   Catch-all on the real inline-style text (no space after the colon —
	   that's how every template actually writes it; a stray space here
	   previously made this match nothing at all) rather than only the
	   .responsive-grid--sidebar first-<div>-child case, since not every
	   sticky element in the theme is a <div> or a first child (e.g. the
	   Zoom meeting single page's sidebar is the second grid child, and the
	   Privacy Policy TOC is a <nav>). */
	[style*="position:sticky"] {
		position: static !important;
	}

	/* Fixed-position floating chrome (glass FABs, "live class now" card,
	   filter pills) — shrink and re-anchor so nothing overlaps or runs off
	   the edge of a narrow viewport. */
	.glass-fab {
		height: 48px;
		padding-inline: 16px;
		font-size: 15px;
	}

	.hero-live-badge {
		inset-inline-start: 0 !important;
		padding: 12px 14px !important;
	}

	/* The +12K / 98% / +25 stat row (front-page.php) is a plain flex row
	   with no wrap — on a narrow screen its content simply overflows past
	   the viewport edge and gets silently clipped by the sitewide
	   overflow-x:hidden (looked like the last stat getting cut off).
	   Switch it to an equal-width 3-column grid instead, same pattern as
	   the EST/SAT/ACT cards below it, so it always fits. */
	.hero-stats {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr);
		gap: 12px !important;
	}

	.hero-stats__divider {
		display: none;
	}
}

@media (max-width: 600px) {
	.card-grid {
		grid-template-columns: 1fr !important;
	}

	.footer-grid {
		grid-template-columns: 1fr !important;
	}

	.responsive-grid--compact {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.site-branding__tag {
		display: none;
	}

	h1 {
		font-size: 28px !important;
	}

	#sc-total {
		font-size: 44px !important;
	}
}

/*
 * Tutor LMS chrome — the Course Archive and Single Course pages are
 * 🔒 plugin-rendered (per the design brief): the loop/query/filter/
 * enrollment logic stays 100% Tutor's own. These rules only restyle
 * Tutor's real, documented classes to match the glass design tokens —
 * no DOM rebuild, no touching Tutor's own markup or behavior.
 */
.tutor-course-card {
	border-radius: var(--radius-card) !important;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
	border: none !important;
}

.tutor-course-name {
	color: var(--color-text) !important;
	font-weight: 600 !important;
}

.tutor-course-name a {
	color: inherit !important;
}

.tutor-btn.tutor-btn-primary,
.tutor-btn.tutor-open-login-modal.tutor-btn-primary {
	background: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	box-shadow: 0 6px 18px rgba(10, 132, 255, 0.28);
}

.tutor-btn.tutor-btn-primary:hover {
	background: var(--color-primary-hover) !important;
	border-color: var(--color-primary-hover) !important;
}

.tutor-btn.tutor-btn-outline-primary {
	color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
}

.tutor-btn {
	border-radius: 999px !important;
}

.tutor-ratings-stars i,
.tutor-icon-star-line {
	color: var(--color-warning) !important;
}

.tutor-avatar img {
	border-radius: 999px !important;
}

.tutor-widget {
	background: var(--color-surface);
	border-radius: var(--radius-card);
	padding: 22px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.tutor-widget-title {
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em;
	color: var(--color-text-secondary) !important;
	text-transform: uppercase;
}

.tutor-form-control,
.tutor-form-select {
	border-radius: 12px !important;
	border-color: var(--color-divider) !important;
}

.tutor-pagination-numbers a,
.tutor-pagination-numbers span {
	border-radius: 999px !important;
}

.tutor-pagination-numbers .tutor-btn.active {
	background: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
}

.course-archive-page .tutor-wrap {
	max-width: 1280px;
	margin-inline: auto;
}

/*
 * Single Course dark hero — makes Tutor's own lead-info block (real title,
 * rating, author, categories; see tutor/single-course.php) legible on the
 * dark gradient background, matching Course Single.dc.html. Only color/
 * spacing changes — the markup and data are 100% Tutor's own.
 */
.vitra-course-hero .tutor-course-details-header {
	margin-bottom: 0;
	padding-bottom: 56px;
}

.vitra-course-hero .tutor-course-details-title,
.vitra-course-hero .tutor-course-details-title span {
	color: #F5F5F7 !important;
	font-size: 40px !important;
}

.vitra-course-hero .tutor-course-details-info,
.vitra-course-hero .tutor-course-details-info a,
.vitra-course-hero .tutor-course-details-info span {
	color: rgba(245, 245, 247, 0.7) !important;
}

.vitra-course-hero .tutor-course-details-info a:hover {
	color: #F5F5F7 !important;
}

.vitra-course-hero .tutor-course-details-ratings,
.vitra-course-hero .tutor-course-details-ratings span {
	color: rgba(245, 245, 247, 0.85) !important;
}

.vitra-course-hero .tutor-course-wishlist-btn,
.vitra-course-hero .tutor-course-details-actions .tutor-btn {
	background: rgba(255, 255, 255, 0.12) !important;
	border-color: rgba(255, 255, 255, 0.25) !important;
	color: #F5F5F7 !important;
}

@media (max-width: 900px) {
	.vitra-course-hero .tutor-course-details-title,
	.vitra-course-hero .tutor-course-details-title span {
		font-size: 28px !important;
	}
}

/*
 * Single Course body — tabs, curriculum accordion and the sidebar
 * price/enroll card, restyled to the glass card language (radius, shadow,
 * pill tabs) using Tutor's real classes. Still 100% Tutor's own markup,
 * data and JS (accordion toggle, tab switching, enroll flow) — visuals only.
 */
.tutor-course-details-tab .tutor-is-sticky {
	position: sticky;
	top: 108px;
	z-index: 30;
}

.tutor-course-details-tab .tutor-nav {
	background: var(--color-surface);
	border-radius: 22px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	padding: 10px 14px;
	gap: 8px;
}

.tutor-nav-link {
	border-radius: 14px !important;
	font-weight: 600 !important;
	color: var(--color-text) !important;
}

.tutor-nav-link.is-active {
	background: var(--color-primary) !important;
	color: #fff !important;
}

.tutor-accordion {
	background: var(--color-surface);
	border-radius: var(--radius-card);
	padding: 8px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tutor-accordion-item {
	border-radius: 18px;
	overflow: hidden;
	background: #fafafa;
	border: none !important;
}

.tutor-accordion-item-header {
	font-weight: 600 !important;
	padding: 16px 18px !important;
}

.tutor-course-content-list-item {
	padding-block: 12px !important;
	border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.tutor-course-content-list-item-icon {
	color: var(--color-primary) !important;
}

.tutor-sidebar-card {
	border-radius: var(--radius-card) !important;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14) !important;
	border: none !important;
	overflow: hidden;
}

.tutor-single-course-sidebar {
	position: sticky;
	top: 108px;
}

.tutor-sidebar-card .tutor-btn-primary {
	border-radius: 999px !important;
	height: 52px;
	font-size: 16.5px !important;
}

.tutor-course-details-instructors,
.tutor-single-course-sidebar-more > div {
	background: var(--color-surface);
	border-radius: var(--radius-card);
	padding: 22px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	margin-top: 16px;
}

.tutor-single-course-sidebar-more > div:first-child {
	margin-top: 0;
}

/*
 * Tutor's own two-column course-details grid only switches from stacked
 * to side-by-side at its Bootstrap "xl" breakpoint (1200px) — the design
 * (Course Single.dc.html) treats desktop as starting at 1024px. Add the
 * same column split one step earlier so laptop-width visitors get the
 * intended sticky sidebar layout instead of a stacked view.
 */
@media (min-width: 1024px) {
	.tutor-course-details-page .tutor-col-xl-8 {
		flex: none !important;
		width: 66.6667% !important;
	}

	.tutor-course-details-page .tutor-col-xl-4 {
		flex: none !important;
		width: 33.3333% !important;
	}
}

/* Floating "Enroll Now" FAB on the single course page — hidden on mobile,
   where the real entry-box card already sits directly in the page flow. */
.vitra-course-fab {
	display: none;
}

@media (min-width: 900px) {
	.vitra-course-fab {
		display: flex;
	}
}

/*
 * Tutor LMS Student Dashboard + Lesson/Learning Area — real chrome the
 * design brief calls out as "a good fit" for glass (persistent sidebar/
 * header/nav, not scrollable content). Verified against the real Tutor
 * 4.x dashboard markup (`.tutor-dashboard-*`) and the React-based learning
 * area (`.tutor-learning-*`) via an authenticated fetch of the live site —
 * only their real, documented wrapper classes are targeted; none of their
 * internal Alpine/React state or layout classes are touched.
 */
.tutor-dashboard-header {
	background: rgba(255, 255, 255, 0.72) !important;
	backdrop-filter: blur(var(--glass-blur)) saturate(170%);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%);
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), 0 4px 24px rgba(0, 0, 0, 0.06);
}

.tutor-dashboard-sidebar {
	background: rgba(255, 255, 255, 0.65) !important;
	backdrop-filter: blur(var(--glass-blur)) saturate(170%);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%);
}

.tutor-dashboard-sidebar-nav li a {
	border-radius: 14px !important;
	font-weight: 500;
}

.tutor-dashboard-sidebar-nav li a.active {
	background: var(--color-primary) !important;
	color: #fff !important;
}

.tutor-dashboard-sidebar-nav li a.active svg {
	color: #fff !important;
}

.tutor-dashboard-home-card {
	border-radius: var(--radius-card) !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

.tutor-learning-header {
	background: rgba(255, 255, 255, 0.72) !important;
	backdrop-filter: blur(var(--glass-blur)) saturate(170%);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%);
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), 0 4px 24px rgba(0, 0, 0, 0.06);
}

.tutor-learning-area-footer {
	background: rgba(255, 255, 255, 0.85) !important;
	backdrop-filter: blur(20px) saturate(170%);
	-webkit-backdrop-filter: blur(20px) saturate(170%);
	border-radius: 999px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}

.tutor-finish-course-progress {
	border-radius: var(--radius-card) !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

@media (prefers-reduced-transparency: reduce) {
	.tutor-dashboard-header,
	.tutor-dashboard-sidebar,
	.tutor-learning-header,
	.tutor-learning-area-footer {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		background: #ffffff !important;
	}
}

/*
 * Contact Us — real Contact Form 7 markup (form ID 17264), restyled to the
 * design system's input/button language. Form fields, validation and
 * submit handling are 100% CF7's own; only appearance changes.
 */
.vitra-contact-form .wpcf7-form p {
	margin: 0 0 16px;
}

.vitra-contact-form .wpcf7-form-control {
	width: 100%;
	border: 1px solid var(--color-divider);
	border-radius: 14px;
	padding: 14px 16px;
	font-size: 16px;
	font-family: inherit;
	background: var(--color-bg-light);
	transition: border-color 0.15s ease;
}

.vitra-contact-form .wpcf7-form-control:focus {
	outline: none;
	border-color: var(--color-primary);
	background: var(--color-surface);
}

.vitra-contact-form textarea.wpcf7-form-control {
	min-height: 140px;
	resize: vertical;
}

.vitra-contact-form .wpcf7-submit {
	height: 50px;
	padding-inline: 28px;
	border-radius: 999px;
	background: var(--color-primary);
	color: #fff;
	border: none;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(10, 132, 255, 0.28);
}

.vitra-contact-form .wpcf7-submit:hover {
	background: var(--color-primary-hover);
}

.vitra-contact-form .wpcf7-spinner {
	margin-inline-start: 10px;
}

.vitra-contact-form .wpcf7-not-valid-tip {
	color: var(--color-error);
	font-size: 13.5px;
	margin-top: 4px;
}

.vitra-contact-form .wpcf7-response-output {
	border-radius: 12px !important;
	margin-top: 16px !important;
	font-size: 14.5px;
}

/*
 * Site-wide preloader (iOS Glass) — shown on every full page load, hidden
 * once window.load fires (see js/preloader.js). Progress is a perceived
 * animation eased toward ~90% while assets load, then snapped to 100% and
 * faded out on real load — the standard pattern (NProgress and similar),
 * not literal byte-tracked progress. A bounded, temporary full-screen
 * glass overlay is an explicit exception to "no glass behind scrollable
 * content" — nothing is scrollable yet when it's shown.
 */
@keyframes vitra-preloader-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes vitra-preloader-spring {
	from {
		opacity: 0;
		transform: scale(0.85) translateY(14px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes vitra-preloader-sweep {
	0% {
		transform: translateX(-160%) rotate(8deg);
	}
	55% {
		transform: translateX(220%) rotate(8deg);
	}
	100% {
		transform: translateX(220%) rotate(8deg);
	}
}

@keyframes vitra-preloader-drift1 {
	to {
		transform: translate(40px, -30px) scale(1.15);
	}
}

@keyframes vitra-preloader-drift2 {
	to {
		transform: translate(-50px, 20px) scale(1.1);
	}
}

@keyframes vitra-preloader-drift3 {
	to {
		transform: translate(30px, 40px) scale(1.08);
	}
}

.vitra-preloader {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: rgba(240, 241, 245, 0.35);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 1;
	transition: opacity 0.5s ease;
}

.vitra-preloader.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.vitra-preloader__blob {
	position: absolute;
	border-radius: 999px;
	filter: blur(10px);
}

.vitra-preloader__blob--1 {
	top: -60px;
	inset-inline-start: -40px;
	width: 340px;
	height: 340px;
	background: radial-gradient(circle, rgba(10, 132, 255, 0.38), transparent 70%);
	animation: vitra-preloader-drift1 9s ease-in-out infinite alternate;
}

.vitra-preloader__blob--2 {
	bottom: -80px;
	inset-inline-end: -60px;
	width: 380px;
	height: 380px;
	background: radial-gradient(circle, rgba(255, 159, 10, 0.34), transparent 70%);
	animation: vitra-preloader-drift2 11s ease-in-out infinite alternate;
}

.vitra-preloader__blob--3 {
	top: 30%;
	inset-inline-end: 8%;
	width: 260px;
	height: 260px;
	background: radial-gradient(circle, rgba(94, 92, 230, 0.32), transparent 70%);
	animation: vitra-preloader-drift3 13s ease-in-out infinite alternate;
}

.vitra-preloader__card {
	position: relative;
	width: 300px;
	padding: 40px 30px 34px;
	border-radius: 32px;
	background: rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(40px) saturate(180%);
	-webkit-backdrop-filter: blur(40px) saturate(180%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.85),
		inset 0 0 0 1px rgba(255, 255, 255, 0.55),
		0 30px 80px rgba(20, 30, 60, 0.2);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	animation: vitra-preloader-spring 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.vitra-preloader__sweep {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	width: 55%;
	height: 220%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.65), transparent);
	animation: vitra-preloader-sweep 3.4s ease-in-out infinite;
	pointer-events: none;
}

.vitra-preloader__ring {
	position: relative;
	width: 132px;
	height: 132px;
	display: grid;
	place-items: center;
}

.vitra-preloader__ring-dashed {
	position: absolute;
	width: 132px;
	height: 132px;
	border-radius: 999px;
	border: 1px dashed rgba(20, 30, 60, 0.14);
	animation: vitra-preloader-spin 16s linear infinite;
}

.vitra-preloader__ring-svg {
	position: absolute;
	transform: rotate(-90deg);
	filter: drop-shadow(0 4px 10px rgba(94, 92, 230, 0.35));
}

.vitra-preloader__ring-progress {
	stroke-dasharray: 314.159;
	stroke-dashoffset: 314.159;
	transition: stroke-dashoffset 0.15s linear;
}

.vitra-preloader__mark {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(10px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		inset 0 0 0 1px rgba(255, 255, 255, 0.6),
		0 6px 16px rgba(20, 30, 60, 0.12);
	display: grid;
	place-items: center;
}

.vitra-preloader__mark img {
	width: 44px;
	height: 44px;
	object-fit: contain;
	display: block;
}

.vitra-preloader__pct {
	font-size: 38px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #1d1d1f;
}

.vitra-preloader__title-wrap {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
}

.vitra-preloader__title {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #1d1d1f;
}

.vitra-preloader__tagline {
	font-size: 13.5px;
	color: #6e6e73;
	text-align: center;
	max-width: 220px;
}

.vitra-preloader__bar {
	width: 100%;
	height: 8px;
	border-radius: 999px;
	background: rgba(20, 30, 60, 0.08);
	overflow: hidden;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.vitra-preloader__bar-fill {
	width: 0%;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), #ff9f0a);
	box-shadow: 0 0 10px rgba(94, 92, 230, 0.5);
	transition: width 0.15s linear;
}

@media (prefers-reduced-motion: reduce) {
	.vitra-preloader__blob,
	.vitra-preloader__sweep,
	.vitra-preloader__ring-dashed,
	.vitra-preloader__card {
		animation: none !important;
	}
}

@media (prefers-reduced-transparency: reduce) {
	.vitra-preloader {
		background: #f0f1f5;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}

	.vitra-preloader__card {
		background: #ffffff;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}
}

@media (max-width: 480px) {
	.vitra-preloader__card {
		width: 260px;
		padding: 32px 24px 28px;
	}
}

/*
 * About Us page — matches "About Us.dc.html" (chosen over the "Glass
 * Concept" alternate). Distinct from the rest of the site's strict blue/
 * glass palette by design: rounded "Baloo 2" display font, hand-drawn
 * underline accents, warmer multi-color card system.
 */
.vitra-about__kicker {
	font-family: 'Baloo 2', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #8a94a6;
}

.vitra-about__h1 {
	font-family: 'Baloo 2', sans-serif;
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: #16213b;
}

.vitra-about__h3 {
	font-family: 'Baloo 2', sans-serif;
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #16213b;
}

.vitra-about__stat-num {
	font-family: 'Baloo 2', sans-serif;
	font-size: 40px;
	font-weight: 700;
}

@media (max-width: 900px) {
	.vitra-about__deco {
		display: none;
	}

	.vitra-about__hero-grid {
		padding-bottom: 56px !important;
	}

	.vitra-about__h1 {
		font-size: 30px;
	}

	.vitra-about__h3 {
		font-size: 27px;
	}

	.vitra-about__why-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.vitra-about__stats {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.vitra-about__stats > div:nth-child(odd) {
		border-inline-end: none !important;
	}

	.vitra-about__stat-num {
		font-size: 30px;
	}

	.vitra-about__testi-grid {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}

	.vitra-testi__track {
		display: flex !important;
		grid-template-columns: none !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding: 4px 24px 10px;
		margin-inline: -24px;
		scrollbar-width: none;
	}

	.vitra-testi__track::-webkit-scrollbar {
		display: none;
	}

	.vitra-testi__card {
		flex: 0 0 84%;
		scroll-snap-align: center;
	}

	.vitra-about__instructors {
		grid-template-columns: 1fr !important;
	}
}

/*
 * Score Calculator — matches "Score Calculator.dc.html". Dark glass hero,
 * reveal-after-calculate result card with a circular progress ring. The
 * weighting formula/bands are unchanged from the previous build (verified
 * identical against the design's own script) — only the presentation and
 * this CSS are new.
 */
@keyframes vitra-sc-pop {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.97);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.vitra-sc__h1 {
	font-family: 'Baloo 2', sans-serif;
	font-size: 38px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: #fff;
}

.vitra-sc__input {
	height: 56px;
	border-radius: 16px;
	border: none;
	background: rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
	padding-inline: 18px;
	font-size: 20px;
	font-weight: 600;
	color: #fff;
	-webkit-text-fill-color: #fff;
	color-scheme: dark;
	font-family: inherit;
	width: 100%;
	box-sizing: border-box;
	/* Without this, color-scheme:dark on a native number input makes
	   Chrome draw its own dark-mode control chrome (square corners) on
	   top, ignoring border-radius entirely. appearance:none hands full
	   rendering back to our CSS. */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.vitra-sc__input::placeholder {
	color: rgba(255, 255, 255, 0.4);
	font-weight: 400;
}

.vitra-sc__input[type='number']::-webkit-outer-spin-button,
.vitra-sc__input[type='number']::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.vitra-sc__input[type='number'] {
	-moz-appearance: textfield;
}

.sc-uni-opt {
	flex: 1;
	min-height: 52px;
	padding: 8px 10px;
	border-radius: 14px;
	border: none;
	display: grid;
	place-items: center;
	text-align: center;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
	cursor: pointer;
	font-family: inherit;
	box-sizing: border-box;
}

.sc-uni-opt.is-active {
	font-weight: 600;
	color: #fff;
	background: var(--color-primary);
	box-shadow: 0 6px 16px rgba(10, 132, 255, 0.32);
}

@media (max-width: 640px) {
	.vitra-sc__h1 {
		font-size: 30px;
	}

	.vitra-sc__promo-grid {
		grid-template-columns: 1fr !important;
	}
}

/*
 * Login / Registration — matches "Login (Dark Glass).dc.html". Real Tutor
 * form fields/handlers (see tutor/login.php, and page.php's the_content()
 * for the registration shortcode) are untouched; only the surrounding page
 * chrome and the form-field colors are restyled here.
 */
.vitra-auth-hero {
	min-height: 100vh;
	position: relative;
	overflow: hidden;
	background: #0b1220;
	display: flex;
	flex-direction: column;
}

.vitra-auth-hero__blob {
	position: absolute;
	border-radius: 999px;
	filter: blur(6px);
}

.vitra-auth-hero__blob--1 {
	top: -80px;
	inset-inline-start: -60px;
	width: 420px;
	height: 420px;
	background: radial-gradient(circle, rgba(10, 132, 255, 0.32), transparent 70%);
	animation: vitra-preloader-drift1 10s ease-in-out infinite alternate;
}

.vitra-auth-hero__blob--2 {
	bottom: -100px;
	inset-inline-end: -80px;
	width: 460px;
	height: 460px;
	background: radial-gradient(circle, rgba(94, 92, 230, 0.3), transparent 70%);
	animation: vitra-preloader-drift2 12s ease-in-out infinite alternate;
}

.vitra-auth-card {
	position: relative;
	width: 100%;
	max-width: 460px;
	margin-inline: auto;
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(30px) saturate(180%);
	-webkit-backdrop-filter: blur(30px) saturate(180%);
	border-radius: 28px;
	padding: 40px 38px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		inset 0 0 0 1px rgba(255, 255, 255, 0.08),
		0 30px 80px rgba(0, 0, 0, 0.5);
	box-sizing: border-box;
	/* Tutor's own login-form markup has plain text (e.g. "Don't have an
	   account?") with no class of its own, so it inherits Tutor's default
	   near-black color — invisible against this dark glass card. Everything
	   that needs a different color (inputs, labels, links, buttons) already
	   has its own !important rule below and wins over this; this only
	   catches the leftover unstyled text nodes. */
	color: rgba(255, 255, 255, 0.7);
}

.vitra-auth-card__title {
	font-family: 'Baloo 2', sans-serif;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #fff;
}

.vitra-auth-card .tutor-login-form-wrapper,
.vitra-auth-card #tutor-registration-wrap {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	max-width: none !important;
	margin: 0 !important;
}

.vitra-auth-card .tutor-form-control,
.vitra-auth-card .tutor-input {
	height: 50px;
	border-radius: 13px !important;
	border: none !important;
	background: rgba(255, 255, 255, 0.08) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff;
	color-scheme: dark;
}

.vitra-auth-card .tutor-form-control::placeholder {
	color: rgba(255, 255, 255, 0.35) !important;
}

.vitra-auth-card label,
.vitra-auth-card .tutor-label {
	color: rgba(255, 255, 255, 0.7) !important;
}

.vitra-auth-card .tutor-btn.tutor-btn-link-gray,
.vitra-auth-card a {
	color: #6fb4ff !important;
}

.vitra-auth-card .tutor-btn.tutor-btn-primary {
	height: 54px !important;
	border-radius: 14px !important;
	background: linear-gradient(120deg, var(--color-primary), var(--color-secondary)) !important;
	font-size: 16.5px !important;
	box-shadow: 0 14px 32px rgba(10, 132, 255, 0.4) !important;
}

.vitra-auth-card .tutor-login-error {
	color: #ff8078;
}

.vitra-auth-card h3,
.vitra-auth-card .tutor-h3 {
	display: none;
}

/* Registration: Country and Phone Number are real, optional (not
   `required`) fields Tutor's own registration form renders — hiding them
   here doesn't touch Tutor's logic, the form still submits fine without
   them. Both share one outer .tutor-form-group wrapper, so hiding that
   removes both together instead of leaving an empty gap between them. */
.vitra-auth-card .tutor-form-group:has(select[name="country"]) {
	display: none !important;
}

/*
 * Cart / Checkout — matches "Cart.dc.html" / "Checkout.dc.html". Real
 * WooCommerce Blocks (`[woocommerce_cart]` / `[woocommerce_checkout]`
 * block markup — see the real page content, post 24009/24010) render the
 * actual cart items, totals and payment methods; this only restyles
 * WooCommerce's own documented block classes to match the design tokens.
 */
.wc-block-cart,
.wc-block-checkout {
	max-width: 1180px;
	margin-inline: auto;
	padding: 140px 20px 96px;
}

.wc-block-cart .wc-block-components-panel,
.wc-block-cart-item,
.wc-block-components-order-summary,
.wc-block-checkout__form,
.wc-block-checkout__sidebar,
.wc-block-components-totals-wrapper {
	background: var(--color-surface) !important;
	border-radius: var(--radius-card) !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
	border: none !important;
}

.wc-block-cart-items {
	background: transparent !important;
	box-shadow: none !important;
}

.wc-block-cart-item {
	padding: 20px !important;
	margin-bottom: 14px;
}

.wc-block-components-sidebar-layout .wc-block-components-main,
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
	gap: 28px;
}

.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	border-radius: 999px !important;
	background: var(--color-primary) !important;
	font-weight: 600 !important;
	box-shadow: 0 12px 28px rgba(10, 132, 255, 0.32) !important;
}

.wc-block-components-button:hover {
	background: var(--color-primary-hover) !important;
}

.wc-block-components-text-input input,
.wc-block-components-textarea textarea,
.wc-block-components-radio-control input,
.wc-block-components-address-form input,
.wc-block-checkout__form input[type='text'],
.wc-block-checkout__form input[type='email'],
.wc-block-checkout__form input[type='tel'] {
	border-radius: 12px !important;
	border-color: var(--color-divider) !important;
}

.wc-block-components-radio-control__option {
	border-radius: 14px !important;
}

.wc-block-components-radio-control__option-checked {
	background: var(--color-bg-light) !important;
	box-shadow: inset 0 0 0 2px var(--color-primary) !important;
}

.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-weight: 700;
	color: var(--color-text);
}

.wc-empty-cart-block .wc-block-cart__empty-cart__image img {
	max-width: 140px;
	opacity: 0.6;
}

.wc-empty-cart-block .wp-block-button__link {
	border-radius: 999px !important;
	background: var(--color-primary) !important;
	padding: 14px 26px !important;
}

@media (max-width: 900px) {
	.wc-block-cart,
	.wc-block-checkout {
		padding-top: 118px;
	}
}

/*
 * Retrieve Password (/dashboard/retrieve-password/) — no separate mockup
 * exists for this page, so it's styled to match the Login (Dark Glass)
 * family it belongs to for consistency. This route does NOT go through
 * Tutor's sidebar dashboard shell — verified live via getBoundingClientRect
 * that .tutor-dashboard-body/-layout/-sidebar/-header/-main never exist on
 * this page at all (an earlier version of this rule targeted those classes
 * and was dead code). The real markup is simply
 * #page.site > .site-header-wrap + .tutor-card + .site-footer, no wrapper
 * in between — so on this short page the footer sat mid-viewport with a
 * raw gap below it, and .tutor-card had no centering of its own. Scoped
 * narrowly via :has() to the real, unique .tutor-forgot-password-form
 * class so nothing else on the site is affected. Real form fields/handler
 * are 100% Tutor's own.
 */
body:has(.tutor-forgot-password-form) {
	background: #0b1220 !important;
}

body:has(.tutor-forgot-password-form) #page.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	/* .site-header-wrap is position:fixed, so it's out of flow and doesn't
	   reserve space here — the margin:auto centering on .tutor-card below
	   only has room to push the card down when there's real free space
	   left over after the footer. On mobile the footer stacks to full
	   height and can eat the whole 100vh budget, leaving zero free space
	   to distribute — so the card sits flush at the very top, behind the
	   fixed header. This guarantees clearance regardless of how that math
	   resolves. */
	padding-top: 110px;
}

.tutor-card:has(.tutor-forgot-password-form) {
	width: 100%;
	max-width: 460px !important;
	margin: auto !important;
	background: rgba(255, 255, 255, 0.06) !important;
	backdrop-filter: blur(30px) saturate(180%);
	-webkit-backdrop-filter: blur(30px) saturate(180%);
	border-radius: 28px !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		inset 0 0 0 1px rgba(255, 255, 255, 0.08),
		0 30px 80px rgba(0, 0, 0, 0.5) !important;
}

.tutor-forgot-password-form .tutor-form-control,
.tutor-forgot-password-form .tutor-input {
	height: 50px;
	border-radius: 13px !important;
	border: none !important;
	background: rgba(255, 255, 255, 0.08) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff;
	color-scheme: dark;
}

.tutor-forgot-password-form label,
.tutor-forgot-password-form p {
	color: rgba(255, 255, 255, 0.7) !important;
}

.tutor-forgot-password-form .tutor-btn.tutor-btn-primary {
	height: 54px !important;
	border-radius: 14px !important;
	background: linear-gradient(120deg, var(--color-primary), var(--color-secondary)) !important;
	box-shadow: 0 14px 32px rgba(10, 132, 255, 0.4) !important;
}

/*
 * Privacy Policy / legal pages — real policy text, no design mockup exists
 * for this page type. Standard readable-article typography matching the
 * rest of the design system's tokens, plus a sticky table of contents.
 */
.vitra-legal__toc a {
	text-decoration: none;
	border-radius: 10px;
	padding-inline: 10px;
	transition: background 0.15s ease, color 0.15s ease;
}

.vitra-legal__toc a:hover {
	background: var(--color-bg-light);
	color: var(--color-text) !important;
}

.vitra-legal__section h2 {
	letter-spacing: -0.01em;
	scroll-margin-top: 108px;
}

.vitra-legal__body {
	font-size: 16px;
	line-height: 1.75;
	color: var(--color-text-secondary);
}

.vitra-legal__body h3 {
	font-size: 17px;
	font-weight: 600;
	color: var(--color-text);
	margin-top: 18px;
	margin-bottom: 8px;
}

.vitra-legal__body ul {
	margin: 0 0 12px;
	padding-inline-start: 22px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vitra-legal__body p {
	margin: 0 0 12px;
}

.vitra-legal__body p:last-child {
	margin-bottom: 0;
}

@media (max-width: 900px) {
	.vitra-legal__toc {
		display: none;
	}
}