:root{
  --basalt: #4B4D46; --basalt-deep: #34362F;
  --bg: #F7F5EF; --card: #FFFFFF;
  --canvas: #CAC4B0; --canvas-tint: #EFEAE0;
  --green: #6E6A62; --green-deep: #4F4C46; --green-tint: #EAE9E5;
  --bamboo: #6B7863; --bamboo-tint: #E9ECE6;
  --blue: #4E5D57; --blue-tint: #E7EBE9;
  --swedish: #7C8464; --swedish-tint: #EEF0E9; --swedish-deep: #5C6249;
  --purbeck: #9BAEA8; --purbeck-deep: #3E5450;
  --hardwick: #C7C3AE; --hardwick-deep: #8B8770;
  --soft: #6E7167; --faint: #9B9B8C;
  --warn-bg: #F3DCD5; --warn-text: #A13D2C;
  --shadow: 0 2px 6px rgba(75,77,70,0.04), 0 16px 40px -24px rgba(75,77,70,0.14);
}
*{box-sizing:border-box;}
body{ margin:0; background:var(--bg); color:var(--basalt); font-family:'Inter', sans-serif; }
.mono{ font-family:'IBM Plex Mono', monospace; }

/* ---------- Header ---------- */
header.app{ background:var(--card); border-bottom:1px solid var(--canvas-tint); padding:16px 28px; }
header.app .header-row{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
header.app .header-id{ display:flex; align-items:center; gap:13px; }
.logo-mark{
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg, var(--basalt), var(--basalt-deep));
  border:2px solid #fff; box-shadow:0 2px 6px rgba(75,77,70,0.18);
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display', serif; font-weight:700; font-size:19px;
  color:#fff; flex:none;
}
.brand-name{ font-family:'Manrope', sans-serif; font-size:18px; font-weight:800; color:var(--basalt); letter-spacing:-.01em; line-height:1.2; }
.brand-sub{ font-size:11px; color:var(--faint); font-weight:600; letter-spacing:.04em; margin-top:2px; }
button.logout-btn{ background:transparent; border:1px solid var(--canvas); color:var(--soft); flex:none; font-size:12.5px; padding:8px 13px; }
button.logout-btn:hover{ background:var(--canvas-tint); }

