/* ============================================================ LEMON TREE RESTAURANT — css/menu.css Menu page only. Desktop: fixed sidebar LEFT + 2-column card grid RIGHT Mobile: horizontal scrollable pill tabs TOP + 1-column grid BELOW ============================================================ */ /* ── BRANCH SELECTOR BAR ── Sticky below the nav bar. Customer picks branch here. ── */ .branch-bar { background: var(--green); padding: 10px 32px; display: flex; align-items: center; gap: 14px; position: sticky; top: var(--nav-h); /* sits directly below nav */ z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.12); flex-wrap: wrap; } .branch-bar-label { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; } .branch-selector { background: var(--lemon); color: var(--green); border: none; padding: 7px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; outline: none; min-width: 200px; font-family: inherit; } .branch-bar-note { font-size: 12px; color: rgba(255,255,255,0.65); margin-left: auto; white-space: nowrap; } /* ── MOBILE CATEGORY BAR ── This element lives OUTSIDE .menu-layout so position:sticky works correctly relative to the viewport (not a flex container). Hidden on desktop — desktop uses .menu-sidebar inside .menu-layout. ── */ #mobileCatBar { display: none; /* hidden on desktop */ } @media (max-width: 900px) { /* Desktop sidebar: hidden on mobile */ .menu-sidebar { display: none !important; } /* Mobile pill bar: sticky below nav, visible on mobile only */ #mobileCatBar { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; width: 100%; padding: 8px 12px; background: #fff; border-bottom: 2px solid var(--lemon); box-shadow: 0 2px 8px rgba(0,0,0,0.06); z-index: 95; /* THIS is the key — sticky works because this element is a direct child of flow, NOT inside flex column */ position: sticky; top: var(--nav-h); /* sticks directly below nav = 64px */ } #mobileCatBar::-webkit-scrollbar { display: none; } /* Pill button styles inside mobile bar */ #mobileCatBar .sidebar-cat-btn { flex-shrink: 0; width: auto; min-width: unset; height: auto; white-space: nowrap; padding: 7px 14px; border-radius: 20px; border: 1.5px solid var(--border-c) !important; border-left: 1.5px solid var(--border-c) !important; background: #fff; display: inline-flex; align-items: center; align-self: center; } #mobileCatBar .sidebar-cat-btn:hover { background: var(--lemon-soft); border-color: var(--lemon) !important; } #mobileCatBar .sidebar-cat-btn.active { background: var(--green); border-color: var(--green) !important; } #mobileCatBar .sidebar-cat-btn.active .sidebar-cat-label { color: #fff; font-weight: 700; } /* Hide item count inside mobile pills */ #mobileCatBar .sidebar-cat-count { display: none; } } /* ── OUTER MENU LAYOUT ── Flex row on desktop: sidebar | content Flex column on mobile: tabs on top | content below NOTE: No min-height here — content determines height naturally. This prevents the sidebar from stretching full screen on mobile. ── */ .menu-layout { display: flex; flex-direction: row; align-items: flex-start; /* ← prevents children from stretching to full height */ padding-bottom: 80px; } /* ════════════════════════════════ DESKTOP SIDEBAR Fixed-width column on the left. Scrolls independently within viewport. ════════════════════════════════ */ .menu-sidebar { width: 185px; flex-shrink: 0; background: #fafafa; border-right: 1.5px solid var(--border-c); padding: 16px 0; /* Stick below nav + branch bar on desktop */ position: sticky; top: calc(var(--nav-h) + var(--branch-bar-h)); /* Height: fill viewport minus nav and branch bar so it scrolls */ height: calc(100vh - var(--nav-h) - var(--branch-bar-h)); overflow-y: auto; overflow-x: hidden; /* Only apply on desktop — mobile overrides below */ align-self: flex-start; /* ← don't stretch to full layout height */ scrollbar-width: thin; scrollbar-color: var(--lemon) transparent; } .menu-sidebar::-webkit-scrollbar { width: 4px; } .menu-sidebar::-webkit-scrollbar-thumb { background: var(--lemon); border-radius: 4px; } .sidebar-title { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-soft); font-weight: 700; padding: 0 16px 12px; display: block; } /* Each category button */ .sidebar-cat-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 10px 16px; border: none; background: none; cursor: pointer; text-align: left; font-family: inherit; transition: background 0.15s, border-color 0.15s; border-left: 3px solid transparent; } .sidebar-cat-btn:hover { background: var(--lemon-soft); } .sidebar-cat-btn.active { background: var(--lemon); border-left-color: var(--green); } .sidebar-cat-label { font-size: 13px; color: var(--text-mid); flex: 1; font-weight: 500; text-align: left; } .sidebar-cat-btn:hover .sidebar-cat-label, .sidebar-cat-btn.active .sidebar-cat-label { color: var(--green); font-weight: 600; } .sidebar-cat-count { font-size: 10px; color: var(--text-soft); background: #ebebeb; padding: 2px 6px; border-radius: 10px; flex-shrink: 0; } .sidebar-cat-btn.active .sidebar-cat-count { background: rgba(39,119,34,0.15); color: var(--green); } /* ════════════════════════════════ MAIN CONTENT AREA ════════════════════════════════ */ .menu-content { flex: 1; padding: 20px 24px; min-width: 0; /* prevent flex overflow */ } /* Search bar */ .menu-search-bar { margin-bottom: 18px; } .menu-search-input { width: 100%; padding: 11px 18px; border-radius: 24px; border: 1.5px solid var(--border-c); font-size: 13px; background: #fff; font-family: inherit; outline: none; transition: border-color 0.2s; box-sizing: border-box; } .menu-search-input:focus { border-color: var(--green); } /* Category title + count above item grid */ .menu-cat-header { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--lemon); } .menu-cat-title { font-size: 20px; font-weight: 700; color: var(--text-dark); margin-bottom: 2px; } .menu-cat-count { font-size: 12px; color: var(--text-soft); } /* ════════════════════════════════ MENU ITEMS GRID 2 columns desktop, 1 column mobile. Items stack vertically — page scrolls as needed. ════════════════════════════════ */ .menu-items-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } /* ════════════════════════════════ INDIVIDUAL MENU CARD Horizontal layout: [IMAGE] [code / name / desc / price + button] ════════════════════════════════ */ .menu-card { display: flex; flex-direction: row; /* image LEFT, body RIGHT */ align-items: stretch; background: #fff; border: 1.5px solid var(--border-c); border-radius: var(--radius-md); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; min-height: 100px; } .menu-card:hover { border-color: var(--lemon); box-shadow: var(--shadow-sm); } .menu-card-unavailable { opacity: 0.45; pointer-events: none; } /* ── LEFT: food image ── Fixed square. object-fit:cover fills the frame for ANY image size. Portrait, landscape, square — all look consistent. ── */ .menu-card-img { width: 100px; min-width: 100px; /* never shrink below this */ height: 100px; border-radius: 0; /* card already has radius */ flex-shrink: 0; align-self: stretch; } .menu-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: center center; /* explicitly center both axes */ display: block; } .img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--lemon-soft); color: var(--text-soft); font-size: 11px; } /* ── RIGHT: text body ── */ .menu-card-body { flex: 1; padding: 10px 12px; min-width: 0; display: flex; flex-direction: column; gap: 0; } /* Tags row */ .menu-card-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; } /* Item code */ .menu-card-code { font-size: 10px; color: var(--text-soft); letter-spacing: 0.5px; margin-bottom: 3px; } /* Item name */ .menu-card-name { font-size: 13px; font-weight: 600; color: var(--text-dark); line-height: 1.35; margin-bottom: 4px; } /* Description — show 3 lines max (was 2, too short for long descriptions) */ .menu-card-desc { font-size: 11px; color: var(--text-soft); line-height: 1.5; flex: 1; margin-bottom: 8px; display: -webkit-box; line-clamp: 5; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } /* Price + add button row */ .menu-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; } .menu-card-price { font-size: 14px; font-weight: 700; color: var(--green); } /* Circular + button */ .btn-add-cart { width: 30px; height: 30px; border-radius: 50%; background: var(--lemon); color: var(--green); border: none; font-size: 20px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; transition: background 0.2s, transform 0.2s; font-family: inherit; } .btn-add-cart:hover { background: var(--green); color: #fff; transform: scale(1.1); } .unavailable-label { font-size: 11px; color: var(--text-soft); background: #f0f0f0; padding: 4px 10px; border-radius: 12px; } /* ════════════════════════════════ CART DRAWER Slides in from the right on "View Order" click. ════════════════════════════════ */ .cart-drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1100; } .cart-drawer-overlay.open { display: block; } .cart-drawer { position: fixed; top: 0; right: -420px; width: 400px; max-width: 95vw; height: 100vh; background: #fff; z-index: 1200; display: flex; flex-direction: column; box-shadow: -4px 0 24px rgba(0,0,0,0.15); transition: right 0.3s ease; } .cart-drawer.open { right: 0; } .cart-drawer-header { background: var(--green); padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } .cart-drawer-title { font-size: 16px; font-weight: 700; color: #fff; } .cart-drawer-close { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 4px; } .cart-drawer-close:hover { background: rgba(255,255,255,0.15); } .cart-drawer-body { flex: 1; overflow-y: auto; padding: 16px; } .cart-empty-msg { text-align: center; color: var(--text-soft); padding: 48px 16px; } .cart-item-row { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-c); } .cart-item-img { width: 52px; height: 52px; border-radius: var(--radius-sm); flex-shrink: 0; overflow: hidden; background: var(--lemon-soft); } .cart-item-img img { width: 100%; height: 100%; object-fit: cover; } .cart-item-info { flex: 1; min-width: 0; } .cart-item-name { font-size: 13px; font-weight: 600; color: var(--text-dark); margin-bottom: 2px; } .cart-item-price { font-size: 12px; color: var(--text-soft); } .cart-item-qty { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .qty-btn { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border-c); background: #fff; font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--green); transition: all 0.15s; } .qty-btn:hover { background: var(--lemon); border-color: var(--lemon); } .qty-num { font-size: 14px; font-weight: 700; min-width: 18px; text-align: center; } .cart-item-subtotal { font-size: 13px; font-weight: 700; color: var(--green); min-width: 64px; text-align: right; flex-shrink: 0; } .cart-drawer-footer { border-top: 2px solid var(--border-c); padding: 16px 20px; flex-shrink: 0; background: #fafafa; } /* ── DELIVERY FEE WARNING ── */ .cart-delivery-note { display: flex; align-items: flex-start; gap: 6px; background: #fff5f5; border: 1px solid #ffcccc; border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 14px; font-size: 12px; color: #c0392b; line-height: 1.6; } .cart-delivery-note-star { font-weight: 700; flex-shrink: 0; font-size: 13px; } .cart-price-breakdown { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1.5px solid var(--border-c); } .cart-breakdown-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .cart-breakdown-label { font-size: 13px; color: var(--text-soft); } .cart-breakdown-val { font-size: 13px; color: var(--text-mid); font-weight: 500; } .cart-total-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; } .cart-total-label { font-size: 15px; font-weight: 700; color: var(--text-dark); } .cart-total-amount { font-size: 20px; font-weight: 800; color: var(--green); } .cart-action-btns { display: flex; flex-direction: column; gap: 10px; } .cart-action-btns .btn { justify-content: center; font-size: 14px; padding: 13px; } .cart-clear-btn { background: none; border: none; color: var(--text-soft); font-size: 12px; cursor: pointer; text-align: center; margin-top: 8px; width: 100%; font-family: inherit; text-decoration: underline; } .cart-clear-btn:hover { color: #c0392b; } /* ── REMARKS FIELD ── */ .cart-remarks-wrap { margin-bottom: 14px; } .cart-remarks-label { display: block; font-size: 11px; font-weight: 700; color: var(--text-mid); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .cart-remarks-input { width: 100%; padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--border-c); font-size: 13px; font-family: inherit; resize: none; color: var(--text-dark); background: #fff; outline: none; transition: border-color 0.2s; box-sizing: border-box; } .cart-remarks-input:focus { border-color: var(--green); } /* ════════════════════════════════ MOBILE — ≤ 900px ════════════════════════════════ */ @media (max-width: 900px) { /* Stack vertically, no min-height */ .menu-layout { flex-direction: column; min-height: unset; height: auto; padding-bottom: 120px; } /* Branch bar: NOT sticky on mobile — scrolls away */ .branch-bar { position: sticky; /* was relative !important */ top: var(--nav-h); /* was auto !important */ z-index: 100; padding: 10px 16px; gap: 8px; flex-wrap: nowrap; /* keep it one line so height stays predictable */ } .branch-bar-note { display: none; } .branch-selector { min-width: 0; flex: 1; /* was width: 100% — that caused wrapping/extra height */ } #mobileCatBar { top: calc(var(--nav-h) + var(--branch-bar-h)); /* stack below branch bar, not overlap it */ } /* Content area */ .menu-content { display: block; padding: 14px 16px; width: 100%; min-height: unset; } /* 1 column grid */ .menu-items-grid { grid-template-columns: 1fr; } /* Cart drawer full-width */ .cart-drawer { width: 100%; right: -100%; } } /* ════════════════════════════════ SMALL MOBILE — ≤ 480px ════════════════════════════════ */ @media (max-width: 480px) { .menu-card-img { width: 80px; min-width: 80px; height: 80px; } .menu-cat-title { font-size: 17px; } .menu-content { padding: 12px; } }