/* PDPA cookie consent — banner + settings modal + embed placeholders. Tokens only (CONVENTIONS.md). */
.an-consent { position: fixed; inset: 0; z-index: 9990; pointer-events: none; }
.an-consent[hidden] { display: none !important; }

.an-consent-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9991;
  max-width: 860px; margin: 0 auto; pointer-events: auto;
  background: var(--an-cream-card); color: var(--an-ink);
  border: 1px solid var(--an-sand); border-radius: var(--an-radius-card);
  box-shadow: 0 12px 40px rgba(46, 13, 18, .22);
  padding: 18px 20px; display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center;
  transform: translateY(0); opacity: 1; transition: transform var(--an-transition), opacity var(--an-transition);
}
.an-consent-banner.is-hiding { transform: translateY(16px); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .an-consent-banner { transition: none; } }

/* Desktop (>800px): compact bottom-right corner toast, NOT a full-width bar, so it can never
   overlap the centred dashboard content column (.an-user-dash max-width 980px, incl. the JD
   life-tools row). Review B must-fix 2026-07-17. Mobile keeps the full-width bar + clearance band. */
@media (min-width: 801px) {
  .an-consent-banner { left: auto; right: 24px; bottom: 24px; max-width: 420px; margin: 0; }
}

.an-consent-copy { flex: 1 1 340px; min-width: 0; }
.an-consent-title { font-family: var(--an-font-display); color: var(--an-maroon); font-size: 17px; margin: 0 0 4px; }
.an-consent-desc { font-size: 13.5px; line-height: 1.5; color: var(--an-ink-soft); margin: 0; }
.an-consent-desc a { color: var(--an-maroon); text-decoration: underline; }

.an-consent-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.an-consent-btn {
  font: inherit; font-size: var(--an-btn-font); border-radius: var(--an-radius-pill);
  padding: var(--an-btn-pad); border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background var(--an-transition), color var(--an-transition), border-color var(--an-transition);
}
.an-consent-btn--primary { background: var(--an-gold); color: var(--an-maroon-ink); font-weight: 600; }
.an-consent-btn--primary:hover { background: var(--an-gold-bright); }
/* Equal prominence (PDPA/PDPC: reject must carry the same visual weight as accept — checker round):
   same fill treatment (solid maroon) + same font-weight as the gold primary, not a thin outline. */
.an-consent-btn--ghost { background: var(--an-maroon); color: var(--an-cream); font-weight: 600; border-color: var(--an-maroon); }
.an-consent-btn--ghost:hover { background: var(--an-maroon-deep); }
.an-consent-btn--text { background: transparent; color: var(--an-ink-muted); border: none; text-decoration: underline; padding: var(--an-btn-pad); }

.an-consent-modal {
  position: fixed; inset: 0; z-index: 9995; pointer-events: auto;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(46, 13, 18, .45);
}
.an-consent-modal[hidden] { display: none !important; }
.an-consent-modal-card {
  background: var(--an-cream-card); border-radius: var(--an-radius-card); max-width: 480px; width: 100%;
  max-height: 86vh; overflow-y: auto; padding: 24px; box-shadow: 0 20px 60px rgba(46, 13, 18, .35);
}
.an-consent-cat { display: flex; flex-direction: column; gap: 16px; margin: 16px 0 20px; }
.an-consent-cat-row { display: flex; gap: 14px; align-items: flex-start; }
.an-consent-cat-title { font-weight: 600; color: var(--an-ink); margin: 0 0 2px; font-size: 14.5px; }
.an-consent-cat-desc { font-size: 13px; color: var(--an-ink-muted); margin: 0; line-height: 1.45; }
.an-consent-actions--modal { justify-content: flex-end; }
.an-consent-reload-note { font-size: 12px; color: var(--an-ink-muted); line-height: 1.45; margin: 0 0 14px; }

.an-consent-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; margin-top: 2px; }
.an-consent-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.an-consent-switch span { position: absolute; inset: 0; background: var(--an-taupe); border-radius: var(--an-radius-pill); transition: background var(--an-transition); }
.an-consent-switch span::before { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform var(--an-transition); }
.an-consent-switch input:checked + span { background: var(--an-gold-strong); }
.an-consent-switch input:checked + span::before { transform: translateX(18px); }
.an-consent-switch.is-locked { opacity: .7; }
.an-consent-switch input:focus-visible + span { outline: var(--an-focus); outline-offset: 3px; }

.an-consent-embed-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--an-cream-tint); border: 1px dashed var(--an-taupe); border-radius: 16px;
  padding: 24px 16px; text-align: center; width: 100%; height: 100%; min-height: 180px;
}
.an-consent-embed-placeholder p { color: var(--an-ink-soft); font-size: 13.5px; margin: 0; max-width: 32ch; }

.an-consent-reopen { color: inherit; text-decoration: underline; cursor: pointer; }
.an-consent-reopen:hover { color: var(--an-gold); }

/* ≤800px: the fixed .an-mobilebar (front.css:54, bottom:0, ~76px tall incl. safe-area) must stay
   visible/tappable BELOW the banner — same clearance-band approach as the hero-CTA precedent
   (front.css "Mobile overhaul 2026-07-14", margin-bottom:96px). Checker round fix. */
@media (max-width: 800px) {
  .an-consent-banner { bottom: calc(86px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  .an-consent-banner { left: 10px; right: 10px; padding: 16px; }
  .an-consent-actions { width: 100%; justify-content: stretch; }
  .an-consent-btn { flex: 1 1 auto; text-align: center; }
}