@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap");

/* ================================================================

   EPUP BROWSE FILTER ACCESSIBILITY AND DESKTOP FRANCHISE

   ================================================================ */

.browse-section,

.browse-section * {

    box-sizing: border-box;

}

.browse-section {

    font-family: "Nunito", Arial, sans-serif;

}

.epup-browse-featured-placement {

    min-width: 0;

    margin: 0 0 25px;

}

/* ----------------------------------------------------------------

   MOBILE AND TABLET ACCESSIBILITY

   Filter and sort remain visible when users enter the browse page.

   ---------------------------------------------------------------- */

@media (max-width: 900px) {

    .mobile-filter-bar {

        position: sticky !important;

        top: 0 !important;

        z-index: 900 !important;

        width: 100% !important;

        padding:

            11px

            max(14px, env(safe-area-inset-right))

            11px

            max(14px, env(safe-area-inset-left)) !important;

        background: rgba(255, 255, 255, 0.97) !important;

        border-top: 1px solid #e1ebf0 !important;

        border-bottom: 1px solid #d8e7ef !important;

        box-shadow: 0 9px 24px rgba(23, 50, 77, 0.11) !important;

        backdrop-filter: blur(16px) !important;

        -webkit-backdrop-filter: blur(16px) !important;

    }

    .mobile-filter-bar__inner {

        width: min(100%, 720px) !important;

        margin: 0 auto !important;

    }

    .mobile-filter-button {

        min-height: 50px !important;

        padding: 0 17px !important;

        color: #ffffff !important;

        background:

            linear-gradient(

                135deg,

                #0878ae 0%,

                #168dcc 100%

            ) !important;

        border: 0 !important;

        border-radius: 14px !important;

        box-shadow:

            0 9px 20px rgba(8, 120, 174, 0.24) !important;

        font-family: "Nunito", Arial, sans-serif !important;

        font-size: 14px !important;

        font-weight: 1000 !important;

    }

    .mobile-filter-button:active {

        transform: translateY(1px);

    }

    .mobile-sort select {

        min-height: 50px !important;

        padding: 0 41px 0 15px !important;

        color: #17324d !important;

        background-color: #f4f9fc !important;

        border: 1px solid #cfe2ec !important;

        border-radius: 14px !important;

        font-family: "Nunito", Arial, sans-serif !important;

        font-size: 14px !important;

        font-weight: 900 !important;

    }

    .epup-browse-featured-placement {

        margin: 4px 0 21px !important;

    }

}

/* ----------------------------------------------------------------

   DESKTOP MARKETPLACE STRUCTURE

   ---------------------------------------------------------------- */

