/* ========================================================= */
/* CORE STYLES & ANIMATED BACKGROUND                         */
/* ========================================================= */
body {
    margin: 0;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    background: linear-gradient(-45deg, #020617, #0f172a, #1e1b4b, #172554);
    background-size: 400% 400%;
    animation: gradientBG 20s ease infinite;
    color: #f8fafc;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.bg-shapes {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh;
    z-index: -1; 
    overflow: hidden; 
    pointer-events: none;
}

.shape { 
    position: absolute; 
    border-radius: 50%; 
    filter: blur(120px); 
    opacity: 0.4; 
    animation: floatShape 25s infinite alternate cubic-bezier(0.4, 0, 0.2, 1); 
}

.shape-1 { width: 600px; height: 600px; background: #38bdf8; top: -10%; left: -10%; }
.shape-2 { width: 700px; height: 700px; background: #3b82f6; bottom: -20%; right: -10%; animation-delay: -5s; }
.shape-3 { width: 500px; height: 500px; background: #8b5cf6; top: 40%; left: 30%; animation-delay: -10s; }

@keyframes floatShape {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    33% { transform: translate(150px, -100px) scale(1.2) rotate(10deg); }
    66% { transform: translate(-100px, 150px) scale(0.8) rotate(-5deg); }
    100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}

/* ========================================================= */
/* HEADER & NAVIGATION                                       */
/* ========================================================= */
.main-header {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 15px 5%;
    background: rgba(15, 23, 42, 0.5); 
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
    position: sticky; 
    top: 0; 
    z-index: 1000;
}

.logout-btn { 
    color: #f87171; 
    text-decoration: none; 
    font-weight: 600; 
    transition: 0.3s; 
}

.logout-btn:hover { 
    color: #ef4444; 
    text-shadow: 0 0 15px rgba(239, 68, 68, 0.8); 
}

.tabs { 
    display: flex; 
    justify-content: center; 
    gap: 15px; 
    margin: 40px 0; 
    flex-wrap: wrap;
}

.tab-btn {
    padding: 12px 28px; 
    background: rgba(30, 41, 59, 0.4); 
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 50px; 
    color: #cbd5e1;
    font-size: 15px; 
    cursor: pointer; 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; 
    align-items: center; 
    gap: 8px;
}

.tab-btn:hover { 
    background: rgba(56, 189, 248, 0.1); 
    color: #38bdf8; 
    border-color: rgba(56, 189, 248, 0.4); 
    transform: translateY(-4px); 
    box-shadow: 0 10px 25px rgba(0,0,0,0.3); 
}

.tab-btn.active { 
    background: linear-gradient(135deg, #38bdf8, #2563eb); 
    color: white; 
    font-weight: 600; 
    border: none; 
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.5); 
}

.tab-container { 
    padding: 0 5%; 
    margin-bottom: 80px; 
}

.tab-content { 
    display: none; 
    perspective: 1000px; 
}

.tab-content.active { 
    display: block; 
}

/* ========================================================= */
/* CARDS & GRIDS                                             */
/* ========================================================= */
.food-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 30px; 
    margin-top: 30px; 
}

.food-card, .event-card, .admin-section-box { 
    background: rgba(30, 41, 59, 0.4); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    padding: 30px; 
    border-radius: 20px; 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); 
    position: relative; 
    overflow: hidden;
}

.food-card:hover, .event-card:hover, .admin-section-box:hover { 
    transform: translateY(-12px); 
    border-color: rgba(56, 189, 248, 0.6);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 25px rgba(56, 189, 248, 0.3); 
    z-index: 10;
}

/* Inner highlight reflection for cards */
.food-card::before, .event-card::before {
    content: ''; 
    position: absolute; 
    top: 0; 
    left: -100%; 
    width: 50%; 
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    transition: all 0.7s ease; 
    transform: skewX(-20deg);
}

.food-card:hover::before, .event-card:hover::before { 
    left: 200%; 
}

/* ========================================================= */
/* INPUTS & BUTTONS                                          */
/* ========================================================= */
.clean-input, .search-container input { 
    padding: 15px; 
    border-radius: 12px; 
    background: rgba(15, 23, 42, 0.5); 
    color: white; 
    border: 1px solid rgba(255,255,255,0.1); 
    width: 100%; 
    box-sizing: border-box; 
    margin-bottom: 15px; 
    font-size: 15px; 
    transition: 0.3s; 
    backdrop-filter: blur(5px);
}

.clean-input:focus, .search-container input:focus { 
    outline: none; 
    border-color: #38bdf8; 
    background: rgba(15, 23, 42, 0.8); 
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.2); 
}

/* ========================================================= */
/* BUTTON COLORS FIX - VIBRANT & GLOWING                     */
/* ========================================================= */

/* Base button styling */
.action-btn, .food-card button, .btn-gray, .btn-red, .btn-green, .btn-blue, .btn-yellow {
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    color: white !important; /* Forces text to stay white */
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* RED BUTTONS (Back, Delete, Reject) */
.btn-red, .btn-gray, button[onclick*="back"], button[onclick*="delete"], button[onclick*="cancel"], .action-btn.btn-red {
    background: linear-gradient(135deg, #ef4444, #991b1b) !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}
.btn-red:hover, button[onclick*="back"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.5) !important;
    filter: brightness(1.2);
}

/* GREEN BUTTONS (Success, Accept, Mark Done) */
.btn-green, button[onclick*="complete"], button[onclick*="placeOrder"], .action-btn.btn-green {
    background: linear-gradient(135deg, #10b981, #065f46) !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.btn-green:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5) !important;
}

/* BLUE BUTTONS (Primary, Add, View) */
.btn-blue, .food-card button, .action-btn.btn-blue {
    background: linear-gradient(135deg, #0ea5e9, #1e40af) !important;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}
.btn-blue:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.5) !important;
}

/* YELLOW/ORANGE (Customize, Edit) */
.btn-yellow, .action-btn.btn-yellow {
    background: linear-gradient(135deg, #f59e0b, #92400e) !important;
    color: #020617 !important; /* Dark text for contrast */
}

button:active {
    transform: scale(0.95) !important;
}

/* ========================================================= */
/* TABLES                                                    */
/* ========================================================= */
table { 
    width: 100%; 
    border-collapse: separate; 
    border-spacing: 0; 
    background: rgba(30, 41, 59, 0.3); 
    backdrop-filter: blur(12px); 
    border-radius: 15px; 
    overflow: hidden; 
    margin-bottom: 40px; 
    border: 1px solid rgba(255,255,255,0.05); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

th { 
    background: rgba(15, 23, 42, 0.6); 
    padding: 20px; 
    text-align: left; 
    font-size: 14px; 
    color: #94a3b8; 
    text-transform: uppercase; 
    letter-spacing: 1px;
}

td { 
    padding: 20px; 
    border-bottom: 1px solid rgba(255,255,255,0.05); 
    font-size: 15px; 
}

tr:last-child td { border-bottom: none; }
tr:hover { background: rgba(255,255,255,0.04); }

/* ========================================================= */
/* FLOATING CART & DRAWER                                    */
/* ========================================================= */
.floating-cart { 
    position: fixed; 
    right: 30px; 
    bottom: 30px; 
    background: linear-gradient(135deg, #38bdf8, #2563eb);
    color: white; 
    width: 65px; 
    height: 65px; 
    border-radius: 50%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 24px; 
    cursor: pointer; 
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.5); 
    transition: all 0.3s ease; 
    z-index: 9998; 
}

.floating-cart:hover { 
    transform: scale(1.1) translateY(-5px); 
    box-shadow: 0 15px 40px rgba(37, 99, 235, 0.7); 
}

#cart-count { 
    position: absolute; 
    top: -2px; 
    right: -2px; 
    background: #ef4444; 
    color: white; 
    border-radius: 50%; 
    padding: 4px 8px; 
    font-size: 12px; 
    font-weight: bold; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); 
}

.cart-drawer { 
    position: fixed; 
    top: 0; 
    right: -420px; 
    width: 380px; 
    height: 100vh; 
    background: rgba(15, 23, 42, 0.85); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px);
    padding: 25px; 
    box-sizing: border-box; 
    box-shadow: -15px 0 50px rgba(0,0,0,0.8); 
    transition: right 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); 
    display: flex; 
    flex-direction: column; 
    z-index: 9999; 
    border-left: 1px solid rgba(255,255,255,0.1); 
}

.cart-drawer.open { right: 0; }

.cart-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 20px; 
}

.cart-items { 
    flex: 1; 
    overflow-y: auto; 
    margin-bottom: 15px; 
    padding-right: 10px; 
}

.cart-item { 
    background: rgba(30, 41, 59, 0.5); 
    padding: 15px; 
    border-radius: 12px; 
    margin-bottom: 15px; 
    border: 1px solid rgba(255,255,255,0.05); 
}

.qty-controls { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    margin: 12px 0; 
}

.qty-controls button { 
    width: 32px; 
    height: 32px; 
    border-radius: 8px; 
    border: none; 
    background: #334155; 
    color: white; 
    font-weight: bold; 
    cursor: pointer; 
    transition: 0.2s;
}

.qty-controls button:hover { 
    background: #38bdf8; 
    color: black; 
}

.cart-item button.remove-btn { 
    background: rgba(239, 68, 68, 0.2); 
    border: 1px solid rgba(239, 68, 68, 0.5); 
    padding: 8px 12px; 
    border-radius: 8px; 
    color: #fca5a5; 
    cursor: pointer; 
    width: 100%; 
    margin-top: 5px; 
    font-weight: bold; 
    transition: 0.2s;
}

.cart-item button.remove-btn:hover { 
    background: #ef4444; 
    color: white; 
}

.cart-footer { 
    border-top: 1px solid rgba(255,255,255,0.1); 
    padding-top: 20px; 
}

.pay-btn { 
    width: 100%; 
    padding: 15px; 
    background: linear-gradient(135deg, #10b981, #059669); 
    border: none; 
    border-radius: 10px; 
    color: white; 
    font-weight: bold; 
    cursor: pointer; 
    font-size: 16px; 
    transition: 0.3s; 
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);
}

.pay-btn:hover { 
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.5); 
    transform: translateY(-3px);
}

