/* Base styles */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    background-color: #ffffff;
    color: #333;
}

/* Footer positioning for legal page */
html,
body.legal-page {
    height: 100%;
}

body.legal-page {
    display: flex;
    flex-direction: column;
}

/* Main content should grow to push footer to bottom */
body.legal-page .legal-section {
    flex: 1;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover {
    color: #9e7d46; /* gold accent on hover */
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1.5rem;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    z-index: 1000;
    transform: translateY(0);
    transition: transform 0.3s ease;
}

/* Hide navbar when scrolling down */
.navbar.navbar-hidden {
    transform: translateY(-100%);
}

/* Default styling for the language selector in the navigation bar */
.navbar #lang-select {
    padding: 0.3rem;
    font-size: 0.9rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    /* Position the language selector above the contact link on desktop.
       Absolute positioning allows it to float independently within the
       navigation bar. */
    position: absolute;
    top: 0.4rem;
    right: 1rem;
    margin: 0;
    min-width: 4rem;
    z-index: 2;
}

.logo {
    font-weight: bold;
    /* Reset font size when using an image logo */
    font-size: 1.8rem;
    letter-spacing: 0.05em;
}

/* Hamburger menu button - hidden on desktop */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1102;
    position: relative;
}

.hamburger-btn span {
    width: 100%;
    height: 3px;
    background-color: #333;
    border-radius: 2px;
    transition: all 0.3s ease;
    position: absolute;
}

.hamburger-btn span:nth-child(1) {
    top: 3px;
}

.hamburger-btn span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.hamburger-btn span:nth-child(3) {
    bottom: 3px;
}

/* Hamburger animation when active */
.hamburger-btn.active span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.hamburger-btn.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-btn.active span:nth-child(3) {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

/* Sidebar overlay */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1100;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

/* Navigation sidebar */
.nav-sidebar {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100vh;
    background-color: #fff;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    z-index: 1101;
    transition: left 0.3s ease;
    overflow-y: auto;
    padding-top: 1rem;
}

.nav-sidebar.active {
    left: 0;
}

/* Language selector in sidebar */
.sidebar-lang-wrapper {
    display: none;
    padding: 1rem 1.5rem;
    text-align: right;
}

.sidebar-lang-wrapper select {
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
}

/* Sidebar navigation list - vertical layout */
.nav-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.nav-sidebar ul li {
    border-bottom: 1px solid #f0f0f0;
}

.nav-sidebar ul li a {
    display: block;
    padding: 1rem 1.5rem;
    color: #333;
    text-decoration: none;
    font-size: 1rem;
    transition: background-color 0.2s ease;
}

.nav-sidebar ul li a:hover {
    background-color: #f5f5f5;
}

/* Desktop navigation */
.nav-desktop ul {
    display: flex;
    list-style: none;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    -ms-overflow-style: none; /* hide scrollbar on IE/Edge */
    scrollbar-width: none;    /* hide scrollbar on Firefox */
}

/* Hide navigation scrollbar for WebKit browsers */
.nav-desktop ul::-webkit-scrollbar {
    display: none;
}

.nav-desktop li {
    font-size: 0.95rem;
    flex: 0 0 auto;
}

.nav-desktop li a {
    text-decoration: none;
    color: #333;
    font-size: 1.05rem;
    padding: 0.4rem 0.8rem;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.nav-desktop li a:hover {
    border-bottom-color: #666;
}

/* Hide hamburger, mobile language selector, and sidebar on desktop */
.hamburger-btn,
.lang-select-mobile-navbar,
.nav-sidebar,
.sidebar-overlay {
    display: none;
}



/* Hero section */
.hero {
    position: relative;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Remove the static background image and instead apply a tinted overlay */
    background-image: none;
    /* Semi-transparent overlay to improve text contrast over the video */
    background-color: rgba(0, 0, 0, 0.35);
    filter: none;
    z-index: -1;
}

/* Video element for hero background */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.hero-content h1 {
    font-size: 2.8rem;
    margin-bottom: 0.5rem;
}
.hero-content p {
    font-size: 1.25rem;
    font-weight: 300;
}

/* Smaller tagline below the hero subtitle */
.hero-content .hero-location {
    font-size: 0.75rem;
    margin-top: 0.3rem;
    font-weight: 400;
}

/* About section */
.about {
    padding: 4rem 2rem;
    background-color: #f5f5f5;
}
.about-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
}
.about-image {
    flex: 1 1 300px;
    text-align: center;
}
.about-image img {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.about-text {
    flex: 1 1 400px;
}
.about-text h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 2rem;
    color: #333;
}
.about-text p {
    margin-bottom: 0.75rem;
    font-size: 1rem;
    color: #555;
}

/* Champagnes section */
.champagnes {
    padding: 4rem 2rem;
}
.champagnes h2 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 2rem;
}
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}
.product-card {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    transform: translateY(-4px);
}
.product-card img {
    /* Show the full bottle and label without cropping */
    width: 100%;
    height: 360px;
    object-fit: contain;
    background-color: #fff;
    padding: 1rem;
}
.product-card-content {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.product-card h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.2rem;
    color: #333;

    /* Allow long product names to wrap onto multiple lines on small screens */
    white-space: normal;
    word-break: break-word;
    overflow: visible;
}
.product-card p {
    flex: 1;
    font-size: 0.95rem;
    color: #666;
}

