/* --- 1. Bootstrap Variable Overrides --- */
:root {
    /* Fonts */
    --bs-body-font-family: 'Inter', sans-serif;
    --brand-font: 'Exo 2', sans-serif;

    /* Dark Mode (Default) Color Mapping */
    /* We define the RGB values so Bootstrap can generate opaque utilities (bg-primary-subtle, etc) */
    --bs-primary-rgb: 255, 140, 0;
    /* Orange #ff8c00 */
    --bs-body-bg-rgb: 11, 17, 24;
    /* Dark #0b1118 */
    --bs-body-color-rgb: 255, 255, 255;

    /* Gradient stops for the background */
    --bg-gradient-start: #1e2b3c;
    --bg-gradient-end: #0b1118;

    /* Card Glass Settings */
    --card-bg-opacity: 0.7;
    --card-border-color: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="light"] {
    /* Light Mode Color Mapping */
    --bs-primary-rgb: 224, 123, 0;
    /* Darker Orange for contrast #e07b00 */
    --bs-body-bg-rgb: 248, 249, 250;
    /* Light Gray #f8f9fa */
    --bs-body-color-rgb: 33, 37, 41;
    /* Dark Text */

    /* Light Gradient stops */
    --bg-gradient-start: #e9ecef;
    --bg-gradient-end: #f8f9fa;

    /* Card Glass Settings */
    --card-bg-opacity: 0.8;
    --card-border-color: rgba(0, 0, 0, 0.1);
}

/* --- 2. Global Styles & Typography --- */
body {
    /* Uses the variables defined above */
    background-color: rgba(var(--bs-body-bg-rgb), 1);
    background-image: radial-gradient(circle at 50% 0%, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 70%);
    min-height: 100vh;
    transition: background-color 0.5s ease, color 0.5s ease;
}

body::before {
    content: "";
    background-image: url(https://images.unsplash.com/photo-1630406144797-821be1f35d75?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: 50%;
    display: block;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    position: fixed;
    opacity: 0.1;
}

h1, .h1,
h2, .h2,
h3, .h3,
.brand-font,
.btn-primary {
    font-family: var(--brand-font);
    letter-spacing: -0.5px;
}

/* --- Navbar --- */
.navbar {
    background-color: rgba(var(--bs-body-bg-rgb), 0.9) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--card-border-color);
    transition: background-color 0.3s ease;
}

.social-btn {
    transition: transform 0.2s, color 0.2s;
}

.social-btn:hover {
    transform: translateY(-2px);
}

.social-btn:hover .bi-facebook {
    color: #1877F2;
}

.social-btn:hover .bi-twitter-x {
    color: #000000;
}

/* Dark mode will override this, see below */
.social-btn:hover .bi-linkedin {
    color: #0A66C2;
}

.social-btn:hover .bi-whatsapp {
    color: #25D366;
}

/* Fix X/Twitter color in Dark Mode */
[data-bs-theme="dark"] .social-btn:hover .bi-twitter-x {
    color: #ffffff;
}

#languageToggle img {
    border: 2px solid transparent;
    transition: opacity .3s, border-color .3s;
}

#languageToggle img:hover,
#languageToggle img.active {
    border-color: rgb(var(--bs-primary-rgb));
    opacity: 1 !important;
}

/* --- Glassmorphism Cards --- */
.course-item {
    transition: opacity .3s, transform .3s;
}
.course-item.fade-out {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
}

.course-card {
    background: rgba(var(--bs-body-bg-rgb), var(--card-bg-opacity));
    backdrop-filter: blur(10px);
    border: 1px solid var(--card-border-color);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.course-card:hover {
    transform: translateY(-10px);
    border-color: rgba(var(--bs-primary-rgb), 1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 0 20px rgba(var(--bs-primary-rgb), 0.2);
    z-index: 2;
}

.course-card a {
    color: rgb(var(--bs-primary-rgb));
}

.course-card:hover a {
    background-color: rgb(var(--bs-primary-rgb));
    color: rgb(var(--bs-body-color-rgb));
}

.course-card.bundle {
    background: rgba(255, 255, 255, .1);
}

.course-card.bundle::before {
    content: "";
    position: absolute;
    inset: -150%;
    background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.4) 50%, transparent 60%);
    transform: translateX(-30%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

.course-card.bundle:hover::before {
    transform: translateX(30%);
}