/* ============================================================
   COLORADO CLEAN — extra stijllaag bovenop colorado.css
   Laadt alleen als het thema "Colorado Clean" (map colorado-clean)
   actief is (zie functions.php). Licht, rustig, dunne lijnen,
   Poppins (koppen, niet bold) + Inter (tekst). Rood als merkaccent.
   ============================================================ */
:root{
  --co-paper:#FFFFFF; --co-surface:#F5F4F1; --co-cream:#F5F4F1;
  --co-ink:#111111; --co-ink-soft:#2B2B2B; --co-muted:#6E6E6E;
  --co-line:rgba(17,17,17,.10); --co-line-strong:rgba(17,17,17,.22);
  --co-grad:var(--co-ink); --co-shadow:none;
  --co-cta:var(--co-red); --co-cta-hover:var(--co-red-d);
  --co-radius:14px;
  --co-font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --co-font-head:'Poppins','Inter',system-ui,sans-serif;
}

/* ---------- TYPOGRAFIE ----------
   colorado.css en de templates noemen 'Poppins'/'Raleway' op tientallen
   plekken (ook inline); daarom één globale override, met uitzondering van
   het kenteken (monospace), icoonfonts en de tooltip-"i". */
body{font-family:var(--co-font);font-size:1rem;line-height:1.6;color:var(--co-ink);background:var(--co-paper)}
body :where(*:not(.plate-input input,.plate-badge,.plate-badge *,.plate-nl,.cart-option__tip,[class*="fa-"],[class^="bi-"],[class*=" bi-"])){font-family:var(--co-font)!important}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:var(--co-font-head)!important;font-weight:500;letter-spacing:-.03em;color:var(--co-ink)}
[style*="Poppins"],.btn-co,.btn-ghost-light,.btn-ghost-dark,.brand .word,.hero-stat .score,.stat-dark .big,.stat-white .big,
.svc-name,.actie-vanaf,.actie-kaart-naam,.actie-kaart-prijs,.pakket-prijs-bedrag,.pakket-kaart-prijs,.tyre-card__brand,
.tyre-card__price,.tyre-card__season-label,.onderwerp-label,.mobile-nav a,.accordion-button,.nav-phone{font-family:var(--co-font-head)!important}
::selection{background:var(--co-red);color:#fff}
strong,b{font-weight:600}
.fw-bold{font-weight:600!important}
.fw-semibold,.fw-medium{font-weight:500!important}
[style*="font-weight:800"],[style*="font-weight:700"],[style*="font-weight: 800"],[style*="font-weight: 700"]{font-weight:500!important;letter-spacing:-.03em}
.text-muted{color:var(--co-muted)!important}

/* zware gewichten uit colorado.css terugbrengen */
.hero-clean h1,.svc-panel h3,.actie h2,.pakket-verwijs h2,.hero-stat .score,.stat-dark .big,.stat-white .big,.actie-vanaf,
.pakket-prijs-bedrag,.pakket-kaart-prijs,.tyre-card__price,.actie-kaart-prijs,.tyre-field input,.tyre-sep,.onderwerp-label,
.tyre-card__brand,.tyre-card__season-label,.qty-stepper button{font-weight:500}
.btn-co,.btn-ghost-light,.btn-ghost-dark,.nav-phone,.mobile-nav a,.svc-name,.accordion-button,.step-pill,.slot-btn,.cal-nav,
.season-pill,.filter-toggle,.tyre-field-label,.filter-panel__label,.review-card__author,.vehicle-info-grid .val,.hours-grid .lbl,
.hours-grid .val,.booking-summary-row strong,.cart-row__title,.cart-row__price,.cart-totals-row strong,.cart-option,.actie-kaart-naam,
.actie-badge,.svc-panel .tag,.tyre-tag,.tyre-card__size,.pakket-model,.pakket-prijs-label,.onderwerp-select,.qty-stepper span,
.cart-badge,.review-card__avatar--fallback,.badge-soft,.chip,.required-mark{font-weight:500}
.co-menu a,.svc-point,.booking-error,.vehicle-info-grid .lbl,.cal-day,.filter-panel .form-select,.results-toolbar__sort,
.brand-combo__list li,.cart-row__meta,.cart-totals-row span,.booking-summary-row span,.foot-menu a,.tyre-card__model,
.cart-usps li,.checkout-note,.cart-empty,.banden-empty,.eu-label-link,.pakket-prijs-sub,.actie-kaart-regel,.cart-option small,
.tyre-card__price small,.cart-totals-row--total small{font-weight:400}
.hero-clean .lead,.svc-panel p,.about-card p,.review-card__text,.actie-lead,.pakket-verwijs p{font-weight:400}

.eyebrow{font-weight:500;font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--co-red)}
/* geen hoofdletters in kopjes en labels (alleen het Actie-label blijft) */
.filter-panel__label,.pakket-prijs-label,.pakket-kaart-prijs span,.actie-vanaf span{text-transform:none;letter-spacing:0}
.eyebrow::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--co-red);margin-right:.6rem;vertical-align:middle;transform:translateY(-1px)}

