/* Background Animation */
.bg-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: url('https://images.unsplash.com/photo-1491002052546-bf38f186af56?q=80&w=2108&auto=format&fit=crop') no-repeat center center/cover;
    filter: blur(5px) brightness(0.9);
    transform: scale(1.1);
}

/* Install App Button Styles */
.install-app-btn {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4);
    transition: all 0.3s ease;
    align-items: center;
    gap: 10px;
    margin: 1.5rem auto 0;
    /* Add top margin to separate from other elements */
    width: fit-content;
    z-index: 10;
    position: relative;
    display: flex;
    justify-content: center;
}

.install-app-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.6);
    background: linear-gradient(135deg, #38bdf8 0%, #0369a1 100%);
}

.install-app-btn i {
    font-size: 1.1rem;
}

.footer-install-btn {
    margin: 0 auto 1.5rem;
    /* Margin for footer button */
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
}

.footer-install-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Global Refinements */
:root {
    --primary-color: #0f172a;
    --secondary-color: #334155;
    --accent: #0ea5e9;
    --text-color: #ffffff;
    /* Pure white base */
    --card-bg: rgba(30, 41, 59, 0.85);
    /* Slightly more opaque background */
    --card-hover: rgba(51, 65, 85, 0.95);
    --skeleton-base: #1e293b;
    --skeleton-highlight: #334155;
    --nav-height: 60px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    color: var(--text-color);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: var(--primary-color);
    -webkit-font-smoothing: antialiased;
    padding-top: var(--nav-height);
    /* Prevent content from hiding behind fixed header */
}

/* Minimalist Header */
header {
    text-align: center;
    padding: 0 1rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: var(--nav-height);
}

/* Navigation */
.main-nav {
    position: absolute;
    /* Take out of flow to let H1 center */
    left: 0;
    top: 0;
    width: auto;
    height: 100%;
    margin: 0;
}

.nav-links {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.nav-links li a {
    color: #cbd5e1;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: color 0.3s;
}

.nav-links li a:hover {
    color: var(--accent);
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 15px;
    padding: 5px;
}

header h1 {
    font-size: 1.25rem;
    /* Minimal size */
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.5px;
    color: #ffffff;
    text-shadow: none;
}

.hero-subtitle {
    display: block;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    font-weight: 300;
}

.site-description-container {
    max-width: 800px;
    margin: 0 auto 1rem;
    /* Reduced from 2rem */
    padding: 0 1rem;
}

.site-description {
    font-size: 0.9rem;
    /* Reduced from 1rem */
    line-height: 1.4;
    /* Reduced from 1.6 */
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.2);
    /* Slight background for readability */
    padding: 1rem;
    /* Reduced from 1.5rem */
    border-radius: 12px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.header-container {
    display: flex;
    justify-content: center;
    /* Center the logo since menu is gone */
    align-items: center;
    width: 100%;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Space between icon and text */
    font-weight: 700;
    font-size: 1.25rem;
    text-align: left;
    /* Ensure text aligns left relative to icon */
}

.logo i {
    font-size: 1.5rem;
    /* Make icon slightly larger */
    color: var(--accent);
}

.logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}

.logo-main {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #ffffff;
}

.logo-sub {
    font-size: 0.75rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Ensure Live Indicator is centered */
.live-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 2rem auto;
    width: fit-content;
    padding: 8px 16px;
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 50px;
    color: #34d399;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
}

.pulse {
    width: 8px;
    height: 8px;
    background-color: #34d399;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(52, 211, 153, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
    }
}

/* Minimal Cards */
.card {
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Media Container & Skeletons */
.card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background-color: var(--skeleton-base);
    overflow: hidden;
}

/* Skeleton Animation */
.skeleton::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0,
            rgba(255, 255, 255, 0.1) 20%,
            rgba(255, 255, 255, 0.2) 60%,
            /* Brighter shimmer */
            rgba(255, 255, 255, 0));
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

.card-media img,
.card-media iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    display: block;
    opacity: 0;
    /* Hidden initially for fade-in */
    transition: opacity 0.5s ease-in;
}



.fullscreen-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: background 0.2s, transform 0.2s;
    backdrop-filter: blur(4px);
}

.fullscreen-btn:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.1);
}

.fullscreen-btn i {
    font-size: 1rem;
}

/* Class to reveal content */
.loaded img,
.loaded iframe {
    opacity: 1;
}

.loaded.skeleton::after {
    display: none;
    /* Stop animation when loaded */
}

