/* ECU Vehicle Filter — Single Card + Full Dyno (2025-08-12)  */
/* ========================================================== */
/* Theme-safe, modern minimal, defensive against overrides    */

:root{
  --ecu-page:#f7f9fb;
  --ecu-surface:#fff;
  --ecu-text:#0f172a;
  --ecu-muted:#667085;
  --ecu-border:#e6eaf0;
  --ecu-primary:#2563eb;
  --ecu-primary-600:#1d4ed8;
  --ecu-radius:16px;
  --ecu-gap:8px;
  --ecu-shadow-sm:0 1px 6px rgba(16,24,40,.06);
  --ecu-shadow:0 12px 28px rgba(16,24,40,.10);
}

body{ background:var(--ecu-page); }

/* Make sure our components use border-box and a sane font */
.ecu-filter, .ecu-grid, .ecu-card, .ecu-modal__dialog{
  box-sizing:border-box;
  /*font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Thai", Inter, sans-serif;**//
}
.ecu-filter *{ box-sizing:inherit; }

/* =========================
   Filter form (top area)
   ========================= */
.ecu-filter{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--ecu-gap);
  align-items:end;
  margin:0 auto 8px;
  max-width:1240px;
  padding:0 8px;
}
.ecu-row{ grid-column:span 3; display:flex; flex-direction:column; gap:6px; }
.ecu-row.ecu-actions{ grid-column:span 12; display:flex; gap:12px; align-items:center; justify-content:center; }

@media (max-width:1024px){ .ecu-row{ grid-column:span 6; } }
@media (max-width:640px){  .ecu-row{ grid-column:span 12; } .ecu-row.ecu-actions{ justify-content:stretch; } }