/* Contact section */
.contact {
    background-color: #f5f5f5;
    padding: 4rem 2rem;
    text-align: center;
}
.contact h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
}
.contact-details {
    max-width: 600px;
    margin: 0 auto;
    font-size: 1rem;
    color: #555;
}
.contact-details p {
    margin: 0.5rem 0;
}

/* Footer */
.footer {
    background-color: #222;
    color: #ccc;
    text-align: center;
    padding: 1rem;
}

/* Use Calibri Light for main section headings (bold) */
.about h2,
.champagnes h2,
.history h2,
.work h2,
.partners h2,
.contact h2,
.quiz h2,
.generations-title,
.genealogy-info h3 {
    font-family: "Calibri Light", "Calibri", Arial, sans-serif;
    font-weight: bold;
}

/* Adjust logo image size */
.logo img {
    /* Reduce the logo height slightly to free horizontal space so that
       navigation items fit on a single line on desktop screens. */
    height: 5rem;
    width: auto;
    display: block;
}

/* Work section */
.work {
    padding: 4rem 2rem;
    background-color: #ffffff;
}
.work h2 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 1rem;
}
.work-intro {
    max-width: 800px;
    margin: 0 auto 2rem auto;
    text-align: center;
    font-size: 1rem;
    color: #555;
}
.work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}
.work-item {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.work-item:hover {
    transform: translateY(-4px);
}
.work-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.work-item h3 {
    padding: 1rem;
    font-size: 1.1rem;
    text-align: center;
    color: #333;
    margin: 0;
}

/* Partners section */
.partners {
    padding: 4rem 2rem;
    background-color: #f5f5f5;
}
.partners h2 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 1rem;
}
.partners-intro {
    max-width: 800px;
    margin: 0 auto 2rem auto;
    text-align: center;
    font-size: 1rem;
    color: #555;
}
.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}
.partners-country h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: #333;
}
.partners-country ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.partners-country li {
    margin-bottom: 0.3rem;
    color: #555;
    font-size: 0.95rem;
}

