/* Customer portal "My bookings" (28 Oct 2026, app/Modules/Customer). Public site look: #050505, gold #d4af37 / amber
   #f59e0b, Inter + Fraunces (includes/header.php). Mobile first; every tap target >= 44px. Prefix cp-. */
.cp { --cp-bg: #0d0d0d; --cp-line: #262626; --cp-text: #e5e5e5; --cp-muted: #a3a3a3; --cp-gold: #d4af37; --cp-gold-2: #e7c873;
  --cp-amber: #f59e0b; --cp-green: #34d399; --cp-red: #f87171;
  max-width: 720px; margin: 0 auto; padding: 20px 16px 56px; color: var(--cp-text); font-family: 'Inter', system-ui, sans-serif; }
.cp-narrow { max-width: 460px; padding-top: 36px; }
.cp *, .cp *::before, .cp *::after { box-sizing: border-box; }
.cp svg { width: 18px; height: 18px; flex-shrink: 0; }
.cp a { -webkit-tap-highlight-color: transparent; }
.cp-center { text-align: center; }

/* heading */
.cp-head { margin: 4px 0 20px; }
.cp-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cp-eyebrow { letter-spacing: .28em; font-size: 11px; color: var(--cp-gold); text-transform: uppercase; margin: 0 0 8px; }
.cp-h1 { font-size: 28px; line-height: 1.15; font-weight: 700; color: #fff; margin: 0 0 8px; font-variation-settings: 'opsz' 72; }
.cp-h2 { font-size: 15px; font-weight: 600; color: #fff; margin: 0; letter-spacing: .01em; }
.cp-sub { color: var(--cp-muted); font-size: 15px; line-height: 1.55; margin: 0; }
.cp-sub-sm { font-size: 13px; word-break: break-all; }
.cp-badge-ic { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(212,175,55,.5); color: var(--cp-amber); background: radial-gradient(circle, rgba(212,175,55,.14) 0%, rgba(212,175,55,0) 70%); }
.cp-badge-ic svg { width: 26px; height: 26px; }
.cp-badge-muted { border-color: rgba(163,163,163,.3); color: var(--cp-muted); background: none; }
.cp-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* boxes */
.cp-box { background: var(--cp-bg); border: 1px solid var(--cp-line); border-radius: 18px; padding: 18px; margin-bottom: 14px; }
.cp-box-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cp-strong { color: #fff; font-weight: 600; margin: 0; }
.cp-muted { color: var(--cp-muted); font-size: 14px; line-height: 1.55; margin: 2px 0 0; }
.cp-fine { color: #8a8a8a; font-size: 13px; line-height: 1.5; margin: 14px 0 0; }
.cp-fine a { color: var(--cp-gold-2); text-decoration: underline; text-underline-offset: 3px; }
.cp-note { margin-top: 10px; font-size: 13px; }
.cp-alert { border-radius: 14px; padding: 12px 14px; font-size: 14px; margin-bottom: 14px; }
.cp-alert-err { background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.35); color: #fecaca; }
.cp-sent { display: flex; gap: 12px; align-items: flex-start; border-color: rgba(212,175,55,.35); }
.cp-sent-ic { width: 40px; height: 40px; border-radius: 9999px; border: 1px solid rgba(212,175,55,.4); color: var(--cp-amber); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* form */
.cp-form { display: flex; flex-direction: column; gap: 12px; }
.cp-label { font-size: 13px; color: var(--cp-muted); font-weight: 500; margin: 0; }
.cp-input { width: 100%; min-height: 52px; border-radius: 14px; border: 1px solid #333; background: #050505; color: #fff; font-size: 16px; /* 16px: no iOS zoom */
  padding: 0 16px; outline: none; transition: border-color .15s; }
.cp-input:focus { border-color: var(--cp-amber); box-shadow: 0 0 0 3px rgba(245,158,11,.18); }

/* buttons */
.cp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 9999px;
  font-size: 15px; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.cp-btn-block { width: 100%; }
.cp-btn-sm { min-height: 44px; padding: 0 16px; font-size: 14px; }
.cp-btn-gold { background: var(--cp-amber); color: #000; }
.cp-btn-gold:hover { background: #fbbf24; }
.cp-btn-line { background: transparent; border-color: #404040; color: #d4d4d4; }
.cp-btn-line:hover { border-color: var(--cp-amber); color: var(--cp-amber); }
.cp-btn-wa { background: #128c4a; color: #fff; }
.cp-btn-wa:hover { background: #16a35a; }
.cp-btn:focus-visible, .cp-tab:focus-visible, .cp-card:focus-visible, .cp-back:focus-visible { outline: 2px solid var(--cp-amber); outline-offset: 2px; }
.cp-stack { display: flex; flex-direction: column; gap: 10px; align-items: stretch; max-width: 320px; margin: 8px auto 0; }
.cp-signout { margin: 0; flex-shrink: 0; }

/* back link (same look as includes/page-back.php) */
.cp-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #facc15; font-size: 15px; font-weight: 600; text-decoration: none; margin: -6px 0 6px -4px; }

/* pills */
.cp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap;
  border: 1px solid #404040; color: #d4d4d4; background: #161616; }
.cp-st-ok, .cp-drv-ok { border-color: rgba(212,175,55,.5); color: var(--cp-gold-2); background: rgba(212,175,55,.08); }
.cp-st-live, .cp-drv-live { border-color: rgba(52,211,153,.5); color: #6ee7b7; background: rgba(52,211,153,.1); }
.cp-st-live::before, .cp-drv-live::before { content: ''; width: 7px; height: 7px; border-radius: 9999px; background: var(--cp-green); animation: cp-pulse 1.6s ease-in-out infinite; }
.cp-st-wait, .cp-pay-pending, .cp-pay-deposit { border-color: rgba(245,158,11,.45); color: #fcd34d; background: rgba(245,158,11,.08); }
.cp-st-done, .cp-drv-done { color: #a3a3a3; }
.cp-st-cancelled { border-color: rgba(248,113,113,.4); color: #fca5a5; background: rgba(248,113,113,.07); }
.cp-pay-paid { border-color: rgba(52,211,153,.45); color: #6ee7b7; background: rgba(52,211,153,.08); }
.cp-pay-refunded, .cp-pay-partly { border-color: rgba(147,197,253,.4); color: #bfdbfe; background: rgba(147,197,253,.07); }
@keyframes cp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .cp-st-live::before, .cp-drv-live::before { animation: none; } }

/* tabs */
.cp-tabs { display: flex; gap: 6px; padding: 4px; border: 1px solid var(--cp-line); border-radius: 9999px; background: var(--cp-bg); margin-bottom: 16px; }
.cp-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 9999px; color: var(--cp-muted);
  font-size: 15px; font-weight: 600; text-decoration: none; }
.cp-tab.is-on { background: var(--cp-amber); color: #000; }
.cp-count { font-size: 12px; min-width: 22px; padding: 1px 7px; border-radius: 9999px; background: rgba(255,255,255,.08); }
.cp-tab.is-on .cp-count { background: rgba(0,0,0,.15); }

/* cards */
.cp-card { position: relative; display: block; background: var(--cp-bg); border: 1px solid var(--cp-line); border-radius: 18px; padding: 16px 44px 16px 16px;
  margin-bottom: 12px; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.cp-card:hover { border-color: #3f3f3f; }
.cp-card:active { transform: scale(.995); }
.cp-card.is-live { border-color: rgba(52,211,153,.45); }
.cp-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cp-no { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; letter-spacing: .06em; color: var(--cp-gold-2); font-size: 16px; }
.cp-svc { display: block; font-size: 12px; color: var(--cp-muted); margin-top: 2px; }
.cp-when { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 14px; font-weight: 500; margin: 0 0 10px; }
.cp-when svg { color: var(--cp-amber); width: 16px; height: 16px; }
.cp-route { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.cp-route p { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 14px; color: #d4d4d4; line-height: 1.4; }
.cp-ri { display: inline-flex; width: 16px; justify-content: center; padding-top: 1px; }
.cp-ri svg { width: 14px; height: 14px; }
.cp-ri-from { color: var(--cp-amber); }
.cp-ri-to { color: var(--cp-gold-2); }
.cp-route-lg p { font-size: 15px; color: #fff; }
.cp-route-lg small { display: block; font-size: 11px; color: var(--cp-muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1px; }
.cp-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid #1c1c1c; padding-top: 12px; }
.cp-meta { display: flex; gap: 14px; color: var(--cp-muted); font-size: 13px; }
.cp-meta span { display: inline-flex; align-items: center; gap: 5px; }
.cp-meta svg { width: 15px; height: 15px; }
.cp-money { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.cp-money strong { color: #fff; }
.cp-card-chev { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #525252; }
.cp-empty { text-align: center; padding: 36px 16px; border: 1px dashed #333; border-radius: 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cp-empty > svg { width: 28px; height: 28px; color: #525252; margin-bottom: 4px; }
.cp-empty .cp-btn { margin-top: 10px; }

/* rows */
.cp-rows { margin: 0; }
.cp-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid #1c1c1c; font-size: 14px; }
.cp-row:first-child { border-top: 0; }
.cp-row dt { color: var(--cp-muted); flex-shrink: 0; }
.cp-row dd { margin: 0; color: #fff; text-align: right; word-break: break-word; }
.cp-req { border-top: 1px solid #1c1c1c; padding-top: 10px; margin-top: 2px; }
.cp-pre { white-space: pre-wrap; color: #fff; font-size: 14px; margin: 4px 0 0; }

/* driver + timeline */
.cp-drv { border-color: rgba(212,175,55,.3); }
.cp-drv-who { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cp-drv-av { width: 48px; height: 48px; border-radius: 9999px; background: linear-gradient(180deg, #3a2f10, #1c170a); border: 1px solid rgba(212,175,55,.45);
  color: var(--cp-gold-2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; flex-shrink: 0; }
.cp-drv-txt { min-width: 0; }
.cp-plate { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #fff;
  border: 1px solid #525252; border-radius: 6px; padding: 1px 6px; margin-left: 4px; background: #111; }
.cp-drv-act { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.cp-drv-act .cp-btn { padding: 0 12px; }
.cp-tl { list-style: none; margin: 0; padding: 0; }
.cp-tl-step { position: relative; display: flex; align-items: center; gap: 12px; min-height: 40px; padding-left: 0; color: #737373; font-size: 14px; }
.cp-tl-step:not(:last-child)::after { content: ''; position: absolute; left: 11px; top: 30px; bottom: -10px; width: 2px; background: #262626; }
.cp-tl-step.is-done:not(:last-child)::after { background: rgba(212,175,55,.55); }
.cp-tl-dot { width: 24px; height: 24px; border-radius: 9999px; border: 2px solid #404040; background: #0d0d0d; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; }
.cp-tl-dot svg { width: 13px; height: 13px; color: #000; }
.cp-tl-step.is-done { color: #e5e5e5; }
.cp-tl-step.is-done .cp-tl-dot { background: var(--cp-gold); border-color: var(--cp-gold); }
.cp-tl-step.is-current .cp-tl-label { color: #fff; font-weight: 600; }
.cp-tl-step.is-current .cp-tl-dot { box-shadow: 0 0 0 4px rgba(212,175,55,.2); }
.cp-tl-label { flex: 1; }
.cp-tl-at { color: var(--cp-muted); font-size: 13px; white-space: nowrap; }

/* help */
.cp-help { display: flex; gap: 12px; align-items: flex-start; }
.cp-help-ic { color: var(--cp-amber); padding-top: 2px; }
.cp-help-txt { flex: 1; min-width: 0; }
.cp-help-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

@media (min-width: 640px) {
  .cp { padding-top: 32px; }
  .cp-h1 { font-size: 34px; }
  .cp-box { padding: 22px; }
  .cp-card { padding: 18px 48px 18px 20px; }
}

/* "Add to home screen" hint (views/_a2hs.php, shown by customer-booking.js only when installing is possible) */
.cp-a2hs { display: flex; align-items: center; gap: 12px; background: var(--cp-bg); border: 1px solid rgba(212,175,55,.35);
  border-radius: 16px; padding: 12px 8px 12px 16px; margin: 0 0 16px; }
.cp-a2hs[hidden], .cp-a2hs [hidden] { display: none; }
.cp-a2hs-txt { flex: 1; min-width: 0; }
.cp-a2hs-txt .cp-muted { font-size: 13px; }
.cp-a2hs-x { background: none; border: 0; color: var(--cp-muted); width: 44px; height: 44px; border-radius: 9999px; cursor: pointer;
  font: 400 20px/1 system-ui, sans-serif; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cp-a2hs-x:hover { color: #fff; background: rgba(255,255,255,.06); }
.cp-a2hs-x:focus-visible { outline: 2px solid var(--cp-amber); outline-offset: 2px; }