/* =========================================
   Weather Theme System - Professional Edition
   ========================================= */

/* --- Default Theme Variables (Fallback) --- */
:root {
    --theme-primary: #0d6efd;
    /* Bootstrap Primary Default */
    --theme-secondary: #6c757d;
    --theme-accent: #0dcaf0;

    --theme-bg-overlay: rgba(255, 255, 255, 0.85);
    --theme-hero-overlay: rgba(13, 110, 253, 0.85);
    --theme-footer-bg: rgba(33, 37, 41, 0.9);
    --theme-card-bg: rgba(255, 255, 255, 0.85);
    --theme-text-color: #333;
    --theme-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --theme-heading-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    /* Pop against video */

    /* Glassmorphism Variables - Glossy Edition */
    --theme-glass-blur: blur(16px);
    /* Stronger blur for clean look */
    /* Glossy Gradient: Light reflection from top-left */
    --theme-glass-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.05) 100%);
    --theme-glass-border: 1px solid rgba(255, 255, 255, 0.55);
    /* Stronger border */
    /* Inner Top Highlight for 3D effect + Soft Drop Shadow */
    --theme-glass-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.5), 0 8px 32px 0 rgba(31, 38, 135, 0.2);
}

/* --- Theme Palettes --- */

/* 1. Sunny / Clear: Warm, Vibrant, Energetic */
body.weather-sunny {
    --theme-primary: #ff9800;
    /* Vivid Orange */
    --theme-secondary: #ffc107;
    /* Amber */
    --theme-accent: #ff5722;
    /* Deep Orange underline */

    --theme-bg-overlay: rgba(255, 250, 240, 0.88);
    /* Warm White */
    --theme-hero-overlay: rgba(255, 152, 0, 0.85);
    /* Orange overlay */
    --theme-footer-bg: rgba(40, 30, 20, 0.9);
    /* Warm Dark Brown/Black */
    --theme-card-bg: rgba(255, 255, 255, 0.9);
    --theme-text-shadow: 0 1px 3px rgba(100, 50, 0, 0.2);
}

/* 2. Rainy / Stormy: Cool, Deep, Professional Blue */
body.weather-rainy {
    --theme-primary: #0056b3;
    /* Deep Blue */
    --theme-secondary: #4dabf7;
    --theme-accent: #003d80;

    --theme-bg-overlay: rgba(240, 245, 255, 0.9);
    /* Cool White */
    --theme-hero-overlay: rgba(2, 59, 125, 0.85);
    /* Deep Blue overlay */
    --theme-footer-bg: rgba(10, 25, 45, 0.92);
    /* Deep Navy */
    --theme-card-bg: rgba(255, 255, 255, 0.88);
    --theme-text-shadow: 0 1px 5px rgba(0, 20, 50, 0.2);
}

/* 3. Cloudy: Neutral, Slate, Balanced */
body.weather-cloudy {
    --theme-primary: #607d8b;
    /* Blue Grey */
    --theme-secondary: #90a4ae;
    --theme-accent: #455a64;

    --theme-bg-overlay: rgba(245, 247, 250, 0.9);
    /* Neutral White */
    --theme-hero-overlay: rgba(70, 90, 100, 0.85);
    /* Slate overlay */
    --theme-footer-bg: rgba(30, 35, 40, 0.92);
    --theme-card-bg: rgba(255, 255, 255, 0.9);
    --theme-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* 4. Snowy: Icy, Bright, Cyan/Blue tones */
body.weather-snowy {
    --theme-primary: #0dcaf0;
    /* Cyan */
    --theme-secondary: #0099cc;
    --theme-accent: #fff;

    --theme-bg-overlay: rgba(250, 253, 255, 0.92);
    /* Ice White */
    --theme-hero-overlay: rgba(13, 202, 240, 0.85);
    /* Cyan overlay */
    --theme-footer-bg: rgba(20, 40, 50, 0.9);
    --theme-card-bg: rgba(255, 255, 255, 0.85);
    --theme-text-shadow: 0 1px 5px rgba(0, 100, 200, 0.15);
}


/* --- Structural Styling --- */

/* Background Video */
#weather-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 0.35;
    /* Slightly increased for better ambience */
}

