/* ========== Global form & select2 ========== */
#tracking-input{
  padding-left:15px;
  width:76%;
  border-radius:30px;
  max-width:70%;
}
div#tracking-outer { margin-left: 0%; width: 60%; }

.select2-container, #tracking-input{
  background-color:#fff;
  border:1px solid #e9e5df;
  height:35px;
  padding-right:20px;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding-left:22px !important;
}
span.select2.select2-container.select2-container--default.select2-container--below,
span.select2.select2-container.select2-container--default{
  width:45% !important; max-width:41%;
}
.select2-selection__rendered{ line-height:32px !important; padding-left:0 !important; }
.select2-selection__arrow{ height:33px !important; margin-right:5px; }
span.select2-selection.select2-selection--single{ border:0; border-top-left-radius:30px; }
span.select2.select2-container.select2-container--default{ border-radius:30px; }
span.select2-dropdown{ border-radius:20px !important; width:470px !important; }
input.select2-search__field{ border-radius:20px; }
.select2-results__option{ padding-left:22px; }

/* Dropdown select2 di atas modal */
.select2-container{ z-index:10560 !important; }
.modal-open .select2-container--open{ z-index:16000 !important; }

/* ========== Layout header area ========== */
#tracking{ background-size:cover; margin-top:-120px; z-index:99999999999999999; }
div#wrapper{ background-size:cover; margin:auto; max-width:1400px; width:80%; z-index:99999999999999999; }

.customRow{
  background-color:rgba(10,151,245,0.6);
  width:100%; margin:auto; position:relative; padding:0; height:120px;
  display:inline-block; z-index:99999999999999999; border-radius:20px 20px 0 0;
}
div#hawbtrack{ width:55%; position:absolute; float:left; left:65%; }
div#tariffcheck{ width:60%; float:left; position:absolute; left:35px; height:120px; border-right:1px solid #fff; padding-right:35px; }

.outer-wrapper,.ongkir-outer{ max-width:700px; }
select#origin-dd{ margin-bottom:10px; }

#pass-ongkir,#pass-tracking,#pop{
  background-color:#212C64; font-weight:700; color:#fff; border:0; font-size:15px;
  padding:6px 20px; border-radius:30px; transition:color .3s, background-color .3s;
}
#pass-ongkir:hover,#pass-tracking:hover,#pop:hover{ background:#f5f5f6; color:#000; }

div#submit-wrapper{ margin-top:1px; float:right; }
div#select-wrapper{ display:inline-block; width:100%; }

.desc-mti{ margin:0 0 12px; color:#fff !important; line-height:1.2em; font-size:14px; font-weight:400 !important; padding-left:0; }
.title-mti{ font-weight:600; color:#fff !important; font-size:24px; margin:10px 0 0; padding:35px 0 7px 22px; }

/* ========== Modal: scrollable & responsif ========== */
#capModal .modal-dialog{ width:350px; }
#capModal div#submit-wrapper{ margin-top:15px; position:relative; }

.modal-dialog{ width:auto; }
#trackingModal .modal-dialog,
#ongkirModal .modal-dialog,
#capModal .modal-dialog{
  max-width:1000px;
  margin:40px auto;
}

#trackingModal .modal-content,
#ongkirModal .modal-content{
  max-height:90vh;
  display:flex;
  flex-direction:column;
}
#trackingModal .modal-body,
#ongkirModal .modal-body,
#capModal .modal-body{
  position: relative;
  overflow-y:auto;
  padding-right:16px;
}

