@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0,1&family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/*
  themv.shop — Unified Design System v4
  Upgraded visual layer matching the premium homepage direction.
  Applied via !important to coexist with page-specific layouts.
*/

:root {
  --mv-bg:            #080706;
  --mv-surface:       #0F0D0C;
  --mv-surface-alt:   #141210;
  --mv-surface-raise: #1A1714;
  --mv-border:        rgba(255, 244, 230, 0.07);
  --mv-border-mid:    rgba(255, 244, 230, 0.12);
  --mv-border-strong: rgba(255, 244, 230, 0.20);
  --mv-text:          #F6F1E8;
  --mv-muted:         #A89880;
  --mv-faint:         #665A4E;
  --mv-accent:        #FF8C00;
  --mv-accent-dim:    #C86B00;
  --mv-rose:          #FF5C8A;
  --mv-blue:          #58C7FF;
  --mv-mint:          #55E0B7;
  --mv-violet:        #A982FF;
  --mv-ink:           #0B0A09;
  --mv-shadow-sm:  0 2px 8px  rgba(0,0,0,0.4);
  --mv-shadow-md:  0 8px 28px rgba(0,0,0,0.5);
  --mv-shadow-lg:  0 20px 60px rgba(0,0,0,0.6);
  --mv-shadow-xl:  0 40px 100px rgba(0,0,0,0.65);
  --mv-g-accent: linear-gradient(135deg, #FF8C00, #FF5C8A);
  --mv-g-card:   linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  --mv-font-display: 'Instrument Serif', Georgia, serif;
  --mv-font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mv-font-tech:    'Space Grotesk', sans-serif;
  --mv-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] {
  --mv-bg:            #F4F1E8;
  --mv-surface:       #FDFBF6;
  --mv-surface-alt:   #F0EDE4;
  --mv-surface-raise: #FFFFFF;
  --mv-border:        rgba(30, 22, 14, 0.08);
  --mv-border-mid:    rgba(30, 22, 14, 0.13);
  --mv-border-strong: rgba(30, 22, 14, 0.20);
  --mv-text:          #1A1410;
  --mv-muted:         #6A5C4E;
  --mv-faint:         #9C8F82;
  --mv-shadow-sm: 0 2px 8px  rgba(30,22,14,0.05);
  --mv-shadow-md: 0 8px 28px rgba(30,22,14,0.08);
  --mv-shadow-lg: 0 20px 60px rgba(30,22,14,0.10);
  --mv-shadow-xl: 0 40px 100px rgba(30,22,14,0.12);
}

html {
  color-scheme: dark;
}

[data-theme="light"] {
  color-scheme: light;
}

body {
  background:
    /* Noise grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
    /* Ambient colour pools */
    radial-gradient(ellipse 60% 50% at 8%  18%, rgba(255, 92,138,0.07)  0%, transparent 100%),
    radial-gradient(ellipse 55% 45% at 90% 12%, rgba( 88,199,255,0.06)  0%, transparent 100%),
    radial-gradient(ellipse 70% 55% at 50% 80%, rgba(255,140,  0,0.04)  0%, transparent 100%),
    radial-gradient(ellipse 40% 35% at 78% 58%, rgba(169,130,255,0.04)  0%, transparent 100%),
    var(--mv-bg) !important;
  background-size: 300px 300px, auto, auto, auto, auto, auto !important;
  color: var(--mv-text) !important;
  font-family: var(--mv-font-body) !important;
  transition: background-color 0.4s var(--mv-ease), color 0.4s var(--mv-ease);
}

[data-theme="light"] body {
  background-image:
    radial-gradient(ellipse 60% 50% at 8%  18%, rgba(201,32,96,0.035) 0%, transparent 100%),
    radial-gradient(ellipse 55% 45% at 90% 12%, rgba(26,126,191,0.03)  0%, transparent 100%),
    radial-gradient(ellipse 70% 55% at 50% 80%, rgba(255,140,0,0.025) 0%, transparent 100%) !important;
}

body > * {
  position: relative;
}

/* ─── Scrollbar ─────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--mv-bg); }
::-webkit-scrollbar-thumb { background: var(--mv-border-mid); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--mv-accent); }

/* ─── Nav / Top Bars ─────────────────────────────── */
nav,
.top-bar,
.topbar,
.toolbar,
.preview-bar,
.mobile-header {
  background: rgba(8,7,6,0.72) !important;
  border: 1px solid rgba(255,244,230,0.09) !important;
  backdrop-filter: blur(24px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
  box-shadow: var(--mv-shadow-md), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  transition: background 0.4s var(--mv-ease), box-shadow 0.4s var(--mv-ease);
}

[data-theme="light"] nav,
[data-theme="light"] .top-bar,
[data-theme="light"] .topbar,
[data-theme="light"] .toolbar,
[data-theme="light"] .preview-bar,
[data-theme="light"] .mobile-header {
  background: rgba(244,241,232,0.80) !important;
  border-color: rgba(30,22,14,0.10) !important;
}

nav {
  border-radius: 18px !important;
}

nav:not(.builder-nav):not(.admin-nav) {
  top: 18px !important;
  left: 24px !important;
  right: 24px !important;
}

/* Scrolled nav state via JS */
nav.scrolled {
  background: rgba(8,7,6,0.88) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  border-color: rgba(255,244,230,0.12) !important;
}

[data-theme="light"] nav.scrolled {
  background: rgba(244,241,232,0.92) !important;
  box-shadow: 0 8px 32px rgba(30,22,14,0.10), inset 0 1px 0 rgba(255,255,255,0.8) !important;
  border-color: rgba(30,22,14,0.13) !important;
}

/* ─── Nav Links / Filter Groups ──────────────────── */
.nav-links,
.nav-menu,
.filter-group,
.segmented,
.device-toggle,
.view-toggle {
  background: rgba(255,255,255,0.045) !important;
  border: 1px solid rgba(255,244,230,0.08) !important;
  border-radius: 999px !important;
  padding: 5px !important;
}

[data-theme="light"] .nav-links,
[data-theme="light"] .nav-menu,
[data-theme="light"] .filter-group,
[data-theme="light"] .segmented,
[data-theme="light"] .device-toggle,
[data-theme="light"] .view-toggle {
  background: rgba(30,22,14,0.04) !important;
  border-color: rgba(30,22,14,0.08) !important;
}

.nav-links a,
.nav-menu a,
.filter-pill,
.tab,
.tab-btn,
.device-btn,
.view-btn {
  border-radius: 999px !important;
  color: var(--mv-muted) !important;
}

.nav-links a:hover,
.nav-menu a:hover,
.filter-pill:hover,
.filter-pill.active,
.tab.active,
.tab-btn.active,
.device-btn.active,
.view-btn.active {
  background: rgba(255,255,255,0.10) !important;
  color: var(--mv-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16) !important;
}

/* Nav link active underline */
.nav-links a.active {
  color: var(--mv-text) !important;
}
.nav-links a.active::after {
  width: 100% !important;
}

/* ─── Buttons ────────────────────────────────────── */
.btn,
.nav-btn,
button,
input[type="button"],
input[type="submit"],
.overlay-btn {
  border-radius: 999px !important;
  transition: transform 0.2s var(--mv-ease), background 0.2s, border-color 0.2s, box-shadow 0.2s !important;
}

.btn-primary,
.btn-accent,
.nav-btn-primary,
.overlay-primary,
button[type="submit"],
.primary-btn {
  background: linear-gradient(135deg, var(--mv-accent), var(--mv-rose)) !important;
  border-color: transparent !important;
  color: #08060A !important;
  font-weight: 600 !important;
  box-shadow: 0 6px 24px rgba(255,140,0,0.24), 0 1px 0 rgba(255,255,255,0.15) inset !important;
}

[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-accent,
[data-theme="light"] .nav-btn-primary,
[data-theme="light"] .overlay-primary,
[data-theme="light"] button[type="submit"],
[data-theme="light"] .primary-btn {
  color: #08060A !important;
}

.btn-primary:hover,
.btn-accent:hover,
.nav-btn-primary:hover,
.overlay-primary:hover,
button[type="submit"]:hover,
.primary-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 36px rgba(255,140,0,0.32), 0 1px 0 rgba(255,255,255,0.15) inset !important;
}

.btn-outline,
.btn-ghost,
.nav-btn,
.theme-toggle,
.secondary-btn,
.ghost-btn {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid var(--mv-border-strong) !important;
  color: var(--mv-muted) !important;
  backdrop-filter: blur(8px);
}

[data-theme="light"] .btn-outline,
[data-theme="light"] .btn-ghost,
[data-theme="light"] .nav-btn,
[data-theme="light"] .theme-toggle,
[data-theme="light"] .secondary-btn,
[data-theme="light"] .ghost-btn {
  background: rgba(30,22,14,0.025) !important;
}

.btn-outline:hover,
.btn-ghost:hover,
.nav-btn:hover,
.theme-toggle:hover,
.secondary-btn:hover,
.ghost-btn:hover {
  border-color: var(--mv-accent) !important;
  color: var(--mv-text) !important;
  background: rgba(255,140,0,0.06) !important;
  transform: translateY(-1px) !important;
}

/* ─── Theme Toggle ───────────────────────────────── */
.theme-toggle {
  width: 32px; height: 32px;
  border-radius: 50% !important;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.theme-toggle:hover {
  transform: rotate(15deg) !important;
}

/* ─── Cards / Panels ─────────────────────────────── */
.card,
.theme-card,
.section-card,
.panel,
.modal-box,
.drawer,
.auth-card,
.login-card,
.signup-card,
.subscription-card,
.payout-card,
.analytics-card,
.step,
.feature-card,
.empty-state,
.site-card,
.template-card,
.admin-card,
.designer-card,
.stat-card,
.active-card,
.theme-detail-card,
.sidebar,
.control-panel {
  background: var(--mv-g-card), var(--mv-surface) !important;
  border: 1px solid var(--mv-border) !important;
  box-shadow: var(--mv-shadow-sm), 0 1px 0 rgba(255,255,255,0.06) inset !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
}

.card,
.theme-card,
.section-card,
.panel,
.auth-card,
.login-card,
.signup-card,
.subscription-card,
.payout-card,
.analytics-card,
.step,
.feature-card,
.empty-state,
.site-card,
.template-card,
.admin-card,
.designer-card,
.stat-card,
.active-card,
.theme-detail-card {
  border-radius: 22px !important;
}

.theme-card,
.site-card,
.template-card,
.feature-card,
.step,
.admin-card,
.designer-card {
  overflow: hidden;
}

.theme-card:hover,
.site-card:hover,
.template-card:hover,
.feature-card:hover,
.step:hover,
.admin-card:hover,
.designer-card:hover {
  border-color: rgba(255,140,0,0.5) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 28px 60px rgba(255,140,0,0.18),
    0 8px 20px rgba(0,0,0,0.35) !important;
  transform: translateY(-6px) rotate(-0.3deg) !important;
}

[data-theme="light"] .theme-card:hover,
[data-theme="light"] .site-card:hover,
[data-theme="light"] .template-card:hover,
[data-theme="light"] .feature-card:hover,
[data-theme="light"] .step:hover,
[data-theme="light"] .admin-card:hover,
[data-theme="light"] .designer-card:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 22px 48px rgba(255,140,0,0.14),
    0 4px 12px rgba(30,22,14,0.06) !important;
}

.card-thumb,
.theme-thumb,
.preview-frame,
.preview-shell,
.canvas-frame,
.demo-frame,
.hero-visual,
.image-wrap,
.thumbnail,
.thumb {
  border-color: var(--mv-border) !important;
  background: var(--mv-surface-alt) !important;
}

/* ─── Typography ─────────────────────────────────── */
h1,
h2,
h3,
.section-title,
.hero-title,
.page-title,
.card-name,
.theme-name,
.wordmark {
  color: var(--mv-text) !important;
}

h1,
h2,
.section-title,
.hero-title,
.page-title,
.card-name,
.theme-name {
  letter-spacing: -0.04em;
}

p,
label,
.section-sub,
.hero-sub,
.muted,
.subtitle,
.desc,
.description,
.card-cat,
.meta,
.stat-label,
.toolbar-note,
.footer-copy,
.footer-links a {
  color: var(--mv-muted) !important;
}

/* ─── Inputs ─────────────────────────────────────── */
input,
textarea,
select {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--mv-border-mid) !important;
  color: var(--mv-text) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
  transition: border-color 0.25s var(--mv-ease), box-shadow 0.25s var(--mv-ease);
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(255,140,0,0.58) !important;
  box-shadow: 0 0 0 4px rgba(255,140,0,0.12), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  outline: none !important;
}

/* ─── Tables & Rows ──────────────────────────────── */
table,
.table,
.list-row,
.payout-row,
.submission-row,
.analytics-page-row {
  border-color: var(--mv-border) !important;
}

/* ─── Badges / Pills / Chips ─────────────────────── */
.badge,
.pill,
.chip,
.tag,
.theme-chip,
.status-badge,
.payout-status,
.step-tag {
  border-radius: 999px !important;
  border: 1px solid var(--mv-border) !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--mv-muted) !important;
}