/* Card Content */
.card-content {
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.card-title {
    font-size: 1.3rem;
    /* Bigger */
    font-weight: 800;
    /* Extra Bold */
    margin: 0 0 0.25rem 0;
    color: #ffffff;
    /* Pure White */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
    /* Deep black shadow for contrast */
    letter-spacing: 0.5px;
}

.card-location {
    font-size: 0.95rem;
    color: #f8fafc;
    /* Almost pure white (Slate-50) */
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    /* Medium weight */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 8px;
    background: rgba(16, 185, 129, 0.15);
    /* Slightly stronger bg */
    color: #34d399;
    /* Bright Green */
}

/* Buttons */
.btn {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.2);
    white-space: nowrap;
}

.btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Drive Button in Header */
.drive-btn {
    background: var(--accent);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.4);
    transition: transform 0.2s;
}

.drive-btn:active {
    transform: scale(0.95);
}

.map-btn {
    background: #f59e0b;
    /* Amber/Orange for map */
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.4);
    transition: transform 0.2s;
}

.map-btn:active {
    transform: scale(0.95);
}

.group-header-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.map-btn-wide {
    background: #f59e0b;
    /* Amber/Orange for map */
    color: white;
    padding: 8px 16px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.4);
    transition: transform 0.2s;
    font-weight: 600;
    gap: 8px;
    font-size: 0.9rem;
}

.map-btn-wide:active {
    transform: scale(0.95);
}

.map-button-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.action-buttons {
    display: flex;
    gap: 10px;
}

.group-titles-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    /* Allow wrapping on small screens */
    justify-content: center;
    /* Center content */
}

/* FABs */
.fab-btn {
    /* Existing FAB styles + updates */
    width: 56px;
    height: 56px;
    border-radius: 16px;
    /* Squircle */
    background: #1e293b;
    /* Solid dark color instead of transparent */
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    /* Stronger shadow */
}

.fab-btn i {
    font-size: 1.25rem;
}

.share-btn {
    background: #0ea5e9;
    /* Blue for share */
}

/* Responsiveness */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }

    .card-media iframe {
        pointer-events: all;
        /* Re-enable interaction if needed, or usually better off for scroll */
    }

    .group-header-row {
        margin-bottom: 1rem;
        gap: 15px;
    }

    .group-title {
        font-size: 1.25rem;
        color: #fff;
    }

    .weather-badge {
        font-size: 0.85rem;
        padding: 0.6rem 1rem;
        width: 100%;
        justify-content: center;
    }
}

body {
    /* Enhance text readability on mobile */
    -webkit-font-smoothing: antialiased;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 10;
}

/* Locations Group */
.location-group {
    margin-bottom: 4rem;
}

/* Group Titles & Weather */
.group-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 10px;
}

.group-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    /* Bright White */
    border-left: 4px solid var(--accent);
    padding-left: 1rem;
    margin-bottom: 0;
    /* Override generic margin */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Weather Badges */
.weather-badge {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* Stronger border */
    padding: 0.5rem 1rem;
    border-radius: 12px;
    font-weight: 600;
    color: #fff;
    /* White text instead of accent color */
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    animation: fadeIn 1s ease-out;
}

.weather-temp {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-weight: 700;
}

.weather-wind {
    font-size: 0.9rem;
    opacity: 0.9;
    /* Higher opacity */
    display: flex;
    align-items: center;
    gap: 6px;
    color: #e2e8f0;
}

.section-description {
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid var(--accent);
    padding: 1rem;
    margin-bottom: 2rem;
    border-radius: 0 12px 12px 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #e2e8f0;
    /* Readable light gray */
    max-width: 800px;
}

/* Grid */
.webcam-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
    width: 100%;
    /* Ensure full width availability */
}

/* Cards */
.card {
    background: var(--card-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Prevent grid blowout from iFrames */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.25);
}

.card-media {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9 Aspect Ratio */
    background: linear-gradient(135deg, #1e293b, #0f172a);
    /* Fallback gradient */
}

.card-media img,
.card-media iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
}

.card-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}

.card-location {
    font-size: 0.9rem;
    color: #78909c;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-live {
    background: #e0f2f1;
    color: #00695c;
}

.status-link {
    background: #e1f5fe;
    color: #0277bd;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem;
    border-radius: 12px;
    background: linear-gradient(45deg, var(--secondary-color), var(--primary-color));
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s ease;
    border: none;
    cursor: pointer;
    margin-top: auto;
}

.btn:hover {
    opacity: 0.9;
}

