/**
 * Airgun Age Verification — Popup Styles
 *
 * Dynamic colour values (text, checkbox, button) are injected as inline CSS
 * by wp_add_inline_style() in airgun-age-verification.php.
 *
 * Key selectors for custom CSS override in admin settings:
 *   #aav-overlay     — full-screen backdrop
 *   .aav-popup       — popup card
 *   .aav-title       — "Age Verification" heading
 *   .aav-question    — "Are you over 18?" paragraph
 *   .aav-btn-confirm — Continue button
 *   .aav-message     — error / success message area
 */

/* ==========================================================================
   Overlay — covers the entire viewport and blocks interaction with the page
   ========================================================================== */
.aav-overlay {
    position: fixed;
    inset: 0;                       /* top/right/bottom/left: 0 in one declaration */
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.88);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-sizing: border-box;
    padding: 16px;
}

/* ==========================================================================
   Popup card
   ========================================================================== */
.aav-popup {
    background: linear-gradient(150deg, #1a1a2e 0%, #16213e 55%, #0f3460 100%);
    border-radius: 14px;
    padding: 44px 40px 36px;
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-sizing: border-box;
    position: relative;

    /* Default text color — overridden by inline CSS from settings */
    color: #ffffff;
}

/* ==========================================================================
   Logo
   ========================================================================== */
.aav-logo {
    margin-bottom: 20px;
}

.aav-logo img {
    max-width: 180px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* ==========================================================================
   Heading & question text
   ========================================================================== */
.aav-title {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1.2;
}

.aav-question {
    font-size: 19px;
    margin: 0 0 28px;
    opacity: 0.92;
    font-weight: 400;
}

/* ==========================================================================
   Yes / No radio options — styled as custom checkmarks
   ========================================================================== */
.aav-options {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 36px;
    margin-bottom: 26px;
    flex-wrap: wrap;
}

.aav-option {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 17px;
    font-weight: 500;
    user-select: none;
    position: relative;
    padding: 6px 0;
    transition: opacity 0.15s ease;
}

.aav-option:hover {
    opacity: 0.85;
}

/* Hide the native radio input visually but keep it accessible */
.aav-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
}

/* Custom circular checkmark */
.aav-checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    position: relative;
}

/* Inner dot — shown when radio is checked */
.aav-checkmark::after {
    content: '';
    display: block;
    width: 11px;
    height: 11px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Checked state — background and dot animated in */
.aav-option input[type="radio"]:checked + .aav-checkmark::after {
    opacity: 1;
    transform: scale(1);
}

/* Keyboard focus ring for accessibility */
.aav-option input[type="radio"]:focus-visible + .aav-checkmark {
    outline: 3px solid rgba(255, 255, 255, 0.6);
    outline-offset: 3px;
}

/* ==========================================================================
   Message area (error on No / prompt to select)
   ========================================================================== */
.aav-message {
    border-radius: 8px;
    padding: 13px 18px;
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
}

/* Error style */
.aav-message.aav-message--error {
    background: rgba(230, 57, 70, 0.18);
    border: 1px solid rgba(230, 57, 70, 0.5);
    color: #ff7b86;
}

/* Prompt style (no option selected) */
.aav-message.aav-message--prompt {
    background: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.4);
    color: #ffd657;
}

/* ==========================================================================
   Continue button
   ========================================================================== */
.aav-btn-confirm {
    display: block;
    width: 100%;
    padding: 15px 20px;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    transition: filter 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 22px;

    /* Default background — overridden by inline CSS from settings */
    background-color: #e63946;
}

.aav-btn-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.aav-btn-confirm:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Disabled state — shown while "No" is active to prevent further interaction */
.aav-btn-confirm:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ==========================================================================
   Disclaimer text
   ========================================================================== */
.aav-disclaimer {
    font-size: 12px;
    opacity: 0.55;
    margin: 0;
    line-height: 1.5;
}

.aav-disclaimer a {
    color: inherit;
    text-decoration: underline;
}

/* ==========================================================================
   Responsive — small screens
   ========================================================================== */
@media (max-width: 520px) {
    .aav-popup {
        padding: 32px 22px 28px;
    }

    .aav-title {
        font-size: 21px;
    }

    .aav-question {
        font-size: 17px;
    }

    .aav-options {
        gap: 24px;
    }
}