body { line-height: 1.65; }
.customer-card { min-width: 0; }
.customer-page-header { max-width: 100%; }
.customer-page-header p { max-width: 680px; }
.customer-card input, .customer-card select, .customer-card textarea, .booking-slot { scroll-margin-top: 100px; scroll-margin-bottom: 100px; }
.service-choice input:focus-visible + .service-choice-body { outline: 3px solid #a90f15; outline-offset: 3px; }
.payment-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: 24px; }
.payment-summary { position: sticky; top: 96px; }
.payment-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 6px; font-size: .85rem; }
.payment-eyebrow { color: #a90f15; font-size: .7rem; font-weight: 700; letter-spacing: .09em; }
.payment-amount { font-size: clamp(32px, 5vw, 44px); font-weight: 700; margin: 10px 0 0; letter-spacing: -.035em; }
.payment-facts { border-top: 1px solid #eee; margin: 20px 0; }
.payment-facts > div { padding: 12px 0; border-bottom: 1px solid #eee; }
.payment-facts dt { color: #6b6b6b; font-size: .75rem; font-weight: 500; }
.payment-facts dd { margin: 4px 0 0; font-size: .9rem; overflow-wrap: anywhere; }
.payment-policy, .payment-verification-note { font-size: .85rem; color: #555; }
.payment-steps { padding-left: 22px; color: #555; font-size: .9rem; margin: 20px 0 24px; }
.payment-steps li { margin-bottom: 12px; padding-left: 4px; }
.payment-verification-note { padding: 14px; background: #f7f7f7; border-radius: 10px; }
.payment-proof-preview { display: block; width: auto; max-width: 100%; max-height: 300px; margin-top: 12px; object-fit: contain; border-radius: 10px; border: 1px solid #ddd; }
.payment-proof-preview[hidden] { display: none; }
.payment-record-body { display: flex; justify-content: space-between; gap: 20px; }
.payment-record-amount { text-align: right; flex-shrink: 0; padding-block: 16px; }
.payment-record-amount strong { display: block; font-size: 24px; }
.payment-record-amount span { display: block; font-size: .75rem; color: #6b6b6b; }
.payment-next-step { padding: 12px 14px; background: #f7f7f7; border-radius: 8px; font-size: .875rem; margin-bottom: 12px; }
.payment-reference { overflow-wrap: anywhere; }
.status-under-review { background: #e8efff; color: #24478a; }
.status-awaiting-proof, .status-pay-at-shop { background: #fff1d7; color: #805000; }
button:disabled { cursor: not-allowed; opacity: .65; }
@media (max-width: 767px) {
  .payment-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .payment-summary { position: static; }
  .payment-record-body { flex-direction: column; gap: 0; }
  .payment-record-amount { text-align: left; padding-block: 0 14px; }
  .appointment-card-top { flex-wrap: wrap; }
  .customer-main { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
}

body { font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }