/** * Vertical (Portrait) Kiosk Layout * Adapts the 3-column POS layout for portrait screens (kiosk, tablet vertical) * Include AFTER ezai-base.css * * Activates automatically via @media (orientation: portrait) and max-width: 900px * Or force with: */ /* ========== Portrait orientation OR forced vertical class ========== */ @media (orientation: portrait), (max-width: 900px) { /* Hide AI panel in vertical kiosk — not needed for customer-facing */ .ai-panel, .left-panel, [class*="ai-chat"] { display: none !important; } /* Main content: full width, stacked layout */ .main-content, .center-panel, .menu-panel { width: 100% !important; max-width: 100% !important; margin: 0 !important; flex: 1 1 auto !important; } /* Cart panel: fixed at bottom as a slide-up drawer */ .cart-panel, .right-panel { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-height: 45vh !important; z-index: 900 !important; border-radius: 16px 16px 0 0 !important; box-shadow: 0 -4px 20px rgba(0,0,0,0.3) !important; transition: transform 0.3s ease !important; overflow-y: auto !important; } /* Cart collapsed state */ .cart-panel.collapsed, .right-panel.collapsed { transform: translateY(calc(100% - 54px)) !important; } /* Body padding to avoid cart overlap */ body { padding-bottom: 60px !important; } /* Top bar: larger touch targets */ .top-bar { padding: 12px 16px !important; min-height: 56px !important; } .top-bar h1, .top-bar .title { font-size: 20px !important; } .hdr-btn { padding: 10px 16px !important; font-size: 15px !important; min-height: 44px !important; } /* Menu grid: 2 columns for portrait */ .menu-grid, .cat-items, [class*="menu-grid"] { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; padding: 10px !important; } /* Menu items: larger touch area */ .menu-item, .cat-item, [class*="menu-item"] { min-height: 100px !important; font-size: 15px !important; padding: 14px !important; border-radius: 12px !important; } .menu-item .item-name, .cat-item .name { font-size: 15px !important; font-weight: 600 !important; } .menu-item .item-price, .cat-item .price { font-size: 16px !important; font-weight: 700 !important; } /* Category tabs: horizontal scroll, larger */ .cat-tabs, .category-bar, [class*="cat-tab"] { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; gap: 8px !important; padding: 8px 10px !important; } .cat-tab, .category-btn { min-width: 90px !important; padding: 10px 16px !important; font-size: 14px !important; white-space: nowrap !important; flex-shrink: 0 !important; } /* KPI row: 2 columns instead of 4 */ .kpi-row { grid-template-columns: 1fr 1fr !important; } /* Nav grid: 2 columns */ .nav-grid { grid-template-columns: 1fr 1fr !important; } /* Modals: full screen on portrait */ .modal-content, .modal-box, [class*="modal"] > div { width: 95vw !important; max-width: 95vw !important; max-height: 90vh !important; margin: 5vh auto !important; border-radius: 16px !important; } /* Buttons: minimum 44px touch target (Apple HIG) */ button, .btn, [onclick], input[type="button"], input[type="submit"] { min-height: 44px !important; min-width: 44px !important; } /* Input fields: larger for touch */ input[type="text"], input[type="number"], input[type="tel"], input[type="email"], input[type="password"], select, textarea { min-height: 44px !important; font-size: 16px !important; /* prevents iOS zoom */ padding: 10px 12px !important; } /* Scrollbars: thin on touch devices */ ::-webkit-scrollbar { width: 4px !important; } ::-webkit-scrollbar-thumb { border-radius: 4px !important; } } /* ========== Force vertical with class ========== */ .vertical-kiosk .ai-panel, .vertical-kiosk .left-panel { display: none !important; } .vertical-kiosk .main-content, .vertical-kiosk .center-panel { width: 100% !important; } /* ========== Extra-tall screens (kiosk 1080x1920) ========== */ @media (orientation: portrait) and (min-height: 1200px) { .menu-grid, .cat-items, [class*="menu-grid"] { grid-template-columns: repeat(3, 1fr) !important; } .menu-item, .cat-item { min-height: 130px !important; font-size: 17px !important; } .menu-item .item-price, .cat-item .price { font-size: 20px !important; } } /* ========== Cart drawer toggle button (vertical only) ========== */ .cart-drawer-toggle { display: none; } @media (orientation: portrait), (max-width: 900px) { .cart-drawer-toggle { display: flex !important; position: fixed; bottom: 0; left: 0; right: 0; height: 54px; background: var(--card-bg, #1a1a2e); border-top: 2px solid var(--accent, #ff6b35); align-items: center; justify-content: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--text, #fff); cursor: pointer; z-index: 901; padding: 0 20px; } .cart-drawer-toggle .cart-count { background: var(--accent, #ff6b35); color: #fff; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; } .cart-drawer-toggle .cart-total { margin-left: auto; color: var(--accent, #ff6b35); font-size: 18px; } }