/* ===== Shared tokens + base ===== */
:root{
  --blue:#005BBB; --text:#0b1324; --muted:#5b6780; --grey-bg:#f7f9fc;
  --card:#fff; --radius:18px; --shadow:0 8px 24px rgba(9,23,42,.08);

  /* Slider tokens */
  --thumbW:22px;                 /* thumb diameter */
  --pad:calc(var(--thumbW)/2);   /* visual tuck under the thumb */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--text);background:#fff;
}

/* Layout + utilities */
.container{width:min(1100px,calc(100% - 32px));margin:0 auto}
section{padding:56px 0}
section h2{text-align:center;margin:0 0 18px}
.muted{color:var(--muted)}
.card{background:#fff;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}

/* Nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#fff;border-bottom:1px solid #eef2f6}
.nav a{text-decoration:none;color:var(--text);margin-left:16px;font-weight:600}
.nav a:hover{color:var(--blue)}

/* Add this AFTER the two above */
.nav a.active {
  color: var(--blue);
  font-weight:700; /* optional: make it stand out more */
}

/* Logo */
.logo-round{height:44px;width:44px;border-radius:50%;object-fit:cover}

/* Buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:999px;border:2px solid transparent;text-decoration:none;font-weight:700;transition:.15s ease-in-out;box-shadow:var(--shadow);cursor:pointer}
.btn.white{background:#fff;color:var(--blue);border-color:#fff}
.btn.white:hover{transform:translateY(-1px)}
.btn.blue{background:transparent;color:#fff;border-color:#fff}
.btn.blue:hover{background:#ffffff20;transform:translateY(-1px)}
.btn.primary{background:#005BBB;color:#fff;border-color:#005BBB}
.btn.secondary{background:#fff;color:#005BBB;border-color:#cfe0ff}
.cta-row{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}

/* Hero */
header.hero{background:var(--blue);color:#fff;text-align:center;padding:72px 0 64px;position:relative;overflow:hidden}
header.hero .logo-round{height:80px;width:80px;margin-bottom:12px}
header.hero h1{margin:10px 0 8px;font-size:clamp(26px,3.4vw,40px);line-height:1.15}
header.hero p{margin:0 auto 16px;opacity:.95;max-width:820px}

/* CTA band */
section.cta-band{background:var(--blue);color:#fff;text-align:center;padding:60px 20px}
section.cta-band h2{color:#fff;margin:0 0 16px}

/* Footer */
footer{padding:36px 0}
footer .container{text-align:center}
footer img.logo-round{display:block;margin:0 auto 10px}
footer p{margin:0 0 6px}
footer p:last-child{margin:0}

/* ===== Employers page specific ===== */
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.step{background:#fff;border-radius:14px;padding:14px;box-shadow:var(--shadow)}
@media (max-width:900px){ .steps{grid-template-columns:1fr} }

section.alt{background:var(--grey-bg)}
.search-hero{background:#fff}
.search-wrap.elevated{
  background:#fff;border-radius:22px;padding:22px;
  box-shadow:0 20px 40px rgba(10,23,40,.08); border:1px solid #eef2f6;
}

/* Form grid */
.form-grid{display:flex;flex-wrap:wrap;gap:12px}
.col-12{flex:0 0 100%}
.col-4{flex:1 1 calc(33.333% - 8px);min-width:240px}
.col-md-6{flex:1 1 calc(50% - 8px);min-width:260px}
label{display:block;margin:0 0 6px;font-weight:700}
.help,.hint{font-size:12px;color:#5b6780}

#employerSearch select,
#employerSearch input[type="text"],
#employerSearch input[type="date"]{width:100%}

#employerSearch .help{margin-top:6px;font-size:13px;color:#5b6780}

#employerSearch input[type="text"],
#employerSearch input[type="date"],
#employerSearch select{
  height:44px;border:1px solid #dde6f2;border-radius:12px;padding:0 14px;background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
#employerSearch input[type="text"]:focus,
#employerSearch input[type="date"]:focus,
#employerSearch select:focus{
  outline:0;border-color:#9ec3ff;box-shadow:0 0 0 3px rgba(0,91,187,.15);
}

/* Tips */
.search-head,.range-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.range-header label{margin:0;font-weight:700}
.inline-tip,#employerSearch .tip{
  display:inline-block;background:#fff9d6;border:1px solid #f0e2a4;color:#5a4b00;
  padding:6px 10px;border-radius:10px;font-size:13px;line-height:1.2;
}
.search-wrap > .tip:last-child{display:block;width:max-content;margin-left:auto}
@media (max-width:700px){
  .search-head,.range-header{flex-direction:column;align-items:flex-start}
  .inline-tip{white-space:normal;width:100%}
}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid #dfe6ef;background:#fff;cursor:pointer;transition:border-color .15s, background .15s, box-shadow .15s}
.chip:focus,.chip:hover{border-color:#bcd0f0}
.chip.active,.chip[aria-pressed="true"]{background:#eff6ff;border-color:#bcd0f0;box-shadow:inset 0 0 0 1px #cfe0ff}

/* Results */
.results .card .badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{display:inline-block;background:#eef5ff;border:1px solid #d9e6ff;border-radius:999px;padding:4px 8px;font-size:12px;color:#224}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* ===== Single-band slider (centered thumb, fixed £5 span) ===== */
:root{
  --thumbW:22px;                      /* knob size (keep in sync with thumb CSS) */
  --pad:calc(var(--thumbW)/2);        /* visual tuck under knob for the fill */
}

.range{display:flex;align-items:center;gap:12px}
.range > span{min-width:44px;text-align:center;font-weight:800}

/* track layers */
.range-track{position:relative;flex:1;height:22px}
.range-track .rail{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  height:10px;border-radius:999px;border:1px solid #d4d7dc;background:#e9edf3;
  pointer-events:none;z-index:0;
}

.range-track .fill{
  position:absolute; top:50%; transform:translateY(-50%);
  height:10px; border-radius:999px; background:var(--blue);

  /* Centered band: JS sets --centerP (0..100) and --spanP (fixed percent for £5 gap) */
  left:  calc((var(--centerP,50) - var(--spanP,0)/2) * 1%);
  width: calc(var(--spanP,0) * 1%);

  pointer-events:none; z-index:1;
}

/* single input spans the whole rail */
.range-track input[type=range]{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:22px;width:100%;
  appearance:none;-webkit-appearance:none;background:transparent;border:0;outline:0;cursor:pointer;z-index:2;
}

/* thumbs (22px) */
#employerSearch input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--blue);border:3px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.15);margin-top:-7px;
}
#employerSearch input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:var(--blue);border:3px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.15);
}
/* hide native track */
#employerSearch input[type=range]::-webkit-slider-runnable-track{background:transparent;border:0;height:10px}
#employerSearch input[type=range]::-moz-range-track{background:transparent;border:0;height:10px}
#employerSearch input[type=range]::-moz-range-progress{background:transparent}

/* === Make Employers slider thumb match Driver Sign Up === */
.range-track input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:#fff;                      /* white center */
  border:3px solid var(--blue);         /* blue ring */
  box-shadow:0 2px 8px rgba(0,0,0,.18); /* soft lift */
  margin-top:-7px;                      /* centers on track */
}
.range-track input[type=range]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:#fff;
  border:3px solid var(--blue);
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}

/* Optional: nicer focus state to match the polished feel */
.range-track input[type=range]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 4px rgba(0,91,187,.18), 0 2px 8px rgba(0,0,0,.18);
}
.range-track input[type=range]:focus-visible::-moz-range-thumb{
  box-shadow:0 0 0 4px rgba(0,91,187,.18), 0 2px 8px rgba(0,0,0,.18);
}

/* ——— Results block ——— */
.results-section { margin-top: 2.5rem; }
.results-title { margin-bottom: 0.75rem; }

/* Status/empty */
.results-status, .results-empty { 
  display: flex; align-items: center; gap: .6rem; 
  padding: .75rem 1rem; border-radius: 8px; 
  background: #f7f9ff; color: #0b66ff;
  border: 1px solid #e4ecff;
}
.results-empty { background: #fafafa; color: #555; border-color: #eee; }
.is-hidden { display: none !important; }

.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #c9daff; border-top-color: #0b66ff;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Table */
.table-wrap { overflow: auto; border: 1px solid #eee; border-radius: 10px; }
.tm-table { width: 100%; border-collapse: collapse; min-width: 840px; }
.tm-table th, .tm-table td { padding: .75rem 1rem; text-align: left; }
.tm-table thead th { 
  font-weight: 600; 
  background: #f5f8ff; 
  border-bottom: 1px solid #e6ecff; 
}
.tm-table tbody tr { border-bottom: 1px solid #f0f0f0; }
.tm-table tbody tr:hover { background: #fbfdff; }

.badge { 
  display: inline-block; padding: .2rem .5rem; 
  border: 1px solid #e5e8ef; border-radius: 999px; 
  font-size: .85rem; line-height: 1; color: #444;
}

/* Reputation stars */
.stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.star { width: 14px; height: 14px; display: inline-block; background: #e3e8f3; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.star.fill { background: #0b66ff; }
.rep-score { font-size: .85rem; color: #666; margin-left: .35rem; }

/* Actions */
.actions { display: flex; gap: .5rem; }
.btn { 
  border: 1px solid #0b66ff; 
  padding: .45rem .75rem; border-radius: 8px; 
  background: #0b66ff; color: #fff; 
  font: inherit; cursor: pointer;
}
.btn:hover { filter: brightness(0.95); }
.btn.btn-secondary { background: #fff; color: #0b66ff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Cards (mobile) */
.results-cards { display: none; margin-top: .75rem; }
.card {
  border: 1px solid #eee; border-radius: 12px; padding: .9rem; 
  background: #fff; margin-bottom: .75rem;
}
.card .row { display: flex; justify-content: space-between; gap: .75rem; margin-bottom: .3rem; }
.card .label { color: #667089; font-size: .85rem; }
.card .value { font-weight: 600; }

/* Pagination */
.results-pagination { display: flex; align-items: center; gap: .75rem; margin-top: .9rem; }
.page-indicator { color: #667089; }

/* Responsive: switch to cards under 640px */
@media (max-width: 640px) {
  .table-wrap { display: none; }
  .results-cards { display: block; }
}

/* ===== Two-column layout for results + filters ===== */
.results-layout {
  display: grid;
  grid-template-columns: 3fr 0.9fr; /* wider results, narrower filters */
  gap: 24px;
  align-items: start;
  margin-top: 1rem;
}

/* Left column (results) */
.results-main {
  min-width: 0; /* allows table wrapper to shrink inside grid */
}

/* Right column (filters) */
.filters-panel {
  position: sticky;
  top: 88px; /* adjust if your header is taller */
  align-self: start;
  background: #ffffff;
  border: 1px solid #eef1f6;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(20,40,120,.04);
}
.filters-title {
  font-size: 1rem;
  color: #55607a;
  margin: 0 0 .5rem 0;
}

/* Results section styling */
.results-section {
  border: 1px solid #eaf0ff;
  border-radius: 14px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 6px 24px rgba(11,102,255,.06);
}
.results-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 .75rem 0;
}

/* Focus pulse to draw attention when results load */
.results-title.pulse {
  animation: focusPulse 1.4s ease-out 1;
}
@keyframes focusPulse {
  0%   { box-shadow: 0 0 0 0 rgba(11,102,255,.35); }
  100% { box-shadow: 0 0 0 12px rgba(11,102,255,0); }
}

/* Keep table headers visible */
.table-wrap { overflow: auto; border: 1px solid #eee; border-radius: 10px; }
.tm-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f5f8ff;
  border-bottom: 1px solid #e6ecff;
}

/* Optional: placeholder shimmer rows so structure is visible */
.ghost-row td {
  height: 42px;
  position: relative;
  overflow: hidden;
}
.ghost-row td::after {
  content: "";
  position: absolute;
  inset: 8px 16px;
  background: linear-gradient(90deg, #f2f5fb 25%, #e9eef8 37%, #f2f5fb 63%);
  animation: shimmer 1.2s infinite linear;
}
@keyframes shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}

/* Pagination spacing */
.results-pagination { gap: .5rem; }

/* Responsive: stack filters below results on small screens */
@media (max-width: 960px) {
  .results-layout { grid-template-columns: 1fr; }
  .filters-panel { position: static; }
}

/* ===== Results vs Filters width split ===== */
/* Default: balanced, filters 280px, results flex wide */
.results-layout {
  grid-template-columns: minmax(720px, 1fr) 280px; /* results, filters */
  gap: 20px;
}
.filters-panel { padding: 12px; }

/* Table fits without scroll after removing Name col */
.tm-table { min-width: 760px; }

/* === OPTIONAL: make sidebar slimmer === */
.results-layout {
  grid-template-columns: minmax(720px, 1fr) 240px;
}
.filters-panel { padding: 10px; }
.tm-table { min-width: 760px; }

/* Uncomment to shrink filters to 220px
.results-layout {
  grid-template-columns: minmax(720px, 1fr) 220px;
}
.filters-panel { padding: 8px; }
.tm-table { min-width: 740px; }
*/

/* === OPTIONAL: adapt on very wide screens === */
@media (min-width: 1300px) {
  .results-layout { grid-template-columns: 1fr 300px; }
}

/* === OPTIONAL: help form inputs fit narrow sidebars === */
.col-4 { min-width: 200px; } /* was 240px */

/* === Accessible hide helper === */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* === Navigation: desktop vs mobile === */
.menu{display:flex;gap:18px;align-items:center}
.menu-toggle{
  display:none; background:none; border:0; font-size:28px; line-height:1;
  padding:6px 8px; cursor:pointer; border-radius:10px;
}
.menu-toggle:focus-visible{outline:2px solid var(--blue); outline-offset:3px}

/* Mobile nav */
@media (max-width: 768px){
  .nav{position:sticky;top:0;z-index:100;background:#fff}
  .menu-toggle{display:block}
  .menu{
    position:absolute; left:0; right:0; top:56px;
    display:none; flex-direction:column; gap:12px;
    padding:12px 16px; background:#fff; border-top:1px solid #eef2f6;
    box-shadow:0 10px 24px rgba(0,0,0,.06);
  }
  .menu.open{display:flex}
  .menu a{margin:0; padding:6px 2px}
}

/* === Results + Filters: put Filters first on mobile === */
/* You already stack to one column under 960px; add explicit order */
@media (max-width: 960px){
  .results-layout{grid-template-columns:1fr}
  .filters-panel{order:1; position:static; margin-bottom:14px}
  .results-main{order:2}
}

/* Ensure the sticky headers don’t overlap dropdown menu */
.tm-table thead th{ z-index: 0; } /* was 1; burger sits above */