/* ===========================
   RESET
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins', sans-serif;
    background:linear-gradient(135deg,#fff8e7,#ffe8c2,#fff5e1);
    color:#333;
}

/* ===========================
   NAVIGATION
=========================== */

nav{
    background:#8B0000;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:40px;
    padding:18px;
    box-shadow:0 5px 15px rgba(0,0,0,.25);
}

nav a{
    color: white;
    text-decoration: none;

    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;

    transition: all .3s ease;
}

nav a:hover{
    color: #FFD700;
}

nav{
    position: relative;
}

.nav-logo{
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.nav-logo img{
    width: 45px;
    height: auto;
}

/* ===========================
   HERO
=========================== */

.hero{
    background:
        linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.65)),
        url("images/hero.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    min-height:90vh;

    display:flex;
    align-items:center;

    padding-left:100px;
}

.hero-left{
    width:700px;
}

.hero h1{
    font-family:'Playfair Display', serif;
    font-size:90px;
    font-weight:800;
    color:white;
    letter-spacing:3px;
    margin-bottom:15px;
}

.hero h2{
    color:#FFD700;
    font-size:40px;
    margin-bottom:20px;
}

.hero p{
    color:white;
    font-size:22px;
    line-height:1.6;
    margin-bottom:35px;
}

.hero-buttons{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    margin-top:40px;
}

/* ===========================
   BUTTONS
=========================== */

button:not(.quantity-btn){
    background: linear-gradient(135deg, #d62828, #8B0000);
    color: white;

    border: none;
    border-radius: 50px;

    padding: 16px 38px;

    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    font-weight: 600;

    cursor: pointer;

    transition: all .3s ease;

    box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

button:not(.quantity-btn):hover{
    transform: translateY(-4px);
    background: linear-gradient(135deg, #e63946, #a00000);
    box-shadow: 0 15px 35px rgba(0,0,0,.35);
}

button:not(.quantity-btn):active{
    transform: scale(.97);
}

/* ===========================
   FEATURES
=========================== */

.features{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:30px;
    margin:70px auto;
    width:90%;
}

.card{
    width:320px;
    background:white;
    border-radius:15px;
    padding:30px;
    text-align:center;
    box-shadow:0 10px 20px rgba(0,0,0,.15);
    transition:.3s;
}

.card:hover{
    transform:translateY(-8px);
}

.card h2{
    color:#8B0000;
    margin-bottom:15px;
}

.card p{
    line-height:1.5;
}

/* ===========================
   INFO
=========================== */

.info{
    text-align:center;
    padding:60px;
}

.info h2{
    color:#8B0000;
    margin-bottom:20px;
}

/* ===========================
   TABLES
=========================== */

table{
    width:90%;
    margin:40px auto;
    border-collapse:collapse;
    background:white;
    box-shadow:0 5px 20px rgba(0,0,0,.15);
}

th{
    background:#8B0000;
    color:white;
    padding:15px;
}

td{
    padding:15px;
    text-align:center;
    border-bottom:1px solid #ddd;
}

tr:nth-child(even){
    background:#fafafa;
}

tr:hover{
    background:#fff5e6;
}

/* ===========================
   FORMS
=========================== */

form{
    width:420px;
    margin:50px auto;
    background:white;
    padding:30px;
    border-radius:12px;
    box-shadow:0 5px 20px rgba(0,0,0,.15);
}

input,
select,
textarea{
    width:100%;
    padding:12px;
    margin:10px 0 20px;
    border:1px solid #ccc;
    border-radius:8px;
    font-size:16px;
}

input:focus,
select:focus,
textarea:focus{
    outline:none;
    border-color:#8B0000;
}

a{
    text-decoration:none;
}

/* ===========================
   MOBILE
=========================== */

@media (max-width:900px){

.hero{
    flex-direction:column;
    text-align:center;
    padding:50px 25px;
}

.hero-left{
    width:100%;
}

.hero h1{
    font-size:55px;
}

.hero h2{
    font-size:30px;
}

.hero p{
    font-size:18px;
}

.hero-buttons{
    justify-content:center;
    flex-wrap:wrap;
}

.menu-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:40px;
    max-width:1400px;
    margin:auto;
    padding:40px;
}

.category-card img{
    height:170px;
}
}
/* ===========================
   MENU PAGE
=========================== */

.menu-page{
    width:90%;
    max-width:1400px;
    margin:50px auto;
    text-align:center;
}

.menu-page h1{
    font-size:60px;
    color:#8B0000;
    margin-bottom:40px;
    font-family:'Playfair Display', serif;
}

.menu-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:45px;

    max-width:1500px;
    margin:auto;
}

.category-card{

    background:white;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 12px 30px rgba(0,0,0,.15);

    transition:.3s;

    cursor:pointer;

    min-height:420px;

}

.category-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 35px rgba(0,0,0,.25);
}

.category-card img{
    width:100%;
    height:200px;
    object-fit:contain;
    padding:20px;
    background:#fafafa;
}

.category-card h2{
    font-size:28px;
    color:#8B0000;
    padding:20px;
    font-family:'Poppins', sans-serif;
}
/* ===========================
   FOOD ITEMS
=========================== */

#menu-items{
    max-width:900px;
    margin:50px auto;
}

#menu-items h2{
    color:#8B0000;
    font-size:40px;
    margin-bottom:30px;
    text-align:center;
}

.food-item{

    display:grid;

    grid-template-columns: 1fr 90px 110px;

    align-items:center;

    gap:20px;

    background:white;

    padding:18px 25px;

    margin:10px 0;

    border-radius:15px;

    box-shadow:0 5px 12px rgba(0,0,0,.12);

}

.food-item span{
    font-size:22px;
    font-weight:600;
}

.food-item button{
    padding:12px 24px;
}
.food-item span:first-child{

    font-size:26px;

    font-weight:600;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

}
.food-item span:nth-child(2){

    font-size:24px;

    font-weight:bold;

    color:#8B0000;

    text-align:right;

}
.food-item button{

    width:100px;

    height:45px;

    justify-self:end;

    font-size:18px;

}
.receipt{

    width:700px;
    margin:50px auto;
    background:white;
    border-radius:20px;
    padding:40px;
    box-shadow:0 10px 30px rgba(0,0,0,.2);

}

.receipt h1{

    text-align:center;
    color:#b30000;

}

.receipt h2{

    text-align:center;

}

.receipt h3{

    margin-top:30px;

}

.receipt pre{

    background:#f4f4f4;
    padding:20px;
    border-radius:10px;
    white-space:pre-wrap;
    font-size:18px;

}

.success{

    text-align:center;
    color:green;
    font-size:22px;
    font-weight:bold;

}

.big-button{

    width:100%;
    margin-top:30px;

}
.print-btn{
    background:#0d6efd;
    color:white;
    border:none;
    padding:15px 35px;
    border-radius:30px;
    font-size:20px;
    cursor:pointer;
    margin-top:20px;
    margin-left:10px;
}

.print-btn:hover{
    background:#084298;
}
@media print{

nav{
    display:none;
}

button{
    display:none;
}

body{
    background:white;
}

}
#searchInput{

    display:block;

    width:500px;

    margin:20px auto;

    padding:15px;

    font-size:18px;

    border-radius:12px;

    border:2px solid #8B0000;

}
/* ===========================
   PAYMENT PAGE
=========================== */

.payment-logos{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:25px;

    margin-bottom:25px;

}

.payment-logos img{

    width:80px;
    height:45px;
    object-fit:contain;

    transition:.3s;

}

.payment-logos img:hover{

    transform:scale(1.1);

}

.receipt-summary{

    background:#fafafa;

    padding:20px;

    border-radius:15px;

    margin:25px 0;

    box-shadow:0 5px 15px rgba(0,0,0,.12);

}

.receipt-summary p,
.receipt-summary h2{

    display:flex;

    justify-content:space-between;

    margin:10px 0;

}
.payment-logos{
    display:flex;
    justify-content:center;
    gap:35px;
    margin-bottom:25px;
}

.payment-logos img{
    width:90px;
    height:55px;
    object-fit:contain;
}
/* ==========================
   PAYMENT PAGE
========================== */

.receipt-summary{

    background:#fafafa;
    padding:25px;
    border-radius:15px;
    margin-top:25px;

}

.receipt-summary p,
.receipt-summary h2{

    display:flex;
    justify-content:space-between;
    margin:15px 0;

}

.payment-logos{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:35px;
    margin-bottom:25px;

}

.payment-logos img{

    height:40px;
    width:auto;

}

.card-row{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;

}

#cardFields{

    margin-top:15px;

}
/* ===========================
   ORDER PAGE
=========================== */

.order-page{
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;

    width: 95%;
    max-width: 1600px;

    margin: 40px auto;
    align-items: start;
}

.cart-column{
    position: sticky;
    top: 20px;

    width: 420px;
    height: calc(100vh - 40px);

    background: white;
    border-radius: 25px;

    box-shadow: 0 10px 30px rgba(0,0,0,.15);

    padding: 25px;

    overflow-y: auto;
    overflow-x: hidden;
}
.food-info{
    flex:1;
}

.food-name{
    font-size:22px;
    font-weight:700;
}

.food-price{
    color:#8B0000;
    font-size:18px;
    font-weight:600;
    margin-top:5px;
}

.menu-column{
    width: 100%;
}

/* ===========================
   CART
=========================== */

#cart-items{
    overflow-x: hidden;
}

.cart-column form input{
    width: 90%;
    display: block;
    margin: 15px auto;
    padding: 14px 18px;

    border: 2px solid #ddd;
    border-radius: 12px;

    font-size: 18px;
    box-sizing: border-box;
}

.cart-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px;

    margin-bottom:15px;

    background:#fafafa;

    border-radius:15px;

}

.cart-info h3{

    margin:0;

    font-size:20px;

    color:#8B0000;

}

.cart-info p{

    margin-top:8px;

    font-size:18px;

    font-weight:bold;

}

.quantity-controls{

    display:flex;

    align-items:center;

    gap:12px;

}

.cart-column form button{
    width: 85%;
    margin: 20px auto 0;
    display: block;
}

.quantity-btn{

    width:40px;

    height:40px;

    border:none;

    border-radius:50%;

    background:#8B0000;

    color:white;

    font-size:22px;

    cursor:pointer;

}

.quantity-btn:hover{

    background:#a40000;

}

.quantity-number{

    font-size:22px;

    font-weight:bold;

    min-width:25px;

    text-align:center;

}
.quantity-btn{

    width:40px;
    height:40px;

    padding:0;

    margin:0;

    border:none;

    border-radius:50%;

    background:#8B0000;

    color:white;

    font-size:22px;

    font-weight:bold;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

}

.quantity-btn:hover{

    background:#a40000;

}

.quantity-controls{

    display:flex;

    align-items:center;

    gap:10px;

}

.quantity-number{

    font-size:20px;

    font-weight:bold;

    min-width:20px;

    text-align:center;

}
/* ===========================
   QUANTITY BUTTONS
=========================== */

.quantity-controls{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}

.quantity-btn{
    width:40px;
    height:40px;
    padding:0;

    border-radius:50%;

    font-size:22px;
    font-weight:bold;
}

.food-item button{
    padding:10px 24px;
}

.quantity-btn:hover{

    background:#a00000;

}

.quantity-number{

    font-size:20px;

    font-weight:bold;

    min-width:20px;

    text-align:center;

}
.location-section{

    width:90%;
    max-width:1100px;

    margin:80px auto;

    text-align:center;

}

.location-section h1{

    font-size:42px;

    margin-bottom:15px;

}

.location-section p{

    font-size:20px;

    margin-bottom:30px;

    color:#555;

}

.location-section iframe{

    box-shadow:0 15px 35px rgba(0,0,0,.2);

}
.call-button,
.order-button {
    position: fixed;
    right: 25px;

    width: 220px;
    height: 64px;

    border-radius: 18px;

    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    padding: 0 22px;

    text-decoration: none;
    font-size: 18px;
    font-weight: 700;

    box-shadow: 0 10px 24px rgba(0,0,0,.28);

    z-index: 9999;
    overflow: hidden;

    animation: none;
    transition: .2s ease;
}

.call-button {
    bottom: 25px;
    background: #28a745;
}

.order-button {
    bottom: 105px;
    background: #d62828;
}

.call-button span,
.order-button span {
    opacity: 1;
    margin-left: 0;
    white-space: nowrap;
    font-size: 18px;
    font-weight: 700;
}

.call-button:hover,
.order-button:hover {
    transform: translateY(-3px);
}
/* =========================================
   EL DORADO ADMIN DASHBOARD
========================================= */

.admin-dashboard-body {
    margin: 0;
    min-height: 100vh;
    background: #f7f3ec;
    color: #222;
    font-family: Arial, Helvetica, sans-serif;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}


/* =========================================
   TOP NAVIGATION
========================================= */

