/**
 * Age Gate Custom Overrides
 *
 * Handles layout fixes, content hiding for restricted users,
 * and custom branding styles.
 */

/* -------------------------------------------------------------------------- */
/* 1. Age Gate Variables & Root Styles
/* -------------------------------------------------------------------------- */
.age-gate {
    --ag-form-max-width: none !important;
    --ag-form-border: 0 !important;
    --ag-form-padding: 0 !important;
    --ag-form-margin: 0 !important;
    --ag-input-background-color: transparent !important;
    --ag-input-border: none !important;
    --ag-input-radius: 0 !important;
    --ag-input-border-width: 0 !important;
    --ag-input-color: #3f2b4f !important;
    --ag-input-text-size: inherit !important;
    --ag-input-padding: 0 !important;
    --ag-text-align: inherit !important;
    
    /* Prevent default height calculation from clipping content */
    --ag-form-max-height: none !important;
    max-height: none !important;
    
    /* Apply Brand Purple */
    color: #3f2b4f !important;
}

/* Enforce brand color on specific text elements */
.age-gate .title,
.age-gate .content,
.age-gate .legal-footer,
.age-gate a,
.age-gate .cookie-copy {
    color: #3f2b4f !important;
}

.age-gate a {
    text-decoration: underline;
    text-decoration-color: currentColor;
}

/* -------------------------------------------------------------------------- */
/* 2. Content Hiding & Layout (Restricted State)
/* -------------------------------------------------------------------------- */

/* Hide main site content when Age Gate is active */
body.agegate-page .navbar,
body.age-gate-page .navbar,
body.agegate-page footer,
body.age-gate-page footer,
body.age-restriction .navbar,
body.age-restriction footer,
body.age-restriction main,
body.age-restriction aside,
body.age-restriction .site-main,
body.age-restriction #search-content,
body.age-restriction #main,
body.age-restriction .reviews,
body.age-restriction .section-home,
/* Catch-all for other top-level containers to prevent scrolling issues */
body.age-restriction > div:not(.age-gate__wrapper):not(.age-gate):not(#page):not(.overlay-content):not(.age-gate-custom):not(.legal-modal-overlay) {
    display: none !important;
}

/* Hide default Age Gate backgrounds to ensure clean overlay */
body.age-restriction .age-gate__background-color,
body.age-restriction .age-gate__background {
    display: none !important;
}

/* Allow legal modal overlay to show above the Age Gate */
body.age-restriction .legal-modal-overlay {
    display: flex !important;
    z-index: 100001 !important;
}

/* Prevent body scrolling when restricted */
body.age-restriction {
    overflow: hidden !important;
}

/* Create a fixed, full-screen scrolling context for the Age Gate */
body.age-restriction .age-gate__wrapper {
    height: 100vh;
    overflow-y: auto;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
    padding: 0;
}

/* -------------------------------------------------------------------------- */
/* 3. Component Styling
/* -------------------------------------------------------------------------- */

/* Wrapper & Container */
#barefoot-age-gate.overlay-content {
    min-height: 100vh;
    position: relative;
}

body.agegate-page #barefoot-age-gate.overlay-content,
body.age-gate-page #barefoot-age-gate.overlay-content {
    padding-top: 130px;
}

.agegate-container {
    margin-top: 40px !important;
}

.age-gate__form {
    display: block;
}

.age-gate__form-elements {
    gap: 8px !important;
}

.age-gate__fields {
    margin: 0;
}

/* Logo Positioning */
.gate-logo {
    position: relative;
    display: block;
    max-width: 218px;
    z-index: 1100;
    /* Margin removed as requested */
}

.gate-logo svg {
    width: 100%;
    height: auto;
}

/* Footer Spacing */
body.age-restriction .legal-footer {
    padding-bottom: 2rem;
}

/* -------------------------------------------------------------------------- */
/* 4. Form Elements
/* -------------------------------------------------------------------------- */

/* Custom Select Dropdowns */
#barefoot-age-gate .custom-select {
    appearance: none !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 8px 10px !important;
    padding-right: 2.5rem !important;
    border: 1px solid #ced4da !important;
    border-radius: .25rem !important;
    height: calc(1.5em + .75rem + 2px) !important;
    padding: .375rem 1.75rem .375rem .75rem !important;
    text-align: left !important;
}

/* Submit Button */
.age-gate__submit {
    margin-bottom: 0;
}

.age-gate__button.btn.btn-pink {
    background-color: rgb(180, 7, 102);
    border: 2px solid rgb(180, 7, 102);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    margin: 24px 0;
    padding: 14px 32px;
}

/* Error Messages */
.age-gate__error {
    margin-top: 10px;
}

/* -------------------------------------------------------------------------- */
/* 5. Shared Components */
/* -------------------------------------------------------------------------- */

/* Keep search modal close icon sizing consistent without inline styles */
#search-content .close-modal svg {
    margin-top: -6px;
    width: 22px;
}