/* =============================================================================
   WebShield "Compare nearby plans" speed slider  --  slider.css
   Re-skin of the RBE speed slider to the WebShield brand.
   Palette source: Skill(webshield) brand guide (Carrot #ED6506 + Shadow greys,
   Titillium Web). NO RBE navy / RBE orange residue anywhere in this file.
   Contrast: all body/label text clears WCAG AA 4.5:1 on white; small orange text
   uses #c2410c (5.18:1) never Carrot; Carrot #ED6506 (3.25:1) carries only the
   large/bold CTA label (>=18.66px) + the track/marker graphics. See AUDIT.md.
   Scope everything under .ws-ss so it is safe to drop into any page.
   ============================================================================= */

.ws-ss .ws-speed-slider{
  --ws-carrot:#ED6506;      /* action colour: track end, marker ring, CTA bg */
  --ws-carrot-ink:#c2410c;  /* dark orange for SMALL orange text + focus ring (5.18:1) */
  --ws-ink:#1c1c1c;         /* body / heading ink */
  --ws-shadow:#646464;      /* structural grey (>=4.5:1 at label sizes) */
  --ws-muted:#4e545b;       /* muted body text (7.66:1) */
  --ws-hair:#e2e5e9;        /* hairline */
  --ws-border:#d5d8dc;      /* card border */
  background:#fff;
  border:1px solid var(--ws-border);
  border-radius:20px;
  padding:30px 32px;
  box-shadow:0 2px 12px rgba(28,28,28,.06);
  font-family:"Titillium Web",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ws-ink);
}
.ws-ss .ws-speed-slider *{box-sizing:border-box}

/* ---- track + native range input --------------------------------------- */
.ws-ss .ss-track{position:relative;padding:6px 2px 2px}
.ws-ss .ss-range{
  -webkit-appearance:none;appearance:none;
  width:100%;height:8px;border-radius:999px;
  background:linear-gradient(90deg,#9aa0a6 0%,var(--ws-carrot) 100%); /* grey -> Carrot */
  outline:none;margin:0;cursor:pointer;
}
.ws-ss .ss-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:26px;height:26px;border-radius:999px;
  background:#fff;border:3px solid var(--ws-carrot);
  box-shadow:0 2px 8px rgba(28,28,28,.22);cursor:pointer;
  transition:transform .15s ease;
}
.ws-ss .ss-range::-moz-range-thumb{
  width:22px;height:22px;border-radius:999px;
  background:#fff;border:3px solid var(--ws-carrot);
  box-shadow:0 2px 8px rgba(28,28,28,.22);cursor:pointer;
}
.ws-ss .ss-range::-webkit-slider-thumb:hover{transform:scale(1.08)}
/* Strong, high-contrast keyboard focus (dark orange 5.18:1) */
.ws-ss .ss-range:focus-visible{outline:3px solid var(--ws-carrot-ink);outline-offset:4px}
.ws-ss .ss-range:focus{outline:3px solid var(--ws-carrot-ink);outline-offset:4px}      /* fallback */
.ws-ss .ss-range:focus:not(:focus-visible){outline:none}                               /* mouse: no ring */

/* ---- tick shortcuts (buttons) ----------------------------------------- */
.ws-ss .ss-ticks{display:flex;justify-content:space-between;gap:2px;margin-top:14px;padding:0 4px}
.ws-ss .ss-ticks button{
  flex:0 0 auto;background:none;border:none;padding:3px 2px;min-height:22px;
  font:inherit;font-size:11.5px;font-weight:600;color:var(--ws-shadow);
  cursor:pointer;line-height:1.2;text-align:center;white-space:nowrap;
  border-radius:6px;transition:color .15s ease;
}
.ws-ss .ss-ticks button.on{color:var(--ws-carrot-ink);font-weight:700}
.ws-ss .ss-ticks button:hover{color:var(--ws-ink)}
.ws-ss .ss-ticks button.on:hover{color:var(--ws-carrot-ink)}
.ws-ss .ss-ticks button:focus-visible{outline:3px solid var(--ws-carrot-ink);outline-offset:2px}

/* ---- SLOWER / FASTER end labels --------------------------------------- */
.ws-ss .ss-ends{
  display:flex;justify-content:space-between;margin-top:8px;
  font-size:12px;color:var(--ws-shadow);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
}

/* ---- current-plan panel ----------------------------------------------- */
.ws-ss .ss-panel{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-top:22px;padding-top:22px;border-top:1px solid var(--ws-hair);
}
.ws-ss .ss-info{min-width:0}
.ws-ss .ss-name{font-size:1.5rem;font-weight:700;color:var(--ws-ink);line-height:1.1;letter-spacing:-.01em}
.ws-ss .ss-speed{font-size:15px;color:var(--ws-carrot-ink);font-weight:700;margin-top:2px}  /* small orange -> dark */
.ws-ss .ss-meta{font-size:14px;color:var(--ws-muted);margin-top:6px;max-width:44ch;line-height:1.45}
.ws-ss .ss-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:0 0 auto}
.ws-ss .ss-current{font-size:13px;color:var(--ws-muted);font-weight:700;display:inline-flex;align-items:center;gap:6px}
.ws-ss .ss-current svg{width:16px;height:16px;flex:0 0 auto;color:var(--ws-carrot-ink)}

/* ---- info note -------------------------------------------------------- */
.ws-ss .ss-note{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;font-size:13.5px;color:var(--ws-muted);line-height:1.5}
.ws-ss .ss-note svg{flex:0 0 auto;width:18px;height:18px;color:var(--ws-shadow);margin-top:1px}

/* ---- CTA button (Carrot bg, LARGE bold white label = large-text 3:1) --- */
.ws-ss .ws-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:700;font-size:20px;line-height:1.1;
  padding:12px 26px;border-radius:999px;border:2px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .16s ease;
}
.ws-ss .ws-btn--primary{background:var(--ws-carrot);color:#fff}
.ws-ss .ws-btn--primary:hover{background:var(--ws-carrot-ink);color:#fff}
.ws-ss .ws-btn:focus-visible{outline:3px solid var(--ws-carrot-ink);outline-offset:3px}

.ws-ss [hidden]{display:none!important}

/* ---- reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .ws-ss .ss-range::-webkit-slider-thumb{transition:none}
  .ws-ss .ss-range::-webkit-slider-thumb:hover{transform:none}
  .ws-ss .ss-ticks button,.ws-ss .ws-btn,.ws-ss .ss-range{transition:none}
}

/* ---- mobile: prevent tick-label wrap; stack CTA full-width ------------- */
@media (max-width:560px){
  .ws-ss .ws-speed-slider{padding:24px 20px}
  .ws-ss .ss-ticks{gap:1px}
  .ws-ss .ss-ticks button{font-size:0;padding:6px 1px}   /* hide labels, keep tap target */
  .ws-ss .ss-ticks button.on{font-size:11px;font-weight:700;z-index:2} /* only current shows */
  .ws-ss .ss-name{font-size:1.3rem}
  .ws-ss .ss-actions{align-items:stretch;width:100%}
  .ws-ss .ss-actions .ws-btn{width:100%}
}