/* Global Body Settings */
body {
    background-color: transparent !important;
    color: var(--theme-text-color) !important;
}

/* Typography Enhancements */
h1,
h2,
h3,
h4,
h5,
h6,
.display-4 {
    text-shadow: var(--theme-text-shadow);
}

.hero-header h1,
.features h1 {
    text-shadow: var(--theme-heading-shadow);
    /* Stronger shadow on overlays */
}


/* --- Component Overrides using Variables --- */

/* 1. Primary Backgrounds (Buttons, Badges, Highlights) */
.bg-primary,
.btn-primary,
.nav-pills .nav-link.active,
.btn-outline-primary:hover {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

/* 2. Text Colors */
.text-primary,
.btn-outline-primary,
.accordion-button:not(.collapsed) {
    color: var(--theme-primary) !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    /* Ideally this SVG color would be dynamic too, but simple override sufficient for now */
}


/* 3. Layout Transparencies */

/* Hero Headers */
.hero-header {
    background-image: none !important;
    background: var(--theme-glass-gradient) !important;
    background-color: var(--theme-hero-overlay) !important;
    /* Fallback/Blend */
    backdrop-filter: var(--theme-glass-blur);
    border-bottom: var(--theme-glass-border);
    box-shadow: var(--theme-glass-shadow) !important;
}

/* Content Sections (Light backgrounds) */
.bg-light,
.bg-white,
.service-item,
.team-item,
.testimonial-item,
.case-item,
.form-control,
.content-wrapper {
    background: var(--theme-glass-gradient) !important;
    background-color: var(--theme-bg-overlay) !important;
    /* Fallback/Blend */
    backdrop-filter: var(--theme-glass-blur);
    border: var(--theme-glass-border);
    box-shadow: var(--theme-glass-shadow) !important;
    border-radius: 16px;
    /* More rounded like reference */
}

/* Sponsors Section */
.outer-container {
    background: var(--theme-glass-gradient) !important;
    background-color: var(--theme-bg-overlay) !important;
    backdrop-filter: var(--theme-glass-blur);
    border-top: var(--theme-glass-border);
    box-shadow: var(--theme-glass-shadow) !important;
}

/* Footer & Dark Areas */
.bg-dark,
.footer,
.weather-footer {
    background-image: none !important;
    background-color: var(--theme-footer-bg) !important;
    backdrop-filter: var(--theme-glass-blur);
    border-top: var(--theme-glass-border);
}

/* Navbar */
.navbar {
    background: var(--theme-glass-gradient) !important;
    background-color: var(--theme-hero-overlay) !important;
    backdrop-filter: var(--theme-glass-blur);
    border-bottom: var(--theme-glass-border);
    box-shadow: var(--theme-glass-shadow) !important;
}

/* Accordions */
.accordion-button {
    background-color: var(--theme-bg-overlay) !important;
    color: var(--theme-text-color);
}

.accordion-item {
    background-color: transparent !important;
}

/* --- Utility --- */
.section-head-text {
    color: var(--theme-primary) !important;
}

/* Location Notification Popup */
.location-popup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    border-radius: 15px;
    padding: 15px 25px;
    max-width: 400px;
    animation: slideUp 0.5s ease-out;
    color: #333;
    font-size: 0.9rem;
    font-weight: 500;
}

.popup-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.location-popup i {
    font-size: 1.2rem;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dark mode adjustment if needed */
body.night-mode .location-popup {
    background: rgba(20, 24, 62, 0.9);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.night-mode .location-popup .btn-close {
    filter: invert(1);
}

@media (max-width: 576px) {
    .location-popup {
        left: 5%;
        right: 5%;
        width: 90%;
        bottom: 10px;
        padding: 10px 15px;
        font-size: 0.8rem;
    }

    .location-popup i {
        font-size: 1rem;
    }
}

/* --- Night Mode Video Filter --- */
/* Converts day-time weather videos to night-time equivalents using filters */
body.night-mode {
    background-color: #050510 !important;
    /* Deep dark backing for semi-transparent video */
}

body.night-mode #weather-background {
    filter: brightness(0.7) contrast(1.1) grayscale(0.4);
    /* Lower brightness, reduce saturation (remove blue sky day look), boost contrast */
}