/* The calendar widget (used by the site, the customer pages and the admin) and the shared colour tokens. */
:root{
  --ink:#0A0A0B;--ink-raised:#141416;--bone:#EDE6DC;--champagne:#B8A88F;--muted:#8A8A8E;--line:#2A2A2D;
  --bone-2:#C9C2B8;--champagne-hi:#CDBFA6;--warn:#D9A66B;--danger:#C97B6E;--ok:#8FB59A;
  --display:"Cormorant Garamond","Times New Roman",serif;
  --body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Calendar widget ---------- */
.cal{--cell:40px}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.cal-title{margin:0;font:600 1.0625rem/1.2 var(--body);color:var(--bone)}
.cal-nav{-webkit-appearance:none;appearance:none;width:40px;height:40px;border:1px solid var(--line);border-radius:3px;background:transparent;color:var(--bone);font:400 1.4rem/1 var(--body);cursor:pointer}
.cal-nav:disabled{opacity:.3;cursor:default}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow{text-align:center;color:var(--muted);font-size:.75rem;font-weight:500;padding:4px 0 6px}
.cal-day{-webkit-appearance:none;appearance:none;min-height:var(--cell);border:1px solid transparent;border-radius:3px;background:transparent;color:var(--muted);font:500 .9375rem/1 var(--body);cursor:default;position:relative}
.cal-day.has{color:var(--bone);border-color:var(--line);background:var(--ink-raised);cursor:pointer}
.cal-day.has::after{content:"";position:absolute;left:50%;bottom:6px;width:4px;height:4px;border-radius:50%;background:var(--champagne);transform:translateX(-50%)}
.cal-day.selected{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.cal-day.selected::after{background:var(--ink)}
.cal-day:disabled{opacity:.45}
.cal-status{margin:12px 0 0;color:var(--muted);font-size:.875rem}
.cal-times{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.cal-times-title{margin:0 0 10px;font:600 .9375rem/1.3 var(--body);color:var(--bone)}
.cal-times-title:focus{outline:none}
.cal-time-list{display:flex;flex-wrap:wrap;gap:8px}
.cal-time{-webkit-appearance:none;appearance:none;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:3px;background:var(--ink);color:var(--bone);font:500 .9375rem/1 var(--body);cursor:pointer}
.cal-time[aria-pressed="true"]{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.cal :focus-visible{outline:3px solid var(--champagne);outline-offset:2px}
.cal-day.selected:focus-visible,.cal-time[aria-pressed="true"]:focus-visible{box-shadow:inset 0 0 0 4px var(--ink)}
@media (hover:hover){.cal-day.has:hover{border-color:var(--champagne)}.cal-time:hover{border-color:var(--champagne)}.cal-nav:not(:disabled):hover{border-color:var(--champagne)}}


/* ---------- Vehicle and shade picker (public/vehicle.js), on the site and in the admin ---------- */
.vp{display:grid;gap:14px}
.vp-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:560px){
  .vp-car{grid-template-columns:.8fr 1.2fr 1.4fr}
  .vp-other,.vp-shades{grid-template-columns:1fr 1fr}
}
.vp-field[hidden],.vp [hidden]{display:none!important}
.vp label{display:block;font-size:.875rem;font-weight:500;margin-bottom:6px}
.vp .error{display:none;margin:6px 0 0;font-size:.875rem;color:var(--champagne)}
.vp .error.is-visible{display:block}
.vp-class{border:1px solid var(--line);border-radius:4px;padding:10px 12px;margin:0}
.vp-class legend{font-size:.875rem;font-weight:500;padding:0 4px}
.vp .vp-radio{display:flex;align-items:center;gap:8px;min-height:40px;margin:0;font-weight:400;font-size:.9375rem}
.vp-radio input,.vp-check input{accent-color:var(--champagne);width:18px;height:18px;margin:0}
.vp-law{margin:0;padding:10px 12px;border-left:3px solid var(--champagne);background:rgba(184,168,143,.08);color:var(--bone);font-size:.9375rem;line-height:1.5}
.vp .vp-check{display:flex;align-items:center;gap:8px;font-weight:400;font-size:.9375rem;min-height:44px;margin:0}
.vp select:disabled{opacity:.6}