/* Premium look for the pages customers see: booking form, invoice, tracking, plans, rating,
   quote, account and sign-in. Same system as the app (premium.css): Bricolage Grotesque for
   titles and numbers, Figtree for text, 12px controls, big soft cards, navy for action. */
body.pub {
  --font-display: 'Bricolage Grotesque', 'Space Grotesk', sans-serif;
  --font-body: 'Figtree', 'Inter', sans-serif;
  --text-muted: #4D6272;
  --p-line: rgba(11, 36, 54, 0.09);
  --p-line-strong: rgba(11, 36, 54, 0.16);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  background: radial-gradient(120% 80% at 50% 0%, #1B4468 0%, #0B2436 62%);
  background-attachment: fixed;
}
body.pub .auth-card, body.pub .invoice-card {
  border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 4px rgba(11, 36, 54, 0.1), 0 28px 70px rgba(2, 12, 22, 0.45);
}
body.pub .auth-card { padding: 32px 26px 28px; }
body.pub .auth-brand { margin-bottom: 26px; }
body.pub .auth-brand-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
body.pub .auth-brand-sub { letter-spacing: .14em; font-size: 10px; margin-top: 3px; }

body.pub .auth-title, body.pub h1.auth-title {
  font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 1.08; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 var(--s2, 8px);
}
body.pub .auth-subtitle { font-size: 16px; line-height: 1.5; color: var(--text-muted); margin: 0 0 24px; }

body.pub .form-row { gap: 7px; margin-bottom: 18px; }
body.pub .form-row label, body.pub label { font-size: 13.5px; font-weight: 600; color: var(--text-muted); letter-spacing: 0; }
body.pub input[type="text"], body.pub input[type="tel"], body.pub input[type="email"], body.pub input[type="password"], body.pub input[type="number"],
body.pub input[type="date"], body.pub select, body.pub textarea {
  min-height: 52px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--p-line-strong); background: #fff; color: var(--ink);
  font-size: 16px; font-family: var(--font-body); box-sizing: border-box; width: 100%;
}
body.pub textarea { padding: 14px; min-height: 108px; }
body.pub input:focus, body.pub select:focus, body.pub textarea:focus { outline: 3px solid rgba(62, 143, 208, 0.35); outline-offset: 0; border-color: #3E8FD0; }
body.pub input[type="checkbox"] { width: 20px; min-height: 20px; height: 20px; accent-color: #0B2436; }

body.pub .btn, body.pub .auth-submit {
  min-height: 54px; border-radius: 14px; font-family: var(--font-body); font-size: 16px; font-weight: 600; letter-spacing: -0.005em; border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: transform .12s ease, background-color .15s ease;
}
body.pub .btn:active, body.pub .auth-submit:active { transform: scale(0.98); }
body.pub .btn-primary, body.pub .auth-submit { background: #0B2436; color: #fff; }
body.pub .btn-primary:hover, body.pub .auth-submit:hover { background: #12344c; }
body.pub .btn-ghost { background: #fff; color: #0B2436; border-color: var(--p-line-strong); }
body.pub .btn-accent { background: #F2A93B; color: #0B2436; }
body.pub .btn-sm { min-height: 44px; font-size: 14.5px; }
body.pub .auth-submit { width: 100%; margin-top: 6px; }
body.pub :focus-visible { outline: 3px solid rgba(62, 143, 208, 0.45); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { body.pub .btn, body.pub .auth-submit { transition: none; } }

/* Booking form */
body.pub .book-estimate-box { border-radius: 16px; background: #F4F7FA; border: 1px solid var(--p-line); padding: 16px; }
body.pub .book-estimate-title { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); }
body.pub .book-estimate-result { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
body.pub .book-estimate-hint, body.pub .book-photos-hint { font-size: 13px; color: var(--text-muted); }
body.pub .book-success { padding: 20px 0 8px; }
body.pub .book-success svg { color: #1E8A58; width: 52px; height: 52px; }

/* Invoice */
body.pub .invoice-card { padding: 34px 28px 28px; max-width: 680px; }
body.pub .invoice-card strong, body.pub .invoice-to strong { color: var(--ink); }
body.pub .invoice-table th { font-size: 12.5px; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--text-muted); padding-bottom: 10px; }
body.pub .invoice-table td { font-size: 15px; padding: 14px 12px 14px 0; }
body.pub .invoice-total-row td { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
body.pub .invoice-pay { border-radius: 16px; border: 1px solid #F0DDB3; border-left: 4px solid #F2A93B; background: #FFF9EC; padding: 16px 18px; }
body.pub .invoice-pay-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
body.pub .invoice-card-pay button { min-height: 58px; font-size: 17px; border-radius: 16px; }
body.pub .invoice-paid-stamp { text-transform: none; letter-spacing: 0; font-size: 13.5px; }
body.pub .invoice-footer { font-size: 13px; }
body.pub .invoice-logo { width: 52px; height: 52px; }

/* Tracking page */
body.pub .trk-eta { font-family: var(--font-display); font-size: 52px; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
body.pub .trk-road { height: 10px; }

/* Rating, quote, account pages */
body.pub .rate-star { font-size: 46px; }
body.pub .rate-star:focus-visible { outline: 3px solid rgba(62, 143, 208, 0.5); border-radius: 8px; }

/* Invoice table on a phone: numbers stay on one line, the description gets the room */
body.pub .invoice-table td:nth-child(n+2), body.pub .invoice-table th:nth-child(n+2) { white-space: nowrap; }
body.pub .invoice-table td:first-child { overflow-wrap: anywhere; }
body.pub .invoice-cur { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--text-muted); margin-left: 2px; }
body.pub .invoice-table td:nth-child(2), body.pub .invoice-table td:nth-child(3) { padding-right: 14px; }

/* Account page: action buttons, referral block and section rhythm */
body.pub .account-actions { margin-top: 28px; gap: 12px; }
body.pub .account-action-btn, body.pub .referral-prompt-btn {
  width: 100%; min-height: 52px; padding: 0 18px; border-radius: 16px;
  border: 1px solid var(--silver-soft); background: #fff; color: var(--ink);
  font: 600 16px/1 var(--font-body); cursor: pointer; text-align: center;
}
body.pub .referral-prompt-btn { background: var(--ink); border-color: var(--ink); color: #fff; margin-top: 4px; }
body.pub .account-action-btn:focus-visible, body.pub .referral-prompt-btn:focus-visible { outline: 3px solid rgba(62,143,208,.5); outline-offset: 2px; }
body.pub .referral-prompt { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--silver-soft); }
body.pub .referral-prompt-title { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
body.pub .referral-prompt-sub { margin: 6px 0 16px; font-size: 15px; color: var(--text-muted); line-height: 1.5; }
body.pub .account-action-panel input, body.pub .account-action-panel textarea, body.pub .referral-panel input { min-height: 48px; border-radius: 14px; font-size: 16px; }
body.pub .account-action-save, body.pub .referral-save { width: 100%; min-height: 52px; border-radius: 16px; background: var(--ink); color: #fff; border: 0; font: 600 16px/1 var(--font-body); margin-top: 10px; cursor: pointer; }
body.pub .account-section-title { text-transform: none; letter-spacing: 0; font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink); margin: 26px 0 10px; }