/* Tabel generik */
.result{ font-size:14px; width:100%; border-collapse:collapse; }
.result th,.result td{
  padding:8px 10px !important; text-align:left; vertical-align:top; border-bottom:1px solid #e9e9e9;
}
.result thead th{
  position:sticky; top:0; z-index:2; background:#125D7B; color:#fff; text-transform:uppercase;
}
.result td{ color:#5a5a5a; font-weight:400; font-size:12px; }
.result tr:nth-child(odd){ background:#eee; }

/* Grid info 2 kolom di header tracking (versi lama – fallback) */
.tracking-grid{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:0;
  margin-bottom:22px;
  background:#fff;
  border:1px solid #eaeaea;
  border-radius:8px;
  overflow:hidden;
}
.tracking-grid .k,
.tracking-grid .v{
  padding:10px 12px;
  border-bottom:1px solid #f0f0f0;
}
.tracking-grid .k{
  text-transform:uppercase;
  font-weight:700;
  color:#2c3e50;
  background:#fafafa;
  width:100%;
  border-right:1px solid #f0f0f0;
}
.tracking-grid .v{
  color:#4b5563;
  word-break:break-word;
}
.tracking-grid .k:nth-last-child(2),
.tracking-grid .v:last-child{
  border-bottom:0;
}

.table-scroll-x{ overflow-x:auto; }

/* Mobile header area */
@media (max-width:768px){
  .modal-content{ margin:auto 10px; }
  #wrapper{ width:100% !important; }
  #tracking{ margin-top:0; }
  .customRow{
    background-color:#0A97F5; width:100%; margin:auto; position:relative; padding:0; height:355px; border-radius:0;
  }
  div#hawbtrack,div#tariffcheck{ width:100%; left:0; position:relative; margin-left:5%; }
  div#tracking-outer,div#ongkir-outer{ width:100%; }
  .title-mti{ padding-top:0; padding-left:0; }
  div#tariffcheck{ padding-right:0; margin-top:5%; }
  span.select2.select2-container.select2-container--default.select2-container--below,
  span.select2.select2-container.select2-container--default{
    width:90% !important; margin-top:10px; max-width:100%;
  }
  div#hawbtrack{ margin-top:65px; }
  div#submit-wrapper{ margin-top:10px; float:left; }
  #tracking-input{ width:90%; max-width:100%; }
  span.select2-dropdown{ width:90vw !important; }
  #capModal .modal-dialog{ width:75%; }
}

.g-recaptcha{ margin-top:30px; }
#capModal form{ display:inline-flex; flex-direction:column-reverse; }

/* ===== Modal spacing agar tidak tertutup header ===== */
#trackingModal .modal-dialog,
#ongkirModal .modal-dialog,
#capModal .modal-dialog{
  max-width: 1200px;
  width: 90%;
  margin: 80px auto 40px;
}

@media (max-width: 992px){
  #trackingModal .modal-dialog,
  #ongkirModal .modal-dialog,
  #capModal .modal-dialog{
    width: 95%;
    max-width: 95%;
    margin: 80px auto 24px;
  }
}

/* Override spacing kedua (jarak dari atas sedikit beda) */
#trackingModal .modal-dialog,
#ongkirModal  .modal-dialog,
#capModal     .modal-dialog{
  max-width:1000px;
  margin: 100px auto 40px;
}

@media (max-width: 992px){
  #trackingModal .modal-dialog,
  #ongkirModal  .modal-dialog,
  #capModal     .modal-dialog{
    margin: 80px auto 24px;
  }
}

/* Saat modal terbuka, kunci scroll halaman (body + html) */
/* html.mti-modal-lock,
body.mti-modal-lock{
  overflow: hidden !important;
  height: 100%;
} */
/* body.mti-modal-lock #page-container{
  overflow: hidden !important;
} */

/* ===== Judul utama di atas detail tracking ===== */
.mti-tracking-title{
  font-size:20px;
  font-weight:700;
  color:#111827;
  margin:4px 0 10px;
}
@media (max-width:768px){
  .mti-tracking-title{
    font-size:18px;
    text-align:left;
  }
}

/* ===== Section wrapper (card besar) ===== */
.mti-sections{
  display:grid;
  gap:18px;
  margin:8px 0 20px;
}


.mti-section-title i{
  font-size:16px;
  color:#212c65;
}


@media (max-width: 992px){
  .mti-info-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .mti-info-grid{ grid-template-columns: 1fr; }
}

/* Kartu label+value (section) */

.mti-info-item .k{
  padding:8px 12px;
  font-size:11px;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-weight:700;
  color:#6b7280;
  background:#f3f4ff;
  border-bottom:1px solid #e5e7eb;
  display:flex;
  align-items:center;
  gap:6px;
}
.mti-info-item .k i{
  font-size:14px;
  color:#212c65;
}
.mti-info-item .v{
  padding:12px 14px 16px;
  font-size:13px;
  color:#111827;
  word-break:break-word;
  min-height:42px;
  display:flex;
  align-items:center;
}
#trackingModal .modal-body{
  padding:16px 18px 24px;
}
.mti-info-grid .mti-info-item:last-child{ border-bottom:0; }

