/* =====================================================================
   MyJek Web Order — gaya bersama (mobile first)
   Warna mengikuti brand di homepage myjekindonesia.com
   ===================================================================== */
:root{
  --orange:#ff7a00;
  --orange-2:#ff9800;
  --orange-soft:#fff1e4;
  --black:#151515;
  --navy:#0f2137;
  --gray:#6b7280;
  --green:#22a447;
  --merah:#dc2626;
  --kuning:#d97706;
  --bg:#fff8f1;
  --putih:#fff;
  --line:rgba(255,122,0,.16);
  --line-2:#e9e2da;
  --shadow:0 18px 45px rgba(0,0,0,.08);
  --shadow-sm:0 8px 22px rgba(0,0,0,.06);
  --r:16px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--black);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

.wrap{ max-width:640px; margin:auto; padding:0 14px 120px; }
.wrap-lebar{ max-width:1040px; margin:auto; padding:0 14px 90px; }

/* ------------------------------- header ------------------------------ */
.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(255,248,241,.94);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar-in{
  max-width:1040px; margin:auto; padding:10px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.merk{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--black); }
.merk img{ height:34px; width:auto; }
.merk b{ font-weight:800; font-size:18px; letter-spacing:-.3px; }
.merk span{ display:block; font-size:10px; font-weight:600; color:var(--orange); line-height:1; }

/* ------------------------------- kartu ------------------------------- */
.kartu{
  background:var(--putih); border:1px solid var(--line-2);
  border-radius:var(--r); padding:16px; box-shadow:var(--shadow-sm);
  margin-bottom:14px;
}
.kartu-judul{ font-weight:800; font-size:15px; margin:0 0 12px; color:var(--navy); }

.judul-hal{ font-size:22px; font-weight:800; letter-spacing:-.4px; margin:18px 0 4px; }
.sub-hal{ color:var(--gray); font-size:14px; margin:0 0 16px; }

/* ------------------------------ formulir ----------------------------- */
label{ display:block; font-weight:600; font-size:13.5px; margin:0 0 6px; color:var(--navy); }
label .wajib{ color:var(--merah); }
.bantuan{ font-size:12px; color:var(--gray); font-weight:400; margin-top:-2px; margin-bottom:6px; }

