/* ==========================================================================
   Partnership request pop-up — ported from the static placeholder's css/modal.css
   (Figma 1440:4576 form · 1440:4824 thank-you), so the form looks the same before
   and after the switch. Markup: templates/partials/popup/partner_popup.html.
   Behaviour: static/js/lead_forms.js.

   Plain CSS, not Tailwind classes: this is a near line-for-line copy, which keeps it
   diffable against the placeholder when either side changes. It loads after the
   Tailwind build and is unlayered, so it wins over Tailwind's reset without
   !important. Changes from the original:
   - the placeholder's design tokens are declared on .modal instead of :root, so
     nothing leaks into the rest of the page;
   - .btn / .btn--primary are folded into .modal__submit (the Wagtail page has no .btn);
   - the waitlist-only rules are left out: our waitlist pop-up is still Tailwind;
   - z-index matches the other Wagtail pop-ups, above the fixed menu bar and the
     countdown banner.
   ========================================================================== */

/* ---- Overlay ----------------------------------------------------------- */
.modal {
  --bg-1: #111111;
  --black: #131313;
  --white-soft: #fbfbfb;
  --grey: #e9eaed;
  --grey-darker: #babcc3;
  --primary: #d8ff00;
  --primary-hover: #c2e600;
  --primary-light-active: #e6ff59;
  --transparent-2: rgba(219, 219, 219, 0.10);
  --radius-btn: 12px;
  --font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Figma draws the card at 1128px on a 1440px canvas. At that size it eats ~75% of
     a laptop screen and reads as a takeover, so the whole pop-up is scaled down.
     Type and spacing follow these three values. */
  --modal-w: 880px;
  --modal-pad-x: 48px;
  --modal-pad-y: 28px;

  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.8);
  overflow-y: auto;
  overscroll-behavior: contain;
  font-family: var(--font);
  font-weight: 300;
  line-height: 1.5;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.modal.is-open { display: flex; }

/* ---- Card -------------------------------------------------------------- */
.modal__card {
  position: relative;
  width: 100%;
  max-width: var(--modal-w);
  margin: auto;
  padding: var(--modal-pad-y) var(--modal-pad-x);
  background: var(--bg-1);
  border: 4px solid var(--primary);
  border-radius: var(--radius-btn);
  /* Never taller than the screen: scroll inside the card, so the Send button stays
     reachable instead of the whole overlay scrolling away. */
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--white-soft);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.modal__close:hover { color: var(--primary); background: rgba(255, 255, 255, 0.08); }

.modal__panel { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.modal__panel[hidden] { display: none; }

.modal__logo { width: 200px; max-width: 100%; height: auto; align-self: flex-start; }

/* ---- Headings ---------------------------------------------------------- */
.modal__head { display: flex; flex-direction: column; gap: 10px; width: 100%; }

.modal__title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: -0.02em;
  color: var(--primary-light-active);
}

.modal__lead {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--white-soft);
}

/* ---- Form -------------------------------------------------------------- */
.modal__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* ---- Fields card ------------------------------------------------------- */
.modal__fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 20px;
  background: rgba(219, 219, 219, 0.2);
  border: 2px solid var(--white-soft);
  border-radius: var(--radius-btn);
}

/* Single-line rows centre their label against the field; the interests row has a
   tall stack, so its label top-aligns with the first checkbox instead. */
.modal__row { display: flex; gap: 24px; align-items: center; width: 100%; }
.modal__row--start { align-items: flex-start; }
.modal__row--start .modal__label { padding-top: 8px; }

.modal__label {
  flex: 0 0 140px;
  width: 140px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--white-soft);
}
.modal__label-hint {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 300;
  line-height: 18px;
  letter-spacing: 0.02em;
  text-transform: none;
}

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

.modal__input {
  display: block;
  width: 100%;
  height: 36px;
  padding: 0 16px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 300;
  line-height: 36px;
  color: var(--white-soft);
  background: var(--transparent-2);
  border: 0;
  border-radius: 8px;
  outline: none;
}
.modal__input::placeholder { color: var(--grey-darker); }
.modal__input:focus-visible { box-shadow: 0 0 0 2px var(--primary); }

/* ---- Interest checkboxes ----------------------------------------------- */
.modal__checks { display: flex; flex-direction: column; gap: 6px; }

.modal__check {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 34px;
  padding: 0 16px;
  background: var(--transparent-2);
  border-radius: 8px;
  cursor: pointer;
}
.modal__check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.modal__box {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--black);
  border: 2px solid var(--white-soft);
  border-radius: 4px;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.modal__box svg { opacity: 0; transition: opacity 0.12s ease; }

.modal__check input:checked + .modal__box {
  background: var(--primary);
  border-color: var(--primary);
}
.modal__check input:checked + .modal__box svg { opacity: 1; }
.modal__check input:focus-visible + .modal__box { box-shadow: 0 0 0 2px var(--primary); }

.modal__check-text {
  font-size: 15px;
  font-weight: 300;
  line-height: 20px;
  color: var(--white-soft);
}

/* ---- Consent + submit -------------------------------------------------- */
.modal__consent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--primary-light-active);
  cursor: pointer;
}
.modal__consent input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.modal__box--consent {
  width: 18px;
  height: 18px;
  border-color: var(--primary-light-active);
}
.modal__consent input:checked + .modal__box {
  background: var(--primary);
  border-color: var(--primary);
}
.modal__consent input:checked + .modal__box svg { opacity: 1; }
.modal__consent input:focus-visible + .modal__box { box-shadow: 0 0 0 2px var(--primary); }

