/* ===========================================================================
   ProCare public theme — the booking page.
   ---------------------------------------------------------------------------
   Same brand colours as assets/admin-theme.css, different spacing. The office
   tool is dense because staff live in it; this is used once, in a laundry, on
   a phone, by someone whose washing machine just died. Everything here is
   sized for a thumb.
   =========================================================================== */
:root{
  --pb-brand:#0d6efd; --pb-brand-hover:#0b5ed7;
  --pb-brand-wash:#eaf2ff; --pb-brand-line:#b6d4fe;
  --pb-accent:#fd7e14; --pb-accent-hover:#e56b0a;
  --pb-ground:#eef1f5; --pb-surface:#fff; --pb-surface-alt:#f8fafc;
  --pb-border:#dfe3e8; --pb-hairline:#edf0f3;
  --pb-ink:#14171c; --pb-ink-2:#39414e; --pb-muted:#69727f;
  --pb-ok:#0f7b3f; --pb-ok-wash:#e9f6ee; --pb-ok-line:#bfe3cc;
  --pb-warn:#93540a; --pb-warn-wash:#fff5e6; --pb-warn-line:#f2d9b0;
  /* Wordmark — same values on both sides of the app */
  --pc-mark-ink:#07315c; --pc-mark-c:red;
  --pb-r:10px; --pb-r-sm:6px;
  --pb-lift:0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06);
  --pb-font:Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}

body.pb{
  margin:0; background:var(--pb-ground); color:var(--pb-ink);
  font-family:var(--pb-font); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body.pb h1,body.pb h2{ margin:0; letter-spacing:-.02em; text-wrap:balance; }
body.pb :focus-visible{ outline:3px solid var(--pb-brand); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ body.pb *{ transition:none!important; animation:none!important; } }

.pb-wrap{ max-width:520px; margin:0 auto; padding:16px 16px 48px; }

.pb-card{
  background:var(--pb-surface); border:1px solid var(--pb-border);
  border-radius:var(--pb-r); box-shadow:var(--pb-lift); overflow:hidden;
}
.pb-top{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--pb-hairline); }
.pb-logo{ font-weight:800; font-size:17px; color:var(--pb-ink); text-decoration:none; }
.pb-call{ margin-left:auto; font-size:13.5px; font-weight:600; color:var(--pb-brand); text-decoration:none; display:flex; align-items:center; gap:5px; }
.pb-call:hover{ text-decoration:underline; }

.pb-bar{ display:flex; gap:5px; padding:12px 16px 0; }
.pb-bar i{ flex:1; height:4px; border-radius:2px; background:var(--pb-hairline); transition:background .25s; }
.pb-bar i.on{ background:var(--pb-brand); }
.pb-stepname{ padding:8px 16px 0; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--pb-muted); }

.pb-pane{ padding:6px 16px 18px; }
.pb-pane h2{ font-size:21px; margin-bottom:4px; }
.pb-hint{ color:var(--pb-muted); font-size:14px; margin:0 0 16px; }