.btn svg {
    margin-right: 0.5rem;
}

/* Footer */
footer {
    text-align: center;
    padding: 2rem;
    color: #546e7a;
    font-size: 0.9rem;
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.4);
    margin-top: 4rem;
}

/* Responsive */

/* Cookie Banner */
.cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(150%);
    /* Start hidden */
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    /* Stack vertically mostly */
    align-items: flex-start;
    gap: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    z-index: 2000;
    /* Ensure on top of everything */
    width: 90%;
    max-width: 500px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 80vh;
    /* Prevent overflow on small screens */
    overflow-y: auto;
    /* Allow internal scrolling if content is huge */
}

.cookie-banner.show {
    transform: translateX(-50%) translateY(0);
}

/* Close button for cookie banner */
.cookie-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
}

.cookie-close:hover {
    color: #fff;
}

.cookie-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #e2e8f0;
    padding-right: 1.5rem;
    /* Space for close button */
}

.cookie-text a {
    color: var(--accent);
    text-decoration: underline;
}

.cookie-btn {
    background: var(--accent);
    color: white;
    border: none;
    padding: 0.5rem 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    transition: transform 0.2s;
}

.cookie-btn:hover {
    transform: scale(1.05);
}

/* Floating Action Buttons */
.fab-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 900;
}

.fab-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fab-btn:hover {
    transform: scale(1.1);
}

.scroll-btn {
    background: rgba(255, 255, 255, 0.2);
    /* Glassy default */
    backdrop-filter: blur(5px);
    opacity: 0;
    /* Hidden by default */
    pointer-events: none;
}

.scroll-btn.visible {
    opacity: 1;
    pointer-events: all;
}

.install-btn {
    background: var(--accent);
    animation: bounceIn 0.5s backwards;
}

@keyframes bounceIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    80% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Responsive Improvements */
@media (max-width: 768px) {
    /* header { ... } Removed empty rule */

    .menu-toggle {
        display: block;
    }

    .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(15, 23, 42, 0.98);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        transform: translateY(-100%);
        transition: transform 0.3s ease-in-out;
        z-index: 101;
    }

    .nav-links.active {
        transform: translateY(0);
    }

    .nav-links li a {
        font-size: 1.5rem;
    }

    .fab-container {
        bottom: 20px;
        right: 20px;
    }

    .fab-btn {
        width: 45px;
        height: 45px;
        font-size: 1rem;
    }

    body {
        /* Enhance text readability on mobile */
        -webkit-font-smoothing: antialiased;
    }

    h1 {
        font-size: 2.5rem;
        line-height: 1.2;
    }

    .container {
        padding: 1rem 0.5rem;
        /* Reduce padding to give more width to content */
    }

    .card {
        border-radius: 16px;
        /* Slightly smaller radius for mobile */
        margin-bottom: 1rem;
    }

    .card-content {
        padding: 1.25rem;
    }

    /* Larger touch targets */
    .btn {
        padding: 1rem;
        font-size: 1rem;
        min-height: 48px;
        /* Standard minimum touch target */
    }

    .cookie-banner {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        padding: 1.5rem;
    }

    .cookie-text {
        max-width: 100%;
    }

    .cookie-btn {
        width: 100%;
        margin-left: 0;
    }

    footer {
        padding-bottom: 5rem;
        /* Space for cookie banner if needed */
    }
}

/* Video Placeholder & Click-to-Play */
.video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: #000;
}

.placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.video-placeholder:hover .placeholder-img {
    opacity: 0.6;
}

.play-icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.9);
    z-index: 2;
    transition: transform 0.2s, color 0.2s;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.video-placeholder:hover .play-icon-overlay {
    transform: translate(-50%, -50%) scale(1.1);
    color: #fff;
}

/* --- Weather Modal --- */
.weather-modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.weather-modal.show {
    display: flex;
    opacity: 1;
}

.weather-modal-content {
    background: rgba(30, 41, 59, 0.95);
    /* Darker background for contrast */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 2rem;
    width: 90%;
    max-width: 500px;
    text-align: center;
    position: relative;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    color: white;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.weather-modal.show .weather-modal-content {
    transform: translateY(0);
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.7);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
}

.close-modal:hover {
    color: white;
}

#modalLocationName {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #fff;
}

