/* ============================================================
   car-detail.css — premium redesign van de car-detail pagina
   (DESIGN-ONLY). Bestaande merkkleuren: navy #12396b + oranje
   #F76B1C. Witte kaarten, ruime witruimte, zachte schaduw,
   afgeronde hoeken. Raakt GEEN logica, form-velden of JS-hooks:
   alle styling is geschaald onder .cd-detail (en .cd-cookie voor
   de cookie-balk). Clones erven dit via de master.
   ============================================================ */

:root {
  --cd-navy:       #12396b;
  --cd-navy-deep:  #0F172A;
  --cd-orange:     #F76B1C;
  --cd-orange-dk:  #db5d12;
  --cd-ink:        #1B2230;
  --cd-mute:       #6B7280;
  --cd-line:       #E8ECF2;
  --cd-bg:         #FFFFFF;
  --cd-soft:       #F6F8FB;
  --cd-green:      #1F9D55;
  --cd-radius:     18px;
  --cd-radius-sm:  12px;
  --cd-shadow:     0 10px 30px -12px rgba(18,57,107,0.18), 0 2px 6px rgba(18,57,107,0.05);
  --cd-shadow-sm:  0 4px 14px -6px rgba(18,57,107,0.16);
  --cd-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.cd-detail {
  font-family: var(--cd-font);
  color: var(--cd-ink);
  background: var(--cd-bg);
  padding: 8px 0 40px;
}
.cd-detail *, .cd-detail *::before, .cd-detail *::after { box-sizing: border-box; }

/* Breadcrumb */
.cd-crumb { font-size: 13px; color: var(--cd-mute); margin: 6px 0 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cd-crumb a { color: var(--cd-mute); text-decoration: none; }
.cd-crumb a:hover { color: var(--cd-orange); }
.cd-crumb span { color: #C2C9D6; }
.cd-crumb .cd-crumb__current { color: var(--cd-navy); font-weight: 600; }

/* Layout: content + sticky booking column */
.cd-grid { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.cd-main { flex: 1 1 560px; min-width: 0; }
.cd-booking { flex: 0 0 380px; max-width: 380px; width: 100%; }

.cd-title { font-size: 30px; line-height: 1.15; font-weight: 700; color: var(--cd-navy-deep); margin: 0 0 18px; letter-spacing: -0.01em; }

/* Hero photo card */
.cd-hero { background: var(--cd-bg); border-radius: var(--cd-radius); box-shadow: var(--cd-shadow); overflow: hidden; margin-bottom: 22px; border: 1px solid var(--cd-line); }
.cd-hero .fotorama { width: 100% !important; }
.cd-hero img.responsive { width: 100%; height: auto; display: block; }

/* Spec chips — pillen met icoon en tekst.
   29-08-2026: hier stond een raster van vier gelijke kolommen. Chips hebben
   geen gelijke lengte: "Airbag" is kort, "Caution 50000 Dhs" is lang. Die
   langste past niet in zijn 1fr, en met white-space: nowrap kan hij niet
   afbreken, dus liep hij over zijn cel en over zijn eigen rand heen. Meer
   binnenruimte maakt dat alleen erger.
   Nu een flexrij die afbreekt: elke chip wordt zo breed als zijn eigen
   inhoud en de rij loopt door op de volgende regel. Werkt bij vier chips en
   bij twaalf, en in het Duits net zo goed als in het Frans. nowrap blijft
   staan; die is nu wel op zijn plaats, want de chip krijgt de breedte die
   hij nodig heeft. */
.cd-specs { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 26px; padding: 0; }
/* 8px in plaats van 4: bij border-radius 999px zag de pil er samengeknepen
   uit. 16px in plaats van 20 horizontaal: die ruimte was er om overloop te
   voorkomen en is met flex niet meer nodig; 16 bij 8 staat in verhouding. */
.cd-specs span { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--cd-soft); border: 1px solid var(--cd-line); border-radius: 999px; padding: 8px 16px; font-size: 13.5px; line-height: 1.3; color: var(--cd-ink); font-weight: 500; white-space: nowrap; float: none !important; width: auto !important; margin: 0 !important; text-align: center; }
/* Het icoon is 15px in een regel van 17,5px. align-items: center legt de
   dozen op elkaar, maar een pictogram heeft geen onderlengte, dus optisch
   zakt het net iets te laag. 1px omhoog zet het op de x-hoogte van de tekst. */
.cd-specs span i { color: var(--cd-orange); font-size: 15px; line-height: 1; flex: 0 0 auto; position: relative; top: -1px; }
@media (max-width: 768px) { .cd-specs { gap: 8px; } .cd-specs span { padding: 7px 14px; font-size: 13px; } }

/* Wishlist / share row */
.cd-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 26px; }
.cd-actions .addthis_inline_share_toolbox { margin: 0; }
.cd-actions .wish { border-radius: 999px !important; padding: 8px 18px !important; }

/* Sections (description, why) */
.cd-section { background: var(--cd-bg); border: 1px solid var(--cd-line); border-radius: var(--cd-radius); box-shadow: var(--cd-shadow-sm); padding: 26px 26px; margin-bottom: 22px; }
.cd-section__title { font-size: 20px; font-weight: 700; color: var(--cd-navy-deep); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--cd-line); }
.cd-desc { color: #41506A; font-size: 15px; line-height: 1.75; }
.cd-desc p { margin: 0 0 12px; }

/* Caractéristiques principales checklist (from existing spec vars) */
.cd-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; }
.cd-checklist li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--cd-ink); }
.cd-checklist li::before { content: ""; flex: 0 0 20px; height: 20px; border-radius: 50%; background: rgba(31,157,85,0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231F9D55' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; }

/* Why choose: 3 benefit cards */
.cd-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cd-why__card { background: var(--cd-soft); border: 1px solid var(--cd-line); border-radius: var(--cd-radius-sm); padding: 20px 18px; text-align: center; }
.cd-why__ic { width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(247,107,28,0.12); color: var(--cd-orange); font-size: 20px; }
.cd-why__t { font-weight: 600; color: var(--cd-navy-deep); margin: 0 0 6px; font-size: 15px; }
.cd-why__d { color: var(--cd-mute); font-size: 13px; line-height: 1.55; margin: 0; }

/* ---------- Premium booking card ---------- */
.cd-booking .cd-bk-card { position: sticky; top: 90px; background: var(--cd-bg); border: 1px solid var(--cd-line); border-radius: var(--cd-radius); box-shadow: var(--cd-shadow); padding: 22px 22px 24px; }
.cd-bk-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--cd-line); }
.cd-bk-price__label { width: 100%; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cd-mute); font-weight: 600; }
.cd-bk-price__amount { font-size: 34px; font-weight: 800; color: var(--cd-orange); line-height: 1; letter-spacing: -0.01em; }
.cd-bk-price__unit { font-size: 14px; color: var(--cd-mute); font-weight: 500; }

