/* =========================================================
   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;
  }
}
/* =========================================================
   ECARS FIX v3 (plak helemaal onderaan)
   - Panels altijd onder elkaar (pc/tablet/mobiel)
   - Read Methods & Additional Options: gelijke knoppen (zelfde grootte)
   ========================================================= */

/* 1) Panels NOOIT naast elkaar */
.ecars-tuning-details .dropdown-wrapper{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100%;
  max-width: 950px;         /* pas aan als je breder wil */
  margin: 18px auto 0;
  gap: 16px;
  padding: 16px 12px;
}

.ecars-tuning-details .dropdown-wrapper .dropdown{
  width: 100% !important;
  max-width: none !important;
}

/* 2) Read Methods & Additional Options: maak er 1 uniforme “button grid” van */
.ecars-tuning-details #readMethodsDropdown .method-grid,
.ecars-tuning-details #additionalOptionsDropdown .method-grid{
  display: grid !important;
  grid-template-columns: 1fr;     /* mobiel: 1 kolom */
  gap: 12px !important;
  align-items: stretch;
}

/* tablet/pc: 2 kolommen (optioneel maar ziet er meestal beter uit) */
@media (min-width: 640px){
  .ecars-tuning-details #readMethodsDropdown .method-grid,
  .ecars-tuning-details #additionalOptionsDropdown .method-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 3) De “knoppen” zelf: exact dezelfde sizing/look */
.ecars-tuning-details #readMethodsDropdown .method-text,
.ecars-tuning-details #additionalOptionsDropdown .option-card{
  width: 100% !important;
  flex: unset !important;

  min-height: 56px;              /* <<< gelijk formaat */
  padding: 12px 14px !important;

  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.14) !important;
  background: #fff !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
  box-sizing: border-box;

  box-shadow: 0 10px 22px rgba(2,6,23,.06) !important;
  transition: transform .08s ease, box-shadow .15s ease;
}

/* Tekst consistent */
.ecars-tuning-details #readMethodsDropdown .method-text span,
.ecars-tuning-details #additionalOptionsDropdown .option-card strong{
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.2;
}

/* Haal extra “rare” styling weg die verschillen veroorzaakt */
.ecars-tuning-details #readMethodsDropdown .method-text strong{ display:none !important; }
.ecars-tuning-details #additionalOptionsDropdown .option-card span{ display:none !important; }

/* Hover subtiel */
.ecars-tuning-details #readMethodsDropdown .method-text:hover,
.ecars-tuning-details #additionalOptionsDropdown .option-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(67,56,202,.18) !important;
}

/* 4) Optioneel: als je die info-icon/afbeelding nergens gebruikt, verberg ze zodat alles “even groot” oogt */
.ecars-tuning-details #additionalOptionsDropdown .option-card img,
.ecars-tuning-details #additionalOptionsDropdown .info-icon{
  display: none !important;
}