/**
 * Age Gate Override CSS - Ensures modal can be dismissed
 * CRITICAL: These !important rules allow JavaScript to hide the overlay
 */

/* When dismissed, hide completely */
#ageGate,
#ageGateOverlay {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#ageGate.dismissed,
#ageGateOverlay.dismissed,
#ageGate[aria-hidden="true"],
#ageGateOverlay[aria-hidden="true"],
#ageGate[data-dismissed="true"],
#ageGateOverlay[data-dismissed="true"],
#ageGate.hidden,
#ageGateOverlay.hidden,
#ageGate.is-hidden,
#ageGateOverlay.is-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -99999 !important;
}

/* Emergency: Any element with display:none inline should stay hidden */
[style*="display"] {
  /* Allow inline display styles to work */
}

/* Body unlock styles */
body.age-gate-dismissed {
  overflow: auto !important;
  pointer-events: auto !important;
}

/* When age gate overlay has display:none, enable content */
#ageGate[style*="display: none"] ~ header,
#ageGateOverlay[style*="display: none"] ~ header,
#ageGate[style*="display: none"] ~ nav,
#ageGateOverlay[style*="display: none"] ~ nav,
#ageGate[style*="display: none"] ~ main,
#ageGateOverlay[style*="display: none"] ~ main,
#ageGate[style*="display: none"] ~ section,
#ageGateOverlay[style*="display: none"] ~ section {
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* Device selection gate dismissal */
#deviceSelectionGate {
  transition: opacity 0.1s ease;
}

#deviceSelectionGate.dismissed {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Loading spinner animation */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}