.elementor-11244 .elementor-element.elementor-element-ae18e60{--display:flex;}/* Start custom CSS for html, class: .elementor-element-b7e72d8 *//* ================== CONTAINER & CARD ================== */
#oto-calc-wrapper{
  display:flex;
  justify-content:center;
  padding:20px;
}
#oto-calc{
  max-width:980px;
  width:100%;
  font-family:Arial, sans-serif;
}
.card{
  background:#fff;
  padding:30px;
  border-radius:10px;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
  gap:25px;
  position:relative; /* buat dropdown Choices.js */
}
.wrap{
  display:grid;
  grid-template-columns:1.3fr 1fr; /* desktop dua kolom */
  gap:20px;
}

/* ================== HEADING & DESC ================== */
h4{
  font-size:26px;
  color:#000;
  margin-bottom:8px;
  line-height:1.2;
}
.desc{
  color:#333;
  margin-bottom:25px;
  font-size:14px;
}

/* ================== SELECT (Choices.js) ================== */
.variant{
  width:100% !important;
  font-size:14px;
  z-index:1;
}

/* ================== LABEL ================== */
label{
  display:flex;
  justify-content:space-between;
  margin-bottom:10px;
  font-size:14px;
}
.val{
  border:1px solid #ddd;
  padding:3px 10px;
  border-radius:6px;
  font-weight:600;
  background:#f9f9f9;
}

/* ================== SLIDER ================== */
.slider{
  margin-bottom:45px;
}
.noUi-horizontal{
  height:5px;
  border-radius:4px;
}
.noUi-connect{
  background:#1aa7c8;
}
.noUi-handle{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid #1aa7c8;
  background:#fff;
  top:-7px;
}
.noUi-pips{
  font-size:11px;
  color:#888;
}
.noUi-value{
  margin-top:8px;
}

/* ================== TENURE ================== */
.tenure{
  margin-top:10px;
  margin-bottom:10px;
}
.tenure button{
  border:1px solid #ddd;
  background:#fff;
  padding:7px 12px;
  border-radius:6px;
  margin:3px;
  cursor:pointer;
  font-size:15px;
}
.tenure .active{
  border-color:#e61c2f;
  color:#e61c2f;
  font-weight:700;
}

/* ================== SUMMARY ================== */
.summary{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-bottom:10px;
}
.summary-item{
  display:flex;
  flex-direction:column; /* angka di atas label */
  align-items:center;
}
/* FONT SIZE ANGKA */
.summary-item strong{
  font-size:18px; /* desktop */
  color:#000;
  margin-bottom:2px; /* jarak ke label */
}
.summary-item span{
  font-size:14px;
  color:#000;
}

/* ================== DIVIDER ================== */
.divider{
  border-top:3px dashed #bbb;
  margin:30px 0;
}

/* ================== EMI ================== */
.emi{
  text-align:center;
  margin-top:50px;
  margin-bottom:40px;
}
.emi span{
  display:block;
  font-size:15px;
  color:#000;
  margin-bottom:5px;
}
.emi b{
  font-size:35px;
  font-weight:700;
  color:#000;
}

/* ================== BUTTON ================== */
.apply{
  background:#e61c2f;
  color:#fff;
  width:100%;
  padding:15px;
  border-radius:6px;
  border:none;
  margin-top:15px;
  margin-bottom:5px;
  cursor:pointer;
  font-size:16px;
}

/* ================== NOTE ================== */
.note{
  font-size:12px;
  color:#777;
  margin-top:12px;
  line-height:1.5;
}

/* ================== RESPONSIVE TABLET ================== */
/* Untuk tablet (max-width:1024px) */
@media(max-width:1024px){
  #oto-calc .summary {
    display: flex !important;
    justify-content: space-between !important;
    gap: 0px !important;   /* jarak antar item */
  }
  
  #oto-calc .summary-item strong {
    margin-bottom: 5px !important; /* jarak angka ke label */
  }
  .summary-item strong {
    font-size: 14px !important; /* angka tablet */
  }
/* MOBILE & TABLET */
@media(max-width:768px){
  .wrap {
    grid-template-columns: 1fr !important; /* satu kolom, kiri & kanan vertikal */
    gap: 15px !important;
  }

  .right {
    width: 100% !important;      /* full width */
    padding: 10px;                /* lebih lega */
    display: block !important;    /* override flex arah horizontal */
  }
}
}

/* ================== RESPONSIVE MOBILE ================== */
@media(max-width:768px){
  h4{font-size:22px;}
  .desc{font-size:13px;}
  .summary-item strong{font-size:13px !important;} /* angka mobile */
  .summary-item span{font-size:11px !important;}    /* label mobile */
  .emi b{font-size:25px;}
  .tenure {
    display:flex;
    flex-wrap:wrap;           /* biar button lebih dari 3 otomatis turun baris */
    justify-content:left;    /* rata tengah */
    gap:3px!important;                  /* jarak antar button */
    margin-top:-20px;
    margin-bottom:10px;
  }

  .tenure button{
    flex: 0 0 calc(28% - 10px); /* 3 button per baris, dikurangi gap */
    text-align:center;
    padding:5px 0!important;
    font-size:14px !important;
    box-sizing:border-box;
  }
}

.tenure .active {
  border-color:#e61c2f;
  color:#e61c2f;
  font-weight:700;
}
  .apply{padding:12px; font-size:14px;}
  .note{font-size:11px;}

  .summary{
    flex-direction:row !important;
    justify-content:space-between !important;
    gap:0px !important;
  }
  .summary-item{
    flex-direction:column !important;
    align-items:center !important;
  }
}/* End custom CSS */