:root{--pb-accent-text:#075E54}
/* bk-pembeli.css — halaman pembeli (login /pembeli/ + dashboard /pembeli/akun/).
   Memakai token warna & font dari bk.css; jangan menimpa kelas global di sana. */

/* elemen dengan atribut hidden harus benar-benar hilang, walau punya display sendiri */
.pb-body [hidden]{display:none !important}

/* ---------- kerangka ---------- */
.pb-body{background:linear-gradient(180deg,var(--pb-soft) 0%,var(--wa-bg) 260px)}
.pb-wrap{width:min(560px,100% - 32px);margin-inline:auto;padding:18px 0 44px}
.pb-top{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.pb-top .brand-mini{display:flex;align-items:center;gap:9px;min-height:44px;font-family:var(--font-head);font-weight:800;font-size:16.5px;color:var(--pb-accent-text,var(--wa-teal))}
.pb-top img{height:36px;width:36px;border-radius:11px;object-fit:cover;background:#fff}
.pb-top .sp{flex:1}
.pb-link{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-family:var(--font-head);font-weight:700;font-size:13.5px;color:var(--pb-accent-text,var(--wa-teal))}
.pb-link:hover{border-color:#BFD9CB;background:#F4FCF7}

.pb-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:22px 20px}
.pb-card + .pb-card{margin-top:14px}

/* ---------- login ---------- */
.pb-hero{text-align:center;margin-bottom:18px}
.pb-ic{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;margin:0 auto 12px;background:var(--pb-grad);color:#fff;font-size:28px;box-shadow:0 10px 24px rgba(18,140,126,.28)}
.pb-hero h1{font-family:var(--font-head);font-size:23px;line-height:1.2;margin:0 0 7px;letter-spacing:-.3px}
.pb-hero p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.pb-lbl{display:block;font-family:var(--font-head);font-weight:700;font-size:13px;margin:16px 0 7px;color:#20312C}
.pb-field{display:flex;align-items:center;gap:9px;border:1.6px solid #D8E3DC;border-radius:14px;padding:0 14px;background:#fff;min-height:54px;transition:border-color .16s ease,box-shadow .16s ease}
.pb-field:focus-within{border-color:var(--pb-accent-text,var(--wa-green-dark));box-shadow:0 0 0 4px rgba(18,140,126,.12)}
.pb-field.bad{border-color:#E9A6A0;background:#FFF7F6}
.pb-field .pf{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--muted);padding-right:9px;border-right:1px solid var(--line)}
.pb-field input{flex:1;border:0;outline:0;background:none;font-family:var(--font-body);font-size:16px;color:var(--ink);min-height:52px;min-width:0}
.pb-field input.pin{letter-spacing:.42em;font-family:var(--font-head);font-weight:700;font-size:18px}
.pb-hint{font-size:12.5px;color:var(--muted);line-height:1.5;margin:8px 0 0}
.pb-err{display:flex;gap:8px;align-items:flex-start;background:#FFF4F3;border:1px solid #F3C9C4;color:#8A2B22;border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.45;margin:12px 0 0}
.pb-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:52px;margin-top:16px;border:0;border-radius:999px;cursor:pointer;font-family:var(--font-head);font-weight:800;font-size:15.5px;background:var(--wa-green-dark);color:var(--pb-on-primary);box-shadow:0 10px 22px rgba(18,140,126,.26)}
.pb-btn:hover{filter:brightness(.94)}
.pb-btn:active{transform:translateY(1px)}
.pb-btn.ghost{background:#F1F6F3;color:var(--pb-accent-text,var(--wa-teal));box-shadow:none;border:1.5px solid var(--line)}
.pb-btn.ghost:hover{background:#EAF2EE}
.pb-note{background:var(--pb-soft,#F3FBF6);border:1px dashed var(--pb-line,#BEDFCB);border-radius:14px;padding:12px 14px;font-size:12.8px;line-height:1.55;color:#20503F;margin-top:16px}
.pb-note b{font-family:var(--font-head)}
.pb-foot{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.pb-foot a{color:var(--pb-accent-text,var(--wa-green-dark));font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.pb-step[hidden]{display:none !important}

/* ---------- dashboard ---------- */
.pb-head{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.pb-head-in{width:min(560px,100% - 32px);margin-inline:auto;display:flex;align-items:center;gap:11px;padding:10px 0;min-height:64px}
.ava-wrap{position:relative;flex:0 0 42px;width:42px;height:42px}
.ava-wrap.hm{flex:0 0 44px;width:44px;height:44px}
.ava-cam{position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:50%;background:#fff;color:var(--pb-accent-text,var(--wa-green-dark));
  display:grid;place-items:center;border:1.6px solid #fff;box-shadow:0 2px 6px rgba(16,45,38,.22);pointer-events:none}
.pb-ava.ada-foto{font-size:0;padding:0;border:0;background-size:cover;background-position:center}
.ava-cam.sembunyi{display:none !important}
button.pb-ava{cursor:pointer;border:0;padding:0}
.ava-prev{width:112px;height:112px;border-radius:50%;margin:6px auto 10px;display:grid;place-items:center;
  background:var(--pb-grad);color:#fff;font-family:var(--font-head);font-weight:800;font-size:34px;
  background-size:cover;background-position:center;box-shadow:0 8px 20px rgba(16,45,38,.16)}
.ava-prev.ada-foto{font-size:0}
.pb-ava{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--pb-grad);color:#fff;font-family:var(--font-head);font-weight:800;font-size:16px;flex:0 0 42px}
.pb-head .who{min-width:0;flex:1}
.pb-head .who b{display:block;font-family:var(--font-head);font-size:15px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-head .who span{font-size:12.5px;color:var(--muted)}
.pb-icon-btn{width:44px;height:44px;flex:0 0 44px;border-radius:13px;border:1.5px solid var(--line);background:#fff;color:var(--pb-accent-text,var(--wa-teal));display:grid;place-items:center;cursor:pointer}
.pb-icon-btn:hover{background:#F4FCF7}
.pb-icon-btn.keluar{width:auto;padding:0 13px;font-family:var(--font-head);font-weight:700;font-size:13px}

.pb-greet{margin-top:14px;border-radius:var(--radius-lg);padding:18px;color:#fff;background:var(--pb-grad);box-shadow:0 14px 30px rgba(7,94,84,.24)}
.pb-greet h2{margin:0 0 4px;font-family:var(--font-head);font-size:19px;letter-spacing:-.2px}
.pb-greet p{margin:0;font-size:13px;opacity:.92;line-height:1.5}
.pb-greet-stats{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
.pb-stat{flex:1 1 30%;min-width:96px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);border-radius:14px;padding:9px 11px}
.pb-stat b{display:block;font-family:var(--font-head);font-size:17px;line-height:1.2}
.pb-stat span{font-size:12px;opacity:.9}

.pb-tabs{display:flex;gap:6px;margin:14px 0 0;padding:5px;background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow);position:sticky;top:66px;z-index:20}
.pb-tabs button{flex:1;min-height:44px;border:0;border-radius:999px;background:none;cursor:pointer;font-family:var(--font-head);font-weight:700;font-size:13px;color:var(--muted);padding:0 6px}
.pb-tabs button[aria-selected="true"]{background:var(--wa-green-dark);color:var(--pb-on-primary);box-shadow:0 6px 14px rgba(18,140,126,.26)}

.pb-sec{margin-top:14px}
.pb-sec-h{display:flex;align-items:center;gap:8px;margin:0 0 9px;font-family:var(--font-head);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:#5B6F66}
.pb-sec-h .n{background:#EAF5EE;color:#20603F;border-radius:999px;padding:2px 8px;font-size:11.5px;letter-spacing:0}

.pb-order{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:15px 16px}
.pb-order-h{display:flex;align-items:flex-start;gap:10px}
.pb-order-h .t{flex:1;min-width:0}
.pb-order-h b{display:block;font-family:var(--font-head);font-size:15.5px;line-height:1.25}
.pb-order-h span.s{font-size:12.5px;color:var(--muted)}
.pb-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 11px;font-family:var(--font-head);font-weight:700;font-size:12px;background:#fff;border:1px solid var(--pb-line,#CDE9D6);color:var(--pb-accent-text,var(--wa-green-dark));white-space:nowrap}
.pb-pill.live{background:#FFF3E0;color:#9A5B00}
.pb-pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.pb-rows{margin-top:11px;display:grid;gap:7px;font-size:13px;color:#3A4A45}
.pb-rows .r{display:flex;gap:8px;align-items:flex-start}
.pb-rows .r b{font-family:var(--font-head);min-width:56px;color:#20312C}
.pb-actions{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap}
.pb-actions .pb-link{flex:1 1 auto;justify-content:center;min-height:46px}
.pb-actions .pb-link.solid{background:var(--wa-green-dark);color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(18,140,126,.24)}

.pb-timeline{margin:13px 0 0;padding:12px 0 0;border-top:1px dashed var(--line);display:grid;gap:0}
.pb-tl{display:grid;grid-template-columns:22px 1fr;gap:10px;padding-bottom:12px;position:relative}
.pb-tl:last-child{padding-bottom:0}
.pb-tl .d{width:22px;height:22px;border-radius:50%;border:2px solid #CFE3D6;background:#fff;display:grid;place-items:center;font-size:11px;color:#fff;z-index:1}
.pb-tl.done .d{background:var(--wa-green-dark);border-color:var(--pb-accent-text,var(--wa-green-dark))}
.pb-tl.now .d{background:#D97706;border-color:#D97706;box-shadow:0 0 0 4px rgba(217,119,6,.16)}
.pb-tl:not(:last-child)::after{content:"";position:absolute;left:10.5px;top:22px;bottom:0;width:2px;background:#E4EDE7}
.pb-tl b{display:block;font-family:var(--font-head);font-size:13px;line-height:1.3}
.pb-tl.pending b{color:var(--muted);font-weight:600}
.pb-tl span{font-size:12px;color:var(--muted)}

.pb-item{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 13px;box-shadow:var(--shadow)}
.pb-item + .pb-item{margin-top:9px}
.pb-item .emoji{width:40px;height:40px;flex:0 0 40px;border-radius:12px;background:var(--pb-soft,#F1F8F3);display:grid;place-items:center;font-size:19px;color:var(--pb-accent-text,var(--wa-teal))}
.pb-item .t{flex:1;min-width:0}
.pb-item b{display:block;font-family:var(--font-head);font-size:14px;line-height:1.3}
.pb-item span.s{font-size:12.5px;color:var(--muted)}
.pb-item .rp{font-family:var(--font-head);font-weight:800;font-size:13.5px;white-space:nowrap}
.pb-stars{color:#B45309;font-size:12.5px;letter-spacing:1px}
.pb-form{margin-top:10px;background:#F8FCF9;border:1px solid var(--line);border-radius:16px;padding:13px}
.pb-form[hidden]{display:none !important}
.pb-form .pb-field{margin-bottom:8px;min-height:50px}
.pb-empty{background:#fff;border:1px dashed var(--line);border-radius:16px;padding:18px 16px;text-align:center;font-size:13px;color:var(--muted)}
.pb-hint a.pb-inline{display:inline-flex;align-items:center;min-height:44px;color:var(--pb-accent-text,var(--wa-green-dark));font-weight:700}
.pb-ikon{flex:0 0 auto;vertical-align:-2px}
.pb-ic svg{width:30px;height:30px}
.pb-toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,16px);z-index:80;background:#0B3B33;color:#fff;border-radius:999px;padding:11px 18px;font-size:13px;font-family:var(--font-head);font-weight:600;box-shadow:0 12px 26px rgba(7,94,84,.3);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;max-width:calc(100% - 32px);text-align:center}
.pb-toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:420px){
  .pb-hero h1{font-size:21px}
  .pb-stat{min-width:88px}
  .pb-tabs button{font-size:12.2px}
}
@media (prefers-reduced-motion:reduce){
  .pb-toast{transition:none}
}

/* tombol "gunakan lokasi saat ini" di form alamat */
.pb-lok{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;padding:0 14px;border-radius:13px;border:1.5px dashed var(--pb-line,#9FCFB4);background:var(--pb-soft,#F3FBF6);color:#0F6B3F;font-family:var(--font-head);font-weight:700;font-size:13.5px;cursor:pointer;margin:2px 0 4px}
.pb-lok:hover{background:var(--pb-soft2,#EAF7EF)}
.pb-lok[disabled]{opacity:.65;cursor:progress}
.pb-gps-tag{display:inline-flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--pb-line,#CDE9D6);color:var(--pb-accent-text,var(--wa-green-dark));border-radius:999px;padding:2px 8px;font-family:var(--font-head);font-weight:700;font-size:10.5px;margin-left:4px;vertical-align:middle}

/* ---------- pemilih tema (memakai daftar tema dashboard merchant) ---------- */
.tema-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:9px}
.tema-kartu{border:2.5px solid transparent;border-radius:14px;overflow:hidden;background:#fff;cursor:pointer;padding:0;box-shadow:0 1px 5px rgba(6,60,50,.07);text-align:left}
.tema-kartu .pratinjau{height:46px;background:var(--pb-grad);display:flex;align-items:center;justify-content:center;gap:5px}
.tema-kartu .pratinjau i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.85)}
.tema-kartu .nama{display:flex;align-items:center;gap:5px;padding:7px 9px;font-family:var(--font-head);font-weight:700;font-size:11.4px;color:#20312C;line-height:1.2;min-height:32px}
.tema-kartu .cek{display:none;color:var(--pb-accent-text,var(--wa-green-dark))}
.tema-kartu.sel{border-color:var(--pb-accent-text,var(--wa-green-dark));box-shadow:0 4px 14px rgba(7,94,84,.16)}
.tema-kartu.sel .cek{display:inline-flex}
.tema-kartu:active{transform:scale(.97)}

/* ============ DESKTOP (≥900px) ============ */
@media (min-width:900px){
  .pb-head-in,.pb-wrap{width:min(820px,100% - 48px)}
  .tema-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:11px}
  .sheet{width:min(560px,100% - 48px)}
}