/* ---------- Segmented pill nav ---------- */
nav.tab-pill{ display:inline-flex; gap:2px; background:var(--canvas-tint); padding:4px; border-radius:12px; }
nav.tab-pill button{ appearance:none; border:none; background:transparent; color:var(--soft); font-family:'Inter'; font-size:13px; font-weight:600; padding:9px 14px; border-radius:9px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
nav.tab-pill button svg{ width:15px; height:15px; flex:none; }
nav.tab-pill button.active{ background:var(--blue-tint); color:var(--blue); font-weight:700; }
.nav-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:20px; background:var(--warn-text); color:#fff; font-size:10.5px; font-weight:700; line-height:1; }

main{ max-width:800px; margin:0 auto; padding:28px 22px 64px; }

/* ---------- Hero ---------- */
.page-intro{ margin-bottom:20px; }
.page-intro h2{ font-family:'Manrope', sans-serif; font-size:26px; font-weight:800; color:var(--basalt); margin:0 0 8px; letter-spacing:-.01em; }
.page-intro p{ font-family:'Inter', sans-serif; font-size:14.5px; color:var(--soft); margin:0; line-height:1.5; max-width:46ch; }

/* ---------- Cards & general ---------- */
.card{ background:var(--card); border:1px solid var(--canvas-tint); border-radius:20px; padding:28px 26px; margin-bottom:20px; box-shadow:var(--shadow); }
h2.section-title{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--soft); font-family:'Inter'; font-weight:700; margin:0 0 16px; }
label{ display:block; font-size:12.5px; font-weight:600; color:var(--soft); margin-bottom:6px; }
input[type=text], input[type=number], input[type=date], input[type=email], input[type=password], select{
  width:100%; padding:11px 13px; border:1.5px solid var(--canvas-tint); border-radius:12px;
  font-family:'Inter', sans-serif; font-size:14px; background:#FDFCF9; color:var(--basalt);
}
input:focus, select:focus{ outline:none; border-color:var(--green); background:#fff; }
#postcode{ text-transform:uppercase; }
.field{ margin-bottom:16px; }
.job-name-input{ margin-top:8px; }
.job-name-input:first-child{ margin-top:0; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.search-row3{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:14px; }

button.primary{ appearance:none; border:none; background:var(--hardwick); color:var(--basalt-deep); font-family:'Manrope', sans-serif; font-weight:700; font-size:14px; padding:13px 18px; border-radius:12px; cursor:pointer; width:100%; }
button.primary:hover{ background:var(--hardwick-deep); color:#fff; }
button.select{ appearance:none; border:none; background:var(--purbeck); color:var(--purbeck-deep); font-family:'Manrope', sans-serif; font-weight:700; font-size:14px; padding:12px 18px; border-radius:12px; cursor:pointer; }
button.select:hover{ filter:brightness(0.96); }
button.secondary, a.secondary{ appearance:none; border:1px solid var(--canvas); background:var(--card); color:var(--basalt); font-weight:600; font-size:13px; padding:10px 15px; border-radius:12px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; }
button.secondary:hover, a.secondary:hover{ background:var(--canvas-tint); }
button.ghost, a.ghost{ appearance:none; border:1px solid var(--canvas); background:transparent; color:var(--basalt); font-weight:600; font-size:13px; padding:10px 15px; border-radius:12px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; }
button.ghost:hover, a.ghost:hover{ background:var(--canvas-tint); }
button.link, a.link{ appearance:none; border:none; background:none; color:var(--basalt); font-weight:600; font-size:13px; cursor:pointer; padding:0; text-decoration:underline; }
button:disabled{ opacity:0.45; cursor:not-allowed; }
button:disabled:hover{ background:inherit; filter:none; }

/* ---------- Results list (single card, row-list style) ---------- */
.results-back{ margin-bottom:14px; }
.results-header{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:6px; }
.results-header .count{ font-size:13px; font-weight:700; color:var(--basalt); }
.results-header .sorted-by{ font-size:12.5px; color:var(--faint); }
.preferred-chains-toggle{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--basalt); cursor:pointer; font-weight:500; margin-bottom:14px; }

.area-group{ margin-top:20px; }
.area-group:first-child{ margin-top:0; }
/* Sticky and filled so it reads as a real section divider while scrolling,
   not just a label — it stays pinned at the top of the viewport for as long
   as its town's hotels are on screen, then the next group's header (also
   top:0) takes its place the moment that group scrolls into view. Bleeds to
   the edges of .card via negative margins matching its 26px padding, so the
   band looks edge-to-edge rather than floating inset. */
.area-group-title{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:baseline; gap:10px;
  background:var(--basalt-deep); color:#fff;
  font-family:'Manrope', sans-serif; font-size:14px; font-weight:800;
  text-transform:uppercase; letter-spacing:.04em;
  margin:0 -26px 14px; padding:13px 26px;
}
.area-group-title .area-group-area,
.area-group-title .area-group-time{ font-weight:600; text-transform:none; letter-spacing:normal; color:rgba(255,255,255,.72); }

.hotel-row{ display:flex; flex-direction:column; gap:12px; padding:20px 0; border-bottom:1px solid var(--canvas-tint); }
.hotel-row:last-child{ border-bottom:none; padding-bottom:4px; }
.hotel-row:first-child{ padding-top:12px; }
.area-group .hotel-row:first-child{ padding-top:12px; }
.hotel-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.hotel-identity{ display:flex; gap:13px; align-items:flex-start; }
.hotel-avatar{ width:44px; height:44px; border-radius:13px; background:var(--blue-tint); color:var(--blue); display:flex; align-items:center; justify-content:center; font-family:'Manrope', sans-serif; font-weight:800; font-size:17px; flex:none; }
.hotel-name{ font-family:'Manrope', sans-serif; font-size:16.5px; font-weight:700; margin:0; color:var(--basalt); line-height:1.3; }
.hotel-subline{ font-size:12.5px; color:var(--faint); margin-top:3px; }
.price{ text-align:right; flex:none; }
.price .pn{ font-family:'Manrope', sans-serif; font-weight:700; font-size:16px; color:var(--basalt); }
.price .tot{ font-size:11.5px; color:var(--faint); margin-top:2px; }

.chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; padding:5px 11px; border-radius:20px; background:var(--canvas-tint); color:var(--soft); }
.chip.good{ background:var(--green-tint); color:var(--green-deep); }
.chip.warn{ background:var(--warn-bg); color:var(--warn-text); }
.chip.approved{ background:var(--bamboo); color:#fff; }
.chip.invoice{ background:var(--purbeck-deep); color:#fff; }
.chip.preferred{ background:var(--blue); color:#fff; }

.doc-dropzone{ border:1.5px dashed var(--canvas); border-radius:14px; padding:16px; text-align:center; transition:background .15s, border-color .15s; }
.doc-dropzone.drag-over{ background:var(--canvas-tint); border-color:var(--basalt); }

.actions{ display:flex; gap:10px; flex-wrap:wrap; }
.actions button, .actions a{ flex:1; min-width:110px; }

.banner{ font-size:12.5px; color:var(--basalt); background:var(--canvas-tint); border:1px solid var(--canvas); border-radius:12px; padding:12px 14px; margin-bottom:18px; line-height:1.5; }
.banner.good{ background:var(--green-tint); color:var(--green-deep); font-weight:600; }
.banner.warn{ background:var(--warn-bg); color:var(--warn-text); font-weight:600; }

.orientation-banner{ position:relative; font-size:12.5px; color:var(--basalt); background:var(--blue-tint); border:1px solid var(--canvas); border-radius:12px; padding:14px 40px 14px 16px; margin-bottom:18px; line-height:1.65; }
.orientation-banner b{ color:var(--basalt); }
.orientation-banner .dismiss{ position:absolute; top:10px; right:10px; appearance:none; border:none; background:none; color:var(--soft); font-size:16px; line-height:1; cursor:pointer; padding:4px; }
.orientation-banner .dismiss:hover{ color:var(--basalt); }

.tab-instructions-row{ display:flex; justify-content:flex-end; margin-bottom:10px; }
.instructions-btn{ display:inline-flex; align-items:center; gap:5px; appearance:none; border:1px solid var(--blue); background:var(--blue-tint); color:var(--blue); font-family:'Inter', sans-serif; font-size:12px; font-weight:700; padding:6px 12px; border-radius:20px; cursor:pointer; }
.instructions-btn:hover{ background:var(--blue); color:var(--card); }
.instructions-btn svg{ width:14px; height:14px; flex:none; }

.howto-step{ display:flex; align-items:flex-start; gap:16px; padding:18px 0; border-bottom:1px solid var(--canvas-tint); }
.howto-step:last-child{ border-bottom:none; padding-bottom:4px; }
.howto-step:first-child{ padding-top:4px; }
.howto-num{ width:28px; height:28px; border-radius:50%; background:var(--blue-tint); color:var(--blue); display:flex; align-items:center; justify-content:center; font-family:'Manrope', sans-serif; font-weight:800; font-size:13px; flex:none; }
.howto-icon{ width:22px; height:22px; color:var(--soft); flex:none; margin-top:3px; }
.howto-icon svg{ width:100%; height:100%; }
.howto-title{ font-family:'Manrope', sans-serif; font-weight:700; font-size:14.5px; color:var(--basalt); }
.howto-desc{ font-size:13px; color:var(--soft); margin-top:4px; line-height:1.5; }
.share-box{ white-space:pre-wrap; font-family:'IBM Plex Mono'; font-size:12.5px; background:var(--canvas-tint); border:1px solid var(--canvas); border-radius:14px; padding:18px; line-height:1.6; color:var(--basalt); }

.contact-block{ background:var(--canvas-tint); border-radius:12px; padding:14px 16px; margin-bottom:12px; }
.contact-row{ display:flex; align-items:center; justify-content:space-between; padding:4px 0; }
.contact-row .num{ font-family:'IBM Plex Mono'; font-weight:700; font-size:15px; color:var(--basalt); }
.contact-row .mail{ font-family:'IBM Plex Mono'; font-size:12.5px; color:var(--basalt); }
.contact-row a{ color:inherit; text-decoration:none; }

.fitter-row{ display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--canvas-tint); padding:14px 0; }
.fitter-row:last-child{ border-bottom:none; }
.fitter-name{ font-family:'Manrope', sans-serif; font-weight:700; font-size:14.5px; color:var(--basalt); }
.fitter-num{ font-family:'IBM Plex Mono'; font-size:12.5px; color:var(--faint); }

.toast{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--basalt-deep); color:#fff; padding:11px 20px; border-radius:12px; font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s; z-index:50; box-shadow:var(--shadow); }
.toast.show{ opacity:1; }
.stepper{ display:flex; gap:6px; margin-bottom:20px; }
.stepper div{ flex:1; height:3px; background:var(--canvas); border-radius:3px; }
.stepper div.active{ background:var(--basalt); }
.demo-tag{ font-family:'IBM Plex Mono'; font-size:10.5px; color:var(--faint); }

.booking-row{ border:1px solid var(--canvas-tint); border-radius:14px; padding:16px 18px; margin-bottom:14px; background:var(--card); box-shadow:var(--shadow); }
.booking-row .top{ display:flex; justify-content:space-between; font-family:'Manrope', sans-serif; font-weight:700; font-size:14.5px; color:var(--basalt); }
.booking-row .sub{ font-size:12.5px; color:var(--faint); margin-top:4px; }
.status-pill{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; background:var(--canvas-tint); color:var(--basalt); padding:3px 10px; border-radius:20px; border:1px solid var(--canvas); }
.empty{ font-size:13px; color:var(--faint); text-align:center; padding:20px 0; }

/* ---------- Booking status strip (#24) ---------- */
.strip-step{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--canvas-tint); }
.strip-step:last-child{ border-bottom:none; }
.strip-step-main{ display:flex; align-items:flex-start; gap:10px; }
.strip-tick{ flex:none; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; margin-top:1px; }
.strip-tick.good{ background:var(--green-tint); color:var(--green-deep); }
.strip-tick.pending{ background:var(--warn-bg); color:var(--warn-text); font-size:9px; }
.strip-tick.muted{ background:var(--canvas-tint); color:var(--faint); }
.strip-step-title{ font-family:'Manrope', sans-serif; font-weight:700; font-size:13px; color:var(--basalt); }
.strip-step-sub{ font-size:12px; color:var(--faint); margin-top:2px; }
.strip-step-when{ font-size:11.5px; color:var(--faint); white-space:nowrap; text-align:right; }
.strip-step-action{ flex:none; }

.costs-table-scroll{ overflow-x:auto; }
.costs-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.costs-table th{ text-align:left; font-family:'Manrope', sans-serif; font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--faint); padding:8px 10px; border-bottom:2px solid var(--canvas-tint); white-space:nowrap; }
.costs-table td{ padding:10px; border-bottom:1px solid var(--canvas-tint); vertical-align:top; color:var(--basalt); }
.costs-table tfoot td{ font-weight:700; border-top:2px solid var(--canvas-tint); border-bottom:none; }
.costs-table .num{ font-family:'IBM Plex Mono'; text-align:right; white-space:nowrap; }

.costs-section-title{ font-family:'Manrope', sans-serif; font-weight:700; font-size:13px; color:var(--basalt); margin:22px 0 10px; padding-top:14px; border-top:1px solid var(--canvas-tint); }
.fitter-checkbox-list{ display:flex; flex-direction:column; gap:8px; }
.fitter-checkbox-list label{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--basalt); cursor:pointer; font-weight:500; }
.room-row{ display:flex; gap:10px; align-items:flex-end; margin-bottom:10px; }
.room-row .field{ flex:1; margin-bottom:0; }

