/* ============================================================================
   SAṄGA · 同行 — NT$129 single-charge payment modal styling.
   Built entirely on sanga.css design tokens (cream palette, pill buttons, gold
   borders). No Tailwind. Loaded only on pages that include _payment_modal.html.
   Companion JS: js/payment.js
   ============================================================================ */

/* ── Overlay ── */
.pay-overlay{
  position:fixed; inset:0; z-index:120;
  /* flex-start (not center) so the iOS keyboard pushes the modal up instead of
     clipping the confirm button; the modal centres via margin:auto when it fits. */
  display:flex; align-items:flex-start; justify-content:center;
  padding:24px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:rgba(42,29,24,.46);           /* ink, dimmed */
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity .22s ease, visibility .22s ease;
}
.pay-overlay.is-open{opacity:1; visibility:visible}

/* ── Dialog shell ── */
.pay-modal{
  background:var(--cream);
  border:1.5px solid var(--gold);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl);
  width:100%; max-width:440px;
  margin:auto;                 /* vertically centre when it fits; sit at top when tall */
  max-height:90vh;
  max-height:90dvh;            /* iOS Safari: track the keyboard/toolbar-adjusted viewport */
  display:flex; flex-direction:column;
  overflow:hidden;
  transform:translateY(12px) scale(.98);
  transition:transform .22s ease;
}
.pay-overlay.is-open .pay-modal{transform:translateY(0) scale(1)}

/* ── Header ── */
.pay-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; padding:24px 24px 16px;
  border-bottom:1px dashed var(--cream-3);
  flex-shrink:0;
}
.pay-head__titles{min-width:0}
.pay-head__overline{
  font-family:var(--font-sans); font-size:10px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--accent);
  margin-bottom:8px;
}
.pay-head__title{
  font-family:var(--font-serif); font-size:22px; font-weight:700;
  color:var(--ink); letter-spacing:.04em; line-height:1.25;
}
.pay-head__sub{font-size:13px; color:var(--ink-soft); margin-top:5px; line-height:1.5}
.pay-head__sub b{color:var(--accent); font-weight:800; font-family:var(--font-serif)}
.pay-close{
  flex-shrink:0; width:32px; height:32px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-pill); border:1.5px solid var(--cream-3);
  background:#ffffff70; color:var(--ink-soft); cursor:pointer;
  transition:.2s;
}
.pay-close:hover{color:var(--accent); border-color:var(--accent); background:#fff}
.pay-close svg{width:18px;height:18px}

/* ── Body ── */
.pay-body{
  padding:20px 24px 4px; overflow-y:auto; flex:1 1 auto;
  display:flex; flex-direction:column; gap:18px;
}

/* trust row */
.pay-trust{display:flex;align-items:center;gap:8px}
.pay-trust__lock{width:16px;height:16px;color:var(--success);flex-shrink:0}
.pay-trust__text{font-size:12px;color:var(--ink-soft)}
.pay-trust__brands{display:flex;gap:6px;margin-left:auto;align-items:center}
.pay-trust__brands img{height:18px;display:block}

/* ── Card form (Stripe split Elements) ── */
.pay-card{display:flex;flex-direction:column}
.stripe-field{margin-bottom:12px}
.stripe-field:last-child{margin-bottom:0}
.stripe-field__label{
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:8px; display:block;
}
.stripe-field__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stripe-field__row .stripe-field{margin-bottom:0}
/* the div Stripe.js mounts an iframe into — styled like .input pill */
.stripe-element{
  padding:12px 16px; border-radius:var(--radius-pill);
  border:1.5px solid var(--cream-3); background:#fff;
  transition:border-color .2s, box-shadow .2s;
}
.stripe-element.StripeElement--focus{
  border-color:var(--accent); box-shadow:0 0 0 3px #c4533a22;
}
.stripe-element.StripeElement--invalid{border-color:var(--error)}

/* error line */
.pay-error{
  display:none; margin-top:4px;
  font-size:13px; color:var(--error); line-height:1.5;
}
.pay-error.is-shown{display:block}

/* ── Footer / confirm ── */
.pay-foot{
  flex-shrink:0; padding:16px 24px 24px;
  border-top:1px dashed var(--cream-3);
  display:flex; flex-direction:column; gap:12px;
}
.pay-summary{
  display:flex; align-items:baseline; justify-content:space-between;
  font-size:13px; color:var(--ink-soft);
}
.pay-summary__amount{
  font-family:var(--font-serif); font-size:22px; font-weight:800; color:var(--accent);
}
.pay-summary__amount .cur{font-size:13px;font-weight:600;color:var(--ink-soft);margin-right:2px}

.pay-confirm{
  position:relative; width:100%;
  padding:13px 24px; border-radius:var(--radius-pill);
  background:var(--ink); color:var(--cream); border:none; cursor:pointer;
  font-family:var(--font-serif); font-size:16px; font-weight:700; letter-spacing:.08em;
  transition:.2s;
}
.pay-confirm:hover:not(:disabled){background:#5a3828}
.pay-confirm:disabled{cursor:default}
.pay-confirm.is-busy{opacity:.85}
.pay-confirm .pay-spinner{
  width:18px;height:18px;display:none;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  animation:paySpin .7s linear infinite;
}
.pay-confirm.is-busy .pay-confirm__label{visibility:hidden}
.pay-confirm.is-busy .pay-spinner{
  display:block;position:absolute;left:50%;top:50%;margin:-9px 0 0 -9px;
}
@keyframes paySpin{to{transform:rotate(360deg)}}

.pay-secure-note{
  text-align:center; font-size:11px; color:var(--ink-faint);
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.pay-secure-note svg{width:13px;height:13px}

/* ── Responsive ── */
@media(max-width:520px){
  /* drop the blur where the iOS keyboard animates over Stripe iframes (repaint
     stutter); compensate with a more opaque backdrop. */
  .pay-overlay{padding:12px;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(42,29,24,.62)}
  .pay-head,.pay-body,.pay-foot{padding-left:20px;padding-right:20px}
}