/**
 * PMN Design V2 - Age Gate Custom Styles
 * 
 * Modal-style age verification matching the PMN Design V2 dark luxury theme.
 * Overrides default Age Gate plugin styles.
 *
 * @package PMN_Design_V2
 * @since 1.0.0
 */

/* ========================================
   AGE GATE WRAPPER / OVERLAY
   ======================================== */
.age-gate-wrapper,
[data-age-gate-wrapper] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(11, 11, 13, 0.97) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    box-sizing: border-box !important;
}

/* Background layer */
.age-gate-background-colour,
[data-age-gate-background-colour] {
    display: none !important;
}

.age-gate-background,
[data-age-gate-background] {
    display: none !important;
}

/* ========================================
   AGE GATE MODAL CONTAINER
   ======================================== */
.age-gate,
[data-age-gate] {
    background: linear-gradient(145deg, #1A1D26 0%, #1A0F1F 100%) !important;
    border: 1px solid rgba(51, 162, 252, 0.2) !important;
    border-radius: 24px !important;
    padding: 48px !important;
    max-width: 480px !important;
    width: 100% !important;
    position: relative !important;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 0 100px rgba(51, 162, 252, 0.1),
        0 0 100px rgba(245, 33, 190, 0.05) !important;
    animation: pmnAgeGateFadeIn 0.5s ease-out !important;
}

@keyframes pmnAgeGateFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ========================================
   CUSTOM MODAL WRAPPER
   ======================================== */
.pmn-age-gate-modal {
    text-align: center;
}

/* Icon */
.pmn-age-gate-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(51, 162, 252, 0.15) 0%, rgba(245, 33, 190, 0.15) 100%);
    border-radius: 50%;
    font-size: 2.5rem;
}

/* ========================================
   HEADING / LOGO
   ======================================== */
.pmn-age-gate-heading,
.age-gate-heading,
[data-age-gate-heading] {
    margin-bottom: 16px !important;
}

.pmn-age-gate-logo,
.age-gate-logo {
    max-width: 200px !important;
    height: auto !important;
    margin: 0 auto 16px auto !important;
    display: block !important;
}

.pmn-age-gate-title,
.age-gate-heading-title,
[data-age-gate-heading-title] {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    color: #F3E9E0 !important;
    margin: 0 !important;
    text-align: center !important;
}

/* ========================================
   HEADLINE & SUBHEADLINE
   ======================================== */
.pmn-age-gate-headline,
.age-gate-headline,
[data-age-gate-headline] {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: #F3E9E0 !important;
    margin: 0 0 12px 0 !important;
    text-align: center !important;
}

.pmn-age-gate-subheadline,
.age-gate-subheadline,
[data-age-gate-subheadline] {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 1rem !important;
    font-weight: 300 !important;
    color: #cccccc !important;
    margin: 0 0 32px 0 !important;
    text-align: center !important;
    line-height: 1.6 !important;
}

/* ========================================
   FORM FIELDS
   ======================================== */
.pmn-age-gate-fields,
.age-gate-form-fields,
[data-age-gate-form-fields] {
    margin-bottom: 24px !important;
}

/* Selects container */
.pmn-age-gate-selects,
.age-gate-form-elements,
[data-age-gate-form-elements] {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Individual select group */
.pmn-age-gate-select-group,
.age-gate-form-section,
[data-age-gate-form-section] {
    flex: 1 !important;
    max-width: 120px !important;
}

/* Labels */
.pmn-age-gate-label,
.age-gate label,
[data-age-gate] label {
    display: block !important;
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: #999999 !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-align: center !important;
}

/* Select dropdowns */
.pmn-age-gate-select,
.age-gate select,
[data-age-gate] select {
    width: 100% !important;
    padding: 14px 16px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: #F3E9E0 !important;
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
}

.pmn-age-gate-select:hover,
.age-gate select:hover,
[data-age-gate] select:hover {
    border-color: rgba(51, 162, 252, 0.4) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.pmn-age-gate-select:focus,
.age-gate select:focus,
[data-age-gate] select:focus {
    outline: none !important;
    border-color: #33A2FC !important;
    box-shadow: 0 0 0 3px rgba(51, 162, 252, 0.15) !important;
}

/* Select options styling */
.pmn-age-gate-select option,
.age-gate select option,
[data-age-gate] select option {
    background: #1A1D26 !important;
    color: #F3E9E0 !important;
    padding: 10px !important;
}

/* ========================================
   REMEMBER ME
   ======================================== */
.pmn-age-gate-remember,
.age-gate-remember-wrapper,
[data-age-gate-remember-wrapper] {
    margin: 24px 0 !important;
    display: flex !important;
    justify-content: center !important;
}

.pmn-age-gate-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
}

.pmn-age-gate-checkbox input[type="checkbox"],
.age-gate input[type="checkbox"],
[data-age-gate] input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #33A2FC !important;
    cursor: pointer !important;
}

