/* The purchase on the finished film's page (status/app-status-purchase.js): the preview, its card, and the paid film's
   panel. The payment screen itself is app-status-pay.css. */
#downloads .preview-frame { position: relative; }
#downloads .preview-frame video { display: block; width: 100%; }
.preview-making { margin: 0; padding: 48px 16px; border-radius: var(--r-md); background: var(--surface); color: var(--ink-dim); text-align: center; }
.preview-tag { position: absolute; top: 8px; inset-inline-start: 8px; padding: 3px 8px; border-radius: var(--r-pill); background: rgba(0, 0, 0, .55); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .04em; pointer-events: none; }
.preview-note { margin: 10px 2px 14px; color: var(--ink-dim); font-size: .9rem; line-height: 1.45; }
.purchase-offer { display: grid; gap: 8px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.purchase-price { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.purchase-includes-title { margin: 0; color: var(--ink); font-weight: 600; }
.purchase-includes { margin: 0 0 6px; padding-inline-start: 20px; color: var(--ink-dim); line-height: 1.5; }
.purchase-buy { min-height: 50px; border: 0; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: 1.05rem; font-weight: 700; cursor: pointer; }
.purchase-buy:disabled { opacity: .7; cursor: progress; }
/* A payment control is pressed, not read: a long press on its label selected the text and offered a search or
   translate menu, and with a selection live the next tap only cleared it (the Buy that "did nothing"). */
.purchase-buy, .purchase-buy *, .mock-pay, .pay-retry, .pay-back, .purchase-share-link { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.purchase-buy:active:not(:disabled), .mock-pay:active:not(:disabled), .pay-retry:active { transform: scale(.98); filter: brightness(.9); }
.purchase-buy.is-busy { cursor: progress; }
.purchase-no-obligation { margin: 0; font-size: .86rem; color: var(--ink-dim); }
.purchase-refund { margin: 0; font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
/* The refund policy Paddle requires under the Buy button sat at 18 px tall, under the 24 px a finger needs:
   the one link on the screen a customer may actually have to find in a hurry, and the hardest to hit. The
   padding gives it the height without taking it out of the sentence it sits in. */
.purchase-refund-link { display: inline-block; padding: 4px 0; color: inherit; text-underline-offset: 3px; }
/* The one Buy button as the screen's foot bar on a phone (app-status-purchase.js purchaseFootBar), the photo
   page's bar pattern (review/app-review.css): the film plays above it and the price on it is always in view. The
   real button moves in, so the screen never holds two. */
.purchase-bar { position: fixed; inset-inline-start: 12px; inset-inline-end: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 40;
  max-width: 560px; margin: 0 auto; box-sizing: border-box; display: flex; align-items: center; padding: 6px;
  border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line-strong);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .65), 0 0 0 1px rgba(240, 177, 85, .1); }
.purchase-bar .purchase-buy { flex: 1 1 auto; min-height: 44px; }
/* The bar lies over the foot of the screen, so the page keeps room for everything under the card -- the refund
   policy's link, the film's own controls -- to scroll clear of it. */
html:has(.purchase-bar:not([hidden])) { scroll-padding-bottom: 96px; }
body:has(.purchase-bar:not([hidden])) #downloads { padding-bottom: 96px; }

.purchase-error { margin: 0; color: var(--danger); }
.confirming-glyph { display: inline-flex; width: 18px; height: 18px; margin-inline-end: 8px; vertical-align: -3px; }
.confirming-glyph svg { width: 100%; height: 100%; }
/* Under a Buy held while a payment is being confirmed: a reassurance, not an error. */
.purchase-confirming-note { margin: 0; font-size: .9rem; color: var(--ink-dim); line-height: 1.5; overflow-wrap: anywhere; }
.purchase-keep { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.purchase-keep-note { margin: 0; color: var(--ink-dim); line-height: 1.5; overflow-wrap: anywhere; }
.purchase-share-link { min-height: 48px; border: 1px solid var(--line); border-radius: var(--r-pill); background: transparent; color: var(--ink); font-size: 1rem; font-weight: 600; cursor: pointer; }
.purchase-keep-choice { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); cursor: pointer; }
.purchase-keep-choice input { flex: none; width: 22px; height: 22px; }

.purchase-delete { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.purchase-delete-btn { min-height: 48px; border: 1px solid var(--danger); border-radius: var(--r-pill); background: transparent; color: var(--danger); font-size: 1rem; font-weight: 600; cursor: pointer; }
.purchase-delete-hint, .purchase-delete-words { margin: 0; font-size: .86rem; color: var(--ink-dim); line-height: 1.45; overflow-wrap: anywhere; }
.purchase-delete-confirm, .purchase-keep-confirm { display: flex; flex-direction: column; gap: 10px; }

/* A Snaps trip unpaid (app-status-snaps.js): its card above the marked photos, and nothing to share or save yet. */
.snaps .purchase-offer { margin: 10px 0 14px; }

/* A change the purchase includes, on a trip that has not bought it (app-status-purchase.js lockChangeActions): the
   button keeps its place with a padlock drawn on it, and the line above says why. */
.change-locked { opacity: .75; }
.change-locked .lock-glyph { display: inline-flex; width: 16px; height: 16px; margin-inline-end: 8px; vertical-align: -3px; }
.change-locked .lock-glyph svg { width: 100%; height: 100%; }
.change-locked-hint { margin: 0 0 8px; color: var(--ink-dim); font-size: .9rem; line-height: 1.45; }
/* After a payment: the wait before the download (app-status-paid.js). */
.paid-preparing, .paid-waiting { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--accent); }
.paid-preparing-text { margin: 0; color: var(--ink); font-weight: 600; line-height: 1.4; }
.paid-spinner { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--line-strong); border-top-color: var(--accent); animation: paid-spin .9s linear infinite; }
@keyframes paid-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .paid-spinner { animation-duration: 3s; } }