/**
 * Media Store — Glassmorphism design system (Phase 4.7).
 *
 * One source of truth: design tokens (:root) + glass styling applied to the
 * EXISTING shared component classes across the app (cards, buttons, inputs,
 * modal, reader/player bars, library, recommendations, wishlist, offline).
 * Dark-mode first; respects prefers-reduced-motion; additive (no markup changes).
 */

:root {
	/* Backgrounds & glass */
	--ms-bg:            #0c0c12;
	--ms-bg-2:          #12121b;
	--ms-glass:         rgba(255, 255, 255, 0.06);
	--ms-glass-strong:  rgba(255, 255, 255, 0.10);
	--ms-glass-border:  rgba(255, 255, 255, 0.12);
	--ms-glass-hi:      rgba(255, 255, 255, 0.18);
	/* Accent — teal / cyan glass brand */
	--ms-accent:        #43b2cd;
	--ms-accent-2:      #005b80;
	--ms-accent-grad:   linear-gradient(135deg, #43b2cd, #2a8aa6);
	--ms-accent-soft:   rgba(67, 178, 205, 0.28);
	/* Text */
	--ms-text:          #f3f4f8;
	--ms-text-dim:      rgba(243, 244, 248, 0.62);
	/* Geometry */
	--ms-radius:        16px;
	--ms-radius-sm:     10px;
	--ms-radius-lg:     24px;
	--ms-space:         16px;
	/* Effects */
	--ms-blur:          18px;
	--ms-shadow:        0 8px 32px rgba(0, 0, 0, 0.38);
	--ms-shadow-hi:     0 18px 50px rgba(0, 0, 0, 0.5);
	--ms-glow:          0 0 0 1px rgba(67, 178, 205, 0.45), 0 10px 40px rgba(67, 178, 205, 0.28);
	--ms-ease:          cubic-bezier(0.22, 1, 0.36, 1);
	--ms-dur:           260ms;
	/* Keep the carousel accent var in sync for older components. */
	--mst-accent:       var(--ms-accent);

	/* ── Master switch: re-skin the THEME's surface tokens to teal glass. ──────
	   Every theme element that paints --mst-bg-* becomes translucent glass at once
	   (sidebar, panels, cards, dropdowns, hovers…) without naming each selector. */
	--mst-bg-base:      transparent;
	--mst-bg-raised:    rgba(255, 255, 255, 0.05);
	--mst-bg-elevated:  rgba(18, 38, 46, 0.55);
	--mst-bg-hover:     rgba(67, 178, 205, 0.18);
	--mst-bg-active:    rgba(67, 178, 205, 0.26);
	--mst-border:       rgba(67, 178, 205, 0.20);
	--mst-border-color: rgba(67, 178, 205, 0.20);
}

/* ==========================================================================
   FULL-SITE GLASS — dark teal stage + floating translucent panels everywhere
   ========================================================================== */
html { background: #07141a; }
body {
	background:
		radial-gradient(1200px 620px at 10% -6%,  rgba(67, 178, 205, 0.18), transparent 60%),
		radial-gradient(1000px 760px at 102% 2%,  rgba(0, 91, 128, 0.22),  transparent 55%),
		radial-gradient(960px 960px at 50% 118%,  rgba(67, 178, 205, 0.12), transparent 60%),
		linear-gradient(180deg, #07141a 0%, #0a1218 100%) !important;
	background-attachment: scroll;
	color: var(--ms-text);
}
/* Light, readable text inside the app shell. */
.mst-shell, .mst-main-panel, .mst-content, .mst-homepage, .mst-account, .mst-section,
.mst-card, .mst-footer-widget, .mst-hero, .mst-empty { color: var(--ms-text); }
.mst-shell h1, .mst-shell h2, .mst-shell h3, .mst-shell h4 { color: #fff; }
.mst-shell a:not(.button):not([class*="btn"]):not([class*="__cov"]) { color: #bfe8f3; }
.mst-shell, .mst-main-panel, .mst-content, .mst-homepage, .mst-home-rails,
.mst-section, .mst-container, .mst-grid, .mst-row { background: transparent !important; }

/* Glass panels — float the structural surfaces on the stage. */
.mst-sidebar,
.mst-footer-widget,
.mst-card,
.mst-search,
.mst-account__panel, .mst-account .mst-card,
.mst-main-panel.is-glass {
	background: var(--ms-glass) !important;
	border: 1px solid var(--ms-glass-border);
	border-radius: var(--ms-radius);
	-webkit-backdrop-filter: blur(var(--ms-blur)) saturate(150%);
	backdrop-filter: blur(var(--ms-blur)) saturate(150%);
	box-shadow: var(--ms-shadow);
}
.mst-sidebar { border-radius: 0 var(--ms-radius-lg) var(--ms-radius-lg) 0; }
.mst-card { transition: transform var(--ms-dur) var(--ms-ease), box-shadow var(--ms-dur) var(--ms-ease), border-color var(--ms-dur) var(--ms-ease); }
.mst-card:hover { transform: translateY(-4px); border-color: var(--ms-accent-soft); box-shadow: var(--ms-glow); }

/* Sidebar nav items. */
.mst-sidebar a, .mst-sidebar button { border-radius: var(--ms-radius-sm); transition: background var(--ms-dur) var(--ms-ease); }
.mst-sidebar a:hover, .mst-sidebar a.is-active, .mst-sidebar .is-active {
	background: var(--ms-accent-soft) !important;
	color: #fff !important;
}

/* Dropdowns / menus / popovers. */
.mst-dropdown, .mst-menu, .mst-popover, [class*="dropdown__panel"] {
	background: var(--ms-glass-strong) !important;
	border: 1px solid var(--ms-glass-border);
	border-radius: var(--ms-radius);
	-webkit-backdrop-filter: blur(calc(var(--ms-blur) + 6px));
	backdrop-filter: blur(calc(var(--ms-blur) + 6px));
	box-shadow: var(--ms-shadow-hi);
}

/* Primary buttons → teal gradient. */
.mst-shell .button, .mst-shell [class*="btn"]:not([class*="ghost"]):not([class*="header-btn"]),
.mst-buy, .mst-cta {
	background: var(--ms-accent-grad);
	border: 0; color: #fff; border-radius: 999px;
	transition: filter var(--ms-dur) var(--ms-ease), transform var(--ms-dur) var(--ms-ease);
}
.mst-shell .button:hover, .mst-buy:hover, .mst-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* Mobile sidebar drawer + scrim. */
.mst-sidebar-overlay { background: rgba(5, 12, 16, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* The persistent player / mini bar, if present. */
.mst-player, #mst-player, .mst-player-bar {
	background: var(--ms-glass-strong) !important;
	border-top: 1px solid var(--ms-glass-border);
	-webkit-backdrop-filter: blur(calc(var(--ms-blur) + 6px)) saturate(160%);
	backdrop-filter: blur(calc(var(--ms-blur) + 6px)) saturate(160%);
}

/* Frost EVERY surface — broad selectors so nothing is missed. The theme tokens
   above made these translucent; this adds the blur so they read as glass. */
.mst-sidebar, .mst-main-panel, .mst-card, .mst-account, .mst-search,
.mst-footer-widget, .mst-panel, .mst-drawer, .mst-cart, .mst-notif,
.mst-modal, .mst-modal__panel, .mst-dropdown, .mst-menu, .mst-popover, .mst-tooltip,
[class*="-panel"], [class*="-card"]:not(.ms-hero__panel):not(.ms-rec-card):not(.ms-cr-card):not(.ms-lib-card),
[class*="-dropdown"], [class*="-menu"]:not(.mst-sidebar-menu-item), [class*="-modal"], [class*="__panel"],
[class*="-popover"], [class*="-drawer"], aside.widget, .widget {
	border-color: var(--ms-glass-border);
}
/* Auth / Spotify-style popup + WooCommerce surfaces. */
.ms-auth-modal, .ms-auth-modal__panel, .woocommerce-account .woocommerce,
.woocommerce form.checkout, .woocommerce .cart_totals, .wc-block-components-panel {
	background: var(--ms-glass) !important;
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	backdrop-filter: blur(16px) saturate(160%);
	border: 1px solid var(--ms-glass-border);
	border-radius: var(--ms-radius);
	color: var(--ms-text);
}

/* ── Controls polish — undo the over-glassed search & header icons ────────── */
/* Search: the form/input must NOT be glass boxes; only the inner bar is a pill. */
.mst-search,
.mst-search .mst-search__input {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}
.mst-search .mst-search__bar {
	background: rgba(255, 255, 255, 0.09) !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}
.mst-search .mst-search__bar:focus-within {
	border-color: var(--ms-accent) !important;
	box-shadow: 0 0 0 3px var(--ms-accent-soft) !important;
}
.mst-search .mst-search__input { color: var(--ms-text) !important; }

/* Header icon buttons: clean subtle circles, no heavy border/blur. */
.mst-header-btn,
.mst-topbar__menu-btn {
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	transition: background var(--ms-dur) var(--ms-ease), border-color var(--ms-dur) var(--ms-ease);
}
.mst-header-btn:hover,
.mst-topbar__menu-btn:hover {
	background: var(--ms-accent-soft) !important;
	border-color: var(--ms-accent) !important;
}
.mst-header-btn__badge { border: 0 !important; }

/* Always show the header sidebar-toggle (desktop too) so the sidebar can always
   be expanded as well as collapsed — the theme JS already toggles it on click. */
.mst-topbar__menu-btn { display: inline-flex !important; }
/* Keep the in-sidebar collapse chevron clearly visible/clickable when collapsed. */
.mst-shell--collapsed .mst-sidebar__collapse-btn { display: inline-flex !important; opacity: 1 !important; }

/* Profile / avatar — NO background, NO border, just the round image. Everywhere. */
.mst-account, .mst-account__btn, .mst-header-avatar-btn,
[class*="avatar-btn"], [class*="__avatar"] {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}
.mst-account__avatar, .mst-topbar__avatar-img,
img[class*="avatar"], [class*="avatar"] > img {
	border-radius: 50% !important;
	border: 0 !important;
	display: block;
	object-fit: cover;
}
.mst-account__btn:hover, .mst-header-avatar-btn:hover { background: transparent !important; }

/* Sign in / profile pill: teal gradient, no border. */
.mst-header-signin {
	background: var(--ms-accent-grad) !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: #fff !important;
	box-shadow: none !important;
}

/* Player controls / sidebar avatar: clean, no stray border or blur. */
.mst-player-btn, .mst-player [class*="btn"], .mst-sidebar__avatar, .mst-sidebar-account {
	border: 0 !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

/* Hero arrows/dots: smaller and subtler so they don't dominate. */
.ms-hero__nav { width: 40px; height: 40px; font-size: 1.25rem; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.18); }
.ms-hero__dots { bottom: 14px; }

/* ── Carousel row header (title + "See all") + pro card polish ───────────── */
.ms-rail__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin: 6px 2px 14px;
}
.ms-rail__title { margin: 0; font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 800; letter-spacing: -0.015em; color: #fff; }
.ms-rail__subtitle { margin: 3px 0 0; font-size: 0.85rem; color: var(--ms-text-dim); }
.ms-rail__more {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 0.85rem; font-weight: 600; white-space: nowrap; text-decoration: none;
	color: var(--ms-accent); padding: 5px 10px; border-radius: 999px;
	transition: color var(--ms-dur) var(--ms-ease), gap var(--ms-dur) var(--ms-ease), background var(--ms-dur) var(--ms-ease);
}
.ms-rail__more:hover { color: #fff; gap: 8px; background: var(--ms-accent-soft); }
.ms-rail__more svg { transition: transform var(--ms-dur) var(--ms-ease); }
.ms-rail__more:hover svg { transform: translateX(2px); }

/* Card image: rounded TOP, flat bottom (text body sits flush below). Posters keep full radius. */
.ms-el-card__cover:not(.ms-el-card__cover--portrait) {
	border-radius: var(--ms-radius-sm) var(--ms-radius-sm) 0 0 !important;
	overflow: hidden;
}
.ms-el-card__cover:not(.ms-el-card__cover--portrait) img { border-radius: 0 !important; }
.ms-el-card__body { border-radius: 0 0 var(--ms-radius-sm) var(--ms-radius-sm); }

/* ── Continue / Resume card (Elementor widget) ───────────────────────────── */
.ms-continue {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 18px 22px;
	border-radius: var(--ms-radius-lg);
	margin: 6px 0;
}
.ms-continue__cover {
	flex: 0 0 auto;
	width: 84px; height: 84px;
	border-radius: 14px;
	overflow: hidden;
	background: linear-gradient(135deg, #23233a, #15151f);
	display: block;
}
.ms-continue__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-continue__ph { display: block; width: 100%; height: 100%; }
.ms-continue__info { flex: 1 1 auto; min-width: 0; }
.ms-continue__kind { font-size: 0.7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ms-accent); }
.ms-continue__title { margin: 4px 0 2px; font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.ms-continue__title a { color: #fff; text-decoration: none; }
.ms-continue__creator { font-size: 0.85rem; color: var(--ms-text-dim); text-transform: uppercase; letter-spacing: .04em; }
.ms-continue__bar { margin: 12px 0 4px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.14); overflow: hidden; }
.ms-continue__bar span { display: block; height: 100%; background: var(--ms-accent-grad); }
.ms-continue__pct { font-size: 0.76rem; color: var(--ms-text-dim); }
.ms-continue__resume {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 24px; border-radius: 999px;
	background: var(--ms-accent-grad); color: #fff;
	font-weight: 700; text-decoration: none;
	transition: filter var(--ms-dur) var(--ms-ease), transform var(--ms-dur) var(--ms-ease);
}
.ms-continue__resume:hover { filter: brightness(1.1); transform: translateY(-1px); color: #fff; }
@media (max-width: 640px) {
	.ms-continue { flex-wrap: wrap; gap: 14px; }
	.ms-continue__resume { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.mst-card { transition: none; } .mst-card:hover { transform: none; }
}

/* Sticky glass header — teal/cyan radial + gradient ------------------------ */
.mst-topbar,
.site-header,
header[role="banner"].mst-topbar {
	position: sticky;
	top: 0;
	z-index: 50;
	background:
		radial-gradient(640px 200px at 6% 50%, rgba(0, 91, 128, 0.32) 0%, rgba(67, 178, 205, 0.62) 25%, rgba(67, 178, 205, 0.28) 58%, transparent 80%),
		linear-gradient(180deg, rgba(67, 178, 205, 0.36), rgba(67, 178, 205, 0.22));
	-webkit-backdrop-filter: blur(24px) saturate(190%);
	backdrop-filter: blur(24px) saturate(190%);
	border-bottom: 1px solid rgba(67, 178, 205, 0.38);
	box-shadow:
		inset 0 1px rgba(255, 255, 255, 0.6),
		inset 0 -1px rgba(255, 255, 255, 0.2),
		0 10px 28px -14px rgba(0, 91, 128, 0.22);
}

/* Reusable utilities ------------------------------------------------------- */
.ms-glass {
	background: var(--ms-glass);
	border: 1px solid var(--ms-glass-border);
	border-radius: var(--ms-radius);
	-webkit-backdrop-filter: blur(var(--ms-blur));
	backdrop-filter: blur(var(--ms-blur));
	box-shadow: var(--ms-shadow);
}
.ms-glass-hover { transition: transform var(--ms-dur) var(--ms-ease), box-shadow var(--ms-dur) var(--ms-ease), border-color var(--ms-dur) var(--ms-ease); }
.ms-glass-hover:hover { transform: translateY(-4px); box-shadow: var(--ms-shadow-hi); border-color: var(--ms-glass-hi); }

/* Cards — unify every card family onto the glass language ------------------ */
.ms-cr-card__cov, .ms-rec-card__cov, .ms-lib-card__cov, .ms-wl-cov,
.ms-cr-card, .ms-rec-card, .ms-lib-card, .ms-wl-card, .ms-off-card, .ms-ab-card {
	transition: transform var(--ms-dur) var(--ms-ease), box-shadow var(--ms-dur) var(--ms-ease);
}
.ms-cr-card:hover, .ms-rec-card:hover, .ms-lib-card:hover, .ms-wl-card:hover, .ms-ab-card:hover {
	transform: translateY(-5px) scale(1.012);
}
.ms-cr-card__cov:hover, .ms-rec-card__cov:hover, .ms-lib-card__cov:hover, .ms-wl-cov:hover {
	box-shadow: var(--ms-glow);
}
.ms-lib-tab.is-active, .ms-dl-chip.is-active {
	background: var(--ms-accent-grad) !important;
	border-color: transparent !important;
}

/* Buttons ------------------------------------------------------------------ */
.ms-rv-buy, .ms-wl-buy, .ms-pv-buy, .ms-reader-done, .ms-cr-card__r, .ms-rec-card__r {
	background: var(--ms-accent-grad);
	border: 0;
	border-radius: 999px;
	color: #fff;
	transition: filter var(--ms-dur) var(--ms-ease), transform var(--ms-dur) var(--ms-ease);
}
.ms-rv-buy:hover, .ms-wl-buy:hover, .ms-pv-buy:hover, .ms-reader-done:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* Inputs & selects --------------------------------------------------------- */
.ms-lib-toolbar input, .ms-rv-form input, .ms-rv-form textarea, .ms-reader-bar input,
.ms-lib-toolbar select, .ms-reader-bar select {
	background: var(--ms-glass);
	border: 1px solid var(--ms-glass-border);
	color: var(--ms-text);
	border-radius: var(--ms-radius-sm);
}
.ms-lib-toolbar input:focus, .ms-rv-form input:focus, .ms-rv-form textarea:focus {
	outline: none;
	border-color: var(--ms-accent);
	box-shadow: 0 0 0 3px rgba(108, 123, 255, 0.25);
}

/* Reader / player bars ----------------------------------------------------- */
.ms-reader-bar, .ms-ab-ctrls, .ms-reader-panel {
	background: var(--ms-bg-2);
	-webkit-backdrop-filter: blur(var(--ms-blur));
	backdrop-filter: blur(var(--ms-blur));
}
.ms-reader-bar { border-bottom: 1px solid var(--ms-glass-border); }
.ms-ab-ctrls button, .ms-reader-bar button {
	background: var(--ms-glass);
	border: 1px solid var(--ms-glass-border);
	border-radius: 10px;
	transition: background var(--ms-dur) var(--ms-ease);
}
.ms-ab-ctrls button:hover, .ms-reader-bar button:hover { background: var(--ms-glass-strong); }

/* Modal / popup (auth, etc.) ----------------------------------------------- */
.ms-auth-modal__panel, .ms-modal__panel, [data-ms-modal] .modal-panel, .ms-reader-panel {
	background: var(--ms-glass-strong) !important;
	border: 1px solid var(--ms-glass-border);
	border-radius: var(--ms-radius-lg);
	-webkit-backdrop-filter: blur(calc(var(--ms-blur) + 8px));
	backdrop-filter: blur(calc(var(--ms-blur) + 8px));
	box-shadow: var(--ms-shadow-hi);
}

/* Section headings --------------------------------------------------------- */
.ms-rec-rail__h, .ms-lib-sec h2, .ms-cw-section__heading, .ms-rv-h, .ms-dl-h {
	letter-spacing: -0.01em;
}

/* Skeleton loading --------------------------------------------------------- */
.ms-skeleton {
	background: linear-gradient(100deg, var(--ms-glass) 30%, var(--ms-glass-strong) 50%, var(--ms-glass) 70%);
	background-size: 200% 100%;
	animation: ms-shimmer 1.4s var(--ms-ease) infinite;
	border-radius: var(--ms-radius-sm);
}
@keyframes ms-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Motion & accessibility --------------------------------------------------- */
.ms-glass-hover:focus-visible, .ms-cr-card a:focus-visible, .ms-rec-card a:focus-visible, .ms-lib-card a:focus-visible {
	outline: 2px solid var(--ms-accent);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.ms-glass-hover, .ms-cr-card, .ms-rec-card, .ms-lib-card, .ms-wl-card, .ms-ab-card,
	.ms-rv-buy, .ms-wl-buy, .ms-pv-buy { transition: none !important; }
	.ms-cr-card:hover, .ms-rec-card:hover, .ms-lib-card:hover, .ms-wl-card:hover { transform: none; }
	.ms-skeleton { animation: none; }
}