/* ==========================================================================
  LANDING-PAGE 18+ CONSENT GATE
  Loaded by /js/shared/consent-gate.js only on the landing page. A user cannot
  enter an interactive surface until they confirm the mandatory checkbox.
   Uses shared theme tokens with hard fallbacks so it renders correctly even on
  the landing page before shared theme assets finish loading.
   ========================================================================== */

.cg-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 2147483000;               /* above every app layer */
  background: rgba(7, 16, 22, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: cgFade 0.3s ease;
  overscroll-behavior: contain;
}
.cg-overlay[hidden] { display: none; }

@keyframes cgFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cgRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cg-modal {
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: var(--panel, #ffffff);
  color: var(--text, #10151b);
  border: 1px solid var(--border, #e4e8ee);
  border-radius: 18px;
  padding: 22px 22px 18px;
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.32);
  text-align: left;
  animation: cgRise 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: "Nunito", system-ui, -apple-system, sans-serif;
}

.cg-badge {
  width: fit-content;
  min-width: 54px;
  margin: 0 auto 10px;
  padding: 6px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary, #228891) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--primary, #228891) 25%, transparent);
  color: var(--primary, #228891);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.4px;
  text-align: center;
}
.cg-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.4px;
  text-align: center;
  margin: 0 0 6px;
  color: var(--text, #10151b);
}
.cg-sub {
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: var(--text-2, #55606d);
  margin: 0 0 12px;
  line-height: 1.4;
}

.cg-consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border, #e4e8ee);
  background: var(--panel-2, #f4f6f9);
  cursor: pointer;
  margin-bottom: 10px;
  transition: border-color 0.18s ease, background 0.18s ease;
  user-select: none;
}
.cg-consent.cg-checked {
  border-color: var(--primary, #228891);
  background: color-mix(in srgb, var(--primary, #228891) 8%, transparent);
}
.cg-consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  border: 2px solid var(--text-2, #55606d);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cg-consent input[type="checkbox"]:checked {
  background: var(--primary, #228891);
  border-color: var(--primary, #228891);
}
.cg-consent input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.cg-consent label,
.cg-consent .cg-consent-text {
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--text, #10151b);
  cursor: pointer;
}
.cg-consent .cg-consent-text a {
  color: var(--primary, #228891);
  font-weight: 800;
}

.cg-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cg-btn {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 18px;
  border: none;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, background 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}
.cg-btn-enter {
  background: linear-gradient(135deg, var(--primary, #228891), var(--primary-2, #2aa7b2));
  color: var(--primary-fg, #ffffff);
  box-shadow: 0 8px 24px rgba(34, 136, 145, 0.28);
}
.cg-btn-enter:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(34, 136, 145, 0.36); }
.cg-btn-enter:not(:disabled):active { transform: translateY(0); }
.cg-btn-enter:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(0.35);
}
.cg-btn-leave {
  background: var(--panel-2, #eef1f5);
  color: var(--text-2, #55606d);
  border: 1px solid var(--border, #e4e8ee);
}
.cg-btn-leave:hover { color: var(--text, #10151b); border-color: var(--text-2, #55606d); }

.cg-fine {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted, #8a94a1);
  text-align: center;
}
.cg-fine a { color: var(--muted, #8a94a1); text-decoration: underline; }

/* Lock the page behind the gate */
html.cg-locked, body.cg-locked { overflow: hidden !important; }

@media (max-width: 560px) {
  .cg-modal { padding: 20px 18px 16px; border-radius: 16px; }
  .cg-title { font-size: 21px; }
  .cg-badge { font-size: 12px; min-width: 46px; }
}