/* ===================================================================
 * Tambahan v23 — 5 permintaan owner.
 * File terpisah supaya ids.css / ids-v19.css yang sudah di-ACC aman.
 *   1) Timeline pesanan 4 langkah + timestamp
 *   2) Countdown kedaluwarsa QRIS + banner lunas
 *   3) Halaman lacak pesanan tanpa login
 *   4) Sticky bar harga + tombol beli di HP (digeser dari live chat)
 *   5) Pratinjau bulk upload stok di panel admin
 * =================================================================== */

/* ---------------------------------------------------------------
 * 1) TIMELINE PESANAN (stepper 4 langkah, vertikal + timestamp)
 * ------------------------------------------------------------- */
.tl {
  position: relative;
  margin: 0 0 18px;
  padding: 16px 16px 6px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 16px;
  background: rgba(255, 255, 255, .022);
}
.tl-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 12.5px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #9aa1ab;
}
.tl-h .sp { flex: 1 1 auto; }
.tl-row {
  position: relative;
  display: flex;
  gap: 13px;
  padding: 0 0 16px 0;
}
/* garis penghubung antar langkah */
.tl-row::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 26px;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, .10);
}
.tl-row:last-child { padding-bottom: 4px; }
.tl-row:last-child::before { display: none; }
.tl-dot {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 255, 255, .07);
  color: #7d848e;
  border: 1px solid rgba(255, 255, 255, .12);
  position: relative;
  z-index: 1;
}
.tl-txt { min-width: 0; padding-top: 2px; }
.tl-txt b { display: block; font-size: 13.6px; color: #c9cfd7; line-height: 1.35; }
.tl-txt i {
  display: block;
  font-style: normal;
  font-size: 11.8px;
  color: #7d848e;
  margin-top: 3px;
}

/* langkah selesai */
.tl-row.done .tl-dot { background: #2ecc71; color: #0b0d11; border-color: #2ecc71; }
.tl-row.done::before { background: rgba(46, 204, 113, .45); }
.tl-row.done .tl-txt b { color: #eaf6ee; }

/* langkah yang sedang berjalan */
.tl-row.now .tl-dot {
  background: #FF4256;
  color: #fff;
  border-color: #FF4256;
  box-shadow: 0 0 0 4px rgba(255, 66, 86, .18);
  animation: tlNadi 1.7s ease-in-out infinite;
}
.tl-row.now .tl-txt b { color: #fff; }
.tl-row.now .tl-txt i { color: #ff8b98; }
@keyframes tlNadi {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 66, 86, .18); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 66, 86, .05); }
}

/* langkah dibatalkan */
.tl-row.bad .tl-dot { background: #e0364a; color: #fff; border-color: #e0364a; }
.tl-row.bad .tl-txt b { color: #ffd8dd; }

/* ---------------------------------------------------------------
 * 2) COUNTDOWN KEDALUWARSA QRIS + BANNER LUNAS
 * ------------------------------------------------------------- */
.ck-count {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 12px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 193, 7, .34);
  border-radius: 13px;
  background: rgba(255, 193, 7, .07);
  font-size: 12.8px;
  line-height: 1.5;
  color: #ffe9a8;
}
.ck-count b {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 19px;
  letter-spacing: .5px;
  color: #ffc107;
  min-width: 74px;
  text-align: center;
}
.ck-count.tipis { border-color: rgba(226, 29, 56, .45); background: rgba(226, 29, 56, .09); color: #ffc9d1; }
.ck-count.tipis b { color: #ff5b6e; animation: ckKedip 1s steps(2, end) infinite; }
.ck-count.habis { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: #9aa1ab; }
.ck-count.habis b { color: #9aa1ab; animation: none; }
@keyframes ckKedip { 50% { opacity: .35; } }

/* indikator polling hidup */
.ck-live { display: inline-flex; align-items: center; gap: 6px; }
.ck-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2ecc71;
  animation: ckDenyut 1.4s ease-in-out infinite;
}
@keyframes ckDenyut { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* banner besar begitu pembayaran masuk */
.ck-lunas {
  margin: 0 0 16px;
  padding: 15px 16px;
  border: 1px solid rgba(46, 204, 113, .45);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(46, 204, 113, .14), rgba(46, 204, 113, .05));
  animation: ckMasuk .45s ease;
}
.ck-lunas b { display: block; font-size: 15px; color: #eaf6ee; margin-bottom: 3px; }
.ck-lunas span { font-size: 12.9px; color: #b9d9c6; line-height: 1.55; }
@keyframes ckMasuk {
  from { opacity: 0; transform: translateY(-7px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------
 * 3) HALAMAN LACAK PESANAN TANPA LOGIN
 * ------------------------------------------------------------- */
.lc-form { display: grid; gap: 12px; }
@media (min-width: 620px) {
  .lc-form { grid-template-columns: 1.4fr 1fr auto; align-items: end; }
}
.lc-form .btn { height: 44px; }
.lc-kunci {
  margin-top: 14px;
  padding: 12px 13px;
  border: 1px dashed rgba(255, 255, 255, .16);
  border-radius: 13px;
  font-size: 12.6px;
  line-height: 1.55;
  color: #9aa1ab;
}
.lc-kunci b { color: #d6dae0; }

/* ---------------------------------------------------------------
 * 4) STICKY BAR HARGA + BELI (HP)
 *    Hanya muncul di layar kecil. Tombol X live chat ada di kanan
 *    bawah, jadi bar diberi jarak kanan seperti solusi banner PWA.
 * ------------------------------------------------------------- */
.pd-sticky { display: none; }

@media (max-width: 720px) {
  .pd-sticky {
    display: block;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    margin: 12px -14px -14px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    /* sisakan ruang untuk tombol live chat di kanan bawah */
    padding-right: 76px;
    background: linear-gradient(180deg, rgba(11, 13, 17, .72), rgba(11, 13, 17, .97) 42%);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    border-top: 1px solid rgba(255, 255, 255, .11);
  }
  .pd-sticky-in { display: flex; align-items: center; gap: 11px; }
  .pd-sticky-p { min-width: 0; flex: 1 1 auto; line-height: 1.2; }
  .pd-sticky-p small { display: block; font-size: 10.8px; color: #8b929b; letter-spacing: .2px; }
  .pd-sticky-p b {
    display: block;
    font-size: 17px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pd-sticky-p i {
    display: block;
    font-style: normal;
    font-size: 10.8px;
    color: #7d848e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pd-sticky .btn { flex: 0 0 auto; padding: 11px 16px; font-size: 13.4px; white-space: nowrap; }

  /* tombol beli versi panjang di kolom kanan disembunyikan supaya tidak dobel */
  .pdetail .pd-r .pd-cta.pd-sembunyi-hp { display: none; }
}

/* ---------------------------------------------------------------
 * 5) PRATINJAU BULK UPLOAD STOK (panel admin)
 * ------------------------------------------------------------- */
.bu-stat {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 12px 0 4px;
}
.bu-stat span {
  padding: 9px 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .03);
  text-align: center;
  font-size: 11.2px;
  color: #8b929b;
  line-height: 1.35;
}
.bu-stat span b { display: block; font-size: 18px; color: #fff; }
.bu-stat span.ok { border-color: rgba(46, 204, 113, .40); background: rgba(46, 204, 113, .08); }
.bu-stat span.ok b { color: #2ecc71; }
.bu-stat span.dup { border-color: rgba(255, 193, 7, .38); background: rgba(255, 193, 7, .07); }
.bu-stat span.dup b { color: #ffc107; }
.bu-stat span.bad { border-color: rgba(226, 29, 56, .40); background: rgba(226, 29, 56, .08); }
.bu-stat span.bad b { color: #ff5b6e; }

.bu-tolak {
  margin-top: 10px;
  max-height: 150px;
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid rgba(226, 29, 56, .28);
  border-radius: 12px;
  background: rgba(226, 29, 56, .05);
  font-size: 11.8px;
  line-height: 1.7;
  color: #ffc9d1;
}
.bu-tolak div { display: flex; gap: 8px; }
.bu-tolak div em {
  flex: 0 0 auto;
  font-style: normal;
  color: #ff8b98;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.bu-tolak div span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #d6dae0;
}
.bu-siap {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(46, 204, 113, .35);
  border-radius: 12px;
  background: rgba(46, 204, 113, .06);
  font-size: 12.4px;
  line-height: 1.55;
  color: #d6f5e3;
}

/* v44: panel admin SEO kategori & produk */
.seo-list{display:flex;flex-direction:column;gap:6px}
.seo-row{border:1px solid var(--line);border-radius:10px;background:var(--surface2)}
.seo-row>summary{cursor:pointer;padding:9px 12px;font-size:13.5px;list-style:none;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.seo-row>summary::-webkit-details-marker{display:none}
.seo-row>summary::before{content:"\25B8";color:var(--txt3);margin-right:2px}
.seo-row[open]>summary::before{content:"\25BE"}
.seo-row>summary a{color:var(--txt3);text-decoration:none}
.seo-row>summary a:hover{color:#fff;text-decoration:underline}
.seo-item{padding:4px 12px 12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.seo-item label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--txt2)}
.seo-item input,.seo-item textarea{width:100%;box-sizing:border-box}
.seo-item .act{margin-top:4px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
/* v44: pengaturan baris sorotan beranda (admin) */
.sorotan-cfg{padding:6px 0}
.sorotan-list{display:flex;flex-wrap:wrap;gap:6px;min-height:28px;margin-top:4px}
.sorotan-list .chip button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:14px;line-height:1;padding:0 0 0 4px}
.sorotan-manual label{display:block;font-size:12.5px;color:var(--txt2);margin-top:8px}
/* v44: dashboard realtime, template balasan, fraud */
.dash2{grid-template-columns:1fr 1fr;align-items:start}
@media(max-width:900px){.dash2{grid-template-columns:1fr}}
.mbar{display:grid;grid-template-columns:70px 1fr auto;gap:10px;align-items:center;font-size:12.5px;color:var(--txt2);margin:6px 0}
.mbar span{font-weight:700;color:#fff}
.canned-pop{position:relative;border:1px solid var(--line);border-radius:12px;background:#121216;padding:6px;display:flex;flex-direction:column;gap:4px;max-height:260px;overflow:auto;margin:0 0 6px}
.canned-pop button{text-align:left;border:1px solid transparent;background:#0C0C0F;color:#E8E9ED;border-radius:9px;padding:8px 10px;cursor:pointer;font-size:13px}
.canned-pop button:hover{border-color:var(--red)}
.canned-pop button small{display:block;color:var(--txt3);font-size:11.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn-item{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;background:var(--surface2)}
.cn-item>div:first-child{flex:1;min-width:0}