/* Modal styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}
.modal.open {
    display: flex;
}
.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
}
.modal-box {
    position: relative;
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    max-width: 600px;
    margin: 1rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    overflow-y: auto;
    max-height: 80vh;
    -webkit-overflow-scrolling: touch;
    z-index: 2001;
}
.modal-title {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.6rem;
    color: #333;
}
.modal-body {
    line-height: 1.5;
    color: #444;
    font-size: 1rem;
}
.modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: #999;
    cursor: pointer;
}
.modal-close:hover {
    color: #333;
}

/* History section */
.history {
    padding: 4rem 2rem;
    background-color: #ffffff;
}
.history h2 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 1rem;
}
.history-intro {
    max-width: 960px;
    margin: 0 auto 2rem auto;
    text-align: center;
    color: #555;
    font-size: 1rem;
}
.timeline {
    max-width: 960px;
    margin: 0 auto 2.5rem auto;
    border-left: 2px solid #eee;
    padding-left: 1.125rem;
    display: grid;
    gap: 1rem;
}
.t-item {
    position: relative;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 0.75rem 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.t-item::before {
    content: "";
    position: absolute;
    left: -1.35rem;
    top: 0.9rem;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background-color: #9e7d46;
    box-shadow: 0 0 0 3px #fff;
}
.t-year {
    font-weight: 700;
    color: #9e7d46;
    margin-right: 0.5rem;
}
.genealogy-card {
    max-width: 960px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}
.genealogy-img {
    display: block;
    width: 100%;
    height: auto;
    /* Harmonise colors: apply warm filter */
    /* Apply a subtler warm filter and brighten to better match the light site design */
    filter: sepia(10%) saturate(70%) hue-rotate(-5deg) brightness(1.15);

    /* Slight rounding of the tree image to soften edges */
    border-radius: 12px;
}
.genealogy-card figcaption {
    padding: 0.625rem 0.875rem;
    color: #555;
    text-align: center;
    font-size: 0.95rem;
}

/* Genealogy layout */
.genealogy-section {
    /* Use a flex layout so the tree image sits to the left and the text to the right */
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    flex-wrap: nowrap;
    /* Limit width to reduce whitespace on large screens */
    max-width: 1260px;
    margin: 0 auto 2.5rem auto;
}
/* Genealogy image wrapper inside the flex container */
.genealogy-section .genealogy-card {
    /* Set a fixed basis so the image doesn’t dominate the row */
    flex: 0 0 320px;
    max-width: 320px;
    margin: 0;
}
/* Information column for genealogy explanation */
.genealogy-info {
    flex: 1 1 auto;
    max-width: none;
}
.genealogy-info h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    color: #333;
}
.genealogy-info p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
}

/* Generations cards */
.generations {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1400px;
    margin: 2rem auto 0;
}
.generation-card {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.05);
    padding: 1rem;
    text-align: center;
}
.generation-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    /* Focus on the upper part of the image so faces are centered */
    object-position: center top;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    filter: grayscale(20%) brightness(1.1);
}
.generation-card h4 {
    margin: 0.5rem 0 0.25rem;
    font-size: 1.2rem;
    color: #333;
}
.generation-card p {
    font-size: 0.95rem;
    color: #555;
    margin: 0;
}

/* Title for generations section */
.generations-title {
    text-align: center;
    font-size: 1.8rem;
    margin: 3rem auto 1rem;
    color: #333;
}

