/* ============================================================
   ScolerAI — consent.css
   The analytics consent banner (js/consent.js), loaded by every page
   that loads that script: the home deck, the About page, the product
   tour and the privacy page. Those pages share no stylesheet, so this
   file carries its own colours and type and assumes nothing.

   Rules that are not taste:
   - Accept and Decline are ONE class. Same fill, same size, same
     weight; neither is a text link and neither is pre-selected.
   - Non-blocking: a card pinned to the bottom of the view, no overlay,
     the page stays usable behind it.
   - Every control has a visible focus ring and a 44px target.
   ============================================================ */

.consent {
  position: fixed;
  z-index: 1000;
  left: 16px;
  right: 16px;
  bottom: 16px;
  box-sizing: border-box;
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 18px;
  background: #14131C;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}
.consent:focus { outline: none; }
.consent:focus-visible { outline: 3px solid #A78BFA; outline-offset: 3px; }

.consent__text { margin: 0 0 12px; }
.consent__status {
  margin: 0 0 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
}
.consent__link {
  color: #C4B5FD;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.consent__link:hover { color: #FFFFFF; }

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.consent__btn {
  flex: 1 1 0;
  min-width: 120px;
  min-height: 44px;
  margin: 0;
  padding: 10px 16px;
  border: 1.5px solid #FFFFFF;
  border-radius: 999px;
  background: #FFFFFF;
  color: #14131C;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.consent__btn:hover { background: #EDE9FE; border-color: #EDE9FE; }
.consent__link:focus-visible,
.consent__btn:focus-visible { outline: 3px solid #A78BFA; outline-offset: 2px; }

@media (max-width: 480px) {
  .consent { left: 12px; right: 12px; bottom: 12px; padding: 14px 14px; }
}

@media (prefers-reduced-motion: no-preference) {
  .consent { animation: consent-in 220ms ease-out; }
  @keyframes consent-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}

/* The footer's "Cookie settings" control: a <button>, because it opens the
   banner rather than navigating, dressed as the links beside it. The reset
   is wrapped in :where() so it carries NO specificity: each page's own
   footer class (loaded before this file) keeps its colour and size. */
:where(.consent-link) {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}
:where(.consent-link):hover { text-decoration: underline; text-underline-offset: 3px; }
:where(.consent-link):focus-visible { outline: 2px solid #A78BFA; outline-offset: 2px; }