/* PIZZA KING STORE - GLOBAL MASTER CSS LEDGER V4.0 (V1 RESTORED + UI SCALE + CLEARANCE FIX) */
:root { 
    --pizz-green: #2ecc71; 
    --pizz-red: #e74c3c; 
    --pizz-dark: #2c3e50; 
    --pizz-gray: #f8f9fa; 
    --pizz-border: #eeeeee; 
    --pizz-text: #333;
    --pizz-bg: #ffffff;
    --radius: 12px;
}

/* 1. APP SILHOUETTE (RESTORED V1) */
body { font-family: 'Kantumruy Pro', sans-serif; background: #000; margin: 0; padding: 0; display: flex; justify-content: center; color: var(--pizz-dark); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
#app-shell { width: 100%; max-width: 480px; background: #f0f2f5; min-height: 100dvh; position: relative; box-shadow: 0 0 80px rgba(0,0,0,1); display: flex; flex-direction: column; }

/* 2. GUARDS & LOADERS (RESTORED V1) */
#install-guard { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; height: 100%; background: #fff; z-index: 5000; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 40px; text-align: center; box-sizing: border-box; }
.guard-logo { width: 110px; height: 110px; border-radius: 50%; margin-bottom: 20px; box-shadow: 0 10px 30px rgba(231,76,60,0.2); }
.btn-install-force { background: var(--pizz-green); color: white; border: none; padding: 18px 40px; border-radius: 30px; font-weight: 700; font-size: 1.1rem; cursor: pointer; width: 100%; }
#loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2000; }
.loader-img { width: 90px; height: 90px; border-radius: 50%; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* 3. HEADERS & CATEGORY SLIDER (UPGRADED UI SCALE V3.7) */
.master-header { display: flex; align-items: center; justify-content: center; background: #fff; padding: 10px 15px; border-bottom: 1px solid var(--pizz-border); position: sticky; top: 0; z-index: 200; font-weight: 700; color: var(--pizz-dark); box-shadow: 0 2px 10px rgba(0,0,0,0.02); min-height: 75px; box-sizing: border-box; }
.index-header { padding: 10px 15px; justify-content: flex-start; gap: 8px; }
.brand-logo-btn { width: 55px; height: 55px; min-width: 55px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; flex-shrink: 0; }
.brand-logo-btn.active { border-color: var(--pizz-green); }
.cat-slider { display: flex; overflow-x: auto; padding: 5px 0; gap: 15px; scrollbar-width: none; flex-grow: 1; }
.cat-slider::-webkit-scrollbar { display: none; }
.cat-item { text-align: center; min-width: 55px; cursor: pointer; flex-shrink: 0; }
.cat-icon { width: 48px; height: 48px; background: var(--pizz-gray); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid transparent; overflow: hidden; font-size: 26px; margin: 0 auto; }
.cat-icon img { width: 100%; height: 100%; object-fit: cover; }
.cat-item.active .cat-icon { border-color: var(--pizz-green); background: #e8f5e9; }
.cat-item span { font-size: 0.75rem; font-weight: 700; display: block; white-space: nowrap; color: #7f8c8d; margin-top: 5px; }

/* FIXED: Round Movie Icon Scaled & Forced to match Bottom FAB exactly */
.movie-btn-pro { 
    width: 54px !important; 
    height: 54px !important; 
    background: #111111; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0; 
    text-decoration: none;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.movie-btn-pro svg { width: 28px !important; height: 28px !important; fill: #ffffff; }
.movie-btn-pro + span { font-size: 0.75rem !important; margin-top: 4px !important; }

/* 3.1 MOVIE SLIDER COMPONENT (RESTORED) */
.main-slider { width: 100%; height: 120px; overflow: hidden; position: relative; border-radius: var(--radius); margin: 10px 0; background: #eee; }
.slider-track { display: flex; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); height: 100%; }
.slide { min-width: 100%; height: 100%; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slider-dots { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; }
.dot { width: 6px; height: 6px; background: rgba(255,255,255,0.5); border-radius: 50%; }
.dot.active { background: #fff; width: 12px; border-radius: 3px; }

/* 4. PRODUCT GRID & CARDS (RESTORED V1 + INCREASED CLEARANCE FIX) */
.container { flex-grow: 1; overflow-y: auto; padding: 10px; padding-bottom: 240px; } /* UPDATED FROM 140px to 240px */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.card { background: #fff; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 5px rgba(0,0,0,0.05); border: 1px solid #f0f0f0; height: 100%; }
.card img { width: 100%; height: 100px; object-fit: cover; cursor: pointer; display: block; flex-shrink: 0; }
.card-body { padding: 8px; flex-grow: 1; display: flex; flex-direction: column; }
.title { font-size: 0.75rem; font-weight: 700; height: 32px; overflow: hidden; margin: 0 0 4px 0; line-height: 1.3; color: var(--pizz-dark); cursor: pointer; }
.price { color: var(--pizz-red); font-weight: 700; font-size: 0.9rem; margin-bottom: 6px; }
.var-container { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.var-chip { padding: 3px 8px; background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 12px; font-size: 0.55rem; font-weight: 700; cursor: pointer; }
.var-chip.active { background: var(--pizz-green); color: #fff; border-color: var(--pizz-green); }
.var-selector { width: 100%; margin-bottom: 6px; padding: 6px; border-radius: 6px; border: 1px solid #ddd; font-family: inherit; font-size: 0.7rem; outline: none; box-sizing: border-box; background: #fff; }
.action-row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; gap: 5px; }
.qty-control { display: flex; align-items: center; justify-content: space-between; background: var(--pizz-gray); border-radius: 6px; padding: 2px 4px; flex-grow: 1; }
.qty-btn { width: 26px; height: 26px; border: 1px solid #ddd; background: #fff; border-radius: 4px; font-weight: bold; cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 1rem; padding: 0; }
.btn-add-cart-icon { background: var(--pizz-green); border: none; height: 32px; width: 32px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; }

/* 5. ORDER LIST & CARDS (RESTORED V1) */
.order-card { background: #fff; border-radius: 14px; padding: 15px; margin-bottom: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid #f9f9f9; }
.order-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; border-bottom: 1px dashed #eee; padding-bottom: 12px; }
.order-id { font-weight: 800; color: #2c3e50; font-size: 1.05rem; margin-bottom: 4px; }
.order-date { font-size: 0.75rem; color: #7f8c8d; }
.status-badge { padding: 6px 12px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; display: inline-block; white-space: nowrap; }
.status-pending { background: #fff3cd; color: #f39c12; }
.status-processing { background: #e1f5fe; color: #2980b9; }
.status-completed { background: #e8f5e9; color: var(--pizz-green); }
.status-cancelled { background: #ffebee; color: var(--pizz-red); }
.status-refunded { background: #f3e5f5; color: #8e44ad; }
.order-items-preview { font-size: 0.85rem; color: #7f8c8d; line-height: 1.5; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.order-total { font-size: 1.15rem; font-weight: 800; color: var(--pizz-red); margin: 15px 0; text-align: right; }
.login-box { text-align: center; margin-top: 40px; background: #fff; padding: 25px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.login-box input { width: 100%; padding: 14px; border: 1px solid #ddd; border-radius: 10px; box-sizing: border-box; font-size: 1rem; font-family: inherit; text-align: center; margin: 15px 0; outline: none; }

/* 6. FORMS & GENERAL BUTTONS (RESTORED V1) */
.order-form { background: #fff; padding: 15px; border-radius: 12px; margin-top: 15px; border: 1px solid var(--pizz-border); }
.input-group { margin-bottom: 12px; }
.input-group label { display: block; font-size: 0.75rem; margin-bottom: 4px; font-weight: 700; color: #7f8c8d; }
.input-group input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box; font-size: 0.9rem; outline: none; font-family: inherit; }
.btn-group { display: flex; gap: 10px; }
.btn-outline { flex: 1; border: 1px solid #ddd; background: #fff; color: #2c3e50; padding: 12px; border-radius: 10px; font-weight: 700; font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; }
.btn-danger-outline { flex: 1; border: 1px solid #ffa39e; background: #fff1f0; color: var(--pizz-red); padding: 12px; border-radius: 10px; font-weight: 700; font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; }
.btn-solid-green { background: var(--pizz-green); color: #fff; border: none; padding: 14px; border-radius: 12px; font-weight: 700; font-size: 1rem; cursor: pointer; width: 100%; box-sizing: border-box; }

/* 7. MINICART (RESTORED V1 + CLEARANCE FIX FOR NEW 65PX NAV) */
.footer-cart { position: fixed; bottom: 68px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; background: #ffffff; border-top: 1px solid #ddd; padding: 15px; box-sizing: border-box; box-shadow: 0 -4px 20px rgba(0,0,0,0.1); z-index: 150; border-radius: 20px 20px 0 0; }
.cart-header { display: none; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.cart-header.open { display: flex; }
.cart-details { max-height: 0; overflow: hidden; transition: 0.3s; }
.cart-details.open { max-height: 300px; overflow-y: auto; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.cart-item-row { display: grid; grid-template-columns: 1fr 100px 40px; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #f9f9f9; }
.cart-del-btn { background: #fff1f0; border: 1px solid #ffa39e; border-radius: 6px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--pizz-red); }
.checkout-btn { background: var(--pizz-green); color: #fff; border: none; width: 100%; padding: 14px; border-radius: 12px; font-weight: 700; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.checkout-btn:disabled { background: #bdc3c7 !important; cursor: not-allowed; }

/* 8. OVERLAYS & MODALS (RESTORED V1) */
.pay-overlay, .modal-overlay, .popup-screen { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; height: 100%; display: none; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,0.75); box-sizing: border-box; padding: 15px; }
.pay-overlay { z-index: 600; }
.popup-screen { z-index: 800; }
#note-modal, #success-modal, #cancel-modal { z-index: 9999 !important; background: rgba(0,0,0,0.85) !important; }
.isolated-note-card { background: #ffffff !important; border-radius: 16px !important; width: 95% !important; max-width: 360px !important; padding: 20px !important; box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important; display: flex; flex-direction: column; box-sizing: border-box; text-align: center; position: relative; }
.isolated-note-card textarea { width: 100% !important; padding: 12px !important; border: 1px solid #ccc !important; border-radius: 12px !important; font-family: inherit !important; resize: none !important; font-size: 0.9rem !important; margin-bottom: 15px !important; box-sizing: border-box !important; outline: none !important; background: #fff !important; color: #000 !important; }
.close-x { position: absolute; top: 12px; right: 12px; background: #f0f2f5; border: none; width: 34px; height: 34px; border-radius: 50%; font-size: 20px; font-weight: bold; color: var(--pizz-red); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; }

/* 9. PAYMENT QR UI (RESTORED V1) */
.qr-card { background: white; border-radius: 20px; width: 95%; max-width: 380px; box-shadow: 0 15px 50px rgba(0,0,0,0.3); display: flex; flex-direction: column; padding: 15px; box-sizing: border-box; max-height: 90vh; overflow-y: auto; }
.qr-header-bar { background: var(--pizz-red); padding: 10px; color: white; font-weight: 700; text-align: center; border-radius: 10px 10px 0 0; margin: -15px -15px 10px -15px; }
#qr-container { text-align: center; display: block; }
.qr-one-line { font-weight: 800; margin: 10px 0; display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 1.5rem; }
.qr-img-main { width: 180px; height: 180px; border-radius: 8px; border: 1px solid #eee; margin: 0 auto; display: block; }
.recap-toggle { background: #f8f9fa; border: 1px solid #ddd; border-radius: 8px; width: 100%; margin: 10px 0; padding: 10px; font-family: inherit; font-weight: 700; font-size: 0.8rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; }
.recap-list { display: none; width: 100%; max-height: 250px; overflow-y: auto; background: #fff; padding: 10px; border-radius: 8px; border: 1px solid #eee; box-sizing: border-box; margin-bottom: 10px; text-align: left; }
.recap-row { display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 6px; font-weight: 700; border-bottom: 1px solid #f9f9f9; padding-bottom: 4px; }
.btn-save-qr-mini { background: #fff; color: #007bff; border: 1px solid #007bff; border-radius: 20px; padding: 8px 20px; font-weight: 700; font-size: 0.75rem; margin-bottom: 10px; cursor: pointer; display: inline-block; width: 80%; align-self: center; box-sizing: border-box; }
.btn-paid-final { background: var(--pizz-green); color: #fff; border: none; width: 100%; padding: 14px; border-radius: 12px; font-weight: 700; font-size: 1rem; cursor: pointer; margin-bottom: 10px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-paid-final:disabled { background: #95a5a6; cursor: not-allowed; }

/* 10. PRODUCT DETAILS POPUP (RESTORED V1) */
.popup-card { background: white; border-radius: 20px; width: 95%; max-height: 85vh; overflow-y: auto; padding: 20px; box-sizing: border-box; position: relative; text-align: center; }

/* 11. TOAST NOTIFICATION (RESTORED V1) */
#toast { position: fixed; bottom: 130px; left: 50%; transform: translateX(-50%); background: var(--pizz-green); color: #fff; padding: 10px 20px; border-radius: 30px; font-size: 0.85rem; font-weight: normal; display: none; z-index: 1000; box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4); align-items: center; gap: 8px; white-space: nowrap; max-width: 90%; }

/* 12. TELEGRAM FLOAT & FOOTER (RESTORED V1) */
.float-contact { position: fixed; bottom: 85px; right: calc(50% - 220px); width: 55px; height: 55px; background: #0088cc; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 180; box-shadow: 0 4px 15px rgba(0,136,204,0.4); cursor: pointer; transition: bottom 0.3s ease; }
@media (max-width: 500px) { .float-contact { right: 20px; } }
footer { text-align: center; padding: 20px 20px 120px 20px; font-size: 0.7rem; color: #95a5a6; border-top: 1px solid var(--pizz-border); margin-top: 20px; }



/* SOVEREIGN UPGRADE: Orders Drawer Animations V13.6 */
.order-details-drawer { display: none; margin-top: 15px; border-top: 1px dashed #eee; padding-top: 15px; }
.order-details-drawer.open { display: block; animation: slideDown 0.3s ease-out; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }


/* SOVEREIGN UPGRADE: Super App Top Navigation V15.7 (Modern Soft Card Tabs) */
.super-top-nav {
    display: flex;
    justify-content: space-between; 
    align-items: flex-end; 
    padding: 15px 8px 0 8px; /* Extra padding pushes tabs down naturally */
    background: #f4f5f7; /* Very subtle grey background */
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    box-sizing: border-box;
    
    /* THE MASTER BOTTOM LINE (Ultra-thin and soft) */
    border-bottom: 1px solid #e2e8f0; 
}

.nav-pill {
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    flex: 1; 
    padding: 10px 2px; 
    text-decoration: none;
    min-width: 0; 
    
    /* MODERN CURVES (18px is the modern Apple/Google standard) */
    border-radius: 18px 18px 0 0; 
    background: transparent;
    
    /* SOVEREIGN TRICK: Pull the tab down by exactly 1px to overlap the master line */
    margin-bottom: -1px; 
    
    /* Silky smooth modern animation */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Inactive Icon Style */
.nav-pill i {
    font-size: 1.3rem; 
    margin-bottom: 6px;
    color: #a4b0be; /* Premium, soft grey-blue */
    transition: all 0.3s ease;
}

/* Inactive Khmer Text */
.nav-km-text {
    font-family: 'Kantumruy Pro', sans-serif;
    font-weight: 800; 
    font-size: 0.85rem; 
    line-height: 1.2;
    color: #7f8c8d; 
    white-space: nowrap;
    transition: color 0.3s ease;
}

/* Inactive English Text */
.nav-en-text {
    font-family: sans-serif;
    font-weight: 700;
    font-size: 0.5rem; 
    color: #a4b0be;
    margin-top: 3px;
    letter-spacing: 0.5px; 
    white-space: nowrap;
    transition: color 0.3s ease;
}

/* =========================================
   THE MODERN ACTIVE STATE (The Soft Card)
   ========================================= */
.nav-pill.active {
    background: #ffffff; 
    
    /* Erase the master bottom line seamlessly */
    border-bottom: 1px solid #ffffff; 
    
    /* MODERN TOUCH: A very soft, luxurious glow/shadow on the top and sides, NOT a hard line */
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.04);
    
    /* Makes the tab feel slightly taller and more prominent */
    padding-top: 12px; 
}

.nav-pill.active i {
    color: #e74c3c; 
    transform: translateY(-2px) scale(1.05); /* Very subtle, modern bounce */
}

.nav-pill.active .nav-km-text,
.nav-pill.active .nav-en-text {
    color: #e74c3c; 
}