/* ================================================================
   Elite Cell Source — Age Gate Overlay
   Theme: Dark luxury / medical-grade premium
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ---------- CSS Variables ---------- */
:root {
  --ecs-gold:        #C8A96E;
  --ecs-gold-light:  #E2C98C;
  --ecs-gold-dark:   #9A7A48;
  --ecs-deep:        #0A0C0F;
  --ecs-surface:     #10141A;
  --ecs-surface-2:   #161C25;
  --ecs-border:      rgba(200, 169, 110, 0.18);
  --ecs-border-soft: rgba(200, 169, 110, 0.08);
  --ecs-text:        #E8E4DC;
  --ecs-text-muted:  #8A8680;
  --ecs-red:         #C0392B;
  --ecs-red-light:   #E74C3C;
  --ecs-transition:  all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Overlay / backdrop ---------- */
#ecs-age-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-family: 'Montserrat', sans-serif;
  opacity: 0;
  animation: ecsGateFadeIn 0.6s 0.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ecsGateFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#ecs-age-gate-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 10, 0.92);
  backdrop-filter: blur(12px) saturate(0.4);
  -webkit-backdrop-filter: blur(12px) saturate(0.4);
}

/* Noise texture overlay */
#ecs-age-gate-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
}

/* ---------- Modal card ---------- */
#ecs-age-gate-modal {
  position: relative;
  z-index: 1;
  background: linear-gradient(155deg, #12171F 0%, #0A0D12 60%, #0E1219 100%);
  border: 1px solid var(--ecs-border);
  border-radius: 4px;
  width: 100%;
  max-width: 520px;
  padding: 0 0 2.5rem;
  box-shadow:
    0 0 0 1px rgba(200, 169, 110, 0.06),
    0 30px 80px rgba(0, 0, 0, 0.7),
    0 0 120px rgba(200, 169, 110, 0.04) inset;
  overflow: hidden;
  transform: translateY(28px) scale(0.97);
  animation: ecsModalRise 0.7s 0.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ecsModalRise {
  from { transform: translateY(28px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)     scale(1);    opacity: 1; }
}

/* ---------- Top decorative bar ---------- */
#ecs-agegate-topbar {
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--ecs-gold-dark) 20%,
    var(--ecs-gold) 50%,
    var(--ecs-gold-dark) 80%,
    transparent 100%);
  margin-bottom: 2.25rem;
}

/* ---------- Brand / Logo area ---------- */
#ecs-agegate-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 0 2.5rem;
}

#ecs-agegate-hexmark {
  width: 64px;
  height: 74px;
  filter: drop-shadow(0 0 12px rgba(200, 169, 110, 0.25));
}

#ecs-agegate-brand-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  color: var(--ecs-gold);
  text-transform: uppercase;
  margin: 0;
}

/* ---------- Gold divider ---------- */
#ecs-agegate-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 3rem 1.25rem;
}

#ecs-agegate-divider span:not(#ecs-agegate-divider-diamond) {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ecs-border), transparent);
}

#ecs-agegate-divider-diamond {
  font-size: 0.45rem;
  color: var(--ecs-gold);
  letter-spacing: 0;
  line-height: 1;
}

/* ---------- Headline ---------- */
#ecs-age-gate-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.85rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--ecs-text);
  text-align: center;
  margin: 0 0 1rem;
  padding: 0 2.5rem;
  line-height: 1.2;
}

/* ---------- Message ---------- */
#ecs-agegate-message {
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ecs-text-muted);
  text-align: center;
  padding: 0 3rem;
  margin: 0 0 2rem;
}

/* ---------- Buttons ---------- */
#ecs-agegate-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 2.5rem;
}

#ecs-agegate-actions button {
  position: relative;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: var(--ecs-transition);
  overflow: hidden;
}

/* Primary YES button */
#ecs-age-gate-yes {
  background: linear-gradient(135deg, var(--ecs-gold-dark) 0%, var(--ecs-gold) 50%, var(--ecs-gold-dark) 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  color: #0A0C0F;
}

#ecs-age-gate-yes:hover {
  background-position: 0% 0;
  box-shadow: 0 4px 24px rgba(200, 169, 110, 0.35);
  transform: translateY(-1px);
}

#ecs-age-gate-yes:active {
  transform: translateY(0);
}

/* Shimmer effect on primary btn */
#ecs-age-gate-yes::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transform: skewX(-20deg);
  animation: ecsBtnShimmer 3s 1s infinite;
}

@keyframes ecsBtnShimmer {
  0%   { left: -100%; }
  30%  { left: 160%; }
  100% { left: 160%; }
}

/* Secondary NO button */
#ecs-age-gate-no {
  background: transparent;
  color: var(--ecs-text-muted);
  border: 1px solid rgba(138, 134, 128, 0.25) !important;
}

#ecs-age-gate-no:hover {
  border-color: rgba(192, 57, 43, 0.4) !important;
  color: #e07070;
  background: rgba(192, 57, 43, 0.06);
}

.ecs-btn-inner {
  display: block;
  padding: 0.95rem 1.5rem;
}

/* ---------- Fine print ---------- */
#ecs-agegate-fine {
  font-size: 0.65rem;
  font-weight: 400;
  color: rgba(138, 134, 128, 0.5);
  text-align: center;
  padding: 1.5rem 3rem 0;
  line-height: 1.6;
  margin: 0;
}

/* ---------- Declined notice ---------- */
#ecs-agegate-declined {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 0 2.5rem;
  padding: 1.25rem 1.5rem;
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.25);
  border-radius: 3px;
  text-align: center;
  animation: ecsFadeSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#ecs-agegate-declined svg {
  width: 28px;
  height: 28px;
  color: var(--ecs-red-light);
  margin-bottom: 0.25rem;
}

#ecs-agegate-declined strong {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ecs-red-light);
}

#ecs-agegate-declined p {
  font-size: 0.75rem;
  font-weight: 300;
  color: rgba(232, 228, 220, 0.65);
  line-height: 1.6;
  margin: 0;
}

@keyframes ecsFadeSlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Body lock ---------- */
body.ecs-age-gate-active {
  overflow: hidden !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
  #ecs-age-gate-modal {
    max-width: 100%;
    border-left: none;
    border-right: none;
    border-radius: 0;
  }

  #ecs-age-gate-title {
    font-size: 1.5rem;
    padding: 0 1.5rem;
  }

  #ecs-agegate-message,
  #ecs-agegate-fine {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  #ecs-agegate-actions {
    padding: 0 1.5rem;
  }
}