/* ==========================================================================
   Google Ads notice (templates/_ad_consent_banner.html, driven by
   site/js/ad_consent.js). Two modes:
     .mcw-consent--notice  measured by default: a quiet see-through pill in the
                           bottom-left corner, one line, text buttons
     .mcw-consent--ask     asked first: the plain bottom bar with Accept /
                           No thanks, as it was when everyone was asked
   No overlay, no backdrop, no focus trap. While it is open the page gets
   bottom padding equal to its height, so nothing (the signup button
   included) can end up stuck behind it.
   Self-contained: used on the marketing site, legacy pages and the React
   /register page.
   ========================================================================== */
.mcw-consent-open body { padding-bottom: calc(var(--mcw-consent-h, 0px) + 24px); }

.mcw-consent {
  position: fixed; z-index: 1200; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem;
  padding: .625rem 1rem calc(.625rem + env(safe-area-inset-bottom, 0px));
  background: #fff; color: #171a2b; border-top: 1px solid #d5d8e6;
  box-shadow: 0 -8px 24px -16px rgba(13, 15, 26, .35);
  font: 400 .875rem/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.mcw-consent[hidden], .mcw-consent [hidden] { display: none !important; }
.mcw-consent__text { margin: 0; flex: 1 1 28rem; max-width: 48rem; }
.mcw-consent__text a { color: #3d27d6; text-decoration: underline; }
.mcw-consent__actions { display: flex; align-items: center; gap: .5rem; flex: none; }
.mcw-consent__btn {
  min-height: 36px; padding: .35rem 1rem; border-radius: 8px; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: .875rem; line-height: 1;
  background: #fff; color: #171a2b; border: 1px solid #5b6172;
}
.mcw-consent__btn:hover { background: #f2f3f9; }
.mcw-consent__close {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: #5b6172; cursor: pointer; font-family: inherit; font-weight: 400; font-size: 1.25rem; line-height: 1;
}
.mcw-consent__close:hover { background: #f2f3f9; }
/* "Opt out" inside the notice's sentence, after Privacy: a text button. */
.mcw-consent__inline {
  display: inline; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: #3d27d6; text-decoration: underline;
}
.mcw-consent__btn:focus-visible, .mcw-consent__close:focus-visible, .mcw-consent__text a:focus-visible,
.mcw-consent__inline:focus-visible, .mcw-consent-link:focus-visible { outline: 2px solid #513bf4; outline-offset: 2px; }

/* Phones: keep the ask short so it covers as little as possible. */
@media (max-width: 480px) {
  .mcw-consent { padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom, 0px)); font-size: .8125rem; gap: .375rem; }
  .mcw-consent__text { flex-basis: 100%; }
  .mcw-consent__actions { width: 100%; }
  .mcw-consent__btn { flex: 1; min-height: 34px; }
}

/* ---- The notice: measured by default, so it only has to be seen. ---------
   Deliberately quiet (owner rejected a full-width bar): one line, 12px,
   see-through, in the corner, buttons as text. */
.mcw-consent.mcw-consent--notice {
  left: 12px; right: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  max-width: min(430px, calc(100% - 24px)); margin: 0;
  flex-wrap: nowrap; justify-content: flex-start; gap: 2px;
  padding: 4px 4px 4px 12px; border-radius: 999px;
  font-size: 12px; line-height: 1.3; color: #334155;
  background: #fff; /* solid where backdrop-filter is unsupported */
  border: 1px solid rgba(15, 23, 42, .08); box-shadow: 0 2px 10px rgba(15, 23, 42, .08);
}
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  .mcw-consent.mcw-consent--notice {
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
}
.mcw-consent--notice .mcw-consent__text { flex: 1 1 auto; max-width: none; }
.mcw-consent--notice .mcw-consent__text a, .mcw-consent--notice .mcw-consent__inline { color: #1d4ed8; }
.mcw-consent--notice .mcw-consent__actions { width: auto; gap: 2px; flex: none; }
.mcw-consent--notice .mcw-consent__btn {
  flex: none; min-height: 0; padding: 3px 6px; border: 0; border-radius: 999px; background: transparent;
  color: #1d4ed8; font-size: 12px; font-weight: 400; text-decoration: underline; white-space: nowrap;
}
.mcw-consent--notice .mcw-consent__close {
  width: 32px; height: 32px; border-radius: 999px; font-size: 20px; line-height: 1; color: #475569;
}
.mcw-consent--notice .mcw-consent__close:hover { background: rgba(15, 23, 42, .06); }

/* "Ad cookie settings" link on the React /register page (the site footer has its own). */
.mcw-consent-link-row { margin: 0; padding: .75rem 1rem 1.25rem; text-align: center; font-size: .8125rem; }
.mcw-consent-link {
  padding: 0; border: 0; background: none; color: #5b6172; text-decoration: underline; cursor: pointer;
  font: inherit;
}
