@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@400;500;700&display=swap');
        
* {
    border-radius: 0 !important;
    font-family: 'Prompt', sans-serif;
}

:root {
    --bs-primary: #E6B980 !important;
    --bs-primary-rgb: 230, 185, 128 !important;
    --bs-success: #8FBF88 !important;
    --bs-success-rgb: 143, 191, 136 !important;
    --bs-warning: #E68A50 !important;
    --bs-warning-rgb: 230, 138, 80 !important;
    --bs-danger: #C94F3D !important;
    --bs-danger-rgb: 201, 79, 61 !important;
    --bs-secondary: #F4F1EE !important;
    --bs-secondary-rgb: 244, 241, 238 !important;
    --bs-dark: #3B3B3B !important;
    --bs-dark-rgb: 59, 59, 59 !important;
    --bs-light: #FFFFFF !important;
    --bs-light-rgb: 255, 255, 255 !important;
}

.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #d97d46;
    border-color: #d97d46;
}

.nav-link.active {
    text-decoration: underline;
    font-weight: 500;
}

.navbar-toggler:focus {
    box-shadow: none !important;
}

.hero-section {
    min-height: 300px;
    background: linear-gradient(135deg, #E6B980 0%, #E68A50 100%);
}

@media (min-width: 768px) {
    .hero-section {
        min-height: 400px;
    }
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: var(--bs-secondary);
        padding: 1rem;
        margin-top: 0.5rem;
        border-radius: 4px !important;
    }
    
    #mainNav {
        position: relative;
        z-index: 1030;
    }
}

.page-section {
    display: none;
}

.page-section.active {
    display: block;
}

.loading-spinner {
    display: none;
}

.recipe-card {
    transition: transform 0.2s;
}

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

.ingredient-badge {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.back-button {
    position: sticky;
    top: 20px;
    z-index: 100;
}

.back-button.mt-3 {
    margin-top: 1rem !important;
}

h1, h2, h3, h4, h5:not(.card-title), h6:not(.card-title) {
    color: var(--bs-primary) !important;
}

.no-recipes {
    text-align: center;
    padding: 3rem 0;
    color: #6c757d;
}