/* =========================================================
   ECARS v2 OVERRIDES (plak onderaan je bestaande CSS)
   Doel: betere panels + responsive (pc/tablet/mobiel)
   ========================================================= */

:root{
  --ecars-accent: #4338CA;   /* jouw kleur */
  --ecars-accent2:#6366F1;
  --ecars-border: rgba(15,23,42,.14);
  --ecars-muted: rgba(15,23,42,.65);
  --ecars-shadow: 0 14px 32px rgba(2,6,23,.10);
  --ecars-radius: 16px;
}

/* Wrapper: niet meer "gecentreerde kolom", maar echte layout */
.dropdown-wrapper{
  width: 100%;
  max-width: 1100px;
  margin: 10px auto 0;
  padding: 16px 12px;
  display: grid;                 /* override jouw flex */
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

/* Elk panel = card */
.dropdown-wrapper .dropdown{
  width: 100%;
  max-width: none;               /* override 1000px */
  border-radius: var(--ecars-radius);
  border: 1px solid var(--ecars-border);
  background: #fff;
  box-shadow: var(--ecars-shadow);
  overflow: hidden;
}

/* Header mooier + minder “hard” */
.dropdown-wrapper .dropdown-header{
  background: linear-gradient(135deg, var(--ecars-accent2), var(--ecars-accent));
  padding: 14px 16px;
  letter-spacing: .3px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* Content: weg met dikke border-in-border look */
.dropdown-wrapper .dropdown-content{
  border: 0;                     /* override jouw border: 1px solid #374151 */
  background: #fff;
  font-size: 14px;               /* netter dan 18px */
  line-height: 1.35;
}

/* Spec rows: strakker en beter leesbaar */
.spec-row{
  gap: 10px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(15,23,42,.12);
}

.spec-row:last-child{ border-bottom: 0; }

.spec-row span:first-child{
  min-width: 0;                  /* laat het flexen */
  color: var(--ecars-muted);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .2px;
  text-transform: uppercase;
}

.spec-row strong{
  font-weight: 800;
  color: #0f172a;
  word-break: break-word;
}

/* Engine specs layout: op tablet/desktop 2 kolommen */
#engineSpecsDropdown .dropdown-content{
  display: grid;                 /* override jouw flex-wrap */
  grid-template-columns: 1fr;
  gap: 12px 22px;
}

#engineSpecsDropdown .dropdown-content > div{
  min-width: 0;
  flex: unset;
}

/* Read methods / options als moderne chips */
.method-grid{
  display: grid;                 /* override jouw flex-wrap */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  justify-content: stretch;
}

.method-text,
.option-card{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
}

/* Minder “blok”, meer premium */
.method-text{
  padding: 12px 12px;
  font-size: 13px;
}

.option-card{
  padding: 14px 12px;
  flex: unset;                   /* override 150px fixed */
}

/* Hover: subtieler */
.method-text:hover,
.option-card:hover{
  box-shadow: 0 14px 26px rgba(67,56,202,.18);
}

/* -----------------------------
   TABLET: 2 kolommen specs
   ----------------------------- */
@media (min-width: 700px){
  #engineSpecsDropdown .dropdown-content{
    grid-template-columns: 1fr 1fr;
  }
}

/* -----------------------------
   DESKTOP: 3 vaste vensters naast elkaar (altijd open)
   ----------------------------- */
@media (min-width: 980px){

  .dropdown-wrapper{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: 1200px;
  }

  /* Altijd open: jouw max-height animatie overrulen */
  .dropdown-wrapper .dropdown-content{
    max-height: none !important;
    overflow: visible !important;
    padding: 16px 16px 18px !important;
    display: block !important;
  }

  /* Als JS een panel niet 'open' zet: alsnog zichtbaar */
  .dropdown-wrapper .dropdown:not(.open) .dropdown-content{
    max-height: none !important;
    padding: 16px 16px 18px !important;
  }

  /* Op desktop niet klikken: voelt als vaste vensters */
  .dropdown-wrapper .dropdown-header{
    cursor: default;
    pointer-events: none;
  }

  /* Chevron weg op desktop */
  .dropdown-wrapper .dropdown-icon{
    display: none;
  }
}

/* -----------------------------
   MOBIEL: behoud accordion, maar betere spacing
   ----------------------------- */
@media (max-width: 600px){
  .dropdown-wrapper{
    padding: 12px 8px;
    gap: 12px;
  }

  /* jouw bestaande “spec-row column” blijft oké, maar net iets strakker */
  .spec-row:not(:first-of-type){
    margin-top: 12px;
  }

  .dropdown-wrapper .dropdown.open .dropdown-content{
    padding: 14px 16px !important;
  }
}