/*
 * Shared bottom-sheet prompt used by the cookie banner, the PWA install
 * prompt and the notification prompt.
 *
 * All three used to build their own inline styles in JavaScript, which is why
 * they never quite matched each other and ignored the tenant's palette. They
 * now share one class set, driven by the --theme-* custom properties from
 * theme.css, so a tenant who changes their brand colour changes these too.
 */

:root {
  --consent-radius: 16px;
  --consent-gap: clamp(12px, 4vw, 20px);
}

/* ---------------------------------------------------------------- card ---- */

.mii-prompt {
  position: fixed;
  left: 50%;
  bottom: clamp(12px, 2.5vh, 20px);
  transform: translateX(-50%);
  z-index: 1060;
  box-sizing: border-box;
  width: min(720px, calc(100vw - 2 * var(--consent-gap)));
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--theme-surface-elevated, #fff);
  color: var(--theme-text, #012970);
  border: 1px solid var(--theme-border, #dce1f8);
  border-radius: var(--consent-radius);
  box-shadow: 0 12px 32px -8px var(--theme-shadow-color, rgba(1, 41, 112, 0.15)),
              0 2px 8px -2px var(--theme-shadow-color, rgba(1, 41, 112, 0.15));
  animation: mii-prompt-in 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes mii-prompt-in {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* A slide-up is decoration. For someone who gets motion sick from it, it is
   not - and this card appears unrequested on every first visit. */
@media (prefers-reduced-motion: reduce) {
  .mii-prompt,
  .mii-consent-dialog { animation: none; }
}

.mii-prompt__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--theme-primary, #4154f1);
  background: rgba(var(--theme-primary-rgb, 65, 84, 241), 0.1);
}

.mii-prompt__body { flex: 1 1 auto; min-width: 0; }

.mii-prompt__title {
  margin: 0 0 2px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}

.mii-prompt__text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--theme-text-muted, #6c757d);
}

.mii-prompt__links {
  margin-top: 8px;
  font-size: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.mii-prompt__links a { color: var(--theme-primary, #4154f1); text-decoration: underline; }
.mii-prompt__links span[aria-hidden] { color: var(--theme-border, #dce1f8); }

.mii-prompt__actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* ------------------------------------------------------------- buttons ---- */

.mii-btn {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.mii-btn:focus-visible {
  outline: 2px solid var(--theme-primary, #4154f1);
  outline-offset: 2px;
}

/*
 * EVERY state below declares colour, background AND border together.
 *
 * That is not defensive style for its own sake. owl-carousel's
 * docs.theme.min.css is loaded site-wide and carries a bare
 *   button:hover, button:focus { background-color:#007095; color:#fff }
 * at specificity (0,1,1), which outranks any single class. Declaring only the
 * background on hover let its white text through, and white text on a
 * near-white hover fill is invisible - which is exactly what happened.
 *
 * A single-class rule (0,1,0) loses to that. A class + pseudo-class (0,2,0)
 * wins, so each variant restates its base appearance on :focus and its
 * interactive appearance on :hover / :focus-visible. Leave a property out of
 * one of those states and the global rule fills the gap again.
 *
 * Hover fills are translucent tints over the card's own surface rather than
 * fixed colours, so they read correctly whatever palette the tenant's theme
 * supplies - light, dark, or a brand colour like the orange this first
 * surfaced on.
 */

/*
 * Accept and reject are ONE class on purpose.
 *
 * DPDP s.6(1) requires consent to be free. A prominent "Accept all" beside a
 * greyed-out "Reject" is the standard way of failing that test, so the two
 * choices are given identical weight and only differ in label. If a future
 * change makes accept louder than reject, it stops being consent.
 */
.mii-btn--choice,
.mii-btn--choice:focus {
  background: var(--theme-surface, #fff);
  color: var(--theme-text, #012970);
  border-color: var(--theme-border, #dce1f8);
}
.mii-btn--choice:hover,
.mii-btn--choice:focus-visible {
  background: rgba(var(--theme-primary-rgb, 65, 84, 241), 0.08);
  color: var(--theme-text, #012970);
  border-color: var(--theme-primary, #4154f1);
}
.mii-btn--choice:active {
  background: rgba(var(--theme-primary-rgb, 65, 84, 241), 0.16);
  color: var(--theme-text, #012970);
  border-color: var(--theme-primary, #4154f1);
}

.mii-btn--primary,
.mii-btn--primary:focus {
  background: var(--theme-primary, #4154f1);
  /* Not hardcoded #fff: a theme with a pale primary needs its own contrast
     colour, and --theme-on-emphasis is what the palette defines for that. */
  color: var(--theme-on-emphasis, #fff);
  border-color: var(--theme-primary, #4154f1);
  box-shadow: none;
}
/* An inset overlay darkens the fill uniformly whatever the primary colour is.
   filter: brightness() would have dimmed the label along with it. */
.mii-btn--primary:hover,
.mii-btn--primary:focus-visible {
  background: var(--theme-primary, #4154f1);
  color: var(--theme-on-emphasis, #fff);
  border-color: var(--theme-primary, #4154f1);
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.12);
}
.mii-btn--primary:active {
  background: var(--theme-primary, #4154f1);
  color: var(--theme-on-emphasis, #fff);
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.2);
}

.mii-btn--ghost,
.mii-btn--ghost:focus {
  background: none;
  border-color: transparent;
  color: var(--theme-text-muted, #6c757d);
  text-decoration: underline;
  padding-inline: 8px;
}
.mii-btn--ghost:hover,
.mii-btn--ghost:focus-visible {
  background: rgba(var(--theme-text-rgb, 1, 41, 112), 0.07);
  color: var(--theme-text, #012970);
  border-color: transparent;
}
.mii-btn--ghost:active {
  background: rgba(var(--theme-text-rgb, 1, 41, 112), 0.12);
  color: var(--theme-text, #012970);
}

.mii-btn:disabled,
.mii-btn:disabled:hover,
.mii-btn:disabled:focus {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* --------------------------------------------------------------- modal ---- */

.mii-consent-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1065;
  display: grid;
  place-items: center;
  padding: var(--consent-gap);
  background: rgba(0, 0, 0, 0.45);
}

.mii-consent-dialog {
  width: min(640px, 100%);
  max-height: min(84vh, 760px);
  display: flex;
  flex-direction: column;
  background: var(--theme-surface-elevated, #fff);
  color: var(--theme-text, #012970);
  border-radius: var(--consent-radius);
  box-shadow: 0 24px 56px -12px rgba(0, 0, 0, 0.4);
  animation: mii-dialog-in 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes mii-dialog-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mii-consent-dialog__head {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--theme-border-muted, rgba(220, 225, 248, 0.65));
}
.mii-consent-dialog__head h2 { margin: 0 0 4px; font-size: 1.0625rem; font-weight: 600; }
.mii-consent-dialog__head p  { margin: 0; font-size: 0.8125rem; color: var(--theme-text-muted, #6c757d); }

.mii-consent-dialog__body { padding: 8px 20px; overflow-y: auto; flex: 1 1 auto; }

.mii-consent-dialog__foot {
  padding: 14px 20px 18px;
  border-top: 1px solid var(--theme-border-muted, rgba(220, 225, 248, 0.65));
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

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

.mii-consent-cat { padding: 14px 0; border-bottom: 1px solid var(--theme-border-muted, rgba(220, 225, 248, 0.65)); }
.mii-consent-cat:last-child { border-bottom: 0; }

.mii-consent-cat__row { display: flex; align-items: flex-start; gap: 12px; }
.mii-consent-cat__main { flex: 1 1 auto; min-width: 0; }
.mii-consent-cat__label { font-size: 0.875rem; font-weight: 600; }
.mii-consent-cat__summary { margin: 2px 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--theme-text-muted, #6c757d); }
.mii-consent-cat__basis { margin: 6px 0 0; font-size: 0.6875rem; color: var(--theme-text-muted, #6c757d); opacity: 0.85; }

.mii-consent-disclose,
.mii-consent-disclose:focus {
  margin-top: 8px;
  font-size: 0.75rem;
  background: none;
  border: 0;
  padding: 0;
  color: var(--theme-primary, #4154f1);
  text-decoration: underline;
  cursor: pointer;
}
.mii-consent-disclose:hover,
.mii-consent-disclose:focus-visible {
  background: none;
  color: var(--theme-primary, #4154f1);
  text-decoration-thickness: 2px;
}
.mii-consent-disclose:focus-visible { outline: 2px solid var(--theme-primary, #4154f1); outline-offset: 2px; }

.mii-consent-table-wrap { margin-top: 10px; overflow-x: auto; }
.mii-consent-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.mii-consent-table th,
.mii-consent-table td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--theme-border-muted, rgba(220, 225, 248, 0.65));
  vertical-align: top;
}
.mii-consent-table th { font-weight: 600; background: var(--theme-surface-muted, #f6f9ff); white-space: nowrap; }
.mii-consent-table td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }

/* --------------------------------------------------------------- switch --- */

.mii-switch { flex: 0 0 auto; position: relative; display: inline-block; width: 42px; height: 24px; }
.mii-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mii-switch__track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--theme-border, #dce1f8);
  transition: background-color 160ms ease;
  pointer-events: none;
}
.mii-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 160ms ease;
}
.mii-switch input:checked + .mii-switch__track { background: var(--theme-primary, #4154f1); }
.mii-switch input:checked + .mii-switch__track::after { transform: translateX(18px); }
.mii-switch input:focus-visible + .mii-switch__track { outline: 2px solid var(--theme-primary, #4154f1); outline-offset: 2px; }
.mii-switch input:disabled { cursor: not-allowed; }
.mii-switch input:disabled + .mii-switch__track { opacity: 0.55; }

/* ------------------------------------------------------- reopen control --- */

.mii-consent-reopen,
.mii-consent-reopen:focus {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 1040;
  width: 38px;
  height: 38px;
  /* Explicit, not inherited: the site-wide docs.theme.min.css `button` rule
     applies padding:16px 32px, which a 38px border-box cannot absorb - the
     element grew to 66x35 and border-radius:50% rendered it as an ellipse.
     line-height likewise, or the glyph sits off-centre in the circle. */
  padding: 0;
  line-height: 1;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--theme-border, #dce1f8);
  background: var(--theme-surface-elevated, #fff);
  color: var(--theme-text-muted, #6c757d);
  box-shadow: 0 4px 12px -4px var(--theme-shadow-color, rgba(1, 41, 112, 0.15));
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 140ms ease, color 140ms ease, background-color 140ms ease;
}
.mii-consent-reopen:hover,
.mii-consent-reopen:focus-visible {
  opacity: 1;
  background: var(--theme-surface-elevated, #fff);
  color: var(--theme-primary, #4154f1);
  border-color: var(--theme-primary, #4154f1);
}
.mii-consent-reopen:focus-visible { outline: 2px solid var(--theme-primary, #4154f1); outline-offset: 2px; }

/* Bootstrap Icons render as an inline ::before glyph whose own line box would
   otherwise offset it inside the grid cell. */
.mii-consent-reopen i {
  display: block;
  font-size: 17px;
  line-height: 1;
}

/* --------------------------------------------------------------- mobile --- */

@media (max-width: 576px) {
  .mii-prompt {
    left: var(--consent-gap);
    right: var(--consent-gap);
    transform: none;
    width: auto;
    animation-name: mii-prompt-in-mobile;
  }
  @keyframes mii-prompt-in-mobile {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .mii-prompt__actions > .mii-btn { flex: 1 1 auto; text-align: center; }
  .mii-consent-dialog__foot > .mii-btn { flex: 1 1 auto; text-align: center; }
  .mii-consent-reopen { width: 34px; height: 34px; bottom: 12px; left: 12px; }
}

/* ----------------------------------------------------------------- dark --- */

@media (prefers-color-scheme: dark) {
  .mii-prompt,
  .mii-consent-dialog {
    background: var(--theme-surface-elevated, #1b2233);
    border-color: var(--theme-border, #2c3446);
  }
  .mii-consent-backdrop { background: rgba(0, 0, 0, 0.6); }
}