/* Custom styles for Meal Randomizer App */
body.dark-mode {
    background-color: #1f2937;
    color: #d1d5db;
}
body.dark-mode .container {
    background-color: #2d3748;
}
body.dark-mode .meal-display-card,
body.dark-mode .prompt-box {
    background-color: #374151;
}
body.dark-mode .filter-card {
    background-color: #2d3748;
}
body.dark-mode .meal-display-card h2 {
    color: #e5e7eb;
}
body.dark-mode .meal-display-card p,
body.dark-mode .prompt-box p {
    color: #9ca3af;
}
body.dark-mode .filter-card h3,
body.dark-mode #appetizer-display,
body.dark-mode #side-display {
    color: #e5e7eb;
}
body.dark-mode .input-field {
    background-color: #2d3748;
    color: #f9fafb;
    border-color: #4b5563;
}
body.dark-mode .input-field::placeholder {
    color: #6b7280;
}
body.dark-mode .input-field:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3);
}
body.dark-mode .btn-primary {
    background-color: #60a5fa;
    color: #ffffff; /* White text for high contrast */
}
body.dark-mode .btn-primary:hover {
    background-color: #3b82f6;
}
body.dark-mode .food-item-button {
    background-color: #7c3aed; /* Darker purple with better contrast */
    color: #ffffff; /* White text for readability */
}
body.dark-mode .food-item-button:hover {
    background-color: #6d28d9;
}
body.dark-mode #theme-toggle:checked + .flex .block {
    background-color: #3b82f6;
}
body.dark-mode .dot {
    background-color: #4b5563;
}
body.dark-mode .sun-icon {
    display: none;
}
body.dark-mode .moon-icon {
    display: block;
}

#theme-toggle:checked + .flex .block {
    background-color: #3b82f6;
}
#theme-toggle:checked + .flex .dot {
    transform: translateX(1.5rem);
}
#theme-toggle:checked + .flex .sun-icon {
    display: none;
}
#theme-toggle:checked + .flex .moon-icon {
    display: block;
}

.btn-primary {
    background-color: #3b82f6;
    color: #ffffff; /* White text for high contrast */
}
.btn-primary:hover {
    background-color: #2563eb;
}
.food-item-button {
    background-color: #e0e7ff;
    color: #1e40af; /* Darker text for better contrast on light purple */
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.food-item-button:hover {
    background-color: #c7d2fe;
    color: #1e3a8a; /* Even darker text on hover */
    transform: translateY(-2px);
}
.input-field {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
}