/* Recipes Hero Section */
.recipes-hero {
    padding: 160px 0 80px;
    background: linear-gradient(135deg, rgba(255, 245, 245, 0.95), rgba(255, 255, 255, 0.95));
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 90vh;
    text-align: center;
    flex-direction: column;
    justify-content: center;
}

.recipes-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80' fill='none'%3E%3Cpath d='M40 10C35 10 30 15 30 20C30 25 35 30 40 30C45 30 50 25 50 20C50 15 45 10 40 10ZM20 30C15 30 10 35 10 40C10 45 15 50 20 50C25 50 30 45 30 40C30 35 25 30 20 30ZM60 30C55 30 50 35 50 40C50 45 55 50 60 50C65 50 70 45 70 40C70 35 65 30 60 30ZM40 50C35 50 30 55 30 60C30 65 35 70 40 70C45 70 50 65 50 60C50 55 45 50 40 50Z' fill='rgba(222, 39, 31, 0.03)'/%3E%3C/svg%3E");
}
.recipes-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle at center, rgba(222, 39, 31, 0.03) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    animation: float 15s ease-in-out infinite;
}

.recipes-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 600px;
    height: 800px;
    background: radial-gradient(circle at center, rgba(222, 39, 31, 0.02) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    animation: float 15s ease-in-out infinite reverse;
}

/* Search Filters */
    /* background-position: 0 0, 30px 30px;
    opacity: 0.5;
    z-index: 0;
    animation: patternFloat 30s linear infinite;
} */

.search-filters {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 2.5rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 30px;
    box-shadow: 0 40px 80px rgba(222, 39, 31, 0.15),
                inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.4s ease;
    overflow: hidden;
    text-align: center;
}

.search-filters::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(to right, var(--primary-red), #ff6b6b);
    opacity: 1;
    transition: opacity 0.4s ease;
}

.search-filters:hover {
    transform: translateY(-5px);
    box-shadow: 0 50px 100px rgba(222, 39, 31, 0.2);
}

.search-filters:hover::before {
    opacity: 1;
}

.search-header {
    text-align: center;
    margin-bottom: 2.5rem;
    position: relative;
}

.search-header::after {
    content: '';
    position: absolute;
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--primary-red);
    border-radius: 4px;
}

/* Scroll Indicator */
.scroll-indicator {
    position: relative;
    margin-top: 3rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    animation: float 3s ease-in-out infinite;
    z-index: 10;
    background: var(--primary-red);
    padding: 1.25rem 2.5rem;
    border-radius: 100px;
    box-shadow: 0 15px 30px rgba(222, 39, 31, 0.25);
    border: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    margin: 0 auto;
    width: auto;
    text-decoration: none;
}

.scroll-indicator:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(222, 39, 31, 0.35);
    background: #c61f18;
}

.scroll-indicator span {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    white-space: nowrap;
}

.scroll-indicator i {
    font-size: 1.5rem;
    color: white;
    animation: bounce 2s ease-in-out infinite;
    margin-right: 0.5rem;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-5px);
    }
    60% {
        transform: translateY(-3px);
    }
}

.search-header h1 {
    font-size: 3rem;
    color: var(--neutral-black);
    margin-bottom: 1.5rem;
    line-height: 1.2;
    font-family: 'Anek Latin', sans-serif;
    background: linear-gradient(135deg, var(--neutral-black), var(--primary-red));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.search-header p {
    font-size: 1.15rem;
    color: rgba(29, 29, 27, 0.75);
    line-height: 1.6;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}

.search-bar {
    position: relative;
    margin-bottom: 2rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.search-input {
    width: 100%;
    padding: 1.25rem 1.75rem 1.25rem 3.5rem;
    border: 2px solid rgba(222, 39, 31, 0.1);
    border-radius: 100px;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    background: white;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-red);
    box-shadow: 0 0 0 4px rgba(222, 39, 31, 0.1);
}

.search-bar i {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.75rem;
    color: var(--primary-red);
    pointer-events: none;
}

.search-clear {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.5rem;
    color: rgba(29, 29, 27, 0.5);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.search-clear:hover {
    background: rgba(222, 39, 31, 0.1);
    color: var(--primary-red);
}

.filters-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.filter-select select {
    width: 100%;
    padding: 1rem 1.5rem;
    border: 2px solid rgba(222, 39, 31, 0.1);
    border-radius: 100px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.5rem center;
    background-size: 1.25rem;
    background-color: white;
}

.filter-select select:focus {
    outline: none;
    border-color: var(--primary-red);
    box-shadow: 0 0 0 4px rgba(222, 39, 31, 0.1);
}

.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    min-height: 44px;
}

.filter-tag {
    background: rgba(222, 39, 31, 0.1);
    color: var(--primary-red);
    padding: 0.75rem 1rem;
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-tag button {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.filter-tag button:hover {
    background: rgba(222, 39, 31, 0.2);
    transform: scale(1.1);
}

/* Load More Button */
.load-more {
    margin-top: 3rem;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.load-more:hover {
    transform: translateY(-2px);
}

.load-more i {
    font-size: 1.25rem;
    transition: transform 0.3s ease;
}

.load-more:hover i {
    transform: rotate(180deg);
}

/* Animations */
@keyframes patternFloat {
    0% {
        background-position: 0 0, 30px 30px;
    }
    100% {
        background-position: 80px 80px, 110px 110px;
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* Responsive Styles */
@media (max-width: 992px) {
    .search-header h1 {
        font-size: 2.5rem;
    }

    .search-header p {
        font-size: 1.1rem;
    }

    .filters-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .search-filters {
        margin: 0 1rem;
        padding: 1.5rem;
    }

    .recipes-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media (max-width: 576px) {
    .search-header h1 {
        font-size: 2rem;
    }

    .search-filters {
        padding: 1.5rem;
    }

    .recipe-overlay {
        flex-direction: column;
        align-items: flex-start;
    }
}