.pb-label{ display:block; font-size:13.5px; font-weight:600; color:var(--pb-ink-2); margin:14px 0 6px; }
.pb-label .opt{ font-weight:400; color:var(--pb-muted); }
/* 16px minimum: anything smaller makes iOS zoom the page on focus. */
.pb-input{
  width:100%; padding:13px 14px; font:inherit; font-size:16px;
  border:1px solid var(--pb-border); border-radius:var(--pb-r-sm);
  background:var(--pb-surface); color:var(--pb-ink);
}
.pb-input:focus{ border-color:var(--pb-brand); box-shadow:0 0 0 3px var(--pb-brand-wash); outline:none; }
.pb-input.bad{ border-color:#b3253a; }
textarea.pb-input{ min-height:88px; resize:vertical; }
.pb-help{ font-size:12.5px; color:var(--pb-muted); margin-top:6px; }
.pb-err{ font-size:12.5px; color:#b3253a; margin-top:6px; font-weight:500; }

/* Appliance tiles — replace a dropdown plus free-text appliance/brand/model */
.pb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pb-pick{
  border:1px solid var(--pb-border); background:var(--pb-surface);
  border-radius:var(--pb-r-sm); padding:14px 6px 11px; cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:600; color:var(--pb-ink-2);
  min-height:82px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  transition:border-color .12s, background .12s;
}
.pb-pick svg{ width:26px; height:26px; stroke:var(--pb-ink-2); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.pb-pick:hover{ border-color:var(--pb-brand-line); background:var(--pb-brand-wash); }
.pb-pick[aria-pressed="true"]{ border-color:var(--pb-brand); background:var(--pb-brand-wash); color:var(--pb-brand); box-shadow:inset 0 0 0 1px var(--pb-brand); }
.pb-pick[aria-pressed="true"] svg{ stroke:var(--pb-brand); }

/* Job-type chips */
.pb-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.pb-chip{
  border:1px solid var(--pb-border); background:var(--pb-surface); border-radius:999px;
  padding:9px 16px; cursor:pointer; font:inherit; font-size:13.5px; font-weight:600; color:var(--pb-ink-2);
  min-height:42px;
}
.pb-chip:hover{ border-color:var(--pb-brand-line); background:var(--pb-brand-wash); }
.pb-chip[aria-pressed="true"]{ border-color:var(--pb-brand); background:var(--pb-brand-wash); color:var(--pb-brand); box-shadow:inset 0 0 0 1px var(--pb-brand); }
.pb-more{ background:none; border:0; color:var(--pb-brand); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; padding:8px 0; }

/* Day strip — real remaining capacity, not a bare date input */
.pb-days{ display:flex; gap:8px; overflow-x:auto; margin:0 -16px; padding:0 16px 6px; -webkit-overflow-scrolling:touch; }
.pb-day{
  flex:0 0 auto; border:1px solid var(--pb-border); background:var(--pb-surface);
  border-radius:var(--pb-r-sm); padding:9px 13px; cursor:pointer; font:inherit;
  text-align:center; min-width:78px; transition:border-color .12s, background .12s;
}
.pb-day .dow{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--pb-muted); }
.pb-day .dom{ font-size:19px; font-weight:700; line-height:1.15; }
.pb-day .left{ font-size:10.5px; color:var(--pb-ok); font-weight:600; }
.pb-day[aria-pressed="true"]{ border-color:var(--pb-brand); background:var(--pb-brand-wash); box-shadow:inset 0 0 0 1px var(--pb-brand); }
.pb-day[aria-pressed="true"] .dow,.pb-day[aria-pressed="true"] .dom{ color:var(--pb-brand); }
.pb-day[disabled]{ opacity:.42; cursor:not-allowed; }
.pb-day[disabled] .left{ color:var(--pb-muted); }

.pb-slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pb-slot{
  border:1px solid var(--pb-border); background:var(--pb-surface); border-radius:var(--pb-r-sm);
  padding:11px 6px; cursor:pointer; font:inherit; font-size:13px; font-weight:600;
  color:var(--pb-ink-2); text-align:center; min-height:56px;
}
.pb-slot small{ display:block; font-weight:400; font-size:11px; color:var(--pb-muted); }
.pb-slot[aria-pressed="true"]{ border-color:var(--pb-brand); background:var(--pb-brand-wash); color:var(--pb-brand); box-shadow:inset 0 0 0 1px var(--pb-brand); }

/* Postcode gate */
.pb-pcrow{ display:flex; gap:8px; }
.pb-pcrow .pb-input{ flex:1; }
.pb-verdict{ margin-top:10px; border-radius:var(--pb-r-sm); padding:11px 13px; font-size:13.5px; display:flex; gap:9px; align-items:flex-start; }
.pb-verdict.in{ background:var(--pb-ok-wash); border:1px solid var(--pb-ok-line); color:var(--pb-ok); }
.pb-verdict.out{ background:var(--pb-warn-wash); border:1px solid var(--pb-warn-line); color:var(--pb-warn); }
.pb-verdict b{ display:block; }
.pb-verdict a{ color:inherit; font-weight:700; }

.pb-drop{
  border:1.5px dashed var(--pb-border); border-radius:var(--pb-r-sm);
  padding:18px 12px; text-align:center; color:var(--pb-muted); font-size:13.5px;
  cursor:pointer; background:var(--pb-surface-alt); position:relative;
}
.pb-drop:hover{ border-color:var(--pb-brand-line); background:var(--pb-brand-wash); color:var(--pb-brand); }
.pb-drop b{ display:block; color:var(--pb-ink-2); font-size:14px; margin-bottom:2px; }
.pb-drop input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.pb-thumb{ max-height:120px; border-radius:var(--pb-r-sm); margin-top:10px; }

/* The money question, answered where it is asked */
.pb-price{ background:var(--pb-surface-alt); border:1px solid var(--pb-border); border-radius:var(--pb-r-sm); padding:13px 14px; margin-top:16px; font-size:13.5px; }
.pb-price .row{ display:flex; justify-content:space-between; gap:12px; }
.pb-price .row+.row{ margin-top:7px; padding-top:7px; border-top:1px solid var(--pb-hairline); }
.pb-price b{ font-variant-numeric:tabular-nums; }
.pb-price .note{ color:var(--pb-muted); font-size:12.5px; margin:8px 0 0; }

.pb-check{ display:flex; gap:10px; align-items:flex-start; margin-top:16px; font-size:13.5px; color:var(--pb-ink-2); }
.pb-check input{ width:20px; height:20px; margin-top:1px; flex:none; accent-color:var(--pb-brand); }

.pb-nav{ display:flex; gap:8px; margin-top:20px; }
.pb-btn{
  flex:1; min-height:52px; border-radius:var(--pb-r-sm); font:inherit; font-size:15.5px;
  font-weight:700; cursor:pointer; border:1px solid transparent;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.pb-go{ background:var(--pb-accent); color:#fff; }
.pb-go:hover{ background:var(--pb-accent-hover); }
.pb-go[disabled]{ opacity:.45; cursor:not-allowed; }
.pb-back{ flex:0 0 96px; background:var(--pb-surface); border-color:var(--pb-border); color:var(--pb-ink-2); }
.pb-back:hover{ background:var(--pb-surface-alt); }

.pb-trust{
  display:flex; flex-wrap:wrap; gap:6px 14px; padding:12px 16px;
  border-top:1px solid var(--pb-hairline); background:var(--pb-surface-alt);
  font-size:12px; color:var(--pb-muted);
}
.pb-trust span{ display:flex; align-items:center; gap:5px; }
.pb-trust b{ color:var(--pb-ink-2); }

.pb-done{ padding:30px 20px 26px; text-align:center; }
.pb-tick{ width:62px; height:62px; border-radius:50%; background:var(--pb-ok-wash); border:1px solid var(--pb-ok-line); color:var(--pb-ok); display:grid; place-items:center; margin:0 auto 14px; font-size:30px; }
.pb-ref{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:21px; font-weight:700; letter-spacing:.06em;
  background:var(--pb-brand-wash); border:1px solid var(--pb-brand-line); color:var(--pb-brand);
  border-radius:var(--pb-r-sm); padding:9px 16px; display:inline-block; margin:6px 0 14px;
}
.pb-next{ text-align:left; background:var(--pb-surface-alt); border:1px solid var(--pb-border); border-radius:var(--pb-r-sm); padding:13px 15px; font-size:13.5px; margin:0; }
.pb-next li{ margin-bottom:6px; }
.pb-next li:last-child{ margin-bottom:0; }

.pb-draft{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  background:var(--pb-brand-wash); border:1px solid var(--pb-brand-line);
  border-radius:var(--pb-r-sm); padding:10px 13px; margin-bottom:14px; font-size:13.5px;
}
.pb-draft button{ background:none; border:0; color:var(--pb-brand); font:inherit; font-weight:700; cursor:pointer; padding:4px 2px; }

.pb-foot{ text-align:center; font-size:13px; color:var(--pb-muted); margin-top:16px; }
.pb-foot a{ color:var(--pb-brand); }

@media(max-width:380px){
  .pb-grid{ grid-template-columns:repeat(2,1fr); }
  .pb-back{ flex:0 0 78px; }
}

/* ===========================================================================
   The ProCare wordmark — Pro[C]are, the C in red. Matches the home page.
   Emitted by procareWordmark() in config/config.php; never hand-write it.
   =========================================================================== */
.pc-wordmark{ color:var(--pc-mark-ink); font-weight:800; letter-spacing:-.01em; }
.pc-wordmark .pc-wordmark-c{ color:var(--pc-mark-c); }