/* ====================== Dannyca’s Kitchen - styles.css ====================== */

.hero-bg {
    background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.75)), url('https://picsum.photos/id/1015/2000/1200');
    background-size: cover;
    background-position: center;  
}

.menu-card {
    transition: all 0.3s ease;
}

    .menu-card:hover { 
        transform: translateY(-8px);
        box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    }

.toast {
    animation: slideUp 0.4s ease forwards; 
}

@keyframes slideUp { 
    from {
        transform: translateY(30px);
        opacity: 0;
    }

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

/* ====================== GLOBAL DARK MODE ====================== */
html.dark body {
    background-color: #171717 !important;
}

html.dark .bg-white {
    background-color: #1f2937 !important;
}

html.dark .text-gray-900 {
    color: #f3f4f6 !important;
}

/* ====================== CART PANEL - CLEAN LIGHT + DARK ====================== */

/* Overlay */
#cart-panel {
    background-color: rgba(0, 0, 0, 0.55);
}

/* Main Cart Panel - Light Mode (Default) */
#cart-panel-content {
    background-color: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #e5e7eb;
}

/* Dark Mode */
html.dark #cart-panel-content {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
    border-color: #374151;
}

/* Header & Text */
#cart-panel-content h2,
#cart-panel-content span,
#cart-panel-content .font-bold,
#cart-panel-content .font-medium,
#cart-total {
    color: #111827 !important;
}

html.dark #cart-panel-content h2,
html.dark #cart-panel-content span,
html.dark #cart-panel-content .font-bold,
html.dark #cart-panel-content .font-medium,
html.dark #cart-total {
    color: #f3f4f6 !important;
}

/* Quantity buttons */
button[onclick*="changeQuantity"] {
    background-color: #f3f4f6;
    color: #111827;
    border: 1px solid #d1d5db;
}

html.dark button[onclick*="changeQuantity"] {
    background-color: #374151;
    color: #f3f4f6;
    border-color: #4b5563;
}

/* Close Button (X and bottom Close) */
#close-cart-btn,
button[onclick="toggleCart()"] {
    background-color: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

html.dark #close-cart-btn,
html.dark button[onclick="toggleCart()"] {
    background-color: #374151;
    color: #f3f4f6;
    border-color: #4b5563;
}

/* Action Buttons */
button[onclick*="checkout"] {
    background-color: #16a34a !important;
    color: white !important;
}

button[onclick*="clearCart"] {
    color: #ef4444 !important;
}

/* Empty message */
#empty-cart-message {
    color: #6b7280 !important;
}

/* Other useful dark mode fixes */
html.dark .border-gray-200 {
    border-color: #4b5563 !important;
}

html.dark .text-red-500 {
    color: #f87171 !important;
}

/* Cart button in header */
header button[onclick="toggleCart()"],
button[onclick="toggleCart()"] {
    color: #111827 !important;
}

html.dark header button[onclick="toggleCart()"],
html.dark button[onclick="toggleCart()"] {
    color: #ffffff !important;
    background-color: #c2410c !important;
}

html.dark #cart-count {
    color: #ffffff !important;
}

/* Dark/Light Mode Toggle Button */
button[onclick="toggleDarkMode()"] {
    color: #111827 !important;
    background-color: #e5e7eb !important;
}

html.dark button[onclick="toggleDarkMode()"] {
    color: #ffffff !important;
    background-color: #374151 !important;
}