/* ==========================================================================
   Stripe connection + share page (stripe-connection-qrdisplay.html) on the one
   design system. The page's older visual declarations were removed at the
   source (scripts/strip-legacy-visuals.mjs); this file is its whole look and
   matches /setup, the step before it. Scope: body.stripe-page. Loaded after the
   page's styles, before spl-ui.css.
   ========================================================================== */

body.stripe-page { background: var(--spl-ground); color: var(--spl-ink-2); font-family: var(--spl-font); }
body.stripe-page :where(h1, h2, h3) { font-family: var(--spl-font); color: var(--spl-ink-1); }

/* Header: the setup flow's light bar */
body.stripe-page .navbar { background: var(--spl-surface); border-bottom: 1px solid var(--spl-border); box-shadow: none; }
body.stripe-page .logo { color: var(--spl-ink-1); text-decoration: none; display: inline-flex; align-items: center; }
body.stripe-page .logo img { border-radius: 10px; }
body.stripe-page .logo > span > span:first-child { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--spl-accent-strong); }
body.stripe-page .logo > span > span:last-child { font-size: var(--spl-t-caption); font-weight: 500; color: var(--spl-ink-2); margin-top: 2px; }
body.stripe-page .nav-user { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: var(--spl-r-pill);
  font-size: var(--spl-t-helper); font-weight: 500; color: var(--spl-money); background: var(--spl-money-wash); border: 0; }
body.stripe-page .nav-user:empty { display: none; }
body.stripe-page :is(#logoutBtn, .nav-link) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--spl-r);
  background: none; color: var(--spl-accent-strong); font-family: var(--spl-font); font-size: var(--spl-t-helper); font-weight: 600; text-decoration: none; cursor: pointer; box-shadow: none; }
body.stripe-page :is(#logoutBtn, .nav-link):hover { background: var(--spl-surface-sunken); }

/* The page card */
body.stripe-page .main > .page-wrap > .card {
  background: var(--spl-surface); border: 1px solid var(--spl-border); border-radius: var(--spl-r-xl); box-shadow: var(--spl-e-1);
}
body.stripe-page .spl-page-hero { text-align: left; }
body.stripe-page .spl-page-kicker { display: block; margin: 0 0 var(--spl-s-2); padding: 0; background: none; border: 0;
  font-size: var(--spl-t-caption); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--spl-accent-strong); }
body.stripe-page .spl-page-title { font-size: var(--spl-t-h1); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; color: var(--spl-ink-1); text-align: left; }
body.stripe-page .spl-page-subtitle, body.stripe-page .muted { font-size: var(--spl-t-body); line-height: 1.55; color: var(--spl-ink-3); text-align: left; }
body.stripe-page .spl-page-pills { justify-content: flex-start; }
body.stripe-page :is(.spl-page-pill, .spl-feature-pill, .spl-qr-badge) {
  display: inline-flex; align-items: center; min-height: 28px; padding: 3px 10px; border-radius: 10px; border: 0; box-shadow: none; line-height: 1.4;
  font-size: var(--spl-t-caption); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--spl-ink-2); background: var(--spl-surface-sunken);
}
body.stripe-page .spl-feature-pill { color: var(--spl-accent-strong); background: var(--spl-accent-wash); }