/* ========================================================= */
/* MODALS & TOASTS                                           */
/* ========================================================= */
.custom-modal, .payment-modal { 
    display:none; 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background:rgba(0,0,0,0.6); 
    z-index:10000; 
    justify-content:center; 
    align-items:center; 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
}

.custom-box, .payment-box { 
    background: rgba(30, 41, 59, 0.85); 
    padding:35px; 
    border-radius:24px; 
    width:90%; 
    max-width:450px; 
    color:white; 
    border: 1px solid rgba(255,255,255,0.1); 
    box-shadow: 0 30px 60px rgba(0,0,0,0.6); 
}

.toast { 
    position:fixed; 
    bottom:30px; 
    left:50%; 
    transform:translateX(-50%); 
    background: linear-gradient(135deg, #38bdf8, #2563eb); 
    color:white; 
    padding:15px 30px; 
    border-radius:50px; 
    display:none; 
    font-weight: bold; 
    z-index: 10002; 
    box-shadow: 0 15px 30px rgba(37, 99, 235, 0.5);
}

/* Scroll Reveal Classes */
/* Glitch-Free Scroll Reveal Classes */
.reveal-up {
    opacity: 0;
    transform: translateY(60px) scale(0.96) rotateX(-5deg);
    /* Let the browser's GPU handle the math smoothly */
    transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
}