/*
 * Cookie consent dialog (A13). The shell renders one panel per page
 * (portal_shell.tmpl "cmsportal_consent") and js/consent.js drives it; the
 * words are store data (Site.Labels.Consent).
 *
 * Every declaration below is prod's resolved utility string for the same
 * element (design-port tools/twdict.py over tools/prod-index.css, legacy
 * components.CookieConsent): colours that prod takes from its theme vars
 * become --portal-* tokens (--highlight -> --portal-accent, ink on the
 * accent -> --portal-accent-ink, --bg-level-1 -> --portal-surface,
 * --bg-level-3 -> --portal-surface-alt), while prod's literal white
 * overlays stay literal because both hosts render them literally. Prod's
 * shadow-[0_20px_50px_rgba(0,0,0,0.5)] and text-text-* classes resolve to
 * nothing in prod's stylesheet (no-ops), so the panel has no drop shadow
 * and the text colours inherit, exactly as on prod.
 */

.portal-consent { position: fixed; inset: auto 0 0 0; z-index: 100; padding: 1rem; pointer-events: none; }
.portal-consent[hidden], .portal-consent [hidden] { display: none; }
.portal-consent-panel {
  pointer-events: auto; max-width: 56rem; margin-inline: auto; overflow: hidden;
  background-color: color-mix(in srgb, var(--portal-surface) 90%, transparent);
  backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 13px;
  transition: all .5s cubic-bezier(.4, 0, .2, 1);
}

/* Settings view */
.portal-consent-settings { padding: 1.5rem; outline-style: none; }
.portal-consent-settings > * + * { margin-top: 2rem; }
.portal-consent-settings-head { display: flex; align-items: center; justify-content: space-between; }
.portal-consent-settings-heading { display: flex; align-items: center; gap: 1rem; }
.portal-consent-badge {
  height: 2.5rem; width: 2.5rem; display: flex; align-items: center; justify-content: center;
  border-radius: 13px; color: var(--portal-accent);
  background-color: color-mix(in srgb, var(--portal-accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--portal-accent) 30%, transparent);
}
.portal-consent-badge svg { width: 1.25rem; height: 1.25rem; }
.portal-consent-title { margin: 0; font-size: 1.5rem; line-height: 1.3333; font-weight: 700; letter-spacing: -.025em; }
.portal-consent-close {
  display: flex; padding: .5rem; border-radius: 13px; border-width: 0; background: none; color: inherit;
  font: inherit; cursor: pointer; transition: all .15s cubic-bezier(.4, 0, .2, 1);
}
.portal-consent-close:hover { background-color: rgba(255, 255, 255, .05); }
.portal-consent-close svg { width: 1.25rem; height: 1.25rem; }

.portal-consent-choices { display: grid; gap: 1rem; }
/* Prod draws each purpose as a div[role=switch] with a hidden checkbox
   beside it; one <button role="switch"> carries the same state in
   aria-checked and is keyboard-operable without a second source of truth,
   so the styles below key off aria-checked instead of a JS class list. */
.portal-consent-choice {
  display: flex; align-items: flex-start; gap: 1rem; width: 100%; padding: 1rem;
  font: inherit; color: inherit; text-align: left; cursor: pointer; user-select: none;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 13px;
  background-color: rgba(255, 255, 255, .05); outline-style: none;
  transition: all .15s cubic-bezier(.4, 0, .2, 1);
}
.portal-consent-choice:hover { border-color: rgba(255, 255, 255, .2); }
.portal-consent-choice:focus-visible { box-shadow: 0 0 0 2px var(--portal-accent); }
.portal-consent-choice[aria-checked="true"], .portal-consent-choice-locked {
  background-color: color-mix(in srgb, var(--portal-accent) 5%, transparent);
  border-color: color-mix(in srgb, var(--portal-accent) 30%, transparent);
}
.portal-consent-choice-locked { cursor: not-allowed; }
.portal-consent-choice-locked:hover { border-color: color-mix(in srgb, var(--portal-accent) 30%, transparent); }
.portal-consent-choice-icon {
  height: 3rem; width: 3rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 13px; border: 1px solid rgba(255, 255, 255, .05);
  background-color: var(--portal-surface-alt); transition: all .15s cubic-bezier(.4, 0, .2, 1);
}
.portal-consent-choice-icon svg { width: 1.5rem; height: 1.5rem; }
.portal-consent-choice[aria-checked="true"] .portal-consent-choice-icon,
.portal-consent-choice-locked .portal-consent-choice-icon {
  background-color: var(--portal-accent); color: var(--portal-accent-ink); border-color: var(--portal-accent);
  box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--portal-accent) 20%, transparent),
              0 4px 6px -4px color-mix(in srgb, var(--portal-accent) 20%, transparent);
}
.portal-consent-choice-body { flex: 1; }
.portal-consent-choice-body > * + * { margin-top: .25rem; }
.portal-consent-choice-head { display: flex; align-items: center; justify-content: space-between; }
.portal-consent-choice-name { font-size: 1rem; line-height: 1.5; font-weight: 700; }
.portal-consent-choice-text { margin: 0; font-size: .75rem; font-weight: 500; line-height: 1.625; }
.portal-consent-switch {
  position: relative; width: 3rem; height: 1.5rem; flex-shrink: 0; padding: .25rem; border-radius: 999px;
  background-color: var(--portal-surface-alt); transition: all .15s cubic-bezier(.4, 0, .2, 1);
}
.portal-consent-choice[aria-checked="true"] .portal-consent-switch,
.portal-consent-choice-locked .portal-consent-switch { background-color: var(--portal-accent); }
.portal-consent-switch span {
  display: block; width: 1rem; height: 1rem; border-radius: 999px; background-color: #fff; translate: 0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
  transition: all .15s cubic-bezier(.4, 0, .2, 1);
}
.portal-consent-choice[aria-checked="true"] .portal-consent-switch span,
.portal-consent-choice-locked .portal-consent-switch span { translate: 1.5rem; }

