:where([class^="ri-"])::before {
    content: "\f3c2";
}
body {
    font-family: 'Inter', sans-serif;
}
input, textarea, select {
    outline: none;
}
input::placeholder, textarea::placeholder {
    color: #9ca3af;
}
.hero-bg {
    position: relative;
    padding-top: 7rem; /* Clears header */
    z-index: 10; /* Below header */
}
.hero-bg::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 35%;
    height: 100%;
    background-color: #f3eafd;
    border-radius: 0 0 0 100px;
    z-index: -2; /* Below header and content */
}

/* Header Styles */
header {
    position: sticky;
    top: 0;
    z-index: 1000; /* Above all content */
    background-color: #fff;
}

/* Mobile Menu Styles */
nav {
    transition: all 0.3s ease-in-out;
}
nav.flex {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 999; /* Below header */
    padding: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
@media (min-width: 768px) {
    nav {
        position: static;
        box-shadow: none;
        padding: 0;
    }
}

/* Main Content Padding */
main {
    padding-top: 80px;
}

/* Popup Modal Styles */
#popup-modal {
    transition: opacity 0.3s ease-in-out;
    z-index: 2000; /* Above header */
}
#popup-modal.hidden {
    opacity: 0;
    pointer-events: none;
}
#popup-modal .bg-white {
    transform: scale(0.95);
    transition: transform 0.3s ease-in-out;
}
#popup-modal:not(.hidden) .bg-white {
    transform: scale(1);
}
@media (max-width: 640px) {
    #popup-modal .bg-white {
        max-width: 90%;
    }
}

/* Filter/Sort Panel Styles */
#filter-sort-panel {
    transition: opacity 0.3s ease-in-out;
}
#filter-sort-panel.hidden {
    opacity: 0;
    pointer-events: none;
}
#filter-sort-panel .bg-white {
    transform: scale(0.95);
    transition: transform 0.3s ease-in-out;
}
#filter-sort-panel:not(.hidden) .bg-white {
    transform: scale(1);
}
@media (min-width: 768px) {
    #filter-sort-panel {
        position: static;
        background: none;
    }
    #filter-sort-panel .bg-white {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
}