/**
 * Advanced Age Verification Popup - front end.
 */

:root {
    --avp-bg-overlay: rgba(10, 10, 12, 0.85);
    --avp-bg-popup: #1a1b20;
    --avp-text-main: #ffffff;
    --avp-text-muted: #9ca3af;
    --avp-primary: #10b981;
    --avp-primary-hover: #059669;
    --avp-border: #374151;
    --avp-border-light: rgba(255, 255, 255, 0.1);
    --avp-danger: #ef4444;
    --avp-input-bg: #272831;
    --avp-radius-popup: 24px;
    --avp-radius-btn: 12px;
}

/* Overlay & animations */
#avp-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--avp-bg-overlay);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999999;
    padding: 20px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
#avp-overlay.avp-show { opacity: 1; visibility: visible; }
#avp-overlay.avp-hiding { opacity: 0; }

/* Popup */
#avp-popup {
    background: var(--avp-bg-popup);
    border: 1px solid var(--avp-border-light);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
    border-radius: var(--avp-radius-popup);
    width: 100%;
    max-width: 440px;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}
#avp-overlay.avp-show #avp-popup { transform: translateY(0) scale(1); }
.avp-popup-inner { padding: 40px 32px; text-align: center; }

/* Logo */
.avp-logo-wrapper { margin: 0 0 24px; text-align: center !important; display: flex; justify-content: center; }
.avp-logo { display: block !important; margin: 0 auto !important; width: auto; height: auto; max-width: 140px; max-height: 80px; object-fit: contain; float: none !important; }

/* Typography */
.avp-title {
    color: var(--avp-text-main) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
}
.avp-subtitle {
    color: var(--avp-text-muted) !important;
    font-size: 15px !important;
    margin: 0 0 30px 0 !important;
    line-height: 1.5 !important;
}

/* Buttons */
.avp-btn-group { display: flex; gap: 12px; margin-bottom: 15px; }
.avp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--avp-radius-btn);
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
    font-family: inherit;
    flex: 1;
}
.avp-btn-block { width: 100%; }
.avp-btn-primary {
    background: var(--avp-primary);
    color: #fff !important;
    border: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.avp-btn-primary:hover {
    background: var(--avp-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.avp-btn-outline {
    background: transparent;
    color: var(--avp-text-main) !important;
    border: 2px solid var(--avp-border);
}
.avp-btn-outline:hover { border-color: var(--avp-text-muted); background: rgba(255, 255, 255, 0.05); }

/* Divider */
.avp-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 25px 0;
    color: var(--avp-text-muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
}
.avp-divider::before, .avp-divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--avp-border); }
.avp-divider span { padding: 0 15px; }

/* Date of birth */
.avp-dob-wrapper { margin-bottom: 20px; }
.avp-input-group { position: relative; margin-bottom: 12px; }
.avp-input {
    width: 100%;
    padding: 16px !important;
    font-size: 16px !important;
    border-radius: var(--avp-radius-btn) !important;
    border: 2px solid var(--avp-border) !important;
    background: var(--avp-input-bg) !important;
    color: var(--avp-text-main) !important;
    outline: none !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    text-align: left !important;
    cursor: pointer;
}
.avp-input::placeholder { color: var(--avp-text-muted); }
.avp-input:focus, .avp-input.active {
    border-color: var(--avp-primary) !important;
    background: var(--avp-bg-popup) !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06) !important;
}

/* Remember me */
.avp-remember-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    gap: 8px;
    color: var(--avp-text-muted) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    cursor: pointer;
    user-select: none;
}
.avp-remember-wrapper input[type="checkbox"] {
    accent-color: var(--avp-primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0 !important;
}

/* Error message */
.avp-error-message {
    color: var(--avp-danger);
    font-size: 14px;
    margin-top: 10px;
    display: none;
    font-weight: 500;
    animation: avpShake 0.4s ease-in-out;
}
@keyframes avpShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Warning footer */
.avp-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 25px 0 0 0;
    font-size: 12px !important;
    color: var(--avp-text-muted) !important;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px;
    border-radius: 8px;
    line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
    #avp-overlay, #avp-popup, .avp-btn, .avp-error-message { transition: none !important; animation: none !important; }
}

