/* ==================================================================
   DELRIQUE — Consent Banner & Preferences Dialog
   Uses the existing design tokens from main.css (--night, --gold,
   --line-dark, --shadow-*, --ease-out).
   ================================================================== */

/* --- Banner ----------------------------------------------------- */
.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4000;
  display: none;
  background: linear-gradient(165deg, #101a2e, #0b1220);
  border-top: 1px solid var(--line-dark);
  color: var(--text-invert);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  box-shadow: 0 -20px 60px -12px var(--shadow-md, rgba(11,18,32,.22));
  transform: translateY(100%);
  transition: transform .55s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}

.consent-banner.is-visible {
  display: block;
  transform: translateY(0);
}

.consent-banner-inner {
  max-width: var(--container, 1240px);
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.4rem;
}

.consent-banner-content {
  max-width: 46rem;
}

.consent-banner-title {
  margin: 0 0 .4rem;
  font-size: var(--fs-sub, 1.15rem);
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
}

.consent-banner-text {
  margin: 0;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--text-invert-muted, #b8c0d0);
}

.consent-banner-text a {
  color: var(--gold, #ffc300);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consent-banner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  flex-shrink: 0;
}

.consent-banner-actions .btn {
  white-space: nowrap;
}

.consent-link {
  background: none;
  border: 0;
  padding: .5rem .2rem;
  color: var(--gold, #ffc300);
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consent-link:hover,
.consent-link:focus-visible {
  color: var(--gold-deep, #e6ad00);
  outline: none;
}

.consent-accent-link {
  color: var(--gold, #ffc300);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consent-accent-link:hover,
.consent-accent-link:focus-visible {
  color: var(--gold-deep, #e6ad00);
  text-decoration: none;
}

.is-hidden {
  display: none;
}

/* --- Preferences dialog ----------------------------------------- */
.consent-dialog {
  position: fixed;
  inset: 0;
  z-index: 4200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(11, 18, 32, .78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.consent-dialog.is-visible {
  display: flex;
}

.consent-dialog-shell {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  background: linear-gradient(165deg, #101a2e, #0b1220);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-xl, 32px);
  padding: clamp(1.6rem, 4vw, 2.4rem);
  color: #fff;
  box-shadow: var(--shadow-lg, 0 32px 70px -18px rgba(11,18,32,.22));
  transform: translateY(16px) scale(.98);
  transition: transform .45s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}

.consent-dialog.is-visible .consent-dialog-shell {
  transform: translateY(0) scale(1);
}

.consent-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.consent-dialog-title {
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  font-weight: 700;
}

.consent-dialog-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-dark-strong, rgba(255,255,255,.16));
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background .3s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}

.consent-dialog-close:hover,
.consent-dialog-close:focus-visible {
  background: rgba(255, 255, 255, .08);
  outline: none;
}

.consent-dialog-intro {
  margin: 0 0 1.4rem;
  font-size: .93rem;
  line-height: 1.65;
  color: var(--text-invert-muted, #b8c0d0);
}

.consent-dialog-intro a,
.consent-dialog-shell a {
  color: var(--gold, #ffc300);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Category rows ---------------------------------------------- */
.consent-category {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line-dark);
}

.consent-category:first-child {
  padding-top: 0;
}

.consent-category:last-child {
  border-bottom: 0;
}

.consent-category-head {
  font-size: .98rem;
  font-weight: 600;
  margin: 0 0 .2rem;
}

.consent-category-desc {
  margin: 0;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--text-invert-muted, #b8c0d0);
}

.consent-category-badge {
  display: inline-block;
  margin-left: .45rem;
  vertical-align: middle;
  padding: .1rem .5rem;
  border-radius: var(--r-pill, 999px);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold, #ffc300);
  background: var(--gold-soft, rgba(255,195,0,.14));
}

.consent-category-note {
  display: inline-block;
  margin-top: .35rem;
  font-size: .8rem;
  color: var(--text-invert-muted, #b8c0d0);
}

/* --- Switch ------------------------------------------------------ */
.consent-switch {
  flex-shrink: 0;
  position: relative;
  width: 46px;
  height: 26px;
  margin-top: .2rem;
}

.consent-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.consent-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  transition: background .3s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}

.consent-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform .3s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}

.consent-switch input:checked + .consent-switch-track {
  background: var(--gold, #ffc300);
}

.consent-switch input:checked + .consent-switch-track::after {
  transform: translateX(20px);
  background: var(--ink, #0b1220);
}

.consent-switch input:focus-visible + .consent-switch-track {
  outline: 2px solid var(--gold, #ffc300);
  outline-offset: 2px;
}

.consent-switch input:disabled + .consent-switch-track {
  opacity: .55;
  cursor: not-allowed;
}

/* --- Opt-out form ------------------------------------------------ */
.consent-optout {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-dark);
}

.consent-optout-title {
  margin: 0 0 .3rem;
  font-size: .95rem;
  font-weight: 600;
}

.consent-optout-desc {
  margin: 0 0 .8rem;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--text-invert-muted, #b8c0d0);
}

.consent-optout-form {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.consent-optout-form .form-control {
  flex: 1 1 14rem;
  min-width: 0;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line-dark-strong, rgba(255,255,255,.16));
  color: #fff;
  border-radius: var(--r-sm, 10px);
  padding: .65rem .85rem;
  font-size: .92rem;
}

.consent-optout-form .form-control::placeholder {
  color: var(--text-invert-muted, #b8c0d0);
}

.consent-optout-form .form-control:focus-visible {
  outline: 2px solid var(--gold, #ffc300);
  outline-offset: 1px;
}

.optout-status {
  flex-basis: 100%;
  margin: .1rem 0 0;
  font-size: .85rem;
  line-height: 1.5;
}

.optout-status.is-success {
  color: #4ade80;
}

.optout-status.is-error {
  color: #f87171;
}

/* --- Dialog actions ---------------------------------------------- */
.consent-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .65rem;
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-dark);
}

/* --- Footer trigger ----------------------------------------------- */
.consent-open-prefs {
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-invert-muted, #b8c0d0);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: color .3s ease;
}

.consent-open-prefs:hover,
.consent-open-prefs:focus-visible {
  color: var(--gold, #ffc300);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Responsive -------------------------------------------------- */
@media (max-width: 640px) {
  .consent-banner-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .consent-banner-actions {
    justify-content: flex-start;
  }

  .consent-banner-actions .btn {
    flex: 1 1 auto;
  }

  .consent-dialog {
    padding: .6rem;
  }

  .consent-category {
    flex-direction: column;
    gap: .6rem;
  }
}