/* ============================================
   Sparkle Beauty Lounge - Dark & Gold Theme 🏆
   Author: Sparkle AI
   ============================================ */

:root {
    /* --- Gold Palette --- */
    --gold-primary: #FFD700;
    /* Standard Gold */
    --gold-dark: #B8860B;
    /* Dark Goldenrod */
    --gold-light: #FFE55C;
    /* Light Gold/Yellow */
    --gold-metallic: #DAA520;
    /* Goldenrod */

    /* --- Dark Theme Palette --- */
    --bg-dark-start: #0f0f0f;
    --bg-dark-end: #1a1a1a;
    --bg-card: rgba(255, 255, 255, 0.03);
    --bg-card-hover: rgba(212, 175, 55, 0.1);

    /* --- Typography --- */
    --font-script: 'Great Vibes', cursive;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Poppins', sans-serif;

    /* --- Gradients --- */
    --gradient-gold-text: linear-gradient(135deg, #F4E5B2 0%, #D4AF37 50%, #B8941F 100%);
    --gradient-gold-bg: linear-gradient(45deg, #B8860B, #FFD700, #B8860B);
    --gradient-dark-body: linear-gradient(to bottom, var(--bg-dark-start), var(--bg-dark-end));
}

/* --- Global Overrides --- */
body {
    font-family: var(--font-body);
    background: var(--bg-dark-start) !important;
    background: var(--gradient-dark-body) !important;
    color: #ffffff !important;
    min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--gold-primary) !important;
}

/* Ensure NO white backgrounds anywhere with !important */
.bg-light,
.bg-white,
.about-section,
.services-section,
.testimonials-section,
.contact-section,
.gallery-section {
    background-color: var(--bg-dark-start) !important;
    background: linear-gradient(to bottom, #0f0f0f, #1a1a1a) !important;
}

.text-dark {
    color: var(--gold-light) !important;
}

/* Inputs */
input,
textarea,
select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: white !important;
    border: 1px solid var(--gold-dark) !important;
}

input:focus,
textarea:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 10px var(--gold-primary) !important;
    color: white !important;
}

/* --- Indian Motifs Background --- */
.indian-pattern-bg {
    position: relative;
}

.indian-pattern-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-image: url('../images/indian_mandala_pattern.png'); */
    background-size: 800px;
    background-repeat: repeat;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: overlay;
}

/* --- Text Logo --- */
.nav-logo-text {
    font-family: var(--font-script);
    font-size: 2rem;
    background: var(--gradient-gold-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent !important;
    background-clip: text;
    color: transparent !important;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    text-decoration: none;
    line-height: 1.2;
    display: inline-block;
}

/* --- Gamification Utilities --- */
.gold-coin-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: radial-gradient(circle, #FFD700 0%, #B8860B 100%);
    border-radius: 50%;
    border: 2px solid #FFF;
    box-shadow: 0 0 10px #FFD700;
}