/* (c) 2026 Pemilik repository. Semua hak dilindungi. Lihat berkas LICENSE di folder utama. */
/* ponsel.css - Tampilan HP ala aplikasi belanja: bilah tab bawah, kartu menu 2 kolom, bilah aksi melekat di bawah.
   Semua aturan layar kecil ada di dalam @media, jadi tampilan laptop tidak berubah.
   Untuk mematikan tampilan HP ini, hapus tautan css/ponsel.css di index.html. */

/* elemen khusus HP: disembunyikan di laptop */
.tabbar,.m-only,.m-cart,.m-cari,.tabspacer,.aksispacer{display:none}
/* tautan bantu mode demo: hanya tampil di HP */
.demo-admin,.side a.ke-toko{display:none}
.aksi-bawah{display:grid;gap:18px}
.pcard[hidden]{display:none!important}
#app{overflow-x:clip}

@media (max-width:720px){
  body{font-size:15px}
  .wrap{padding:0 14px}
  main h1[style]{font-size:28px!important}
  .card{padding:16px;border-radius:18px}

  /* header ringkas */
  .top .wrap{flex-wrap:nowrap;justify-content:space-between;gap:8px;padding-top:8px;padding-bottom:8px}
  .hd-desk{display:none!important}
  .logo{font-size:22px}
  .logo span.mark{width:34px;height:34px;border-radius:11px}
  .m-cart{display:inline-flex;position:relative;width:42px;height:42px;align-items:center;justify-content:center;border-radius:14px;background:var(--pinksoft);color:var(--ink);text-decoration:none}
  .m-cart svg{width:22px;height:22px}
  .m-cart .count{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;font-size:11px}

  /* bilah tab bawah */
  .tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(59,37,48,.06);padding:4px 2px calc(4px + env(safe-area-inset-bottom,0px))}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:50px;position:relative;font-size:11px;font-weight:800;color:var(--muted);text-decoration:none;background:none;border:0;cursor:pointer;padding:4px 0;border-radius:12px}
  .tabbar svg{width:24px;height:24px}
  .tabbar [aria-current="page"]{color:var(--primary)}
  .tabbar [aria-current="page"] svg{stroke-width:2.4}
  .tabbar .count{position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 4px;font-size:10px}
  .tabspacer{display:block;height:calc(66px + env(safe-area-inset-bottom,0px))}
  .toast{left:14px;right:14px;transform:none;max-width:none;text-align:center;bottom:calc(150px + env(safe-area-inset-bottom,0px))}
  .switch{display:none}
  .demo-admin{display:block;text-align:center;font-weight:800;padding:6px 0}

  /* beranda */
  .hero-panel{border-radius:26px;margin:12px 0 4px;padding:20px 16px 18px}
  .hero-panel .hero{gap:14px}
  .hero-panel .hero h1{font-size:30px;line-height:1.08}
  .hero p{font-size:15px}
  .hero-kue{display:none}
  .hero .badge{font-size:12px!important;padding:5px 12px!important}
  .hero .row>.btn{flex:1 1 auto;white-space:nowrap;padding:0 16px;font-size:14px}
  .hero-panel .po{padding:14px;border-radius:20px;gap:8px}
  .hero-panel .po h2{font-size:19px!important}
  .hero-panel .po .slot{padding:8px 12px}
  .panel{padding:14px 12px!important;border-radius:22px!important;margin:14px 0!important}
  #menu{gap:12px!important}
  #menu .judul{font-size:24px}
  .m-cari{display:block}
  .m-cari .inp{border-radius:999px;padding-left:18px;min-height:44px;background:var(--bg)}
  #menu .row.between{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:10px}
  #menu .row.between>.row{flex-wrap:nowrap;overflow-x:auto;gap:8px;margin:0 -12px;padding:0 12px 4px;scrollbar-width:none}
  #menu .row.between>.row::-webkit-scrollbar{display:none}
  .chip{min-height:38px;padding:0 14px;flex:0 0 auto;white-space:nowrap}
  .menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pcard{padding:8px;gap:6px;border-radius:16px}
  .pcard .ph{height:auto!important;aspect-ratio:1/1;border-radius:12px}
  .pcard h3{font-size:15px!important;line-height:1.25;min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .pcard>.muted,.pcard .btn{display:none}
  .pcard .row{gap:4px!important}
  .pcard .badge{font-size:10px;padding:2px 8px}
  .pcard .row.between b{font-size:14px!important;color:var(--primary)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .step{padding:14px;border-radius:18px}
  .step b.n{font-size:24px}
  .step div{font-size:13px!important}
  .footer-grid{grid-template-columns:1fr;gap:18px}

  /* detail menu */
  .kembali{padding:10px 0!important}
  .two{gap:14px}
  .two h1{font-size:26px!important;margin-top:6px!important}
  .two>.grid>.ph:only-child{height:auto!important;aspect-ratio:1/1;border-radius:0 0 24px 24px;margin:0 -14px;width:calc(100% + 28px)}
  div[style*="min-width:200px"]{min-width:0!important;flex:1 1 140px!important}

  /* bilah aksi melekat di bawah (detail menu, keranjang, checkout) */
  .aksi-bawah{position:fixed;left:0;right:0;bottom:0;z-index:35;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(59,37,48,.08);padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));gap:8px}
  .aksi-bawah .m-only{display:flex;font-size:17px}
  .aksi-bawah .btn{width:100%;min-height:48px!important}
  .aksi-bawah .err{margin:0}
  .aksi-info{flex-wrap:nowrap!important;align-items:center}
  .aksi-info .lbl{display:none}
  .aksi-info .subtotal{font-size:22px!important}
  .aksi-info .muted{font-size:12px!important}
  .aksispacer{display:block;height:calc(130px + env(safe-area-inset-bottom,0px))}
}

/* admin di HP dan tablet kecil */
@media (max-width:820px){
  .adm{display:block}
  .side{position:sticky;top:env(safe-area-inset-top,0px);z-index:25;flex-direction:row;align-items:center;overflow-x:auto;max-width:none;padding:8px 10px;gap:6px;border-right:0;border-bottom:1px solid var(--line);scrollbar-width:none}
  .side::-webkit-scrollbar{display:none}
  .side>div:first-child{margin:0 8px 0 0!important;flex:0 0 auto}
  .side>div:first-child .muted{display:none}
  .side .logo{font-size:20px!important}
  .side a{flex:0 0 auto;white-space:nowrap;min-height:38px;padding:0 12px;gap:8px}
  .side .who{margin:0 0 0 8px;border:0;padding:0;flex:0 0 auto;white-space:nowrap;font-size:12px}
  .side .who .row{margin-top:4px!important;flex-wrap:nowrap}
  .side a.ke-toko{display:flex;color:var(--primary)}
  .two[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  .amain{padding:14px 12px;gap:14px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tbl.kartu{min-width:0}
  .tbl.kartu thead{display:none}
  .tbl.kartu,.tbl.kartu tbody,.tbl.kartu tr,.tbl.kartu td{display:block}
  .tbl.kartu tr{padding:12px 14px;border-bottom:1px solid var(--line)}
  .tbl.kartu td{padding:2px 0;border:0;white-space:normal}
  .tbl.kartu td:first-child{font-weight:800}
  .cal{display:block;min-width:0}
  .cal .col{border-right:0;border-bottom:1px solid var(--line);min-height:0}
}