.badge-new,
.status-active,
.active,
.published {
  background: linear-gradient(135deg, var(--mv-mint), var(--mv-accent)) !important;
  color: #07110F !important;
}

.badge-featured,
.featured {
  background: linear-gradient(135deg, var(--mv-accent), var(--mv-rose)) !important;
  color: #0B0A09 !important;
}

.badge-free,
.free {
  background: rgba(85,224,183,0.16) !important;
  color: var(--mv-mint) !important;
}

.theme-card[data-type]::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--card-accent, var(--mv-border)) !important;
  z-index: 2;
}
.theme-card[data-type="store"] { --card-accent: #0D9488; }
.theme-card[data-type="site"]  { --card-accent: #6366F1; }

.badge-type {
  position: absolute; top: 12px; right: 12px; left: auto;
  padding: 3px 10px; border-radius: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  backdrop-filter: blur(8px); z-index: 3;
}
.badge-type-store { background: rgba(13,148,136,0.15); color: #2DD4BF; border: 1px solid rgba(13,148,136,0.25); }
.badge-type-site  { background: rgba(99,102,241,0.15); color: #818CF8; border: 1px solid rgba(99,102,241,0.25); }
[data-theme="light"] .badge-type-store { background: rgba(13,148,136,0.1); color: #0D9488; border-color: rgba(13,148,136,0.2); }
[data-theme="light"] .badge-type-site  { background: rgba(99,102,241,0.1); color: #6366F1; border-color: rgba(99,102,241,0.2); }

/* ─── Footer ─────────────────────────────────────── */
footer {
  border-top: 1px solid var(--mv-border) !important;
  background: var(--mv-surface) !important;
}

[data-theme="light"] footer {
  border-top-color: var(--mv-border-mid) !important;
}

/* ─── Sidebar ────────────────────────────────────── */
.sidebar,
aside {
  border-color: var(--mv-border) !important;
}

.sidebar a,
.nav-item {
  border-radius: 14px !important;
}

.sidebar a:hover,
.nav-item:hover,
.nav-item.active {
  background: rgba(255,255,255,0.075) !important;
  color: var(--mv-text) !important;
}

/* ─── Section Headers ────────────────────────────── */
.section-header {
  border-bottom: 1px solid var(--mv-border) !important;
}

/* ─── View All link ──────────────────────────────── */
.view-all {
  color: var(--mv-accent) !important;
  font-family: var(--mv-font-tech) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: gap 0.25s var(--mv-ease);
}

.view-all:hover {
  color: var(--mv-rose) !important;
}

/* ─── Nav username display ───────────────────────── */
#nav-username { display: none !important; }

/* ═══ LOGO BOX COLOUR ANIMATION ════════════════════ */
/* Enables the box background cycling (orange→violet→blue→mint→orange)
   on pages that have the animated logo HTML structure. */
.logo .box {
  background-color: transparent !important;
  animation: boxPop 0.3s cubic-bezier(0.34,1.56,0.64,1) 0.1s both,
             logoBgShift 4.5s ease-in-out 0.1s both !important;
}

@keyframes logoBgShift {
  0%    { background-color: #FF8C00; }
  8%    { background-color: #FF8C00; }
  9%    { background-color: #A982FF; }
  23%   { background-color: #A982FF; }
  28%   { background-color: #58C7FF; }
  29%   { background-color: #58C7FF; }
  43%   { background-color: #58C7FF; }
  48%   { background-color: #55E0B7; }
  49%   { background-color: #55E0B7; }
  63%   { background-color: #55E0B7; }
  68%   { background-color: transparent; }
  100%  { background-color: transparent; }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  nav:not(.builder-nav):not(.admin-nav) {
    left: 16px !important;
    right: 16px !important;
    top: 14px !important;
  }
}

@media (max-width: 768px) {
  nav {
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    border-radius: 16px !important;
  }

  .nav-links,
  .nav-menu {
    border-radius: 16px !important;
  }
}

@media (max-width: 480px) {
  nav {
    left: 6px !important;
    right: 6px !important;
  }
}