/* ===== CHECKPOINT TITLE ===== */
.mti-checkpoint-title{
  text-align:center; text-transform:uppercase; margin:10px 0 12px; font-weight:700;
}

/* kolom tengah: garis vertikal putus-putus + icon (versi besar) */
.cp-tl{
  position: relative;
  width: 32px;
  min-width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cp-tl i{
  font-size: 14px;
  background: #fff;
  border-radius: 50%;
  padding: 2px;
  z-index: 1;
}
.cp-tl::before,
.cp-tl::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -16px;
  bottom: -16px;
  width: 0;
  border-left: 1px dashed #d4d4d8;
}
tr.is-first  .cp-tl::before{ display:none; }
tr.is-last   .cp-tl::after { display:none; }

/* warna icon per class row (besaran umum) */
tr.delivered .cp-tl i{ color:#16a34a; }
tr.pickup    .cp-tl i{ color:#2563eb; }
tr.podreturn .cp-tl i{ color:#0ea5e9; }
tr.exception .cp-tl i{ color:#ef4444; }

.cp-body{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cp-header{
  font-weight: 600;
  color: #111827;
}
.cp-status{
  font-size: 12px;
  color: #4b5563;
}
.cp-rec{
  font-size: 12px;
  font-weight: 600;
  color: #111827;
}
.cp-tag{
  font-size: 11px;
  color: #9ca3af;
  font-style: italic;
}

@media (max-width: 768px){
  .cp-line{
    grid-template-columns: 120px 28px 1fr;
    gap: 4px 10px;
  }
}
.cp-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.cp-header{
  font-weight:600;
  color:#111827;
  text-transform:none;
}
.cp-status{
  color:#4b5563;
}

/* ===== CHECKPOINT TIMELINE ala J&T ===== */
.mti-timeline-wrap{
  width:100%;
  padding:0 16px;
  box-sizing:border-box;
}
.table-tracking-milestones{
  display:block;
  margin:0;
  padding:0;
  border-left:0;
}
.table-tracking-milestones tr{
  display:block;
  background:transparent;
  border-bottom:none;
}
.table-tracking-milestones td{
  padding:0 !important;
  border-bottom:none;
  background:#fff;
}

/* satu baris checkpoint: [tanggal] [garis+icon] [teks] */
.cp-line{
  display:grid;
  grid-template-columns: 120px 28px 1fr;
  align-items:flex-start;
  gap:4px 12px;
  padding:10px 0;
  font-size:12px;
  color:#555;
}

/* tanggal + jam */
.cp-date{
  text-align:right;
  line-height:1.25;
}
.cp-date-d{
  font-weight:600;
  color:#111827;
}
.cp-date-t{
  font-size:11px;
  color:#6b7280;
}

/* kolom tengah (versi kecil untuk timeline) */
.cp-tl{
  position:relative;
  width:28px;
  min-width:28px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cp-tl i{
  font-size:12px;
  background:#fff;
  border-radius:50%;
  padding:2px;
  z-index:1;
}
.cp-tl::before,
.cp-tl::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:0;
  border-left:1px dashed #d4d4d8;
}
.cp-tl::before{ top:-12px; bottom:50%; }
.cp-tl::after { top:50%;  bottom:-12px; }

/* warna icon per class row (timeline) */
tr.delivered .cp-tl i{ color:#e11d48; }
tr.pickup    .cp-tl i{ color:#2563eb; }
tr.podreturn .cp-tl i{ color:#0ea5e9; }
tr.exception .cp-tl i{ color:#ef4444; }
tr.intransit .cp-tl i{ color:#9ca3af; }

.cp-body{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.cp-header{
  font-weight:600;
  color:#555;
}
.cp-status{
  font-size:12px;
  color:#777;
}
.cp-rec{
  font-size:12px;
  font-weight:600;
  color:#111827;
}
.cp-tag{
  font-size:11px;
  color:#9ca3af;
  font-style:italic;
}

/* RESPONSIVE timeline */
@media (max-width:992px){
  .mti-timeline-wrap{
    padding:0 12px;
  }
  .cp-line{
    grid-template-columns: 110px 26px 1fr;
  }
}
@media (max-width:768px){
  .mti-timeline-wrap{
    padding:0 10px;
  }
  .cp-line{
    grid-template-columns: 100px 24px 1fr;
    gap:4px 8px;
  }
  .cp-date{
    font-size:11px;
  }
  .cp-header{
    font-size:13px;
  }
  .cp-status,
  .cp-rec{
    font-size:11px;
  }
}
@media (max-width:480px){
  .mti-timeline-wrap{
    padding:0 8px;
  }
  .cp-line{
    grid-template-columns: 92px 22px 1fr;
  }
}

/* MATIKAN background zebra di tabel checkpoint */
#trackingModal table.result tr,
#trackingModal table.result tr:nth-child(odd),
#trackingModal table.result td{
  background: transparent !important;
}
#trackingModal .cp-line{
  background:#fff;
  width:100%;
}

/* CENTER checkpoint di desktop */
@media (min-width: 992px){
  #trackingModal .mti-checkpoint-block{
    text-align: center;
    margin-top: 10px;
  }
  #trackingModal .mti-checkpoint-block .mti-checkpoint-title{
    margin: 0 0 16px;
  }
  #trackingModal .mti-checkpoint-block .mti-timeline-wrap{
    display: inline-block;
    width: auto;
    padding: 0;
    text-align: left;
  }
  #trackingModal .mti-checkpoint-block .mti-timeline-wrap .result{
    width: auto;
    margin: 0;
  }
}

/* ===== CLOSE BUTTON (X) ===== */
#trackingModal .close,
#ongkirModal .close,
#capModal .close{
  position: absolute;
  right: 18px;
  top: 14px;
  z-index: 10;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(15,23,42,0.08),
              0 4px 10px rgba(15,23,42,0.15);
  font-size: 20px;
  line-height: 1;
  color: #111827;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#trackingModal .close:hover,
#ongkirModal .close:hover,
#capModal .close:hover{
  background: #f3f4ff;
}
@media (max-width: 768px){
  #trackingModal .modal-dialog,
  #ongkirModal .modal-dialog,
  #capModal .modal-dialog{
    margin-top: 60px;
  }
  #trackingModal .close,
  #ongkirModal .close,
  #capModal .close{
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 99999;
    width: 40px;
    height: 40px;
  }
}

/* =========================================================
   RINGKASAN AIRWAYBILL (HEADER ATAS)
   ========================================================= */
.mti-awb-card{
  margin: 6px 0 18px;
  background:#ffffff;
  border-radius:14px;
  border:1px solid rgba(148,163,184,0.6);
  box-shadow:0 8px 20px rgba(15,23,42,0.06);
  padding:14px 18px 12px;
  box-sizing:border-box;
}

/* TOP: 4 kolom di desktop, 2 kolom di tablet/mobile */
.mti-awb-top{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  column-gap:16px;
  row-gap:4px;
  margin-bottom:8px;
}

.mti-awb-bottom{
  display:flex;
  flex-wrap:wrap;
  gap:12px 32px;
  border-top:1px dashed #e5e7eb;
  padding-top:10px;
}

.mti-awb-field{
  min-width:0;
}

.mti-awb-label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#6b7280;
  font-weight:600;
}
.mti-awb-label i{
  font-size:12px;
  color:#9ca3af;
}

.mti-awb-val{
  font-size:14px;
  font-weight:700;
  color:#111827;
  margin-top:2px;
}

/* pill status */
.mti-awb-status-pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
}
.mti-awb-status-onprocess{
  background:#fef3c7;
  color:#92400e;
}
.mti-awb-status-ondelivery{
  background:#dbeafe;
  color:#1d4ed8;
}
.mti-awb-status-delivered{
  background:#dcfce7;
  color:#166534;
}
.mti-awb-status-podreturn{
  background:#e0f2fe;
  color:#075985;
}

