/**
 * assets/css/main.css
 * Styling frontend tema SayurKu — palet & komponen mengikuti mockup yang sudah disetujui
 * (gaya Astro/astronauts.id): merah #FF4438 sbg warna utama, hijau utk aksen segar/WA,
 * kartu rounded, kategori bentuk lingkaran. Layout dibuat mobile-first, dibatasi max-width
 * di layar besar supaya tetap terasa seperti aplikasi (bukan website lebar biasa).
 */

:root{
	--red:#FF4438;
	--red-dark:#E8362B;
	--red-tint:#FFF0EF;
	--green:#2E7D46;
	--green-tint:#EAF6ED;
	--ink:#181818;
	--ink-soft:#6B6B6F;
	--line:#EDEDEF;
	--bg:#F6F6F7;
	--card:#FFFFFF;
	--radius:16px;
}
*{box-sizing:border-box;}
body{
	margin:0;
	font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
	background:var(--bg);
	color:var(--ink);
}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans','Inter',sans-serif;}
a{color:inherit;}
button{font-family:inherit;cursor:pointer;}
img{max-width:100%;display:block;}

.app-shell{max-width:480px;margin:0 auto;background:var(--bg);min-height:100vh;position:relative;}

/* ================= Topbar ================= */
.topbar{background:var(--red);color:#fff;padding:14px 16px 18px;position:sticky;top:0;z-index:10;}
.topbar--dark{background:var(--ink);padding-bottom:14px;}
.topbar-row{display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:8px;}
.brand .mark{width:30px;height:30px;border-radius:9px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;overflow:hidden;}
.brand .mark--logo img{width:100%;height:100%;object-fit:cover;}
.brand span{font-weight:800;font-size:17px;letter-spacing:-0.02em;}
.back-link{color:#fff;text-decoration:none;font-weight:700;font-size:15px;}

.status-row{display:flex;align-items:center;gap:10px;}
.status-pill{display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.2);padding:4px 9px;border-radius:999px;font-size:11px;font-weight:700;}
.status-pill .dot{width:7px;height:7px;border-radius:50%;background:#3FD16A;box-shadow:0 0 0 3px rgba(63,209,106,.3);}
.status-pill.closed .dot{background:#FFD24A;box-shadow:0 0 0 3px rgba(255,210,74,.3);}
.status-pill.closed{background:rgba(0,0,0,.22);}

.icon-btn{width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:16px;position:relative;text-decoration:none;color:#fff;}
.cart-dot{position:absolute;top:-4px;right:-4px;background:var(--ink);color:#fff;font-size:9px;font-weight:700;border-radius:8px;padding:1px 5px;}

.search{margin-top:14px;background:#fff;border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:8px;color:var(--ink-soft);font-size:13px;}

/* ================= Banner Tutup ================= */
.closed-banner{margin:12px 16px 0;background:#2A2A2E;color:#fff;border-radius:13px;padding:11px 13px;display:flex;align-items:center;gap:10px;}
.closed-banner .ic{font-size:20px;flex-shrink:0;}
.closed-banner p{margin:0;font-size:11.5px;line-height:1.4;}
.closed-banner b{display:block;font-size:12.5px;font-family:'Plus Jakarta Sans';}

body.toko-tutup .add-btn,
body.toko-tutup .stepper{opacity:.4;pointer-events:none;}

/* ================= Hero Slider ================= */
.hero-wrap{padding:14px 16px 4px;}
.hero-slider{position:relative;border-radius:18px;overflow:hidden;height:150px;box-shadow:0 4px 14px rgba(0,0,0,.12);background:var(--red);}
.hero-slide{position:absolute;inset:0;display:none;flex-direction:column;justify-content:flex-end;padding:16px;color:#fff;text-decoration:none;}
.hero-slide.active{display:flex;}
.hero-slide .tag{align-self:flex-start;background:rgba(255,255,255,.22);font-size:10px;font-weight:700;padding:3px 8px;border-radius:7px;margin-bottom:6px;}
.hero-slide h4{margin:0 0 3px;font-size:17px;font-weight:800;letter-spacing:-0.01em;}
.hero-slide p{margin:0;font-size:12px;opacity:.9;}
.hero-dots{position:absolute;bottom:9px;right:12px;display:flex;gap:4px;}
.hero-dots span{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.5);}
.hero-dots span.active{background:#fff;width:14px;border-radius:3px;}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.25);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;border:none;z-index:2;}
.hero-arrow.prev{left:8px;} .hero-arrow.next{right:8px;}

/* ================= Kategori ================= */
.cat-scroll{display:flex;gap:14px;padding:16px 16px 4px;overflow-x:auto;}
.cat-item{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;width:58px;cursor:pointer;}
.cat-circ{width:52px;height:52px;border-radius:16px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 1px 3px rgba(0,0,0,.08);border:2px solid transparent;}
.cat-item.active .cat-circ{border-color:var(--red);background:var(--red-tint);}
.cat-item span{font-size:10.5px;text-align:center;font-weight:600;line-height:1.2;}

.section-label{padding:16px 16px 8px;display:flex;align-items:center;justify-content:space-between;}
.section-label h3{font-size:14.5px;margin:0;}

/* ================= Grid Produk ================= */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px 90px;}
.pcard{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.07);cursor:pointer;}
.pcard--habis{opacity:.6;}
.pcard .img{height:100px;background:var(--green-tint);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.pcard .img img{width:100%;height:100%;object-fit:cover;}
.img-fallback{font-size:34px;}
.disc-tag{position:absolute;top:6px;left:6px;background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:7px;}
.habis-tag{position:absolute;inset:0;background:rgba(0,0,0,.45);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.pcard .info{padding:10px 10px 12px;}
.pcard .name{font-size:12.5px;font-weight:600;margin:0 0 2px;line-height:1.3;}
.pcard .unit{font-size:10.5px;color:var(--ink-soft);margin:0 0 6px;}
.pcard .price-row{display:flex;align-items:center;justify-content:space-between;}
.pcard .price{font-weight:800;font-size:13.5px;}
.add-btn{background:var(--red);color:#fff;border:none;border-radius:8px;width:100%;padding:7px 0;font-weight:700;font-size:11.5px;font-family:'Plus Jakarta Sans';}
.add-btn:disabled{background:#c9c9cc;}
.empty-state{padding:40px 16px;text-align:center;color:var(--ink-soft);font-size:13px;grid-column:1/-1;}
.empty-state a{color:var(--red);font-weight:700;text-decoration:none;}

/* ================= Floating Cart Bar ================= */
.floatbar{position:fixed;bottom:12px;left:12px;right:12px;max-width:456px;margin:0 auto;background:var(--ink);color:#fff;border-radius:14px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:15;}
.floatbar .l{font-size:11px;color:#C9C9CC;}
.floatbar .total{font-weight:800;font-size:14.5px;}
.floatbar .r{background:var(--red);padding:8px 14px;border-radius:10px;font-size:12px;font-weight:700;text-decoration:none;color:#fff;}

/* ================= Modal Detail Produk ================= */
.pd-modal{position:fixed;inset:0;background:rgba(15,15,17,.55);display:none;align-items:flex-end;justify-content:center;z-index:50;}
.pd-modal.open{display:flex;}
.pd-sheet{background:#fff;width:100%;max-width:480px;max-height:90vh;border-radius:22px 22px 0 0;overflow-y:auto;position:relative;}
.pd-close{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;font-size:14px;z-index:2;box-shadow:0 1px 4px rgba(0,0,0,.15);}
.pd-carousel{position:relative;height:220px;background:var(--green-tint);}
.pd-slide{position:absolute;inset:0;display:none;background-size:cover;background-position:center;align-items:center;justify-content:center;font-size:64px;}
.pd-slide.active{display:flex;}
.pd-dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:5px;}
.pd-dots span{width:5px;height:5px;border-radius:50%;background:rgba(0,0,0,.2);}
.pd-dots span.active{background:var(--red);width:14px;border-radius:3px;}
.pd-arrow{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 1px 4px rgba(0,0,0,.12);border:none;}
.pd-arrow.prev{left:10px;} .pd-arrow.next{right:10px;}

.pd-body{padding:18px;}
.pd-body h3{margin:0 0 2px;font-size:18px;}
.pd-unit{font-size:12px;color:var(--ink-soft);margin:0 0 10px;}
.pd-price-row{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.pd-price{font-weight:800;font-size:20px;}
.pd-price-old{font-size:13px;color:#a7aaad;text-decoration:line-through;}
.pd-desc-label{font-size:12px;font-weight:700;margin:0 0 6px;}
.pd-desc{font-size:12.5px;color:#4b4b50;line-height:1.6;margin:0 0 16px;}
.pd-varian-wrap{margin-bottom:16px;}
.pd-varian-list{display:flex;flex-wrap:wrap;gap:8px;}
.pd-varian-chip{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:8px 12px;font-size:12px;font-weight:600;display:flex;flex-direction:column;gap:2px;}
.pd-varian-chip span{font-size:11px;color:var(--ink-soft);font-weight:700;}
.pd-varian-chip.active{border-color:var(--red);background:var(--red-tint);}
.pd-varian-chip.habis{opacity:.4;text-decoration:line-through;}
.pd-qty-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.pd-qty-row span{font-size:12.5px;font-weight:700;}
.pd-stepper{display:flex;align-items:center;gap:10px;background:var(--red-tint);border-radius:10px;padding:4px 6px;}
.pd-stepper button{width:26px;height:26px;border-radius:8px;border:none;background:var(--red);color:#fff;font-size:15px;font-weight:700;}
.pd-stepper .n{width:22px;text-align:center;font-weight:700;font-size:13px;}
.pd-add-btn{width:100%;background:var(--red);color:#fff;border:none;border-radius:13px;padding:13px;font-weight:700;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:6px;}
.pd-add-btn:disabled{background:#c9c9cc;}
.pd-stok-warn{color:var(--red-dark);font-size:11.5px;font-weight:700;text-align:center;margin-top:8px;}

/* ================= Halaman Keranjang ================= */
.ck-header{padding:16px;}
.ck-header h3{margin:0 0 2px;font-size:16px;}
.ck-header p{margin:0;font-size:12px;color:var(--ink-soft);}

.cart-line{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:10px;margin:0 16px 10px;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.cart-line .thumb{width:44px;height:44px;border-radius:10px;background:var(--green-tint);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.cart-line .mid{flex:1;}
.cart-line .mid p{margin:0;font-size:12.5px;font-weight:600;}
.cart-line .mid span{font-size:11px;color:var(--ink-soft);}
.stepper{display:flex;align-items:center;gap:0;background:var(--red);border-radius:8px;overflow:hidden;}
.stepper button{width:26px;height:26px;border:none;background:transparent;color:#fff;font-size:14px;font-weight:700;}
.stepper .qty{width:22px;text-align:center;color:#fff;font-size:12px;font-weight:700;}
.stepper--light{background:var(--red-tint);}
.stepper--light button{color:var(--red);}
.stepper--light .qty{color:var(--ink);}

.note-box{margin:4px 16px 14px;background:#fff;border-radius:13px;padding:11px 12px;box-shadow:0 1px 3px rgba(0,0,0,.05);}
.note-box label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;margin-bottom:6px;}
.note-box textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-family:inherit;font-size:12px;color:var(--ink);resize:none;height:52px;background:#FBFBFC;}
.note-box .hint{font-size:10px;color:#A8A8AC;margin-top:4px;}

.summary{margin:4px 16px 14px;background:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.sum-row{display:flex;justify-content:space-between;font-size:12.5px;padding:4px 0;color:var(--ink-soft);}
.sum-row.total{color:var(--ink);font-weight:800;font-size:14.5px;border-top:1px dashed var(--line);margin-top:6px;padding-top:9px;}

.wa-btn{width:calc(100% - 32px);margin:0 16px 16px;background:var(--green);color:#fff;border:none;border-radius:13px;padding:13px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:13.5px;box-shadow:0 6px 16px rgba(46,125,70,.3);}
.wa-btn--dark{background:var(--ink);box-shadow:none;}
.wa-btn:disabled{background:#c9c9cc;box-shadow:none;}

/* ================= Halaman Checkout ================= */
.map-box{margin:4px 16px 4px;border-radius:16px;overflow:hidden;height:180px;position:relative;background:#EFEFF1;}
.checkout-map{width:100%;height:100%;}
.map-box .locbtn{position:absolute;top:8px;right:8px;background:#fff;width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 1px 4px rgba(0,0,0,.12);z-index:400;cursor:pointer;}
.map-box .chip{position:absolute;bottom:8px;left:8px;right:8px;background:#fff;border-radius:10px;padding:7px 10px;font-size:11px;font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.12);z-index:400;}
.area-warn{margin:4px 16px 10px;color:var(--red-dark);font-size:11.5px;font-weight:700;}

.field{margin:10px 16px;background:#fff;border-radius:12px;padding:10px 12px;box-shadow:0 1px 3px rgba(0,0,0,.05);}
.field label{display:block;font-size:10.5px;color:var(--ink-soft);font-weight:600;margin-bottom:4px;}
.field-input{width:100%;border:none;font-size:13px;font-weight:600;font-family:inherit;padding:0;background:transparent;}
.field-input:focus{outline:none;}

.pay-section{margin:14px 16px;}
.pay-section > label{font-size:12.5px;font-weight:700;display:block;margin-bottom:8px;}
.pay-opt{display:flex;align-items:center;gap:10px;background:#fff;border-radius:13px;padding:11px 12px;margin-bottom:8px;box-shadow:0 1px 3px rgba(0,0,0,.05);border:1.5px solid transparent;cursor:pointer;}
.pay-opt.selected{border-color:var(--red);background:var(--red-tint);}
.pay-opt .pic{width:34px;height:34px;border-radius:9px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.pay-opt .txt{flex:1;}
.pay-opt .txt b{display:block;font-size:12.5px;}
.pay-opt .txt span{font-size:10.5px;color:var(--ink-soft);}
.pay-opt .radio{width:17px;height:17px;border-radius:50%;border:2px solid #D8D8DB;flex-shrink:0;position:relative;}
.pay-opt.selected .radio{border-color:var(--red);}
.pay-opt.selected .radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--red);}

/* Popup QRIS */
.qris-modal{position:fixed;inset:0;background:rgba(15,15,17,.55);display:none;align-items:center;justify-content:center;z-index:50;padding:20px;}
.qris-modal.open{display:flex;}
.qris-card{background:#fff;border-radius:20px;padding:20px;width:100%;max-width:300px;text-align:center;position:relative;}
.qris-card .close{position:absolute;top:10px;right:12px;font-size:16px;color:var(--ink-soft);cursor:pointer;}
.qris-card h4{margin:2px 0 2px;font-size:15px;}
.qris-card .amt{font-weight:800;font-size:18px;color:var(--red);margin-bottom:12px;}
.qris-code{width:180px;margin:0 auto 12px;}
.qris-code img{width:100%;border-radius:10px;border:1px solid var(--line);}
.qris-card p{font-size:11px;color:var(--ink-soft);margin:0 0 14px;line-height:1.5;}
.qris-card .done-btn{width:100%;background:var(--green);color:#fff;border:none;border-radius:11px;padding:11px;font-weight:700;font-size:12.5px;}

/* ================= Responsif kecil ================= */
@media (max-width:360px){
	.grid{grid-template-columns:1fr 1fr;gap:8px;}
}