.admin-navbar {
    min-height: 72px;
    padding: 0 4%;
    background: #8f1616;
    color: white;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    position: sticky;
    top: 0;
    z-index: 1000;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.16);
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 12px;

    color: white;
    text-decoration: none;
    flex-shrink: 0;
}

.admin-brand-icon {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    background: rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    font-size: 24px;
}
.admin-brand-logo {
    display: block;

    width: 46px;
    height: 46px;
    min-width: 46px;
    max-width: 46px;

    object-fit: cover;
    object-position: center;

    border-radius: 50%;

    flex-shrink: 0;
}

.admin-brand strong,
.admin-brand small {
    display: block;
}

.admin-brand strong {
    font-size: 18px;
}

.admin-brand small {
    margin-top: 2px;
    opacity: 0.8;
    font-size: 12px;
}

.admin-nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
}

.admin-nav-links a {
    padding: 10px 13px;
    border-radius: 10px;

    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.admin-nav-links a:hover,
.admin-nav-links a.active {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    transform: translateY(-1px);
}

.admin-navbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.admin-icon-button {
    width: 42px;
    height: 42px;

    position: relative;
    border: none;
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.14);
    color: white;
    font-size: 18px;
    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.admin-icon-button:hover {
    background: rgba(255, 255, 255, 0.24);
    transform: translateY(-2px);
}

.notification-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 4px;

    position: absolute;
    top: -5px;
    right: -5px;

    display: grid;
    place-items: center;

    background: #ffd34f;
    color: #6e1010;
    border: 2px solid #8f1616;
    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;
}

.admin-logout-button {
    padding: 11px 16px;
    border-radius: 12px;

    background: white;
    color: #8f1616;

    text-decoration: none;
    font-size: 14px;
    font-weight: 800;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.admin-logout-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 17px rgba(0, 0, 0, 0.18);
}


/* =========================================
   MAIN DASHBOARD
========================================= */

.admin-dashboard {
    width: 92%;
    max-width: 1450px;
    margin: 0 auto;
    padding: 45px 0 70px;
}

.dashboard-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 30px;
}

.dashboard-heading h1 {
    margin: 5px 0 8px;
    font-size: clamp(28px, 4vw, 43px);
    color: #2a2420;
}

.dashboard-heading > div > p:last-child {
    margin: 0;
    color: #746b63;
    font-size: 16px;
}

.dashboard-label {
    margin: 0;
    color: #a02121;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.7px;
}

.dashboard-date {
    padding: 12px 16px;
    background: white;
    border: 1px solid #ece5dc;
    border-radius: 13px;
    color: #645d56;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(51, 40, 31, 0.07);
}


/* =========================================
   STATISTIC CARDS
========================================= */

.dashboard-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 36px;
}

.dashboard-stat-card {
    min-height: 135px;
    padding: 22px;

    display: flex;
    align-items: center;
    gap: 17px;

    position: relative;
    overflow: hidden;

    background: white;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 19px;

    color: #222;
    text-decoration: none;

    box-shadow: 0 11px 28px rgba(44, 35, 29, 0.08);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.dashboard-stat-card::after {
    content: "";
    width: 90px;
    height: 90px;

    position: absolute;
    right: -30px;
    bottom: -35px;

    border-radius: 50%;
    background: currentColor;
    opacity: 0.04;
}

.dashboard-stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(44, 35, 29, 0.14);
}

.stat-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;
    flex-shrink: 0;

    border-radius: 17px;
    font-size: 27px;
}

.dashboard-stat-card p {
    margin: 0 0 5px;
    color: #756d65;
    font-size: 13px;
    font-weight: 700;
}

.dashboard-stat-card h2 {
    margin: 0 0 7px;
    color: #25211e;
    font-size: 28px;
}

.dashboard-stat-card span {
    color: #8c837b;
    font-size: 12px;
    font-weight: 700;
}

.orders-stat .stat-icon {
    background: #fff1db;
}

.revenue-stat .stat-icon {
    background: #e1f7e7;
}

.reservations-stat .stat-icon {
    background: #e9edff;
}

.rating-stat .stat-icon {
    background: #fff4c7;
}


/* =========================================
   SECTIONS
========================================= */

.dashboard-section {
    margin-bottom: 35px;
}

.section-heading {
    margin-bottom: 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.section-heading h2 {
    margin: 4px 0 0;
    color: #2b2622;
    font-size: 24px;
}

.section-heading > a {
    color: #941c1c;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}

.section-heading > a:hover {
    text-decoration: underline;
}


/* =========================================
   QUICK ACTION CARDS
========================================= */

.admin-action-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.admin-action-card {
    min-height: 110px;
    padding: 22px;

    display: flex;
    align-items: center;
    gap: 16px;

    background: white;
    border: 1px solid #eee7de;
    border-radius: 18px;

    color: #24201d;
    text-decoration: none;

    box-shadow: 0 10px 28px rgba(44, 35, 29, 0.07);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.admin-action-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(44, 35, 29, 0.13);
    border-color: rgba(143, 22, 22, 0.25);
}

.action-icon {
    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;
    flex-shrink: 0;

    border-radius: 16px;
    font-size: 25px;
}

.menu-action .action-icon {
    background: #fff0d7;
}

.sales-action .action-icon {
    background: #e1f5e6;
}

.kitchen-action .action-icon {
    background: #e6edff;
}

.booking-action .action-icon {
    background: #f1e8ff;
}

.admin-action-card h3 {
    margin: 0 0 7px;
    font-size: 16px;
}

.admin-action-card p {
    margin: 0;
    color: #776f68;
    font-size: 13px;
    line-height: 1.5;
}

.action-arrow {
    margin-left: auto;
    color: #a51d1d;
    font-size: 23px;
    font-weight: 800;

    transition: transform 0.2s ease;
}

.admin-action-card:hover .action-arrow {
    transform: translateX(5px);
}


/* =========================================
   DASHBOARD PANELS
========================================= */

.dashboard-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.8fr);
    gap: 22px;
    margin-bottom: 25px;
}

.dashboard-panel {
    background: white;
    border: 1px solid #ece5dc;
    border-radius: 20px;
    padding: 24px;

    box-shadow: 0 11px 30px rgba(44, 35, 29, 0.08);
}


/* =========================================
   ORDERS TABLE
========================================= */

.dashboard-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.dashboard-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.dashboard-table th {
    padding: 13px 12px;
    background: #faf7f3;
    color: #756d65;

    text-align: left;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.dashboard-table th:first-child {
    border-radius: 10px 0 0 10px;
}

.dashboard-table th:last-child {
    border-radius: 0 10px 10px 0;
}

.dashboard-table td {
    padding: 15px 12px;
    border-bottom: 1px solid #eee8e2;
    color: #3a342f;
    font-size: 13px;
}

.dashboard-table tbody tr {
    transition: background-color 0.2s ease;
}

.dashboard-table tbody tr:hover {
    background: #fcfaf7;
}

.order-status {
    display: inline-flex;
    align-items: center;

    padding: 7px 10px;
    border-radius: 999px;

    font-size: 11px;
    font-weight: 900;
    text-transform: capitalize;
}

.status-pending,
.status-new {
    background: #fff1c9;
    color: #8a5b00;
}

.status-preparing,
.status-in-progress {
    background: #dce9ff;
    color: #1f579d;
}

.status-ready {
    background: #dff7e5;
    color: #1c7437;
}

.status-completed,
.status-complete {
    background: #e8ecef;
    color: #4f5d66;
}

.status-cancelled,
.status-canceled {
    background: #ffe0e0;
    color: #a21d1d;
}


/* =========================================
   RESERVATIONS
========================================= */

.reservation-list {
    display: grid;
    gap: 12px;
}

.reservation-item {
    padding: 14px;

    display: flex;
    align-items: center;
    gap: 13px;

    background: #faf8f5;
    border: 1px solid #eee7df;
    border-radius: 14px;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}

.reservation-item:hover {
    transform: translateX(3px);
    background: #fff;
}

.reservation-time {
    min-width: 69px;
    padding: 9px 8px;

    background: #8f1616;
    color: white;
    border-radius: 10px;

    text-align: center;
    font-size: 12px;
    font-weight: 800;
}

.reservation-information {
    flex: 1;
}

.reservation-information h3 {
    margin: 0 0 3px;
    font-size: 14px;
}

.reservation-information p {
    margin: 0;
    color: #7b736c;
    font-size: 12px;
}

.reservation-status {
    padding: 6px 9px;
    background: #e1f5e6;
    color: #24743b;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
}


/* =========================================
   EMPTY STATES
========================================= */

.empty-dashboard-message {
    padding: 28px !important;
    color: #8a8179 !important;
    text-align: center !important;
    font-size: 14px !important;
}


/* =========================================
   SALES CHART
========================================= */

.sales-chart-panel {
    margin-top: 0;
}

.sales-chart-container {
    position: relative;
    width: 100%;
    height: 330px;
}


/* =========================================
   TOAST NOTIFICATION
========================================= */

.admin-toast {
    padding: 15px 19px;

    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 2000;

    background: #25211e;
    color: white;
    border-radius: 13px;

    font-size: 14px;
    font-weight: 800;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);

    opacity: 0;
    pointer-events: none;
    transform: translateY(25px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.admin-toast.show {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================
   DARK MODE
========================================= */

.admin-dark-mode {
    background: #151719;
    color: #f4f4f4;
}

.admin-dark-mode .dashboard-heading h1,
.admin-dark-mode .section-heading h2,
.admin-dark-mode .dashboard-stat-card h2,
.admin-dark-mode .admin-action-card,
.admin-dark-mode .dashboard-table td,
.admin-dark-mode .reservation-information h3 {
    color: #f4f4f4;
}

.admin-dark-mode .dashboard-heading > div > p:last-child,
.admin-dark-mode .dashboard-stat-card p,
.admin-dark-mode .dashboard-stat-card span,
.admin-dark-mode .admin-action-card p,
.admin-dark-mode .dashboard-table th {
    background: #111827 !important;
    color: #ffffff !important;
}

.admin-dark-mode .dashboard-table td {
    background: #1f2937 !important;
    color: #f9fafb !important;
    border-bottom-color: #374151 !important;
}

.admin-dark-mode .dashboard-table tbody tr:hover td {
    background: #374151 !important;
    color: #ffffff !important;
}
.admin-dark-mode .reservation-information p,
.admin-dark-mode .empty-dashboard-message {
    color: #aaa7a3 !important;
}

.admin-dark-mode .dashboard-date,
.admin-dark-mode .dashboard-stat-card,
.admin-dark-mode .admin-action-card,
.admin-dark-mode .dashboard-panel {
    background: #222529;
    border-color: #34383d;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
}

.admin-dark-mode .dashboard-table th,
.admin-dark-mode .reservation-item {
    background: #292d31;
    border-color: #3a3e43;
}

.admin-dark-mode .dashboard-table td {
    border-color: #373b40;
}

.admin-dark-mode .dashboard-table tbody tr:hover,
.admin-dark-mode .reservation-item:hover {
    background: #2d3135;
}

.admin-dark-mode .dashboard-label,
.admin-dark-mode .section-heading > a,
.admin-dark-mode .action-arrow {
    color: #ff7474;
}


/* =========================================
   RESPONSIVE TABLET
========================================= */

@media (max-width: 1150px) {

    .admin-navbar {
        flex-wrap: wrap;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .admin-nav-links {
        order: 3;
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 2px;
    }

    .dashboard-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-content-grid {
        grid-template-columns: 1fr;
    }

}


/* =========================================
   RESPONSIVE MOBILE
========================================= */

@media (max-width: 650px) {

    .admin-navbar {
        padding-left: 18px;
        padding-right: 18px;
        gap: 12px;
    }

    .admin-brand small {
        display: none;
    }

    .admin-navbar-actions {
        gap: 6px;
    }

    .admin-logout-button {
        padding: 10px 11px;
        font-size: 0;
    }

    .admin-logout-button::before {
        content: "🚪";
        font-size: 17px;
    }

    .admin-dashboard {
        width: 91%;
        padding-top: 28px;
    }

    .dashboard-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-date {
        width: 100%;
        box-sizing: border-box;
    }

    .dashboard-stat-grid,
    .admin-action-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-stat-card,
    .admin-action-card {
        min-height: auto;
    }

    .dashboard-panel {
        padding: 18px;
        border-radius: 16px;
    }

    .section-heading h2 {
        font-size: 21px;
    }

    .reservation-item {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .reservation-status {
        margin-left: 82px;
    }

    .sales-chart-container {
        height: 260px;
    }

    .admin-toast {
        right: 15px;
        bottom: 15px;
        left: 15px;
        text-align: center;
    }

}
#menu-container{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));

    gap:25px;

    margin-top:25px;

}

.food-card{

    background:white;

    border-radius:18px;

    padding:20px;

    box-shadow:0 8px 18px rgba(0,0,0,.12);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:space-between;

    min-height:320px;

}

.food-card:hover{

    transform:translateY(-5px);

}

.food-image{

    font-size:60px;

    margin-bottom:15px;

}

.food-price{

    font-size:28px;

    font-weight:bold;

    color:#980000;

    margin:10px 0;

}

.add-button{

    width:100%;

    padding:14px;

    font-size:18px;

    border:none;

    border-radius:12px;

    background:#b30000;

    color:white;

    cursor:pointer;

}
.food-card h3{

    text-align:center;

    font-size:24px;

    min-height:60px;

}
/* ===========================
   NEW ORDER MENU LAYOUT
=========================== */

#menu-container{
    display:block;
    width:100%;
    margin-top:25px;
}

.menu-category{
    width:100%;
    margin-bottom:55px;
    scroll-margin-top:25px;
}

.category-title{
    width:100%;
    color:#8B0000;
    font-size:34px;
    text-align:left;
    margin:0 0 22px;
    padding-bottom:10px;
    border-bottom:3px solid rgba(139, 0, 0, .15);
}

.category-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:25px;
    width:100%;
}

.food-card{
    background:white;
    border-radius:20px;
    padding:24px;

    min-width:0;
    min-height:340px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;

    text-align:center;

    box-shadow:0 10px 25px rgba(0,0,0,.13);
    transition:transform .25s ease, box-shadow .25s ease;
}

.food-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 35px rgba(0,0,0,.2);
}

.food-image{
    width:110px;
    height:110px;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#fff7ea;
    border-radius:50%;

    font-size:58px;
    margin-bottom:15px;
}

.food-card h3{
    width:100%;
    font-size:23px;
    line-height:1.3;
    min-height:60px;

    display:flex;
    justify-content:center;
    align-items:center;
}

.food-price{
    color:#9b0000;
    font-size:29px;
    font-weight:700;
    margin:16px 0;
}

.food-card .add-button{
    width:100%;
    min-height:58px;

    padding:13px 18px;
    margin:0;

    border-radius:50px;
    white-space:nowrap;
}

/* TABLET */

@media (max-width:1400px){

    .category-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

}

/* PHONE */

@media (max-width:750px){

    .order-page{
        display:block;
        width:92%;
    }

    .category-grid{
        grid-template-columns:1fr;
    }

    .cart-column{
        position:static;
        width:100%;
        height:auto;
        margin-top:35px;
    }

    .category-title{
        font-size:28px;
    }

}
.menu-tools{
    width:100%;
    margin:25px 0 35px;
}

#menu-search{
    width:100%;
    max-width:700px;
    display:block;
    margin:0 0 20px;
    padding:16px 20px;

    border:2px solid #8B0000;
    border-radius:50px;

    font-size:18px;
}

