/* ======================================================================
 * alibaba-theme.css — Tampilan ala Alibaba.com (HP & komputer)
 * HANYA tampilan: tidak mengubah data, Supabase, maupun logika aplikasi.
 * Dimuat paling akhir di index.html (portal pengguna). Hapus <link>-nya
 * untuk kembali ke tampilan lama.
 * Warna brand memakai variabel --b500 dst. → tetap bisa diubah dari Admin.
 * ====================================================================== */

:root{
  /* oranye khas Alibaba (#ff6a00) — admin masih bisa menimpa lewat pengaturan */
  --b50:255 244 235; --b100:255 228 204; --b500:255 106 0; --b600:230 94 0; --b700:200 80 0; --b800:158 62 0;
  --page-bg:#f4f4f4;
  --radius:10px;
  --shadow:0 0 0 rgba(0,0,0,0);
  --shadow-hover:0 6px 18px rgba(0,0,0,.12);
  --ali-ink:#222;
  --ali-mute:#767676;
  --ali-line:#e8e8e8;
  --ali-or:rgb(var(--b500));
}
html,body{background:var(--page-bg)}
body{color:var(--ali-ink);-webkit-font-smoothing:antialiased}

/* ---------- Pengumuman atas: tipis & rapi ---------- */
body:not(.admin-mode) #announcement-bar{font-size:12px;line-height:1.3;padding-top:5px;padding-bottom:5px}

/* ---------- Header ---------- */
body header.sticky{background:#fff!important;border-bottom:1px solid var(--ali-line)!important;box-shadow:none!important}
body header #site-name{font-weight:800!important;letter-spacing:-.02em;color:var(--ali-or)!important}
body header #site-tagline{display:none!important}
body header #site-logo-container{border-radius:10px!important;background:var(--ali-or)!important;box-shadow:none!important}

/* kolom pencarian */
body header #global-search-input{
  background:#f5f5f5!important;border:1px solid transparent!important;border-radius:999px!important;
  color:var(--ali-ink);font-size:14px!important;padding-top:9px!important;padding-bottom:9px!important;
}
body header #global-search-input::placeholder{color:#9a9a9a}
body header #global-search-input:focus{background:#fff!important;border-color:var(--ali-or)!important;box-shadow:0 0 0 3px rgb(var(--b500) / .12)!important}
body header button[onclick="triggerSearch()"]{border-radius:999px!important;font-weight:700!important;background:var(--ali-or)!important}
body header button[onclick="triggerSearch()"]:hover{background:rgb(var(--b600))!important}

/* HP: tombol cari = lingkaran gelap berikon kaca pembesar (seperti Alibaba) */
@media (max-width:767px){
  body header .min-h-\[4rem\]{min-height:56px!important}
  body header #site-name{font-size:17px!important}
  body header #site-logo-container{width:32px!important;height:32px!important;font-size:16px!important}
  body header button[onclick="triggerSearch()"]{
    font-size:0!important;width:34px;height:34px;top:50%!important;bottom:auto!important;right:3px!important;
    transform:translateY(-50%);padding:0!important;background:#222!important;display:flex;align-items:center;justify-content:center;gap:0!important;
  }
  body header button[onclick="triggerSearch()"]::before{
    content:"\f002";font-family:"Font Awesome 6 Free";font-weight:900;font-size:14px;color:#fff;
  }
  body header #global-search-input{padding-right:46px!important;padding-top:8px!important;padding-bottom:8px!important}
}

/* Komputer: pencarian besar berbingkai oranye */
@media (min-width:768px){
  body header .min-h-\[4rem\]{min-height:72px!important}
  body header #global-search-input{
    background:#fff!important;border:2px solid var(--ali-or)!important;padding-top:11px!important;padding-bottom:11px!important;font-size:14px!important;
  }
  body header button[onclick="triggerSearch()"]{top:3px!important;bottom:3px!important;right:3px!important;padding-left:26px!important;padding-right:26px!important;font-size:14px!important}
  body header #site-name{font-size:24px!important}
  body header #site-logo-container{width:42px!important;height:42px!important}
  body header #nav-btn-safety{background:#fff!important;border-color:var(--ali-line)!important;color:var(--ali-ink)!important;border-radius:999px!important}
  body header #nav-btn-safety:hover{border-color:var(--ali-or)!important;color:var(--ali-or)!important}
  body header #nav-btn-store{border-radius:999px!important;border-color:var(--ali-or)!important;color:var(--ali-or)!important;background:#fff!important}
  body header #nav-btn-store:hover{background:var(--ali-or)!important;color:#fff!important}
  body header #nav-auth-group button{border-radius:999px!important}
}

