/* Age verification modal styles extracted from age-verification.php and style.css */
html, body { height: 100%; margin: 0; padding: 0; box-sizing: border-box; }
body.age-verification-active { overflow: hidden !important; height: 100vh; }
.age-verification-modal { position: fixed; inset: 0; width: 100vw; height: 100vh; background: linear-gradient(135deg, var(--color-black) 0%, var(--color-red) 100%); z-index: var(--z-index-overlay); display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; backdrop-filter: blur(10px); animation: ageModalFadeIn var(--animation-duration-slow) cubic-bezier(0.25, 0.46, 0.45, 0.94); box-sizing: border-box; }
.age-verification-overlay { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; }
.age-verification-overlay::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 20%, var(--color-gold-overlay-light) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(53, 0, 0, 0.2) 0%, transparent 50%); pointer-events: none; }
.age-verification-content { position: relative; z-index: 2; background: linear-gradient(135deg, var(--color-card-dark), var(--color-black)); border: var(--border-width-regular) solid var(--color-gold-accent); border-radius: var(--border-radius-xl); padding: var(--spacing-2xl) var(--spacing-2xl); max-width: 520px; width: 90%; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 80px var(--color-gold-overlay-medium), inset 0 1px 0 rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); overflow: hidden; }
.age-verification-logo { margin-bottom: var(--spacing-xl); }
.age-verification-logo img { height: 80px; width: auto; filter: drop-shadow(0 4px 20px var(--color-gold-overlay-medium)); animation: logoGlow 3s ease-in-out infinite alternate; }
.age-verification-tagline { font-family: var(--font-sans); font-size: var(--body-sm); color: var(--velviq-text-secondary); font-weight: var(--font-weight-medium); letter-spacing: 2px; text-transform: uppercase; opacity: 0.8; }
.age-verification-headline { font-family: var(--font-serif); font-size: clamp(28px, 5vw, 36px); font-weight: var(--font-weight-bold); color: var(--color-gold-accent); margin: 0 0 var(--spacing-lg) 0; text-transform: uppercase; letter-spacing: 1px; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8); }
.age-verification-description { font-family: var(--font-sans); font-size: var(--font-size-body-lg); font-weight: var(--font-weight-normal); color: var(--color-text-premium); line-height: 1.6; margin: 0 0 var(--spacing-2xl) 0; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); }
.age-verification-description strong { color: var(--color-gold); font-weight: var(--font-weight-semibold); }
.age-verification-buttons { display: flex; gap: 20px; margin-bottom: var(--spacing-xl); justify-content: center; flex-wrap: wrap; }
.age-verification-yes { background: linear-gradient(135deg, var(--color-gold), var(--color-gold-dark)); color: var(--color-black); border: var(--border-width-regular) solid var(--color-gold); padding: var(--spacing-md) var(--spacing-xl); border-radius: var(--border-radius-pill); font-family: var(--font-heading); font-size: var(--font-size-body-md); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.8px; cursor: pointer; transition: all var(--animation-duration-medium) var(--animation-easing-bounce); position: relative; overflow: hidden; min-width: 160px; box-shadow: 0 8px 24px var(--color-gold-overlay-strong), 0 0 40px rgba(53, 0, 0, 0.3); }
.age-verification-yes::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.6s; }
.age-verification-yes:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 32px var(--color-gold-overlay-strong), 0 0 60px rgba(53, 0, 0, 0.5); background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold)); }
.age-verification-yes:hover::before { left: 100%; }
.age-verification-no { background: transparent; color: var(--color-text-premium); border: var(--border-width-regular) solid var(--color-red); padding: var(--spacing-md) var(--spacing-xl); border-radius: var(--border-radius-pill); font-family: var(--font-heading); font-size: var(--font-size-body-md); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.8px; cursor: pointer; transition: all var(--animation-duration-medium) ease; position: relative; overflow: hidden; min-width: 100px; backdrop-filter: blur(10px); }
.age-verification-no::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-red); opacity: 0; transition: opacity var(--animation-duration-medium) ease; z-index: -1; }
.age-verification-no:hover { color: var(--color-text-primary); border-color: var(--color-red); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(53, 0, 0, 0.5); }
.age-verification-no:hover::before { opacity: 1; }
.age-verification-footer { border-top: var(--border-width-thin) solid var(--color-gold-overlay); padding-top: 20px; margin-top: 20px; }
.age-verification-legal { font-family: var(--font-sans); font-size: var(--font-size-body-xs); color: var(--color-text-muted); margin: 0; line-height: 1.4; font-style: italic; }
.age-verification-legal a { color: var(--color-gold); text-decoration: underline; transition: color var(--animation-duration-medium) ease; }
.age-verification-legal a:hover { color: var(--color-gold-light); }
.age-verification-compliance { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.compliance-badge { background: rgba(53, 0, 0, 0.3); color: var(--color-gold); padding: var(--spacing-xs) 12px; border-radius: var(--border-radius-xl); font-size: 10px; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.5px; border: var(--border-width-thin) solid var(--color-gold-overlay-medium); }
.age-verification-modal.fade-out { animation: ageModalFadeOut var(--animation-duration-medium) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.age-verification-modal.fade-out .age-verification-content { animation: ageContentFadeOut var(--animation-duration-medium) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
@keyframes ageModalFadeIn { 0% { opacity: 0; backdrop-filter: blur(0px);} 100% { opacity: 1; backdrop-filter: blur(10px);} }
@keyframes logoGlow { 0% { filter: drop-shadow(0 4px 20px var(--color-gold-overlay-medium));} 100% { filter: drop-shadow(0 6px 30px var(--color-gold-overlay-strong));} }
@keyframes ageModalFadeOut { 0% { opacity: 1; backdrop-filter: blur(10px);} 100% { opacity: 0; backdrop-filter: blur(0px); visibility: hidden; } }
@keyframes ageContentFadeOut { 0% { opacity: 1; transform: scale(1) translateY(0);} 100% { opacity: 0; transform: scale(0.9) translateY(-20px);} }
.age-verification-modal.hidden { display: none !important; }
@media (max-width: 768px) { .age-verification-content { padding: var(--spacing-xl) var(--spacing-lg); max-width: 95%; } }
@media (max-width: 480px) { .age-verification-content { padding: var(--spacing-lg) 20px; border-radius: var(--border-radius-lg); } .compliance-badge { font-size: 9px; padding: 3px var(--spacing-sm); } }