/* Responsive */
@media (max-width: 480px) {
    .avp-popup-inner { padding: 30px 20px; }
    .avp-btn-group { flex-direction: column; }
    .avp-title { font-size: 22px !important; }
}

/* Scroll lock while the popup is open */
html.avp-locked, html.avp-locked body { overflow: hidden !important; }

/* Date of birth: Day / Month / Year fields */
.avp-dob-legacy { display: none !important; }
.avp-dob-fields { display: flex !important; flex-wrap: nowrap !important; gap: 10px; width: 100%; margin: 0 0 12px; box-sizing: border-box; text-align: left; }
.avp-dob-fields .avp-dob-day { flex: 0.9 1 0; }
.avp-dob-fields .avp-dob-month { flex: 1.45 1 0; }
.avp-dob-fields .avp-dob-year { flex: 1.15 1 0; }
.avp-dob-field { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.avp-dob-field label { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .06em; text-transform: uppercase; color: var(--avp-text-muted) !important; margin: 0 !important; padding: 0 2px !important; line-height: 1.2 !important; }
.avp-dob-fields .avp-input.avp-dob-sel { width: 100% !important; min-width: 0 !important; height: 54px !important; padding: 0 32px 0 14px !important; font-size: 16px !important; line-height: 1.2 !important; cursor: pointer; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background-image: none !important; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: var(--avp-text-muted) !important; margin: 0 !important; box-shadow: none; }
.avp-dob-fields .avp-input.avp-dob-sel.avp-filled { color: var(--avp-text-main) !important; font-weight: 600; }
.avp-dob-fields .avp-input.avp-dob-sel:focus { border-color: var(--avp-primary) !important; outline: none; }
.avp-dob-fields .avp-input.avp-dob-sel.avp-dob-missing { border-color: #ef4444 !important; }
.avp-dob-fields .avp-dob-sel option { color: #111827; background: #fff; font-weight: 400; }
.avp-dob-chev { position: absolute; right: 14px; bottom: 23px; width: 7px; height: 7px; border-right: 2px solid var(--avp-text-muted); border-bottom: 2px solid var(--avp-text-muted); transform: rotate(45deg); pointer-events: none; opacity: .8; }
.avp-dob-field:focus-within .avp-dob-chev { border-color: var(--avp-primary); }
#avp-popup button:focus-visible, #avp-popup input:focus-visible, #avp-popup select:focus-visible { outline: 2px solid var(--avp-primary); outline-offset: 2px; }
@media (max-width: 420px) {
  .avp-dob-fields { gap: 7px; }
  .avp-dob-fields .avp-input.avp-dob-sel { height: 50px !important; padding: 0 24px 0 10px !important; }
  .avp-dob-chev { right: 10px; bottom: 21px; }
}

/* Overlay hardening (sits above cookie banners and chat widgets; scrolls inside on small screens) */
#avp-overlay { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; padding: 15px !important; box-sizing: border-box !important; z-index: 2147483647 !important; background-color: rgba(15, 23, 42, 0.95) !important; pointer-events: auto !important; isolation: isolate !important; }
#avp-popup, #avp-popup * { pointer-events: auto !important; }
#avp-popup { max-height: 85vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; width: 100% !important; margin: auto !important; }
#avp-popup::-webkit-scrollbar { width: 5px; }
#avp-popup::-webkit-scrollbar-thumb { background: var(--avp-primary); border-radius: 10px; }
.avp-popup-inner { box-sizing: border-box !important; max-width: 100% !important; width: 100% !important; padding-bottom: 15px !important; }
.avp-dob-wrapper, .avp-btn-block { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }