/*
 * popup.css — the shell around the trial ORDER FORM.
 * ---------------------------------------------------------------------------
 * The order form itself is a light sheet (see order-form.css — a port of the
 * Tube Profits Challenge Get-VIP order modal, deliberately white so the card
 * field, the coupon-style add-on cards and the summary read as a real
 * checkout). So this file only owns the <dialog> chrome: size, radius,
 * backdrop, scroll. Every rule stays namespaced under #mos-start-dialog so
 * nothing here can leak into a page's own dark styling.
 *
 * SPECIFICITY (2026-09-21): shared.css still carries the ORIGINAL lead-capture
 * dialog — `dialog#mos-start-dialog { width: min(440px, 92vw); background:
 * var(--bg-raised) }` plus `.msd-inner { padding: clamp(24px,5vw,34px) }` —
 * from when this popup was a small dark name/email box. /start loads
 * shared.css, so an id-only selector here LOSES to it (element+id beats id)
 * and the checkout came out 440px wide, dark, and padded away from the edges.
 * Every rule below therefore matches `dialog#mos-start-dialog` too, and the
 * inner scroller explicitly zeroes that inherited padding — the hero band and
 * the bandeau must run edge to edge.
 */
dialog#mos-start-dialog,
#mos-start-dialog {
  border: none;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  color: #0f172a;
  width: min(760px, calc(100% - 1rem));
  max-width: 760px;
  max-height: 92vh;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
dialog#mos-start-dialog::backdrop,
#mos-start-dialog::backdrop {
  background: rgba(4, 4, 12, 0.72);
  backdrop-filter: blur(3px);
}
/* The scroll container. The submit button lives at the BOTTOM of this scroll
   (not pinned) — same as the reference design, so the buyer passes the add-ons
   and the summary on the way to it. */
dialog#mos-start-dialog .msd-inner,
#mos-start-dialog .msd-inner {
  position: relative;
  padding: 0;
  max-height: 92vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Full-bleed on small screens: a 760px checkout squeezed into a phone with
   rounded corners wastes the width the address fields need. */
@media (max-width: 560px) {
  dialog#mos-start-dialog,
  #mos-start-dialog {
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }
  dialog#mos-start-dialog .msd-inner,
  #mos-start-dialog .msd-inner { max-height: 100vh; }
}