.cd-booking .alert-success { border-radius: var(--cd-radius-sm); font-size: 13px; }

/* Form fields with icons */
.cd-booking .row { margin-left: -8px; margin-right: -8px; }
.cd-field { padding: 0 8px; margin-bottom: 14px; }
.cd-field label.control-label, .cd-field > label:first-child { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--cd-navy); margin: 0 0 6px; text-transform: none; }
.cd-field label i { color: var(--cd-orange); }
.cd-booking select.form-control, .cd-booking input.form-control, .cd-booking .selectLoc, .cd-booking .chosen-single {
  border-radius: 10px !important; border: 1px solid var(--cd-line) !important; height: auto; min-height: 44px; padding: 10px 12px; font-size: 14px; background: #fff; box-shadow: none; color: var(--cd-ink);
}
.cd-booking .form-control:focus { border-color: var(--cd-orange) !important; box-shadow: 0 0 0 3px rgba(247,107,28,0.12) !important; }
.cd-booking .chosen-container { width: 100% !important; }
.cd-booking .chosen-container-single .chosen-single { border-radius: 10px !important; border: 1px solid var(--cd-line) !important; height: 44px; line-height: 26px; padding: 9px 12px; background: #fff; box-shadow: none; }
.cd-booking label[style] + input { background: #fff !important; }

/* Total estimé block */
.cd-booking .showTotal { margin: 4px 0 6px; }
.cd-booking .showTotal .well { background: var(--cd-soft) !important; border: 1px solid var(--cd-line) !important; border-radius: var(--cd-radius-sm) !important; box-shadow: none !important; padding: 16px !important; margin: 0; }
.cd-booking .showTotal .totalwithdiscount { color: var(--cd-navy-deep); font-size: 22px !important; font-weight: 800; }

/* Availability badge */
.cd-booking .availability-status { border-radius: 10px; font-size: 13px; font-weight: 600; padding: 0; margin: 6px 0 0; text-align: center; }
.cd-booking .availability-status.status-ok { background: rgba(31,157,85,0.12); color: var(--cd-green); padding: 10px 12px; }
.cd-booking .availability-status.status-no { background: rgba(220,38,38,0.10); color: #DC2626; padding: 10px 12px; }
.cd-booking .availability-status.status-err { background: rgba(217,119,6,0.12); color: #B45309; padding: 10px 12px; }

/* Orange CTA */
.cd-booking .book_current_car {
  background: var(--cd-orange) !important; border: none !important; color: #fff !important; border-radius: 12px !important;
  font-size: 16px !important; font-weight: 700 !important; padding: 14px 18px !important; margin-top: 14px; width: 100%;
  box-shadow: 0 8px 20px -8px rgba(247,107,28,0.6); transition: background .15s ease, transform .15s ease;
}
.cd-booking .book_current_car:hover { background: var(--cd-orange-dk) !important; }
.cd-booking .book_current_car.is-disabled, .cd-booking .book_current_car[disabled] { opacity: .6; cursor: not-allowed; }

/* Trust row */
.cd-trust { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--cd-line); display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.cd-trust li { display: flex; align-items: center; gap: 9px; font-size: 12.8px; color: var(--cd-ink); font-weight: 500; }
.cd-trust li i { color: var(--cd-green); font-size: 15px; }

/* ---------- Voitures similaires grid ---------- */
.cd-similar { background: var(--cd-soft); padding: 40px 0; margin-top: 10px; }
.cd-similar__head { text-align: center; margin-bottom: 26px; }
.cd-similar__head h2 { font-size: 24px; font-weight: 700; color: var(--cd-navy-deep); margin: 0; float: none; }
.cd-similar__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cd-scard { background: #fff; border: 1px solid var(--cd-line); border-radius: var(--cd-radius); box-shadow: var(--cd-shadow-sm); overflow: hidden; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; }
.cd-scard:hover { transform: translateY(-4px); box-shadow: var(--cd-shadow); }
.cd-scard__img { aspect-ratio: 16/10; background: var(--cd-soft); overflow: hidden; }
.cd-scard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-scard__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.cd-scard__name { font-weight: 600; color: var(--cd-navy-deep); font-size: 16px; margin: 0; }
.cd-scard__cta { margin-top: auto; display: inline-block; text-align: center; background: var(--cd-navy); color: #fff !important; border-radius: 10px; padding: 10px 14px; font-weight: 600; font-size: 14px; text-decoration: none; transition: background .15s ease; }
.cd-scard__cta:hover { background: var(--cd-navy-deep); }

/* ---------- Mobile sticky bottom bar ---------- */
.cd-mobilebar { display: none; }

@media (max-width: 991px) {
  .cd-grid { flex-direction: column; }
  .cd-main, .cd-booking { flex: 1 1 100%; max-width: 100%; }
  .cd-booking .cd-bk-card { position: static; }
  .cd-why { grid-template-columns: 1fr; }
  .cd-similar__grid { grid-template-columns: repeat(2, 1fr); }
  /* mobile order: photo, specs, booking (booking already after specs in DOM) */
  .cd-mobilebar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    background: #fff; border-top: 1px solid var(--cd-line); padding: 10px 16px;
    box-shadow: 0 -6px 20px -10px rgba(18,57,107,0.25);
  }
  .cd-mobilebar__price b { color: var(--cd-orange); font-size: 20px; font-weight: 800; }
  .cd-mobilebar__price small { display: block; color: var(--cd-mute); font-size: 11px; }
  .cd-mobilebar__cta { background: var(--cd-orange); color: #fff !important; border-radius: 12px; padding: 12px 22px; font-weight: 700; text-decoration: none; font-size: 15px; }
  .cd-detail { padding-bottom: 84px; }
}
@media (max-width: 575px) {
  .cd-title { font-size: 24px; }
  .cd-checklist { grid-template-columns: 1fr; }
  .cd-similar__grid { grid-template-columns: 1fr; }
  .cd-bk-price__amount { font-size: 30px; }
}

/* Cookie-balk styling staat inline in themes/default/header.php (site-breed,
   want car-detail.css laadt alleen op de detail-pagina). Zie .cookies_alert.cd-cookie daar. */

/* ---------------------------------------------------------------------------
 * Layout-audit 2026-08-19: .cd-booking .row draagt een negatieve marge van
 * -8 px links en rechts (regel hierboven), die hoort te worden opgevangen door
 * de 8 px padding van .cd-field. Het <form> eromheen heeft die padding niet,
 * dus stak de rij in ELKE taal 8 px buiten de kaart.
 * Opgelost door het formulier de compenserende padding te geven, niet door de
 * marge weg te halen: de velden houden zo hun onderlinge tussenruimte.
 * ------------------------------------------------------------------------ */
.cd-booking form { padding-left: 8px; padding-right: 8px; }