/* RESPONSIVE AWB header */
@media (max-width:992px){
  .mti-awb-top{
    grid-template-columns: repeat(2, minmax(0,1fr));
    column-gap:10px;
    row-gap:6px;
  }
}
@media (max-width:768px){
  .mti-awb-card{
    padding:12px 12px 10px;
  }
  .mti-awb-label{
    font-size:9px;
  }
  .mti-awb-val{
    font-size:11px;
  }
}

/* =========================================================
   RINGKASAN PENGIRIM & PENERIMA
   ========================================================= */

/* Title di luar card */
.mti-party-title{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#6b7280;
  margin:0 0 6px;
}

/* Card pengirim & penerima */
.mti-party-card{
  margin:0 0 18px;
  background:#ffffff;
  border-radius:14px;
  border:1px solid rgba(148,163,184,0.6);
  box-shadow:0 8px 20px rgba(15,23,42,0.06);
  padding:14px 18px 14px;
  box-sizing:border-box;
}

/* Grid 2 kolom (pengirim | penerima) */
.mti-party-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px 24px;
}

/* Blok pengirim & penerima */
.mti-party-block{
  position:relative;
  padding-right:18px;
}

.mti-party-block + .mti-party-block{
  padding-left:18px;
}

/* DESKTOP / TABLET: garis putus-putus vertikal di tengah */
@media (min-width:769px){
  .mti-party-block:first-child{
    border-right:1px dashed #e5e7eb;
  }
}