.category-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.category-buttons button{
    padding:11px 20px;
    font-size:15px;
    box-shadow:none;
}
.menu-tools{
    width:100%;
    margin:25px 0 35px;
}

#menu-search{
    display:block;
    width:100%;
    max-width:750px;

    margin:0 0 20px;
    padding:16px 22px;

    border:2px solid #8B0000;
    border-radius:50px;

    font-size:18px;
}

.category-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.category-buttons button{
    padding:11px 20px;
    font-size:15px;
    box-shadow:none;
}

.menu-category{
    scroll-margin-top:25px;
}
.order-type {
    margin: 25px 0;
    padding: 20px;
    background: #fff8ee;
    border: 2px solid #e8b86d;
    border-radius: 16px;
}

.order-type h3 {
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
}

.order-type-options {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    width: 100%;
}

.order-type label {
    width: 150px;
    min-height: 110px;
    padding: 15px;
    background: white;
    border: 2px solid #ddd;
    border-radius: 12px;
    cursor: pointer;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;

    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
}
.order-type input[type="radio"] {
    margin: 0;
}

.order-type label:hover {
    border-color: #d9912b;
    transform: translateY(-2px);
}

.order-type input[type="radio"] {
    margin-right: 8px;
    accent-color: #d9912b;
}
.order-instructions {
    display: block;
    background: #fff3cd;
    color: #8a4b00;
    border: 2px solid #ffc107;
    border-radius: 10px;
    padding: 10px;
    font-weight: bold;
    white-space: pre-line;
}

.no-instructions {
    color: #888;
    font-style: italic;
}
.pickup-badge,
.dinein-badge {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 20px;
    font-weight: bold;
    white-space: nowrap;
}

.pickup-badge {
    background: #fff3cd;
    color: #8a4b00;
    border: 1px solid #ffc107;
}

.dinein-badge {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #60a5fa;
}
.status-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:110px;
    padding:10px 18px;

    border-radius:999px;

    font-weight:700;
    font-size:15px;
}
.status-new{
    background:#dcfce7;
    color:#166534;
}

.status-cooking{
    background:#fef3c7;
    color:#92400e;
}

.status-ready{
    background:#dbeafe;
    color:#1d4ed8;
}

.status-done{
    background:#e5e7eb;
    color:#374151;
}
.orders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 24px;
    padding: 30px;
}

.order-card {
    background: white;
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 14px;
}

.order-number {
    font-size: 24px;
    font-weight: bold;
    color: #a80000;
}

.order-date-time {
    margin-top: 5px;
    color: #777;
    font-size: 14px;
}

.customer-info h2 {
    margin: 0 0 5px;
}

.customer-info p {
    margin: 0;
    color: #555;
}

.order-food {
    background: #fff8ed;
    border-radius: 14px;
    padding: 16px;
}

.order-food h3 {
    margin-top: 0;
}

.order-food p {
    white-space: pre-line;
    margin-bottom: 0;
    line-height: 1.6;
}

.card-instructions {
    background: #fff1f1;
    border: 2px solid #e74c3c;
    color: #a61b1b;
    border-radius: 14px;
    padding: 14px;
}

.card-instructions p {
    margin-bottom: 0;
    white-space: pre-line;
    font-weight: bold;
}

.order-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-top: auto;
}

.order-total {
    font-size: 21px;
    font-weight: bold;
    color: #a80000;
}

.order-actions button {
    border: none;
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: bold;
    cursor: pointer;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 8px 13px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: bold;
}

.status-new {
    background: #dcfce7;
    color: #166534;
}

.status-cooking {
    background: #fef3c7;
    color: #92400e;
}

.status-ready {
    background: #dbeafe;
    color: #1d4ed8;
}

.status-done {
    background: #e5e7eb;
    color: #374151;
}

@media (max-width: 600px) {
    .orders-grid {
        grid-template-columns: 1fr;
        padding: 15px;
    }

    .order-card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .order-actions button {
        width: 100%;
    }
}
.new-order-flash {
    animation: newOrderFlash 1s ease-in-out 5;
    border: 3px solid #f1c40f;
}

@keyframes newOrderFlash {
    0% {
        background: white;
        transform: scale(1);
    }

    50% {
        background: #fff3b0;
        transform: scale(1.02);
    }

    100% {
        background: white;
        transform: scale(1);
    }
}
.order-wait-timer {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 11px;
    border-radius: 20px;
    background: #eef2f7;
    font-size: 14px;
    font-weight: bold;
}

.wait-fresh {
    border-left: 6px solid #28a745;
}

.wait-warning {
    border-left: 6px solid #f1c40f;
}

.wait-warning .order-wait-timer {
    background: #fff3b0;
    color: #8a6500;
}

.wait-late {
    border-left: 6px solid #e74c3c;
}

.wait-late .order-wait-timer {
    background: #ffd6d2;
    color: #b42318;
    animation: urgentTimerPulse 1.2s infinite;
}

@keyframes urgentTimerPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }

    100% {
        transform: scale(1);
    }
}
.timer-text:empty {
    visibility: hidden;
}
.tracking-page {
    max-width: 700px;
    margin: 60px auto;
    padding: 30px;
    text-align: center;
    background: white;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.tracking-status {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin: 40px 0;
}

.tracking-step {
    flex: 1;
    padding: 20px 10px;
    border-radius: 15px;
    background: #e9ecef;
    opacity: 0.45;
}

.tracking-step span {
    font-size: 36px;
}

.tracking-step.active {
    background: #d4edda;
    opacity: 1;
    transform: scale(1.04);
}

.current-status {
    font-size: 20px;
}
.receipt-tracking {
    margin-top: 30px;
    padding: 25px;
    text-align: center;
    background: #f8f9fa;
    border-radius: 16px;
    border: 2px dashed #c9ced6;
}

.tracking-qr {
    width: 210px;
    height: 210px;
    margin: 15px auto;
    padding: 10px;
    background: white;
    border-radius: 12px;
}

.receipt-tracking a {
    display: inline-block;
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
}
/* ===========================
   RESERVATION CARDS
=========================== */

.reservation-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,.2);
}

.reservation-card-header{
    margin-bottom:15px;
    border-bottom:2px solid #eee;
    padding-bottom:10px;
}

.reservation-card-header h2{
    color:#b30000;
    margin:0;
}

.reservation-details p{
    margin:10px 0;
    font-size:17px;
}

.reservation-delete-btn{
    background:#d62828;
    color:white;
    text-decoration:none;
    padding:10px 18px;
    border-radius:10px;
    font-weight:bold;
    transition:.25s;
}

.reservation-delete-btn:hover{
    background:#a40000;
}

.no-reservations{
    grid-column:1/-1;
    text-align:center;
    padding:60px;
    background:white;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
}
.reservation-status-form {
    display: flex;
    gap: 10px;
    align-items: center;
}

.reservation-status-form select {
    min-width: 150px;
    padding: 11px 12px;
    border: 1px solid #d7d7d7;
    border-radius: 10px;
    font-weight: bold;
    background: white;
}

.reservation-update-btn {
    background: #2d7a3e;
    color: white;
}

.reservation-update-btn:hover {
    background: #205c2d;
}
.reservations-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(380px, 1fr)
    );
    gap: 30px;
    padding: 30px;
    align-items: start;
}

.reservation-card {
    width: 100%;
    box-sizing: border-box;
    padding: 24px;
    background: white;
    border-radius: 20px;
    border-left: 8px solid #c40000;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.reservation-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #eeeeee;
}

.reservation-status-form {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
}

.reservation-status-form select {
    flex: 1;
    min-width: 170px;
    padding: 11px 12px;
    border: 1px solid #d7d7d7;
    border-radius: 10px;
    background: white;
}

.reservation-actions form {
    width: auto;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.reservation-actions button {
    min-width: 110px;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: bold;
}
/* =================================
   RESERVATION CONFIRMATION PAGE
================================= */

.reservation-confirmation-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 20px;
    background:
        radial-gradient(
            circle at top,
            rgba(255,215,140,.45),
            transparent 45%
        ),
        linear-gradient(135deg,#fff8e8,#ffe7bd);
}

.reservation-success-card{
    width:100%;
    max-width:680px;
    padding:45px;
    background:white;
    border-radius:26px;
    text-align:center;
    box-shadow:0 20px 55px rgba(87,46,0,.18);
    border-top:8px solid #a90000;
    animation:reservationCardEnter .55s ease;
}

.reservation-checkmark{
    width:100px;
    height:100px;
    margin:0 auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg,#20b15a,#138b41);
    color:white;
    font-size:58px;
    font-weight:bold;
    box-shadow:0 12px 26px rgba(32,177,90,.3);
    animation:reservationCheckPop .55s ease;
}

.reservation-small-title{
    margin:0 0 8px;
    color:#a90000;
    font-size:14px;
    font-weight:900;
    letter-spacing:3px;
}

.reservation-success-card h1{
    margin:0;
    color:#242424;
    font-size:40px;
}

.reservation-thank-you{
    margin:18px 0 5px;
    font-size:22px;
}

.reservation-confirmation-message{
    max-width:500px;
    margin:8px auto 30px;
    color:#666;
    font-size:17px;
    line-height:1.6;
}

.reservation-confirmation-details{
    padding:25px;
    background:#fff8ec;
    border:1px solid #f0d9b1;
    border-radius:18px;
    text-align:left;
}

.reservation-confirmation-details h2{
    margin:0 0 18px;
    text-align:center;
    color:#a90000;
}

.confirmation-detail-row{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:14px 4px;
    border-bottom:1px solid #ead8bd;
    font-size:17px;
}

.confirmation-detail-row:last-child{
    border-bottom:none;
}

.confirmation-detail-row span{
    color:#555;
}

.confirmation-detail-row strong{
    color:#222;
    text-align:right;
}

.reservation-confirmation-buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
    margin-top:30px;
}

.confirmation-home-button,
.confirmation-menu-button{
    display:inline-block;
    min-width:165px;
    padding:14px 24px;
    border-radius:999px;
    color:white;
    text-decoration:none;
    font-weight:800;
    transition:transform .2s, box-shadow .2s;
}

