/* --- CSS VARIABLES (Theming Engine) --- */
:root {
    --primary: #E91E63;
    --primary-dark: #A0134B; /* 🔥 Darker Pink for Better Contrast (Accessibility Fix) */
    --navbar-height: 56px;
    
    /* Light Mode Colors (Default) */
    --body-bg: #f8f9fa;
    --heading-color: #000000;    /* 🔥 New: Headings will always be Black in Light mode */
    --text-color: #333333;       /* Body Text Dark Grey */
    --text-secondary: #495057;   /* 🔥 Darker Grey for Better Contrast (Accessibility Fix) */
    --card-bg: #ffffff;
    --modal-bg: #ffffff;
    --input-bg: #ffffff;
    --border-color: #e0e0e0;
    --badge-bg: #f1f1f1;
    --badge-text: #333333;
    
    /* Mobile/Glass Vars */
    --bottom-nav-height: 65px;
    --bottom-nav-bg: rgba(255, 255, 255, 0.95);
    --nav-glass-bg: rgba(255, 255, 255, 0.85);
}

/* --- DARK MODE COLORS --- */
[data-bs-theme="dark"] {
    --body-bg: #121212;
    --heading-color: #ffffff;    /* 🔥 New: Headings will always be White in Dark mode */
    --text-color: #e0e0e0;       /* Body text Off-White */
    --text-secondary: #a0a0a0;
    --card-bg: #1e1e1e;
    --modal-bg: #1e1e1e;
    --input-bg: #2c2c2c;
    --border-color: #444444;
    --badge-bg: #333333;
    --badge-text: #ffffff;
    
    /* Mobile/Glass Vars Dark */
    --bottom-nav-bg: rgba(30, 30, 30, 0.95);
    --nav-glass-bg: rgba(20, 20, 20, 0.85);
}

/* --- GLOBAL STYLES --- */
body {
    background-color: var(--body-bg);
    color: var(--text-color);
    font-family: 'Segoe UI', sans-serif;
    padding-top: var(--navbar-height); /* Default padding for all pages */
    padding-bottom: var(--bottom-nav-height);
    transition: background-color 0.3s, color 0.3s;
}

/* --- HEADINGS DYNAMIC COLOR FIX (This is the main fix) --- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .card-title {
    color: var(--heading-color) !important; /* Now this will use variable */
    transition: color 0.3s;
}

/* --- 1. TOP NAVBAR --- */
.custom-navbar {
    background: var(--nav-glass-bg);
    backdrop-filter: blur(12px);
    height: var(--navbar-height);
    box-shadow: 0 1px 10px rgba(0,0,0,0.05);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: background 0.3s;
}

.navbar-brand { 
    font-size: 20px; 
    font-weight: 800; 
    color: var(--primary) !important;
    display: flex; align-items: center;
}

/* --- 2. HERO SECTION --- */
.hero-section {
    background: linear-gradient(135deg, rgba(0,0,0,0.6), rgba(233, 30, 99, 0.4)), url('https://images.unsplash.com/photo-1555854877-bab0e564b8d5?q=80&w=1000');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 420px;
    display: flex; align-items: center; justify-content: center; text-align: center; color: white;
    margin-top: 0; 
    padding-top: var(--navbar-height);
}

/* Hero Text Exception (Always White) */
.hero-section h1, .hero-section p {
    color: white !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* --- 3. BOTTOM NAVIGATION BAR --- */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; width: 100%; height: var(--bottom-nav-height);
    background: var(--bottom-nav-bg); backdrop-filter: blur(15px);
    border-top: 1px solid var(--border-color);
    display: flex; justify-content: space-around; align-items: center;
    z-index: 1050; padding-bottom: 5px; box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
}

.nav-item-link {
    display: flex; flex-direction: column; align-items: center; text-decoration: none;
    color: var(--text-color); font-size: 11px; font-weight: 500; opacity: 1; transition: 0.2s;
}
.nav-item-link i { font-size: 24px; margin-bottom: 3px; }
.nav-item-link.active { color: var(--primary); opacity: 1; font-weight: 700; }

/* --- 4. SEARCH BAR --- */
.search-container { margin-top: -60px; position: relative; z-index: 10; padding: 0 15px; }
.search-card {
    background-color: var(--card-bg); padding: 20px; border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 1px solid var(--border-color);
}

/* --- 5. SWITCH & BUTTONS --- */
.custom-switch {
    width: 46px; height: 26px; appearance: none;
    background: #e0e0e0; border-radius: 30px;
    position: relative; cursor: pointer; outline: none; transition: 0.3s; border: none;
}
.custom-switch::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px; background: white; border-radius: 50%;
    transition: 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.custom-switch:checked { background: #2196F3; }
.custom-switch:checked::after { transform: translateX(20px); }

[data-bs-theme="dark"] .custom-switch { background: #444; }
[data-bs-theme="dark"] .custom-switch:checked { background: #2196F3; }

/* Desktop View Fixes */
@media (min-width: 992px) {
    .bottom-nav { display: none; }
    body { padding-bottom: 0; }
}

/* Inputs & Badges */
input:not(.custom-switch), select, textarea, .form-control, .form-select, .input-group-text {
    background-color: var(--input-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}
.badge-smart { background-color: var(--body-bg); color: var(--text-color); border: 1px solid var(--border-color); }

/* Buttons */
.btn-custom {
    background-color: #E91E63 !important; color: white !important; border: none !important;
    font-weight: 700 !important; border-radius: 8px; transition: background 0.3s;
}
.btn-custom:hover { background-color: #C2185B !important; color: white !important; }

.btn-outline-custom {
    border: 2px solid #E91E63 !important; color: var(--primary-dark) !important;
    background: transparent !important; font-weight: 600;
}
.btn-outline-custom:hover { background-color: #E91E63 !important; color: white !important; }
    /* 🔥 IMAGE WATERMARK */
    .watermark {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-30deg);
        color: rgba(255, 255, 255, 0.3); /* Halka safed rang */
        font-size: 1.5rem;
        font-weight: 900;
        z-index: 5;
        pointer-events: none; /* Click through ho sake */
        user-select: none;    /* Select na ho sake */
        text-transform: uppercase;
        letter-spacing: 5px;
        text-shadow: 0 2px 10px rgba(0,0,0,0.5);
        width: 100%;
        text-align: center;
    }

    /* 🔥 LOGO WATERMARK (Bottom Right) */
    .watermark-logo {
        position: absolute;
        bottom: 10px;
        right: 10px;
        width: 40px; /* Default size for cards */
        height: auto;
        opacity: 0.8;
        z-index: 6;
        pointer-events: none;
        user-select: none;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    }

    /* 🔥 MOBILE WATERMARK FIXES */
    @media (max-width: 768px) {
        .watermark {
            font-size: 1rem !important; /* Text chhota kiya */
            letter-spacing: 2px;
            opacity: 0.8 !important; /* Visibility badhai */
        }
        .watermark-logo {
            width: 25px !important; /* Logo chhota kiya */
            bottom: 8px !important;
            right: 8px !important;
        }
    }