* { box-sizing: border-box; }
html, body {
  /* Block text selection + iOS/Chrome long-press callout on page content.
     Chrome CCT may still offer some Chrome chrome menus; page-level is the
     reliable control (no CCT API for this). */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
body {
  font-family: system-ui, sans-serif; margin: 16px; line-height: 1.45;
  max-width: 40rem; overflow-x: hidden;
}
/* /pay layout — two hosts (driven by ?shell=uwv|pcct):
 *
 * iOS UniWebView (shell=uwv): WKWebView is 100%×100% and follows the app.
 *   Portrait: top 40% / height 60%, full width.
 *   Landscape: bottom-aligned max-height 80%, width max(40%, 320px) centered.
 * Android PCCT (shell=pcct): Chrome tab is the bounder; page fills the tab.
 */
html.pay-sheet,
body.pay-sheet {
  height: 100%;
  min-height: 100%;
  margin: 0;
  max-width: none;
}
html.pay-sheet.shell-uwv,
html.shell-uwv body.pay-sheet {
  background: transparent;
  position: relative;
  overflow: hidden;
  display: block;
  padding: 0;
}
html.shell-uwv .pay-panel {
  position: absolute;
  top: 40%;
  left: 0;
  width: 100%;
  height: 60%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(255, 255, 255, 0.4);
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (orientation: landscape) {
  html.shell-uwv .pay-panel {
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: max(40%, 320px);
    max-width: 100%;
    height: 80%;
    max-height: 80%;
  }
}
html.shell-pcct body.pay-sheet,
html.shell-page body.pay-sheet {
  background: rgba(245, 242, 237, 0.5);
}
html.pay-sheet.shell-pcct,
html.pay-sheet.shell-page {
  background: rgba(245, 242, 237, 0.5);
}
.pay-panel {
  box-sizing: border-box;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
html.shell-pcct .pay-panel,
html.shell-page .pay-panel {
  max-width: 40rem;
  padding: 16px;
}
/* CCT postMessage is Android PCCT. iOS uses window.uniwebview.send. */
html.shell-uwv #channelStatus,
html.shell-page #channelStatus {
  display: none;
}
button, a.btn {
  display: inline-block; margin: 4px 8px 4px 0; padding: 10px 12px;
  font: inherit; text-decoration: none; color: #111; background: #eee;
  border: 1px solid #ccc; border-radius: 8px; cursor: pointer;
}
button.primary { background: #237D7D; color: #fff; border-color: #1C6565; }
button.danger { background: #E53935; color: #fff; border-color: #C62828; }
a.btn.return { background: #BBDEFB; border-color: #64B5F6; }
.hint {
  display: block; margin: 2px 0 10px; font-size: 0.85rem; color: #555;
  overflow-wrap: anywhere; word-break: break-word; max-width: 100%;
}
.hint code, code {
  overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap;
}
.dump {
  display: block; margin: 8px 0 12px; padding: 10px 12px;
  font: 11px/1.35 ui-monospace, monospace; color: #333;
  background: #f5f5f5; border: 1px solid #ece9e2; border-radius: 8px;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  max-width: 100%; overflow-x: hidden;
}
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.page-tag {
  display: inline-block; font-size: 0.8rem; font-weight: 600;
  color: #1C6565; background: #E0F2F1; padding: 4px 8px; border-radius: 6px;
}
.sandbox-banner {
  margin: 0 0 12px; padding: 12px 14px;
  font-size: 1.05rem; font-weight: 800; letter-spacing: 0.04em;
  text-align: center; color: #5d4037;
  background: #fff8e1; border: 3px solid #f9a825; border-radius: 8px;
}
#log {
  background: #111; color: #9f9; font: 12px/1.4 ui-monospace, monospace;
  padding: 12px; min-height: 8em; max-height: 16em; margin-top: 1rem;
  width: 100%; max-width: 100%;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  overflow-x: hidden; overflow-y: auto;
}
.ok { color: #0a0; } .bad { color: #c00; }
.feedback {
  margin: 8px 0 12px; padding: 10px 12px; border-radius: 8px;
  font-weight: 700; font-size: 1rem; border: 2px solid #ccc; background: #f5f5f5;
  overflow-wrap: anywhere; word-break: break-word; max-width: 100%;
}
.feedback.ok { border-color: #2e7d32; background: #e8f5e9; color: #1b5e20; }
.feedback.bad { border-color: #c62828; background: #ffebee; color: #b71c1c; }
h2 { font-size: 1.05rem; margin-top: 1.4rem; }
code { font-size: 0.9em; }

/* Apple Pay lean: slot is only a hair taller than the Stripe button (48px). */
html.lean,
html.lean body {
  margin: 0;
  padding: 2px;
  height: 100%;
  box-sizing: border-box;
  max-width: none;
  background: #fff;
  overflow: visible;
}
html.lean #express-checkout-element {
  width: 100%;
  min-height: 48px;
}