/* =============================================================================
   VIP Shop Visual Identities — Injajashe
   Five Persian-culture-inspired palettes (Heritage Modernism, but expressive —
   not the generic site blue, not a generic purple-on-white AI look).

   Each .shop-theme-{key} class overrides the core design-token custom
   properties (--primary, --surface*, --on-surface*, legacy --gold/--bg-card
   aliases, etc). Because product cards, badges, buttons and forms already
   reference these tokens, wrapping an artist's shop container with one of
   these classes reskins the whole page automatically — no per-component
   overrides needed. See Models/ShopThemes.cs for the canonical color values.
   ============================================================================= */

.shop-theme-narenjestan,
.shop-theme-yalda,
.shop-theme-firoozeh,
.shop-theme-zaferan,
.shop-theme-khatam {
    display: block;
    border-radius: var(--radius-lg);
    background: var(--background);
    color: var(--on-surface);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* —— نارنجستان (Narenjestan) — burnt orange & cream, deep grove green —— */
.shop-theme-narenjestan {
    --primary: #c85a1f;
    --on-primary: #fff8f0;
    --primary-container: #e08a3e;
    --on-primary-container: #402a1a;
    --primary-fixed: #ffe2c2;
    --primary-fixed-dim: #f0bd82;
    --on-primary-fixed: #402a1a;
    --secondary: #2f6b4f;
    --on-secondary: #ffffff;
    --background: #fff6ec;
    --on-background: #402a1a;
    --surface: #fff6ec;
    --surface-container-lowest: #fffaf3;
    --surface-container-low: #fdefdc;
    --surface-container: #fbe6cc;
    --surface-container-high: #f6dab8;
    --on-surface: #402a1a;
    --on-surface-variant: #7a5b41;
    --outline: #a9835f;
    --outline-variant: #e8c9a0;
    --accent-gold: #d99a1b;
    --shadow-primary: 0 8px 24px rgba(200, 90, 31, 0.22);
}

/* —— شب یلدا (Yalda Night) — pomegranate red & candlelight gold on midnight —— */
.shop-theme-yalda {
    --primary: #c9354f;
    --on-primary: #fff5f2;
    --primary-container: #8e1f3b;
    --on-primary-container: #f9dfe4;
    --primary-fixed: #ffd8de;
    --primary-fixed-dim: #f2a8b6;
    --on-primary-fixed: #3a0d1f;
    --secondary: #c9a227;
    --on-secondary: #221a02;
    --background: #140f1f;
    --on-background: #f5ecd9;
    --surface: #140f1f;
    --surface-container-lowest: #1a1428;
    --surface-container-low: #1e1832;
    --surface-container: #241d3a;
    --surface-container-high: #2b2344;
    --on-surface: #f5ecd9;
    --on-surface-variant: #c3b3d1;
    --outline: #8d7ea3;
    --outline-variant: #3c3157;
    --accent-gold: #c9a227;
    --shadow-primary: 0 8px 28px rgba(0, 0, 0, 0.45);
}

/* —— فیروزه (Firoozeh) — Isfahani turquoise with warm copper —— */
.shop-theme-firoozeh {
    --primary: #0e7c86;
    --on-primary: #f2fdfd;
    --primary-container: #14a3ad;
    --on-primary-container: #062a2d;
    --primary-fixed: #b7ecef;
    --primary-fixed-dim: #7fd2d8;
    --on-primary-fixed: #062a2d;
    --secondary: #c17a3d;
    --on-secondary: #ffffff;
    --background: #f2fbfa;
    --on-background: #16302f;
    --surface: #f2fbfa;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #eaf7f6;
    --surface-container: #ddf0ef;
    --surface-container-high: #cfe8e7;
    --on-surface: #16302f;
    --on-surface-variant: #4a6b68;
    --outline: #6f9694;
    --outline-variant: #bfe3e0;
    --accent-gold: #c17a3d;
    --shadow-primary: 0 8px 24px rgba(14, 124, 134, 0.2);
}

/* —— زعفران (Zaferan) — Khorasan saffron gold on warm ivory —— */
.shop-theme-zaferan {
    --primary: #d99a1b;
    --on-primary: #2e2313;
    --primary-container: #b8860b;
    --on-primary-container: #fff2d6;
    --primary-fixed: #ffe6a8;
    --primary-fixed-dim: #f0cb6e;
    --on-primary-fixed: #2e2313;
    --secondary: #7a2e2e;
    --on-secondary: #ffffff;
    --background: #fdf7e8;
    --on-background: #2e2313;
    --surface: #fdf7e8;
    --surface-container-lowest: #fffdf6;
    --surface-container-low: #faf0d6;
    --surface-container: #f5e7bd;
    --surface-container-high: #efdca0;
    --on-surface: #2e2313;
    --on-surface-variant: #6b5a34;
    --outline: #97833f;
    --outline-variant: #ecd9a0;
    --accent-gold: #d99a1b;
    --shadow-primary: 0 8px 24px rgba(184, 134, 11, 0.22);
}

/* —— خاتم (Khatam) — walnut marquetry with emerald & gold inlay —— */
.shop-theme-khatam {
    --primary: #4a3222;
    --on-primary: #fbf3e6;
    --primary-container: #6b4b32;
    --on-primary-container: #fbf3e6;
    --primary-fixed: #e7d2b8;
    --primary-fixed-dim: #c9ab84;
    --on-primary-fixed: #2e1e13;
    --secondary: #1f7a52;
    --on-secondary: #ffffff;
    --background: #f7f1e6;
    --on-background: #2a2018;
    --surface: #f7f1e6;
    --surface-container-lowest: #fffdf9;
    --surface-container-low: #f1e8d6;
    --surface-container: #e9dcc0;
    --surface-container-high: #ded0ab;
    --on-surface: #2a2018;
    --on-surface-variant: #6b5a45;
    --outline: #8f7a5c;
    --outline-variant: #d8b96a;
    --accent-gold: #d8b96a;
    --shadow-primary: 0 8px 24px rgba(74, 50, 34, 0.25);
}

/* —— Legacy alias sync (so every existing component using --gold / --bg-card / etc.
   picks up the active theme automatically) —— */
.shop-theme-narenjestan,
.shop-theme-yalda,
.shop-theme-firoozeh,
.shop-theme-zaferan,
.shop-theme-khatam {
    --gold: var(--primary-container);
    --gold-light: var(--primary);
    --gold-border: var(--primary-container);
    --gold-glow: 0 0 24px rgba(0, 0, 0, 0.1);
    --bg: var(--background);
    --bg-dark: var(--background);
    --bg-card: var(--surface-container-lowest);
    --bg-header: var(--surface);
    --bg-input: var(--surface-container-low);
    --text: var(--on-surface);
    --text-primary: var(--on-surface);
    --text-secondary: var(--on-surface-variant);
    --text-muted: var(--outline);
    --border: var(--outline-variant);
    --border-gold: var(--primary-container);
}

/* —— Shop header / hero band —— */
.shop-vip-hero {
    display: flex;
    gap: 28px;
    align-items: center;
    flex-wrap: wrap;
    padding: 28px;
    margin-bottom: 32px;
    border-radius: var(--radius-xl);
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}
.shop-vip-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background: var(--shop-hero-gradient, none);
    pointer-events: none;
}
.shop-vip-hero .shop-vip-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid var(--primary-container);
    object-fit: cover;
    position: relative;
    z-index: 1;
}
.shop-vip-hero-body { position: relative; z-index: 1; flex: 1; min-width: 220px; }
.shop-vip-hero-body h2 {
    color: var(--primary);
    margin: 0 0 6px;
    font-family: var(--font-display);
}
.shop-vip-hero-body .shop-vip-meta {
    color: var(--on-surface-variant);
    margin: 0 0 10px;
}
.shop-vip-hero-body p.shop-vip-bio {
    margin-top: 12px;
    color: var(--on-surface);
    line-height: 1.9;
}

.shop-vip-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: var(--shadow-primary);
}
.shop-vip-badge svg { width: 14px; height: 14px; flex-shrink: 0; }

/* =============================================================================
   Theme picker (vendor + admin) — palette gallery cards
   ============================================================================= */
.theme-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    margin-bottom: 12px;
}
.theme-picker-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 2px solid var(--outline-variant);
    background: var(--surface-container-lowest);
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.theme-picker-card:hover { transform: translateY(-3px); }
.theme-picker-card.is-selected { border-color: var(--primary); }
.theme-picker-swatch {
    height: 84px;
    position: relative;
}
.theme-picker-swatch-dot {
    position: absolute;
    bottom: 10px;
    inset-inline-start: 12px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
}
.theme-picker-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.theme-picker-body h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--on-surface, #1a1b23);
}
.theme-picker-body p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--on-surface-variant, #444654);
    flex: 1;
}
.theme-picker-body button { align-self: flex-start; }

@media (max-width: 600px) {
    .shop-vip-hero { padding: 20px; gap: 18px; }
    .shop-vip-hero .shop-vip-avatar { width: 84px; height: 84px; }
}