.ecu-filter label{ color:var(--ecu-muted); font-size:16px; }
.ecu-filter select,
.ecu-filter input[type="text"],
.ecu-filter input[type="email"],
.ecu-filter input[type="number"]{
  height:44px; border:1px solid var(--ecu-border); border-radius:12px;
  background:#fff; color:var(--ecu-text); padding:0 12px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.ecu-filter input[type="range"]{ width:100%; accent-color:var(--ecu-primary); }
.ecu-filter select:focus,.ecu-filter input:focus{
  border-color:var(--ecu-primary); box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
.ecu-help{ color:var(--ecu-muted); font-size:16px; }

/* Buttons */
.ecu-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:10px 16px; gap:8px;
  border-radius:12px; border:1px solid var(--ecu-border);
  background:#fff; color:var(--ecu-text); font-weight:600; cursor:pointer;
  transition:transform .12s ease, box-shadow .15s, background .15s, border-color .15s;
}
.ecu-btn:hover{ transform:translateY(-1px); box-shadow:var(--ecu-shadow-sm); }
.ecu-btn:active{ transform:translateY(0); }
.ecu-btn--primary{ background:var(--ecu-primary); border-color:var(--ecu-primary); color:#fff; }
.ecu-btn--primary:hover{ background:var(--ecu-primary-600); border-color:var(--ecu-primary-600); }
.ecu-btn[disabled],[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; box-shadow:none !important; }

/* Loading state on buttons */
.is-loading{ position:relative; pointer-events:none; }
.is-loading::after{
  content:''; width:16px; height:16px; margin-left:8px; border-radius:50%;
  border:2px solid rgba(0,0,0,.18); border-top-color:rgba(0,0,0,.55);
  animation:ecu-spin .8s linear infinite;
}
@keyframes ecu-spin{ to{ transform:rotate(360deg); } }

/* =========================================
   Results container (single card expected)
   ========================================= */
#ecu-filter-results{
  max-width:1240px;
  margin:0 auto;
  padding:0 8px 8px;
}

/* We still keep .ecu-grid but make it 1 column */
.ecu-grid{ display:block; }

/* =========================
   Card layout (with chart)
   ========================= */
.ecu-card{
  background:var(--ecu-surface);
  border:1px solid var(--ecu-border);
  border-radius:var(--ecu-radius);
  box-shadow:var(--ecu-shadow-sm);
  padding:12px;
  transition:box-shadow .18s, transform .18s;
}
.ecu-card:hover{ box-shadow:var(--ecu-shadow); transform:translateY(-2px); }

/* Desktop two-column grid: media (fixed) + main/graph (fluid) */
.ecu-card.ecu-card--withchart{
  display:grid;
  grid-template-columns: 400px 1fr;
  grid-template-areas:
    "media main"
    "media chart";
  column-gap:12px;
  row-gap:14px;
  align-items:start;
}

/* Stack on small screens */
@media (max-width:1024px){
  .ecu-card.ecu-card--withchart{
    grid-template-columns:1fr;
    grid-template-areas:
      "media"
      "main"
      "chart";
    gap:14px;
  }
}

/* Map areas */
.ecu-card--withchart .ecu-media{ grid-area:media; }
.ecu-card--withchart .ecu-main{  grid-area:main;  min-width:0; }
.ecu-card--withchart .ecu-aside--fullchart{ grid-area:chart; min-width:0; margin-top:4px; }

/* = Media (image) ===================================== */
.ecu-media{
  position:relative !important;
  display:block;
  aspect-ratio:16/10;
  background:#f4f6fb;
  border-radius:12px;
  overflow:hidden;
}
.ecu-thumb{ width:100%; height:100%; object-fit:cover; display:block; }
.ecu-ph{ display:flex; align-items:center; justify-content:center; height:100%; color:var(--ecu-muted); }

/* Kill any theme overlays that may inject :before/:after */
.ecu-media::before, .ecu-media::after{ content:none !important; }
.ecu-media, .ecu-media *{
  opacity:1 !important; filter:none !important; mix-blend-mode:normal !important;
}

/* Injector badge – pin hard to the image corner (defensive) */
.ecu-media .ecu-badge,
.ecu-media .ecu-inj-badge,
.ecu-media [data-ecuvf="inj"]{
  position:absolute !important;
  top:8px !important; right:8px !important; left:auto !important; bottom:auto !important;
  transform:none !important; z-index:3 !important;
  background:rgba(239,246,255,.95);
  color:var(--ecu-primary);
  border:1px solid #d6e9ff;
  border-radius:999px;
  padding:6px 10px;
  font-size:16px; font-weight:700;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  pointer-events:none;
}

/* = Main (text) ======================================= */
.ecu-main{ display:flex; flex-direction:column; gap:10px; }
.ecu-title{
  display:inline-block; color:var(--ecu-text);
  font-weight:800; line-height:1.35;
  font-size:clamp(16px,1.35vw,18px);
  text-decoration:none;
}
.ecu-title:hover{ text-decoration:underline; }

.ecu-spec, .ecu-tune{
  display:grid; grid-template-columns:auto 1fr; gap:6px;
  font-size:16px;
}
.ecu-spec__label,.ecu-tune__label{ color:var(--ecu-muted); min-width:120px; }
.ecu-spec__val,.ecu-tune__val{ color:var(--ecu-text); }

.ecu-price{ font-size:18px; font-weight:800; color:var(--ecu-text); }
.ecu-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.ecu-actions .ecu-btn{ flex:1; min-width:140px; }

/* = Full dyno (chart) ================================= */
.ecu-aside--fullchart{ display:block; }

.ecu-dyno-full{
  border:1px solid var(--ecu-border);
  border-radius:12px;
  background:#fff;
  padding:10px 12px;
  box-shadow:0 1px 3px rgba(0,0,0,.03) inset;
}

/* canvas size */
.ecu-dyno__canvas{
  width:100%; 
  height:100%; 
  display:block;
}

/* chart + table wrapper created by JS */
.ecu-dyno__wrap{ display:grid; grid-template-columns: 1fr  gap:14px; align-items:start; }
.ecu-dyno__plot{ 
  min-width:0; 
  height: 380px;            /* desktop default */
  box-sizing: border-box;
}
@media (min-width:1440px){ .ecu-dyno__plot{ height: 420px; } }
@media (max-width:1200px){
  .ecu-dyno__wrap{ grid-template-columns:1fr; }
  .ecu-dyno__plot{ height: 320px; }  /* tablet/mobile */
}
.ecu-dyno__table{ overflow:auto; border-left:1px dashed var(--ecu-border); padding-left:12px; }

@media (max-width:1200px){
  .ecu-dyno__wrap{ grid-template-columns:1fr; }
  .ecu-dyno__table{ border-left:none; padding-left:0; }
}

/* data table */
/* .ecu-dyno-table{
  width:100%; border-collapse:collapse; font-size:16px; color:#111827;
} */
/* .ecu-dyno-table th{
  text-align:left; font-weight:700; color:#111827; padding:6px 8px; border-bottom:1px solid var(--ecu-border);
}
.ecu-dyno-table td{ padding:6px 8px; border-bottom:1px dashed #eef2f6; color:#344054; }
.ecu-dyno-table tr:last-child td{ border-bottom:none; }
*/
/* = Empty / Loading =================================== */
.ecu-empty{
  padding:24px; text-align:center; color:var(--ecu-muted);
  border:1px dashed var(--ecu-border); border-radius:12px; background:#fff;
}
.ecu-empty .ecu-btn{ margin-top:10px; }
.ecu-loading{ padding:24px; text-align:center; color:var(--ecu-muted); }

/* = Modal ============================================= */
.ecu-modal[hidden]{ display:none !important; }
.ecu-modal{
  position:fixed; inset:0; background:rgba(15,23,42,.45);
  display:grid; place-items:center; z-index:999; padding:16px;
}
.ecu-modal__dialog{
  width:100%; max-width:720px; background:#fff;
  border:1px solid var(--ecu-border); border-radius:16px;
  box-shadow:var(--ecu-shadow); padding:18px;
}
.ecu-modal__dialog h3{ margin:0 0 10px; font-size:18px; }
#ecu-req-form{ display:grid; gap:12px; }
.ecu-grid-2{ display:grid; gap:10px; grid-template-columns:1fr 1fr; }
.ecu-grid-2 label{ display:flex; flex-direction:column; gap:6px; font-size:16px; color:var(--ecu-muted); }
#ecu-req-form input,#ecu-req-form textarea{
  border:1px solid var(--ecu-border); border-radius:10px; padding:10px 12px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
#ecu-req-form input:focus,#ecu-req-form textarea:focus{
  border-color:var(--ecu-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.ecu-modal__actions{ display:flex; justify-content:flex-end; gap:10px; }
@media (max-width:640px){
  .ecu-modal__dialog{ padding:14px; border-radius:14px; max-width:96vw; }
  .ecu-grid-2{ grid-template-columns:1fr; }
}

/* ===== Single Download (ECUremap) ===== */

.ecu-single{ padding:8px 0 8px; }
.ecu-single__wrap{ max-width:1160px; margin:0 auto; padding:0 16px; }

/* header card */
.ecu-single__card{
  display:grid; grid-template-columns: 420px 1fr; gap:24px;
  background:#fff; border:1px solid var(--ecu-border); border-radius:16px;
  box-shadow: var(--ecu-shadow-sm); padding:18px; margin-bottom:22px;
}
@media (max-width:980px){
  .ecu-single__card{ grid-template-columns:1fr; }
}
.ecu-single__media{
  position:relative; background:#f3f6fb; border-radius:12px; overflow:hidden;
  aspect-ratio:16/10; display:flex; align-items:center; justify-content:center;
}
.ecu-single__media .ecu-thumb{ width:100%; height:100%; object-fit:cover; display:block; }
.ecu-inj-badge{
  position:absolute; top:10px; right:10px; z-index:2;
  background:rgba(239,246,255,.96); color:var(--ecu-primary);
  border:1px solid #d6e9ff; border-radius:999px; padding:6px 10px; font-weight:700; font-size:16px;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.ecu-title{ margin:0 0 6px; font-size:22px; font-weight:800; color:var(--ecu-text); }

.ecu-single__info{ display:flex; flex-direction:column; gap:12px; }
.ecu-spec{ display:grid; grid-template-columns:auto 1fr; gap:6px 12px; font-size:16px; }
.ecu-spec__label{ color:var(--ecu-muted); min-width:120px; }
.ecu-spec__val{ color:var(--ecu-text); }

.ecu-price{ font-size:20px; font-weight:800; color:var(--ecu-text); }
.ecu-buy__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.ecu-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  padding:10px 16px; border-radius:12px; border:1px solid var(--ecu-border); background:#fff; color:var(--ecu-text);
  font-weight:600; transition:transform .12s, box-shadow .15s, background .15s, color .15s, border-color .15s;
}
.ecu-btn:hover{ transform:translateY(-1px); box-shadow:var(--ecu-shadow-sm); }
.ecu-btn--primary{ background:var(--ecu-primary); border-color:var(--ecu-primary); color:#fff; }
.ecu-btn--primary:hover{ background:var(--ecu-primary-600); border-color:var(--ecu-primary-600); }

/* dyno block from shortcode */
.ecu-dyno{ background:#fff; border:1px solid var(--ecu-border); border-radius:16px; padding:14px; }
.ecu-dyno__title{ margin:4px 6px 10px; font-size:16px; font-weight:800; color:var(--ecu-text); }

.ecu-dyno__canvas{ width:100%; height:360px; display:block; }
@media (max-width:900px){ .ecu-dyno__canvas{ height:300px; } }