.confirmation-home-button{
    background:linear-gradient(135deg,#c40000,#8f0000);
}

.confirmation-menu-button{
    background:linear-gradient(135deg,#269d4e,#16793a);
}

.confirmation-home-button:hover,
.confirmation-menu-button:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 22px rgba(0,0,0,.2);
}

@keyframes reservationCardEnter{
    from{
        opacity:0;
        transform:translateY(25px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes reservationCheckPop{
    0%{
        opacity:0;
        transform:scale(.4);
    }

    75%{
        transform:scale(1.12);
    }

    100%{
        opacity:1;
        transform:scale(1);
    }
}

@media(max-width:600px){
    .reservation-success-card{
        padding:30px 20px;
    }

    .reservation-success-card h1{
        font-size:31px;
    }

    .confirmation-detail-row{
        flex-direction:column;
        gap:5px;
    }

    .confirmation-detail-row strong{
        text-align:left;
    }

    .confirmation-home-button,
    .confirmation-menu-button{
        width:100%;
    }
}
.category-buttons button.active {
    background: #7d0000;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}
.review-strip{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    padding:28px 7%;
    background:#fff7e8;
    border-top:1px solid #ead7b6;
    border-bottom:1px solid #ead7b6;
}

.review-strip-text{
    display:flex;
    align-items:center;
    gap:20px;
}

.review-strip-stars{
    color:#d9a400;
    font-size:30px;
    letter-spacing:3px;
}

.review-strip-text strong{
    display:block;
    color:#222;
    font-size:22px;
}

.review-strip-text p{
    margin:5px 0 0;
    color:#666;
    font-size:16px;
}

.review-strip-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.review-strip-actions a{
    padding:12px 22px;
    border-radius:999px;
    text-decoration:none;
    font-weight:800;
}

.review-strip-actions a:first-child{
    background:#d9b12c;
    color:#222;
}

.review-strip-actions a:last-child{
    background:#b50000;
    color:white;
}

@media(max-width:800px){
    .review-strip{
        flex-direction:column;
        text-align:center;
    }

    .review-strip-text{
        flex-direction:column;
    }

    .review-strip-actions{
        justify-content:center;
    }
}
/* ===========================
   CUSTOMER REVIEWS
=========================== */

.review-page,
.review-confirmation-page{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:50px 20px;
    background:linear-gradient(135deg,#fff7e5,#ffe2ae);
}

.review-form-card,
.review-confirmation-card{
    width:100%;
    max-width:650px;
    padding:40px;
    background:white;
    border-radius:24px;
    box-shadow:0 18px 45px rgba(0,0,0,.15);
}

.review-form-card h1,
.review-confirmation-card h1{
    text-align:center;
    color:#9d0000;
}

.review-form-card > p{
    text-align:center;
    color:#666;
    margin-bottom:30px;
}

.review-form-card form{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.review-form-card input,
.review-form-card textarea{
    width:100%;
    padding:14px;
    border:1px solid #ccc;
    border-radius:12px;
    font-size:16px;
    box-sizing:border-box;
}

.star-rating{
    display:flex;
    flex-direction:row-reverse;
    justify-content:flex-end;
    gap:5px;
    margin-bottom:15px;
}

.star-rating input{
    display:none;
}

.star-rating label{
    color:#ccc;
    font-size:42px;
    cursor:pointer;
    transition:.2s;
}

.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label{
    color:#f5b301;
}

.review-submit-button{
    margin-top:15px;
    padding:15px;
    border:none;
    border-radius:12px;
    background:#a90000;
    color:white;
    font-size:17px;
    font-weight:bold;
    cursor:pointer;
}

.review-submit-button:hover{
    background:#790000;
}

.review-confirmation-card{
    text-align:center;
}

.review-checkmark{
    width:95px;
    height:95px;
    margin:0 auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#28a745;
    color:white;
    font-size:55px;
}

.submitted-stars{
    margin:25px 0;
    color:#f5b301;
    font-size:38px;
}

.view-reviews-button,
.review-home-button,
.leave-review-button{
    display:inline-block;
    margin:8px;
    padding:13px 22px;
    border-radius:12px;
    text-decoration:none;
    color:white;
    font-weight:bold;
}

.view-reviews-button,
.leave-review-button{
    background:#a90000;
}

.review-home-button{
    background:#333;
}

.reviews-page{
    max-width:1200px;
    margin:40px auto;
    padding:25px;
}

.reviews-header{
    text-align:center;
    margin-bottom:35px;
}

.reviews-header h1{
    color:#9d0000;
    font-size:40px;
}

.reviews-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:24px;
}

.review-card{
    background:white;
    padding:25px;
    border-radius:18px;
    box-shadow:0 10px 28px rgba(0,0,0,.12);
    border-top:6px solid #f5b301;
}

.review-card-header{
    display:flex;
    justify-content:space-between;
    gap:15px;
}

.review-card-header h2{
    margin:0;
    color:#222;
}

.review-card-header p{
    margin:5px 0;
    color:#777;
}

.review-stars{
    color:#f5b301;
    font-size:22px;
    white-space:nowrap;
}

.review-comment{
    margin-top:20px;
    color:#444;
    font-size:17px;
    line-height:1.6;
}

.no-reviews{
    grid-column:1/-1;
    padding:50px;
    background:white;
    border-radius:18px;
    text-align:center;
}
/* ==================================
   HOMEPAGE REVIEW SLIDER
================================== */

.review-slider-section{
    padding:85px 20px;
    background:linear-gradient(180deg,#fff8ea,#ffe8bd);
    text-align:center;
}

.review-slider-heading{
    margin-bottom:35px;
}

.review-slider-heading p{
    margin:0 0 10px;
    color:#a80000;
    font-size:14px;
    font-weight:900;
    letter-spacing:3px;
}

.review-slider-heading h2{
    margin:0;
    color:#252525;
    font-size:43px;
}

.review-slider{
    position:relative;
    width:100%;
    max-width:760px;
    min-height:300px;
    margin:0 auto;
    padding:50px 90px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:white;
    border-radius:24px;
    box-shadow:0 16px 38px rgba(82,47,0,.14);
    box-sizing:border-box;
    overflow:hidden;
}

.review-slide{
    display:none;
    width:100%;
    animation:reviewFade .45s ease;
}

.review-slide.active{
    display:block;
}

.review-slide-stars{
    margin-bottom:22px;
    color:#d9a500;
    font-size:31px;
    letter-spacing:5px;
}

.review-slide p{
    margin:0 auto;
    max-width:580px;
    color:#3f3f3f;
    font-size:23px;
    line-height:1.7;
}

.review-slide h3{
    margin:25px 0 0;
    color:#a80000;
    font-size:19px;
}

.review-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:52px;
    height:52px;
    border:none;
    border-radius:50%;
    background:#b40000;
    color:white;
    font-size:38px;
    line-height:1;
    cursor:pointer;
    transition:.2s;
}

.review-arrow:hover{
    background:#810000;
    transform:translateY(-50%) scale(1.08);
}

.review-arrow-left{
    left:22px;
}

.review-arrow-right{
    right:22px;
}

.review-dots{
    margin-top:22px;
    display:flex;
    justify-content:center;
    gap:10px;
}

.review-dot{
    width:12px;
    height:12px;
    padding:0;
    border:none;
    border-radius:50%;
    background:#c7b897;
    cursor:pointer;
}

.review-dot.active{
    width:30px;
    border-radius:999px;
    background:#a80000;
}

.review-slider-actions{
    margin-top:32px;
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
}

.review-slider-actions a{
    min-width:190px;
    padding:14px 25px;
    border-radius:999px;
    text-decoration:none;
    font-weight:900;
}

.review-slider-actions a:first-child{
    background:#efc43b;
    color:#222;
}

.review-slider-actions a:last-child{
    background:#b40000;
    color:white;
}

@keyframes reviewFade{
    from{
        opacity:0;
        transform:translateX(18px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }
}

@media(max-width:700px){
    .review-slider-section{
        padding:65px 16px;
    }

    .review-slider-heading h2{
        font-size:34px;
    }

    .review-slider{
        min-height:360px;
        padding:45px 55px;
    }

    .review-slide p{
        font-size:19px;
    }

    .review-arrow{
        width:42px;
        height:42px;
        font-size:30px;
    }

    .review-arrow-left{
        left:10px;
    }

    .review-arrow-right{
        right:10px;
    }
}
.review-slide-date{
    display:block;
    margin-top:10px;
    color:#888;
    font-size:14px;
}
/* ================================
   ADMIN REVIEW MANAGEMENT
================================ */

.admin-reviews-page{
    max-width:1250px;
    margin:45px auto;
    padding:25px;
}

.admin-reviews-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px;
    margin-bottom:35px;
}

.admin-reviews-header p{
    margin:0 0 7px;
    color:#a70000;
    font-size:13px;
    font-weight:900;
    letter-spacing:3px;
}

.admin-reviews-header h1{
    margin:0;
    color:#292929;
    font-size:40px;
}

.view-public-reviews{
    padding:13px 22px;
    border-radius:999px;
    background:#e2b624;
    color:#222;
    text-decoration:none;
    font-weight:900;
}

.admin-reviews-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
    gap:24px;
}

.admin-review-card{
    padding:25px;
    background:white;
    border-radius:19px;
    border-left:7px solid #a70000;
    box-shadow:0 11px 28px rgba(0,0,0,.13);
}

.admin-review-top{
    display:flex;
    justify-content:space-between;
    gap:18px;
}

.admin-review-top h2{
    margin:0;
    color:#252525;
}

.admin-review-top small{
    color:#777;
}

.admin-review-stars{
    color:#daa500;
    font-size:21px;
    white-space:nowrap;
}

.admin-review-comment{
    min-height:80px;
    margin:22px 0;
    color:#444;
    font-size:17px;
    line-height:1.6;
}

.admin-delete-review{
    width:100%;
    padding:12px;
    border:none;
    border-radius:11px;
    background:#c40000;
    color:white;
    font-size:16px;
    font-weight:900;
    cursor:pointer;
}

.admin-delete-review:hover{
    background:#870000;
}

.no-admin-reviews{
    grid-column:1/-1;
    padding:50px;
    background:white;
    border-radius:18px;
    text-align:center;
}

@media(max-width:700px){
    .admin-reviews-header{
        flex-direction:column;
        align-items:flex-start;
    }
}
.customer-review-edit-box{
    margin:25px 0;
    padding:22px;
    background:#fff8e8;
    border:1px solid #ead09d;
    border-radius:16px;
}

.customer-review-edit-box h2{
    margin:0 0 10px;
    color:#9d0000;
}

.customer-review-edit-box p{
    color:#555;
    line-height:1.5;
}

.customer-edit-review-button{
    display:inline-block;
    margin-top:10px;
    padding:13px 22px;
    border-radius:999px;
    background:#d8aa19;
    color:#222;
    text-decoration:none;
    font-weight:900;
}

.edit-star-rating{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:15px;
}

.edit-star-rating label{
    padding:10px 13px;
    background:#fff5d9;
    border:1px solid #e1c47b;
    border-radius:10px;
    cursor:pointer;
}

.edit-star-rating input{
    width:auto;
    margin-right:4px;
}

.back-to-reviews-link{
    display:block;
    margin-top:20px;
    text-align:center;
    color:#9d0000;
    font-weight:bold;
}
.orders-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;

    margin: 24px 0;
}

.orders-toolbar form {
    margin: 0;
    padding: 0;
}

.toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-width: 190px;
    height: 52px;
    padding: 0 22px;

    border: none;
    border-radius: 14px;

    background: #b00000;
    color: #ffffff;

    font-size: 15px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;
    cursor: pointer;

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.toolbar-btn:hover {
    transform: translateY(-2px);
    background: #970000;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.toolbar-btn:active {
    transform: translateY(0);
}

.toolbar-btn:disabled {
    opacity: 0.7;
    cursor: default;
    transform: none;
}

.danger-btn {
    background: #721313;
}

.danger-btn:hover {
    background: #5c0f0f;
}

.end-day-form {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.end-day-form .toolbar-btn {
    margin: 0;
}

.new-order-flash {
    animation: newOrderFlash 1s ease-in-out 5;
}

@keyframes newOrderFlash {
    0%, 100% {
        background-color: white;
    }

    50% {
        background-color: #ffe66d;
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.9);
        transform: scale(1.02);
    }
}
/* ===================================
   KITCHEN DISPLAY SYSTEM
=================================== */

.kitchen-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    gap: 20px;
    width: 100%;
    margin-top: 24px;
    align-items: start;
}

.kitchen-column {
    min-width: 0;
    background: #f4f1ed;
    border: 1px solid #e2dcd5;
    border-radius: 18px;
    overflow: hidden;
}

.kitchen-column-header {
    min-height: 70px;
    padding: 16px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.kitchen-column-header > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.kitchen-column-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 900;
}

.column-icon {
    font-size: 23px;
}

.column-count {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);

    font-size: 14px;
    font-weight: 900;
}

.kitchen-column-new .kitchen-column-header {
    background: #e6f7e9;
    color: #1f6c35;
}

.kitchen-column-cooking .kitchen-column-header {
    background: #fff1ce;
    color: #805600;
}

.kitchen-column-ready .kitchen-column-header {
    background: #dfeeff;
    color: #1e5897;
}

.kitchen-column-orders {
    min-height: 420px;
    max-height: calc(100vh - 270px);
    padding: 14px;

    display: flex;
    flex-direction: column;
    gap: 14px;

    overflow-y: auto;
}

.kitchen-order-card {
    display: block;
    padding: 16px;
    margin: 0;

    background: #ffffff;
    border: 1px solid #e6e0da;
    border-radius: 14px;

    box-shadow: 0 4px 15px rgba(42, 35, 29, 0.08);
}

.kitchen-order-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(42, 35, 29, 0.13);
}

.order-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.order-number {
    display: block;
    color: #201d1a;
    font-size: 17px;
    font-weight: 900;
}

.order-date-time {
    margin: 4px 0 0;
    color: #77706a;
    font-size: 11px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 6px 9px;
    border-radius: 999px;

    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.status-new {
    background: #daf3df;
    color: #17632d;
}

.status-cooking {
    background: #fff0c2;
    color: #815800;
}

.status-ready {
    background: #d9ebff;
    color: #1d5797;
}

.order-wait-timer {
    margin-top: 13px;
    padding: 9px 11px;

    background: #f6f3ef;
    border-radius: 9px;

    color: #554e48;
    font-size: 12px;
    font-weight: 800;
}

.customer-info {
    margin-top: 14px;
}

.customer-info h3 {
    margin: 0 0 4px;
    color: #27231f;
    font-size: 18px;
}

.customer-info p {
    margin: 0;
    color: #6d665f;
    font-size: 12px;
}

.order-type-row {
    margin-top: 12px;
}

.pickup-badge,
.dinein-badge {
    display: inline-flex;
    padding: 6px 9px;

    border-radius: 8px;
    background: #eee9e3;

    color: #4e4741;
    font-size: 11px;
    font-weight: 800;
}

.order-food {
    margin-top: 14px;
    padding: 13px;

    background: #faf8f5;
    border: 1px solid #eee8e2;
    border-radius: 10px;
}

.order-food h4 {
    margin: 0 0 7px;
    color: #5c554e;
    font-size: 11px;
    text-transform: uppercase;
}

.order-food p {
    margin: 0;
    color: #292520;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    white-space: pre-line;
}

.card-instructions {
    margin-top: 12px;
    padding: 11px;

    background: #fff4df;
    border: 1px solid #f2d79d;
    border-radius: 9px;

    color: #744f0b;
    font-size: 12px;
}

.card-instructions p {
    margin: 5px 0 0;
}

.order-card-footer {
    margin-top: 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.order-total {
    color: #29241f;
    font-size: 17px;
    font-weight: 900;
}

.kitchen-action-button {
    min-height: 39px;
    padding: 10px 13px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 9px;

    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;

    cursor: pointer;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.kitchen-action-button:hover {
    transform: translateY(-1px);
    opacity: 0.9;
}

.start-button {
    background: #c27a18;
}

.ready-button {
    background: #2869ad;
}

.complete-button {
    background: #238246;
}
.order-card-footer form {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    display: flex;
    align-items: center;
}

.order-card-footer {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 10px;

    margin-top: auto;
    padding-top: 16px;
}

.order-card-footer .order-total {
    font-size: 16px;
    font-weight: 900;
    white-space: nowrap;
}

.order-card-footer .print-receipt-button {
    min-width: 70px;
}

.order-card-footer .start-button,
.order-card-footer .ready-button,
.order-card-footer .complete-button {
    min-width: 140px;
    justify-self: end;
}

.empty-kitchen-column {
    min-height: 180px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: #8c857e;
    text-align: center;
}

.empty-kitchen-column span {
    font-size: 32px;
}

.empty-kitchen-column p {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 700;
}
.order-card {
    position: relative;
    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.order-card.late-yellow {
    border: 3px solid #facc15;
    box-shadow: 0 0 18px rgba(250, 204, 21, 0.55);
}

.order-card.late-orange {
    border: 3px solid #f97316;
    box-shadow: 0 0 22px rgba(249, 115, 22, 0.7);
    animation: orangePulse 1.4s infinite;
}

.order-card.late-red {
    border: 4px solid #ef4444;
    box-shadow: 0 0 28px rgba(239, 68, 68, 0.9);
    animation: redPulse 0.8s infinite;
}

.late-order-warning {
    display: none;
    margin: 8px 0;
    padding: 7px 10px;
    border-radius: 8px;
    font-weight: 800;
    text-align: center;
}

.order-card.late-yellow .late-order-warning {
    display: block;
    background: #fef9c3;
    color: #854d0e;
}

.order-card.late-orange .late-order-warning {
    display: block;
    background: #ffedd5;
    color: #9a3412;
}

.order-card.late-red .late-order-warning {
    display: block;
    background: #fee2e2;
    color: #991b1b;
}

@keyframes orangePulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.015);
    }
}

@keyframes redPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.7);
    }

    50% {
        transform: scale(1.025);
        box-shadow: 0 0 35px rgba(239, 68, 68, 1);
    }
}

