/* All Day Services — multi-step offerte-wizard (Trustoo-stijl).
   Vervangt de Elementor-formulieren op de homepage en /offerte-aanvragen/.
   Alles scoped onder .ads-wizard / .adsw-* zodat het de site-CSS niet raakt.
   Merk-gradient uit het logo: sky #0ca8fc -> royal #243c90. */
.ads-wizard{
  --adsw-navy:#1a2a50;
  --adsw-brand1:#0ca8fc;
  --adsw-brand2:#243c90;
  --adsw-grad:linear-gradient(135deg,#0ca8fc 0%,#243c90 100%);
  --adsw-card-bg:#eef4fc;
  --adsw-muted:#5b6b85;
  --adsw-border:#d7deeb;
  --adsw-radius:14px;
  box-sizing:border-box;max-width:560px;margin:0 auto;width:100%;
  font-family:inherit;color:var(--adsw-navy);text-align:left;
  container-type:inline-size;
}
.ads-wizard *,.ads-wizard *::before,.ads-wizard *::after{box-sizing:border-box}
.adsw-card{background:var(--adsw-card-bg);border-radius:var(--adsw-radius);padding:24px 26px;box-shadow:0 14px 36px rgba(36,60,144,.20)}

.adsw-progress{height:6px;background:var(--adsw-border);border-radius:99px;overflow:hidden}
.adsw-progress-bar{height:100%;background:var(--adsw-grad);transition:width .25s ease}
.adsw-step-count{margin:10px 0 2px;font-size:13px;color:var(--adsw-muted)}
.adsw-heading{margin:2px 0 14px;font-size:22px;line-height:1.25;font-weight:700;color:var(--adsw-navy)}

.adsw-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.adsw-tile{position:relative;display:flex;align-items:center;gap:10px;padding:14px;background:#fff;border:1.5px solid var(--adsw-border);border-radius:10px;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.adsw-tile:hover{border-color:var(--adsw-brand1)}
.adsw-tile.is-selected{border-color:var(--adsw-brand2);background:rgba(12,168,252,.08);box-shadow:0 0 0 1px var(--adsw-brand2)}
.adsw-tile input{position:absolute;opacity:0;width:0;height:0}
.adsw-tile-dot{flex:0 0 18px;width:18px;height:18px;border:2px solid var(--adsw-border);border-radius:50%;position:relative}
.adsw-tile.is-selected .adsw-tile-dot{border-color:var(--adsw-brand2)}
.adsw-tile.is-selected .adsw-tile-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--adsw-grad)}
.adsw-tile-label{font-size:15px;line-height:1.3}
.adsw-more{display:block;margin:14px auto 0;background:none;border:none;color:var(--adsw-brand2);font-weight:600;cursor:pointer;font-size:15px;padding:6px}
.adsw-more:hover{color:var(--adsw-brand1)}

/* "Wanneer"-stap: opties gestapeld op volle breedte + uitklapbare datum/periode-velden */
.adsw-grid-when{grid-template-columns:1fr}
.adsw-dates{margin-top:14px}
.adsw-date-label{display:block;margin:0 0 6px;font-size:13px;font-weight:600;color:var(--adsw-muted)}
.adsw-dates .adsw-input{min-height:48px;width:100%}

.adsw-field .adsw-input,.adsw-textarea{display:block;width:100%;padding:13px 14px;border:1.5px solid var(--adsw-border);border-radius:10px;font-size:16px;color:var(--adsw-navy);background:#fff;font-family:inherit}
.adsw-input::placeholder,.adsw-textarea::placeholder{color:#9aa6bd}
.adsw-input:focus,.adsw-textarea:focus{outline:none;border-color:var(--adsw-brand1);box-shadow:0 0 0 3px rgba(12,168,252,.20)}
.adsw-input.is-error{border-color:#d83a3a}
.adsw-textarea{resize:vertical;min-height:104px}
.adsw-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.adsw-error{min-height:20px;margin:10px 0 0;color:#d83a3a;font-size:14px}

.adsw-nav{display:flex;gap:12px;margin-top:22px}
.adsw-btn{padding:14px 18px;border-radius:10px;font-size:16px;font-weight:700;cursor:pointer;border:none;font-family:inherit}
.adsw-btn-primary{flex:1;background:var(--adsw-grad);color:#fff;box-shadow:0 6px 16px rgba(36,60,144,.28)}
.adsw-btn-primary:hover{filter:brightness(1.06)}
.adsw-btn-primary:disabled{opacity:.6;cursor:default;filter:none}
.adsw-btn-ghost{background:#fff;border:1.5px solid var(--adsw-border);color:var(--adsw-brand2)}
.adsw-btn-ghost:hover{border-color:var(--adsw-brand2)}

.adsw-thanks{text-align:center;padding:18px 0}
.adsw-check{width:56px;height:56px;border-radius:50%;background:var(--adsw-grad);color:#fff;font-size:30px;line-height:56px;margin:0 auto 14px;text-align:center}
.adsw-thanks p{color:var(--adsw-muted);font-size:16px;margin:0}

/* --- Trust/CTA-strip: Google reviews + reactietijd (onder het formulier) --- */
.adsw-trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--adsw-border)}
.adsw-rev{display:inline-flex;align-items:center;font-size:14px;color:var(--adsw-muted)}
.adsw-g{width:16px;height:16px;margin-right:7px;flex:0 0 auto}
.adsw-stars{color:#fbbc04;letter-spacing:1px;margin-right:7px}
.adsw-rev-text b{color:var(--adsw-navy)}
.adsw-fast{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:#fff;background:var(--adsw-grad);padding:6px 12px;border-radius:99px;white-space:nowrap;box-shadow:0 4px 12px rgba(36,60,144,.25)}

/* Smal? Eén kolom. Container query (op de wizard zelf, niet de viewport) zodat het
   óók collapst als de wizard in een smalle hero-kolom staat op een brede desktop. */
@container (max-width:480px){
  .adsw-grid,.adsw-row{grid-template-columns:1fr}
  .adsw-card{padding:22px 18px}
  .adsw-heading{font-size:20px}
}

/* --- Homepage-hero (alleen #71e7a69 bestaat op de homepage): de hogere wizard mag de
   bovenstaande koppen niet achter de vaste header duwen. Op desktop forceerde de hero
   90vh + justify flex-end, waardoor de content over de bovenkant heen liep (H1 op y=0,
   achter de nav). Laat de hero meegroeien met de content en houd de nav vrij.
   Hogere specificiteit (.elementor-6304) + !important nodig om Elementors var te winnen.
   Alleen desktop; mobiel (min-height:auto) werkte al. --- */
@media (min-width:1025px){
  .elementor-6304 .elementor-element-71e7a69{
    min-height:auto!important;
    justify-content:flex-start!important;
    padding-top:130px!important;
    padding-bottom:60px!important;
  }
}

/* --- Ruimte reserveren voor de wizard (CLS-fix, 28-07-2026) ---
   De wizard wordt client-side gerenderd; zonder reserve klapt de hero-content
   bij het invullen van de eerste stap ~430px omhoog (mobiel) of duwt hij de
   pagina omlaag (desktop). Hoogtes zijn gemeten per container-breedte. --- */
.ads-wizard{min-height:618px}
@media (min-width:600px) and (max-width:767px){.ads-wizard{min-height:448px}}
@media (min-width:768px) and (max-width:1023px){.ads-wizard{min-height:682px}}
@media (min-width:1200px) and (max-width:1439px){.ads-wizard{min-height:587px}}
@media (min-width:1440px){.ads-wizard{min-height:448px}}