/* style.css - Versi Lengkap Final */
html { scroll-behavior: smooth; /* Memberi jarak agar header tidak menutupi judul kategori saat di-scroll */ scroll-padding-top: 104px; }
body { overscroll-behavior-y: contain; }
:root { --primary-color: #00885a; --primary-dark: #006a46; --text-primary: #31353b; --text-secondary: #6c727c; --bg-primary: #ffffff; --bg-secondary: #f3f4f5; --border-color: #e5e7e9; --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); --star-color: #ffc400; --danger-color: #e94b3c; --border-radius: 12px; }
* { margin: 0; padding: 0; box-sizing: border-box; }
input { height: 40px; width: 19px; }
body { font-family: 'Poppins', -apple-system, sans-serif; background: var(--bg-secondary); color: var(--text-primary); line-height: 1.6; }
#app { padding-top: 104px; }
body .noscroll { overflow: hidden; }
/* Layout & Header */
.main-header { position: fixed; top: 0; left: 0; width: 100%; background: var(--bg-primary); z-index: 101; display: flex; align-items: center; gap: 0.5rem; padding: 0rem 1rem; height: 56px; }
.search-clear-btn { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #999; font-size: 3.3rem; padding: 0.25rem; line-height: 1; }
.header-icon-btn { position: relative; background: none; border: none; cursor: pointer; padding: 0.5rem 1.5rem 0.5rem 0.5rem; color: var(--text-primary); font-size: ; border-right: 0px solid black; }
.search-bar { position: sticky; display: flex; align-items: center; width: 96%; padding: 0px 12px; border: 1px solid #CCC; border-radius: 8px; background-color: #F9F9F9; margin-top: -5px; margin-bottom: -3px; }
.search-bar span.material-icons-outlined { margin-right: -4px; color: #888; }
.search-bar input { flex: 1; border: none; outline: none; background-color: transparent; font-size: 24px; padding: 0px 8px 4px 0px; }
.clear-search-btn { background: none; border: none; cursor: pointer; color: #888; margin-left: 8px; display: flex; align-items: center; }
.material-icons-outlined { font-family: 'Material Icons Outlined'; font-weight: normal; font-style: normal; font-size: 33px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; margin-right: -12px; }
.clear-search-btn .material-icons-outlined { font-size: 40px; }
.cart-count { position: absolute; top: 0; right: 0; background: var(--danger-color); color: white; border-radius: 50%; width: 27px; height: 24px; font-size: 1rem; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.header-icon-btn.pulse { animation: pulse 0.4s ease-in-out; }
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}
/* Category Scroll Bar */
.category-scroll-bar { position: fixed; top: 56px; left: 0; width: 100%; height: 61px; background: var(--bg-primary); box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 0.75rem; padding: 0 1rem 0px; overflow-x: auto; z-index: 100; /* scroll-behavior: smooth; <= Dihapus untuk mencegah konflik dengan JS */ -ms-overflow-style: none; scrollbar-width: none; }
.category-scroll-bar::-webkit-scrollbar { display: none; }
.category-btn { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 9px; padding: 0.5rem 0.3rem; font-size: 0.9rem; color: var(--text-secondary); cursor: pointer; white-space: nowrap; transition: all 0.2s ease-in-out; margin-right: 4px; }
.category-btn.active { background: var(--primary-color); color: white; font-weight: 600; border-color: var(--primary-dark); }
/* Tampilan Utama & Grid Produk */
.main-content-app { padding-top: 0; padding-left: 0; }
.category-group { background-color: white; padding-bottom: 1rem; }
.category-group-header { padding: 0rem 1rem 0.2rem; font-size: 1.2rem; font-weight: 600; color: var(--text-primary); background: white; border-bottom: 1px solid var(--border-color); }
.rating { display: flex; align-items: center; }
.main-grid-section { background: var(--bg-secondary); }
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; padding: 0.5rem 0.9rem 0.5rem 0.8rem; background-color: #E7E7E7; }
.product-card { position: relative; background: var(--bg-primary); border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; cursor: pointer; border: 1px solid #D3D3D3; margin-left: 0; padding-left: 0; }
.product-image-container { position: relative; width: 100%; }
.product-image-container::before { content: ''; display: block; padding-top: 100%; }
.product-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.product-info { padding: 0rem 0rem 0.8rem 0.35rem; line-height: 1.5; }
.product-name { font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-price { font-size: 1rem; font-weight: 700; margin-bottom: -3.5px; }
.product-meta { display: flex; align-items: center; font-size: 0.8rem; color: var(--text-secondary); }
.rating { display: flex; align-items: center; }
.rating .material-icons-outlined { font-size: 1rem; color: var(--star-color); margin-right: 0.15rem; }
.product-meta .sold::before { content: '•'; margin: 0 0.5rem; }
.rating .material-icons-outlined { font-size: 1rem; color: var(--star-color); margin-right: 0.15rem; }
.product-meta .sold::before { content: '•'; margin: 0 0.5rem; }
.in-cart-indicator { position: absolute; top: 8px; right: 8px; background-color: rgba(0, 136, 90, 0.85); backdrop-filter: blur(4px); color: white; border-radius: 50%; width: 48px; height: 45px; display: flex; align-items: center; justify-content: center; z-index: 5; border: 2px solid white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }
.in-cart-indicator .material-icons-outlined { font-size: 28px; }
/* === STYLE BARU UNTUK BEST SELLER & HOT PROMO === */
.horizontal-list-section { background: white; padding: 0rem 0 1rem; margin-bottom: 8px; border-bottom: 1px solid var(--border-color); }
.horizontal-list-section h2 { font-size: 1.2rem; font-weight: 600; padding: 0 1rem 0rem; margin-top: 19.75px; }
.product-carousel { display: flex; gap: 0.75rem; overflow-x: auto; padding: 0 1rem 0.5rem 1rem; -ms-overflow-style: none; scrollbar-width: none; }
.product-carousel::-webkit-scrollbar { display: none; }
.product-card-small { flex: 0 0 110px; width:11 0px; position: relative; background: var(--bg-primary); border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; cursor: pointer; border: 1px solid #E5E5E5; padding-bottom: 8px; margin-right: 3px; }
.product-card-small .product-image-container::before { padding-top: 100%; }
.product-card-small .product-name { font-size: 0.85rem; }
.product-card-small .product-price { font-size: 0.9rem; }
.promo-badge { position: absolute; top: 8px; left: 8px; background-color: var(--danger-color); color: white; padding: 0.2rem 0.5rem; font-size: 0.75rem; font-weight: 600; border-radius: 6px; z-index: 2; }
.promo-pricing { margin-top: 0.25rem; }
.product-price-strikethrough { font-size: 0.8rem; text-decoration: line-through; color: var(--text-secondary); }
.product-price-promo { font-size: 1rem; font-weight: 700; color: var(--danger-color); }
/* Halaman Keranjang */
.page-container-sub { display: flex; flex-direction: column; height: 100vh; padding-top: 56px; position: fixed; top: 0; left: 0; width: 100%; background: var(--bg-secondary); z-index: 200; }
.page-header { position: fixed; top: 0; left: 0; width: 100%; height: 56px; background: white; display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; border-bottom: 1px solid var(--border-color); z-index: 100; }
.page-header h1 { font-size: 1.2rem; position: absolute; left: 50%; transform: translateX(-50%); }
.back-btn { background: none; border: none; padding: 0.5rem; cursor: pointer; }
/* PERBAIKAN MARGIN BAWAH HALAMAN KERANJANG */
.page-content.cart-content { flex: 1; overflow-y: auto; padding-bottom: 2rem; /* Memberi ruang di bagian bawah */ }
.cart-footer { position: static; box-shadow: none; border-top: 1px solid var(--border-color); background: white; }
.empty-state { text-align: center; color: var(--text-secondary); padding-top: 5rem; }
.empty-state .material-icons-outlined { font-size: 5rem; }
.cart-items-list { padding: 0.5rem; }
/* PERBAIKAN TATA LETAK & ANIMASI ITEM KERANJANG */
.cart-item { display: flex; align-items: flex-start; /* Ubah ke flex-start */ gap: 1rem; background: white; padding: 0.7rem 1rem 0.4rem; border-radius: var(--border-radius); margin-bottom: 0.1rem; transition: all 0.4s ease-in-out; }
.cart-item.item-fade-out { opacity: 0; transform: translateX(100px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; border: none; }
.cart-item-image { width: 70px; height: 70px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.cart-item-details { flex: 1; cursor: pointer; }
.cart-item-name { font-weight: 600; font-size: 0.95rem; padding-left: 5px; }
.cart-item-variant-info { font-size: 0.8rem; color: var(--text-secondary); }
.cart-item-price { font-weight: 600; margin-top: -0.25rem; margin-left: 6px; }
.cart-item-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; }
.quantity-control { display: flex; align-items: center; gap: 0.5rem; margin-right: 8px; }
.quantity-control button { width: 39px; height: 40px; border: 1px solid var(--border-color); background: #EAEAEA; border-radius: 50%; cursor: pointer; font-size: 1.2rem; }
.quantity-control span { font-weight: 600; padding-left: 5.5px; padding-right: 10.5px; }
.cart-item-delete-btn { background: none; border: none; color: var(--danger-color); cursor: pointer; padding: 0.65rem 0.25rem 0rem; }
.voucher-section { padding: 0.5rem 1rem; border-bottom: 8px solid var(--bg-secondary); }
.voucher-section button { width: 100%; background: none; border: none; display: flex; align-items: center; padding: 0.75rem 0; cursor: pointer; }
.voucher-section button span:first-child { color: var(--primary-color); margin-right: 0.5rem; }
.voucher-section button span:nth-child(2) { flex: 1; text-align: left; }
.applied-voucher-info { display: flex; align-items: center; gap: 0.5rem; color: var(--primary-color); font-size: 0.85rem; padding-bottom: 0.5rem; }
.checkout-summary { padding: 1rem; }
.total-breakdown { margin-bottom: 1rem; }
.price-row { display: flex; justify-content: space-between; margin-bottom: 0.25rem; }
.price-row.discount { color: var(--primary-color); }
.payment-section { margin-top: 1rem; }
.payment-section h4 { margin-top: 0; margin-bottom: 1rem; font-weight: 600; }
.payment-options { display: flex; flex-direction: column; gap: 0.75rem; }
.payment-option { display: flex; align-items: center; gap: 1rem; padding: 0rem 0.75rem; border: 1px solid #EEE; border-radius: 8px; cursor: pointer; }
.payment-option input[type="radio"] { accent-color: var(--primary-color); }
.payment-option img { width: 40px; height: auto; }
.checkout-action { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; }
.final-total .label { font-size: 0.9rem; color: var(--text-secondary); }
.final-total .amount { font-size: 1.3rem; font-weight: 700; display: block; }
.checkout-btn { padding: 1rem 2rem; background: var(--primary-color); color: white; border: none; border-radius: 8px; font-weight: 600; font-size: 1rem; }
.checkout-btn:disabled { background: #CCC; cursor: not-allowed; }
/* Semua Modal (Detail, Voucher, Notifikasi) */
.modal-fade-enter-active, .modal-fade-leave-active { transition: opacity 0.3s ease; }
.modal-fade-enter-from, .modal-fade-leave-to { opacity: 0; }
.modal-fade-enter-active .product-detail-modal, .modal-fade-leave-active .product-detail-modal { transition: transform 0.3s ease-out; }
.modal-fade-enter-from .product-detail-modal, .modal-fade-leave-to .product-detail-modal { transform: scale(0.95) translateY(20px); }
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1001; }
.product-detail-modal { background: white; border-radius: 12px; width: 90%; max-width: 500px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; position: relative; height: 200%; }
.detail-image { width: 100%; height: 250px; object-fit: cover; }
.detail-info { padding: 1rem 0rem 1rem 1.1rem; overflow-y: auto; flex: 1; }
.detail-footer { padding: 1rem 0.6rem 1rem 0.5rem; border-top: 1px solid #E5E7E9; display: flex; justify-content: space-between; align-items: center; background: white; }
.detail-price-stock { display: grid; }
.option-btn { padding: 0.5rem 1rem; border: 1px solid var(--border-color); border-radius: 8px; cursor: pointer; text-align: center; }
.detail-add-to-cart-btn { background: var(--primary-color); color: white; border: none; padding: 0.8rem 0.4rem; border-radius: 8px; font-weight: 600; cursor: pointer; }
.detail-close-btn { position: absolute; top: 10px; right: 10px; background: rgba(0, 0, 0, 0.4); color: white; border: none; font-size: 46.2px; }
.addon-item { }
.final-price { font-weight: bold; font-size: 22.2px; }
.quantity-control.detail-quantity input { width: 61px; text-align: center; border: none; font-size: 1.7rem; font-weight: 600; background: transparent; }
/* ... Sisa CSS Modal Detail Produk ... */
/* ... Sisa CSS Modal Voucher ... */
/* === STYLE BARU UNTUK NOTIFIKASI KUSTOM === */
.custom-alert-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 2000; }
.custom-alert-box { background: white; padding: 1.5rem; border-radius: var(--border-radius); width: 90%; max-width: 320px; text-align: center; box-shadow: var(--shadow-md); }
.alert-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.5rem; }
.alert-message { color: var(--text-secondary); margin-bottom: 1.5rem; line-height: 1.5; }
.alert-buttons { display: flex; justify-content: center; gap: 1rem; }
.alert-buttons button { flex: 1; padding: 0.75rem; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; }
.alert-buttons .btn-primary { background-color: var(--primary-color); color: white; }
.alert-buttons .btn-secondary { background-color: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color); }
.modal-fade-enter-active .custom-alert-box, .modal-fade-leave-active .custom-alert-box { transition: all 0.3s ease-out; }
.modal-fade-enter-from .custom-alert-box, .modal-fade-leave-to .custom-alert-box { transform: scale(0.9); opacity: 0; }
/* Lain-lain & Auth */
transaction-success-view { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1001; }
transaction-success-view { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1001; }
success-card { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1001; }
.loading-screen { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; background-color: #FFF; gap: 1rem; position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; }
.spinner { border: 4px solid var(--border-color); border-top: 4px solid var(--primary-color); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; }
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.spinner-small { width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: 50%; display: inline-block; animation: spin 1s linear infinite; }
/* === Sisa CSS (Authentication, Meja, QR, dll.) === */
.loading-screen { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; background-color: #FFF; gap: 1rem; position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; }
.spinner { border: 4px solid var(--border-color); border-top: 4px solid var(--primary-color); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; }
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.spinner-small { width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: 50%; display: inline-block; animation: spin 1s linear infinite; }
.auth-container { display: flex; justify-content: center; align-items: center; height: 100vh; padding: 1rem; background-color: var(--bg-secondary); }
.auth-card { background: white; padding: 2rem 2.5rem; border-radius: var(--border-radius); box-shadow: var(--shadow-md); width: 100%; max-width: 400px; text-align: center; }
.auth-title { font-size: 1.8rem; font-weight: 600; margin-bottom: 0.5rem; }
.auth-subtitle { color: var(--text-secondary); margin-bottom: 2rem; }
.auth-error { background-color: #FFEBEE; color: var(--danger-color); padding: 0.75rem; border-radius: 8px; margin-bottom: 1rem; }
.form-group { margin-bottom: 1rem; }
.form-group input { width: 100%; padding: 0.8rem 1rem; border: 1px solid var(--border-color); border-radius: 8px; font-size: 1rem; }
.btn-primary { background: var(--primary-color); color: white; border: none; border-radius: 8px; font-weight: 600; padding: 0.8rem 1rem; cursor: pointer; }
.btn-full { width: 100%; }
.auth-options { margin-top: 1.5rem; }
.auth-options a { margin: 0 0.5rem; color: var(--primary-color); text-decoration: none; font-size: 0.9rem; }
.page-container { display: flex; flex-direction: column; height: 100vh; background: var(--bg-secondary); padding-top: 56px; }
.table-area { margin: 1rem; padding: 1rem; background: white; border-radius: var(--border-radius); }
.table-area h3 { margin-bottom: 1rem; border-bottom: 2px solid var(--primary-color); padding-bottom: 0.5rem; }
.table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1rem; }
.table-btn { padding: 1.5rem 1rem; border: 1px solid var(--border-color); border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; background-color: white; }
.table-btn:hover { background-color: #E6F3EF; border-color: var(--primary-color); }
.qr-result { margin: 2rem auto; padding: 2rem; background: white; border-radius: 8px; text-align: center; max-width: 300px; }
.qr-result img { max-width: 100%; margin: 1rem 0; }
.qr-link { word-break: break-all; font-size: 0.8rem; background: #EEE; padding: 0.5rem; border-radius: 4px; }
.option-btn.disabled:hover { border-color: var(--border-color); }
.variant-price { display: block; font-size: 0.75rem; font-weight: 400; color: var(--text-secondary); margin-top: 2px; }
.option-btn.active .variant-price { color: var(--primary-dark); opacity: 0.8; }
.condiment-list, .addon-list { display: flex; flex-direction: column; gap: 0.75rem; }
div.options-group { display: ; margin-top: 11px; }
.condiment-item, .addon-item { display: flex; align-items: center; gap: 0.75rem; height: 30px; }
.price { color: #6C727C; }
.required { color: var(--danger-color); font-size: 0.8rem; }
.condiment-item label, .addon-item label { flex: 1; height: 26px; margin-left: 12px; }
input#s1 { }
.product-description { font-size: 0.8rem; /* Ukuran font lebih kecil */ color: #6C727C; /* Warna abu-abu */ margin: 4px 0; /* Sedikit spasi atas dan bawah */ line-height: 1.3; /* Mencegah teks terlalu panjang dan merusak layout */ display: -webkit-box; -webkit-line-clamp: 2; /* Batasi hingga 2 baris */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: 33px; /* Jaga ketinggian kartu tetap konsisten */ }
