/* ARSITEKTUR CSS GLOBAL MART KASIR */
/* PENGEMBANG: BANI IBRAHIM */

/* Reset dan stabilisasi tampilan agar layar tidak goyang */
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; 
    position: fixed; 
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
    touch-action: none;
}

/* Pengaturan box sizing global */
* { box-sizing: border-box; }

/* Skema warna utama aplikasi */
:root { 
    --primary: #800000; 
    --accent: #d4af37;  
    --bg: #fffdf5;      
    --emas: #d4af37;
    --marun: #800000;
}

/* Konfigurasi tema gelap */
body.dark-mode { --bg: #1a1a1a; --primary: #d4af37; }
body.dark-mode .item-card { background: #000 !important; color: #fff; }
body.dark-mode .header, body.dark-mode .fixed-bottom { background: #222 !important; color: var(--emas); }

body { 
    background: var(--bg);
    display: flex; 
    flex-direction: column; 
}

/* Header bagian atas */
.header { 
    background: #fff; padding: 15px; text-align: center; 
    font-weight: 800; color: var(--marun); 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    position: relative; z-index: 1200;
    flex-shrink: 0;
    border-bottom: 2px solid var(--emas); 
}

/* Menu navigasi samping */
.btn-ham { position: fixed; top: 8px; left: 12px; background: #800000; color: #d4af37; border: 2px solid #d4af37; padding: 5px 10px; border-radius: 8px; z-index: 9999; cursor: pointer; }
#panel-kami { position: fixed; top: 0; left: -280px; width: 220px; height: 50%; background: #fff; z-index: 9998; padding-top: 60px; transition: 0.3s; border-right: 3px solid #d4af37; border-bottom-right-radius: 13px; 
    border-top-right-radius: 25px; }
#panel-kami.active { left: 0; }
.menu-item { display: block; padding: 15px; color: #d4af37; text-decoration: none; border-bottom: 1px solid rgba(212,175,55,0.2); font-family: sans-serif; }
#overlay-kami { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; z-index: 9997; }
#overlay-kami.active { display: block; }

/* Area utama daftar belanja */
#area-belanja {
    flex: 1; 
    display: flex; 
    flex-direction: column; /* Mengatur arah aliran dari atas ke bawah */
    padding-bottom: 8px; 
    overflow-y: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    position: relative; 
    background: white; 
    margin: 5px;
    border: 1px solid var(--emas); 
    border-radius: 15px;
    padding: 5px; 
}

/* 2. CONTAINER KERANJANG (Tempat barang berbaris) */
.cart-container { 
    display: flex; 
    flex-direction: column; 
    gap: 0px !important;    /* Jarak antar barang satu garis tipis */
    margin-top: auto;       /* KUNCI: Memaksa barang tetap di bawah, di atas tombol bayar */
}

/* 3. KARTU BARANG (Mepet Kiri-Kanan) */
.item-card { 
    background: white; 
    border-radius: 10px; 
    border: 1px solid var(--emas); 
    padding: 8px 5px !important; 
    display: flex; 
    flex-direction: row;        
    align-items: center;        
    justify-content: space-between; 
    margin-bottom: 1px !important; 
    width: 100%; 
    box-sizing: border-box;
}

/* 4. NAMA & HARGA (Rapat Kiri) */
.item-info {
    display: flex;
    flex-direction: column;     
    gap: 1px;                   
    flex: 1;
    padding-left: 2px;
}

.item-name {
    font-weight: 700;
    color: var(--marun);
    font-size: 0.95rem;
    text-align: left;
}

.item-price-row {
    font-size: 0.85rem;
    color: #444;
    font-weight: 600;
    text-align: left;
}

/* 5. TOMBOL PLUS MINUS (Besar & Rapat Kanan) */
.qty-controls {
    display: flex;
    align-items: center;
    gap: 10px;                   
    padding-right: 2px;
}

.qty-controls button {
    background: var(--marun);
    color: var(--emas);
    border: 1px solid var(--emas);
    border-radius: 6px;
    padding: 10px 18px;         
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}



/* Animasi highlight item baru */
.highlight-baru {
    background-color: #fff9c4 !important;
    border: 2px solid #fbc02d !important;
}

/* Panel navigasi bawah */
.fixed-bottom { 
    position: relative; 
    background: #fff; padding: 12px; z-index: 1100; 
    box-shadow: 0 -10px 25px rgba(0,0,0,0.1); 
    border-top: 3px solid var(--emas); 
    flex-shrink: 0;
    display: flex;
    flex-direction: column; 
}

/* Baris input cari dan tombol scan */
.action-row { display: flex; gap: 10px; margin-bottom: 12px; }
.btn-scan-main { 
    order: 2;
    width: 100px; 
    height: 45px; 
    border-radius: 12px; 
    background: #800000; 
    color: #d4af37;      
    border: 2px solid #d4af37; 
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.search-box { 
    order: 1; flex: 1; padding: 15px; border-radius: 12px; 
    border: 2px solid var(--emas); 
    height: 45px; outline: none; 
}

/* Area pembayaran dan input uang */
.payment-row { display: flex; gap: 10px; align-items: flex-end; }
.btn-save-container { width: 100px; display: flex; justify-content: center; }

/* Tombol bayar utama */
.btn-pay-main { 
    width: 90px;        
    height: 90px;       
    border-radius: 50%;  
    background: #800000; 
    color: #d4af37;      
    border: 3px solid #d4af37; 
    font-weight: bold; 
    cursor: pointer;
    font-size: 1rem;
    box-shadow: 0 6px 12px rgba(128,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
    line-height: 1;
    padding-bottom: 10px;
}

.payment-panel { 
    flex: 1; background: #fffdf5; padding: 10px; 
    border-radius: 15px; border: 2px solid var(--emas); 
}

.total-row { display: flex; justify-content: space-between; font-weight: 800; font-size: 1.1rem; border-bottom: 1px dashed var(--emas); color: var(--marun); }

.pay-input { 
    width: 100%; 
    padding: 8px; 
    border-radius: 8px; 
    border: 2px solid var(--marun); 
    font-size: 1.2rem; 
    text-align: right; 
    margin: 6px 0; 
    color: var(--marun);
}
.change-row { display: flex; justify-content: space-between; color: #e67e22; font-weight: bold; }

/* Modal pencarian barang */
#pilihanModal { position: fixed; bottom: 85px; left: 12px; right: 12px; max-height: 60vh; background: white; border-radius: 20px; box-shadow: 0 -10px 40px rgba(0,0,0,0.3); display: none; overflow-y: auto; z-index: 1500; border: 3px solid var(--emas); }
.item-list { padding: 15px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; }

/* Layout struk digital */
#struk-digital { position: absolute; left: -9999px; width: 300px; background: #fff; padding: 15px; font-family: monospace; color: #000; }
.struk-line { display: flex; justify-content: space-between; }

/* Kamera scanner barcode */
#reader { position: fixed !important; top: 65px !important; left: 50% !important; transform: translateX(-50%) !important; width: 94% !important; height: 240px !important; background: #000 !important; z-index: 5000 !important; display: none; border: 5px solid var(--emas); border-radius: 20px; overflow: hidden; box-shadow: 0 10px 60px rgba(0,0,0,0.7); }
#reader video { width: 100% !important; height: 100% !important; object-fit: cover !important; }