.elementor-72 .elementor-element.elementor-element-19c238c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-72 .elementor-element.elementor-element-a8b624d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-72 .elementor-element.elementor-element-a8b624d:not(.elementor-motion-effects-element-type-background), .elementor-72 .elementor-element.elementor-element-a8b624d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0E111B;}.elementor-72 .elementor-element.elementor-element-1042a70{padding:40px 0px 0px 0px;}.elementor-72 .elementor-element.elementor-element-bac4bd4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-72 .elementor-element.elementor-element-748d754{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-72 .elementor-element.elementor-element-ff3d4e9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-72 .elementor-element.elementor-element-980cefc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(max-width:767px){.elementor-72 .elementor-element.elementor-element-1042a70{padding:0px 0px 0px 0px;}}/* Start custom CSS for shortcode, class: .elementor-element-1042a70 *//* =========================================================
   CBS Modern 2026 – Tinted canvas + white item cards + compact mobile grids
   ========================================================= */

:root{
  /* Canvas (tussenruimtes) */
  --canvas: #f3f6fb;
  --canvas-2: #eef3fb;

  /* Item cards */
  --card: #ffffff;
  --border: rgba(15, 23, 42, .12);

  /* Text */
  --text: #0f172a;
  --muted: rgba(15, 23, 42, .62);

  /* Brand */
  --accent: #0ea5e9;
  --accent-soft: rgba(14,165,233,.12);
  --success-soft: rgba(34,197,94,.12);

  /* Radius & shadow */
  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 12px;

  --shadow-card: 0 14px 40px rgba(15,23,42,.10);
  --shadow-item: 0 10px 26px rgba(15,23,42,.08);

  --focus: 0 0 0 4px rgba(14,165,233,.18);
}


/* 2) Stappen container: niet volledig wit, maar licht tinted en strak */
.cbs-main-list{
  list-style: none !important;
  margin: 1px !important;
  padding: 1px !important;  gap: 11px;
}

.cbs-main-list-item{
  background: var(--canvas-2) !important; /* geen grote witte plaat */
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: var(--r-lg) !important;
  padding: 1px !important;
  overflow: visible !important;
}

/* Header compact, modern */
.cbs-main-list-item-section-header{
  background: transparent !important;
  border: 0 !important;
  padding: 4px 4px 10px !important;
}

/* Content: geen witte blok, maar transparant zodat items los “kaarten” zijn */
.cbs-main-list-item-section-content{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Typo */
.cbs-form h1, .cbs-form h2, .cbs-form h3, .cbs-form h4, .cbs-form h5{
  color: var(--text) !important;
  letter-spacing: .2px;
}
.cbs-form p, .cbs-form small{
  color: var(--muted) !important;
}

/* 3) VEHICLES: echte cards per item, grid op desktop en compacter op mobiel */
ul.cbs-vehicle-list{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;

  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px !important;
}

/* Desktop breakpoints */
@media (max-width: 1100px){
  ul.cbs-vehicle-list{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  ul.cbs-vehicle-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobiel: compact 2 kolommen, minder padding, minder hoogte */
@media (max-width: 640px){
  .cbs-form{ padding: 12px !important; }
  .cbs-main-list-item{ padding: 10px !important; }
  ul.cbs-vehicle-list{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* Vehicle item card */
ul.cbs-vehicle-list > li{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-item) !important;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  overflow: hidden;
}





/* Hover */
ul.cbs-vehicle-list > li:hover{
  transform: translateY(-1px);
  background: #f8fafc !important;
  border-color: rgba(14,165,233,.30) !important;
}

/* Selected (CBS gebruikt cbs-state-selected op LI volgens je screenshot) */
ul.cbs-vehicle-list > li.cbs-state-selected,
ul.cbs-vehicle-list > li.cbs-state-selected:hover{
  background: var(--accent-soft) !important;
  border-color: rgba(14,165,233,.65) !important;
  box-shadow: 0 0 0 2px rgba(14,165,233,.16) inset, var(--shadow-item) !important;
}

/* Zorg dat tekst altijd donker blijft */
ul.cbs-vehicle-list > li *{
  color: var(--text) !important;
}

/* 4) PACKAGES: ook als losse witte cards, grid en compact */
.cbs-form .cbs-service-list,
.cbs-form .cbs-services-list,
.cbs-form .cbs-wash-packages{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;

  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px !important;
}

@media (max-width: 1100px){
  .cbs-form .cbs-service-list,
  .cbs-form .cbs-services-list,
  .cbs-form .cbs-wash-packages{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px){
  .cbs-form .cbs-service-list,
  .cbs-form .cbs-services-list,
  .cbs-form .cbs-wash-packages{
    grid-template-columns: 1fr !important; /* 1 kolom leest beter voor veel tekst */
    gap: 10px !important;
  }
}

/* Package item card */
.cbs-form .cbs-service-list > li,
.cbs-form .cbs-services-list > li,
.cbs-form .cbs-wash-packages > li{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-card) !important;
  padding: 16px !important;
}

@media (max-width: 640px){
  .cbs-form .cbs-service-list > li,
  .cbs-form .cbs-services-list > li,
  .cbs-form .cbs-wash-packages > li{
    padding: 14px !important;
  }
}

/* Hover + selected */
.cbs-form .cbs-service-list > li:hover,
.cbs-form .cbs-services-list > li:hover,
.cbs-form .cbs-wash-packages > li:hover{
  border-color: rgba(14,165,233,.30) !important;
  background: #f8fafc !important;
}

.cbs-form .cbs-service-list > li.cbs-state-selected,
.cbs-form .cbs-services-list > li.cbs-state-selected,
.cbs-form .cbs-wash-packages > li.cbs-state-selected{
  background: var(--success-soft) !important;
  border-color: rgba(34,197,94,.55) !important;
  box-shadow: 0 0 0 2px rgba(34,197,94,.14) inset, var(--shadow-card) !important;
}

/* Prijs en titels: modern, compact */
.cbs-form .cbs-price,
.cbs-form .cbs-total,
.cbs-form .cbs-summary-price{
  color: var(--text) !important;
  font-weight: 900 !important;
}
.cbs-form .cbs-price small{
  color: var(--muted) !important;
}

/* 5) Date/Time: minder “bubbles”, meer chips (compact) */
.cbs-form a[class*="time"],
.cbs-form button[class*="time"],
.cbs-form a[class*="slot"],
.cbs-form button[class*="slot"],
.cbs-form [role="button"][class*="time"],
.cbs-form [role="button"][class*="slot"]{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  background: var(--card) !important;
  color: var(--text) !important;
  font-weight: 850 !important;
  text-decoration: none !important;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.cbs-form a[class*="time"]:hover,
.cbs-form button[class*="time"]:hover,
.cbs-form a[class*="slot"]:hover,
.cbs-form button[class*="slot"]:hover{
  background: #f8fafc !important;
  border-color: rgba(14,165,233,.30) !important;
  transform: translateY(-1px);
}

.cbs-form [aria-selected="true"],
.cbs-form [aria-pressed="true"],
.cbs-form .selected a,
.cbs-form .active a{
  background: var(--accent) !important;
  border-color: rgba(14,165,233,.75) !important;
  color: #fff !important;
}

/* 6) Inputs: modern, clean */
.cbs-form label{
  display: block !important;
  margin: 0 0 6px 0 !important;
  color: var(--text) !important;
  font-weight: 700 !important;
}

.cbs-form input[type="text"],
.cbs-form input[type="email"],
.cbs-form input[type="tel"],
.cbs-form input[type="number"],
.cbs-form textarea,
.cbs-form select{
  width: 100% !important;
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid rgba(15,23,42,.16) !important;
  border-radius: var(--r-sm) !important;
  padding: 12px 12px !important;
  transition: border-color .12s ease, box-shadow .12s ease;
}

.cbs-form input:focus,
.cbs-form textarea:focus,
.cbs-form select:focus{
  outline: none !important;
  border-color: rgba(14,165,233,.70) !important;
  box-shadow: var(--focus) !important;
}

/* 7) Buttons: primary CTA consistent */
.cbs-form input[type="submit"],
.cbs-form button[type="submit"],
.cbs-form .cbs-btn,
.cbs-form .button{
  border-radius: 999px !important;
  border: 1px solid rgba(14,165,233,.55) !important;
  background: linear-gradient(180deg, #18b6ff, var(--accent)) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  padding: 12px 16px !important;
  box-shadow: 0 14px 30px rgba(14,165,233,.18) !important;
}

.cbs-form input[type="submit"]:hover,
.cbs-form button[type="submit"]:hover,
.cbs-form .cbs-btn:hover,
.cbs-form .button:hover{
  transform: translateY(-1px);
}

/* 8) Veiligheid: geen dark-on-dark ergens */
.cbs-form, .cbs-form *{
  color: var(--text);
}
.cbs-form small, .cbs-form p{
  color: var(--muted) !important;
}/* End custom CSS */