/**
 * The checkout gate dialog — sign in, and the prompts around addresses.
 *
 * It carries its own copy of the token block, and has to.
 *
 * The dialog is appended to <body> so nothing on the page can clip it or trap
 * it in a stacking context. That also puts it outside .gms-checkout, which is
 * where those tokens were declared — so --gms-accent and --gms-accent-ink
 * resolved to nothing inside it. An unset custom property does not fall back to
 * anything; it invalidates the whole declaration. `background: var(--gms-accent)`
 * simply did not apply, and neither did the pill radius, so the primary button
 * in this dialog rendered as dark text on the panel with square corners: a
 * button that did not look like a button, on white, with no structure.
 *
 * Same values as checkout.css. Duplicated rather than moved to :root because a
 * theme is entitled to set --gms-brand per section, and hoisting these to the
 * document would quietly flatten that.
 */

.gms-modal,
.gms-modal * { box-sizing: border-box; }

.gms-modal {
  --gms-ink: #14161a; --gms-ink-2: #5b6270; --gms-ink-3: #6b7280;
  --gms-line: rgba(20,22,26,.12); --gms-line-2: rgba(20,22,26,.07);
  --gms-surface: #fff; --gms-tint: #f6f7f9;
  --gms-accent: var(--gms-brand, #2563eb); --gms-accent-ink: var(--gms-brand-ink, #fff);
  --gms-good: #067647; --gms-bad: #b42318;
  --gms-r: 12px; --gms-r-lg: 18px; --gms-r-pill: 999px;
  --gms-muted: var(--gms-ink-2);
  --gms-radius: var(--gms-r);
  --gms-sunken: var(--gms-tint);

  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 20px;
  font-family: var(--gms-font, inherit);
}

.gms-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 17, 21, .5);
  backdrop-filter: blur(2px);
  animation: none;
}

.gms-modal__panel {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--gms-surface, #fff);
  border-radius: 18px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .35);
  animation: none;
  color: var(--gms-ink, #14161a);
  opacity: 1;
}

/* Transform only, never opacity. An animation that stalls — a background tab,
   a low-power device, a reduced-motion setting — must not be able to leave the
   dialog invisible but still present and blocking. */
@keyframes gms-fade { from { transform: scale(1.02); } }
@keyframes gms-rise { from { transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  .gms-modal__scrim,
  .gms-modal__panel { animation: none; }
}

/* The page behind must not scroll while a dialog is open, or the dialog
   appears to drift as the reader tries to scroll it. */
body.gms-modal-open { overflow: hidden; }

.gms-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 0;
}

.gms-modal__head h2 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }

.gms-modal__x {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--gms-tint, #f4f6f8);
  font-size: 19px;
  line-height: 1;
  color: var(--gms-ink-2, #5b6270);
  cursor: pointer;
}

.gms-modal__x:hover { background: var(--gms-line-2, #e9ecef); }

.gms-modal__body { padding: 14px 20px 22px; }

.gms-modal__lead {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gms-ink-2, #5b6270);
}

.gms-modal__error {
  min-height: 18px;
  margin: 4px 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gms-bad, #b42318);
}

.gms-modal__body .gms-btn-solid { width: 100%; justify-content: center; }

.gms-modal__link {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--gms-ink-2, #5b6270);
  text-decoration: underline;
  cursor: pointer;
}

/* Email / mobile switch. */
.gms-modal__tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: var(--gms-tint, #f4f6f8);
}

.gms-modal__tabs button {
  flex: 1 1 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--gms-ink-2, #5b6270);
  cursor: pointer;
}

.gms-modal__tabs button.is-on {
  background: var(--gms-surface, #fff);
  color: var(--gms-ink, #14161a);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

@media (max-width: 480px) {
  .gms-modal { padding: 0; place-items: end center; }

  /* A sheet from the bottom on a phone: closer to the thumb, and it does not
     fight the on-screen keyboard the way a centred dialog does. */
  .gms-modal__panel {
    max-width: none;
    border-radius: 18px 18px 0 0;
    max-height: 88vh;
    animation: none;
  }
}

@keyframes gms-sheet { from { transform: translateY(100%); } }