/* ============================================================================
   O6 APPLIED — CONSENT BANNER
   ============================================================================
   Uses the same tokens as the rest of the site. Two states share one stylesheet:
   the first-visit bar pinned to the bottom, and the preferences dialog opened
   from the footer link.

   The three buttons are deliberately the SAME SIZE and the same visual weight
   apart from one accent fill. Regulators have been explicit that a prominent
   "Accept" beside a greyed-out or buried "Reject" is not a free choice, and a
   stylesheet is where that requirement is actually won or lost.
   ============================================================================ */

.o6-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
  display: flex; justify-content: center;
  padding: 16px;
  animation: o6ConsentIn .22s ease;
}

@keyframes o6ConsentIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Preferences mode covers the page, because it is a deliberate visit. */
.o6-consent.prefs {
  top: 0; align-items: center;
  background: rgba(15, 17, 21, .55);
  backdrop-filter: blur(2px);
  padding: 20px;
}

.o6-consent-panel {
  background: #fff;
  border: 1px solid #e6e7ea;
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(15, 17, 21, .20);
  padding: 16px 18px;
  width: 100%; max-width: 540px;
  max-height: calc(100vh - 40px);
  overflow: auto;
}
/* The preferences dialog is a deliberate visit, so it gets the roomier
   treatment. The first-visit bar stays small and out of the way. */
.o6-consent.prefs .o6-consent-panel { max-width: 680px; padding: 22px 24px; border-radius: 20px; }
.o6-consent.prefs .o6-consent-panel { box-shadow: 0 30px 80px rgba(0, 0, 0, .4); }

.o6-consent-head h2 {
  margin: 0 0 4px;
  font-size: 15px; letter-spacing: -.02em;
  color: #1F2228;
}
.o6-consent-head p {
  margin: 0 0 12px;
  font-size: 12.5px; line-height: 1.5; color: #6f7680;
}
.o6-consent.prefs .o6-consent-head h2 { font-size: 18px; margin-bottom: 6px; }
.o6-consent.prefs .o6-consent-head p  { font-size: 13px; margin-bottom: 16px; }

/* --- categories ----------------------------------------------------------- */

.o6-consent-cats { display: grid; gap: 5px; margin-bottom: 12px; }
.o6-consent.prefs .o6-consent-cats { gap: 8px; margin-bottom: 16px; }

.o6-consent-row {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid #e6e7ea; border-radius: 11px;
  padding: 8px 11px; cursor: pointer;
  transition: .14s;
}
.o6-consent.prefs .o6-consent-row { padding: 12px 14px; border-radius: 13px; }
.o6-consent-row:hover { border-color: #cfc6f7; background: #fdfcff; }
.o6-consent-row.locked { cursor: default; background: #fafafb; }
.o6-consent-row.locked:hover { border-color: #e6e7ea; }

.o6-consent-row input {
  margin-top: 2px; width: 17px; height: 17px;
  accent-color: #7448FF; flex: 0 0 auto;
}

.o6-consent-copy { display: flex; flex-direction: column; gap: 3px; }
.o6-consent-copy b { font-size: 12.5px; color: #1F2228; }
.o6-consent-sum { font-size: 11.5px; color: #6f7680; line-height: 1.45; }
.o6-consent.prefs .o6-consent-copy b { font-size: 13.5px; }
.o6-consent.prefs .o6-consent-sum { font-size: 12.5px; color: #59616b; }
.o6-consent-detail { display: none; font-size: 11.5px; color: #868d97; line-height: 1.55; }
.o6-consent.prefs .o6-consent-detail { display: block; }

.o6-consent-lock {
  display: inline-block; margin-left: 6px;
  background: #efeff2; color: #6c737e;
  border-radius: 999px; padding: 1px 7px;
  font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  vertical-align: middle;
}

/* --- actions -------------------------------------------------------------- */
/* Equal prominence is a legal requirement here, not a style preference.
   All three share width, padding, weight and font size. */

.o6-consent-actions {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}

.o6-consent-actions .o6-btn {
  border: 1px solid #d9dce2; background: #fff; color: #1F2228;
  border-radius: 10px; padding: 9px 10px;
  font-size: 11.5px; font-weight: 800; font-family: inherit;
  cursor: pointer; transition: .14s; text-align: center;
}
.o6-consent.prefs .o6-consent-actions .o6-btn { padding: 11px 14px; font-size: 12.5px; border-radius: 12px; }
.o6-consent-actions .o6-btn:hover {
  border-color: #b9b0e8; transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(31, 34, 40, .08);
}
.o6-consent-actions .o6-btn.primary {
  background: #7448FF; border-color: #7448FF; color: #fff;
}
.o6-consent-actions .o6-btn:focus-visible {
  outline: 2px solid #7448FF; outline-offset: 2px;
}

.o6-consent-foot {
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid #f0f0f3;
  font-size: 11px; color: #868d97; line-height: 1.5;
}
.o6-consent.prefs .o6-consent-foot { margin-top: 14px; padding-top: 12px; font-size: 11.5px; }
.o6-consent-foot a { color: #7448FF; }

/* Stop the page scrolling behind the preferences dialog. */
html.o6-consent-open, html.o6-consent-open body { overflow: hidden; }

/* --- footer link ---------------------------------------------------------- */

.o6-privacy-links {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 12px; align-items: center;
}
.o6-privacy-links button {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 560px) {
  .o6-consent { padding: 10px; }
  .o6-consent-panel { padding: 18px 16px; border-radius: 16px; }
  .o6-consent-actions { grid-template-columns: 1fr; }
  /* Order matters on mobile: the affirmative action must not be the one under
     the thumb by default. Accept last, not first. */
  .o6-consent-actions .o6-btn.primary { order: 3; }
}

@media print { .o6-consent { display: none !important; } }