/* JiHee · PayPal checkout modal (checkout.js). Only ever attached when
   window.JIHEE_PAYPAL.clientId is set; otherwise nothing here has anything
   to hook onto. Reuses .field and .cta from site.css so the modal matches
   the trial form and buttons elsewhere; only the dialog chrome lives here. */

/* the row overlay button: same invisible full-row hit target as the anchor
   .ledger__link already used for Stripe links, reset for a <button>. */
.ledger__link[type="button"] { all: unset; position: absolute; inset: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }

.checkout { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; margin: auto; }
.checkout:not([open]) { display: none; }
.checkout::backdrop { background: rgba(23, 20, 15, .55); }

/* fallback for browsers without <dialog>: the element itself is the backdrop */
.checkout[role="dialog"] {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 5vw; background: rgba(23, 20, 15, .55);
}
.checkout[role="dialog"][hidden] { display: none; }

.checkout__box {
  position: relative; width: min(26rem, 100%); max-height: min(88vh, 42rem); overflow-y: auto;
  background: var(--paper); color: var(--sc-ink); border-radius: 20px; padding: 2rem 1.75rem 1.75rem;
  box-shadow: 0 30px 70px -20px rgba(23, 20, 15, .45);
  animation: checkout-in 220ms var(--sc-ease-out, ease-out);
}
@keyframes checkout-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .checkout__box { animation: none; } }

.checkout__x {
  position: absolute; top: .9rem; right: .9rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 999px; color: var(--sc-ink-soft); cursor: pointer;
  font-size: 1.4rem; line-height: 1; transition: background-color 140ms, color 140ms;
}
.checkout__x:hover { background: var(--hair); color: var(--sc-ink); }
.checkout__x:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }

.checkout__eyebrow { margin: 0; font: 500 .78rem/1 var(--sc-font-text); color: var(--sc-ink-soft); letter-spacing: .02em; }
.checkout__title { margin: .35rem 2rem .1rem 0; font: 700 clamp(1.3rem, 3vw, 1.6rem)/1.25 var(--sc-font-display); }
.checkout__price { margin: 0 0 1.35rem; font: 600 1.05rem/1 var(--sc-font-display); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }

.checkout__body [data-panel] { display: none; flex-direction: column; gap: 1.1rem; }
.checkout__body[data-step="details"] [data-panel="details"],
.checkout__body[data-step="pay"] [data-panel="pay"],
.checkout__body[data-step="done"] [data-panel="done"] { display: flex; }

.checkout__hint { margin-top: .15rem; font-size: .78rem; color: var(--sc-ink-soft); }
.checkout__err { margin: 0; min-height: 1.1em; font: 500 .85rem/1.4 var(--sc-font-text); color: var(--sc-ink); }
.checkout__err:empty { display: none; }

.checkout__paypal { min-height: 3rem; }
.checkout__note { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--sc-ink-soft); }

.checkout__done { margin: 0; font: 800 clamp(1.6rem, 4vw, 2.1rem)/1.1 var(--sc-font-display); letter-spacing: -0.02em; }
.checkout__line { margin: 0; font: 500 .95rem/1.4 var(--sc-font-text); color: var(--sc-ink-soft); }

@media (max-width: 480px) {
  .checkout { margin: auto auto 0; }
  .checkout[role="dialog"] { align-items: flex-end; padding: 0; }
  .checkout__box { width: 100%; border-radius: 18px 18px 0 0; max-height: 92vh; }
}