/* ---------- KNOPPEN ---------- */
.btn-co{background:var(--co-cta);color:#fff;border-radius:999px;padding:.8rem 1.5rem;box-shadow:none;transition:background .2s}
.btn-co:hover{background:var(--co-cta-hover);color:#fff;transform:none;box-shadow:none}
.btn-ghost-light,.btn-ghost-dark{color:var(--co-ink);background:transparent;border:1px solid var(--co-line-strong);border-radius:999px;padding:.8rem 1.4rem;transition:border-color .2s,background .2s}
.btn-ghost-light:hover,.btn-ghost-dark:hover{color:var(--co-red);background:var(--co-surface);border-color:var(--co-red)}

/* ---------- HEADER ---------- */
.site-header,body.co-front .site-header{position:sticky;inset:0 0 auto 0;z-index:40;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--co-line);padding:.85rem 0}
@media (min-width:783px){body.admin-bar .site-header{top:32px}}
.brand .word{color:var(--co-ink);font-weight:600;letter-spacing:-.03em}
.brand .kicker{color:var(--co-muted);font-weight:500}
.brand .mark circle[stroke="#fff"]{stroke:var(--co-red)}
.co-menu a{color:var(--co-ink);opacity:.72;transition:opacity .2s}
.co-menu a:hover,.co-menu .current-menu-item a{color:var(--co-red);opacity:1}
@media (min-width:992px) and (max-width:1199px){.site-header nav{gap:1rem!important}.co-menu{gap:.9rem}.co-menu a{font-size:.88rem}}
.nav-phone{color:var(--co-ink)}
.site-header .btn-co{white-space:nowrap;flex-shrink:0;padding:.6rem 1.2rem;font-size:.92rem}
.hamburger{border:1px solid var(--co-line-strong);background:transparent;border-radius:999px}
.hamburger span{background:var(--co-ink);height:1.5px}
.mobile-nav a{font-size:1.25rem;letter-spacing:-.02em}
.mobile-nav a:hover,.mobile-nav a:active{color:var(--co-red)}

/* ---------- HERO (template-parts/hero-clean.php) ----------
   Desktop: tekst links; rechts de foto (sluit aan op de nav) met reviewscore
   en het afsprakenformulier als kaart over de onderrand van de foto.
   Mobiel: tekst, dan foto met het formulier half over de onderrand. */
.hero-clean{padding:0 0 4.5rem}
.hero-clean__grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "media" "booking"}
.hero-clean__media{grid-area:media;position:relative;margin-top:2.5rem}
.hero-clean__img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--co-radius)}
.hero-clean__text{grid-area:text;padding-top:3rem}
.hero-clean h1{font-size:clamp(2.3rem,4.6vw,3.9rem);line-height:1.08;letter-spacing:-.03em;margin:0 0 1.4rem;overflow-wrap:normal;word-break:normal;hyphens:manual}
.hero-clean .lead{color:var(--co-muted);font-size:clamp(1.05rem,2vw,1.2rem);line-height:1.6;max-width:34rem;margin-bottom:2rem}
.hero-clean__stat{position:absolute;top:1rem;left:1rem;padding:.7rem 1rem;gap:.8rem;background:#fff}
.hero-clean__stat .score{font-size:1.9rem}
.hero-clean__booking{grid-area:booking;position:relative;margin:-2.5rem .75rem 0;background:#fff;border:1px solid var(--co-line);border-radius:calc(var(--co-radius) + 4px);padding:1.4rem;scroll-margin-top:6rem}
@media (min-width:992px){
  .hero-clean{padding-bottom:7rem}
  .hero-clean__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto 1fr;column-gap:3rem;grid-template-areas:"text media" "text booking"}
  .hero-clean__media{margin-top:0}
  .hero-clean__img{border-radius:0 0 var(--co-radius) var(--co-radius)}
  .hero-clean__text{position:sticky;top:5rem;align-self:start;padding-top:5.5rem}
  .hero-clean__booking{align-self:start;margin:-4rem 1.5rem 0;padding:1.8rem}
}
.hero-clean__booking-title{font-size:1.35rem;margin-bottom:1rem}
.hero-clean__booking .booking-wizard{border:0;border-radius:0;padding:0;background:transparent}
.hero-clean__booking .booking-steps{margin-bottom:1.2rem!important}
.hero-clean__booking [data-step-panel="2"] > .row > .col-md-6{flex:0 0 auto;width:100%}
.hero-clean__booking .booking-steps{gap:.4rem}
@media (min-width:576px){.hero-clean__booking .booking-steps{flex-wrap:nowrap}}
@media (max-width:575px){.hero-clean__booking{padding:1.1rem}.hero-clean__stat{top:.75rem;left:.75rem}}
.hero-clean__booking .step-pill{font-size:.74rem;padding:.4rem .75rem;white-space:nowrap}
.hero-clean__booking [data-step-panel="1"] > .d-flex{flex-direction:column!important}
.hero-clean__booking .plate-input{flex:0 0 58px;width:100%}
#bookingWizard{scroll-margin-top:6rem}
.chip{background:rgba(192,39,58,.06);border:1px solid rgba(192,39,58,.25);color:var(--co-ink);font-size:.82rem;margin-bottom:1.4rem}
.chip .dot,.chip .dot--closed{box-shadow:none}
/* open/gesloten-status in de hero-chip: groen = open, rood = gesloten */
.chip--status{gap:.55rem;padding:.5rem .95rem}
.chip--status .chip__status{font-weight:600}
.chip--status .chip__loc{color:var(--co-muted);padding-left:.55rem;border-left:1px solid currentColor;border-left-color:rgba(17,17,17,.18)}
.chip--status.is-open{background:#E9F7EE;border-color:#A8DDB9}
.chip--status.is-open .chip__status{color:#147A3D}
.chip--status.is-open .dot{background:#1A9C4B}
.chip--status.is-closed{background:#FBE9EB;border-color:#EBB3BB}
.chip--status.is-closed .chip__status{color:var(--co-red)}
.chip--status.is-closed .dot{background:var(--co-red)}
@media (max-width:420px){.chip--status{flex-wrap:wrap;row-gap:.15rem}.chip--status .chip__loc{border-left:0;padding-left:0;flex-basis:100%;padding-left:calc(8px + .55rem)}}
.badge-soft{background:transparent;border:1px solid var(--co-line-strong);color:var(--co-ink)}
.hero-stat{border:1px solid var(--co-line);border-radius:var(--co-radius)}
.hero-stat .score{letter-spacing:-.025em}
.stars{color:var(--co-red);letter-spacing:1px}
/* reviewregel op dienst- en pakketpagina's: lichtgrijs vlak, zweeft niet los op wit */
.co-rating{display:inline-flex!important;flex-wrap:wrap;background:var(--co-surface);border-radius:var(--co-radius);padding:.85rem 1.2rem}
@media (min-width:992px){.col-lg-4:has(> .co-rating){display:flex;flex-direction:column;align-items:flex-end}}

/* ---------- SECTIES ---------- */
.section{padding:4.5rem 0}
@media (min-width:992px){.section{padding:7rem 0}}
/* eerste sectie direct onder de nav (subpagina's): minder witruimte boven */
.site-main > .section:first-child{padding-top:2.25rem}
@media (min-width:992px){.site-main > .section:first-child{padding-top:3rem}}
.section h2{letter-spacing:-.025em}

/* diensten */
.svc-tab{background:#fff;border:1px solid var(--co-line);border-radius:var(--co-radius);box-shadow:none;transition:border-color .2s,background .2s}
.svc-tab:hover{transform:none;border-color:var(--co-line-strong)}
.svc-tab.active{background:var(--co-surface);border-color:var(--co-red);box-shadow:inset 3px 0 0 var(--co-red)}
.svc-ic{background:rgba(192,39,58,.08);color:var(--co-red);border-radius:10px}
.svc-tab.active .svc-ic{background:var(--co-red);color:#fff}
.svc-chev{color:var(--co-red)}
.svc-panel{background:var(--co-surface);color:var(--co-ink);border:1px solid var(--co-line);border-radius:var(--co-radius);box-shadow:none}
.svc-panel__glow{display:none}
.svc-panel .tag{background:var(--co-red);border:0;color:#fff}
.svc-panel h3{font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:-.025em}
.svc-panel p{color:var(--co-muted)}
.svc-check{background:var(--co-red)}
.accordion-item{border-radius:var(--co-radius)!important}
.accordion-button:not(.collapsed){background:var(--co-surface);color:var(--co-red)}

/* over */
.about-card{background:var(--co-surface);border-radius:var(--co-radius)}
.about-card p{color:var(--co-ink-soft);font-size:clamp(1.05rem,2.4vw,1.25rem);line-height:1.65}
.stat-dark{background:#fff;color:var(--co-ink);border:1px solid var(--co-line);border-radius:var(--co-radius)}
.stat-dark__divider{background:var(--co-line)}
.stat-dark [style*="rgba(255,255,255"]{color:var(--co-muted)!important}
.stat-white{border-radius:var(--co-radius);box-shadow:none}

/* reviews */
.review-card{border-radius:var(--co-radius);box-shadow:none}
.review-card__avatar--fallback{background:rgba(192,39,58,.08);color:var(--co-red)}

/* ---------- ACTIEBLOK: rood vlak, valt bewust op ---------- */
.actie{background:var(--co-red);color:#fff;border:0;border-radius:calc(var(--co-radius) + 6px);box-shadow:none}
.actie h2{color:#fff;letter-spacing:-.025em}
.actie-badge{background:#fff;color:var(--co-red);font-size:.72rem}
.actie-lead{color:rgba(255,255,255,.88)}
/* "vanaf €…" weg in Clean: de prijzen staan al op de pakketkaarten */
.actie-vanaf{display:none}
.actie .btn-co{background:#fff;color:var(--co-red)}
.actie .btn-co:hover{background:var(--co-ink);color:#fff}
.actie .btn-co:focus-visible,.actie a:focus-visible{outline-color:#fff}
.actie-strip{scrollbar-color:rgba(255,255,255,.55) transparent}
.actie-kaart{border:0;border-radius:var(--co-radius);transition:background .2s}
.actie-kaart:hover{transform:none;background:var(--co-surface)}
.actie-kaart img{border-radius:10px}
.actie-kaart-prijs{letter-spacing:-.03em}

/* dienstpagina's */
.pakket-prijs{background:var(--co-surface);border:1px solid var(--co-line);border-radius:var(--co-radius)}
.pakket-prijs-bedrag,.pakket-kaart-prijs{letter-spacing:-.03em}
.pakket-kaart-prijs span{font-weight:500}
.pakket-verwijs{background:var(--co-surface);color:var(--co-ink);border:1px solid var(--co-line);border-radius:var(--co-radius)}
.pakket-verwijs h2{color:var(--co-ink)}
.pakket-verwijs p{color:var(--co-muted)}
.page-plain-header{background:var(--co-surface);border-bottom:1px solid var(--co-line)}

/* ---------- BOOKING WIZARD ---------- */
.booking-wizard{border-radius:calc(var(--co-radius) + 4px);box-shadow:none}
.step-pill.active,.cal-day.selected,.slot-btn.selected,.season-pill.active{background:var(--co-red);color:#fff;box-shadow:none}
.cal-day{border-radius:8px}
.booking-step .form-control,.booking-step .form-select{border-radius:10px}
.booking-step .form-control:focus,.booking-step .form-select:focus,.filter-panel .form-select:focus{border-color:var(--co-red)}
.booking-step .form-label{font-weight:500}
.onderwerp-field{background:var(--co-surface);border:1px solid var(--co-line);border-radius:var(--co-radius)}
.onderwerp-select{border:1px solid var(--co-red)!important;font-size:1.05rem}
.booking-summary{background:var(--co-surface);color:var(--co-ink);border:1px solid var(--co-line);border-radius:var(--co-radius)}
.booking-summary .eyebrow{color:var(--co-red);opacity:1}
.booking-summary-row{border-bottom-color:var(--co-line)}
.booking-summary-row span{color:var(--co-muted)}
.vehicle-banner{border:1px solid var(--co-line)}

/* ---------- BANDEN ---------- */
.tyre-search-card,.tyre-card,.banden-empty,.eu-label-modal{border-radius:var(--co-radius);box-shadow:none}
.tyre-card{transition:border-color .2s}
.tyre-card:hover{transform:none;border-color:var(--co-line-strong)}
.tyre-field input{border:1px solid var(--co-line-strong);border-radius:10px}
.tyre-field input:focus{border-color:var(--co-red)}
.tyre-sep{color:var(--co-muted)}
.tyre-tag{background:var(--co-surface)}
.cart-option{border-style:solid;background:var(--co-surface);border-radius:var(--co-radius)}
.cart-fab{background:var(--co-red)}
.cart-badge{background:var(--co-ink)}
.brand-combo__list{border-color:var(--co-line-strong)}

/* ---------- FOOTER ---------- */
.site-footer{background:linear-gradient(180deg,#fff 0%,var(--co-surface) 55%);color:var(--co-ink)}
.site-footer .word{color:var(--co-ink)}
.site-footer .kicker,.site-footer .text-white-50{color:var(--co-muted)!important}
.site-footer .border-secondary{border-color:var(--co-line)!important}
.hours-grid .lbl{color:var(--co-red)}
.foot-menu a{color:var(--co-muted)}
.foot-menu a:hover{color:var(--co-red)}

/* mobiele actiebalk */
.mobile-actions{background:rgba(255,255,255,.94);box-shadow:none}
.mobile-actions .btn{border-radius:999px}

/* ---------- GEEN GLOW / SCHADUW ----------
   Vlak ontwerp: geen schaduwen of gloed rond knoppen, velden en kaarten (ook niet
   die van Bootstrap bij focus/active). Toetsenbordfocus blijft zichtbaar als
   strakke 2px-outline in plaats van een gloed. */
.btn-co,.btn-co:hover,.btn-co:focus,.btn-co:active,.btn,.btn:hover,.btn:focus,.btn:active,.btn-close:focus,
.btn-ghost-light,.btn-ghost-dark,.slot-btn,.slot-btn.selected,.step-pill,.season-pill,.cal-day,.filter-toggle,
.form-control:focus,.form-select:focus,.form-check-input:focus,.onderwerp-select,.onderwerp-select:focus,
.plate-input:focus-within,.tyre-field input:focus,.accordion-button:focus,.cart-fab,.hero-stat,.brand-combo__list,
.mobile-actions,.svc-panel,.booking-wizard,.tyre-card,.review-card,.cart-option__tip::after{box-shadow:none!important}
.chip .dot,.chip .dot--closed{box-shadow:none!important}
.plate-input:focus-within{outline:2px solid var(--co-red);outline-offset:2px}
a:focus-visible,button:focus-visible,.btn-co:focus-visible,.btn:focus-visible,.form-control:focus-visible,.form-select:focus-visible{outline:2px solid var(--co-red);outline-offset:2px}