/* Timer warning states */

.kitchen-order-card.wait-fresh {
    border-left: 5px solid #37a357;
}

.kitchen-order-card.wait-warning {
    border-left: 5px solid #e6a11c;
}

.kitchen-order-card.wait-late {
    border-left: 5px solid #d74242;
}

.kitchen-order-card.wait-late .order-wait-timer {
    background: #ffe3e3;
    color: #a91f1f;
}

/* New order animation */

.kitchen-order-card.new-order-flash {
    animation: kitchenNewOrderFlash 0.8s ease-in-out 5;
}

@keyframes kitchenNewOrderFlash {
    0%,
    100% {
        box-shadow: 0 4px 15px rgba(42, 35, 29, 0.08);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(49, 167, 80, 0.25);
    }
}

/* Scrollbars */

.kitchen-column-orders::-webkit-scrollbar {
    width: 8px;
}

.kitchen-column-orders::-webkit-scrollbar-thumb {
    background: #c9c1b9;
    border-radius: 999px;
}

/* Tablet */

@media (max-width: 1100px) {
    .kitchen-board {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
    }

    .kitchen-column-ready {
        grid-column: 1 / -1;
    }
}

/* Phone */

@media (max-width: 700px) {
    .kitchen-board {
        grid-template-columns: 1fr;
    }

    .kitchen-column-ready {
        grid-column: auto;
    }

    .kitchen-column-orders {
        min-height: 150px;
        max-height: none;
    }

    .order-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .kitchen-action-button {
        width: 100%;
    }
}
.kitchen-board {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
}

.kitchen-action-button {
    background: #b80f16 !important;
    color: white !important;
    padding: 12px 18px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
}
.kitchen-order-card {
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.kitchen-column-orders {
    overflow-y: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.touch-drag-ghost {
    max-height: 500px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
}

.order-card-dragging {
    opacity: 0.4;
}

.drag-zone-active {
    outline: 4px dashed #2f80ed;
    outline-offset: -6px;
    background-color: rgba(47, 128, 237, 0.12);
}
/* =========================
   KITCHEN DISPLAY MODE
========================= */

.kitchen-display-mode {
    overflow: hidden;
    background: #111;
}

.kitchen-display-mode nav,
.kitchen-display-mode body > hr,
.kitchen-display-mode body > h1,
.kitchen-display-mode #searchOrders,
.kitchen-display-mode .orders-toolbar {
    display: none;
}

.kitchen-display-mode #ordersContainer {
    width: 100vw;
    height: 100vh;
    padding: 12px;
    box-sizing: border-box;
}

.kitchen-display-mode .kitchen-board {
    width: 100%;
    height: 100%;
    gap: 14px;
}

.kitchen-display-mode .kitchen-column {
    height: calc(100vh - 24px);
    overflow: hidden;
}

.kitchen-display-mode .kitchen-column-orders {
    height: calc(100vh - 100px);
    overflow-y: auto;
}

.kitchen-display-mode .kitchen-column-header h2 {
    font-size: 1.5rem;
}

.kitchen-display-mode .column-count {
    font-size: 1.2rem;
}

.kitchen-display-mode .kitchen-order-card {
    font-size: 1.05rem;
}
/* Fix tablet scrolling specifically inside Cooking */
.kitchen-column-cooking {
    overflow: hidden;
}

.kitchen-column-cooking .kitchen-column-orders {
    overflow-y: auto !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Normal card area scrolls */
.kitchen-column-cooking .kitchen-order-card {
    touch-action: pan-y !important;
}

/* Only the drag handle moves the order */
.kitchen-column-cooking .tablet-drag-handle {
    touch-action: none !important;
}
.print-receipt-button {
    background: #292929;
    color: white;
    text-decoration: none;
}

.print-receipt-button:hover {
    background: #000000;
}
.sold-out-card {
    opacity: 0.65;
    filter: grayscale(0.35);
}

.sold-out-badge {
    display: inline-block;
    margin: 10px 0;
    padding: 7px 12px;
    border-radius: 999px;
    background: #b00000;
    color: white;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.sold-out-card .add-button:disabled {
    background: #b8b8b8;
    color: #666;
    cursor: not-allowed;
}
.menu-availability-form {
    display: inline-block;
    margin: 0 6px 0 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.menu-available-badge,
.menu-sold-out-badge {
    display: inline-block;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.menu-available-badge {
    background: #dff7e5;
    color: #1c7437;
}

.menu-sold-out-badge {
    background: #ffe0e0;
    color: #a21d1d;
}

.mark-sold-out-button {
    background: #c62828;
    color: white;
}

.make-available-button {
    background: #2e7d32;
    color: white;
}
.protein-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.65);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.protein-modal.open {
    display: flex;
}

.protein-modal-content{

    width:650px;
    max-width:95vw;

    border-radius:24px;

    padding:35px;

    background:white;

    box-shadow:0 20px 60px rgba(0,0,0,.25);

}

.protein-modal-content h2{

    font-size:42px;
    font-weight:700;

    text-align:center;

    margin-bottom:5px;

}

#proteinItemName{

    text-align:center;

    color:#666;

    font-size:22px;

    margin-bottom:25px;

}

.protein-modal-close{
    position:absolute;
    top:18px;
    right:18px;

    width:40px;
    height:40px;

    border:none;
    border-radius:50%;

    background:#fff;
    color:#222;

    font-size:32px;
    font-weight:300;

    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:.2s;
}

.protein-modal-close:hover{
    background:#f3f3f3;
    transform:rotate(90deg);
}

.protein-option-button{

    display:flex;
    justify-content:space-between;
    align-items:center;

    width:100%;

    padding:18px 24px;

    margin-bottom:14px;

    background:white;

    border:2px solid #ececec;

    border-radius:18px;

    cursor:pointer;

    transition:.25s;

    font-size:22px;

    font-weight:600;

}

.protein-option-button:hover{

    border-color:#c40000;

    background:#fff8f8;

    transform:translateY(-2px);

}

.protein-option-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.protein-included{

    color:#2ca64c;

    font-weight:700;

}
/* =====================================
   TORTILLA FACTORY PAGE
===================================== */

.tortilla-factory-page {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 18% 20%,
            rgba(255, 211, 125, 0.22),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #fff8eb,
            #f8ead1
        );
}

.tortilla-hero {
    min-height: calc(100vh - 80px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr);
    align-items: center;
    gap: 70px;
    padding: 70px 7%;
    overflow: hidden;
}

.tortilla-product-stage {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
}

.tortilla-package-3d {
    position: relative;
    z-index: 3;
    width: min(700px, 95%);
    animation: tortillaFloat 4.5s ease-in-out infinite;
    transform-style: preserve-3d;
}

.tortilla-package-3d img {
    display: block;
    width: 100%;
    transform:scale(1.3);
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    filter: drop-shadow(0 30px 24px rgba(77, 34, 8, 0.28));
}

.tortilla-package-3d:hover img {
    transform:
        rotateY(-12deg)
        rotateX(6deg)
        scale(1.05);
    filter: drop-shadow(0 38px 30px rgba(77, 34, 8, 0.4));
}

.tortilla-glow {
    position: absolute;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(255, 193, 77, 0.5),
            rgba(255, 193, 77, 0)
        );
    filter: blur(12px);
}

.tortilla-shadow {
    position: absolute;
    bottom: 90px;
    width: 330px;
    height: 45px;
    border-radius: 50%;
    background: rgba(82, 43, 17, 0.23);
    filter: blur(15px);
    animation: tortillaShadow 4.5s ease-in-out infinite;
}

@keyframes tortillaFloat {
    0%,
    100% {
        transform:
            translateY(0)
            rotateY(-8deg)
            rotateX(3deg);
    }

    50% {
        transform:
            translateY(-28px)
            rotateY(8deg)
            rotateX(-2deg);
    }
}

@keyframes tortillaShadow {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.32;
    }

    50% {
        transform: scale(0.82);
        opacity: 0.18;
    }
}

