/* The payment screen (status/app-status-pay.js): TaleMontage's own page around the payment provider's checkout frame,
   phone first. The brand header stays; everything else of the film page steps aside while it is open. */
.shell[data-screen="pay"] > :not(.brand):not(#pay) { display: none; }
.pay { display: grid; gap: 18px; padding-top: 6px; }
.pay-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.pay-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-block: 0; padding-inline: 0 10px; border: 0; background: none; color: var(--ink-dim); font: 600 .95rem "Manrope", "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.pay-back:hover { color: var(--ink); }
.pay-secure { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: rgba(var(--wash-rgb), .05); color: var(--ink); font-size: .95rem; font-weight: 700; white-space: nowrap; }
.pay-secure svg { width: 18px; height: 18px; color: var(--accent); }

.pay-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.pay-ours { display: grid; gap: 12px; min-width: 0; }
.pay-media { overflow: hidden; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.pay-media video, .pay-media img { display: block; width: 100%; max-height: 38vh; object-fit: cover; background: #000; }
.pay-title { margin: 4px 0 0; font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.75rem; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); }
.pay-lead { margin: 0; color: var(--ink-dim); font-size: 1.02rem; line-height: 1.5; }
.pay-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 4px 0 0; }
.pay-price strong { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.pay-one-time { color: var(--ink-dim); font-size: .92rem; }
.pay-provider { margin: 4px 0 0; font-size: .82rem; line-height: 1.45; color: var(--muted); }
.pay-links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.pay-links a { display: inline-block; padding: 7px 0; color: var(--ink-dim); font-size: .88rem; text-underline-offset: 3px; }

/* The provider's half: the state line, then the frame. The frame is embedded whole -- no height cap, no clipping, no
   inner scroll -- so its footer (who sells, the terms of sale, the privacy policy) and its totals are always on the
   page; the frame sets its own height and grows with its steps. */
.pay-checkout { display: grid; gap: 10px; min-width: 0; padding: 12px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.pay-state { margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink); line-height: 1.45; }
.pay[data-state="failed"] .pay-state, .pay[data-state="unavailable"] .pay-state, .pay[data-state="cancelled"] .pay-state { border: 1px solid var(--danger); background: transparent; }
.pay[data-state="paid"] .pay-state, .pay[data-state="paid_waiting"] .pay-state { border: 1px solid var(--accent); background: transparent; }
.pay-retry { min-height: 48px; border: 0; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: 1rem; font-weight: 700; cursor: pointer; }
.pay-frame-wrap { min-width: 0; overflow: visible; }
.pay-provider-frame { width: 100%; min-width: 312px; min-height: 450px; }   /* the provider's floor: 312 px with its padding, 450 px at first load */
.pay-provider-frame iframe { display: block; width: 100%; border: 0; }
.pay[data-state="confirming"] .pay-frame-wrap { opacity: .5; cursor: progress; }
.pay[data-state="loading"] .pay-provider-frame { background: repeating-linear-gradient(90deg, rgba(var(--wash-rgb), .04) 0 48%, rgba(var(--wash-rgb), .08) 50%, rgba(var(--wash-rgb), .04) 52% 100%); border-radius: var(--r-md); }

/* A phone: the frame takes the whole width (312 px of 320 on the narrowest), the card's padding and border go. */
@media (max-width: 480px) {
  .pay-checkout { padding: 0; border: 0; background: none; }
  .pay-title { font-size: 1.5rem; }
  /* A fifth of the screen, not two fifths: the preview here is a reminder of which film is being bought, and the
     film itself is watched on the page before this one. With the rest of our half kept close (the secure badge on
     the back button's line, the price on one line, smaller gaps), the provider's checkout begins within the first
     screenful on a 640 px phone instead of a scroll below it. */
  .pay-media video, .pay-media img { max-height: 20vh; }
  .pay { gap: 14px; }
  .pay-ours { gap: 8px; }
  .pay-secure { min-height: 34px; padding: 0 10px; font-size: .85rem; }
  .pay-secure svg { width: 16px; height: 16px; }
  .pay-price strong { font-size: 1.6rem; }
}
/* A desktop: our half left, the checkout right and kept in view while our half scrolls. */
@media (min-width: 900px) {
  .pay-body { grid-template-columns: minmax(0, 11fr) minmax(360px, 9fr); gap: 32px; }
  .pay-checkout { position: sticky; top: calc(var(--header-h) + 16px); }
  .pay-media video, .pay-media img { max-height: 52vh; }
}

/* The mock frame (TALEMONTAGE_PAYMENTS=test), in the provider's place: what its frame asks and shows, in its own light
   look so it is read as the provider's and not as ours, and marked MOCK. */
.mock-frame { position: relative; display: grid; gap: 14px; padding: 16px; border-radius: 12px; background: #fff; color: #1d2433; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color-scheme: light; }
.mock-badge { justify-self: start; padding: 5px 10px; border-radius: 6px; background: #d7263d; color: #fff; font: 700 .72rem/1 system-ui, sans-serif; letter-spacing: .1em; }
.mock-summary { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid #dfe3ea; }
.mock-row { display: flex; justify-content: space-between; gap: 12px; }
.mock-row > span:first-child { min-width: 0; }
.mock-tax { color: #5b6475; font-size: .87rem; }
.mock-total { padding-top: 6px; font-size: 1.1rem; font-weight: 700; }
.mock-form { display: grid; gap: 12px; }
.mock-field { display: grid; gap: 6px; min-width: 0; margin: 0; color: #5b6475; font-size: .87rem; font-weight: 400; }   /* the page's own label has a 28 px top margin */
.mock-field input { width: 100%; min-height: 44px; margin: 0; padding: 0 12px; box-sizing: border-box; box-shadow: none; border: 1px solid #dfe3ea; border-radius: 8px; background: #f6f7f9; color: #1d2433; font: 15px system-ui, sans-serif; }
.mock-field small { color: #7a8294; font-size: .78rem; }
.mock-pay { min-height: 48px; border: 0; border-radius: 8px; background: #1d2433; color: #fff; font: 600 1rem system-ui, sans-serif; cursor: pointer; }
.mock-pay:disabled { opacity: .6; cursor: progress; }
.mock-fineprint { margin: 0; padding-top: 12px; border-top: 1px solid #dfe3ea; color: #5b6475; font-size: .72rem; line-height: 1.4; }
.mock-fineprint a { color: inherit; }