/* Status line: the system alert */
body.stripe-page .status-message { border-radius: var(--spl-r); box-shadow: none; font-size: var(--spl-t-helper); font-weight: 500; text-align: left; }
body.stripe-page .status-message.info { background: var(--spl-accent-wash); border: 1px solid #c9d9f8; color: var(--spl-accent-strong); }
body.stripe-page :is(.status-message.ok, .status-message.success) { background: var(--spl-money-wash); border: 1px solid #b9dccd; color: var(--spl-money); }
body.stripe-page .status-message.warn { background: var(--spl-warn-wash); border: 1px solid #ecd3a4; color: var(--spl-warn); }
body.stripe-page .status-message.error { background: var(--spl-danger-wash); border: 1px solid #e2b4ad; color: var(--spl-danger); }

/* Buttons */
body.stripe-page .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 var(--spl-s-4);
  border-radius: var(--spl-r); border: 1px solid var(--spl-border-strong); background: var(--spl-surface); color: var(--spl-ink-1);
  font-family: var(--spl-font); font-size: var(--spl-t-button); font-weight: 600; line-height: 1.25; letter-spacing: 0; text-transform: none; box-shadow: none; transform: none; cursor: pointer; padding-block: 8px;
}
body.stripe-page .btn:hover { background: var(--spl-surface-sunken); border-color: var(--spl-ink-3); transform: none; box-shadow: none; }
body.stripe-page .btn.primary { background: var(--spl-accent); border-color: var(--spl-accent); color: #fff; min-height: 52px; }
body.stripe-page .btn.primary:hover { background: var(--spl-accent-strong); border-color: var(--spl-accent-strong); }
body.stripe-page .btn:focus-visible { outline: none; box-shadow: var(--spl-focus); }
body.stripe-page .btn:disabled { opacity: .55; cursor: not-allowed; }

/* Connect Stripe / share panels: one tile inside the card, no extra frame */
body.stripe-page .spl-flow-shell { background: none; border: 0; box-shadow: none; }
body.stripe-page :is(.premium-panel, .share-section) { background: var(--spl-surface); border: 1px solid var(--spl-border); border-radius: var(--spl-r-lg); box-shadow: none; }
body.stripe-page .panel-head { background: none; border: 0; border-bottom: 1px solid var(--spl-border); text-align: left; }
body.stripe-page .panel-head, body.stripe-page .panel-head :is(h2, h3) { font-size: var(--spl-t-h3); font-weight: 650; letter-spacing: -0.01em; color: var(--spl-ink-1); }
body.stripe-page :is(.spl-stripe-lead, .panel-body p) { font-size: var(--spl-t-body); line-height: 1.55; color: var(--spl-ink-2); text-align: left; }
body.stripe-page .spl-feature-pills { justify-content: flex-start; }
body.stripe-page .spl-connect-footnote { font-size: var(--spl-t-helper); font-weight: 500; color: var(--spl-ink-3); }

/* QR share */
body.stripe-page .spl-qr-kicker { font-size: var(--spl-t-caption); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--spl-accent-strong); }
body.stripe-page .spl-qr-title { font-size: var(--spl-t-h3); font-weight: 650; color: var(--spl-ink-1); }
body.stripe-page :is(.spl-qr-stage, .qr-wrapper) { background: var(--spl-ground); border: 0; border-radius: var(--spl-r-lg); box-shadow: none; }
body.stripe-page .spl-qr-frame { background: #fff; border: 1px solid var(--spl-border); border-radius: var(--spl-r); box-shadow: none; }

/* Loading states */
body.stripe-page :is(.spl-sync-title, .spl-page-boot-title) { font-size: var(--spl-t-h3); font-weight: 650; color: var(--spl-ink-1); }
body.stripe-page :is(.spl-sync-text, .spl-page-boot-text) { font-size: var(--spl-t-helper); color: var(--spl-ink-3); }
body.stripe-page :is(.spl-sync-spinner, .spl-page-boot-spinner) { border-color: var(--spl-accent-wash); border-top-color: var(--spl-accent); }
body.stripe-page .spl-sync-panel { background: var(--spl-surface); border: 1px solid var(--spl-border); border-radius: var(--spl-r-lg); box-shadow: none; }

/* Footer */
body.stripe-page .footer { background: none; border-top: 1px solid var(--spl-border); color: var(--spl-ink-3); font-size: var(--spl-t-helper); }
body.stripe-page .footer a { color: var(--spl-accent-strong); }

/* QR on phones: the 210px code (245px with its label) scales to the frame instead of spilling out. */
body.stripe-page .spl-qr-frame { box-sizing: border-box; width: 100%; padding: 12px; }
body.stripe-page .spl-qr-frame > div { width: min(210px, 100%) !important; height: auto !important; }
body.stripe-page #bookingQr { width: 100% !important; height: auto !important; }
body.stripe-page #bookingQr :is(img, canvas) { max-width: 100%; height: auto; }
@media (max-width: 480px) {
  /* The flow shell has no chrome of its own since Phase F, so it gives its padding back to the QR. */
  body.stripe-page .spl-flow-shell { padding-inline: 0 !important; }
  body.stripe-page .main > .page-wrap > .card { padding-inline: 14px !important; }
  body.stripe-page .share-section { padding-inline: 14px !important; }
  body.stripe-page .spl-qr-stage { padding: 10px; }
  body.stripe-page .spl-qr-frame { padding: 8px; min-height: 200px; } /* holds the space while the QR draws (no shift) */
}