/* ---------- Baris tab & chip kategori (disisipkan oleh alibaba-theme.js) ---------- */
.ali-top{margin:-24px 0 0;background:#fff}
@media (min-width:640px){.ali-top{margin:-24px 0 0}}
@media (min-width:1024px){.ali-top{margin:0 0 12px;border-radius:12px;overflow:hidden;border:1px solid var(--ali-line)}}
.ali-tabs{display:flex;gap:28px;padding:0 16px;border-bottom:1px solid var(--ali-line);overflow-x:auto;scrollbar-width:none}
.ali-tabs::-webkit-scrollbar,.ali-chips::-webkit-scrollbar,.ali-quick::-webkit-scrollbar{display:none}
.ali-tab{position:relative;flex:0 0 auto;padding:14px 0 12px;font-size:17px;font-weight:500;color:#444;background:none;border:0;cursor:pointer;white-space:nowrap}
.ali-tab.on{font-weight:800;color:#111}
.ali-tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px;background:#111}
.ali-chips{display:flex;gap:22px;padding:0 16px;overflow-x:auto;scrollbar-width:none;background:#fafafa;border-bottom:1px solid var(--ali-line)}
.ali-chip{position:relative;flex:0 0 auto;padding:12px 0 10px;font-size:14px;color:#555;background:none;border:0;cursor:pointer;white-space:nowrap}
.ali-chip.on{font-weight:800;color:#111}
.ali-chip.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;background:#111}
.ali-chip:hover{color:var(--ali-or)}
.ali-quick{display:flex;gap:10px;padding:12px 16px;overflow-x:auto;scrollbar-width:none;background:#fff}
.ali-qcard{flex:1 0 auto;min-width:150px;display:flex;align-items:center;gap:10px;padding:10px 12px;border:0;border-radius:10px;background:#f7f7f7;text-align:left;cursor:pointer;color:var(--ali-ink);transition:background .2s,transform .2s}
.ali-qcard:hover{background:#f0f0f0}
.ali-qcard:active{transform:scale(.98)}
.ali-qcard .qi{flex:0 0 auto;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px}
.ali-qcard .qt{font-size:13px;font-weight:700;line-height:1.2}
.ali-qcard .qs{font-size:11px;color:var(--ali-mute);line-height:1.2;margin-top:2px}
@media (min-width:768px){.ali-quick{padding:14px 16px}.ali-qcard{flex:1 1 0}}

/* ---------- Konten utama ---------- */
body #app-viewport{padding-top:24px}
@media (max-width:767px){body #app-viewport{padding-left:0;padding-right:0;padding-top:24px}
  body #app-viewport > section,body #app-viewport > .ph-root,body #app-viewport > div:not(.ali-top){margin-left:0}
}

/* Bagian-bagian: kartu putih di atas latar abu-abu muda, tanpa bayangan */
body #app-viewport .ph-sec,
body #app-viewport .ph-fl{border:0!important;border-radius:12px!important;box-shadow:none!important}
body #app-viewport .ph-sec-h{font-size:17px;font-weight:800;color:#111}
body #app-viewport section.bg-white{border:0!important;border-radius:12px!important;box-shadow:none!important}
@media (max-width:767px){
  body #app-viewport .ph-root,body #app-viewport section{margin-left:0;margin-right:0}
  body #app-viewport .ph-sec,body #app-viewport .ph-fl,body #app-viewport section.bg-white{border-radius:0!important}
  body #app-viewport .ph-main,body #app-viewport .ph-sideitem,body #app-viewport .ph-pi{border-radius:10px!important}
}

/* Banner: sudut halus */
.ph-main,.ph-sideitem,.ph-pi{border-radius:12px}
.ph-dots i.on{background:#fff}
.ph-btn{border-radius:999px!important;background:var(--ali-or)!important;color:#fff!important;box-shadow:none!important}
.ph-badge{color:var(--ali-or)!important}

/* Menu ikon cepat: ikon bulat lembut, teks gelap */
.ph-mi .ic{border-radius:50%!important}
.ph-mi span.lb{color:#333;font-weight:500}

/* Voucher: gaya kupon bersih */
.ph-vc{border:1px solid var(--ali-line)!important;border-radius:10px!important}

/* Flash sale: kepala oranye, kartu minimalis */
.ph-fl{background:#fff}
.ph-fi{border:0!important;border-radius:10px!important;background:#fff}
.ph-fi .pr{color:#111!important}
.ph-fi .sb i{background:var(--ali-or)!important}

/* Judul bagian + kategori */
body #app-viewport h3.text-base,body #app-viewport h3.text-lg{color:#111;font-weight:800}
body #app-viewport h3.text-lg.font-extrabold{font-size:18px}
@media (max-width:767px){
  body #app-viewport section > .flex.justify-between,body #app-viewport section > .flex.flex-col{padding-left:12px;padding-right:12px}
  body #app-viewport section .cat-grid{padding-left:8px;padding-right:8px}
  body #app-viewport section.bg-white{padding:12px}
}

/* ---------- Kartu produk (gaya Alibaba) ---------- */
body #app-viewport .group.rounded-2xl,
body #app-viewport .group.bg-white{border:0!important;border-radius:10px!important;box-shadow:none!important;background:#fff}
body #app-viewport .group:hover{box-shadow:var(--shadow-hover)!important}
body #app-viewport .group .aspect-square{border-radius:0!important;background:#f5f5f5}
body #app-viewport .group h4{color:#222!important;font-weight:400!important;font-size:13px!important;line-height:1.35}
body #app-viewport .group:hover h4{color:var(--ali-or)!important}
body #app-viewport .group .font-extrabold{color:#111!important;font-weight:800!important;font-size:17px!important;letter-spacing:-.01em}
body #app-viewport .group .border-t{border-top:0!important;margin-top:8px!important;padding-top:0!important}
body #app-viewport .group .text-slate-500,body #app-viewport .group .text-slate-400{color:var(--ali-mute)!important}
body #app-viewport .group .absolute.top-2.left-2{background:rgba(0,0,0,.55)!important;border-radius:4px!important;font-weight:600!important}
@media (max-width:767px){
  body #app-viewport .grid.gap-3.sm\:gap-4{gap:6px!important;padding:0 6px}
  body #app-viewport .group .font-extrabold{font-size:15px!important}
}

/* ---------- Tombol & elemen umum ---------- */
body .bg-brand-500{background-color:var(--ali-or)}
body .rounded-xl.bg-brand-500,body button.bg-brand-500{border-radius:999px}
body .shadow-md,body .shadow-lg{box-shadow:none!important}

/* ---------- Menu bawah HP ---------- */
@media (max-width:767px){
  body #bottom-nav{border-top:1px solid var(--ali-line)!important;box-shadow:none!important}
  body #bottom-nav .bn{color:#222;font-weight:500;font-size:11px}
  body #bottom-nav .bn i{font-size:21px}
  body #bottom-nav .bn.on,body #bottom-nav .bn:active{color:var(--nav-active,var(--ali-or))}
}

/* ---------- Footer ---------- */
body footer{background:#fff!important;border-top:1px solid var(--ali-line)!important}

/* ---------- Jendela (modal) ---------- */
body #auth-modal > div,body #store-app-modal > div,body #safety-modal > div,body #product-detail-modal > div{border-radius:16px!important}

/* ---------- Komputer: lebar konten ala Alibaba ---------- */
@media (min-width:1024px){
  body #app-viewport{padding-top:16px}
  body #app-viewport .grid.lg\:grid-cols-5{gap:14px!important}
}

/* ======================================================================
 * PORTAL ADMIN — selaras dengan portal pengguna (hanya tampilan)
 * ====================================================================== */
body.admin-mode{background:#f4f4f4!important}
body.admin-mode #admin-bar{background:#fff!important;color:#222!important;border-bottom:1px solid var(--ali-line)!important}
body.admin-mode #admin-bar .bg-brand-500{background:var(--ali-or)!important;border-radius:10px!important}
body.admin-mode #admin-bar .text-slate-400{color:var(--ali-mute)!important}
body.admin-mode #admin-bar-actions button,body.admin-mode #admin-bar-actions a{border-radius:999px!important}
body.admin-mode #admin-bar-actions [class*="bg-slate-"],body.admin-mode #admin-bar-actions [class*="bg-white/"]{background:#f5f5f5!important;color:#222!important;border-color:transparent!important}
body.admin-mode #admin-bar-actions [class*="bg-red-"],body.admin-mode #admin-bar-actions [class*="bg-brand-"]{background:var(--ali-or)!important;color:#fff!important}

/* kartu & panel: putih datar, sudut halus, tanpa bayangan */
body.admin-mode #app-viewport .bg-white{box-shadow:none!important;border-color:var(--ali-line)!important}
body.admin-mode #app-viewport .rounded-2xl,body.admin-mode #app-viewport .rounded-xl{border-radius:12px!important}
body.admin-mode #app-viewport .shadow-xl,body.admin-mode #app-viewport .shadow-2xl{box-shadow:none!important}
/* kepala panel gelap → arang netral ala Alibaba */
body.admin-mode #app-viewport .bg-slate-900{background:#222!important}
body.admin-mode #app-viewport .bg-slate-800{background:#333!important}
body.admin-mode #app-viewport .bg-slate-900 .bg-brand-500{background:var(--ali-or)!important}

/* tombol: bulat penuh; tab menu admin jadi pil bersih */
body.admin-mode #app-viewport button,body.admin-mode #app-viewport label.cursor-pointer{border-radius:999px}
body.admin-mode #app-viewport .bg-brand-500,body.admin-mode #app-viewport .bg-brand-600{background-color:var(--ali-or)!important}
body.admin-mode #app-viewport .bg-brand-500:hover,body.admin-mode #app-viewport .hover\:bg-brand-600:hover{background-color:rgb(var(--b600))!important}
body.admin-mode #app-viewport .text-brand-600{color:var(--ali-or)}

/* isian formulir */
body.admin-mode input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),body.admin-mode select,body.admin-mode textarea{border-radius:10px!important}
body.admin-mode input:focus,body.admin-mode select:focus,body.admin-mode textarea:focus{border-color:var(--ali-or)!important;box-shadow:0 0 0 3px rgb(var(--b500) / .12)!important;outline:none}

/* HP: panel admin penuh lebar */
@media (max-width:767px){
  body.admin-mode #app-viewport{padding-left:12px;padding-right:12px}
}

/* ======================================================================
 * MENU BAWAH HP / APLIKASI — persis gaya Alibaba (fungsi tombol tetap)
 * ====================================================================== */
@media (max-width:767px){
  :root{--bn-h:60px;--lb-h:50px}
  body{padding-bottom:calc(var(--bn-h) + 18px + env(safe-area-inset-bottom,0px))!important}
  body.has-login-bar{padding-bottom:calc(var(--bn-h) + var(--lb-h) + 18px + env(safe-area-inset-bottom,0px))!important}
  body #bottom-nav{height:calc(var(--bn-h) + env(safe-area-inset-bottom,0px));background:#fff!important;border-top:1px solid #ececec!important;box-shadow:none!important;z-index:45}
  body #bottom-nav .bn{gap:2px;padding:7px 2px 6px;font-size:11px;font-weight:500;color:#222;letter-spacing:0}
  body #bottom-nav .bn svg{display:block;width:26px;height:26px;flex:0 0 auto}
  body #bottom-nav .bn.on,body #bottom-nav .bn:active{color:var(--nav-active,var(--ali-or))}
  body #bottom-nav .bn.on{font-weight:600}
  body #bottom-nav .bn.bn-home.on svg{fill:currentColor}
  body #bottom-nav .bn .bn-badge{background:var(--ali-or);top:4px;left:calc(50% + 6px)}

  /* bilah login di atas menu bawah */
  #login-bar{position:fixed;left:0;right:0;bottom:calc(var(--bn-h) + env(safe-area-inset-bottom,0px));height:var(--lb-h);z-index:44;display:flex;align-items:center;gap:10px;padding:0 14px 0 12px;
    background:linear-gradient(90deg,#fff1e3 0%,#ffd7d2 100%);box-shadow:0 -1px 0 rgba(0,0,0,.04)}
  #login-bar .lb-ic{font-size:26px;color:#e8793a;flex:0 0 auto}
  #login-bar .lb-t{flex:1;min-width:0;font-size:13px;font-weight:700;color:#4a1d0f;line-height:1.2}
  #login-bar button{flex:0 0 auto;background:#d94a00;color:#fff;font-weight:700;font-size:14px;border:0;border-radius:999px;padding:9px 24px;cursor:pointer}
  #login-bar button:active{background:#b83e00}

  /* tombol melayang & toast naik agar tidak tertutup */
  body #chat-fab{bottom:calc(var(--bn-h) + 14px + env(safe-area-inset-bottom,0px))!important}
  body.has-login-bar #chat-fab{bottom:calc(var(--bn-h) + var(--lb-h) + 14px + env(safe-area-inset-bottom,0px))!important}
  body #chat-panel{bottom:calc(var(--bn-h) + 76px + env(safe-area-inset-bottom,0px))!important}
  body.has-login-bar #chat-panel{bottom:calc(var(--bn-h) + var(--lb-h) + 76px + env(safe-area-inset-bottom,0px))!important}
  body #apk-badge.p-br{bottom:calc(var(--bn-h) + 90px + env(safe-area-inset-bottom,0px))!important}
  body.has-login-bar #apk-badge.p-br{bottom:calc(var(--bn-h) + var(--lb-h) + 90px + env(safe-area-inset-bottom,0px))!important}
  body #toast-container{bottom:calc(var(--bn-h) + 12px + env(safe-area-inset-bottom,0px))!important}
  body.has-login-bar #toast-container{bottom:calc(var(--bn-h) + var(--lb-h) + 12px + env(safe-area-inset-bottom,0px))!important}
  /* footer & hak cipta selalu terlihat di atas bilah */
  body footer{padding-bottom:calc(var(--bn-h) + 88px + env(safe-area-inset-bottom,0px))!important}
  body.has-login-bar footer{padding-bottom:calc(var(--bn-h) + var(--lb-h) + 88px + env(safe-area-inset-bottom,0px))!important}
}
@media (min-width:768px){#login-bar{display:none!important}}

/* Tombol chat melayang: lebih kecil (HP) agar tidak menutupi hak cipta */
@media (max-width:767px){
  body #chat-fab{width:var(--fab-size,42px)!important;height:var(--fab-size,42px)!important;right:12px!important;box-shadow:0 2px 8px rgba(0,0,0,.2)!important}
  body #chat-fab i{font-size:calc(var(--fab-size,42px) * .42)!important}
  body #chat-fab svg{width:calc(var(--fab-size,42px) * .45)!important;height:calc(var(--fab-size,42px) * .45)!important}
  body footer{padding-bottom:calc(var(--bn-h) + 64px + env(safe-area-inset-bottom,0px))!important}
  body.has-login-bar footer{padding-bottom:calc(var(--bn-h) + var(--lb-h) + 64px + env(safe-area-inset-bottom,0px))!important}
}

/* Setelan tombol chat dari Admin (posisi, jarak bawah, tampil/sembunyi) */
@media (max-width:767px){
  body #chat-fab{bottom:calc(var(--bn-h) + 14px + var(--fab-lift,0px) + env(safe-area-inset-bottom,0px))!important}
  body.has-login-bar #chat-fab{bottom:calc(var(--bn-h) + var(--lb-h) + 14px + var(--fab-lift,0px) + env(safe-area-inset-bottom,0px))!important}
  body.fab-left #chat-fab{left:12px!important;right:auto!important}
  body.fab-left #chat-panel{left:12px!important;right:auto!important}
  body.fab-off #chat-fab{display:none!important}
}