html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

/* --- 🎨 Joyful & Comfortable Core v2.0 Global Variables --- */
:root {
    --font-main: 'Poppins', sans-serif;
    --text-main: #334155;
    --card-bg: rgba(255, 255, 255, 0.90);
    --navbar-bg: rgba(255, 255, 255, 0.85);
    --border-color: rgba(255, 255, 255, 0.6);
    --shadow-soft: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    --joy-accent: #6366F1; /* Default Accent */
}

body {
    margin-bottom: 60px;
    font-family: var(--font-main);
    color: var(--text-main);
    background-attachment: fixed; /* Ensures gradient stays fixed */
}

    /* =========================================
   🎨 BigCady Design System: 24 Joyful Themes
   ========================================= */

    /* 1. Clean White (Default) */
    body.theme-clean-white {
        background: #F8FAFC;
        --joy-accent: #475569;
    }

    /* 2. Ocean Blue */
    body.theme-ocean {
        background: linear-gradient(135deg, #F0F9FF 0%, #E0F5FE 100%);
        --joy-accent: #0284C7;
    }

    /* 3. Berry Pink */
    body.theme-berry {
        background: linear-gradient(135deg, #FDF2F8 0%, #FCE7F3 100%);
        --joy-accent: #DB2777;
    }

    /* 4. Sunset Orange */
    body.theme-sunset {
        background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
        --joy-accent: #EA580C;
    }

    /* 5. Royal Purple */
    body.theme-royal {
        background: linear-gradient(135deg, #FAF5FF 0%, #F3E8FF 100%);
        --joy-accent: #7E22CE;
    }

    /* 6. Forest Green */
    body.theme-forest {
        background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
        --joy-accent: #16A34A;
    }

    /* 7. Lavender Mist */
    body.theme-lavender {
        background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
        --joy-accent: #8B5CF6;
    }

    /* 8. Mint Fresh */
    body.theme-mint {
        background: linear-gradient(135deg, #F0FDFA 0%, #CCFBF1 100%);
        --joy-accent: #0D9488;
    }

    /* 9. Golden Hour */
    body.theme-gold {
        background: linear-gradient(135deg, #FEFCE8 0%, #FEF9C3 100%);
        --joy-accent: #CA8A04;
    }

    /* 10. Cherry Blossom */
    body.theme-cherry {
        background: linear-gradient(135deg, #FFF1F2 0%, #FFE4E6 100%);
        --joy-accent: #E11D48;
    }

    /* 11. Sky High */
    body.theme-sky {
        background: linear-gradient(135deg, #F0F9FF 0%, #BAE6FD 100%);
        --joy-accent: #0EA5E9;
    }

    /* 12. Peach Fuzz */
    body.theme-peach {
        background: linear-gradient(135deg, #FFF5F1 0%, #FFDBCB 100%);
        --joy-accent: #F97316;
    }

    /* 13. Coffee Cream */
    body.theme-coffee {
        background: linear-gradient(135deg, #FFFBEB 0%, #FDE68A 100%);
        --joy-accent: #B45309;
    }

    /* 14. Aqua Marine */
    body.theme-aqua {
        background: linear-gradient(135deg, #ECFEFF 0%, #CFFAFE 100%);
        --joy-accent: #06B6D4;
    }

    /* 15. Rose Red */
    body.theme-rose {
        background: linear-gradient(135deg, #FFF1F2 0%, #FECDD3 100%);
        --joy-accent: #F43F5E;
    }

    /* 16. Lemon Zest */
    body.theme-lemon {
        background: linear-gradient(135deg, #FFFFF0 0%, #FEF08A 100%);
        --joy-accent: #EAB308;
    }

    /* 17. Silver Cloud */
    body.theme-silver {
        background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);
        --joy-accent: #64748B;
    }

    /* 18. Midnight Blue */
    body.theme-midnight {
        background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
        --joy-accent: #1E40AF;
    }

    /* 19. Tropical Teal */
    body.theme-tropical {
        background: linear-gradient(135deg, #F0FDF9 0%, #99F6E4 100%);
        --joy-accent: #14B8A6;
    }

    /* 20. Coral Reef */
    body.theme-coral {
        background: linear-gradient(135deg, #FFF5F5 0%, #FED7E2 100%);
        --joy-accent: #FB7185;
    }

    /* 21. Indigo Night */
    body.theme-indigo {
        background: linear-gradient(135deg, #EEF2FF 0%, #C7D2FE 100%);
        --joy-accent: #4F46E5;
    }

    /* 22. Vanilla Bean */
    body.theme-vanilla {
        background: linear-gradient(135deg, #FFFCF5 0%, #FEEBC8 100%);
        --joy-accent: #D97706;
    }

    /* 23. Steel Grey */
    body.theme-steel {
        background: linear-gradient(135deg, #F1F5F9 0%, #CBD5E1 100%);
        --joy-accent: #475569;
    }

    /* 24. Ruby Red */
    body.theme-ruby {
        background: linear-gradient(135deg, #FEF2F2 0%, #FECACA 100%);
        --joy-accent: #DC2626;
    }

    /* =========================================
   🌑 Deep & Dark Themes (The Collection of 10)
   ========================================= */

    /* 1. Deep Ocean */
    body.theme-deep-ocean {
        background: linear-gradient(135deg, #60A5FA 0%, #1E3A8A 100%);
        --joy-accent: #1E40AF;
        --card-bg: rgba(255, 255, 255, 0.92);
    }

    /* 2. Royal Velvet */
    body.theme-velvet {
        background: linear-gradient(135deg, #A78BFA 0%, #4C1D95 100%);
        --joy-accent: #5B21B6;
        --card-bg: rgba(255, 255, 255, 0.92);
    }

    /* 3. Lush Forest */
    body.theme-lush {
        background: linear-gradient(135deg, #34D399 0%, #064E3B 100%);
        --joy-accent: #065F46;
        --card-bg: rgba(255, 255, 255, 0.92);
    }

    /* 4. Crimson Dusk */
    body.theme-crimson {
        background: linear-gradient(135deg, #F87171 0%, #7F1D1D 100%);
        --joy-accent: #991B1B;
        --card-bg: rgba(255, 255, 255, 0.92);
    }

    /* 5. Midnight Charcoal */
    body.theme-charcoal {
        background: linear-gradient(135deg, #94A3B8 0%, #334155 100%);
        --joy-accent: #0F172A;
        --card-bg: rgba(255, 255, 255, 0.92);
    }

    /* 6. Espresso Roast */
    body.theme-espresso {
        background: linear-gradient(135deg, #A97142 0%, #451a03 100%);
        --joy-accent: #78350F;
        --card-bg: rgba(255, 255, 255, 0.92);
    }

    /* 7. Deep Teal */
    body.theme-abyss {
        background: linear-gradient(135deg, #2DD4BF 0%, #134E4A 100%);
        --joy-accent: #115E59;
        --card-bg: rgba(255, 255, 255, 0.92);
    }

    /* 8. Galaxy Grape */
    body.theme-grape {
        background: linear-gradient(135deg, #C084FC 0%, #581C87 100%);
        --joy-accent: #6B21A8;
        --card-bg: rgba(255, 255, 255, 0.92);
    }

    /* 9. Military Olive */
    body.theme-olive {
        background: linear-gradient(135deg, #A3E635 0%, #365314 100%);
        --joy-accent: #3F6212;
        --card-bg: rgba(255, 255, 255, 0.92);
    }

    /* 10. Slate Grey */
    body.theme-slate {
        background: linear-gradient(135deg, #CBD5E1 0%, #475569 100%);
        --joy-accent: #1E293B;
        --card-bg: rgba(255, 255, 255, 0.92);
    }

    /* --- 🌙 Night Mode --- */
    body.theme-night {
        background: linear-gradient(135deg, #0F172A 0%, #020617 100%);
        --text-main: #F1F5F9;
        --card-bg: rgba(30, 41, 59, 0.85);
        --navbar-bg: rgba(15, 23, 42, 0.9);
        --border-color: rgba(255, 255, 255, 0.1);
        --joy-accent: #38BDF8;
        --shadow-soft: 0 10px 30px -5px rgba(0, 0, 0, 0.5);
    }

/* ======================================================
   🌊 The "Detroit" Animated Theme (Legacy Special) 🌊
   ====================================================== */

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

body.theme-detroit {
    background: linear-gradient(-45deg, #004b8d, #00bfff, #ffe600, #00bfff);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    --joy-accent: #ffc107;
    --text-main: #1a1a1a;
    --navbar-bg: rgba(255, 255, 255, 0.9);
    --card-bg: rgba(255, 255, 255, 0.85);
    --border-color: rgba(255, 255, 255, 0.5);
}

    body.theme-detroit h1, body.theme-detroit h2, body.theme-detroit .navbar-brand {
        color: #ffffff;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    }

    body.theme-detroit .nav-link {
        color: #333 !important;
    }

        body.theme-detroit .nav-link:hover {
            color: var(--joy-accent) !important;
        }

.btn-bomb-style {
    background-color: var(--joy-accent);
    color: #1a1a1a;
    font-weight: bold;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(255, 193, 7, 0.4);
    transition: all 0.3s ease;
    border: none;
}

    .btn-bomb-style:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 15px rgba(255, 193, 7, 0.6);
        background-color: #ffd54f;
    }

.theme-swatch.theme-detroit {
    background: linear-gradient(-45deg, #004b8d, #00bfff, #ffe600, #00bfff);
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
    border: 2px solid #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

/* ======================================================
   🔥 Global Joyful UI Components 🔥
   ====================================================== */

/* 1. Glass Card & Components */
.card,
.glass-panel,
.course-card-square,
.custom-dropdown {
    background: var(--card-bg, rgba(255, 255, 255, 0.85)) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

    /* 2. Hover Effects */
    .card:hover, .glass-panel:hover, .course-card-square:hover {
        transform: translateY(-5px);
        border-color: var(--joy-accent) !important;
        box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.1);
    }

/* 3. Joy Container */
.joy-container {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* 4. Card Header & Footer */
.card-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 1.5rem;
}

.card-footer {
    background-color: transparent;
    border-top: 1px solid rgba(0,0,0,0.05);
}

/* 5. Joy Button (Primary) */
.btn-joy {
    background-color: var(--joy-accent);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 10px 24px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s;
}

    .btn-joy:hover {
        filter: brightness(1.1);
        transform: translateY(-2px);
        color: white;
        box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    }

/* 6. Joy Outline Button (Secondary) */
.btn-joy-outline {
    background: transparent;
    color: var(--joy-accent);
    border: 2px solid var(--joy-accent);
    border-radius: 50px;
    padding: 8px 22px;
    font-weight: 600;
    transition: all 0.3s;
}

    .btn-joy-outline:hover {
        background: var(--joy-accent);
        color: white;
    }