/* Personal logins */
.who-am-i{ color:var(--soft); font-size:12.5px; font-weight:600; flex:none; }
.people-flags{ display:flex; flex-wrap:wrap; gap:6px 18px; }
.people-flags label, .person-flags label{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:500; }
.person-row{ border-top:1px solid var(--canvas-tint); padding:14px 0; }
.person-row:first-child{ border-top:0; }
.person-row.inactive .person-name{ opacity:.55; text-decoration:line-through; }
.person-name{ font-weight:700; }
.person-flags{ display:flex; flex-wrap:wrap; gap:6px 18px; margin:8px 0; }
.person-reset{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.person-reset input{ max-width:230px; }

/* Card Payments app */
a.ghost-link{ color:var(--soft); font-size:12.5px; font-weight:600; text-decoration:none; flex:none; padding:8px 4px; }
a.ghost-link:hover{ color:var(--basalt-deep); text-decoration:underline; }
.inline-check{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:500; text-transform:none; letter-spacing:0; }
.cp-toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.cp-toolbar input[type=month]{ width:auto; }
.cp-summary{ margin:14px 0 6px; color:var(--soft); font-size:13.5px; }
.cp-hint{ margin:-6px 0 14px; color:var(--soft); font-size:13.5px; }
.cp-missing{ color:var(--warn-text); font-weight:600; }
.cp-charged{ padding:11px 0; font-weight:700; }
.cp-row{ border-top:1px solid var(--canvas-tint); padding:14px 0; }
.cp-row:first-child{ border-top:0; }
.cp-row.voided .cp-head{ opacity:.55; }
.cp-head{ display:flex; gap:12px; justify-content:space-between; align-items:flex-start; cursor:pointer; }
.cp-title{ font-weight:700; }
.cp-amount{ font-family:'IBM Plex Mono', monospace; font-weight:600; margin-left:8px; }
.cp-sub{ color:var(--soft); font-size:13px; margin-top:3px; }
.cp-side{ flex:none; }
.cp-detail{ margin-top:12px; }
.cp-block{ border:1px solid var(--canvas-tint); border-radius:14px; padding:14px 16px; margin-bottom:12px; background:var(--bg); }
.cp-block h3{ margin:0 0 10px; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--soft); font-family:'Inter'; }
.cp-meta{ color:var(--soft); font-size:13px; margin-top:6px; }
.cp-history{ margin-top:10px; font-size:13px; color:var(--soft); }
.cp-history div{ padding:3px 0; }
.banner.waiting{ background:#F8EBC9; color:#7A5A12; border:1px solid #EBD79B; }
.banner.small{ margin-top:10px; font-size:13px; }
.dropzone{ border:2px dashed var(--canvas); border-radius:14px; padding:14px 16px; text-align:center; color:var(--soft); font-size:13.5px; margin-top:10px; background:var(--card); }
.dropzone.over{ border-color:var(--bamboo); background:var(--bamboo-tint); color:var(--basalt-deep); }
.link-label{ color:var(--basalt-deep); font-weight:700; text-decoration:underline; cursor:pointer; }
.dz-status{ margin-top:6px; font-weight:600; }
.set-row{ display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.set-row input{ flex:1 1 150px; min-width:0; }
.set-row.off input{ opacity:.5; }
textarea{ width:100%; font:inherit; padding:11px 12px; border:1px solid var(--canvas); border-radius:12px; background:var(--card); color:var(--basalt-deep); resize:vertical; }
@media (max-width:640px){ .row3{ grid-template-columns:1fr; } }

.cp-block a, .banner a{ color:var(--basalt-deep); font-weight:700; }

/* Card Payments: flags and checking stages */
.cp-row.flagged{ border-left:4px solid #D9A441; padding-left:12px; }
.cp-flags{ margin-top:8px; padding:8px 12px; border-radius:10px; background:#FBF1D6; color:#7A5A12; font-size:13px; font-weight:600; }
.cp-fieldset{ border:0; margin:0; padding:0; min-width:0; }
.cp-fieldset[disabled]{ opacity:.65; }
.cp-steps{ display:flex; flex-wrap:wrap; gap:6px 22px; }
.cp-step{ display:flex; align-items:baseline; gap:6px; font-size:13.5px; color:var(--faint); }
.cp-step.done{ color:var(--basalt-deep); }
.cp-tick{ font-size:14px; }
.cp-step.done .cp-tick{ color:var(--bamboo); }
.cp-step-by{ color:var(--soft); font-size:12.5px; }
.banner.waiting div{ font-weight:600; margin-top:4px; }

/* Card Payments: cancellations */
.cp-outcomes{ display:flex; flex-direction:column; gap:8px; margin:10px 0; }
.cp-refund{ margin-top:12px; padding:12px 14px; border:1px dashed #D9A441; border-radius:12px; background:#FBF1D6; }

/* Travel Hub: "Paid on a company card" panel */
.cardpay-panel{ border:1px solid var(--canvas); border-radius:14px; padding:14px 16px; background:var(--bg); margin-top:6px; }