/* EU Battery Regulations page - Umbraco: Settings > Stylesheets > eu-battery.css */
/* Tersimpan di: wwwroot/css/eu-battery.css */

:root{
  /* ==== TEMA UTAMA (merah) ==== */
  --gs-red-900:#8C0C00;                 /* versi gelap  */
  --gs-red-700:#C31100;                 /* rgba(195,17,0,1) - warna utama */
  --gs-red-500:#E01400;                 /* versi terang */
  --gs-red-tint:#FDEEEC;                /* background lembut */
  --gs-red-tint-line:#F6CDC8;           /* border lembut */

  /* ==== Sumber "customer provided" (netral, agar tidak bentrok dgn merah) ==== */
  --gs-slate:#5A6472;
  --gs-slate-tint:#ECEEF1;
  --gs-slate-ink:#3F4A58;

  /* ==== Caution box ==== */
  --gs-amber:#C98A12;

  --gs-ink:#212529;
  --gs-muted:#6c757d;
  --gs-line:#dee2e6;
  --gs-bg:#f4f5f6;
}

html,body{min-height:100%;}
body{
  background:var(--gs-bg);          /* abu, bukan putih, agar sisa layar tidak belang */
  display:flex;
  flex-direction:column;
  color:var(--gs-ink);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-feature-settings:"cv05" 1,"cv08" 1,"tnum" 1;  /* huruf l lebih jelas, angka rata lebar */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.eu-header h1,.eu-battery h2,.h5{letter-spacing:-.015em;}  /* Inter agak lebar di ukuran display */

.eu-shell{width:100%;margin:0;flex:1 1 auto;display:flex;flex-direction:column;}

/* ---------- Header ---------- */
.eu-header{
  background:linear-gradient(100deg,var(--gs-red-900) 0%,var(--gs-red-700) 55%,var(--gs-red-500) 100%);
  color:#fff;
  text-align:center;
  padding:2rem 1.25rem 2.25rem;
}
.eu-header .eu-badge{
  display:inline-block;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  padding:.3rem .9rem;
  font-size:.78rem;
  letter-spacing:.02em;
  margin-bottom:1rem;
}
.eu-header h1{
  font-size:clamp(1.35rem,3.6vw,2.15rem);
  font-weight:700;
  margin-bottom:.85rem;
}
.eu-header p{
  font-size:clamp(.85rem,1.6vw,.95rem);
  margin:0;
  color:rgba(255,255,255,.9);
  max-width:720px;
  margin-inline:auto;
  line-height:1.6;
}
@media (min-width:992px){
  .eu-header{padding:2.75rem 2rem 3rem;}
}

/* ---------- Stepper ---------- */
.eu-steps{
  display:flex;
  border-bottom:1px solid var(--gs-line);
  background:#fff;
}
.eu-step{
  flex:1 1 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.9rem .5rem;
  font-size:.88rem;
  color:var(--gs-muted);
  border-bottom:3px solid transparent;
  text-align:center;
}
.eu-step .eu-step-num{
  flex:0 0 auto;
  width:22px;height:22px;
  border-radius:50%;
  background:#ced4da;
  color:#fff;
  font-size:.72rem;
  font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
}
.eu-step.is-active{color:var(--gs-red-700);font-weight:600;border-bottom-color:var(--gs-red-700);}
.eu-step.is-active .eu-step-num{background:var(--gs-red-700);}
.eu-step.is-done{color:var(--gs-red-500);}
.eu-step.is-done .eu-step-num{background:var(--gs-red-500);}
.eu-step-num i{font-size:.8rem;line-height:1;}
.eu-step-label{display:none;}
@media (min-width:576px){ .eu-step-label{display:inline;} }

/* ---------- Panels ---------- */
.eu-panel{background:var(--gs-bg);padding:1.75rem 1rem 2.5rem;flex:1 1 auto;}   /* isi sisa tinggi layar */
.eu-panel-inner{max-width:1200px;margin:0 auto;}
@media (min-width:992px){
  .eu-panel{padding:2.25rem 2.5rem 3rem;}
}

/* ---------- Vehicle group ---------- */
.eu-group{
  border:1px solid var(--gs-line);
  border-radius:.5rem;
  background:#fff;
  padding:1.25rem;
  margin-bottom:1.25rem;
}
.eu-group-title{
  font-size:.9rem;
  font-weight:700;
  color:var(--gs-red-900);
  margin:0 0 1rem;
  padding-bottom:.6rem;
  border-bottom:1px solid var(--gs-line);
}
.eu-maker{
  width:100%;
  background:#fff;
  border:1px solid var(--gs-line);
  border-radius:.4rem;
  padding:.85rem 1rem;
  text-align:left;
  font-size:.9rem;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.eu-maker:hover{
  border-color:var(--gs-red-500);
  box-shadow:0 2px 10px rgba(195,17,0,.15);
  transform:translateY(-1px);
}
.eu-maker i{color:var(--gs-red-500);}

/* ---------- Breadcrumb chips ---------- */
.eu-chips{
  display:flex;flex-wrap:wrap;gap:.5rem;
  background:#fff;
  border:1px solid var(--gs-line);
  border-radius:.5rem;
  padding:.7rem .85rem;
  margin-bottom:1.25rem;
}
.eu-chip{
  background:var(--gs-red-tint);
  border:1px solid var(--gs-red-tint-line);
  color:var(--gs-red-900);
  border-radius:999px;
  padding:.25rem .8rem;
  font-size:.82rem;
  font-weight:600;
}

/* ---------- Model list ---------- */
.eu-table{
  background:#fff;
  border:1px solid var(--gs-line);
  border-radius:.5rem;
  overflow:hidden;
}
.eu-thead{
  display:none;
  background:var(--gs-red-700);
  color:#fff;
  font-size:.82rem;
  font-weight:600;
  padding:.75rem 1rem;
}
.eu-trow{
  display:block;
  width:100%;
  text-align:left;
  background:#fff;
  border:0;
  border-top:1px solid var(--gs-line);
  padding:.9rem 1rem;
  font-size:.88rem;
  transition:background .15s;
}
.eu-trow:first-of-type{border-top:0;}
.eu-trow:hover{background:var(--gs-red-tint);}
.eu-trow .eu-model{font-weight:700;}
.eu-trow .eu-spec{color:var(--gs-ink);}
.eu-trow .eu-note{color:var(--gs-muted);}
.eu-cellhead{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--gs-muted);
  display:block;
}
@media (min-width:768px){
  .eu-thead{display:grid;}
  .eu-thead,.eu-trow{
    grid-template-columns:1.1fr 1fr 1.6fr 24px;
    align-items:center;
    gap:1rem;
  }
  .eu-trow{display:grid;}
  .eu-cellhead{display:none;}
  .eu-trow .eu-note{color:var(--gs-ink);font-weight:600;}
}

/* ---------- Battery summary card ---------- */
.eu-battery{
  background:#fff;
  border:1px solid var(--gs-line);
  border-radius:.5rem;
  padding:1.1rem;
  display:flex;
  gap:1rem;
  align-items:flex-start;
  margin-bottom:1.25rem;
}
.eu-battery-icon{
  flex:0 0 auto;
  width:56px;height:56px;
  border-radius:.5rem;
  background:var(--gs-red-tint);
  color:var(--gs-red-500);
  font-size:1.6rem;
  display:flex;align-items:center;justify-content:center;
}
.eu-battery h2{font-size:1.15rem;font-weight:700;margin:0 0 .2rem;}
.eu-battery .eu-sub{font-size:.8rem;color:var(--gs-muted);}
.eu-specs{
  display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;
  margin-top:.75rem;
}
.eu-specs div{font-size:.82rem;color:var(--gs-muted);}
.eu-specs strong{
  display:block;
  font-size:.95rem;
  color:var(--gs-ink);
}

/* ---------- Regulation items ---------- */
.eu-reglist{
  background:#fff;
  border:1px solid var(--gs-line);
  border-radius:.5rem;
  padding:1rem 1.1rem;
}
.eu-reglist-title{
  font-size:.88rem;font-weight:700;
  padding-bottom:.75rem;margin-bottom:.25rem;
  border-bottom:1px solid var(--gs-line);
}
.eu-reg{
  display:flex;gap:.85rem;
  padding:1rem 0;
  border-bottom:1px dashed var(--gs-line);
}
.eu-reg:last-child{border-bottom:0;}
.eu-reg-num{
  flex:0 0 auto;
  width:26px;height:26px;border-radius:50%;
  font-size:.78rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
}
.eu-reg.by-gy .eu-reg-num{background:var(--gs-red-500);}
.eu-reg.by-customer .eu-reg-num{background:var(--gs-slate);}
.eu-reg-body{flex:1 1 auto;min-width:0;}
.eu-reg-head{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin-bottom:.3rem;
}
.eu-reg-head h3{font-size:.9rem;font-weight:700;margin:0;}
.eu-reg p{font-size:.8rem;color:var(--gs-muted);margin:0;line-height:1.55;}
.eu-tag{font-size:.7rem;font-weight:600;border-radius:999px;padding:.15rem .6rem;}
.eu-tag-gy{background:#FBE3E0;color:var(--gs-red-900);}
.eu-tag-cust{background:var(--gs-slate-tint);color:var(--gs-slate-ink);}
.eu-reg-action{flex:0 0 auto;display:flex;align-items:center;}
@media (max-width:767.98px){
  .eu-reg{flex-wrap:wrap;}
  .eu-reg-action{width:100%;padding-left:2.6rem;margin-top:.6rem;}
  .eu-reg-action .btn{width:100%;}
}

.eu-caution{
  background:#FFFAF0;
  border:1px solid #F2DFAE;
  border-left:4px solid var(--gs-amber);
  border-radius:.4rem;
  padding:.85rem 1rem;
  font-size:.78rem;
  color:#7A5A12;
  margin-top:1.25rem;
  line-height:1.6;
}

/* ---------- Status nonaktif (belum tersedia) ---------- */
.eu-maker.is-disabled,
.eu-maker:disabled{
  background:#f8f9fa;
  border-color:var(--gs-line);
  color:#9aa0a6;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}
.eu-maker.is-disabled:hover,
.eu-maker:disabled:hover{
  border-color:var(--gs-line);
  box-shadow:none;
  transform:none;                    /* batalkan efek hover */
}
.eu-maker.is-disabled i,
.eu-maker:disabled i{color:#c2c7cd;}

/* tombol aksi nonaktif di step 3 */
.eu-reg-action .btn.disabled,
.eu-reg-action .btn:disabled{
  opacity:.5;
  cursor:not-allowed;
  pointer-events:auto;               /* biar tooltip title tetap muncul */
}

/* ---------- Buttons ---------- */
.btn-gs{background:var(--gs-red-700);border-color:var(--gs-red-700);color:#fff;}
.btn-gs:hover,.btn-gs:focus{background:var(--gs-red-900);border-color:var(--gs-red-900);color:#fff;}
.btn-gs-outline{border-color:var(--gs-slate);color:var(--gs-slate-ink);background:#fff;}
.btn-gs-outline:hover,.btn-gs-outline:focus{background:var(--gs-slate);border-color:var(--gs-slate);color:#fff;}
.btn-back{
  background:#fff;border:1px solid var(--gs-line);
  color:var(--gs-red-900);font-size:.83rem;
  margin-bottom:1rem;
}
.btn-back:hover{border-color:var(--gs-red-500);color:var(--gs-red-700);}
.btn:focus-visible,.eu-maker:focus-visible,.eu-trow:focus-visible{
  outline:3px solid rgba(195,17,0,.4);
  outline-offset:2px;
}

[hidden]{display:none !important;}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
}