.forecast-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.forecast-day {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem 0.5rem;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.forecast-date {
    font-size: 0.9rem;
    opacity: 0.8;
}

.forecast-icon {
    font-size: 2rem;
    margin: 5px 0;
}

.forecast-temps {
    font-size: 1rem;
    font-weight: 600;
}

.forecast-min {
    opacity: 0.6;
    font-size: 0.9rem;
    margin-left: 5px;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .forecast-container {
        flex-direction: column;
        /* Stack on very small screens */
    }

}

/* --- Facebook Feed (Collapsible) --- */
.fb-feed-details {
    margin-bottom: 2rem;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    /* White background for the whole block */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.fb-feed-summary {
    list-style: none;
    /* Remove default triangle */
    padding: 1rem 1.5rem;
    background: #1877F2;
    /* Facebook Blue */
    color: white;
    font-weight: 700;
    cursor: pointer;
    display: flex;

    align-items: center;
    justify-content: space-between;
    transition: background 0.2s;
}

.fb-feed-summary::-webkit-details-marker {
    display: none;
    /* Chrome/Safari */
}

.fb-feed-summary:hover {
    background: #166fe5;
}

.fb-feed-summary span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
}

.arrow-icon {
    transition: transform 0.3s ease;
}

.fb-feed-details[open] .arrow-icon {
    transform: rotate(180deg);
}

.fb-feed-content {
    padding: 1rem;
    display: flex;
    justify-content: center;
    background: #f0f2f5;
    /* Light gray facebook-like bg */
}

.fb-page-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow-x: hidden;
    max-width: 100vw;
}

.fb-page iframe {
    max-width: 100% !important;
}

/* --- Desktop Specific Tweaks --- */
@media (min-width: 769px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
    }

    /* Constrain the collapsible feed width on large screens */
    .fb-feed-details {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }

    /* Enforce 3-column layout using Flexbox for perfect centering of orphan items */
    .webcam-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem;
    }

    /* 
       Calculate width for exactly 3 items per row with 2rem gap.
       Formula: (100% - total_gap_width) / 3
       Total gap width = 2 gaps * 2rem = 4rem
    */
    .card {
        width: calc((100% - 4rem) / 3);
        max-width: none;
        flex-grow: 0;
        flex-shrink: 0;
    }

    /* --- Centering for Ski Slope Sections (Desktop) --- */
    #piste-camigliatello .group-header-row,
    #piste-lorica .group-header-row,
    #aspromonte .group-header-row,
    #piste-palumbo .group-header-row,
    #altre-palumbo .group-header-row {
        justify-content: center;
        text-align: center;
    }

    #piste-camigliatello .group-title,
    #piste-lorica .group-title,
    #aspromonte .group-title,
    #piste-palumbo .group-title,
    #altre-palumbo .group-title {
        border-left: none;
        border-bottom: 4px solid var(--accent);
        padding-left: 0;
        padding-bottom: 0.5rem;
    }

    #piste-camigliatello .section-description,
    #piste-lorica .section-description,
    #aspromonte .section-description,
    #piste-palumbo .section-description,
    #altre-palumbo .section-description {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        border-left: none;
        border-top: 3px solid var(--accent);
        border-radius: 12px;
    }

    /* Standardize width for all Ski Sections to ensure identical card sizes */
    #piste-camigliatello,
    #piste-lorica,
    #aspromonte,
    #piste-palumbo,
    #altre-palumbo {
        max-width: 1136px;
        /* Matched to Camigliatello's computed width */
        margin-left: auto;
        margin-right: auto;
    }
}

/* Hide weather badge in the centered header layout if it disrupts symmetry? 
       No, let's keep it but it might look slightly off if not handled. 
       For now, Flexbox centering will put them side-by-side. */


/* Card Header Flex Wrapper */
.card-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.card-header-flex .card-title {
    margin-bottom: 0;
    /* Remove bottom margin as wrapper handles spacing */
}

/* Small Drive Button (Car Icon) */
.drive-btn-small {
    background-color: var(--accent);
    color: white;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.9rem;
    text-decoration: none;
    transition: transform 0.2s, background-color 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    flex-shrink: 0;
}

.drive-btn-small:hover {
    transform: scale(1.05);
    background-color: #0284c7;
    color: white;
}

/* Play Icon Overlay for Static Images */
.play-icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* Let clicks pass through to the link */
    transition: background-color 0.3s, transform 0.3s;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 5;
}

.img-link-wrapper:hover .play-icon-overlay {
    background-color: rgba(0, 0, 0, 0.7);
    transform: translate(-50%, -50%) scale(1.1);
}

.play-icon-overlay i {
    color: white;
    font-size: 24px;
    margin-left: 4px;
    /* Optical centering for play icon */
}

.group-header-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}