.portal-consent-settings-foot {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .05);
}
.portal-consent-hint {
  margin: 0; max-width: 24rem; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; text-align: center;
}
.portal-consent-actions { display: flex; gap: .75rem; width: 100%; }
.portal-consent-settings-foot .portal-consent-button { flex: 1; }

/* Simple view */
.portal-consent-simple { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 1.5rem; }
.portal-consent-simple-icon {
  height: 4rem; width: 4rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; color: var(--portal-accent);
  background-color: color-mix(in srgb, var(--portal-accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--portal-accent) 30%, transparent);
}
.portal-consent-simple-icon svg { width: 2rem; height: 2rem; }
.portal-consent-simple-body { flex: 1; text-align: center; }
.portal-consent-simple-body > * + * { margin-top: .5rem; }
.portal-consent-simple-title { margin: 0; font-size: 1.25rem; line-height: 1.4; font-weight: 700; letter-spacing: -.025em; }
.portal-consent-simple-text { margin: 0; font-size: .875rem; line-height: 1.625; }
.portal-consent-customize {
  margin-left: .5rem; padding-inline: .25rem; border-width: 0; border-radius: .25rem; background: none;
  color: var(--portal-accent); font: inherit; font-weight: 700; cursor: pointer; outline-style: none;
}
.portal-consent-customize:hover { text-decoration-line: underline; }
.portal-consent-customize:focus-visible { box-shadow: 0 0 0 2px var(--portal-accent); }
.portal-consent-simple-actions { display: flex; flex-direction: column; gap: .75rem; width: 100%; }

/* Buttons shared by both views */
.portal-consent-button {
  display: inline-flex; align-items: center; justify-content: center; height: 2.75rem;
  border-width: 0; background: none; color: inherit; font: inherit; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; cursor: pointer;
}
.portal-consent-button-quiet {
  padding-inline: 1.5rem; border-radius: 21px;
  transition: color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1);
}
.portal-consent-button-quiet:hover { background-color: rgba(255, 255, 255, .05); }
.portal-consent-button-outline { border: 1px solid rgba(255, 255, 255, .1); }
.portal-consent-button-primary {
  padding-inline: 2rem; border-radius: 13px;
  background-color: var(--portal-accent); color: var(--portal-accent-ink);
  transition: opacity .15s cubic-bezier(.4, 0, .2, 1);
}
.portal-consent-button-primary:hover { opacity: .9; }
.portal-consent-simple-actions .portal-consent-button-primary {
  box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--portal-accent) 20%, transparent),
              0 4px 6px -4px color-mix(in srgb, var(--portal-accent) 20%, transparent);
  transition: all .15s cubic-bezier(.4, 0, .2, 1);
}

@media (width >= 40rem) {
  .portal-consent-settings-foot { flex-direction: row; }
  .portal-consent-hint { text-align: left; }
  .portal-consent-actions { width: auto; }
  .portal-consent-settings-foot .portal-consent-button { flex: 0 auto; }
  .portal-consent-simple-actions { flex-direction: row; }
}

@media (width >= 48rem) {
  .portal-consent { padding: 1.5rem; }
  .portal-consent-settings { padding: 2.5rem; }
  .portal-consent-choice { padding: 1.5rem; gap: 1.5rem; }
  .portal-consent-simple { flex-direction: row; padding: 2rem; }
  .portal-consent-simple-body { text-align: left; }
  .portal-consent-simple-actions { width: auto; }
}