.tortilla-hero-info {
    max-width: 650px;
}

.tortilla-eyebrow,
.tortilla-story-heading span,
.tortilla-products-heading span {
    color: #ae1717;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.18em;
}

.tortilla-hero-info h1 {
    margin: 18px 0 24px;
    color: #241811;
    font-size: clamp(52px, 6vw, 92px);
    line-height: 0.97;
    letter-spacing: -0.05em;
}

.tortilla-description {
    max-width: 590px;
    color: #6f5a4d;
    font-size: 18px;
    line-height: 1.75;
}

.tortilla-features {
    display: grid;
    gap: 14px;
    margin: 30px 0;
}

.tortilla-features div {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid rgba(112, 59, 24, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(10px);
}

.tortilla-features strong {
    min-width: 155px;
    color: #3c2114;
}

.tortilla-features span {
    color: #806b5f;
}

.tortilla-purchase-row {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 35px;
}

.tortilla-price {
    display: flex;
    flex-direction: column;
}

.tortilla-price span {
    color: #8b7568;
    font-size: 13px;
}

.tortilla-price strong {
    color: #a40000;
    font-size: 35px;
}

.tortilla-buy-button {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    padding: 18px 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, #d11b1b, #980000);
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 16px 30px rgba(164, 0, 0, 0.25);
    transition: 0.25s ease;
}

.tortilla-buy-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 36px rgba(164, 0, 0, 0.34);
}

.tortilla-buy-button span {
    font-size: 24px;
}

.tortilla-story,
.tortilla-products-section {
    padding: 100px 7%;
}

.tortilla-story {
    background: #1d120d;
    color: #ffffff;
}

.tortilla-story-heading {
    max-width: 820px;
    margin-bottom: 50px;
}

.tortilla-story-heading span {
    color: #f0ad46;
}

.tortilla-story-heading h2,
.tortilla-products-heading h2 {
    margin: 16px 0 0;
    font-size: clamp(38px, 5vw, 68px);
    line-height: 1.05;
}

.tortilla-story-grid,
.tortilla-products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.tortilla-info-card {
    min-height: 280px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.05);
}

.tortilla-info-number {
    color: #f0ad46;
    font-size: 15px;
    font-weight: 900;
}

.tortilla-info-card h3 {
    margin: 70px 0 14px;
    font-size: 25px;
}

.tortilla-info-card p {
    color: #c6b8ae;
    line-height: 1.7;
}

.tortilla-products-section {
    background: #fffaf2;
}

.tortilla-products-heading {
    margin-bottom: 45px;
    text-align: center;
}

.tortilla-product-card {
    padding: 32px;
    border: 1px solid #eadcc7;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(83, 46, 20, 0.08);
    transition: 0.25s ease;
}

.tortilla-product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 44px rgba(83, 46, 20, 0.13);
}

.tortilla-product-icon {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: #fff0d7;
    font-size: 36px;
}

.tortilla-product-card h3 {
    margin: 26px 0 10px;
    color: #2a1b13;
    font-size: 25px;
}

.tortilla-product-card p {
    min-height: 76px;
    color: #79675c;
    line-height: 1.65;
}

.tortilla-product-card strong {
    display: block;
    margin: 22px 0;
    color: #a40000;
    font-size: 25px;
}

.tortilla-product-card a {
    display: inline-block;
    padding: 13px 21px;
    border-radius: 999px;
    background: #a80000;
    color: white;
    font-weight: 800;
    text-decoration: none;
}

@media (max-width: 980px) {
    .tortilla-hero {
        grid-template-columns: 1fr;
        gap: 0;
        padding-top: 35px;
    }

    .tortilla-product-stage {
        min-height: 800px;
    }

    .tortilla-hero-info {
        margin: 0 auto;
        text-align: center;
    }

    .tortilla-description {
        margin-inline: auto;
    }

    .tortilla-features div {
        text-align: left;
    }

    .tortilla-purchase-row {
        justify-content: center;
    }

    .tortilla-story-grid,
    .tortilla-products-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 580px) {
    .tortilla-product-stage {
        min-height: 380px;
    }

    .tortilla-package-3d {
        width: 88%;
    }

    .tortilla-hero-info h1 {
        font-size: 48px;
    }

    .tortilla-purchase-row {
        flex-direction: column;
    }

    .tortilla-features strong {
        min-width: 120px;
    }
}
.tortilla-pack-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 28px 0;
}

.tortilla-pack-details div {
    padding: 18px;
    border: 1px solid rgba(112, 59, 24, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.65);
    text-align: center;
}

.tortilla-pack-details span {
    display: block;
    margin-bottom: 7px;
    color: #806b5f;
    font-size: 13px;
}

.tortilla-pack-details strong {
    color: #a40000;
    font-size: 20px;
}

@media (max-width: 580px) {
    .tortilla-pack-details {
        grid-template-columns: 1fr;
    }
}
.delivery-fields {
    display: none;
    margin-top: 20px;
    padding: 22px;
    border: 1px solid #e6c27a;
    border-radius: 18px;
    background: #fffaf1;
}

.delivery-fields.show {
    display: block;
}

.delivery-fields h3 {
    margin-top: 0;
}

.delivery-fields input,
.delivery-fields textarea {
    width: 100%;
    margin-top: 12px;
}

.delivery-address-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.delivery-fee-preview {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    padding: 14px;
    border-radius: 12px;
    background: white;
}

.delivery-fee-preview strong {
    color: #a40000;
}

@media (max-width: 600px) {
    .delivery-address-row {
        grid-template-columns: 1fr;
    }
}
.delivery-badge {
    display: inline-block;
    padding: 7px 12px;
    border-radius: 999px;
    background: #dce9ff;
    color: #174ea6;
    font-size: 13px;
    font-weight: 800;
}

.delivery-order-details {
    margin-top: 14px;
    padding: 14px;
    border: 2px solid #4b83d1;
    border-radius: 14px;
    background: #f3f7ff;
}

.delivery-order-details > strong {
    display: block;
    margin-bottom: 7px;
    color: #174ea6;
}

.delivery-order-details p {
    margin: 4px 0;
    line-height: 1.45;
}

.delivery-order-instructions {
    margin-top: 12px;
    padding: 10px;
    border-radius: 10px;
    background: #ffffff;
}
/* =========================================
   EL DORADO NAVBAR IMAGE LOGO
========================================= */

.home-nav-image-logo {
    display: block;
    width: 44px;
    height: 44px;
    min-width: 44px;

    object-fit: cover;
    object-position: center;

    border-radius: 50%;
}

.menu-mobile-brand .home-nav-image-logo {
    width: 46px;
    height: 46px;
    min-width: 46px;
}

@media (max-width: 768px) {

    .home-nav-image-logo {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        flex: 0 0 38px !important;
    }

    .menu-mobile-brand .home-nav-image-logo {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
    }
}
@media (max-width: 768px) {

    body {
        min-height: 100vh;
    }

    .login-container,
    .kitchen-login-container,
    .kitchen-login-card {
        width: calc(100% - 32px) !important;
        max-width: 420px !important;

        margin: 22px auto !important;
        padding: 28px 22px !important;

        box-sizing: border-box !important;
    }

    .kitchen-login-card h1,
    .kitchen-login-card h2,
    .login-container h1,
    .login-container h2 {
        font-size: 28px !important;
        line-height: 1.1 !important;
    }

    .kitchen-login-card input,
    .login-container input {
        width: 100% !important;
        height: 48px !important;
        box-sizing: border-box !important;

        font-size: 15px !important;
    }

    .kitchen-login-card button,
    .login-container button {
        width: 100% !important;
        min-height: 48px !important;

        font-size: 15px !important;
    }
}
/* =========================================
   GLOBAL ADMIN LOGO FIX
========================================= */

.admin-brand-logo,
.sales-mobile-logo,
.menu-admin-logo,
.reservations-admin-logo,
.kitchen-admin-logo {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;

    object-fit: cover !important;
    object-position: center !important;

    border-radius: 50% !important;

    display: block !important;
    flex-shrink: 0 !important;
}
@media (max-width: 768px) {

    .admin-brand-logo,
    .sales-mobile-logo,
    .menu-admin-logo,
    .reservations-admin-logo,
    .kitchen-admin-logo {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
    }
}
/* =========================================
   ADMIN AREA LOGO SIZES
========================================= */

.admin-brand-logo,
.admin-menu-logo,
.sales-mobile-logo {
    display: block !important;

    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;

    object-fit: cover !important;
    object-position: center !important;

    border-radius: 50% !important;

    flex-shrink: 0 !important;
}

@media (max-width: 768px) {
    .admin-brand-logo,
    .admin-menu-logo,
    .sales-mobile-logo {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
    }
}   
/* =========================================
   ADMIN AREA LOGO SIZES
========================================= */

.admin-brand-logo,
.admin-menu-logo,
.sales-mobile-logo,
.orders-mobile-logo {
    display: block !important;

    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;

    object-fit: cover !important;
    object-position: center !important;

    border-radius: 50% !important;

    flex-shrink: 0 !important;
}

@media (max-width: 768px) {
    .admin-brand-logo,
    .admin-menu-logo,
    .sales-mobile-logo,
    .orders-mobile-logo {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
    }
}
/* =========================================
   SALES DASHBOARD — DESKTOP
========================================= */

.sales-page-content {
    width: 92%;
    max-width: 1450px;

    margin: 0 auto;
    padding: 45px 0 70px;
}


.sales-page-heading {
    margin-bottom: 30px;
}


.sales-page-heading > span,
.sales-panel-heading span {
    display: block;

    color: #a02121;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1.7px;
}


.sales-page-heading h1 {
    margin: 6px 0 8px;

    color: #2a2420;

    font-size: 42px;
}


.sales-page-heading p {
    margin: 0;

    color: #746b63;

    font-size: 16px;
}


/* =========================
   STAT CARDS
========================= */

.sales-stat-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;

    margin-bottom: 28px;
}


.sales-stat-card {
    min-height: 135px;

    display: flex;
    align-items: center;
    gap: 17px;

    padding: 22px;

    background: #ffffff;

    border:
        1px solid rgba(0, 0, 0, 0.05);

    border-radius: 19px;

    box-shadow:
        0 11px 28px
        rgba(44, 35, 29, 0.08);
}


.sales-stat-icon {
    width: 58px;
    height: 58px;

    min-width: 58px;

    display: grid;
    place-items: center;

    border-radius: 17px;

    background: #fff1db;

    font-size: 27px;
}


.sales-stat-card span {
    display: block;

    color: #756d65;

    font-size: 13px;
    font-weight: 700;
}


.sales-stat-card strong {
    display: block;

    margin: 5px 0 6px;

    color: #25211e;

    font-size: 29px;
}


.sales-stat-card small {
    color: #8c837b;

    font-size: 11px;
}


/* =========================
   LOWER PANELS
========================= */

.sales-main-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 22px;
}


.sales-panel {
    padding: 25px;

    background: #ffffff;

    border:
        1px solid #ece5dc;

    border-radius: 20px;

    box-shadow:
        0 11px 30px
        rgba(44, 35, 29, 0.08);
}


.sales-panel-heading {
    margin-bottom: 24px;
}


.sales-panel-heading h2 {
    margin: 5px 0 0;

    color: #2b2622;

    font-size: 24px;
}


