/* The site's consent banner (core/templates/core/_consent.html), shown by
   static/js/consent.js when no choice is stored; the markup ships hidden.
   Its own file because three shells carry the banner: the site's pages and
   the ad funnel, which have tokens.css, and a page built in the hub
   (core/templates/core/ghl/page.html), which has no token at all, so every
   colour here is a token with a plain fallback behind it.

   The [hidden] rules are load-bearing: a display value on the class would
   beat the attribute, and the banner would show to everyone, choice or not.
   Accept and Reject share one modifier so neither can be made the louder
   one by accident. Its own button class rather than .btn, because the
   landing page resets .btn wholesale (funnel-lp.css). */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 1rem; pointer-events: none; }
.consent[hidden] { display: none; }
.consent__inner {
  pointer-events: auto; max-width: 720px; margin: 0 auto;
  background: var(--cream-card, #ffffff); color: var(--ink, #111111); border: 1px solid var(--line-strong, #c8c8c8);
  border-radius: var(--radius-lg, 14px); box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.18)); padding: 1.2rem 1.3rem;
  font-family: var(--sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); font-size: 0.92rem; line-height: 1.5;
}
.consent__title { margin: 0 0 0.35rem; font-weight: 800; font-size: 1rem; }
.consent__body { margin: 0 0 0.9rem; color: var(--ink-body, #333333); }
.consent__body a { color: var(--ink, #111111); text-decoration: underline; }
.consent__options { margin: 0 0 0.9rem; padding: 0.8rem 0.9rem; border: 1px solid var(--line, #dddddd); border-radius: var(--radius, 10px); }
.consent__options[hidden] { display: none; }
.consent__option { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.88rem; cursor: pointer; }
.consent__option input { margin-top: 0.25em; flex: none; }
.consent__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.consent__btn {
  font: inherit; font-weight: 700; padding: 0.6em 1.1em; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong, #c8c8c8); background: transparent; color: var(--ink, #111111);
}
.consent__btn[hidden] { display: none; }
.consent__btn--primary { background: var(--ink, #111111); color: var(--parchment, #ffffff); border-color: var(--ink, #111111); }
.consent__btn--primary:hover { opacity: 0.9; }
.consent__btn:focus-visible { outline: 2px solid var(--terracotta, #c2410c); outline-offset: 2px; }
@media (max-width: 480px) {
  .consent__actions .consent__btn { flex: 1 1 100%; text-align: center; }
}
/* The banner test's pop-up (core/consent_test.py): the same box, centred in
   front of the page and over everything, with the page blurred behind it.
   The veil is black in both themes on purpose, since it dims rather than
   colours. consent.js adds .consent-locked to <html> while it is up. */
.consent--modal {
  top: 0; display: flex; align-items: center; justify-content: center;
  z-index: 1000; pointer-events: auto; overflow-y: auto;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.consent--modal .consent__inner { width: 100%; max-width: 560px; }
html.consent-locked { overflow: hidden; }