html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background: #7f9278;
min-height: 100vh;
}
/* ---------- Welcome Page ---------- */
.overlay {
width: 100%;
min-height: 100vh;
background: transparent;
display: flex;
justify-content: center;
align-items: center;
}
.content {
text-align: center;
color: white;
padding: 20px;
}
.logo {
width: 240px;
height: auto;
margin-bottom: 24px;
}
.content h1 {
font-size: 44px;
margin-bottom: 10px;
color: white;
}
.content p {
font-size: 24px;
margin-bottom: 40px;
color: #f5f5f5;
}
.buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.guest-btn,
.manager-btn {
width: 270px;
padding: 15px 22px;
border-radius: 12px;
text-decoration: none;
font-size: 19px;
font-weight: bold;
text-align: center;
background: #788a73;
color: white;
border: 3px solid #e7ab90;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.guest-btn:hover,
.manager-btn:hover {
opacity: 0.95;
}
/* ---------- Menu Page ---------- */
.menu-page {
max-width: 950px;
margin: 0 auto;
padding: 30px 20px 50px;
text-align: center;
}
.top-logo {
width: 150px;
height: auto;
margin-bottom: 15px;
}
.menu-page h1 {
color: white;
margin-bottom: 10px;
}
.menu-page > p {
color: white;
font-size: 20px;
margin-bottom: 25px;
}
/* ---------- Top Bar ---------- */
.top-bar {
width: 100%;
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
}
.cart-top-btn {
position: fixed;
top: 25px;
right: 25px;
z-index: 1000;
background: #788a73;
color: white;
border: 2px solid #e7ab90;
padding: 10px 18px;
border-radius: 12px;
font-size: 15px;
font-weight: bold;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.cart-top-btn:hover {
opacity: 0.95;
}
/* ---------- Menu Tabs ---------- */
.menu-tabs {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 30px;
}
.tab-btn {
background: transparent;
border: 2px solid #e7ab90;
color: white; /* ✅ TEXT WHITE */
}
/* ACTIVE BUTTON */
.tab-btn.active {
background: #e7ab90;
color: white;
}
/* HOVER */
.tab-btn:hover {
background: rgba(255,255,255,0.1);
color: white;
}
/* ---------- Sections ---------- */
.menu-section {
background: transparent;
border-radius: 0;
padding: 0;
margin-bottom: 30px;
box-shadow: none;
text-align: left;
}
.menu-section h2 {
margin-top: 0;
margin-bottom: 18px;
color: white;
text-align: center;
font-size: 30px;
}
/* ---------- Cards ---------- */
.menu-card {
background: rgba(255, 255, 255, 0.12);
border: 1.5px solid rgba(231, 171, 144, 0.5);
border-radius: 16px;
padding: 14px;
margin-bottom: 15px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
backdrop-filter: blur(2px);
}
.menu-card-content {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.item-img {
width: 100%;
height: 120px;
object-fit: cover;
border-radius: 14px;
flex-shrink: 0;
background: #d9d9d9;
}
.item-info {
flex: 1;
min-width: 180px;
}
.menu-card h3 {
margin: 0 0 8px;
color: white;
font-size: 28px;
}
.menu-card p {
margin: 0 0 8px;
color: #f2f2f2;
font-size: 16px;
}
.menu-card span {
display: inline-block;
font-weight: bold;
color: #ffffff;
font-size: 18px;
margin-top: 4px;
}
.item-action {
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
}
.add-cart-btn {
background: #788a73;
color: white;
border: 2px solid #e7ab90;
padding: 12px 18px;
border-radius: 12px;
font-size: 15px;
font-weight: bold;
cursor: pointer;
min-width: 130px;
}
.add-cart-btn:hover {
opacity: 0.95;
}
/* ---------- Modal ---------- */
.modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
justify-content: center;
align-items: center;
z-index: 999;
padding: 20px;
box-sizing: border-box;
}
.modal-box {
background: #f6f3ef;
width: 90%;
max-width: 500px;
border-radius: 18px;
padding: 24px;
position: relative;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}
.close-btn {
position: absolute;
top: 12px;
right: 18px;
font-size: 30px;
cursor: pointer;
color: #333;
}
.modal-img {
width: 180px;
height: 180px;
object-fit: cover;
border-radius: 14px;
margin-bottom: 16px;
}
.modal-box h2 {
margin-bottom: 10px;
color: black;
}
.modal-box p {
color: #333;
margin-bottom: 10px;
font-size: 16px;
}
.modal-box strong {
margin-bottom: 18px;
color: black;
font-size: 18px;
}
.quantity-box,
.instruction-box {
text-align: left;
margin-bottom: 18px;
}
.quantity-box label,
.instruction-box label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: black;
}
#modalQuantity,
#specialInstructions {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 10px;
font-size: 15px;
box-sizing: border-box;
}
.confirm-cart-btn {
background: #788a73;
color: white;
border: 2px solid #e7ab90;
padding: 12px 20px;
border-radius: 12px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
.confirm-cart-btn:hover {
opacity: 0.95;
}
.cart-panel {
position: fixed;
top: 0;
right: -340px;
width: 300px;
max-width: 85%;
height: 100vh;
background: #f6f3ef;
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.22);
z-index: 1200;
transition: right 0.3s ease;
display: flex;
flex-direction: column;
}
.cart-panel.open {
right: 0;
}
.cart-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px;
border-bottom: 1px solid #ddd;
}
.cart-header h2 {
margin: 0;
color: black;
font-size: 20px;
}
.close-cart-btn {
font-size: 28px;
cursor: pointer;
color: #333;
}
.cart-items {
flex: 1;
overflow-y: auto;
padding: 12px;
}
.cart-item {
display: flex;
gap: 10px;
padding: 12px 0;
border-bottom: 1px solid #ddd;
}
.cart-item-img {
width: 58px;
height: 58px;
object-fit: cover;
border-radius: 10px;
flex-shrink: 0;
}
.cart-item-info {
flex: 1;
}
.cart-item-info h4 {
margin: 0 0 6px;
color: black;
font-size: 16px;
}
.cart-item-info p {
margin: 0 0 6px;
color: #444;
font-size: 13px;
}
.cart-item-info small {
display: block;
color: #666;
margin-bottom: 8px;
font-size: 12px;
}
.cart-qty-controls {
display: flex;
align-items: center;
gap: 8px;
}
.cart-qty-controls button {
background: #788a73;
color: white;
border: 2px solid #e7ab90;
border-radius: 8px;
padding: 3px 9px;
cursor: pointer;
font-weight: bold;
}
.cart-item-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.cart-item-right strong {
color: black;
font-size: 15px;
}
.delete-btn {
background: #c86d6d;
color: white;
border: none;
border-radius: 8px;
padding: 6px 10px;
cursor: pointer;
font-size: 12px;
}
.cart-footer {
padding: 18px;
border-top: 1px solid #ddd;
background: #efe9e2;
}
.cart-footer-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.cart-footer h3 {
margin: 0;
color: black;
font-size: 22px;
}
.confirm-order-btn {
background: #788a73;
color: white;
border: 2px solid #e7ab90;
padding: 10px 16px;
border-radius: 12px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
white-space: nowrap;
}
.confirm-order-btn:hover {
opacity: 0.95;
}
/* KITCHEN PAGE */
/* ================= KITCHEN PAGE ================= */
.kitchen-page{
max-width:1100px;
margin:auto;
padding:30px 15px;
text-align:center;
background:#f6f1ea;
}
/* ================= GRID ================= */
.orders-container{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:15px;
margin-top:20px;
}
/* ================= COLUMN ================= */
.order-column{
background:#ffffff;
border-radius:12px;
padding:10px;
}
.order-column h2{
font-size:18px;
margin-bottom:10px;
color:#333;
}
/* ================= CARD ================= */
.order-card{
background:#fff;
border-radius:12px;
padding:12px;
margin-bottom:12px;
border-left:5px solid #d9c5b2;
text-align:left;
}
/* STATUS */
.order-card.new{
border-left-color:#7f9278;
}
.order-card.preparing{
border-left-color:#c2a98c;
}
.order-card.ready{
border-left-color:#d9c5b2;
opacity:0.7;
}
/* ================= HEADER ================= */
.order-header{
display:flex;
justify-content:space-between;
align-items:center;
}
.order-header h2{
margin:0;
font-size:18px;
}
.time{
font-size:12px;
color:#777;
}
/* ================= ITEMS ================= */
.order-item{
font-size:18px;
font-weight:bold;
margin-top:6px;
}
/* ================= NOTES ================= */
.note{
margin-top:4px;
padding:4px 6px;
background:#fff3cd;
color:#856404;
border-radius:5px;
font-size:13px;
font-weight:bold;
}
/* CRITICAL */
.note.critical{
background:#f8d7da;
color:#721c24;
}
/* ================= BUTTONS ================= */
.order-actions{
display:flex;
gap:8px;
margin-top:10px;
}
.prepare-btn{
flex:1;
background:#7f9278;
color:white;
border:none;
padding:8px;
border-radius:8px;
cursor:pointer;
}
.ready-btn{
flex:1;
background:#d9c5b2;
border:none;
padding:8px;
border-radius:8px;
cursor:pointer;
}
.order-items{
margin-top:10px;
}
.order-item{
font-size:18px;
font-weight:bold;
margin-bottom:6px;
color:#222;
}
/* 🔥 IMPORTANT */
.note{
display:block;
margin-top:4px;
padding:6px;
background:#fff3cd;
color:#856404;
border-radius:6px;
font-size:14px;
font-weight:bold;
}
/* 🔴 critical notes */
.note.critical{
background:#f8d7da;
color:#721c24;
}
.order-card.warning {
border: 2px solid orange;
}
.order-card.late {
border: 2px solid red;
animation: blink 1s infinite;
}
@keyframes blink {
0% { background: #fff; }
50% { background: #ffe5e5; }
100% { background: #fff; }
}
/* ========================= */
/* MANAGER DASHBOARD */
/* ========================= */
.manager-top-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 15px;
}
.manager-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-left: auto;
}
/* Buttons */
.manager-action-btn {
background: #788a73;
color: white;
border: 2px solid #e7ab90;
padding: 12px 16px;
border-radius: 12px;
font-size: 15px;
font-weight: bold;
cursor: pointer;
}
.manager-action-btn:hover {
opacity: 0.95;
}
/* Delete button */
.delete-item-btn {
background: #b86565;
color: white;
border: 2px solid #e7ab90;
padding: 12px 16px;
border-radius: 12px;
font-size: 15px;
font-weight: bold;
cursor: pointer;
}
.delete-item-btn:hover {
opacity: 0.9;
}
/* Statistics box */
.stats-box {
text-align: left;
margin-top: 20px;
}
.stats-box p {
font-size: 18px;
color: black;
margin-bottom: 14px;
}
/* Manager Login Page */
.manager-login-page {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.manager-login-box {
width: 100%;
max-width: 420px;
background: rgba(255, 255, 255, 0.10);
border: 2px solid rgba(231, 171, 144, 0.6);
border-radius: 18px;
padding: 30px 25px;
text-align: center;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(4px);
}
.manager-login-box h1 {
color: white;
margin-bottom: 10px;
}
.manager-login-box p {
color: #f5f5f5;
margin-bottom: 25px;
}
.manager-form {
display: flex;
flex-direction: column;
gap: 14px;
}
.manager-form input,
.manager-form select {
padding: 14px;
border-radius: 12px;
border: 1px solid #ddd;
font-size: 15px;
}
.manager-login-btn {
background: #788a73;
color: white;
border: 2px solid #e7ab90;
padding: 12px 16px;
border-radius: 12px;
font-size: 15px;
font-weight: bold;
cursor: pointer;
}
.manager-login-btn:hover {
opacity: 0.95;
}
/* Language Toggle */
.lang-toggle {
position: fixed;
top: 20px;
left: 20px;
z-index: 1000;
}
.lang-toggle button {
background: #788a73;
color: white;
border: 2px solid #e7ab90;
padding: 8px 14px;
border-radius: 8px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
}
/* =============================== */
/* MANAGER LOGIN PAGE */
/* =============================== */
.manager-login-page {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #7f9278;
padding: 20px;
}
/* Login Box */
.manager-login-box {
width: 100%;
max-width: 420px;
background: rgba(255,255,255,0.10);
border: 2px solid rgba(231,171,144,0.6);
border-radius: 18px;
padding: 35px 30px;
text-align: center;
backdrop-filter: blur(6px);
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
/* Logo */
.top-logo{
width:160px;
margin-bottom:20px;
}
/* Titles */
.manager-login-box h1{
color:white;
margin-bottom:8px;
font-size:28px;
}
.manager-login-box p{
color:#f5f5f5;
margin-bottom:25px;
}
/* Form */
.manager-form{
display:flex;
flex-direction:column;
gap:14px;
}
/* Inputs */
.manager-form input{
padding:14px;
border-radius:12px;
border:1px solid #ddd;
font-size:15px;
outline:none;
}
/* Button */
.manager-login-btn{
background:#788a73;
color:white;
border:2px solid #e7ab90;
padding:12px 16px;
border-radius:12px;
font-size:16px;
font-weight:bold;
cursor:pointer;
transition:0.2s;
}
.manager-login-btn:hover{
transform:scale(1.03);
}
/* Language toggle */
.lang-toggle{
position:fixed;
top:20px;
left:20px;
}
.lang-toggle button{
background:#788a73;
color:white;
border:2px solid #e7ab90;
padding:8px 14px;
border-radius:8px;
font-weight:bold;
cursor:pointer;
}
/* ============================= */
/* MANAGER DASHBOARD FIX */
/* ============================= */
/* ================= DESIGN SYSTEM ================= */
:root {
--bg: #7F9278;
--primary: #788A73;
--accent: #E7AB90;
--white: #ffffff;
--light: #f6f3ef;
--text: #333;
--text-dark: #333;
--danger: #c86d6d;
--radius: 14px;
}
/* ================= GLOBAL ================= */
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
background: var(--bg);
color: var(--text);
}
/* ================= BUTTON SYSTEM ================= */
.btn {
background: var(--primary);
color: white;
border: 2px solid var(--accent);
padding: 12px 18px;
border-radius: var(--radius);
font-weight: bold;
cursor: pointer;
transition: 0.2s;
}
.btn:hover {
transform: translateY(-2px);
opacity: 0.95;
}
/* ================= SIDEBAR ================= */
.sidebar {
width: 230px;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(6px);
padding: 20px;
}
.logo {
font-size: 22px;
font-weight: bold;
margin-bottom: 30px;
}
/* NAV */
.nav-item {
display: block;
width: 100%;
padding: 12px;
margin-bottom: 10px;
border-radius: var(--radius);
border: 2px solid transparent;
background: transparent;
color: white;
cursor: pointer;
}
.nav-item:hover {
border-color: var(--accent);
}
.nav-item.active {
background: var(--primary);
border-color: var(--accent);
}
/* ================= MAIN ================= */
.main {
padding: 25px;
}
/* ================= CARDS ================= */
.card {
background: rgba(255,255,255,0.12);
border: 2px solid rgba(231,171,144,0.5);
border-radius: var(--radius);
padding: 20px;
}
.card h3 {
margin: 0;
font-size: 26px;
}
/* ================= MENU ================= */
.menu-card {
background: rgba(255,255,255,0.12);
border: 1.5px solid rgba(231,171,144,0.5);
border-radius: var(--radius);
padding: 14px;
transition: 0.2s;
}
.menu-card:hover {
transform: translateY(-4px);
border-color: var(--accent);
}
.menu-card-content {
display: flex;
align-items: center;
gap: 15px;
background: #f6f3ef;
border-radius: 20px;
padding: 10px;
}
.item-img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 10px;
}
.item-info {
flex: 1;
}
.item-title {
font-size: 16px;
font-weight: bold;
}
.item-price {
font-size: 14px;
color: #555;
}
.item-info h3 {
margin: 0;
}
.item-info p {
color: #f2f2f2;
}
/* ================= ACTION BUTTONS ================= */
.manager-action-btn {
background: var(--primary);
color: white;
border: 2px solid var(--accent);
padding: 10px;
border-radius: 10px;
cursor: pointer;
}
.delete-item-btn {
background: var(--danger);
color: white;
border: none;
}
/* ================= TABS ================= */
.tab-btn {
background: var(--primary);
border: 2px solid var(--accent);
color: white;
padding: 10px 18px;
border-radius: 999px;
}
.tab-btn.active {
box-shadow: 0 0 0 3px rgba(231,171,144,0.3);
}
/* ================= MODAL ================= */
.modal-box {
background: var(--light);
color: var(--text-dark);
border-radius: var(--radius);
}
/* ================= CART ================= */
.cart-panel {
background: var(--light);
}
.cart-item h4 {
color: black;
}
/* ================= INPUT ================= */
input, textarea {
border-radius: 10px;
padding: 10px;
border: 1px solid #ccc;
}
.dashboard {
display: flex;
height: 100vh;
}
/* LEFT SIDEBAR */
.sidebar {
width: 250px;
flex-shrink: 0;
}
/* RIGHT CONTENT */
.main {
flex: 1;
padding: 30px;
overflow-y: auto;
}
/* PAGE SWITCHING */
.page {
display: none;
}
.page.active {
display: block;
}
/* ================= ADD ITEM MODAL ================= */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
justify-content: center;
align-items: center;
z-index: 999;
}
.modal-content {
background: #0B0F14; /* luxury dark */
padding: 30px;
border-radius: 16px;
width: 350px;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
display: flex;
flex-direction: column;
gap: 12px;
}
/* Title */
.modal-content h2 {
color: #C9A227; /* gold */
text-align: center;
margin-bottom: 10px;
}
/* Inputs */
.modal-content input,
.modal-content select {
padding: 12px;
border-radius: 8px;
border: none;
background: #1a1f26;
color: white;
font-size: 14px;
}
/* Focus effect */
.modal-content input:focus,
.modal-content select:focus {
outline: 2px solid #C9A227;
}
/* Buttons */
.modal-content button {
padding: 12px;
border-radius: 8px;
border: none;
cursor: pointer;
font-weight: bold;
transition: 0.3s;
}
/* Save button */
/* Save button */
.modal-content button:first-of-type {
background: var(--primary);
color: var(--white);
border: 2px solid var(--accent);
}
.modal-content button:first-of-type:hover {
background: var(--accent);
color: var(--text-dark);
}
/* Cancel button */
.modal-content button:last-of-type {
background: #ddd;
color: var(--text-dark);
}
.modal-content button:last-of-type:hover {
background: #ccc;
}
.add-item-btn {
background: var(--primary);
color: var(--white);
padding: 12px 20px;
border-radius: var(--radius);
border: 2px solid var(--accent);
font-weight: bold;
font-size: 15px;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.add-item-btn:hover {
background: var(--accent);
color: var(--text-dark);
transform: translateY(-2px);
}
.add-item-btn:active {
transform: scale(0.96);
}
/* CASHER*/
.pos-app {
display: grid;
grid-template-columns: 220px 1fr 350px;
height: 100vh;
font-family: Arial;
}
/* SIDEBAR */
.sidebar {
background: #11161c;
color: white;
padding: 20px;
}
.sidebar button {
width: 100%;
margin-bottom: 10px;
padding: 12px;
border: none;
background: #222;
color: white;
cursor: pointer;
}
.sidebar button.active {
background: #788a73;
}
/* MAIN */
.main {
padding: 20px;
overflow-y: auto;
}
/* TABLES */
.tables-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 15px;
}
.table-card {
background: #f6f1ea;
border-radius: 10px;
padding: 15px;
cursor: pointer;
text-align: center;
}
.table-card.active {
border: 3px solid #788a73;
}
/* DETAILS */
.details {
border-left: 2px solid #eee;
padding: 20px;
background: #fafafa;
}
.order-item {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.pay-btn {
background: #788a73;
color: white;
border: none;
padding: 12px;
width: 100%;
margin-top: 20px;
cursor: pointer;
}
.table-card {
background: #f6f1ea;
color: #1a1a1a; /* 🔥 ADD THIS */
}
.table-card small {
color: #444; /* make status visible */
}
/* ================= CASHIER ROOT ================= */
.cashier-page {
font-family: 'Segoe UI', Arial, sans-serif;
background: #7f9278;
height: 100vh;
}
/* ================= LAYOUT ================= */
.cashier-page .pos-app {
display: grid;
grid-template-columns: 240px 1fr 320px;
height: 100%;
}
/* ================= SIDEBAR ================= */
.cashier-page .sidebar {
background: #0f1720;
color: white;
padding: 25px;
}
.cashier-page .sidebar h2 {
margin-bottom: 30px;
}
.cashier-page .nav-btn {
width: 100%;
padding: 14px;
margin-bottom: 10px;
border: none;
border-radius: 12px;
background: #1e2933;
color: white;
cursor: pointer;
transition: 0.2s;
}
.cashier-page .nav-btn:hover {
background: #2b3a45;
}
.cashier-page .nav-btn.active {
background: #788a73;
}
/* ================= TABLE GRID ================= */
.cashier-page .tables-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 20px;
padding: 30px;
}
/* ================= TABLE CARD ================= */
.cashier-page .table-card {
background: #f6f1ea;
border-radius: 16px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: 0.2s;
border: 2px solid transparent;
}
.cashier-page .table-card:hover {
transform: scale(1.04);
}
.cashier-page .table-card.active {
border: 2px solid #e7ab90;
}
/* ================= STATUS COLORS ================= */
.cashier-page .table-card small {
display: block;
margin-top: 10px;
font-weight: bold;
}
.cashier-page .table-card small.ready {
color: #ff9800;
}
.cashier-page .table-card small.served {
color: #2e7d32;
}
.cashier-page .table-card small.busy {
color: #c62828;
}
/* ================= DETAILS PANEL ================= */
.cashier-page .details {
background: #f6f1ea;
padding: 25px;
border-left: 3px solid #e7ab90;
}
.cashier-page .details h3 {
margin-bottom: 20px;
}
/* ================= ORDER ITEMS ================= */
.cashier-page .order-item {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid #ddd;
}
/* ================= BUTTON ================= */
.cashier-page button {
width: 100%;
padding: 12px;
margin-top: 15px;
border: none;
border-radius: 12px;
background: #788a73;
color: white;
font-size: 16px;
cursor: pointer;
transition: 0.2s;
}
.cashier-page button:hover {
background: #6a7c66;
}
/* ================= READY GLOW ================= */
.cashier-page .table-card.ready {
box-shadow: 0 0 12px rgba(255,165,0,0.6);
}
.cashier-page .table-card.served {
box-shadow: 0 0 10px rgba(46,125,50,0.5);
}
.cashier-page .ready-bar {
display: flex;
gap: 10px;
padding: 10px 20px;
background: #e7ab90;
border-bottom: 2px solid #d69a7f;
}
/* each ready table */
.cashier-page .ready-card {
background: white;
padding: 8px 14px;
border-radius: 10px;
display: flex;
align-items: center;
gap: 10px;
font-weight: bold;
}
/* serve button inside */
.cashier-page .ready-card button {
background: #788a73;
padding: 6px 10px;
font-size: 12px;
margin: 0;
}
.cashier-page .main {
overflow-y: auto;
}
.cashier-page .ready-card {
animation: popIn 0.3s ease;
}
@keyframes popIn {
from {
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.ready-bar {
position: sticky;
top: 0;
z-index: 1000;
display: flex;
gap: 12px;
overflow-x: auto;
padding: 12px;
background: #e7ab90;
border-bottom: 3px solid #d6957a;
}
/* CARD */
.ready-card {
min-width: 180px;
background: white;
border-radius: 12px;
padding: 10px;
cursor: pointer;
transition: 0.2s;
border-left: 6px solid #4CAF50;
}
.ready-card:hover {
transform: scale(1.05);
}
/* HEADER */
.ready-card .top {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
}
/* SOURCE BADGE */
.source {
font-size: 10px;
padding: 2px 6px;
border-radius: 6px;
color: white;
}
.source.qr { background: #7f9278; }
.source.cashier { background: #333; }
.source.delivery { background: #e91e63; }
/* BUTTON */
.ready-card button {
width: 100%;
margin-top: 6px;
border: none;
padding: 6px;
border-radius: 6px;
background: #7f9278;
color: white;
cursor: pointer;
}
#tablesContainer {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px;
padding: 20px;
}
.table-card {
background: #f6f1ea;
border-radius: 16px;
padding: 18px;
border: 2px solid #e7ab90;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* STATUS COLORS */
.table-card.ready {
border-color: orange;
}
.table-card.served {
border-color: green;
}
.table-card.busy {
border-color: #788a73;
}
/* HEADER */
.table-header {
display: flex;
justify-content: space-between;
align-items: center;
}
/* ITEMS */
.items {
margin: 10px 0;
min-height: 60px;
}
.items p {
margin: 4px 0;
}
/* FOOTER */
.table-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
/* BUTTONS */
.main {
display: grid;
grid-template-columns: 1fr 320px;
height: 100%;
}
.tables-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 20px;
padding: 20px;
}
.table-card {
background: #f6f1ea;
border-radius: 14px;
padding: 16px;
cursor: pointer;
transition: 0.2s;
border: 2px solid transparent;
}
.table-card:hover {
transform: scale(1.05);
}
.table-card.ready {
border-color: #7f9278;
}
.table-card.waiting {
border-color: #d9534f;
}
.table-card.preparing {
border-color: #f0ad4e;
}
/* RIGHT PANEL */
.details-panel {
background: #ffffff;
border-left: 2px solid #eee;
padding: 20px;
}
.details-panel h2 {
margin-bottom: 20px;
}
.order-item {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.pay-btn {
width: 100%;
padding: 14px;
background: #788a73;
color: white;
border: none;
border-radius: 10px;
margin-top: 20px;
cursor: pointer;
}.ready-card {
animation: popIn 0.3s ease;
}
@keyframes popIn {
from {
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.ready-card.warning {
border-left: 6px solid orange;
}
.ready-card.late {
border-left: 6px solid red;
animation: blink 1s infinite;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0.6; }
100% { opacity: 1; }
}
.ready-card {
min-width: 220px;
background: white;
border-radius: 14px;
padding: 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 10px;
border-left: 8px solid #4CAF50;
}
/* HEADER */
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.table-name {
font-size: 18px;
font-weight: bold;
}
/* BODY */
.card-body {
display: flex;
justify-content: space-between;
font-size: 14px;
color: #555;
}
/* BUTTON */
.action-btn {
padding: 10px;
border: none;
border-radius: 8px;
background: #7f9278;
color: white;
font-weight: bold;
cursor: pointer;
}
/* HEADER */
.ready-card .top {
display: flex;
justify-content: space-between;
align-items: center;
}
/* BIG TABLE TEXT */
.ready-card h4 {
font-size: 18px;
font-weight: bold;
}
/* ITEMS COUNT */
.ready-card p {
font-size: 14px;
color: #444;
}
/* TIME */
.ready-card small {
font-size: 12px;
color: #777;
}
/* BUTTON */
.ready-card button {
margin-top: 6px;
padding: 8px;
border: none;
border-radius: 8px;
background: #7f9278;
color: #333;
font-weight: bold;
cursor: pointer;
}
.ready-card .info {
display: flex;
justify-content: space-between;
font-size: 13px;
color: #555;
}
.source {
font-size: 11px;
padding: 4px 8px;
border-radius: 8px;
color: white;
font-weight: bold;
}
.mode-bar {
display: flex;
gap: 10px;
padding: 10px;
background: #f6f1ea;
}
.mode-btn {
flex: 1;
padding: 14px;
font-size: 16px;
border: none;
border-radius: 10px;
background: #ddd;
}
.mode-btn.active {
background: #7f9278;
color: white;
}
/* nneeeeeeewww versto*/
body {
margin: 0;
font-family: sans-serif;
}
/* TOP BAR */
.top-bar {
height: 70px;
background: #788a73;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
color: white;
}
.top-nav {
display: flex;
gap: 10px;
}
.nav-btn {
padding: 10px 16px;
background: #2f3f4a;
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
}
.nav-btn.active {
background: #e7ab90;
color: black;
}
/* MAIN SPLIT */
.pos-container {
display: grid;
grid-template-columns: 2fr 1fr;
height: calc(100vh - 70px);
}
/* LEFT */
.left-panel {
padding: 20px;
background: #7f9278;
}
/* RIGHT */
.right-panel {
background: #f5f3ef;
padding: 20px;
border-left: 3px solid #e7ab90;
}
/* TABLE GRID */
.tables-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 15px;
}
/* TABLE CARD */
.table-card {
background: white;
border-radius: 14px;
padding: 20px;
text-align: center;
cursor: pointer;
}
/* SUMMARY */
.summary {
margin-top: 20px;
}
/* ACTIONS */
.actions {
margin-top: 20px;
display: flex;
gap: 10px;
}
.pay-btn {
flex: 1;
background: green;
color: white;
border: none;
padding: 15px;
border-radius: 10px;
}
.cancel-btn {
flex: 1;
background: red;
color: white;
border: none;
padding: 15px;
border-radius: 10px;
}
/* VIEWS */
.view {
display: none;
}
.view.active {
display: block;
}
.right-panel {
background: #f5f3ef;
color: #222; /* 🔥 DARK TEXT */
}
.right-panel h3,
.right-panel p {
color: #222;
}
.table-card {
background: #ffffff;
color: #222;
border: 2px solid #e7ab90;
}
.table-card h3 {
font-size: 22px;
font-weight: bold;
}
.table-card p {
font-size: 18px;
}
.modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
}
.hidden {
display: none;
}
.modal-content {
background: white;
padding: 30px;
border-radius: 14px;
width: 300px;
}
.modal-content input {
width: 100%;
padding: 10px;
margin-top: 10px;
}
.methods {
display: flex;
gap: 10px;
margin-bottom: 15px;
}
.methods button {
flex: 1;
padding: 10px;
border-radius: 8px;
border: none;
background: #ddd;
}
.methods button.active {
background: #788a73;
color: white;
}
.quick-cash {
display: flex;
gap: 10px;
margin-top: 10px;
}
.quick-cash button {
flex: 1;
padding: 10px;
}
.modal-content {
background: #f5f3ef; /* clean light */
color: #222; /* 🔥 dark text */
}
.modal-content h2 {
color: #222;
font-size: 26px;
margin-bottom: 10px;
}
#payTotal {
color: #000;
font-size: 22px;
}
.methods button {
background: #e0e0e0;
color: #222;
font-weight: bold;
}
.methods button.active {
background: #788a73;
color: white;
}
.modal-actions button:first-child {
background: #788a73;
color: white;
font-size: 18px;
}
.modal-actions button:last-child {
background: #ddd;
color: #222;
}
.category-tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.category-tabs button {
padding: 8px 16px;
border-radius: 20px;
border: 2px solid #e7ab90;
background: transparent;
cursor: pointer;
}
.menu-grid {
display: grid;
grid-template-columns: 1fr; /* 🔥 ONE ITEM PER ROW */
gap: 15px;
padding: 10px;
}
.pos-item {
width: 100%;
}
.menu-card-content {
padding: 10px;
}
.menu-card {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
border: 2px solid #e7ab90;
border-radius: 12px;
background: #7f9278;
color: white;
}
.add-btn {
padding: 10px 20px;
border-radius: 10px;
border: none;
background: #e7ab90;
cursor: pointer;
}
.view {
display: none;
}
.view.active {
display: block;
}
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 20px;
}
.menu-grid-item {
background: #ffffff;
border-radius: 16px;
padding: 15px;
text-align: center;
position: relative;
transition: 0.2s;
}
.menu-grid-item:hover {
transform: scale(1.03);
}
.menu-img img {
width: 100%;
height: 120px;
object-fit: contain;
}
.menu-info h4 {
margin: 10px 0 5px;
}
.menu-category {
font-size: 12px;
color: #888;
}
.add-btn {
position: absolute;
bottom: 10px;
right: 10px;
background: #e7ab90;
border: none;
border-radius: 10px;
padding: 8px 12px;
cursor: pointer;
}
.menu-info h4 {
margin-top: 10px;
font-size: 16px;
font-weight: bold;
}
.menu-info b {
display: block;
margin-top: 5px;
color: #333;
}
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 20px;
}
/* CARD */
.pos-item {
background: #ffffff;
border-radius: 16px;
padding: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
}
/* IMAGE */
.pos-img img {
width: 100%;
height: 120px;
object-fit: contain;
}
/* TEXT */
.pos-info {
text-align: left;
color: #222; /* 🔥 BLACK TEXT */
}
.pos-info h4 {
margin: 10px 0 5px;
font-size: 16px;
}
.pos-category {
font-size: 12px;
color: #888;
}
/* BOTTOM ROW */
.pos-bottom {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
}
/* PRICE */
.pos-bottom b {
font-size: 14px;
color: #000;
}
/* ADD BUTTON */
.pos-bottom button {
background: #e7ab90;
border: none;
border-radius: 8px;
padding: 6px 10px;
cursor: pointer;
}
#newView {
background: #f6f6f6; /* light clean background */
padding: 20px;
}
/* CATEGORY CONTAINER */
.category-container {
display: flex;
gap: 15px;
margin-bottom: 25px;
}
/* CATEGORY BOX */
./* TOP CATEGORY BAR */
.category-top {
display: flex;
gap: 12px;
margin-bottom: 20px;
}
/* BOX */
.cat-box {
background: #ffffff;
color: #222; /* 🔥 FIX TEXT INVISIBLE */
padding: 10px 18px;
border-radius: 12px;
font-weight: 600;
font-size: 14px;
font-color: #000;
cursor: pointer;
border: 2px solid #e7ab90;
transition: 0.2s;
}
/* ACTIVE */
.cat-box.active {
background: #e7ab90;
color: white;
}
/* HOVER */
.cat-box:hover {
transform: translateY(-2px);
}
.cart-item {
display: flex;
justify-content: space-between;
margin: 8px 0;
}
.pay-btn {
width: 100%;
padding: 12px;
background: #7f9278;
color: white;
border: none;
border-radius: 10px;
margin-top: 15px;
cursor: pointer;
}
.details strong {
font-size: 16px;
color: #000;
}
.details small {
color: #666;
font-size: 13px;
}
.details {
gap: 10px;
}
.cart-qty-controls {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
}
.cart-qty-controls button {
background: #788a73;
color: white;
border: 2px solid #e7ab90;
border-radius: 8px;
padding: 4px 10px;
cursor: pointer;
font-weight: bold;
}
.cart-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.delete-btn {
background: #c86d6d;
color: white;
border: none;
border-radius: 8px;
padding: 6px 10px;
cursor: pointer;
}
/* 🔥 SPLIT BUTTON CONTAINER */
.order-type-split {
display: flex;
gap: 10px;
margin-top: 15px;
}
/* 🔥 EACH BUTTON = HALF WIDTH */
.type-btn {
flex: 1; /* 🔥 THIS MAKES THEM EQUAL */
padding: 14px;
border-radius: 12px;
border: 2px solid #e7ab90;
background: #788a73;
color: white;
font-weight: bold;
font-size: 14px;
cursor: pointer;
transition: 0.2s;
}
/* 🔥 HOVER */
.type-btn:hover {
opacity: 0.9;
}
/* 🔥 ACTIVE (SELECTED) */
.type-btn.active {
background: #e7ab90;
color: #333;
}
.pay-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.table-btn {
margin: 5px;
padding: 10px;
border-radius: 10px;
background: #788a73;
color: white;
border: none;
cursor: pointer;
}
.table-btn.active {
background: #e7ab90;
}
.right-panel,
.details,
.cart-panel,
.modal-content {
color: #000 !important;
}
.right-panel {
display: block;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
padding: 20px;
}
.stat-card {
background: #788a73;
padding: 16px;
border-radius: 16px;
text-align: center;
color: white;
}
.stat-card.big {
grid-column: span 2;
background: #e7ab90;
color: black;
font-size: 24px;
}
.stat-card.cash {
background: #4CAF50;
}
.stat-card.card {
background: #3f51b5;
}
.stats-filters {
display: flex;
gap: 10px;
margin-bottom: 15px;
flex-wrap: wrap;
}
.stats-filters button {
background: #788a73;
color: white;
border: none;
padding: 8px 14px;
border-radius: 8px;
}
.stats-filters button.active {
background: #e7ab90;
color: black;
}
.stats-filters input {
padding: 6px;
border-radius: 6px;
border: none;
}.stats-container {
padding: 20px;
}
/* FILTERS */
.stats-filters {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.stats-filters button {
background: #e7ab90;
border: none;
padding: 10px 16px;
border-radius: 10px;
cursor: pointer;
}
/* MAIN KPI */
.main-kpi {
background: #e7ab90;
padding: 30px;
border-radius: 20px;
text-align: center;
margin-bottom: 20px;
}
.main-kpi h1 {
font-size: 40px;
margin: 0;
}
/* KPI GRID */
.kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.kpi {
background: #788a73;
padding: 20px;
border-radius: 15px;
text-align: center;
}
.kpi.cash { background: #4CAF50; }
.kpi.card { background: #3F51B5; }
/* CHARTS */
.charts-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 20px;
}
/* INSIGHTS */
.insights-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 20px;
}.stats-page {
padding: 20px;
color: white;
}
/* HEADER */
.stats-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.stats-filters {
display: flex;
gap: 10px;
align-items: center;
}
/* BUTTONS */
.filter-btn,
.apply-btn {
background: #788a73;
border: none;
padding: 8px 14px;
color: white;
border-radius: 8px;
cursor: pointer;
}
.filter-btn.active {
background: #e7ab90;
}
/* KPI */
.kpi-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 15px;
margin-top: 20px;
}
.kpi-card {
background: #2b2b2b;
padding: 15px;
border-radius: 12px;
text-align: center;
}
.kpi-card h2 {
margin-top: 10px;
}
.kpi-card.revenue {
background: #3a4f3a;
}
.kpi-card.cash {
background: #4a5d4a;
}
.kpi-card.card {
background: #5d4a4a;
}
/* MAIN CHART */
.chart-main {
margin-top: 30px;
background: #2b2b2b;
padding: 20px;
border-radius: 12px;
}
/* BOTTOM */
.stats-bottom {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
margin-top: 20px;
}
.stat-box {
background: #2b2b2b;
padding: 20px;
border-radius: 12px;
}
/* INSIGHTS */
.insights {
display: flex;
flex-direction: column;
gap: 15px;
}
.mini-card {
background: #3a3a3a;
padding: 15px;
border-radius: 10px;
}
.top-nav {
display: flex;
gap: 16px;
padding: 16px;
background: #7f9278;
}
/* BUTTON */
.nav-btn {
background: #788a73;
color: white;
border: none;
border-radius: 20px;
padding: 14px 20px;
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
cursor: pointer;
transition: 0.2s;
}
/* ICON */
.nav-icon {
width: 24px;
height: 24px;
}
/* ACTIVE */
.nav-btn.active {
background: #2f3e46; /* darker */
}
/* HOVER */
.nav-btn:hover {
transform: translateY(-2px);
}
.nav-icon {
width: 24px;
height: 24px;
filter: brightness(0) invert(1);
}
.nav-btn:nth-child(3) {
background: #e7ab90; /* your accent color */
color: black;
}
.top-bar {
position: relative;
display: flex;
align-items: center;
padding: 10px 20px;
background: #7f9278;
}
.top-bar h2 {
position: absolute;
left: 20px;
}
.top-nav {
margin: 0 auto;
display: flex;
gap: 16px;
}
.pos-container {
display: flex;
}
/* DEFAULT */
.left-panel {
width: 70%;
}
.right-panel {
width: 30%;
}
/* 🔥 WHEN STATS ACTIVE */
.pos-container.full-width .left-panel {
width: 100%;
}
.pos-container.full-width .right-panel {
display: none;
}
.icon-btn {
border: none;
background: transparent;
cursor: pointer;
}
.icon-btn img {
width: 18px;
height: 18px;
}
.btn-icon {
width: 18px;
height: 18px;
margin-right: 8px;
vertical-align: middle;
}
.order-item-row {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
padding: 6px 10px;
border-bottom: 1px solid #ddd;
}
.item-name {
font-weight: 600;
}
.item-qty {
color: #666;
margin-right: 10px;
}
.item-actions {
display: flex;
gap: 5px;
}
.item-actions button {
border: none;
background: transparent;
cursor: pointer;
padding: 3px;
}
.item-actions img {
width: 16px;
height: 16px;
}.table-card {
background: white;
border-radius: 16px;
padding: 16px;
margin-bottom: 14px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
cursor: pointer;
transition: 0.2s;
}
.table-card:hover {
transform: translateY(-3px);
}
.table-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.table-header h3 {
margin: 0;
font-size: 18px;
}
.table-status {
padding: 4px 10px;
border-radius: 10px;
font-size: 12px;
font-weight: bold;
}
/* status colors */
.table-status.ready {
background: #e6f7ec;
color: #2e7d32;
}
.table-status.served {
background: #fff3cd;
color: #856404;
}
.table-status.busy {
background: #f8d7da;
color: #842029;
}
.table-body {
margin-top: 12px;
}
.table-total {
font-size: 20px;
font-weight: bold;
}
.table-open-btn {
margin-top: 14px;
width: 100%;
background: #7f9278;
color: white;
border: none;
padding: 10px;
border-radius: 10px;
font-weight: bold;
}
.order-item-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.item-left {
font-weight: bold;
}
.item-center {
display: flex;
align-items: center;
gap: 8px;
}
.item-center button {
width: 32px;
height: 32px;
border-radius: 8px;
border: none;
background: #7f9278;
color: white;
font-weight: bold;
}
.menu-section {
margin-bottom: 40px;
}
.sub-section {
margin-bottom: 25px;
}
.sub-section h3 {
font-size: 18px;
margin-bottom: 10px;
opacity: 0.8;
text-align: center; /* ✅ THIS centers the text */
}
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}
.pos-item {
padding: 12px;
border-radius: 12px;
}
.menu-section h2 {
font-size: 28px;
margin-bottom: 15px;
}
.pos-item button {
width: auto; /* ❌ remove full width */
padding: 8px 14px;
border-radius: 8px;
cursor: pointer;
}
.pos-item {
background: white;
border-radius: 12px;
padding: 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* 🔥 THIS FIXES YOUR BUG */
.add-btn {
width: 100%; /* only inside card */
padding: 10px;
border: none;
border-radius: 10px;
background: #7f9278;
color: white;
cursor: pointer;
}
/* 🔴 VERY IMPORTANT — override bad global rules */
/* ===== PAGE ===== */
body {
background:#7f9278;
font-family: 'Segoe UI', sans-serif;
margin: 0;
}
/* ===== CATEGORY BAR ===== */
.category-top {
display: flex;
gap: 10px;
padding: 12px;
overflow-x: auto;
}
.cat-box {
padding: 8px 16px;
border-radius: 20px;
background: white;
border: 2px solid #e7ab90;
cursor: pointer;
font-weight: 500;
transition: all 0.2s ease;
}
.cat-box:hover {
background: #f3e0d8;
}
.cat-box.active {
background: #e7ab90;
color: white;
}
/* ===== MENU SECTION ===== */
.menu-section {
margin: 25px 20px;
}
.menu-section h2 {
font-size: 28px;
margin-bottom: 10px;
color: white;
letter-spacing: 1px;
}
/* ===== SUBCATEGORY ===== */
.sub-section {
margin-bottom: 25px;
}
.sub-section h3 {
font-size: 16px;
margin-bottom: 10px;
color: white;
text-transform: capitalize;
}
/* ===== GRID ===== */
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}
/* ===== CARD ===== */
.pos-item {
background: white;
border-radius: 16px;
padding: 14px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pos-item:hover {
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
/* ===== TEXT ===== */
.pos-item h4 {
margin: 0;
font-size: 18px;
color: #222;
}
.pos-item span {
font-size: 14px;
color: #888;
}
.pos-item b {
font-size: 16px;
color: #000;
}
/* ===== BUTTON ===== */
.add-btn {
margin-top: 12px;
padding: 10px;
border: none;
border-radius: 12px;
background: #7f9278;
color: white;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.add-btn:hover {
background: #6d8067;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
.menu-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
}
.menu-title {
text-transform: capitalize;
}/* ===== ORDER BLOCK ===== */
.order-block {
background: #ffffff;
border-radius: 14px;
padding: 14px;
margin-bottom: 14px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
/* ===== HEADER ===== */
.order-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.order-header h4 {
margin: 0;
font-size: 18px;
font-weight: 600;
}
.order-item-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.item-main {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.item-actions {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.notes-btn {
background: #7f9278;
color: white;
border: none;
padding: 5px 10px;
border-radius: 6px;
}
.delete-btn {
background: #e74c3c;
color: white;
border: none;
padding: 5px 10px;
border-radius: 6px;
}
/* ===== HOVER ===== */
.notes-btn:hover {
background: #6c7d67;
}
.delete-btn:hover {
background: #c0392b;
}
.cancel-btn:hover {
background: #922b21;
}
.order-item-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #eee;
}
.item-left {
display: flex;
flex-direction: column;
}
.item-name {
font-weight: 600;
font-size: 16px;
}
.item-notes {
font-size: 13px;
color: #777;
}
.item-meta {
font-size: 12px;
color: #aaa;
}
.item-right {
display: flex;
gap: 6px;
}
.notes-btn {
background: #7f9278;
color: white;
border: none;
padding: 5px 10px;
border-radius: 6px;
}
.delete-btn {
background: #e74c3c;
color: white;
border: none;
padding: 5px 10px;
border-radius: 6px;
}
.order-item-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.item-main {
flex: 1;
}
.item-actions {
display: flex;
gap: 6px;
}
/* make buttons visible */
.item-actions button {
background: #7f9278;
color: white;
border: none;
padding: 4px 8px;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
}
.item-actions button {
background: #95a5a6;
}
.item-actions button:last-child {
background: #e67e22; /* delete item softer */
}
.cart-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
border-bottom: 1px solid #ddd;
}
.cart-left {
flex: 1;
}
.cart-name {
font-weight: bold;
font-size: 18px;
}
.cart-price {
font-size: 14px;
color: #777;
}
.cart-center {
display: flex;
align-items: center;
gap: 10px;
}
.cart-center button {
width: 40px;
height: 40px;
border-radius: 10px;
background: #788a73;
color: white;
border: none;
font-size: 18px;
}
.cart-right {
text-align: right;
}
.cart-total {
font-weight: bold;
}
.cart-right button {
margin-top: 5px;
background: #e74c3c;
color: white;
border: none;
padding: 5px 10px;
border-radius: 6px;
}
.pos-container {
display: flex;
height: calc(100vh - 100px); /* adjust for top bar */
}
.left-panel {
width: 65%;
overflow-y: auto;
padding: 10px;
}.right-panel {
width: 35%;
border-left: 3px solid #e7ab90;
background: #f6f3ef;
/* 🔥 THIS IS THE IMPORTANT PART */
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
padding: 20px;
}
.right-panel {
box-shadow: -5px 0 15px rgba(0,0,0,0.1);
}.right-panel {
border-radius: 0;
}
.cancel-btn {
background: transparent;
color: #e74c3c;
border: 2px solid #e74c3c;
}
.cancelled-badge {
background: red;
color: white;
padding: 4px 8px;
margin-left: 10px;
border-radius: 6px;
}
.cancel-btn {
background: #c0392b;
color: white;
}
.undo-btn {
background: #27ae60;
color: white;
}.cancel-btn {
background: #c0392b;
color: white;
padding: 6px 10px;
border-radius: 6px;
}
.undo-btn {
background: #27ae60;
color: white;
padding: 6px 10px;
border-radius: 6px;
}
.cancelled-badge {
background: red;
color: white;
padding: 3px 8px;
margin-left: 10px;
border-radius: 5px;
}
.pay-btn.disabled {
background: gray;
pointer-events: none;
}.order-block {
background: #f6f3ef;
border-radius: 16px;
padding: 16px;
margin-bottom: 20px;
}
.order-title {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 20px;
}
.order-actions {
margin-top: 10px;
display: flex;
justify-content: flex-end;
gap: 10px;
}
.cancel-btn {
background: #e74c3c;
color: white;
border: none;
padding: 6px 12px;
border-radius: 8px;
font-weight: bold;
}
.undo-btn {
background: #2ecc71;
color: white;
border: none;
padding: 6px 12px;
border-radius: 8px;
font-weight: bold;
}
.cancelled-badge {
background: #c0392b;
color: white;
padding: 4px 8px;
border-radius: 6px;
font-size: 12px;
}.cancelled-badge {
background: red;
color: white;
padding: 4px 8px;
border-radius: 6px;
margin-left: 10px;
}
.order-block.cancelled {
opacity: 0.6;
}
.cancel-btn {
background: #e74c3c;
color: white;
border: none;
padding: 6px 12px;
border-radius: 8px;
font-size: 12px;
cursor: pointer;
}
.cancel-btn:hover {
background: #c0392b;
}
.delete-btn {
background: #e67e22;
color: white;
border: none;
padding: 6px 10px;
border-radius: 6px;
cursor: pointer;
}
.delete-btn:hover {
background: #d35400;
}
.delete-btn.disabled {
background: #aaa;
cursor: not-allowed;
}
.pay-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}.sub-bar {
display: flex;
flex-wrap: wrap; /* allows wrapping to next line */
justify-content: center; /* ✅ CENTER BUTTONS */
gap: 10px; /* spacing between buttons */
margin-top: 10px;
}#itemModal {
display: none;
}
#itemModal.show {
display: flex;
}
.sub-bar {
display: none;
}
.sub-bar {
display: flex;
flex-wrap: wrap; /* 🔥 allows wrapping nicely */
justify-content: center;
gap: 10px;
margin-bottom: 15px;
}
.menu-tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.sub-section h3 {
text-align: center;
margin-top: 20px;
}@media (max-width: 600px) {
.menu-grid {
grid-template-columns: 1fr; /* 🔥 FIX */
}
}
.menu-tabs button {
font-size: 14px;
padding: 8px 12px;
}
.sub-bar button {
font-size: 13px;
padding: 6px 10px;
}
.item-title {
font-size: 16px;
font-weight: bold;
margin: 5px 0;
}
.item-price {
font-size: 14px;
color: #555;
}
.item-action {
display: flex;
align-items: center;
}
.add-cart-btn {
padding: 8px 14px;
}
.menu-grid {
display: grid;
grid-template-columns: 1fr; /* 🔥 ONE ITEM PER ROW */
gap: 15px;
padding: 10px;
}
.sub-section {
width: 100%;
}
.item-info h3 {
color: #000; /* 🔥 black */
}
.menu-card-content .item-info h3 {
color: #000 !important;
}
.item-info span {
color: #333;
}
.menu-card-content {
color: #000; /* default text */
}
.note {
display: block !important;
color: red;
}
.order-item {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px;
border-radius: 12px;
background: #fff;
}
/* MAIN TEXT */
.item-line {
font-size: 18px;
font-weight: 600;
}
/* NOTE BOX */
.note {
background: #f5e6c8;
padding: 6px 10px;
border-radius: 8px;
font-size: 14px;
}
/* CRITICAL NOTE */
.note.critical {
background: #ffe5e5;
color: #c40000;
font-weight: bold;
}
/* WHOLE ITEM HIGHLIGHT */
.critical-item {
border-left: 5px solid red;
}
/*_______*/
body {
background: #6f8168;
color: #f5f5f5;
}
body::before {
content: "";
position: fixed;
inset: 0;
background:
url('leaves.png') no-repeat top left,
url('leaves.png') no-repeat bottom right,
url('leaves.png') repeat;
background-size:
420px,
420px,
220px;
opacity: 0.20;
pointer-events: none;
}
.pos-item {
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
border-radius: 12px;
padding: 16px;
border: 1px solid rgba(255,255,255,0.1);
}
body::before {
filter: brightness(1.3) contrast(1.2);
}
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.order-status {
background: #e7ab90;
padding: 5px 10px;
border-radius: 8px;
color: white;
font-size: 12px;
}
.panel-body {
max-height: 400px;
overflow-y: auto;
}
.order-item-row {
padding: 10px;
border-bottom: 1px solid #eee;
}
.item-name {
font-weight: bold;
}
.item-notes {
font-size: 13px;
color: #c0392b;
margin-top: 4px;
}
.panel-footer {
margin-top: 15px;
border-top: 2px solid #eee;
padding-top: 10px;
font-weight: bold;
}.order-panel {
display: flex;
flex-direction: column;
height: 100%;
padding: 15px;
}
.order-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.status {
background: #e7ab90;
color: white;
padding: 6px 12px;
border-radius: 10px;
font-size: 12px;
}
.order-items {
flex: 1;
overflow-y: auto;
}
.order-item-row {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.item-left {
display: flex;
gap: 10px;
}
.qty {
font-weight: bold;
}
.name {
font-weight: 500;
}
.order-footer {
border-top: 2px solid #eee;
padding-top: 15px;
}
.total {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.pay-btn {
width: 100%;
padding: 12px;
background: #788a73;
color: white;
border: none;
border-radius: 10px;
font-size: 16px;
cursor: pointer;
}
.pay-btn:hover {
opacity: 0.9;
}.item-actions {
display: flex;
align-items: center;
gap: 6px;
}
.item-actions button {
padding: 5px 10px;
border: none;
border-radius: 6px;
cursor: pointer;
}
.delete-btn {
background: #e74c3c;
color: white;
}
.item-row {
display: flex;
justify-content: space-between;
align-items: center;
}
/* ORDER CARD TEXT */
.order-card {
background: #ffffff;
color: #222; /* strong readable dark */
}
/* Titles */
.order-card h2,
.order-card h3 {
color: #111;
font-weight: 600;
}
/* Labels (Delivery, Status, etc) */
.order-card p {
color: #444;
}
/* Total */
.order-card .total {
color: #000;
font-weight: bold;
}
/* Buttons */
.order-card button {
color: #fff;
}.payment-panel {
background: #ffffff;
color: #222;
}
.payment-panel h2 {
color: #000;
}
.payment-panel p {
color: #444;
}
.payment-panel .amount {
color: #000;
font-weight: bold;
}
.filter-tabs button {
color: #fff;
background: rgba(255,255,255,0.1);
}
.filter-tabs button.active {
background: #e7ab90;
color: #000;
}.menu-page {
background: #f6f3ef; /* solid background */
opacity: 1; /* 🔥 remove any fading */
}
.menu-tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.menu-tabs button {
background: transparent;
border: 2px solid #e7ab90;
color: #333;
padding: 8px 16px;
border-radius: 20px;
font-weight: 500;
cursor: pointer;
}
.menu-tabs button.active {
background: #e7ab90;
color: #fff;
}
.sub-section h3 {
text-align: center;
color: #333; /* 🔥 visible */
font-size: 22px;
font-weight: 600;
margin: 20px 0 10px;
}
.sub-section h4 {
text-align: center;
color: #777; /* lighter subtitle */
font-size: 16px;
margin-bottom: 20px;
}.menu-card {
background: #ffffff;
border-radius: 14px;
padding: 15px 20px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 🔥 depth */
}.menu-card h4 {
margin: 0;
color: #222;
font-size: 18px;
}
.menu-card p {
margin: 0;
color: #666;
font-size: 14px;
}.menu-card button {
background: #788a73;
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 10px;
font-weight: 500;
cursor: pointer;
transition: 0.2s;
}
.menu-card button:hover {
background: #5f6f5a;
}/* 🔥 FULL SCREEN OVERLAY */
.payment-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
}
/* 🔥 CENTER BOX */
.payment-box {
width: 320px;
background: #fff;
border-radius: 14px;
padding: 20px;
text-align: center;
}
/* 🔥 DISPLAY */
#amountInput {
font-size: 28px;
margin-bottom: 15px;
}
/* 🔥 GRID KEYPAD */
.keypad {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
/* 🔥 BUTTONS */
.keypad button {
padding: 15px;
font-size: 18px;
border-radius: 8px;
border: none;
background: #eee;
cursor: pointer;
}
/* 🔥 METHODS */
.methods {
display: flex;
justify-content: space-between;
margin-top: 15px;
}
.methods button {
width: 48%;
padding: 12px;
border-radius: 8px;
border: none;
background: #ff7a00;
color: white;
}
/* 🔥 SUMMARY */
.summary {
margin-top: 15px;
text-align: left;
}
.keypad {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}.payment-modal {
display: none; /* 🔥 IMPORTANT */
}.keypad button {
width: auto;
}.payment-modal {
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
background: rgba(0,0,0,0.5);
display:flex;
justify-content:center;
align-items:center;
}.payment-box {
background: #ffffff;
color: #222; /* 🔥 FIX TEXT */
}
/* display */
#amountInput {
font-size: 32px;
font-weight: bold;
color: #111;
}
/* keypad buttons */
.keypad button {
background: #f0f0f0;
color: #333;
font-weight: bold;
}
/* hover */
.keypad button:hover {
background: #ddd;
}
/* methods */
.methods button {
background: #ff7a00;
color: white;
font-weight: bold;
}
/* confirm */
.payment-box button:last-child {
background: #6f8369;
color: white;
font-weight: bold;
}.payments-list {
margin-top: 10px;
text-align: left;
}
.payment-row {
background: #f6f6f6;
padding: 6px;
border-radius: 6px;
margin-bottom: 5px;
display: flex;
justify-content: space-between;
}.add-item-btn {
width: 100%;
margin: 10px 0;
padding: 12px;
background: #e7ab90;
border-radius: 10px;
font-weight: bold;
}
.menu-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.menu-card {
padding: 10px;
background: #f6f3ef;
border-radius: 10px;
cursor: pointer;
text-align: center;
}
.payment-box {
width: 520px; /* 🔥 bigger */
max-height: 85vh; /* 🔥 prevent overflow */
overflow-y: auto; /* 🔥 scroll inside */
background: #f6f3ef;
border-radius: 20px;
padding: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}.payment-modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.4);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}.modal-header {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 15px;
}
.modal-header h2 {
font-size: 26px;
margin: 5px 0;
}
.back-btn {
align-self: flex-start;
background: #788a73;
color: white;
border: none;
padding: 8px 14px;
border-radius: 10px;
cursor: pointer;
}.item-row {
display: flex;
justify-content: space-between;
align-items: center;
background: white;
border-radius: 12px;
padding: 10px;
margin-bottom: 8px;
}
.qty-control {
display: flex;
align-items: center;
gap: 8px;
}
.qty-control button {
background: #788a73;
color: white;
border: none;
width: 28px;
height: 28px;
border-radius: 8px;
}.add-item-btn {
width: 100%;
background: #788a73;
color: white;
padding: 14px;
border-radius: 14px;
font-size: 18px;
margin: 12px 0;
border: none;
cursor: pointer;
}.modal-menu-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.modal-menu-card {
background: white;
border: 2px solid #e7ab90;
border-radius: 12px;
padding: 12px;
text-align: center;
cursor: pointer;
transition: 0.2s;
}
.modal-menu-card:hover {
background: #e7ab90;
color: white;
}.actions {
display: flex;
gap: 10px;
margin-top: 15px;
}
.actions button {
flex: 1;
padding: 14px;
border-radius: 12px;
border: none;
font-size: 16px;
}
.actions .danger {
background: #d9534f;
color: white;
}
.actions .pay {
background: #788a73;
color: white;
}.modal-total {
text-align: center;
font-size: 20px;
font-weight: bold;
margin-top: 10px;
}.item-row {
display: flex;
align-items: center;
justify-content: space-between;
background: white;
border-radius: 14px;
padding: 12px 16px;
margin-bottom: 10px;
}
.item-name {
font-size: 18px;
font-weight: 600;
width: 40%;
}.qty-control {
display: flex;
align-items: center;
gap: 8px;
}
.qty-control button {
width: 32px;
height: 32px;
border-radius: 8px;
border: none;
background: #788a73;
color: white;
font-size: 18px;
cursor: pointer;
}
.qty-control span {
min-width: 20px;
text-align: center;
font-weight: bold;
}.delete-btn {
background: transparent;
border: none;
font-size: 18px;
cursor: pointer;
}.add-item-btn {
width: 100%;
padding: 16px;
background: linear-gradient(135deg, #788a73, #5f725c);
color: white;
border-radius: 16px;
border: none;
font-size: 18px;
font-weight: 600;
margin: 15px 0;
cursor: pointer;
}.modal-total {
text-align: center;
font-size: 22px;
font-weight: bold;
margin: 15px 0;
}.actions {
display: flex;
gap: 12px;
}
.actions button {
flex: 1;
padding: 16px;
border-radius: 14px;
border: none;
font-size: 16px;
font-weight: 600;
}
.actions .danger {
background: #d9534f;
color: white;
}
.actions .pay {
background: #788a73;
color: white;
}.actions .pay:hover {
background: #5f725c;
}.change-box {
margin-top: 10px;
padding: 10px;
background: #e7f7e7;
color: #2e7d32;
border-radius: 8px;
font-weight: bold;
text-align: center;
}
.hidden {
display: none;
}
button:disabled {
opacity: 0.5;
pointer-events: none;
}.side-panel {
position: fixed;
right: 0;
top: 0;
width: 320px;
height: 100%;
background: #f6f3ef;
border-left: 3px solid #e7ab90;
padding: 15px;
box-shadow: -5px 0 10px rgba(0,0,0,0.1);
z-index: 999;
}
.hidden {
display: none;
}
.table-card.active {
border: 2px solid #e7ab90;
}
.table-card.empty {
opacity: 0.5;
}
.table-meta {
font-size: 12px;
opacity: 0.7;
}
.status.payment { background: #4CAF50; color:white; }
.status.ready { background: #f44336; color:white; }
.status.progress { background: #ff9800; color:white; }
/* ================= BASE ================= */
body.cashier-page {
margin: 0;
font-family: Arial, sans-serif;
}
/* ================= TOP BAR ================= */
.top-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: #788a73;
color: white;
}
.top-nav {
display: flex;
gap: 10px;
}
.nav-btn {
background: #2c3e50;
color: white;
border: none;
padding: 8px 12px;
border-radius: 8px;
cursor: pointer;
}
.nav-btn.active {
background: #e7ab90;
color: black;
}
/* ================= READY BAR ================= */
.ready-bar {
position: relative; /* 🔥 FIXED */
z-index: 10;
background: #e7ab90;
padding: 10px;
}
/* ================= MAIN ================= */
.pos-container {
display: flex;
}
/* ================= LEFT PANEL ================= */
.left-panel {
width: 100%;
padding: 20px;
}
/* ================= TABLE GRID ================= */
.tables-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
/* ================= TABLE CARD ================= */
.table-card {
background: #f6f3ef;
border-radius: 14px;
padding: 15px;
cursor: pointer;
transition: 0.2s;
border: 2px solid transparent;
}
.table-card:hover {
transform: scale(1.02);
}
.table-card.active {
border: 2px solid #e7ab90;
}
.table-card.empty {
opacity: 0.5;
}
/* ================= TABLE HEADER ================= */
.table-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.table-price {
font-size: 26px;
font-weight: bold;
margin-top: 10px;
}
/* ================= STATUS ================= */
.status {
padding: 5px 10px;
border-radius: 10px;
font-size: 12px;
color: white;
}
.status.payment { background: #4CAF50; }
.status.ready { background: #f44336; }
.status.progress { background: #ff9800; }
/* ================= META ================= */
.table-meta {
font-size: 12px;
opacity: 0.7;
margin-top: 5px;
}
/* ================= SIDE PANEL ================= */
.side-panel {
position: fixed;
top: 0;
right: 0;
width: 350px;
height: 100%;
background: #f6f3ef;
z-index: 99999; /* 🔥 FIX */
box-shadow: -5px 0 15px rgba(0,0,0,0.2);
padding: 20px;
display: flex;
flex-direction: column;
overflow-y: auto;
}
/* REMOVE ANY FADE */
.side-panel * {
opacity: 1 !important;
}
/* ================= PANEL HEADER ================= */
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.panel-header button {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
}
/* ================= PANEL BODY ================= */
#panelBody {
margin-top: 15px;
flex: 1;
}
/* ================= ITEM ROW ================= */
.item-row {
background: white;
padding: 10px;
border-radius: 10px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
}
/* ================= PANEL ACTIONS ================= */
.panel-actions {
margin-top: 15px;
display: flex;
flex-direction: column;
gap: 10px;
}
.panel-actions button {
padding: 15px;
border-radius: 10px;
border: none;
font-size: 16px;
cursor: pointer;
}
/* ADD BUTTON */
.panel-actions button:first-child {
background: #788a73;
color: white;
}
/* PAY BUTTON */
.panel-actions button:last-child {
background: #788a73;
color: white;
}
/* ================= HIDDEN ================= */
.hidden {
display: none !important;
}
/* ================= PAYMENT MODAL ================= */
.payment-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 100000; /* 🔥 ABOVE PANEL */
}
.payment-box {
background: white;
padding: 20px;
border-radius: 15px;
width: 300px;
}
/* ================= KEYPAD ================= */
.keypad {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 10px 0;
}
.keypad button {
padding: 15px;
font-size: 18px;
}
/* ================= METHODS ================= */
.methods {
display: flex;
justify-content: space-between;
gap: 5px;
}
.methods button {
flex: 1;
padding: 10px;
}
/* ================= SUMMARY ================= */
.summary {
margin-top: 10px;
}
.change-box {
margin-top: 10px;
font-weight: bold;
}
.left-panel {
flex: 1;
display: block;
overflow-y: auto;
}
.menu-grid {
display: grid;
gap: 10px;
}.pos-container {
display: flex;
height: 100vh; /* 🔥 REQUIRED */
}
.left-panel {
flex: 1;
overflow-y: auto;
}
.view.active {
display: block;
height: 100%; /* 🔥 IMPORTANT */
}
.menu-grid {
display: grid;
gap: 10px;
padding: 20px;
}html, body {
height: 100%;
}
.pos-container {
display: flex;
height: 100vh; /* 🔥 critical */
}
.left-panel {
flex: 1;
min-height: 100vh; /* 🔥 force height */
overflow-y: auto;
}
.view {
display: none;
height: 100%;
}
.view.active {
display: block;
height: 100%; /* 🔥 critical */
}
#menuContainer {
min-height: 500px; /* 🔥 debug force */
}html, body {
height: 100%;
margin: 0;
}
.pos-container {
display: flex;
height: calc(100vh - 60px); /* 🔥 adjust if top-bar exists */
}
.left-panel {
flex: 1;
display: flex;
flex-direction: column;
}
.view {
display: none;
flex: 1; /* 🔥 THIS is the key */
overflow-y: auto; /* allow scroll */
}
.view.active {
display: flex; /* 🔥 NOT block */
flex-direction: column;
}
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
padding: 15px;
}
.view {
display: none;
}
.view.active {
display: flex; /* 🔥 IMPORTANT */
flex-direction: column; /* 🔥 IMPORTANT */
height: 100%; /* 🔥 CRITICAL */
}.pos-container {
display: flex;
height: 100vh;
}
.left-panel {
flex: 1;
display: flex;
flex-direction: column;
}
.menu-grid {
flex: 1;
overflow-y: auto;
}
.pos-container {
display: flex;
height: calc(100vh - 80px);
}
.left-panel {
flex: 3;
overflow-y: auto;
}
.right-panel {
flex: 1;
background: #f6f3ef;
border-left: 2px solid #e7ab90;
display: flex;
flex-direction: column;
position: relative;
}
.panel-actions {
margin-top: auto;
padding: 15px;
display: flex;
flex-direction: column;
gap: 10px;
}#panelBody {
background: #fff;
color: #333;
padding: 15px;
}
.pos-container {
display: flex;
height: 100vh;
}
.menu-area {
width: 70%;
overflow-y: auto;
}
.cart-panel {
width: 10%;
background: #f6f3ef;
padding: 20px;
border-left: 2px solid #e7ab90;
}
.cart-item {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.view {
display: none;
}
.view.active {
display: block;
}.free {
background: #d4edda;
color: #2e7d32;
}body {
margin: 0;
height: 100vh;
overflow: hidden; /* prevent full page scroll */
}
.main-container {
height: 100vh;
display: flex;
flex-direction: column;
}
/* 🔥 THIS is the important part */
.content {
flex: 1;
overflow-y: auto;
padding: 15px;
}.bottom-bar {
position: sticky;
bottom: 0;
background: #f6f3ef;
padding: 10px;
border-top: 2px solid #e7ab90;
}.total {
position: absolute;
bottom: 10px;
}.order-total {
margin-top: 10px;
font-weight: bold;
text-align: right;
}body {
margin: 0;
height: 100vh;
overflow: hidden;
}
.pos-container {
display: flex;
height: calc(100vh - 120px); /* adjust for top bar + ready bar */
}
/* LEFT */
.left-panel {
flex: 2;
overflow-y: auto;
}
/* RIGHT */
.right-panel {
flex: 1;
background: #f6f3ef;
border-left: 3px solid #e7ab90;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}.right-content {
flex: 1;
overflow-y: auto;
padding: 15px;
}
.right-bottom {
padding: 15px;
border-top: 2px solid #e7ab90;
background: #fff;
}.payment-modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
}
.payment-box {
background: white;
padding: 20px;
border-radius: 12px;
}
.hidden {
display: none;
}
.menu-section {
overflow-y: auto;
}/* ===== MENU CLEAN FIX ===== */
.menu-section {
margin: 25px 20px;
}
.sub-section h3 {
color: white;
text-align: center;
margin-bottom: 10px;
}
/* GRID */
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}
/* CARD */
.pos-item {
background: white;
border-radius: 16px;
padding: 14px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
justify-content: space-between;
transition: 0.2s;
}
.pos-item:hover {
transform: translateY(-3px);
}
/* TEXT */
.pos-item h4 {
margin: 0;
font-size: 18px;
color: #222;
}
.pos-item p {
color: #666;
font-size: 14px;
}
/* PRICE */
.pos-item b {
font-size: 16px;
color: #000;
}
/* BUTTON */
.add-btn {
margin-top: 12px;
padding: 10px;
border-radius: 10px;
border: none;
background: #7f9278;
color: white;
cursor: pointer;
}body {
overflow-y: auto;
}.pos-container {
min-height: 100vh; /* ✅ allows growth */
}.left-panel {
overflow-y: auto;
height: 100vh;
}.menu-page {
overflow-y: auto;
max-height: 100vh;
}.orders-items {
display: flex;
flex-direction: column; /* ✅ makes items row by row */
gap: 15px;
}
.order-item {
display: flex;
justify-content: space-between;
align-items: center;
background: #f6f3ef;
padding: 12px;
border-radius: 10px;
}.orders-items {
display: grid;
grid-template-columns: 1fr; /* ✅ one column only */
gap: 15px;
}/* 🔥 FORCE vertical layout */
.orders-items,
.order-list,
.items-container,
#orderItems {
display: flex !important;
flex-direction: column !important;
}
.order-item {
display: flex;
justify-content: space-between;
align-items: center;
}
.menu-grid { display: grid; }
.order-list { display: flex; flex-direction: column; }
#orderItems {
display: flex !important;
flex-direction: column !important;
gap: 15px;
}
.order-items {
display: flex;
flex-direction: column;
gap: 15px;
}.order-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
border-radius: 12px;
background: #f6f3ef;
}
body {
margin: 0;
padding: 0;
/* 🌿 Base green color */
background-color: #6f8667;
/* 🌿 Leaf overlay */
background-image: url('leaves.png');
/* repeat pattern */
background-repeat: repeat;
/* size of leaves */
background-size: 300px;
/* soften the leaves */
background-blend-mode: overlay;
/* smooth look */
font-family: 'Segoe UI', sans-serif;
}
body {
margin: 0;
padding: 0;
background:
linear-gradient(rgba(111, 134, 103, 0.95), rgba(111, 134, 103, 0.95)),
url('leaves.png');
background-size: cover, 300px;
background-repeat: no-repeat, repeat;
background-position: center, center;
font-family: 'Segoe UI', sans-serif;
}
body {
background: #6f8168;
color: #f5f5f5;
}
body::before {
content: "";
position: fixed;
inset: 0;
background:
url('leaves.png') no-repeat top left,
url('leaves.png') no-repeat bottom right,
url('leaves.png') repeat;
background-size:
420px,
420px,
220px;
opacity: 0.20;
pointer-events: none;
}
.pos-item {
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
border-radius: 12px;
padding: 16px;
border: 1px solid rgba(255,255,255,0.1);
}
body::before {
filter: brightness(1.3) contrast(1.2);
}
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.order-status {
background: #e7ab90;
padding: 5px 10px;
border-radius: 8px;
color: white;
font-size: 12px;
}
.panel-body {
max-height: 400px;
overflow-y: auto;
}
.order-item-row {
padding: 10px;
border-bottom: 1px solid #eee;
}
.item-name {
font-weight: bold;
}
.item-notes {
font-size: 13px;
color: #c0392b;
margin-top: 4px;
}
.panel-footer {
margin-top: 15px;
border-top: 2px solid #eee;
padding-top: 10px;
font-weight: bold;
}.order-panel {
display: flex;
flex-direction: column;
height: 100%;
padding: 15px;
}
.order-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.status {
background: #e7ab90;
color: white;
padding: 6px 12px;
border-radius: 10px;
font-size: 12px;
}
.order-items {
flex: 1;
overflow-y: auto;
}
.order-item-row {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.item-left {
display: flex;
gap: 10px;
}
.qty {
font-weight: bold;
}
.name {
font-weight: 500;
}
.order-footer {
border-top: 2px solid #eee;
padding-top: 15px;
}
.total {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.pay-btn {
width: 100%;
padding: 12px;
background: #788a73;
color: white;
border: none;
border-radius: 10px;
font-size: 16px;
cursor: pointer;
}
body {
margin: 0;
padding: 0;
background-color: #6f8667;
background-image: url('leaves.png');
background-repeat: repeat;
background-size: 250px;
font-family: 'Segoe UI', sans-serif;
}
.menu-page {
background: #f6f3ef; /* clean light */
border-radius: 20px;
margin: 40px auto;
padding: 30px;
width: 90%;
max-width: 1200px;
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}
.menu-card {
background: #ffffff;
border-radius: 16px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
h1, h2, h3 {
color: #333;
}
p {
color: #555;
}html, body {
margin: 0;
padding: 0;
height: 100%;
background-color: #6f8667;
background-image: url('leaves.png');
background-repeat: repeat;
background-size: 250px;
}
.container,
.menu-page,
.main,
.wrapper {
background: transparent;
}
body {
background:
#6f8667 url('leaves.png') repeat;
background-size: 250px;
opacity: 1;
}
.menu-card {
width: 260px;
background: #f8f6f2;
border-radius: 20px;
padding: 18px;
box-shadow: 0 8px 25px rgba(0,0,0,0.08);
transition: 0.3s;
}
.menu-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
/* IMAGE */
.card-img {
width: 70px;
height: 70px;
border-radius: 16px;
object-fit: cover;
margin-bottom: 10px;
}
/* CONTENT */
.card-content h3 {
font-size: 18px;
font-weight: 600;
color: #2f2f2f;
margin: 10px 0;
}
/* PRICE */
.price {
font-size: 16px;
font-weight: 500;
color: #6f8667;
margin-bottom: 15px;
}
/* BUTTON */
.add-btn {
width: 100%;
padding: 12px;
background: #6f8667;
color: white;
border: none;
border-radius: 12px;
font-weight: 600;
cursor: pointer;
transition: 0.2s;
}
.add-btn:hover {
background: #5e7557;
}.menu-card {
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.menu-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.add-btn {
transition: all 0.2s ease;
}
.add-btn:active {
transform: scale(0.95);
}
.menu-card {
opacity: 0;
transform: translateY(20px);
animation: fadeUp 0.6s ease forwards;
}
.menu-card:nth-child(1) { animation-delay: 0.1s; }
.menu-card:nth-child(2) { animation-delay: 0.2s; }
.menu-card:nth-child(3) { animation-delay: 0.3s; }
@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.add-btn:hover {
background: #5e7557;
box-shadow: 0 0 15px rgba(111,134,103,0.4);
}
.menu-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 18px;
border-radius: 12px;
background: #f8f6f2;
cursor: pointer;
transition: 0.2s;
}
.menu-item:hover {
background: #e9f0e6;
transform: scale(1.02);
}
.menu-grid {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
}.price {
font-size: 18px;
font-weight: bold;
color: #6f8667;
}.right-panel {
position: sticky;
top: 0;
height: 100vh;
background: #ffffff;
padding: 20px;
border-left: 2px solid #eee;
}
.cart {
position: fixed;
right: 0;
top: 0;
width: 320px; /* 🔥 smaller */
height: 100vh;
background: #ffffff;
display: flex;
flex-direction: column;
box-shadow: -5px 0 20px rgba(0,0,0,0.1);
}
.cart-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid #eee;
}
.cart-items {
flex: 1;
overflow-y: auto;
padding: 15px;
}
.cart-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding: 10px;
border-radius: 10px;
background: #f8f6f2;
}
.cart-footer {
padding: 15px;
border-top: 1px solid #eee;
background: #fff;
}.total {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
font-size: 18px;
}
.confirm-btn {
width: 100%;
padding: 14px;
background: #6f8667;
color: white;
border: none;
border-radius: 12px;
margin-bottom: 10px;
font-size: 16px;
}
.clear-btn {
width: 100%;
padding: 10px;
background: #eee;
border: none;
border-radius: 10px;
}
.cart-item {
animation: slideIn 0.2s ease;
}
@keyframes slideIn {
from {
transform: translateX(20px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
} .dashboard::before {
display: none;
}
.dashboard {
background: transparent;
}
.cart-panel {
position: fixed;
top: 0;
right: -100%;
width: 90%; /* 🔥 responsive */
max-width: 420px; /* 🔥 limit for big screens */
height: 100vh;
background: #f6f3ef;
box-shadow: -6px 0 25px rgba(0,0,0,0.25);
z-index: 1200;
transition: right 0.3s ease;
display: flex;
flex-direction: column;
}
.cart-panel.open {
right: 0;
}
@media (max-width: 480px) {
.cart-panel {
width: 100%; /* full screen on small phones */
max-width: 100%;
}
}
.menu-section,
#foodItems,
#appetizersItems,
#drinkItems,
#dessertItems,
#shishaItems {
display: flex;
flex-direction: column; /* 🔥 ONE PER ROW */
gap: 15px;
}
.pos-item {
width: 100%;
}
.menu-section {
display: grid;
grid-template-columns: 1fr; /* mobile */
gap: 15px;
}
@media (min-width: 768px) {
.menu-section {
grid-template-columns: 1fr; /* tablet */
}
}
.cart-panel {
padding: 10px; /* smaller */
}
.cart-item {
padding: 10px;
border-radius: 12px;
}
.cart-item-img {
width: 50px;
height: 50px;
}
.cart-item-info h4 {
font-size: 16px;
}
.cart-item-info p {
font-size: 13px;
}
.cart-item-right strong {
font-size: 15px;
}
.cart-qty-controls button {
padding: 4px 10px;
font-size: 14px;
}
.cart-footer {
padding: 10px 15px;
}
.cart-footer h3 {
font-size: 18px;
}
.cart-footer button {
padding: 10px 16px;
font-size: 14px;
}
@media (max-width: 480px) {
.cart-panel {
display: flex;
flex-direction: column;
height: 100vh;
}
.cart-item {
padding: 8px;
}
.cart-item-img {
width: 45px;
height: 45px;
}
.cart-footer {
padding: 10px;
}
}
.cart-panel {
display: flex;
flex-direction: column;
height: 100vh;
}.cart-footer {
position: sticky;
bottom: 0;
background: #f6f3ef;
padding: 12px;
border-top: 1px solid #ddd;
}
.cart-panel {
width: 85%; /* 🔥 smaller than full screen */
max-width: 360px; /* limit size */
}
.cart-panel {
right: -85%; /* match width */
}
.cart-panel.open {
right: 0;
}
.cart-panel {
padding: 8px; /* was too big */
}
.cart-footer {
padding: 10px;
}
@media (max-width: 480px) {
.cart-panel {
width: 90%;
max-width: none;
}
}
.sub-section {
scroll-margin-top: 100px; /* adjust this value */
}
#toTopBtn {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999;
background: #788a73;
color: white;
border: 2px solid #e7ab90;
width: 45px;
height: 45px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
display: none; /* hidden by default */
}
.cart-items {
max-height: 60vh;
overflow-y: auto;
}
.cart-footer {
position: sticky;
bottom: 0;
background: #f6f3ef;
padding: 10px;
}
.cart-panel {
padding: 10px;
}
.cart-item {
padding: 10px;
margin-bottom: 10px;
}
.sub-bar {
display: flex;
gap: 10px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
padding: 10px;
scrollbar-width: none; /* Firefox */
}
.sub-bar::-webkit-scrollbar {
display: none; /* Chrome */
}
.sub-bar button {
flex: 0 0 auto; /* prevent shrinking */
}.sub-bar {
display: flex;
flex-wrap: wrap;
gap: 10px;
max-height: 90px; /* limit height */
overflow-y: auto;
}.sub-bar {
display: flex;
overflow-x: auto;
gap: 10px;
white-space: nowrap;
}
.cart-panel {
display: flex;
flex-direction: column;
height: 100vh; /* 🔥 THIS IS REQUIRED */
}
.cart-items {
flex: 1; /* 🔥 pushes footer down */
overflow-y: auto;
}
.cart-footer {
padding: 16px;
border-top: 1px solid #ddd;
}.empty-cart {
margin-top: 50px;
}
.cart-items {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.cart-panel {
position: fixed;
top: 0;
right: 0;
width: 70%;
max-width: 420px;
height: 100vh;
background: #f6f3ef;
display: flex;
flex-direction: column;
transform: translateX(100%); /* hidden */
transition: transform 0.3s ease;
z-index: 1000;
}
.cart-panel.open {
transform: translateX(0); /* visible */
}
.confirm-btn:disabled {
background: #ccc;
cursor: not-allowed;
opacity: 0.7;
}
.order-card {
transition: all 0.3s ease;
}
.order-column {
min-height: 200px;
}
.order-card {
transform: scale(1);
}
.order-card.moving {
transform: scale(0.95);
opacity: 0.7;
}
.order-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.order-source {
font-size: 12px;
opacity: 0.7;
}
.order-status {
margin: 8px 0;
display: flex;
gap: 10px;
}
.status-badge {
padding: 4px 10px;
border-radius: 10px;
background: #eee;
}
.status-badge.served {
background: #d4edda;
color: #155724;
}
.status-badge.preparing {
background: #fff3cd;
color: #856404;
}
.payment-badge {
padding: 4px 10px;
border-radius: 10px;
}
.payment-badge.paid {
background: #d4edda;
color: green;
}
.payment-badge.unpaid {
background: #f8d7da;
color: red;
}
.order-total {
font-weight: bold;
margin: 8px 0;
}
.order-actions {
display: flex;
gap: 10px;
}
.status-badge {
padding: 5px 12px;
border-radius: 20px;
font-weight: bold;
font-size: 12px;
}
/* existing ones */
.status-badge.served {
background: #c8e6c9;
color: #2e7d32;
}
.status-badge.cancelled {
background: #ffcdd2;
color: #c62828;
}
.status-badge.picked_up {
background-color: #6a1b9a !important;
color: white !important;
}.status-badge.out_for_delivery {
background-color: #2196f3 !important;
color: white !important;
}.status-badge.out_for_delivery {
background-color: #2196f3 !important;
color: white !important;
}.menu-card {
background: rgba(255, 255, 255, 0.9); /* 🔥 make card solid */
color: #222; /* dark text */
border-radius: 14px;
padding: 15px;
margin-bottom: 15px;
}
.menu-card h3 {
color: #1a1a1a;
}
.menu-card .price {
color: #444;
}
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}.menu-card {
display: flex;
justify-content: space-between;
align-items: center;
background: #ffffff;
border-radius: 14px;
padding: 15px 20px;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.menu-card h3 {
font-size: 16px;
font-weight: 600;
}
.menu-card .price {
font-weight: bold;
color: #555;
}
.cat-box {
border: 2px solid #e7ab90;
padding: 8px 16px;
border-radius: 20px;
background: white;
cursor: pointer;
font-weight: 500;
}
.cat-box.active {
background: #e7ab90;
color: white;
}
.menu-section h2 {
color: #2f3e2f;
font-size: 28px;
font-weight: 700;
margin-bottom: 10px;
}
.menu-section h3 {
color: #444;
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
}
/* 🔥 REMOVE ANY opacity */
.menu-section h2,
.menu-section h3 {
opacity: 1 !important;
}
.menu-card {
background: #ffffff;
color: #222;
}
.menu-card h3 {
color: #1a1a1a;
}
.menu-card .price {
color: #555;
}
.menu-section {
max-width: 800px;
margin: 0 auto;
}.menu-card {
margin-bottom: 15px;
}
.menu-grid {
display: flex;
flex-direction: column;
max-width: 600px;
margin: 20px auto;
}
body {
color: #1a1a1a;
}
.menu-card h3 {
color: #222;
}
.menu-card p {
color: #555;
}
#menuContainer {
max-width: 700px;
margin: 40px auto; /* 🔥 center horizontally */
display: flex;
flex-direction: column;
gap: 20px;
}
#menuContainer {
max-width: 700px;
margin: 40px auto; /* 🔥 center horizontally */
display: flex;
flex-direction: column;
gap: 20px;
}.menu-card {
width: 100%;
max-width: 600px;
margin: 0 auto; /* 🔥 center each card */
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-radius: 16px;
background: #fff;
border: 2px solid #e7ab90;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
/* 🔥 FORCE VERTICAL STACK */
#detailsPanel .cart-item {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100% !important;
background: #fff;
padding: 12px;
border-radius: 10px;
margin-bottom: 10px;
}
/* 🔥 FIX BUTTONS ROW */
#detailsPanel .cart-center {
display: flex;
gap: 10px;
width: 100%;
}
/* 🔥 FIX RIGHT SIDE (REMOVE INLINE HORIZONTAL) */
#detailsPanel .cart-right {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 8px;
}
/* 🔥 REMOVE SIDE-BY-SIDE ISSUE */
#detailsPanel {
display: block !important;
}
.cart-item {
display: flex;
flex-direction: column; /* 🔥 THIS is the important part */
}
#detailsPanel {
max-width: 400px;
overflow-y: auto;
}
.cart-item {
width: 100%;
}
#detailsPanel {
display: block !important;
}.cart-total {
position: sticky;
bottom: 10px; /* 👈 NOT 0 (this is your fix) */
background: white;
padding: 12px;
border-top: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.confirm-btn {
padding: 12px 20px;
font-size: 16px;
border-radius: 12px;
background: #6f826a;
color: white;
border: none;
cursor: pointer;
}
@media (max-width: 768px) {
.cart-total {
bottom: 20px; /* more breathing space */
}
}
/* FULL PANEL */
#detailsPanel {
display: flex;
flex-direction: column;
height: 100%;
}
/* 🔥 SCROLL AREA (items) */
.cart-items {
flex: 1;
overflow-y: auto;
padding: 10px;
}
/* 🔥 FOOTER (NOT too low) */
.cart-footer {
padding: 12px;
border-top: 1px solid #eee;
background: white;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
bottom: 0;
}
@media (max-width: 768px) {
#detailsPanel {
width: 90%; /* ✅ not full */
max-width: 420px;
margin: 0 auto; /* center */
border-radius: 16px;
}
}@media (max-width: 768px) {
#detailsPanel {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 90%;
max-width: 420px;
height: 70vh;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
}
@media (max-width: 768px) {
#detailsPanel {
position: fixed; /* 🔥 KEY FIX */
left: 50%;
bottom: 20px;
transform: translateX(-50%);
width: 92%; /* not full */
max-width: 380px; /* phone friendly */
height: 75vh;
background: #fff;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
z-index: 999;
}
}
#detailsPanel {
padding: 10px;
}
.paid-item {
opacity: 0.6;
pointer-events: none;
}