/* --- Custom Variables & Base Styles --- */
:root {
    --gold-primary: #D4AF37;
    --gold-dark: #AA8C2C;
    --islamic-green: #004225;
    
    /* MODIFIED: Default to Light Theme */
    --bg-body: #f9fafb;     /* Light Gray/White */
    --text-main: #1f2937;   /* Dark Gray Text */
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(0, 0, 0, 0.1);
}

body {
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
    
    /* MODIFIED: Use new light variables by default */
    background-color: var(--bg-body) !important;
    color: var(--text-main);
    
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* --- Theme Specific Overrides (Dark Modes) --- */
/* These themes must explicitly switch back to dark mode */
body.theme-luxury, 
body.theme-fireworks, 
body.theme-green {
    --bg-body: #111827;
    --text-main: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
}

/* Specific Background Colors for Dark Themes */
body.theme-green { background-color: #002814 !important; }
body.theme-luxury { background-color: #000000 !important; }
body.theme-fireworks { background-color: #111827 !important; }


/* --- Active Theme Selection Logic --- */
/* This makes the selected theme card pop/glow */
.theme-radio-input:checked + .theme-radio-label {
    border-color: var(--gold-primary) !important;
    background-color: rgba(212, 175, 55, 0.15); /* Subtle Gold Tint */
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4); /* Glow Effect */
    transform: scale(1.05); /* Slight Zoom */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Default state for theme labels */
.theme-radio-label {
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
}

/* --- Custom Classes for Fonts --- */
.font-poppins { font-family: 'Poppins', sans-serif; }
.font-script { font-family: 'Great Vibes', cursive; }
.font-urdu { font-family: 'Noto Nastaliq Urdu', serif; direction: rtl; line-height: 2; }
.font-luxury { font-family: 'Cinzel', serif; }

/* --- Color Utilities --- */
.text-gold { color: var(--gold-primary) !important; }
.text-gold-light { color: #fde68a !important; }
.bg-gold { background-color: var(--gold-primary) !important; }
.bg-islamic-green { background-color: var(--islamic-green) !important; }
.border-gold { border-color: var(--gold-primary) !important; }

/* --- Gradients --- */
.bg-gradient-gold {
    background: linear-gradient(to right, var(--gold-dark), #eab308);
    border: none;
}
.text-gradient-gold {
    background: linear-gradient(to right, #fef08a, #eab308, #fef08a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --- Fireworks Canvas --- */
#canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* --- Glassmorphism (Adaptive) --- */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    transition: background 0.5s ease, border 0.5s ease;
}

/* Theme specific glass border tweaks */
body.theme-luxury .glass-panel { border-color: var(--gold-primary); }
body.theme-green .glass-panel { border-color: #4ade80; }

/* --- Animations --- */
.animate-fade-in { animation: fadeIn 1s ease-out; }
.animate-float { animation: float 3s ease-in-out infinite; }

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* --- Typewriter Cursor --- */
.typewriter-cursor::after {
    content: '|';
    animation: blink 1s infinite;
    color: var(--gold-primary); /* Ensure cursor is visible on light theme */
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* --- Form Elements Overrides (Adaptive) --- */
.form-control {
    /* Adaptive background: Dark on dark themes, Light on light themes */
    background-color: rgba(128, 128, 128, 0.1); 
    border: 1px solid #9ca3af;
    color: var(--text-main); /* Adaptive text color */
}

.form-control:focus, .form-select:focus {
    background-color: rgba(212, 175, 55, 0.05);
    border-color: var(--gold-primary);
    box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25);
    color: var(--text-main);
}

.form-control::placeholder {
    color: inherit;
    opacity: 0.6;
}

/* --- Fix for Dropdown Options Visibility --- */
.form-select option {
    background-color: var(--bg-body); /* Matches the active theme's background */
    color: var(--text-main);          /* Matches the active theme's text color */
}

/* Explicit fallback for Dark Themes to ensure high contrast in all browsers */
body.theme-luxury .form-select option,
body.theme-fireworks .form-select option,
body.theme-green .form-select option {
    background-color: #111827; /* Force dark background */
    color: #ffffff;            /* Force white text */
}

/* Explicit fallback for Light Themes */
body:not(.theme-luxury):not(.theme-fireworks):not(.theme-green) .form-select option {
    background-color: #ffffff; /* Force white background */
    color: #1f2937;            /* Force dark text */
}

/* --- Custom Scrollbar --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
::-webkit-scrollbar-thumb { background: var(--gold-primary); border-radius: 4px; }

/* --- Utilities --- */
.hidden { display: none !important; }

/* Button Hover Effects */
.btn-gold {
    background: linear-gradient(to right, var(--gold-dark), #eab308);
    color: black; /* Always black text on gold button for contrast */
    font-weight: bold;
    border: none;
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-gold:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(212,175,55,0.5);
    color: black;
}