#avp-overlay {
position: fixed;
z-index: 99999;
inset: 0;
background: rgba(0, 0, 0, 0.95);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Oswald', sans-serif;
color: #fff;
padding: 20px;
}
#avp-overlay .avp-box {
position: relative;
background: #161015;
padding: 40px 30px;
border-radius: 10px;
text-align: center;
max-width: 440px;
width: 100%;
box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
font-size: 18px;
}
#avp-overlay h2 {
font-weight: 500;
margin: 0 0 15px;
font-size: 28px;
color: #ececec;
}
#avp-overlay p {
font-weight: 400;
color: #ececec;
margin: 0 0 15px;
line-height: 1.5;
}
#avp-overlay .avp-legal {
font-size: 14px;
color: #8c8c8c;
line-height: 1.45;
}
#avp-overlay .avp-note {
color: #f0c674;
font-size: 15px;
}
#avp-overlay .avp-panel { display: none; }
#avp-overlay[data-state="loading"]   .avp-panel[data-panel="loading"],
#avp-overlay[data-state="ready"]     .avp-panel[data-panel="ready"],
#avp-overlay[data-state="verifying"] .avp-panel[data-panel="verifying"],
#avp-overlay[data-state="error"]     .avp-panel[data-panel="error"],
#avp-overlay[data-state="legacy"]    .avp-panel[data-panel="legacy"] {
display: block;
}
#avp-overlay .avp-btn {
font-family: 'Oswald', sans-serif;
margin: 10px 8px 0;
padding: 14px 25px;
font-weight: 500;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 5px;
color: #fff;
transition: background 0.3s ease;
}
#avp-overlay .avp-btn--primary { background-color: #1e7e34; }
#avp-overlay .avp-btn--primary:hover,
#avp-overlay .avp-btn--primary:focus-visible { background-color: #19692c; }
#avp-overlay .avp-btn--ageverif {
background-color: #ffffff;
color: #111111;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 13px 24px;
}
#avp-overlay .avp-btn--ageverif:hover,
#avp-overlay .avp-btn--ageverif:focus-visible { background-color: #e0e0e0; }
#avp-overlay .avp-btn--ageverif img {
width: 32px;
height: 18px;
flex: none;
}
#avp-overlay .avp-btn--danger { background-color: #a71d2a; }
#avp-overlay .avp-btn--danger:hover,
#avp-overlay .avp-btn--danger:focus-visible { background-color: #871520; }
#avp-overlay .avp-btn:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
#avp-overlay .avp-spinner {
width: 36px;
height: 36px;
margin: 0 auto 18px;
border: 4px solid rgba(255, 255, 255, 0.2);
border-top-color: #fff;
border-radius: 50%;
animation: avp-spin 0.8s linear infinite;
}
@keyframes avp-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
#avp-overlay .avp-spinner { animation-duration: 2s; }
}
@media (max-width: 480px) {
#avp-overlay .avp-box { padding: 28px 18px; font-size: 16px; }
#avp-overlay h2 { font-size: 22px; }
#avp-overlay .avp-btn { display: block; width: 100%; margin: 10px 0 0; }
}