input[type=text], input[type=tel], input[type=url], input[type=password],
input[type=number], input[type=email], select, textarea{
  width:100%; padding:12px 13px; font-family:inherit; font-size:15px;
  border:1.5px solid var(--line-2); border-radius:12px; background:var(--putih);
  color:var(--black); outline:none; transition:border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,122,0,.14);
}
textarea{ min-height:92px; resize:vertical; }
/* Kolom pesanan bebas: sengaja tinggi supaya pelanggan tidak ragu menulis panjang */
textarea.kolom-besar{ min-height:170px; line-height:1.5; }
textarea::placeholder{ color:#9ca3af; }
.grup{ margin-bottom:14px; }
.baris{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:420px){ .baris{ grid-template-columns:1fr; } }

.pilihan{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pilihan input{ position:absolute; opacity:0; pointer-events:none; }
.pilihan label{
  display:flex; align-items:center; gap:8px; margin:0; cursor:pointer;
  padding:12px; border:1.5px solid var(--line-2); border-radius:12px;
  background:var(--putih); font-weight:600; font-size:14px; transition:.15s;
}
.pilihan input:checked + label{
  border-color:var(--orange); background:var(--orange-soft); color:var(--navy);
  box-shadow:0 0 0 3px rgba(255,122,0,.12);
}
.pilihan-1{ grid-template-columns:1fr; }

.setuju{ display:flex; gap:10px; align-items:flex-start; font-weight:500; font-size:13.5px; }
.setuju input{ width:20px; height:20px; margin-top:2px; accent-color:var(--orange); flex:0 0 auto; }

/* perangkap bot — harus tidak terlihat & tidak bisa difokus manusia */
.jebakan{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ------------------------------ tombol ------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; cursor:pointer; font-family:inherit; font-weight:800; font-size:15px;
  padding:14px 18px; border-radius:14px; text-decoration:none; transition:.15s;
  width:100%;
}
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn-utama{ background:linear-gradient(135deg,var(--orange),var(--orange-2)); color:#fff;
  box-shadow:0 10px 24px rgba(255,122,0,.32); }
.btn-utama:active{ transform:translateY(1px); }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-garis{ background:var(--putih); color:var(--navy); border:1.5px solid var(--line-2); }
.btn-hijau{ background:var(--green); color:#fff; }
.btn-merah{ background:var(--merah); color:#fff; }
.btn-kecil{ padding:9px 13px; font-size:13px; border-radius:11px; width:auto; }

/* ------------------------------- badge ------------------------------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px;
  border-radius:999px; font-size:11.5px; font-weight:700; white-space:nowrap;
}
.b-baru{ background:#fff1e4; color:#c2410c; }
.b-proses{ background:#e0f2fe; color:#0369a1; }
.b-selesai{ background:#dcfce7; color:#15803d; }
.b-batal{ background:#fee2e2; color:#b91c1c; }
.b-aman{ background:#f1f5f9; color:#475569; }
.b-awas{ background:#fef3c7; color:#b45309; }
.b-bahaya{ background:#fee2e2; color:#b91c1c; }

/* ------------------------------ daftar ------------------------------- */
.order-item{
  background:var(--putih); border:1px solid var(--line-2); border-left:4px solid var(--orange);
  border-radius:14px; padding:13px 14px; margin-bottom:10px; box-shadow:var(--shadow-sm);
  cursor:pointer; transition:.15s;
}
.order-item:hover{ transform:translateY(-1px); box-shadow:var(--shadow); }
.order-item.baru{ border-left-color:var(--orange); }
.order-item.proses{ border-left-color:#0284c7; }
.order-item.selesai{ border-left-color:var(--green); }
.order-item.batal{ border-left-color:var(--merah); opacity:.7; }
.oi-atas{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.oi-nomor{ font-weight:800; font-size:14px; letter-spacing:-.2px; }
.oi-baris{ font-size:13px; color:var(--gray); }
.oi-baris b{ color:var(--black); font-weight:600; }

.kosong{ text-align:center; padding:36px 16px; color:var(--gray); font-size:14px; }
.kosong .ikon{ font-size:34px; margin-bottom:8px; }

/* ------------------------------ statistik ---------------------------- */
.stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:16px; }
@media(min-width:700px){ .stat-grid{ grid-template-columns:repeat(4,1fr); } }
.stat{
  background:var(--putih); border:1px solid var(--line-2); border-radius:14px;
  padding:13px; box-shadow:var(--shadow-sm);
}
.stat .angka{ font-size:26px; font-weight:800; line-height:1.1; color:var(--navy); }
.stat .nama{ font-size:12px; color:var(--gray); font-weight:600; }

/* ------------------------------- tab --------------------------------- */
.tab{ display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; margin-bottom:14px; }
.tab button{
  flex:0 0 auto; border:1.5px solid var(--line-2); background:var(--putih);
  padding:9px 15px; border-radius:999px; font-family:inherit; font-weight:700;
  font-size:13px; cursor:pointer; color:var(--gray); white-space:nowrap;
}
.tab button.aktif{ background:var(--navy); border-color:var(--navy); color:#fff; }

/* ------------------------------ timeline ----------------------------- */
.timeline{ list-style:none; padding:0; margin:0; }
.timeline li{ position:relative; padding:0 0 18px 26px; }
.timeline li::before{
  content:''; position:absolute; left:5px; top:6px; width:11px; height:11px;
  border-radius:50%; background:var(--orange); box-shadow:0 0 0 3px var(--orange-soft);
}
.timeline li::after{
  content:''; position:absolute; left:10px; top:19px; bottom:0; width:1.5px; background:var(--line-2);
}
.timeline li:last-child{ padding-bottom:0; }
.timeline li:last-child::after{ display:none; }
.timeline .t-judul{ font-weight:700; font-size:14px; }
.timeline .t-waktu{ font-size:12px; color:var(--gray); }

/* ------------------------------- modal ------------------------------- */
.modal{
  position:fixed; inset:0; background:rgba(15,33,55,.55); z-index:200;
  display:flex; align-items:flex-end; justify-content:center; padding:0;
}
.modal[hidden]{ display:none; }
.modal-isi{
  background:var(--bg); width:100%; max-width:640px; max-height:92vh; overflow-y:auto;
  border-radius:22px 22px 0 0; padding:18px 16px 30px;
}
@media(min-width:700px){
  .modal{ align-items:center; padding:20px; }
  .modal-isi{ border-radius:20px; }
}
.modal-atas{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.modal-atas h3{ margin:0; font-size:18px; font-weight:800; }
.tutup{ background:none; border:none; font-size:26px; line-height:1; cursor:pointer; color:var(--gray); }

.detail-baris{ display:flex; gap:10px; padding:7px 0; border-bottom:1px dashed var(--line-2); font-size:14px; }
.detail-baris:last-child{ border-bottom:none; }
.detail-baris .k{ flex:0 0 108px; color:var(--gray); font-size:13px; }
.detail-baris .v{ flex:1; font-weight:600; word-break:break-word; white-space:pre-wrap; }

/* ------------------------------- toast ------------------------------- */
.toast-box{ position:fixed; left:12px; right:12px; bottom:16px; z-index:300;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast{
  background:var(--navy); color:#fff; padding:11px 16px; border-radius:12px;
  font-size:14px; font-weight:600; box-shadow:var(--shadow); max-width:520px;
}
.toast-sukses{ background:var(--green); }
.toast-gagal{ background:var(--merah); }

/* ------------------------------ lain-lain ---------------------------- */
.kotak-info{
  background:var(--orange-soft); border:1px solid var(--line); border-radius:14px;
  padding:12px 14px; font-size:13.5px; color:var(--navy); margin-bottom:14px;
}
.kotak-bahaya{ background:#fee2e2; border-color:#fecaca; color:#7f1d1d; }
/* Kuning = "periksa dulu", merah = "hati-hati". Potensi duplikat sengaja
   TIDAK memakai merah: ia sering kali bukan kesalahan apa pun. */
.kotak-awas{ background:#fef3c7; border-color:#fde68a; color:#78350f; }
.kotak-awas a{ color:#78350f; }

/* -------------------------- form edit order -------------------------- */
.form-edit{ display:grid; gap:9px; margin-top:10px; }
.isian-baris{ display:grid; gap:3px; }
.isian{
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:11px;
  font:inherit; font-size:14px; color:var(--navy); background:#fff;
}
.isian:focus{ outline:2px solid var(--orange); outline-offset:-1px; }
textarea.isian{ resize:vertical; min-height:44px; }

.instruksi-cepat{ display:grid; gap:7px; margin:10px 0; }
.instruksi-cepat label{
  display:flex; gap:8px; align-items:flex-start; font-size:13.5px;
  color:var(--navy); cursor:pointer; line-height:1.35;
}
.instruksi-cepat input{ margin-top:2px; flex:none; width:16px; height:16px; accent-color:var(--orange); }

/* Blok CATATAN ADMIN di layar rider. Sengaja mencolok: instruksi yang
   terlewat berarti rider membeli barang yang sudah dibayar admin. */
.instruksi-rider{
  background:#fef3c7; border:1px solid #fde68a; border-left:4px solid var(--kuning);
  border-radius:12px; padding:11px 13px; margin:10px 0;
  font-size:13.5px; color:#78350f; line-height:1.45;
}
.instruksi-rider b{ display:block; margin-bottom:4px; letter-spacing:.4px; font-size:12px; }

/* ------------------------ toggle Auto Assign ------------------------- */
.bar-auto{ display:grid; gap:8px; margin-top:12px; }
.bar-auto-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--gray);
  border-radius:14px; padding:11px 14px; font-size:13.5px; color:var(--navy);
}
.bar-auto-item.nyala{ border-left-color:var(--hijau,#16a34a); background:#f0fdf4; }
.bar-auto-item .mini{ margin-top:2px; }
.bar-auto-item button{ flex:none; }

/* Penanda basecamp di kartu rider panel dispatch. */
.rd-basecamp{
  font-size:12px; font-weight:700; color:#166534; background:#dcfce7;
  border-radius:8px; padding:2px 7px; display:inline-block; margin:3px 0;
}
.spinner{
  width:22px; height:22px; border:3px solid rgba(255,255,255,.35);
  border-top-color:#fff; border-radius:50%; animation:putar .7s linear infinite;
}
@keyframes putar{ to{ transform:rotate(360deg); } }
.memuat{ text-align:center; padding:40px; color:var(--gray); }

.nomor-order{
  font-size:26px; font-weight:800; letter-spacing:.5px; color:var(--orange);
  text-align:center; padding:10px 0;
}
.tautan-lacak{
  background:#fff; border:1.5px dashed var(--orange); border-radius:12px;
  padding:11px; font-size:12.5px; word-break:break-all; color:var(--navy);
}
.mini{ font-size:12px; color:var(--gray); }
.tengah{ text-align:center; }
.rapat{ margin:0 0 8px; }
.pisah{ height:1px; background:var(--line-2); margin:14px 0; }

/* =====================================================================
   TAMPILAN PELANGGAN — /order dan /track (revisi 9 Agu 2026)
   ---------------------------------------------------------------------
   Semuanya di-scope ke <body class="pelanggan"> DENGAN SENGAJA: berkas ini
   dipakai bersama oleh /admin dan /rider, dan penyegaran bentuk + hapus
   aksen hijau di sini tidak boleh ikut mengubah dua dashboard internal itu.
   Jangan pindahkan aturan di bawah ke selector global.
   ===================================================================== */
:root{
  --orange-dark:#e86f00;
  --field:#f2f4f7;
  --border:#e4e7ec;
  --teks:#1f2937;
  --redup:#667085;
  --hijau-telepon:#16a34a;
}

.pelanggan{ color:var(--teks); }
.pelanggan .wrap{ padding:0 18px 120px; }

/* ------------------------------- header ------------------------------ */
.pelanggan .topbar{ border-bottom:1px solid var(--border); }
.pelanggan .topbar-in{ padding:12px 18px; }
.pelanggan .merk b{ font-size:19px; }

/* -------------------------------- teks ------------------------------- */
.pelanggan .judul-hal{ font-size:26px; font-weight:800; margin:22px 0 5px; }
.pelanggan .sub-hal{ font-size:14px; color:var(--redup); margin:0 0 14px; }
.pelanggan .kartu-judul{ font-size:14px; letter-spacing:.2px; }
.pelanggan .mini{ color:var(--redup); }

/* ------------------------------- kartu ------------------------------- */
.pelanggan .kartu{
  border-radius:28px; border:1px solid var(--border);
  padding:20px 18px; box-shadow:0 10px 30px rgba(16,24,40,.05);
  margin-bottom:14px;
}
.pelanggan .kotak-info{ border-radius:20px; padding:14px 16px; }

/* ------------------------------ formulir ----------------------------- */
.pelanggan label{ font-size:14px; font-weight:700; margin-bottom:7px; }
.pelanggan .bantuan{ font-size:12.5px; margin-bottom:9px; }

.pelanggan input[type=text],
.pelanggan input[type=tel],
.pelanggan input[type=email],
.pelanggan select,
.pelanggan textarea{
  background-color:var(--field);
  border:1.5px solid transparent;
  border-radius:20px;
  padding:15px 17px;
  font-size:15px;
  color:var(--teks);
}
.pelanggan input[type=text],
.pelanggan input[type=tel],
.pelanggan select{ height:58px; }

/* Panah dropdown digambar sendiri supaya bentuknya konsisten lintas peramban. */
.pelanggan select{
  appearance:none; -webkit-appearance:none;
  padding-right:46px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 17px center;
}

.pelanggan textarea{ min-height:110px; padding:15px 17px; }
.pelanggan textarea.kolom-besar{ min-height:180px; }

.pelanggan input:focus,
.pelanggan select:focus,
.pelanggan textarea:focus{
  background-color:var(--putih);
  border-color:var(--orange);
  box-shadow:0 0 0 4px rgba(255,122,0,.14);
}
.pelanggan .grup{ margin-bottom:18px; }

/* ------------------------------ tombol ------------------------------- */
.pelanggan .btn{
  border-radius:22px; padding:16px 18px; min-height:56px; font-size:15.5px;
}
.pelanggan .btn-utama{
  background:var(--orange);          /* solid, bukan gradien */
  box-shadow:0 8px 20px rgba(255,122,0,.28);
}
.pelanggan .btn-utama:active{ background:var(--orange-dark); }
.pelanggan .btn-garis{
  background:var(--putih); border:1.6px solid var(--orange); color:var(--orange);
}
.pelanggan .btn-kecil{
  min-height:0; padding:10px 17px; font-size:13px; border-radius:999px; width:auto;
}
/* Tombol WhatsApp rider ikut identitas MyJek, bukan hijau WhatsApp. */
.pelanggan .btn-hijau{ background:var(--orange); color:#fff; }
.pelanggan .btn-hijau:active{ background:var(--orange-dark); }
.pelanggan .btn:focus-visible{ outline:3px solid var(--navy); outline-offset:2px; }

/* --------------------------- jam operasional ------------------------- */
.jam-operasional{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--orange-soft); border:1px solid var(--line);
  color:var(--navy); font-size:13.5px; font-weight:600;
  padding:11px 18px; border-radius:999px; margin:0 0 20px;
}
.jam-operasional strong{ font-weight:800; letter-spacing:.2px; }
.jam-operasional svg{ flex:0 0 auto; width:18px; height:18px; }

/* ----------------------- floating "Order by Phone" ------------------- */
/* Sengaja HIJAU, bukan orange: orange sudah dipakai KIRIM PESANAN, dan dua
   tombol besar berwarna sama di satu layar membuat pelanggan ragu mana yang
   harus ditekan. Hijau membacanya sebagai kanal komunikasi, bukan aksi utama. */
.floating-phone-order{
  position:fixed; right:18px; z-index:150;
  bottom:calc(18px + env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; gap:9px;
  min-height:54px; padding:0 20px; border-radius:999px;
  background:var(--hijau-telepon); color:#fff; text-decoration:none;
  font-size:14.5px; font-weight:700; letter-spacing:-.1px;
  box-shadow:0 10px 26px rgba(22,163,74,.38);
  transition:.15s;
}
.floating-phone-order svg{ flex:0 0 auto; width:21px; height:21px; }
.floating-phone-order:active{ background:#128038; transform:translateY(1px); }
.floating-phone-order:focus-visible{ outline:3px solid var(--navy); outline-offset:3px; }
@media(max-width:359px){
  .floating-phone-order{ padding:0 16px; font-size:13.5px; }
}

/* Toast diangkat supaya tidak tertimbun tombol mengambang. */
.pelanggan .toast-box{ bottom:92px; }
.pelanggan .toast-sukses{ background:var(--orange); }

/* ------------------------------- badge ------------------------------- */
/* Tanpa aksen hijau. Order berjalan = orange pekat, selesai = netral. */
.pelanggan .badge{ padding:5px 12px; font-size:11.5px; }
.pelanggan .b-baru{ background:var(--orange-soft); color:#9a4a00; }
.pelanggan .b-proses{ background:var(--orange); color:#fff; }
.pelanggan .b-selesai{ background:#eef0f3; color:#475569; }
.pelanggan .b-batal{ background:#fee2e2; color:#b91c1c; }

/* --------------------------- kartu pesanan --------------------------- */
.pelanggan .order-item{
  border-radius:24px; border:1px solid var(--border);
  border-left:5px solid var(--orange);
  padding:14px 16px; margin-bottom:10px; box-shadow:none;
}
.pelanggan .order-item:hover{ transform:none; box-shadow:0 8px 22px rgba(16,24,40,.06); }
.pelanggan .order-item.proses{ border-left-color:var(--orange); }
.pelanggan .order-item.selesai{ border-left-color:#cbd5e1; }
.pelanggan .order-item.batal{ border-left-color:var(--merah); opacity:.75; }
.pelanggan .oi-nomor{ font-size:14.5px; }

/* Riwayat: 2 teratas selalu terlihat, sisanya di balik "Lihat Selengkapnya". */
.riwayat.terbuka{
  max-height:52vh; overflow-y:auto; overscroll-behavior:contain;
  padding-right:2px;
}
.tombol-selengkapnya{
  display:block; width:100%; margin-top:4px; padding:12px;
  background:none; border:none; border-top:1px solid var(--border);
  font-family:inherit; font-size:13.5px; font-weight:700;
  color:var(--orange); cursor:pointer;
}
.tombol-selengkapnya:active{ color:var(--orange-dark); }

/* Penanda data tracking yang belum tersegarkan — halaman yang diam-diam
   basi terasa seperti halaman yang macet. */
.segar-basi{ color:var(--kuning); font-weight:700; }
.segar-basi .tombol-selengkapnya{ border-top:none; padding:6px 0 0; }

/* ------------------------------ timeline ----------------------------- */
.pelanggan .timeline .t-judul{ font-size:14.5px; }

/* Jaga-jaga agar tidak pernah ada geser horizontal di layar 360px. */
.pelanggan{ overflow-x:hidden; }

/* ---------------------- ajakan pasang ke layar utama ------------------ */
/* Satu baris ramping di atas formulir, bukan spanduk besar: memesan tetap
   tugas utama halaman ini, memasang aplikasi hanya bonus. */
.pasang-app{
  position:relative;
  display:flex; align-items:center; gap:11px;
  background:var(--putih); border:1px solid var(--border);
  border-radius:22px; padding:16px 14px 12px; margin:0 0 16px;
  box-shadow:0 8px 22px rgba(16,24,40,.05);
}
.pasang-app[hidden]{ display:none; }
.pasang-app img{ width:40px; height:40px; border-radius:11px; flex:0 0 auto; }
.pasang-teks{ flex:1; min-width:0; line-height:1.3; padding-right:14px; }
.pasang-teks b{ display:block; font-size:13.5px; font-weight:800; color:var(--teks); }
.pasang-teks span{ display:block; font-size:12px; color:var(--redup); }
/* Tombol Pasang dirapatkan ke bawah, BUKAN ke tengah: tombol tutup melayang di
   pojok kanan atas, dan pada 375px sudut kanan atas tombol ini sempat masuk ke
   area ketuk tanda silang. Satu ketukan meleset = ajakan pasang hilang 7 hari,
   dan pelanggan tidak punya cara memunculkannya lagi. */
.pasang-app .btn{ flex:0 0 auto; align-self:flex-end; }
/* Tombol tutup ditempel di pojok, bukan sebagai kolom sendiri: di layar 375px
   setiap piksel yang diambil kolom keempat memaksa deskripsi turun satu baris
   lagi, dan spanduk ini tidak boleh lebih tinggi daripada perlunya. */
.pasang-tutup{
  position:absolute; top:0; right:2px;
  display:flex; align-items:center; justify-content:center;
  width:32px; height:30px;              /* area ketuk yang jelas batasnya */
  background:none; border:none; cursor:pointer;
  font-size:19px; line-height:1; color:var(--redup); padding:0;
}
@media(max-width:359px){
  .pasang-teks span{ display:none; }
}

.panduan-ios[hidden]{ display:none; }
.panduan-ios ol{ margin:8px 0 0; padding-left:20px; }
.panduan-ios li{ margin-bottom:5px; }
.panduan-ios li:last-child{ margin-bottom:0; }

/* ------------------------- rating pengalaman ------------------------- */
.kartu-rating[hidden]{ display:none; }
.rating-judul{ margin:0; font-size:19px; font-weight:800; text-align:center; }
.rating-sub{ margin:4px 0 14px; font-size:14px; color:var(--redup); text-align:center; }

.bintang{ display:flex; justify-content:center; gap:6px; }
.bintang button{
  background:none; border:none; padding:4px; cursor:pointer; line-height:0;
  border-radius:12px; -webkit-tap-highlight-color:transparent;
}
.bintang button:focus-visible{ outline:3px solid var(--navy); outline-offset:1px; }
.bintang svg{ width:40px; height:40px; display:block; color:#d6d9de; transition:transform .12s, color .12s; }
.bintang button.aktif svg{ color:#ffb400; }
.bintang button:active svg{ transform:scale(.9); }
@media(max-width:359px){ .bintang svg{ width:34px; height:34px; } }

.rating-arti{
  min-height:22px; margin:6px 0 0; text-align:center;
  font-size:14px; font-weight:700; color:var(--orange);
}

.rating-tanya{ margin:14px 0 8px; font-size:13.5px; font-weight:700; color:var(--teks); }
.chip-baris{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  border:1.5px solid var(--border); background:var(--putih); color:var(--teks);
  border-radius:999px; padding:9px 15px; font-family:inherit;
  font-size:13px; font-weight:600; cursor:pointer;
}
.chip.aktif{ border-color:var(--orange); background:var(--orange-soft); color:#9a4a00; }

.kartu-rating textarea{ margin-top:14px; min-height:88px; }
.kartu-rating .btn-utama{ margin-top:14px; }
.rating-lewati{
  display:block; width:100%; margin-top:6px; padding:12px;
  background:none; border:none; font-family:inherit;
  font-size:13.5px; font-weight:700; color:var(--redup); cursor:pointer;
}
.rating-terima .ikon{ font-size:46px; line-height:1; }
.rating-terima h3{ margin:6px 0 4px; font-size:19px; font-weight:800; }
.rating-terima p{ margin:0 0 14px; font-size:14px; color:var(--redup); }
.rating-bintang-terpilih{ font-size:22px; letter-spacing:2px; color:#ffb400; }

/* =====================================================================
   DASHBOARD ADMIN — panel dispatch rider (revisi 9 Agu 2026)
   Working interface: kecepatan kerja di atas dekorasi. Order dan rider
   harus terbaca dalam satu layar tanpa membuka popup.
   ===================================================================== */
.dispatch{ display:grid; gap:16px; align-items:start; }
@media(min-width:980px){
  .dispatch{ grid-template-columns:minmax(0,1.7fr) minmax(320px,.8fr); }
  /* Tab tanpa panel (Selesai/Batal/Rider) memakai lebar penuh — tanpa ini
     grid tetap memesan kolom kanan yang kosong. */
  .dispatch.satu-kolom{ grid-template-columns:minmax(0,1fr); }
}
.dispatch-kolom{ min-width:0; }   /* tanpa ini grid menolak menyusutkan kolom order */

.panel-rider{
  background:var(--putih); border:1px solid var(--line-2);
  border-radius:18px; box-shadow:var(--shadow-sm); overflow:hidden;
}
/* [hidden] harus menang atas display:flex di media query di bawah. */
.panel-rider[hidden]{ display:none; }
@media(min-width:980px){
  /* Panel ikut tergulir bersama halaman sampai menempel, lalu diam — supaya
     rider tetap terlihat saat daftar order panjang. */
  .panel-rider{ position:sticky; top:88px; max-height:calc(100vh - 116px);
                display:flex; flex-direction:column; }
  .panel-rider-isi{ overflow-y:auto; overscroll-behavior:contain; }
}
.panel-rider-atas{
  padding:14px 15px; border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,#fffdfb,#fff);
}
.panel-rider-atas h2{ margin:0; font-size:15px; font-weight:800; color:var(--navy); }
.panel-rider-isi{ padding:12px 12px 14px; }

/* Kepala panel saat sebuah order sedang dipilih. */
.pr-terpilih{
  margin-top:9px; padding:10px 12px; border-radius:13px;
  background:var(--orange-soft); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.pr-terpilih .no{ font-weight:800; font-size:14px; color:var(--navy); }
.pr-terpilih .lbl{ font-size:11px; font-weight:700; color:var(--orange); letter-spacing:.4px; }
.pr-batal{
  background:none; border:none; font-family:inherit; font-size:12px; font-weight:700;
  color:var(--gray); cursor:pointer; text-decoration:underline; flex:0 0 auto;
}

.pr-judul-bagian{
  font-size:11px; font-weight:800; letter-spacing:.5px; color:var(--gray);
  margin:12px 2px 8px; text-transform:uppercase;
}
.pr-judul-bagian:first-child{ margin-top:2px; }

/* ------------------------ kartu rider dispatch ----------------------- */
.rd{
  border:1px solid var(--line-2); border-left:4px solid var(--line-2);
  border-radius:14px; padding:11px 12px; margin-bottom:9px; background:var(--putih);
}
.rd.siap{ border-left-color:var(--green); }
.rd.sibuk{ border-left-color:#0284c7; }
.rd.rehat{ border-left-color:var(--kuning); }
.rd-atas{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.rd-nama{ font-weight:800; font-size:14px; letter-spacing:-.2px; }
.rd-standby{ font-size:13px; font-weight:700; color:var(--navy); margin-top:3px; }
.rd-baris{ font-size:12.5px; color:var(--gray); margin-top:2px; }
.rd-baris b{ color:var(--black); font-weight:600; }
.rd-basi{ color:var(--kuning); font-weight:700; }
.rd-aksi{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:9px; }
.rd-aksi .btn{ flex:0 0 auto; }
.rd-tanpa-wa{ font-size:12px; color:var(--kuning); font-weight:700; }

/* Input nomor WA langsung di kartu — tanpa modal akun yang besar. */
.rd-wa-form{ display:flex; gap:6px; margin-top:8px; width:100%; }
.rd-wa-form input{ flex:1; min-width:0; padding:9px 11px; font-size:13.5px; border-radius:11px; }

.pr-kosong{ text-align:center; padding:22px 10px; color:var(--gray); font-size:13px; }
.pr-offline{
  margin-top:10px; padding-top:10px; border-top:1px dashed var(--line-2);
  font-size:12px; color:var(--gray); text-align:center;
}

/* Tombol buka/tutup panel di layar kecil. */
.pr-toggle{
  display:block; width:100%; padding:13px; border:none; background:none;
  font-family:inherit; font-size:14px; font-weight:800; color:var(--navy);
  cursor:pointer; text-align:left;
}
@media(min-width:980px){ .pr-toggle{ display:none; } }

/* ------------------------- kartu order terpilih ---------------------- */
.order-item.terpilih{
  border-color:var(--orange); border-left-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,122,0,.16);
}
.oi-aksi{ display:flex; gap:7px; flex-wrap:wrap; margin-top:9px; }