/* ============================================
   BARBEARIA JS — 10 Distinct Layout Themes Engine
   Supports 10 high-end modern design themes for the client booking interface
   ============================================ */

/* ============================================
   1. THEME: Cyberpunk Gold (Default Obsidian & Gold)
   ============================================ */
body.theme-cyberpunk-gold,
.theme-cyberpunk-gold {
  --bg-primary: #0a0a0f;
  --bg-secondary: #111118;
  --bg-surface: #16161f;
  --bg-surface-elevated: #1c1c2e;
  --accent-primary: #c9a84c;
  --accent-light: #f0d78c;
  --accent-dark: #9a7b2e;
  --accent-gradient: linear-gradient(135deg, #c9a84c 0%, #f0d78c 50%, #c9a84c 100%);
  --accent-glow: 0 0 20px rgba(201, 168, 76, 0.35);
  --text-primary: #ffffff;
  --text-secondary: #a0a0b8;
  --text-accent: #f0d78c;
  --border-subtle: rgba(201, 168, 76, 0.12);
  --border-default: rgba(201, 168, 76, 0.25);
  --border-strong: rgba(201, 168, 76, 0.45);
  --glass-bg: rgba(22, 22, 31, 0.75);
}

/* ============================================
   2. THEME: Midnight Neon (Electric Cyan & Neon Magenta)
   ============================================ */
body.theme-midnight-neon,
.theme-midnight-neon {
  --bg-primary: #050b14;
  --bg-secondary: #0a1526;
  --bg-surface: #0f1f38;
  --bg-surface-elevated: #15294a;
  --accent-primary: #00f2fe;
  --accent-light: #4facfe;
  --accent-dark: #0082c8;
  --accent-gradient: linear-gradient(135deg, #00f2fe 0%, #4facfe 50%, #00c6ff 100%);
  --accent-glow: 0 0 22px rgba(0, 242, 254, 0.4);
  --text-primary: #ffffff;
  --text-secondary: #8bb2db;
  --text-accent: #00f2fe;
  --border-subtle: rgba(0, 242, 254, 0.15);
  --border-default: rgba(0, 242, 254, 0.3);
  --border-strong: rgba(0, 242, 254, 0.5);
  --glass-bg: rgba(15, 31, 56, 0.8);
}
body.theme-midnight-neon .hero h1 {
  background: linear-gradient(135deg, #00f2fe 0%, #00c6ff 50%, #f72585 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ============================================
   3. THEME: Gentleman Emerald (Forest Green & Antique Bronze)
   ============================================ */
body.theme-emerald-barber,
.theme-emerald-barber {
  --bg-primary: #06120e;
  --bg-secondary: #0c1c17;
  --bg-surface: #122921;
  --bg-surface-elevated: #19382e;
  --accent-primary: #2ecc71;
  --accent-light: #58d68d;
  --accent-dark: #1e8449;
  --accent-gradient: linear-gradient(135deg, #2ecc71 0%, #d4ac0d 100%);
  --accent-glow: 0 0 20px rgba(46, 204, 113, 0.3);
  --text-primary: #f0f7f4;
  --text-secondary: #9cbdae;
  --text-accent: #58d68d;
  --border-subtle: rgba(46, 204, 113, 0.15);
  --border-default: rgba(46, 204, 113, 0.28);
  --border-strong: rgba(46, 204, 113, 0.45);
  --glass-bg: rgba(18, 41, 33, 0.8);
  --font-heading: 'Outfit', Georgia, serif;
}

/* ============================================
   4. THEME: Ruby Luxury (Royal Velvet Ruby & Champagne Gold)
   ============================================ */
body.theme-ruby-luxury,
.theme-ruby-luxury {
  --bg-primary: #120508;
  --bg-secondary: #1c0a0f;
  --bg-surface: #291017;
  --bg-surface-elevated: #381620;
  --accent-primary: #e63946;
  --accent-light: #ff6b6b;
  --accent-dark: #9b1d28;
  --accent-gradient: linear-gradient(135deg, #e63946 0%, #ff85a1 50%, #f72585 100%);
  --accent-glow: 0 0 22px rgba(230, 57, 70, 0.4);
  --text-primary: #ffffff;
  --text-secondary: #d8a7b1;
  --text-accent: #ff6b6b;
  --border-subtle: rgba(230, 57, 70, 0.18);
  --border-default: rgba(230, 57, 70, 0.32);
  --border-strong: rgba(230, 57, 70, 0.5);
  --glass-bg: rgba(41, 16, 23, 0.82);
}

/* ============================================
   5. THEME: Slate Minimalist (Dark Slate & Stark Silver)
   ============================================ */
body.theme-slate-minimal,
.theme-slate-minimal {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-surface: #334155;
  --bg-surface-elevated: #475569;
  --accent-primary: #38bdf8;
  --accent-light: #7dd3fc;
  --accent-dark: #0284c7;
  --accent-gradient: linear-gradient(135deg, #38bdf8 0%, #e2e8f0 100%);
  --accent-glow: 0 0 18px rgba(56, 189, 248, 0.3);
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-accent: #38bdf8;
  --border-subtle: rgba(226, 232, 240, 0.12);
  --border-default: rgba(56, 189, 248, 0.25);
  --border-strong: rgba(56, 189, 248, 0.45);
  --glass-bg: rgba(30, 41, 59, 0.85);
}

/* ============================================
   6. THEME: Sunset Fire (Purple & Sunset Orange Gradient)
   ============================================ */
body.theme-sunset-gradient,
.theme-sunset-gradient {
  --bg-primary: #13091e;
  --bg-secondary: #1f1030;
  --bg-surface: #2c1845;
  --bg-surface-elevated: #3b215c;
  --accent-primary: #ff7e5f;
  --accent-light: #feb47b;
  --accent-dark: #d94b2b;
  --accent-gradient: linear-gradient(135deg, #ff7e5f 0%, #feb47b 50%, #ff2a6d 100%);
  --accent-glow: 0 0 24px rgba(255, 126, 95, 0.4);
  --text-primary: #ffffff;
  --text-secondary: #cbb6e2;
  --text-accent: #feb47b;
  --border-subtle: rgba(255, 126, 95, 0.18);
  --border-default: rgba(255, 126, 95, 0.32);
  --border-strong: rgba(255, 126, 95, 0.52);
  --glass-bg: rgba(44, 24, 69, 0.82);
}

/* ============================================
   7. THEME: Titanium Blue (Gunmetal Steel & Cobalt)
   ============================================ */
body.theme-titanium-silver,
.theme-titanium-silver {
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-surface: #21262d;
  --bg-surface-elevated: #30363d;
  --accent-primary: #2f81f7;
  --accent-light: #58a6ff;
  --accent-dark: #1f6beb;
  --accent-gradient: linear-gradient(135deg, #2f81f7 0%, #58a6ff 50%, #79c0ff 100%);
  --accent-glow: 0 0 20px rgba(47, 129, 247, 0.35);
  --text-primary: #c9d1d9;
  --text-secondary: #8b949e;
  --text-accent: #58a6ff;
  --border-subtle: rgba(47, 129, 247, 0.15);
  --border-default: rgba(47, 129, 247, 0.3);
  --border-strong: rgba(47, 129, 247, 0.5);
  --glass-bg: rgba(33, 38, 45, 0.85);
}

/* ============================================
   8. THEME: Nordic Frost (Ice Blue & Arctic Platinum)
   ============================================ */
body.theme-nordic-frost,
.theme-nordic-frost {
  --bg-primary: #04121a;
  --bg-secondary: #081d29;
  --bg-surface: #0d293a;
  --bg-surface-elevated: #13374d;
  --accent-primary: #00d2ff;
  --accent-light: #80e5ff;
  --accent-dark: #0099bc;
  --accent-gradient: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%);
  --accent-glow: 0 0 22px rgba(0, 210, 255, 0.38);
  --text-primary: #f0f9ff;
  --text-secondary: #90c2e7;
  --text-accent: #80e5ff;
  --border-subtle: rgba(0, 210, 255, 0.15);
  --border-default: rgba(0, 210, 255, 0.3);
  --border-strong: rgba(0, 210, 255, 0.5);
  --glass-bg: rgba(13, 41, 58, 0.82);
}

/* ============================================
   9. THEME: Amber Vintage (Classic Tobacco & Amber)
   ============================================ */
body.theme-amber-vintage,
.theme-amber-vintage {
  --bg-primary: #140d07;
  --bg-secondary: #21160c;
  --bg-surface: #2e1e12;
  --bg-surface-elevated: #3d2a1a;
  --accent-primary: #f59e0b;
  --accent-light: #fbbf24;
  --accent-dark: #d97706;
  --accent-gradient: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #d97706 100%);
  --accent-glow: 0 0 20px rgba(245, 158, 11, 0.35);
  --text-primary: #fef3c7;
  --text-secondary: #d97706;
  --text-accent: #fbbf24;
  --border-subtle: rgba(245, 158, 11, 0.15);
  --border-default: rgba(245, 158, 11, 0.3);
  --border-strong: rgba(245, 158, 11, 0.5);
  --glass-bg: rgba(46, 30, 18, 0.85);
}

/* ============================================
   10. THEME: Monochrome Pro (Pitch Black & Stark White)
   ============================================ */
body.theme-monochrome-pro,
.theme-monochrome-pro {
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-surface: #141414;
  --bg-surface-elevated: #222222;
  --accent-primary: #ffffff;
  --accent-light: #ffffff;
  --accent-dark: #cccccc;
  --accent-gradient: linear-gradient(135deg, #ffffff 0%, #aaaaaa 100%);
  --accent-glow: 0 0 20px rgba(255, 255, 255, 0.25);
  --text-primary: #ffffff;
  --text-secondary: #888888;
  --text-accent: #ffffff;
  --border-subtle: rgba(255, 255, 255, 0.12);
  --border-default: rgba(255, 255, 255, 0.25);
  --border-strong: rgba(255, 255, 255, 0.45);
  --glass-bg: rgba(20, 20, 20, 0.88);
}

/* ============================================
   STRUCTURAL LAYOUT & INTERACTION ENGINES FOR THE 10 THEMES
   ============================================ */

/* 1. STRUCTURAL LAYOUT: Cyberpunk Gold (Floating Gold Cards) */
body.theme-cyberpunk-gold .services-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
body.theme-cyberpunk-gold .service-card {
  border-radius: 16px;
  border-left: 4px solid var(--accent-primary);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.theme-cyberpunk-gold .service-card:hover {
  transform: translateY(-4px) scale(1.01);
}

/* 2. STRUCTURAL LAYOUT: Midnight Neon (Cyber Horizontal Snap & Floating Dock) */
body.theme-midnight-neon .services-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
body.theme-midnight-neon .service-card {
  border-radius: 20px;
  border: 1px solid rgba(0, 242, 254, 0.2);
  box-shadow: inset 0 0 15px rgba(0, 242, 254, 0.05);
}
body.theme-midnight-neon .total-bar {
  bottom: 20px;
  max-width: 440px;
  margin: 0 auto;
  border-radius: 24px;
  border: 1px solid rgba(0, 242, 254, 0.4);
  box-shadow: 0 10px 30px rgba(0, 242, 254, 0.25);
}

/* 3. STRUCTURAL LAYOUT: Gentleman Emerald (Vintage Barber Desk & Serif Frame) */
body.theme-emerald-barber .app-container {
  border: 1px solid rgba(46, 204, 113, 0.2);
  border-radius: 8px;
}
body.theme-emerald-barber .service-card {
  border-radius: 6px;
  border: 1px solid rgba(46, 204, 113, 0.3);
  background: var(--bg-surface);
}
body.theme-emerald-barber .btn {
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}

/* 4. STRUCTURAL LAYOUT: Ruby Luxury (Royal Velvet Sheet & Pill Floating Header) */
body.theme-ruby-luxury .app-container {
  padding-top: var(--space-6);
}
body.theme-ruby-luxury .service-card {
  border-radius: 24px;
  box-shadow: 0 12px 32px rgba(230, 57, 70, 0.15);
  border: 1px solid rgba(230, 57, 70, 0.25);
}
body.theme-ruby-luxury .hero-logo {
  border-radius: 50%;
  padding: 12px;
  background: radial-gradient(circle, rgba(230, 57, 70, 0.2) 0%, transparent 70%);
}

/* 5. STRUCTURAL LAYOUT: Slate Minimalist (Apple Style Grid & Clean Lines) */
body.theme-slate-minimal .services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
body.theme-slate-minimal .service-card {
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.15);
  background: rgba(30, 41, 59, 0.5);
  backdrop-filter: blur(12px);
}
body.theme-slate-minimal .btn-primary {
  border-radius: 10px;
  box-shadow: none;
}

/* 6. STRUCTURAL LAYOUT: Sunset Fire (Gradient Hero Overlap & Dynamic Action) */
body.theme-sunset-gradient .hero-logo {
  transform: scale(1.05);
}
body.theme-sunset-gradient .service-card {
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(44, 24, 69, 0.9) 0%, rgba(31, 16, 48, 0.9) 100%);
  border: 1px solid rgba(255, 126, 95, 0.3);
}
body.theme-sunset-gradient .total-bar-inner {
  background: linear-gradient(135deg, rgba(255, 126, 95, 0.15) 0%, rgba(255, 42, 109, 0.15) 100%);
}

/* 7. STRUCTURAL LAYOUT: Titanium Cobalt (Industrial High-Density Grid) */
body.theme-titanium-silver .service-card {
  border-radius: 8px;
  border-top: 3px solid var(--accent-primary);
  background: var(--bg-surface);
}
body.theme-titanium-silver .time-slot-btn {
  border-radius: 4px;
  font-family: monospace;
}

/* 8. STRUCTURAL LAYOUT: Nordic Frost (Frosted Glass Ice Matrix) */
body.theme-nordic-frost .service-card {
  border-radius: 22px;
  background: rgba(13, 41, 58, 0.65);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(0, 210, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 210, 255, 0.15);
}

/* 9. STRUCTURAL LAYOUT: Amber Vintage (Barber Ticket Stub Coupon) */
body.theme-amber-vintage .service-card {
  border-radius: 12px;
  border: 2px dashed rgba(245, 158, 11, 0.4);
  position: relative;
  background: var(--bg-surface);
}
body.theme-amber-vintage .service-card::before {
  content: '💈';
  position: absolute;
  top: 10px;
  right: 12px;
  opacity: 0.2;
  font-size: 1.5rem;
}

/* 10. STRUCTURAL LAYOUT: Monochrome Pro (Stealth Pitch Black OLED) */
body.theme-monochrome-pro .app-container {
  background: #000000;
}
body.theme-monochrome-pro .service-card {
  border-radius: 0px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
}
body.theme-monochrome-pro .service-card:hover {
  border-color: #ffffff;
}
body.theme-monochrome-pro .btn {
  border-radius: 0px;
  font-weight: 800;
}