/* ==========================================================================
   PERFUME SHOPE - DYNAMIC DUAL THEME ENGINE & HIGH-CONTRAST PALETTE SYSTEM
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800;900&family=Teko:wght@500;600;700&display=swap');

/* ==========================================================================
   1. UNISEX / ALL THEME (ROYAL IMPERIAL GOLD & WARM ESPRESSO)
   ========================================================================== */
:root, [data-theme="all"] {
  --bg-main: #100B08;
  --bg-secondary: #17110C;
  --bg-card: #1E1611;
  --bg-card-hover: #291E17;
  --bg-surface-elevated: #231913;
  --border-color: rgba(197, 155, 39, 0.35);
  --border-focus: #C59B27;
  --border-gold: rgba(197, 155, 39, 0.6);
  
  --text-main: #FFFFFF;
  --text-secondary: #E5D9C8;
  --text-muted: #A89887;
  
  --accent-primary: #C59B27;
  --accent-secondary: #A67642;
  --accent-theme: #C59B27;
  --accent-badge-bg: #2C2012;
  --accent-badge-text: #F3CA40;
  
  --btn-primary-bg: #C59B27;
  --btn-primary-hover: #AA771C;
  --btn-primary-text: #100B08;

  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(197, 155, 39, 0.1);
  --hero-gradient: linear-gradient(to top, #100B08 0%, rgba(16, 11, 8, 0.6) 50%, rgba(0, 0, 0, 0.4) 100%);
  --dock-bg: #17110C;
  --dock-border: rgba(197, 155, 39, 0.4);
  
  --font-heading: 'Cinzel', serif;
  --font-body: 'Outfit', sans-serif;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ==========================================================================
   2. WOMEN'S THEME (ROSE GOLD LUXE, BLUSH VELVET & PEONY ESSENCE)
   ========================================================================== */
[data-theme="women"] {
  --bg-main: #FFF3F6;
  --bg-secondary: #FDE8ED;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FFF9FA;
  --bg-surface-elevated: #FFF0F4;
  --border-color: rgba(224, 122, 147, 0.38);
  --border-focus: #D45D79;
  --border-gold: rgba(212, 93, 121, 0.6);
  
  --text-main: #36131E;        /* Ultra-Crisp Dark Berry Espresso */
  --text-secondary: #632B3E;   /* Rich Rosewood */
  --text-muted: #8E5468;       /* Warm Mauve */
  
  --accent-primary: #D45D79;   /* Luminous Rose Gold */
  --accent-secondary: #E07A93; /* Petal Pink */
  --accent-theme: #D45D79;
  --accent-badge-bg: #FFE2EA;
  --accent-badge-text: #96173B;
  
  --btn-primary-bg: #D45D79;
  --btn-primary-hover: #B8435E;
  --btn-primary-text: #FFFFFF;

  --card-shadow: 0 10px 30px rgba(212, 93, 121, 0.12), 0 2px 8px rgba(54, 19, 30, 0.04);
  --hero-gradient: linear-gradient(to top, #36131E 0%, rgba(54, 19, 30, 0.7) 50%, rgba(0, 0, 0, 0.4) 100%);
  --dock-bg: #FFFFFF;
  --dock-border: rgba(224, 122, 147, 0.4);
}

/* ==========================================================================
   3. MEN'S THEME (MARVEL TITANIUM, OBSIDIAN CARBON & ARC CYAN)
   ========================================================================== */
[data-theme="men"] {
  --bg-main: #070B12;
  --bg-secondary: #0D1322;
  --bg-card: #121A2E;
  --bg-card-hover: #19233D;
  --bg-surface-elevated: #162038;
  --border-color: rgba(56, 189, 248, 0.3);
  --border-focus: #38BDF8;
  --border-gold: rgba(56, 189, 248, 0.6);
  
  --text-main: #F8FAFC;        /* High-Voltage Silver White */
  --text-secondary: #CBD5E1;   /* Cool Platinum */
  --text-muted: #94A3B8;       /* Steel Titanium */
  
  --accent-primary: #38BDF8;   /* Electric Arc Reactor Cyan */
  --accent-secondary: #EF4444; /* Marvel Crimson Red */
  --accent-theme: #38BDF8;
  --accent-badge-bg: #0C2842;
  --accent-badge-text: #38BDF8;
  
  --btn-primary-bg: #38BDF8;
  --btn-primary-hover: #0284C7;
  --btn-primary-text: #070B12;

  --card-shadow: 0 10px 35px rgba(0, 0, 0, 0.8), 0 0 20px rgba(56, 189, 248, 0.15);
  --hero-gradient: linear-gradient(to top, #070B12 0%, rgba(7, 11, 18, 0.75) 50%, rgba(0, 0, 0, 0.5) 100%);
  --dock-bg: #0D1322;
  --dock-border: rgba(56, 189, 248, 0.4);
}

/* Base Body */
body {
  font-family: var(--font-body);
  background-color: var(--bg-main);
  color: var(--text-main);
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  padding-bottom: calc(75px + var(--safe-bottom));
  transition: background-color 0.4s ease, color 0.4s ease;
}

@media (min-width: 1024px) {
  body {
    padding-bottom: 0;
  }
}

.font-heading {
  font-family: var(--font-heading);
}

.font-rupee {
  font-family: 'Outfit', 'Cinzel', sans-serif;
  font-weight: 700;
}

/* Glass Header */
.glass-header-mobile {
  background: var(--bg-main);
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

/* Theme Elements */
.theme-card {
  background-color: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-main);
  box-shadow: var(--card-shadow);
  transition: all 0.3s ease;
}

.theme-card:hover {
  background-color: var(--bg-card-hover);
  border-color: var(--border-focus);
}

.theme-bg-main {
  background-color: var(--bg-main);
}

.theme-bg-secondary {
  background-color: var(--bg-secondary);
}

.theme-bg-surface {
  background-color: var(--bg-surface-elevated);
}

.theme-border {
  border-color: var(--border-color);
}

.theme-text-main {
  color: var(--text-main) !important;
}

.theme-text-secondary {
  color: var(--text-secondary) !important;
}

.theme-text-muted {
  color: var(--text-muted) !important;
}

.theme-accent {
  color: var(--accent-primary) !important;
}

.theme-badge {
  background-color: var(--accent-badge-bg);
  color: var(--accent-badge-text);
  border: 1px solid var(--border-color);
}

.theme-btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  transition: all 0.25s ease;
}

.theme-btn-primary:hover {
  background-color: var(--btn-primary-hover);
  transform: translateY(-1px);
}

/* Interactive Inputs */
.theme-input {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-main);
}

.theme-input:focus {
  border-color: var(--border-focus);
  outline: none;
  box-shadow: 0 0 0 2px rgba(197, 155, 39, 0.2);
}

[data-theme="women"] .theme-input:focus {
  box-shadow: 0 0 0 2px rgba(212, 93, 121, 0.25);
}

[data-theme="men"] .theme-input:focus {
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25);
}

/* Scent Notes Tag */
.scent-note-tag {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

/* Performance Gauges */
.meter-bar-fill {
  background: linear-gradient(90deg, #C59B27, #F59E0B, #10B981);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}

[data-theme="women"] .meter-bar-fill {
  background: linear-gradient(90deg, #E07A93, #D45D79, #9F1D49);
  box-shadow: 0 0 8px rgba(212, 93, 121, 0.4);
}

[data-theme="men"] .meter-bar-fill {
  background: linear-gradient(90deg, #0284C7, #38BDF8, #EF4444);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
}

/* Velvet Discovery Box */
.velvet-slot {
  background: var(--bg-surface-elevated);
  border: 1.5px dashed var(--border-color);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}

.velvet-slot.filled {
  background: var(--bg-card);
  border: 1.5px solid var(--accent-primary);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Alchemy Blender Fluid Pulse */
@keyframes alchemyPulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(197, 155, 39, 0.3)); }
  50% { transform: scale(1.03); filter: drop-shadow(0 0 20px rgba(197, 155, 39, 0.7)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(197, 155, 39, 0.3)); }
}

[data-theme="women"] .alchemy-mixing-glow {
  animation: alchemyPulseWomen 3s infinite ease-in-out;
}

@keyframes alchemyPulseWomen {
  0% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(212, 93, 121, 0.3)); }
  50% { transform: scale(1.03); filter: drop-shadow(0 0 20px rgba(212, 93, 121, 0.7)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(212, 93, 121, 0.3)); }
}

[data-theme="men"] .alchemy-mixing-glow {
  animation: alchemyPulseMen 3s infinite ease-in-out;
}

@keyframes alchemyPulseMen {
  0% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.3)); }
  50% { transform: scale(1.03); filter: drop-shadow(0 0 20px rgba(56, 189, 248, 0.7)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.3)); }
}

.alchemy-mixing-glow {
  animation: alchemyPulse 3s infinite ease-in-out;
}

/* Celebrity Wardrobe Glow */
.celebrity-card {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  box-shadow: var(--card-shadow);
  transition: all 0.4s ease;
}

.celebrity-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-focus);
}

/* WhatsApp Floating Pulse */
@keyframes waPulse {
  0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

.wa-pulse {
  animation: waPulse 2.5s infinite;
}

/* Cart Slide-Over Drawer */
.cart-drawer-overlay {
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  transition: opacity 0.3s ease;
}

.cart-drawer-panel {
  background-color: var(--bg-card);
  color: var(--text-main);
  border-left: 1px solid var(--border-color);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-drawer-panel.open {
  transform: translateX(0);
}

/* Modals */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Printable GST Invoice */
@media print {
  body * {
    visibility: hidden;
  }
  #gst-invoice-modal-content, #gst-invoice-modal-content * {
    visibility: visible;
  }
  #gst-invoice-modal-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: #ffffff !important;
    color: #000000 !important;
    border: none !important;
  }
}