/* ============================================================
   agegate.css — Legal Drinking Age Consent Overlay
   Light / minimal style | HU primary + EN secondary
   ============================================================ */

#agegate-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;

  /* light frosted-glass effect */
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;

  font-family: 'Georgia', 'Times New Roman', serif;

  opacity: 0;
  animation: agegate-fadein 0.45s ease forwards;
}

@keyframes agegate-fadein {
  to { opacity: 1; }
}

#agegate-box {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 4px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 12px 40px rgba(0, 0, 0, 0.08);

  max-width: 420px;
  width: 100%;
  padding: 2.8rem 2.4rem 2.4rem;
  text-align: center;

  transform: translateY(10px);
  animation: agegate-risein 0.45s ease forwards;
}

@keyframes agegate-risein {
  to { transform: translateY(0); }
}

#agegate-icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 1.2rem;
  color: #2c2c2c;
  letter-spacing: 0.03em;
}

#agegate-title {
  font-size: 1.05rem;
  font-weight: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1a1a1a;
  margin: 0 0 0.5rem;
}

#agegate-subtitle {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #aaa;
  margin: 0 0 1.8rem;
}

#agegate-divider {
  width: 32px;
  height: 1px;
  background: #ccc;
  margin: 0 auto 1.8rem;
}

/* Primary question (Hungarian) */
#agegate-question {
  font-size: 1rem;
  color: #2c2c2c;
  line-height: 1.6;
  margin: 0 0 0.5rem;
}

/* Secondary question (English) */
#agegate-question-hu {
  font-size: 0.78rem;
  color: #aaa;
  font-style: italic;
  line-height: 1.5;
  margin: 0 0 2rem;
}

#agegate-buttons {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
}

.agegate-btn {
  flex: 1;
  max-width: 160px;
  padding: 0.75rem 1rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  -webkit-tap-highlight-color: transparent;
}

.agegate-btn-yes {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}

.agegate-btn-yes:hover,
.agegate-btn-yes:focus-visible {
  background: #333;
  border-color: #333;
  outline: none;
}

.agegate-btn-no {
  color: #555;
}

.agegate-btn-no:hover,
.agegate-btn-no:focus-visible {
  background: #f5f5f5;
  border-color: #aaa;
  outline: none;
}

/* Secondary label on buttons (English) */
.agegate-btn-label-hu {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  opacity: 0.5;
  margin-top: 2px;
  text-transform: none;
  font-style: italic;
}

#agegate-legal {
  margin-top: 1.8rem;
  font-size: 0.7rem;
  color: #aaa;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* ── Denied state ────────────────────────────────── */
#agegate-denied {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

#agegate-denied-icon {
  font-size: 1.6rem;
  margin-bottom: 0.4rem;
}

#agegate-denied p {
  margin: 0;
  font-size: 0.95rem;
  color: #2c2c2c;
  line-height: 1.6;
}

/* Secondary denied text (English) */
#agegate-denied p.hu {
  font-size: 0.75rem;
  color: #aaa;
  font-style: italic;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 480px) {
  #agegate-box {
    padding: 2.2rem 1.6rem 2rem;
  }

  #agegate-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .agegate-btn {
    max-width: 100%;
  }
}