/* ==============================================
styles.css for La Carpa Burger
==============================================
*/

/* --- Custom Properties (Theme Variables) --- */
:root {
    --primary-color: #FFBF00; /* A more vibrant amber yellow */
    --secondary-color: #1a1a1a;
    --text-color: #333;
    --bg-light: #f7f2e9; /* A light cream background */
    --bg-dark: #121212;
}

/* --- Base Body & Typography Styles --- */
body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1.5px;
}

/* --- Base styles for light theme --- */
.bg-surface { background-color: #ffffff; }
.text-heading { color: var(--secondary-color); }
.text-body { color: var(--text-color); }
.border-custom { border-color: #eeeeee; }
.menu-card { background-color: #ffffff; }


/* --- Dark Mode Styles --- */
.dark body {
    background-color: var(--bg-dark);
    color: var(--bg-light);
}
.dark .bg-surface { background-color: #1e1e1e; }
.dark .text-heading { color: #ffffff; }
.dark .text-body { color: #cccccc; }
.dark .border-custom { border-color: #333333; }
.dark .menu-card { background-color: var(--secondary-color); }

/* --- ** THE FIX ** --- */
/* This rule specifically targets the form inputs and select fields only when dark mode is active */
.dark #whatsapp-form input,
.dark #whatsapp-form select {
    color: white !important; /* Forces the text color to be white */
    background-color: #374151; /* A slightly lighter dark gray for the input background */
}
.dark #whatsapp-form input::placeholder {
    color: #9ca3af; /* A lighter gray for placeholder text */
}


/* --- Component Styles --- */

/* Header */
#main-header {
    background-color: rgba(26, 26, 26, 0.5);
    backdrop-filter: blur(4px);
}

#main-header.scrolled {
    background-color: var(--secondary-color);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Footer */
footer {
    background-color: var(--secondary-color);
    color: var(--bg-light);
}

/* Hero Section Background */
.hero-section {
    background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url('https://images.unsplash.com/photo-1571091718767-18b5b1457add?q=80&w=2072&auto=format&fit=crop') no-repeat center center/cover;
}

/* Filter buttons style */
.filter-btn {
    transition: all 0.3s ease;
}
.filter-btn.active {
    background-color: var(--primary-color) !important;
    color: var(--secondary-color) !important;
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(255, 191, 0, 0.4);
}


/* --- Animations --- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-down {
    animation: fadeInDown 1s ease-out forwards;
}

.animate-fade-in-up {
    animation: fadeInUp 1s ease-out 0.5s forwards;
    opacity: 0; /* Start hidden */
}

@keyframes bounce-custom {
  0%, 100% {
    transform: translateY(-5%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.animate-bounce {
    animation: bounce-custom 1.5s infinite 1s; /* Start after 1s delay */
}