@media (min-width: 901px) {

    .browse-section {

        padding-top: 34px !important;

        background:

            linear-gradient(

                180deg,

                #f8fbfd 0%,

                #ffffff 380px

            ) !important;

    }

    .browse-layout {

        display: grid !important;

        grid-template-columns:

            minmax(285px, 310px)

            minmax(0, 1fr) !important;

        align-items: start !important;

        gap: 28px !important;

    }

    .browse-results {

        min-width: 0 !important;

    }

    /* ------------------------------------------------------------

       FILTER SIDEBAR

       ------------------------------------------------------------ */

    html body .browse-filters {

        position: sticky !important;

        top: 106px !important;

        right: auto !important;

        bottom: auto !important;

        z-index: 20 !important;

        width: 100% !important;

        max-width: none !important;

        max-height: calc(100vh - 126px) !important;

        margin: 0 !important;

        padding: 0 20px 20px !important;

        overflow-x: hidden !important;

        overflow-y: auto !important;

        color: #17324d !important;

        background: #ffffff !important;

        border: 1px solid #d5e5ed !important;

        border-radius: 18px !important;

        box-shadow:

            0 16px 38px rgba(23, 50, 77, 0.09) !important;

        transform: none !important;

        visibility: visible !important;

        opacity: 1 !important;

        scrollbar-width: thin;

        scrollbar-color: #a9cfdf transparent;

    }

    html body .browse-filters::-webkit-scrollbar {

        width: 7px;

    }

    html body .browse-filters::-webkit-scrollbar-track {

        background: transparent;

    }

    html body .browse-filters::-webkit-scrollbar-thumb {

        background: #b9d6e2;

        border: 2px solid #ffffff;

        border-radius: 999px;

    }

    html body .browse-filters::-webkit-scrollbar-thumb:hover {

        background: #8fc0d5;

    }

    /* ------------------------------------------------------------

       BRANDED HEADER

       ------------------------------------------------------------ */

    html body .browse-filters .filter-header {

        position: sticky !important;

        top: 0 !important;

        z-index: 30 !important;

        display: flex !important;

        min-height: 84px !important;

        align-items: center !important;

        justify-content: space-between !important;

        gap: 14px !important;

        margin: 0 -20px 0 !important;

        padding: 18px 20px !important;

        color: #ffffff !important;

        background:

            radial-gradient(

                circle at 90% 15%,

                rgba(255, 255, 255, 0.18),

                transparent 30%

            ),

            linear-gradient(

                135deg,

                #073b5c 0%,

                #0878ae 65%,

                #168dcc 100%

            ) !important;

        border: 0 !important;

        border-bottom: 4px solid #f47b00 !important;

        border-radius: 17px 17px 0 0 !important;

        box-shadow:

            0 8px 20px rgba(7, 59, 92, 0.17) !important;

    }

    html body .browse-filters .filter-header::after {

        content: "";

        position: absolute;

        right: 20px;

        bottom: -4px;

        width: 32%;

        height: 4px;

        background: #f47b00;

    }

    html body .browse-filters .filter-header span {

        margin: 0 0 3px !important;

        color: #ffd27a !important;

        font-size: 10px !important;

        line-height: 1.1 !important;

        font-weight: 1000 !important;

        letter-spacing: 0.13em !important;

        text-transform: uppercase !important;

    }

    html body .browse-filters .filter-header h2,

    html body .browse-filters .epup-filter-title {

        margin: 0 !important;

        color: #ffffff !important;

        font-size: 24px !important;

        line-height: 1.05 !important;

        font-weight: 1000 !important;

        letter-spacing: -0.035em !important;

    }

    html body .browse-filters .filter-close,

    html body .browse-filters .epup-filter-back {

        display: none !important;

    }

    /* ------------------------------------------------------------

       FILTER SECTIONS

       ------------------------------------------------------------ */

    html body .browse-filters .filter-form {

        display: block !important;

        margin: 0 !important;

        padding: 0 !important;

    }

    html body .browse-filters .filter-group,

    html body .browse-filters fieldset {

        position: relative !important;

        display: block !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 21px 0 22px !important;

        background: #ffffff !important;

        border: 0 !important;

        border-bottom: 1px solid #e2ebf0 !important;

        border-radius: 0 !important;

        box-shadow: none !important;

    }

    html body .browse-filters .filter-group:last-of-type,

    html body .browse-filters fieldset:last-of-type {

        border-bottom: 0 !important;

    }

    html body .browse-filters legend,

    html body .browse-filters .filter-section-title {

        display: block !important;

        float: none !important;

        width: 100% !important;

        margin: 0 0 14px !important;

        padding: 0 !important;

        color: #17324d !important;

        font-size: 17px !important;

        line-height: 1.15 !important;

        font-weight: 1000 !important;

        letter-spacing: -0.02em !important;

    }

    html body .browse-filters .filter-label {

        display: block !important;

        margin: 0 0 7px !important;

        color: #687d90 !important;

        font-size: 11px !important;

        line-height: 1.2 !important;

        font-weight: 1000 !important;

        letter-spacing: 0.07em !important;

        text-transform: uppercase !important;

    }

    html body .browse-filters input[type="text"],

    html body .browse-filters input[type="search"],

    html body .browse-filters input[type="number"],

    html body .browse-filters input[type="date"],

    html body .browse-filters select {

        width: 100% !important;

        height: 48px !important;

        margin: 0 !important;

        padding: 0 13px !important;

        color: #17324d !important;

        background: #f8fbfd !important;

        border: 1px solid #cfdfe7 !important;

        border-radius: 11px !important;

        outline: 0 !important;

        box-shadow: none !important;

        font-family: "Nunito", Arial, sans-serif !important;

        font-size: 14px !important;

        line-height: normal !important;

        font-weight: 800 !important;

    }

    html body .browse-filters input::placeholder {

        color: #94a5b3 !important;

        opacity: 1 !important;

    }

    html body .browse-filters input:focus,

    html body .browse-filters select:focus {

        color: #17324d !important;

        background: #ffffff !important;

        border-color: #168dcc !important;

        box-shadow:

            0 0 0 4px rgba(22, 141, 204, 0.11) !important;

    }

    html body .browse-filters

    input + .filter-label,

    html body .browse-filters

    select + .filter-label,

    html body .browse-filters

    .epup-filter-select + .filter-label {

        margin-top: 13px !important;

    }

    html body .browse-filters .filter-two-columns {

        display: grid !important;

        grid-template-columns:

            minmax(0, 1fr)

            minmax(0, 1fr) !important;

        gap: 10px !important;

    }

    /* ------------------------------------------------------------

       CHECKBOXES AND RADIO OPTIONS

       ------------------------------------------------------------ */

    html body .browse-filters .custom-radio,

    html body .browse-filters .custom-checkbox {

        display: flex !important;

        min-height: 39px !important;

        align-items: center !important;

        gap: 10px !important;

        margin: 0 !important;

        padding: 7px 8px !important;

        color: #334f67 !important;

        background: transparent !important;

        border: 1px solid transparent !important;

        border-radius: 9px !important;

        cursor: pointer !important;

        font-size: 13px !important;

        font-weight: 800 !important;

        transition:

            background 0.18s ease,

            border-color 0.18s ease !important;

    }

    html body .browse-filters .custom-radio:hover,

    html body .browse-filters .custom-checkbox:hover {

        background: #eff8fc !important;

        border-color: #d3eaf4 !important;

    }

    html body .browse-filters .custom-radio input,

    html body .browse-filters .custom-checkbox input {

        width: 17px !important;

        height: 17px !important;

        flex: 0 0 17px !important;

        margin: 0 !important;

        accent-color: #0878ae !important;

    }

    html body .browse-filters .custom-radio span,

    html body .browse-filters .custom-checkbox span {

        min-width: 0 !important;

        color: inherit !important;

        font-size: inherit !important;

        line-height: 1.35 !important;

        font-weight: inherit !important;

    }

    /* ------------------------------------------------------------

       ACTION BUTTONS

       ------------------------------------------------------------ */

    html body .browse-filters .filter-actions,

    html body .browse-filters .browse-filter-actions,

    html body .browse-filters .mobile-filter-actions,

    html body .browse-filters

    form > div:has(button[type="submit"]) {

        position: sticky !important;

        bottom: -20px !important;

        z-index: 25 !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 9px !important;

        margin: 0 -20px -20px !important;

        padding: 16px 20px 20px !important;

        background:

            linear-gradient(

                180deg,

                rgba(255, 255, 255, 0.87),

                #ffffff 24%

            ) !important;

        border-top: 1px solid #dae6ed !important;

        box-shadow:

            0 -10px 24px rgba(23, 50, 77, 0.08) !important;

        backdrop-filter: blur(14px) !important;

    }

    html body .browse-filters button[type="submit"],

    html body .browse-filters .filter-actions .button {

        width: 100% !important;

        min-height: 49px !important;

        display: inline-flex !important;

        align-items: center !important;

        justify-content: center !important;

        padding: 0 17px !important;

        color: #ffffff !important;

        background:

            linear-gradient(

                135deg,

                #f47b00,

                #ff9418

            ) !important;

        border: 0 !important;

        border-radius: 12px !important;

        box-shadow:

            0 9px 20px rgba(244, 123, 0, 0.23) !important;

        font-family: "Nunito", Arial, sans-serif !important;

        font-size: 14px !important;

        font-weight: 1000 !important;

        cursor: pointer !important;

    }

    html body .browse-filters button[type="submit"]:hover {

        transform: translateY(-1px) !important;

        box-shadow:

            0 12px 25px rgba(244, 123, 0, 0.29) !important;

    }

    html body .browse-filters button[type="reset"],

    html body .browse-filters .filter-reset,

    html body .browse-filters .clear-filters {

        width: 100% !important;

        min-height: 39px !important;

        display: inline-flex !important;

        align-items: center !important;

        justify-content: center !important;

        padding: 6px 12px !important;

        color: #0878ae !important;

        background: transparent !important;

        border: 0 !important;

        border-radius: 9px !important;

        box-shadow: none !important;

        font-family: "Nunito", Arial, sans-serif !important;

        font-size: 13px !important;

        font-weight: 1000 !important;

        cursor: pointer !important;

    }

    html body .browse-filters button[type="reset"]:hover,

    html body .browse-filters .filter-reset:hover,

    html body .browse-filters .clear-filters:hover {

        background: #edf8fd !important;

    }

    /* ------------------------------------------------------------

       RESULTS TOOLBAR ALIGNMENT

       ------------------------------------------------------------ */

    .results-toolbar {

        min-height: 84px !important;

        align-items: center !important;

        margin: 0 0 18px !important;

        padding: 19px 22px !important;

        background:

            linear-gradient(

                135deg,

                #ffffff 0%,

                #f1f9fd 100%

            ) !important;

        border: 1px solid #d5e6ee !important;

        border-top: 4px solid #0878ae !important;

        border-radius: 16px !important;

        box-shadow:

            0 10px 27px rgba(23, 50, 77, 0.07) !important;

    }

    .results-toolbar__count strong {

        color: #17324d !important;

        font-size: 22px !important;

        font-weight: 1000 !important;

    }

    .results-toolbar__count span {

        color: #718496 !important;

        font-size: 13px !important;

        font-weight: 800 !important;

    }

    .desktop-sort {

        align-items: center !important;

    }

    .desktop-sort select {

        min-height: 44px !important;

        padding: 0 39px 0 13px !important;

        color: #17324d !important;

        background-color: #ffffff !important;

        border: 1px solid #cddfe8 !important;

        border-radius: 11px !important;

        font-family: "Nunito", Arial, sans-serif !important;

        font-weight: 900 !important;

    }

    .filter-overlay {

        display: none !important;

    }

}

/* ----------------------------------------------------------------

   WIDER DESKTOPS

   ---------------------------------------------------------------- */

@media (min-width: 1280px) {

    .browse-layout {

        grid-template-columns:

            minmax(300px, 320px)

            minmax(0, 1fr) !important;

        gap: 32px !important;

    }

}