/* MOBILE: card ditumpuk + garis putus-putus horizontal di antara pengirim & penerima */
@media (max-width:768px){
  .mti-party-block{
    padding:0 0 10px 0;
    border-right:none; /* pastikan tidak ada garis vertikal di mobile */
  }

  .mti-party-block + .mti-party-block{
    margin-top:10px;
    padding-top:12px;
    border-top:1px dashed #e5e7eb;
  }
}


/* Judul blok (Informasi Pengirim / Informasi Penerima) */
.mti-party-block-title{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#9ca3af;
  margin-bottom:6px;
}
.mti-party-block-title i{
  font-size:13px;
  color:#9ca3af;
}

.mti-party-item{
  margin-bottom:6px;
}

/* Label field (Shipper Name, Shipper City, dst) */
.mti-party-label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#9ca3af;
}
.mti-party-label i{
  font-size:12px;
  color:#9ca3af;
}

/* Value field */
/* Value field */
.mti-party-val{
  font-size:12px;        /* tadinya 13px */
  font-weight:600;
  color:#111827;
  margin-top:1px;
  line-height:1.4;
}

/* Responsif: card ditumpuk vertikal di mobile */
/* Responsif: card ditumpuk vertikal di mobile */
/* Responsif: card ditumpuk vertikal di mobile */
@media (max-width:768px){
  .mti-party-grid{
    grid-template-columns:1fr;
  }

  .mti-party-block{
    padding:0 0 10px 0;
    border-right:none;
  }

  /* blok kedua (Informasi Penerima) – sejajarkan dengan blok pertama */
  .mti-party-block + .mti-party-block{
    margin-top:10px;
    padding-top:12px;
    padding-left:0;          /* <— ini yg bikin sejajar */
    border-top:1px dashed #e5e7eb;
  }

  /* sedikit lebih kecil di mobile */
  .mti-party-label{
    font-size:10px;
  }
  .mti-party-val{
    font-size:11px;
    font-weight:600;
  }
}
/* =========================================================
   INFORMASI DETAIL PENGIRIMAN (card setelah Pengirim & Penerima)
   ========================================================= */

.mti-detail-title{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#6b7280;
  margin:4px 0 6px;
}

/* Card: samakan gaya dengan mti-party-card */
.mti-detail-card{
  margin:0 0 18px;
  background:#ffffff;
  border-radius:14px;
  border:1px solid rgba(148,163,184,0.6);
  box-shadow:0 8px 20px rgba(15,23,42,0.06);
  padding:14px 18px 14px;
  box-sizing:border-box;
}

/* Grid 3 kolom di desktop (otomatis jadi 2/1 di layar kecil) */
.mti-detail-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px 18px;
}

@media (max-width: 992px){
  .mti-detail-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 640px){
  .mti-detail-grid{
    grid-template-columns: 1fr;
  }
}

.mti-detail-item{
  min-width:0;
}

.mti-detail-label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#9ca3af;
  margin-bottom:2px;
}
.mti-detail-label i{
  font-size:12px;
  color:#9ca3af;
}

.mti-detail-val{
  font-size:12px;
  font-weight:600;
  color:#111827;
  line-height:1.4;
  word-break:break-word;
}

@media (max-width:768px){
  .mti-detail-label{
    font-size:10px;
  }
  .mti-detail-val{
    font-size:11px;
  }
}