.pmn-age-gate-checkbox span,
.age-gate-remember-label,
[data-age-gate-remember-label] {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 300 !important;
    color: #cccccc !important;
}

/* ========================================
   SUBMIT BUTTON
   ======================================== */
.pmn-age-gate-submit-section,
.age-gate-submit-section,
[data-age-gate-submit-section] {
    margin-top: 24px !important;
}

.pmn-age-gate-submit,
.age-gate-submit,
[data-age-gate-submit] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 18px 40px !important;
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #33A2FC 0%, #F521BE 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(51, 162, 252, 0.3) !important;
}

.pmn-age-gate-submit:hover,
.age-gate-submit:hover,
[data-age-gate-submit]:hover {
    transform: translateY(-3px) !important;
    box-shadow: 
        0 8px 30px rgba(51, 162, 252, 0.4), 
        0 4px 15px rgba(245, 33, 190, 0.3) !important;
}

.pmn-age-gate-submit:active,
.age-gate-submit:active,
[data-age-gate-submit]:active {
    transform: translateY(-1px) !important;
}

/* Button shine effect */
.pmn-age-gate-submit::after,
.age-gate-submit::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
    transition: left 0.5s ease !important;
}

.pmn-age-gate-submit:hover::after,
.age-gate-submit:hover::after {
    left: 100% !important;
}

/* ========================================
   ERROR MESSAGES
   ======================================== */
.age-gate-errors,
[data-age-gate-errors] {
    margin-top: 16px !important;
    padding: 12px 16px !important;
    background: rgba(245, 33, 190, 0.1) !important;
    border: 1px solid rgba(245, 33, 190, 0.3) !important;
    border-radius: 8px !important;
}

.age-gate-errors p,
[data-age-gate-errors] p {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 0.9rem !important;
    color: #F85DD4 !important;
    margin: 0 !important;
    text-align: center !important;
}

/* ========================================
   ADDITIONAL CONTENT
   ======================================== */
.age-gate-additional,
[data-age-gate-additional] {
    margin-top: 24px !important;
    padding-top: 24px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.age-gate-additional p,
[data-age-gate-additional] p {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 300 !important;
    color: #999999 !important;
    text-align: center !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

.age-gate-additional a,
[data-age-gate-additional] a {
    color: #33A2FC !important;
    text-decoration: none !important;
}

.age-gate-additional a:hover,
[data-age-gate-additional] a:hover {
    text-decoration: underline !important;
}

/* ========================================
   LOADER (JS Mode)
   ======================================== */
.age-gate-loader,
[data-age-gate-loader] {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.age-gate-loader svg,
[data-age-gate-loader] svg {
    width: 48px !important;
    height: 48px !important;
    animation: pmnAgeGateSpin 1s linear infinite !important;
}

.age-gate-loader svg circle,
[data-age-gate-loader] svg circle {
    stroke: #33A2FC !important;
}

@keyframes pmnAgeGateSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 480px) {
    .age-gate,
    [data-age-gate] {
        padding: 32px 24px !important;
        margin: 16px !important;
        border-radius: 20px !important;
    }
    
    .pmn-age-gate-icon {
        width: 64px;
        height: 64px;
        font-size: 2rem;
    }
    
    .pmn-age-gate-headline,
    .age-gate-headline,
    [data-age-gate-headline] {
        font-size: 1.3rem !important;
    }
    
    .pmn-age-gate-selects,
    .age-gate-form-elements,
    [data-age-gate-form-elements] {
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .pmn-age-gate-select-group,
    .age-gate-form-section,
    [data-age-gate-form-section] {
        max-width: 100% !important;
    }
    
    .pmn-age-gate-submit,
    .age-gate-submit,
    [data-age-gate-submit] {
        padding: 16px 24px !important;
        font-size: 0.9rem !important;
    }
}

/* ========================================
   HIDE DEFAULT PLUGIN STYLES WE DON'T NEED
   ======================================== */
/* Hide the default blur wrapper */
.age-gate-blur-wrapper {
    filter: none !important;
}

/* Ensure body doesn't scroll when gate is open */
body.age-gate-active {
    overflow: hidden !important;
}