.sales-large-metric,
.sales-performance-row {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


.sales-large-metric > div,
.sales-performance-row > div {
    padding: 22px;

    background: #faf7f3;

    border-radius: 16px;
}


.sales-large-metric span,
.sales-performance-row span {
    display: block;

    margin-bottom: 8px;

    color: #756d65;

    font-size: 12px;
    font-weight: 700;
}


.sales-large-metric strong,
.sales-performance-row strong {
    color: #25211e;

    font-size: 28px;
}


/* =========================
   SALES TABLET
========================= */

@media (max-width: 1000px) {

    .sales-stat-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .sales-main-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================
   SALES PHONE
========================= */

@media (max-width: 768px) {

    .sales-page-content {
        width: 100%;

        padding:
            28px 16px 70px;
    }

    .sales-page-heading h1 {
        font-size: 30px;
    }

    .sales-stat-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .sales-stat-card {
        min-height: 110px;
    }

    .sales-main-grid {
        grid-template-columns: 1fr;
    }

    .sales-large-metric,
    .sales-performance-row {
        grid-template-columns: 1fr;
    }
}
/* =========================================
   ADMIN REVIEWS — DELETE FORM FIX
========================================= */

.admin-review-card form {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: none !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}

.admin-delete-review {
    width: 100% !important;

    margin: 0 !important;

    padding: 13px 18px !important;

    border-radius: 12px !important;
}
/* =========================================================
   FINAL ADMIN DESKTOP NAVBAR
   Matches the white El Dorado customer navbar style
========================================================= */
/* =========================================
   ORDER PAYMENT STATUS
========================================= */

.order-payment-row {
    margin-top: 10px;
    margin-bottom: 12px;
}

.payment-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.payment-cash {
    background: #fff3cd;
    color: #7a5200;
    border: 1px solid #e6c75a;
}

.payment-card {
    background: #dff5e5;
    color: #176b32;
    border: 1px solid #8fd19e;
}

.payment-unknown {
    background: #f3f3f3;
    color: #555;
    border: 1px solid #ccc;
}
/* DoorDash recovery buttons */

.doordash-retry-form,
.convert-pickup-form {
    margin: 10px 0 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.doordash-retry-button,
.convert-pickup-button {
    width: auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 9px 14px !important;
    margin: 0;

    border-radius: 9px;
    border: none;

    font-size: 13px !important;
    font-weight: 700;
    line-height: 1.2;
}

.convert-pickup-button {
    background: #f59e0b;
    color: #111;
}

@media (min-width: 769px) {

    /* =====================================
       MAIN ADMIN NAVBAR
    ===================================== */

    .admin-navbar,
    .orders-desktop-navbar {
        width: 100% !important;
        min-height: 82px !important;
        height: 82px !important;

        padding: 0 4.5% !important;

        display: flex !important;
        align-items: center !important;

        gap: 28px !important;

        background: #fffaf4 !important;
        color: #321c15 !important;

        border-bottom: 1px solid rgba(50, 28, 21, 0.08) !important;

        box-shadow:
            0 5px 18px rgba(50, 28, 21, 0.08) !important;

        box-sizing: border-box !important;
    }


    /* =====================================
       BRAND
    ===================================== */

    .admin-brand,
    .orders-desktop-brand {
        display: flex !important;
        align-items: center !important;

        gap: 11px !important;

        flex-shrink: 0 !important;

        color: #321c15 !important;
        text-decoration: none !important;
    }


    .admin-brand-logo,
    .orders-desktop-logo {
        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;
        max-width: 46px !important;

        min-height: 46px !important;
        max-height: 46px !important;

        display: block !important;

        object-fit: cover !important;
        object-position: center !important;

        border-radius: 50% !important;
    }


    .admin-brand span,
    .orders-desktop-brand div {
        display: flex !important;
        flex-direction: column !important;
    }


    .admin-brand strong,
    .orders-desktop-brand strong {
        color: #321c15 !important;

        font-family: "Playfair Display", serif !important;

        font-size: 18px !important;
        font-weight: 800 !important;

        line-height: 1 !important;
    }


    .admin-brand small,
    .orders-desktop-brand small {
        margin-top: 5px !important;

        color: #8b746a !important;

        font-size: 9px !important;
        font-weight: 700 !important;

        letter-spacing: 0.8px !important;
        text-transform: uppercase !important;

        opacity: 1 !important;
    }


    /* =====================================
       NAVIGATION LINKS
    ===================================== */

    .admin-nav-links,
    .orders-desktop-links {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex: 1 !important;

        gap: 28px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        box-shadow: none !important;
    }


    .admin-nav-links a,
    .orders-desktop-links a {
        position: relative !important;

        width: auto !important;

        padding: 30px 0 27px !important;

        background: transparent !important;

        color: #5d4940 !important;

        border-radius: 0 !important;

        font-family: "Poppins", sans-serif !important;
        font-size: 13px !important;
        font-weight: 800 !important;

        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;

        text-decoration: none !important;

        white-space: nowrap !important;

        box-shadow: none !important;

        transform: none !important;
    }


    .admin-nav-links a::after,
    .orders-desktop-links a::after {
        content: "" !important;

        position: absolute !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 20px !important;

        height: 2px !important;

        background: #b40000 !important;

        transform: scaleX(0) !important;
        transform-origin: center !important;

        transition: transform 0.2s ease !important;
    }


    .admin-nav-links a:hover,
    .admin-nav-links a.active,
    .orders-desktop-links a:hover,
    .orders-desktop-links a.active {
        background: transparent !important;

        color: #b40000 !important;

        transform: none !important;
    }


    .admin-nav-links a:hover::after,
    .admin-nav-links a.active::after,
    .orders-desktop-links a:hover::after,
    .orders-desktop-links a.active::after {
        transform: scaleX(1) !important;
    }


    /* =====================================
       RIGHT SIDE
    ===================================== */

    .admin-navbar-actions,
    .orders-desktop-actions {
        display: flex !important;
        align-items: center !important;

        gap: 9px !important;

        margin-left: auto !important;

        flex-shrink: 0 !important;
    }


    .admin-icon-button,
    .orders-desktop-icon-button {
        width: 42px !important;
        height: 42px !important;

        min-width: 42px !important;

        padding: 0 !important;

        display: grid !important;
        place-items: center !important;

        background: #fff3e9 !important;
        color: #321c15 !important;

        border: none !important;
        border-radius: 12px !important;

        box-shadow: none !important;
    }


    .admin-icon-button:hover,
    .orders-desktop-icon-button:hover {
        background: #f8e5d7 !important;

        transform: none !important;
    }


    /* =====================================
       LOGOUT
    ===================================== */

    .admin-logout-button,
    .orders-desktop-logout {
        width: auto !important;

        padding: 13px 20px !important;

        background: #b40000 !important;
        color: #ffffff !important;

        border-radius: 14px !important;

        font-size: 13px !important;
        font-weight: 800 !important;

        text-decoration: none !important;

        white-space: nowrap !important;

        box-shadow:
            0 8px 18px rgba(180, 0, 0, 0.16) !important;
    }


    .admin-logout-button:hover,
    .orders-desktop-logout:hover {
        background: #900000 !important;

        transform: translateY(-1px) !important;
    }

}
/* =========================================
   ADMIN MOBILE HAMBURGER
========================================= */

.admin-mobile-menu-button {
    display: none;
}

@media (max-width: 768px) {

    .admin-navbar {
        min-height: 70px !important;
        padding: 10px 16px !important;

        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .admin-brand {
        flex: 1;
    }

    .admin-brand small {
        display: none !important;
    }

    .admin-mobile-menu-button {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 0 !important;
        margin: 0 !important;

        background: #fff1c7 !important;
        color: #8f1616 !important;

        border: none !important;
        border-radius: 12px !important;

        font-size: 25px !important;
        line-height: 1 !important;

        box-shadow: none !important;

        position: relative;
        z-index: 1002;
    }

    .admin-nav-links {
        display: none !important;

        position: absolute !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        padding: 15px !important;

        background: #8f1616 !important;

        flex-direction: column !important;
        align-items: stretch !important;

        box-shadow: 0 12px 25px rgba(0,0,0,.22) !important;

        z-index: 1001;
    }

    .admin-nav-links.admin-mobile-open {
        display: flex !important;
    }

    .admin-nav-links a {
        width: 100% !important;

        padding: 14px 16px !important;

        color: white !important;

        border-radius: 10px !important;

        text-align: left !important;

        box-sizing: border-box;
    }

    .admin-nav-links a:hover {
        background: rgba(255,255,255,.12) !important;
    }

    .admin-navbar-actions {
        display: none !important;
    }
}
/* =========================================
   FORCE ADMIN HAMBURGER ON MOBILE
========================================= */

@media (max-width: 768px) {

    button.admin-mobile-menu-button {
        display: flex !important;

        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;

        padding: 0 !important;
        margin: 0 0 0 auto !important;

        align-items: center !important;
        justify-content: center !important;

        background: #fff1c7 !important;
        color: #8f1616 !important;

        border: none !important;
        border-radius: 12px !important;

        font-size: 25px !important;
        font-weight: 800 !important;
        line-height: 1 !important;

        box-shadow: none !important;

        position: relative !important;
        z-index: 9999 !important;

        cursor: pointer !important;
    }

    button.admin-mobile-menu-button:hover {
        transform: none !important;
        background: #ffe7a3 !important;
    }
}
@media (max-width: 768px) {
    .admin-navbar {
        display: none !important;
    }

    .orders-mobile-navbar {
        display: flex !important;
    }
}
@media (max-width: 768px) {
    .orders-toolbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 0 12px;
    }

    .toolbar-btn,
    .end-day-form,
    .end-day-form .toolbar-btn {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .orders-toolbar {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {

    .order-card-footer {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 10px;
        align-items: center;
    }

    .order-card-footer .order-total {
        grid-column: 1 / -1;
        font-size: 16px;
        margin-bottom: 2px;
    }

    .order-card-footer .print-receipt-button {
        width: 72px;
        min-width: 72px;
        max-width: 72px;
    }

    .order-card-footer form {
        width: 100% !important;
        min-width: 0 !important;
    }

    .order-card-footer .start-button,
    .order-card-footer .ready-button,
    .order-card-footer .complete-button {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 10px 12px;
        font-size: 12px;
    }
}
/* =========================================
   ADMIN + KITCHEN TABLET FIX
   769px - 1180px
========================================= */

@media (min-width: 769px) and (max-width: 1180px) {

    /* ADMIN NAVBAR */

    .admin-navbar,
    .orders-desktop-navbar {
        min-height: 72px !important;
        height: auto !important;

        padding: 10px 18px !important;

        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .admin-brand,
    .orders-desktop-brand {
        flex: 1 1 auto !important;
    }

    .admin-brand-logo,
    .orders-desktop-logo {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
    }

    .admin-brand strong,
    .orders-desktop-brand strong {
        font-size: 15px !important;
    }

    .admin-brand small,
    .orders-desktop-brand small {
        font-size: 8px !important;
    }

    .admin-nav-links,
    .orders-desktop-links {
        order: 3 !important;

        width: 100% !important;

        justify-content: flex-start !important;

        gap: 16px !important;

        overflow-x: auto !important;

        padding-bottom: 3px !important;
    }

    .admin-nav-links a,
    .orders-desktop-links a {
        padding: 10px 0 12px !important;

        font-size: 11px !important;

        white-space: nowrap !important;
    }

    .admin-nav-links a::after,
    .orders-desktop-links a::after {
        bottom: 5px !important;
    }

    .admin-navbar-actions,
    .orders-desktop-actions {
        margin-left: auto !important;
    }

    .admin-logout-button,
    .orders-desktop-logout {
        padding: 10px 14px !important;
        font-size: 11px !important;
    }


    /* ORDERS PAGE */

    #ordersContainer {
        width: 100% !important;
        max-width: none !important;

        padding: 0 18px 30px !important;

        box-sizing: border-box !important;
    }

    #searchOrders {
        width: 100% !important;
        max-width: none !important;

        box-sizing: border-box !important;
    }


    /* KITCHEN BOARD */

    .kitchen-board {
        width: 100% !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 16px !important;

        align-items: start !important;
    }

    .kitchen-column {
        width: 100% !important;
        min-width: 0 !important;
    }

    .kitchen-column-ready {
        grid-column: 1 / -1 !important;
    }

    .kitchen-column-orders {
        min-height: 300px !important;
        max-height: none !important;

        padding: 12px !important;
    }


    /* ORDER CARDS */

    .kitchen-order-card {
        width: 100% !important;

        padding: 14px !important;

        box-sizing: border-box !important;
    }

    .order-card-top {
        gap: 8px !important;
    }

    .order-card-footer {
        grid-template-columns: auto 1fr !important;

        gap: 8px !important;
    }

    .order-card-footer .order-total {
        grid-column: 1 / -1 !important;
    }

    .order-card-footer .print-receipt-button {
        min-width: 70px !important;
    }

    .order-card-footer .start-button,
    .order-card-footer .ready-button,
    .order-card-footer .complete-button {
        width: 100% !important;
        min-width: 0 !important;
    }


    /* TOOLBAR */

    .orders-toolbar {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 10px !important;
    }

    .toolbar-btn,
    .end-day-form,
    .end-day-form .toolbar-btn {
        width: 100% !important;
        min-width: 0 !important;
    }
}
/* =========================================
   FINAL TABLET ADMIN CLEANUP
========================================= */

@media (min-width: 769px) and (max-width: 900px) {

    /* ADMIN NAVBAR */

    .admin-navbar,
    .orders-desktop-navbar {
        padding: 10px 14px !important;
    }

    .admin-nav-links,
    .orders-desktop-links {
        gap: 12px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scrollbar-width: thin !important;
    }

    .admin-nav-links a,
    .orders-desktop-links a {
        font-size: 10px !important;
        flex-shrink: 0 !important;
    }

    .admin-navbar-actions,
    .orders-desktop-actions {
        flex-shrink: 0 !important;
    }


    /* KITCHEN CARD FOOTER */

    .order-card-footer {
        display: grid !important;

        grid-template-columns:
            62px minmax(0, 1fr) !important;

        gap: 8px !important;
    }

    .order-card-footer .order-total {
        grid-column: 1 / -1 !important;
    }

    .order-card-footer .print-receipt-button {
        width: 62px !important;
        min-width: 62px !important;
        max-width: 62px !important;

        padding: 10px 6px !important;
        font-size: 11px !important;
    }

    .order-card-footer form {
        width: 100% !important;
        min-width: 0 !important;
    }

    .order-card-footer .start-button,
    .order-card-footer .ready-button,
    .order-card-footer .complete-button {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        padding: 10px 8px !important;

        font-size: 11px !important;

        white-space: normal !important;
        text-align: center !important;
    }
}
/* =========================================
   TABLET KITCHEN DISPLAY MODE
   Keep New / Cooking / Ready side-by-side
========================================= */

@media (min-width: 769px) and (max-width: 1180px) {

    .kitchen-display-mode {
        width: 100vw !important;
        height: 100vh !important;
        overflow: hidden !important;
        background: #111 !important;
    }

    .kitchen-display-mode #ordersContainer {
        width: 100vw !important;
        height: 100vh !important;

        padding: 10px !important;
        margin: 0 !important;

        box-sizing: border-box !important;
    }

    .kitchen-display-mode .kitchen-board {
        width: 100% !important;
        height: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 10px !important;

        margin: 0 !important;
    }

    .kitchen-display-mode .kitchen-column,
    .kitchen-display-mode .kitchen-column-ready {
        grid-column: auto !important;

        width: 100% !important;
        min-width: 0 !important;

        height: calc(100vh - 20px) !important;

        border-radius: 14px !important;
    }

    .kitchen-display-mode .kitchen-column-header {
        min-height: 58px !important;

        padding: 10px 12px !important;
    }

    .kitchen-display-mode .kitchen-column-header h2 {
        font-size: 15px !important;
    }

    .kitchen-display-mode .column-icon {
        font-size: 18px !important;
    }

    .kitchen-display-mode .column-count {
        min-width: 28px !important;
        height: 28px !important;

        font-size: 12px !important;
    }

    .kitchen-display-mode .kitchen-column-orders {
        height: calc(100vh - 80px) !important;

        min-height: 0 !important;
        max-height: none !important;

        padding: 8px !important;

        overflow-y: auto !important;

        gap: 8px !important;
    }


    /* COMPACT TOUCH-FRIENDLY ORDER CARDS */

    .kitchen-display-mode .kitchen-order-card {
        padding: 11px !important;

        border-radius: 11px !important;
    }

    .kitchen-display-mode .order-number {
        font-size: 15px !important;
    }

    .kitchen-display-mode .order-date-time {
        font-size: 9px !important;
    }

    .kitchen-display-mode .status-badge {
        padding: 5px 7px !important;

        font-size: 8px !important;
    }

    .kitchen-display-mode .order-wait-timer {
        margin-top: 8px !important;
        padding: 7px 8px !important;

        font-size: 10px !important;
    }

    .kitchen-display-mode .customer-info {
        margin-top: 9px !important;
    }

    .kitchen-display-mode .customer-info h3 {
        font-size: 15px !important;
    }

    .kitchen-display-mode .customer-info p {
        font-size: 10px !important;
    }

    .kitchen-display-mode .order-food {
        margin-top: 9px !important;
        padding: 9px !important;
    }

    .kitchen-display-mode .order-food h4 {
        font-size: 9px !important;
    }

    .kitchen-display-mode .order-food p {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    .kitchen-display-mode .card-instructions {
        margin-top: 8px !important;
        padding: 8px !important;

        font-size: 10px !important;
    }

    .kitchen-display-mode .order-card-footer {
        display: grid !important;

        grid-template-columns:
            52px minmax(0, 1fr) !important;

        gap: 6px !important;

        padding-top: 10px !important;
    }

    .kitchen-display-mode .order-card-footer .order-total {
        grid-column: 1 / -1 !important;

        font-size: 14px !important;
    }

    .kitchen-display-mode .print-receipt-button {
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;

        padding: 8px 4px !important;

        font-size: 9px !important;
    }

    .kitchen-display-mode .start-button,
    .kitchen-display-mode .ready-button,
    .kitchen-display-mode .complete-button {
        width: 100% !important;
        min-width: 0 !important;

        padding: 8px 6px !important;

        font-size: 10px !important;

        white-space: normal !important;
    }
}
/* =========================================
   ADMIN MENU — TABLET FIX
   769px - 1180px
========================================= */

@media (min-width: 769px) and (max-width: 1180px) {

    /* Keep the page inside the tablet width */
    body {
        overflow-x: hidden !important;
    }

    /* Menu table */
    .admin-menu-table,
    table {
        width: 100% !important;
        max-width: 100% !important;

        table-layout: fixed !important;

        font-size: 12px !important;
    }

    .admin-menu-table th,
    .admin-menu-table td,
    table th,
    table td {
        padding: 12px 8px !important;

        vertical-align: middle !important;

        word-break: break-word !important;
    }


    /* Column sizes */

    .admin-menu-table th:nth-child(1),
    .admin-menu-table td:nth-child(1),
    table th:nth-child(1),
    table td:nth-child(1) {
        width: 22% !important;
    }

    .admin-menu-table th:nth-child(2),
    .admin-menu-table td:nth-child(2),
    table th:nth-child(2),
    table td:nth-child(2) {
        width: 14% !important;
    }

    .admin-menu-table th:nth-child(3),
    .admin-menu-table td:nth-child(3),
    table th:nth-child(3),
    table td:nth-child(3) {
        width: 10% !important;
    }

    .admin-menu-table th:nth-child(4),
    .admin-menu-table td:nth-child(4),
    table th:nth-child(4),
    table td:nth-child(4) {
        width: 14% !important;
    }

    .admin-menu-table th:nth-child(5),
    .admin-menu-table td:nth-child(5),
    table th:nth-child(5),
    table td:nth-child(5) {
        width: 40% !important;
    }


    /* Availability badge */

    .menu-available-badge,
    .menu-sold-out-badge {
        padding: 6px 8px !important;

        font-size: 9px !important;

        white-space: nowrap !important;
    }


    /* ACTIONS CELL */

    .menu-availability-form {
        display: block !important;

        width: 100% !important;

        margin: 0 0 7px 0 !important;
    }


    .mark-sold-out-button,
    .make-available-button {
        width: 100% !important;

        min-width: 0 !important;

        padding: 9px 7px !important;

        font-size: 10px !important;

        white-space: nowrap !important;
    }


    /* Edit + Delete */

    td:last-child a,
    td:last-child button {
        min-width: 0 !important;

        font-size: 10px !important;
    }


    td:last-child a {
        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: calc(50% - 5px) !important;

        padding: 9px 5px !important;

        box-sizing: border-box !important;

        white-space: nowrap !important;
    }


    td:last-child form:not(.menu-availability-form) {
        display: inline-block !important;

        width: calc(50% - 5px) !important;

        margin: 0 !important;

        background: transparent !important;

        padding: 0 !important;

        box-shadow: none !important;
    }


    td:last-child form:not(.menu-availability-form) button {
        width: 100% !important;

        padding: 9px 5px !important;

        box-sizing: border-box !important;

        white-space: nowrap !important;
    }
}
/* =========================================
   ADMIN NAVBAR — TABLET
========================================= */

@media (min-width: 769px) and (max-width: 900px) {

    .admin-navbar {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;

        padding: 10px 14px !important;

        gap: 8px !important;

        box-sizing: border-box !important;
    }


    /* LOGO + NAME */

    .admin-brand {
        flex: 1 1 auto !important;

        display: flex !important;
        align-items: center !important;

        min-width: 0 !important;
    }

    .admin-brand-logo {
        width: 40px !important;
        height: 40px !important;

        min-width: 40px !important;

        object-fit: cover !important;
    }

    .admin-brand strong {
        font-size: 15px !important;
        white-space: nowrap !important;
    }

    .admin-brand small {
        font-size: 8px !important;
        white-space: nowrap !important;
    }


    /* RIGHT SIDE BUTTONS */

    .admin-navbar-actions {
        margin-left: auto !important;

        display: flex !important;
        align-items: center !important;

        gap: 8px !important;

        flex-shrink: 0 !important;
    }

    .admin-logout-button {
        padding: 9px 12px !important;

        font-size: 10px !important;

        white-space: nowrap !important;
    }


    /* SECOND ROW */

    .admin-nav-links {
        order: 3 !important;

        width: 100% !important;

        display: flex !important;
        align-items: center !important;

        gap: 18px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        white-space: nowrap !important;

        padding: 2px 2px 5px !important;

        box-sizing: border-box !important;

        scrollbar-width: thin !important;
    }

    .admin-nav-links a {
        flex: 0 0 auto !important;

        padding: 9px 0 !important;

        font-size: 10px !important;

        white-space: nowrap !important;
    }


    /* Prevent whole page horizontal scrolling */

    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}
/* =========================================
   ADMIN DASHBOARD NAVBAR
   FINAL TABLET OVERRIDE
========================================= */

@media (min-width: 769px) and (max-width: 900px) {

    .admin-navbar {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) auto !important;

        grid-template-areas:
            "brand actions"
            "links links" !important;

        width: 100% !important;
        height: auto !important;

        padding: 10px 16px 6px !important;

        gap: 6px 12px !important;

        box-sizing: border-box !important;
    }


    /* TOP LEFT */

    .admin-brand {
        grid-area: brand !important;

        width: auto !important;
        min-width: 0 !important;

        display: flex !important;
        align-items: center !important;

        margin: 0 !important;
    }

    .admin-brand-logo {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
    }

    .admin-brand strong {
        font-size: 14px !important;
    }

    .admin-brand small {
        font-size: 8px !important;
    }


    /* TOP RIGHT */

    .admin-navbar-actions {
        grid-area: actions !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        gap: 7px !important;

        width: auto !important;

        margin: 0 !important;
    }

    .admin-icon-button {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;

        padding: 0 !important;
    }

    .admin-logout-button {
        height: 36px !important;

        display: inline-flex !important;
        align-items: center !important;

        padding: 0 12px !important;

        font-size: 10px !important;

        white-space: nowrap !important;
    }


    /* SECOND ROW */

    .admin-nav-links {
        grid-area: links !important;

        width: 100% !important;

        display: flex !important;
        align-items: center !important;

        gap: 20px !important;

        margin: 0 !important;
        padding: 0 2px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        white-space: nowrap !important;

        scrollbar-width: none !important;
    }

    .admin-nav-links::-webkit-scrollbar {
        display: none !important;
    }

    .admin-nav-links a {
        flex: 0 0 auto !important;

        padding: 10px 0 11px !important;

        font-size: 10px !important;

        white-space: nowrap !important;
    }


    /* Hamburger stays hidden on tablet */

    .admin-mobile-menu-button {
        display: none !important;
    }
}
/* =========================================
   ORDERS NAVBAR — TABLET
========================================= */

@media (min-width: 769px) and (max-width: 900px) {

    .orders-desktop-navbar {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) auto !important;

        grid-template-areas:
            "brand actions"
            "links links" !important;

        width: 100% !important;
        height: auto !important;

        padding: 10px 16px 6px !important;

        gap: 6px 12px !important;

        box-sizing: border-box !important;
    }


    .orders-desktop-brand {
        grid-area: brand !important;

        width: auto !important;
        min-width: 0 !important;

        display: flex !important;
        align-items: center !important;

        margin: 0 !important;
    }

    .orders-desktop-logo {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
    }

    .orders-desktop-brand strong {
        font-size: 14px !important;
    }

    .orders-desktop-brand small {
        font-size: 8px !important;
    }


    .orders-desktop-actions {
        grid-area: actions !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        gap: 7px !important;

        margin: 0 !important;
    }

    .orders-desktop-icon-button {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;

        padding: 0 !important;
    }

    .orders-desktop-logout {
        height: 36px !important;

        display: inline-flex !important;
        align-items: center !important;

        padding: 0 12px !important;

        font-size: 10px !important;

        white-space: nowrap !important;
    }


    .orders-desktop-links {
        grid-area: links !important;

        width: 100% !important;

        display: flex !important;
        align-items: center !important;

        gap: 20px !important;

        margin: 0 !important;
        padding: 0 2px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        white-space: nowrap !important;

        scrollbar-width: none !important;
    }

    .orders-desktop-links::-webkit-scrollbar {
        display: none !important;
    }

    .orders-desktop-links a {
        flex: 0 0 auto !important;

        padding: 10px 0 11px !important;

        font-size: 10px !important;

        white-space: nowrap !important;
    }
}