@media (max-width: 768px) {
    .genealogy-section {
        /* On small screens stack the image and text vertically */
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .genealogy-section .genealogy-card {
        flex: 0 0 auto;
        max-width: 420px;
    }
    .genealogy-info {
        max-width: none;
        width: 100%;
    }
    /* Display generations in 2 columns on mobile */
    .generations {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .generation-card {
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
    }

    .generation-img {
        /* Fixed height for uniform card sizes on mobile */
        width: 100%;
        height: 160px;
        object-fit: cover;
        object-position: center top;
        border-radius: 6px;
        margin-bottom: 0.5rem;
    }

    .generation-card h4 {
        font-size: 1rem;
        margin: 0.25rem 0;
    }

    .generation-card p {
        font-size: 0.8rem;
        line-height: 1.3;
        margin: 0;
    }

    /* Mobile navigation: sidebar with hamburger menu */
    .navbar {
        padding: 0.5rem 1rem;
        justify-content: flex-start;
        gap: 0.5rem;
    }

    /* Hide desktop nav on mobile */
    .nav-desktop {
        display: none !important;
    }

    /* Show hamburger button on mobile */
    .hamburger-btn {
        display: flex !important;
        order: 1;
        flex-shrink: 0;
    }

    /* Position logo in the center on mobile */
    .navbar .logo {
        order: 2;
        flex-shrink: 0;
    }

    /* Show mobile language selector in navbar (to the right) */
    .lang-select-mobile-navbar {
        display: block !important;
        order: 3;
        padding: 0.3rem 0.4rem;
        font-size: 0.85rem;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #fff;
        cursor: pointer;
        flex-shrink: 0;
        margin-left: auto;
    }

    /* Hide desktop language selector on mobile */
    .lang-select-desktop {
        display: none !important;
    }

    /* Show mobile sidebar and overlay (sidebar is off-screen until active) */
    .nav-sidebar,
    .sidebar-overlay {
        display: block !important;
    }

    /* Hide mobile language selector in sidebar (no longer needed) */
    .sidebar-lang-wrapper {
        display: none;
    }
}

@media (max-width: 768px) {
    .history h2 {
        font-size: 1.9rem;
    }
    .history-intro {
        padding: 0 1rem;
        font-size: 0.9rem;
    }
    .timeline {
        gap: 0.75rem;
    }
    .t-item {
        padding: 0.625rem 0.875rem;
    }
}

@media (max-width: 768px) {
    .work-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .partners-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    .modal-box {
        max-width: 90%;
        max-height: 90vh;
        margin: 0.5rem;
        padding: 1.5rem;
    }
    .modal-title {
        font-size: 1.4rem;
    }
    .modal-body {
        font-size: 0.95rem;
    }
}

/* Product medals container and images for the product modal */
.product-medals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}
.product-medals img {
    width: 60px;
    height: auto;
    object-fit: contain;
}

/* Ecology section styles */
.eco {
    padding: 4rem 2rem;
    background-color: #f5f5f5;
}
.eco h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: #333;
}
.eco-content {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
}
.eco-images {
    /* Display certification images side by side */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.eco-images img {
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.eco-text {
    /* Remove flex properties since this container is no longer within a flex row */
    max-width: 1100px;
    margin: 0 auto 2rem;
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
}
@media (max-width: 768px) {
    .eco-content {
        flex-direction: column;
    }
}

/* Quiz section styles */
.quiz {
    padding: 4rem 2rem;
    background-color: #ffffff;
}
.quiz h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 1rem;
}
/* Button style for each answer option in the sequential quiz */
.quiz-option {
    display: block;
    margin: 0.5rem auto;
    padding: 0.6rem 1.2rem;
    width: 100%;
    max-width: 320px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f5f5f5;
    color: #333;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.quiz-option:hover {
    background-color: #eaeaea;
}
/* Feedback message for correct/incorrect and final score */
.quiz-feedback {
    text-align: center;
    font-size: 1.1rem;
    margin-top: 1rem;
    color: #333;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Ensure the language selector and contact link stack properly on small
       screens.  The language selector should appear at the top of its
       container and align to the left, so it remains visible when the
       navigation bar becomes horizontally scrollable. */
    .hero-content h1 {
        font-size: 2.2rem;
    }
    .hero-content p {
        font-size: 1rem;
    }
    .about-container {
        flex-direction: column;
        text-align: center;
    }
    .about-text {
        padding: 0 1rem;
    }
    .products-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    /* On small screens, position the language selector at the top right
       of the navigation bar (matching desktop placement). */
    .navbar #lang-select {
        right: 1rem;
        left: auto;
        top: 0.4rem;
    }
}

/* ------------------------------------------------------------------ */
/* Legal notice link styling and swipe hint (appended styles)           */
/* These styles ensure the legal notice link and the swipe hint appear */
/* elegantly and are properly aligned on both desktop and mobile.      */

/* Style for the legal notice link placed under the quiz */
.legal-link {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.legal-link a {
    text-decoration: underline;
    color: #333;
}

@media (max-width: 768px) {
    /* Force the champagne cards into three columns on mobile for a 3x3 grid */
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

    .product-card {
        border-radius: 6px;
    }

    .product-card img {
        height: 180px !important;
        padding: 0.3rem !important;
    }

    .product-card-content {
        padding: 0.4rem 0.5rem;
    }

    .product-card h3 {
        font-size: 0.75rem;
        margin: 0 0 0.25rem 0;
        line-height: 1.1;
    }

    .product-card p {
        font-size: 0.65rem;
        line-height: 1.2;
    }
}

/* Age verification overlay styles */
.age-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 10000;
    display: none;
    justify-content: center;
    align-items: center;
}

.age-overlay .overlay-content {
    text-align: center;
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 90%;
}

.age-overlay .overlay-content select {
    margin-bottom: 1rem;
    padding: 0.5rem;
    font-size: 1rem;
}

.age-overlay .overlay-content img.overlay-logo {
    max-width: 200px;
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
}

.age-overlay .overlay-content input#age-input {
    width: 100%;
    padding: 0.5rem;
    font-size: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.age-overlay .overlay-content button#age-submit {
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.age-overlay .overlay-content p#underage-message {
    margin-top: 1rem;
    color: red;
    font-weight: bold;
}