/* =============================================================
   Region-aware consent bar — EP-23 FE-23.07, D-73.

   Self-contained on purpose: the static legal pages (privacy/terms/
   subprocessors/deletion, generated by build-legal.js) do not load
   tokens.css, so every custom property here falls back to that token's
   literal value from assets/css/tokens.css — `var(--mh-token, <fallback>)`.
   Pages that DO load tokens.css (index.html, /demo/, /docs/) still pick up
   the real token and stay visually consistent with the rest of the site.
   ============================================================= */

.rp-consent {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 2147483000;
  background: var(--mh-ink-900, #0B1220);
  color: var(--mh-white, #FFFFFF);
  border-block-start: 1px solid var(--mh-ink-600, #273450);
  box-shadow: var(--mh-shadow-lg, 0 18px 40px rgba(11, 18, 32, 0.12), 0 6px 12px rgba(11, 18, 32, 0.06));
  font-family: var(--mh-font-body, 'Inter', 'Sora', system-ui, sans-serif);
}

.rp-consent__row {
  max-inline-size: var(--mh-container, 1200px);
  margin-inline: auto;
  padding: var(--mh-space-4, 16px) var(--mh-space-6, 24px);
  display: flex;
  align-items: center;
  gap: var(--mh-space-4, 16px);
  flex-wrap: wrap;
}

.rp-consent__text {
  flex: 1 1 260px;
  margin: 0;
  font-size: var(--mh-text-sm, 13px);
  line-height: var(--mh-leading-normal, 1.5);
  color: var(--mh-white, #FFFFFF);
}

.rp-consent__link {
  color: var(--mh-signal-400, #FF8A4C);
  text-decoration: underline;
}
.rp-consent__link:hover { color: var(--mh-signal-500, #FF6A1A); }

.rp-consent__actions {
  flex: 0 0 auto;
  /* Accept/Reject (and Opt out/OK) equal by construction: two 1fr columns in
     a shrink-to-fit grid both resolve to the width the WIDER button needs —
     not a magic min-width guess that a longer translated label could once
     again outgrow on just one side. */
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr 1fr;
  gap: var(--mh-space-3, 12px);
}

.rp-consent__btn {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--mh-white, #FFFFFF);
  background: transparent;
  color: var(--mh-white, #FFFFFF);
  font-family: inherit;
  font-size: var(--mh-text-sm, 13px);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--mh-radius-sm, 8px);
  padding: 10px 18px;
  min-inline-size: 96px; /* a tap-target floor only — equal width comes from the 1fr 1fr grid above */
  text-align: center;
  white-space: nowrap;
  transition: background var(--mh-dur-fast, 120ms) var(--mh-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
              color var(--mh-dur-fast, 120ms) var(--mh-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.rp-consent__btn:hover { background: var(--mh-white, #FFFFFF); color: var(--mh-ink-900, #0B1220); }
.rp-consent__btn:focus-visible {
  outline: 2px solid var(--mh-signal-500, #FF6A1A);
  outline-offset: 2px;
}

/* Below 561px the buttons wrap under the text, per the spec. In the column
   layout, `.rp-consent__text`'s `flex: 1 1 260px` basis becomes its BLOCK
   size (height), not its width — inflating the bar to ~344px tall — so the
   basis is reset to auto here (reviewer-measured ~123px after). */
@media (max-width: 560px) {
  .rp-consent__row { flex-direction: column; align-items: stretch; }
  .rp-consent__text { flex-basis: auto; }
  .rp-consent__actions { justify-content: flex-end; }
}