.modal__error {
  width: 100%;
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  text-align: center;
  color: #ff6b6b;
}
.modal__error[hidden] { display: none; }

.modal__actions { display: flex; justify-content: center; padding-top: 4px; }

/* The placeholder's .btn .btn--primary. */
.modal__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 1.125rem 1.75rem;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--black);
  background: var(--primary);
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.modal__submit:hover { background: var(--primary-hover); }
.modal__submit:active { transform: translateY(1px); }

/* Before the short-screen steps below, as on the placeholder (base.css loads before
   modal.css), so on a short phone their smaller padding wins. */
@media (max-width: 480px) {
  .modal__submit {
    font-size: 0.75rem;
    padding: 1rem 1.25rem;
    white-space: normal;
    text-align: center;
    max-width: 100%;
  }
}

/* Figma's default state is the greyed-out button: it lights up once the required
   fields, an interest and the consent box are all filled in. */
.modal__submit:disabled {
  background: var(--grey);
  color: var(--grey-darker);
  border-color: transparent;
  cursor: not-allowed;
}
.modal__submit:disabled:hover { background: var(--grey); }

/* Honeypot: hidden from people, filled in by bots. Not type="hidden", which bots skip. */
.modal__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Thank-you panel --------------------------------------------------- */
.modal__panel--thanks { gap: 40px; padding: 24px 0; }
.modal__panel--thanks .modal__logo { align-self: center; }

.modal__thanks-titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}
.modal__thanks-copy { display: flex; flex-direction: column; gap: 8px; text-align: center; }

.modal__thanks-title {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  line-height: 42px;
  color: var(--primary-light-active);
}
.modal__thanks-body {
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  color: var(--white-soft);
}
.modal__thanks-art { width: 280px; max-width: 100%; height: auto; }

/* ---- Responsive -------------------------------------------------------- */

/* The form must fit without an inner scrollbar. Its natural height is ~780px, so as
   the screen gets shorter the pop-up compacts in steps instead of hiding the Send
   button behind a scroll. */
@media (max-height: 950px) {
  .modal { --modal-w: 820px; --modal-pad-y: 22px; }
  .modal__logo { width: 180px; }
  .modal__title { font-size: 26px; line-height: 30px; }
  .modal__panel { gap: 12px; }
  .modal__fields { padding: 16px; gap: 8px; }
  .modal__input { height: 34px; line-height: 34px; }
  .modal__check { min-height: 32px; }
  .modal__checks { gap: 5px; }
  .modal__row--start .modal__label { padding-top: 6px; }
}

@media (max-height: 830px) {
  .modal { --modal-pad-y: 16px; --modal-pad-x: 40px; }
  .modal__logo { width: 160px; }
  .modal__title { font-size: 22px; line-height: 26px; }
  .modal__lead { font-size: 14px; }
  .modal__panel { gap: 8px; }
  .modal__form { gap: 8px; }
  .modal__fields { padding: 14px; gap: 6px; }
  .modal__input { height: 32px; line-height: 32px; }
  .modal__check { min-height: 30px; }
  .modal__checks { gap: 4px; }
  .modal__check-text { font-size: 14px; }
  .modal__consent { margin-top: 4px; font-size: 13px; }
  .modal__actions { padding-top: 0; }
  .modal__submit { padding: 0.875rem 1.5rem; }
}

@media (max-width: 900px) {
  /* Phones: the form is taller than the screen, so it must scroll. Two WebKit traps
     (iOS Safari and iOS Chrome are both WebKit, so every iPhone):
     1. A flex scroll container that centres a taller child clips the child's top
        outside the scroll range: the logo jams against the top and can't be reached.
     2. A position:fixed overlay extends behind the bottom toolbar, so the last
        element (the Send button) parks behind it, untappable.
     So no flex on phones: plain block flow scrolls from the top, and bottom padding
     plus the safe-area inset lifts the Send button clear of the toolbar. */
  .modal.is-open { display: block; }
  .modal {
    padding: 12px 12px calc(48px + env(safe-area-inset-bottom, 0px));
    --modal-pad-x: 20px;
    --modal-pad-y: 24px;
    -webkit-overflow-scrolling: touch;
  }
  .modal__card { margin: 0 auto; max-height: none; overflow: visible; }

  /* First and last name side by side, everything else full width. */
  .modal__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 8px;
    padding: 12px;
  }

  /* Label above its field: the fixed label column is too wide to keep. */
  .modal__row { grid-column: span 2; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
  .modal__control { width: 100%; }
  .modal__row:nth-child(1),
  .modal__row:nth-child(2) { grid-column: span 1; }

  .modal__label { flex-basis: auto; width: 100%; font-size: 11px; }

  .modal__logo { width: 140px; }
  .modal__title { font-size: 22px; line-height: 26px; }
  .modal__lead { display: none; }
  .modal__thanks-title { font-size: 26px; line-height: 32px; }

  .modal__input { height: 38px; line-height: 38px; }
  .modal__check { min-height: 38px; padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .modal__box,
  .modal__box svg,
  .modal__close,
  .modal__submit { transition: none; }
}