/* =========================================================
   UNIVERSAL PAGE SEARCH
   ========================================================= */


/* =========================================================
   SEARCH
   ========================================================= */

.page-search {
    display: flex;

    align-items: center;

    gap: 20px;

    width: 100%;
}


/* =========================================================
   INPUT
   ========================================================= */

.page-search__input-wrap {
    position: relative;

    flex: 1;

    min-width: 0;

    height: 52px;
}


.page-search__input {
    width: 100%;
    height: 52px;

    padding: 14px 14px 14px 54px;

    border: 1px solid rgba(35, 113, 109, .25);
    border-radius: 12px;

    outline: none;

    box-sizing: border-box;

    color: #111122;
    background: transparent;

    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1;

    transition:
            border-color .2s ease,
            box-shadow .2s ease;
}


.page-search__input::placeholder {
    color: rgba(17, 17, 34, .25);
}


.page-search__input:focus {
    border-color: #23716d;

    box-shadow:
            0 0 0 1px rgba(35, 113, 109, .08);
}


/* =========================================================
   SEARCH ICON
   ========================================================= */

.page-search__icon {
    position: absolute;

    left: 16px;
    top: 50%;

    z-index: 2;

    transform: translateY(-50%);

    color: #23716d;

    font-size: 1.1rem;

    pointer-events: none;
}


/* =========================================================
   RESET
   ========================================================= */

.page-search__reset {
    display: none;

    width: 150px;
    height: 52px;

    flex: 0 0 150px;

    align-items: center;
    justify-content: center;

    padding: 14px;

    border: 1px solid #23716d;
    border-radius: 12px;

    box-sizing: border-box;

    color: #111122;
    background: transparent;

    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1;

    cursor: pointer;

    transition:
            color .2s ease,
            background-color .2s ease;
}


.page-search__reset.is-visible {
    display: flex;
}


.page-search__reset:hover {
    color: #fff;

    background: #23716d;
}


/* =========================================================
   SELECT
   ========================================================= */

.page-search__select {
    position: relative;

    width: 365px;
    height: 52px;

    flex: 0 0 365px;
}


/* =========================================================
   SELECT BUTTON
   ========================================================= */

.page-search__select-button {
    width: 100%;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 14px;

    border: 1px solid rgba(35, 113, 109, .25);
    border-radius: 12px;

    box-sizing: border-box;

    color: rgba(17, 17, 34, .7);
    background: transparent;

    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1;

    text-align: left;

    cursor: pointer;

    transition:
            border-color .2s ease,
            background-color .2s ease;
}


.page-search__select-button:hover {
    border-color: #23716d;
}


.page-search__select.is-open
.page-search__select-button {
    border-color: #23716d;
}


/* =========================================================
   SELECT ARROW
   ========================================================= */

.page-search__select-arrow {
    flex-shrink: 0;

    color: rgba(17, 17, 34, .5);

    font-size: .85rem;

    transition:
            transform .2s ease;
}


.page-search__select.is-open
.page-search__select-arrow {
    transform: rotate(180deg);
}


/* =========================================================
   SELECT DROPDOWN
   ========================================================= */

.page-search__select-dropdown {
    position: absolute;

    left: 0;
    right: 0;
    top: calc(100% + 8px);

    z-index: 50;

    display: flex;
    flex-direction: column;

    padding: 8px;

    border: 1px solid rgba(35, 113, 109, .15);
    border-radius: 12px;

    background: #fff;

    box-shadow:
            0 8px 30px rgba(17, 17, 34, .1);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-5px);

    transition:
            opacity .2s ease,
            visibility .2s ease,
            transform .2s ease;
}


.page-search__select.is-open
.page-search__select-dropdown {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}


/* =========================================================
   OPTION
   ========================================================= */

.page-search__select-option {
    width: 100%;

    padding: 12px 14px;

    border: 0;
    border-radius: 8px;

    color: #111122;
    background: transparent;

    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.4;

    text-align: left;

    cursor: pointer;

    transition:
            color .15s ease,
            background-color .15s ease;
}


.page-search__select-option:hover,
.page-search__select-option.is-active {
    color: #23716d;

    background: rgba(35, 113, 109, .08);
}


/* =========================================================
   EMPTY
   ========================================================= */

.page-search__empty {
    display: none;

    width: 100%;

    padding: 60px 20px;

    box-sizing: border-box;

    flex-direction: column;

    align-items: center;

    gap: 16px;

    text-align: center;
}


.page-search__empty.is-visible {
    display: flex;
}


.page-search__empty-icon {
    color: rgba(35, 113, 109, .5);

    font-size: 1.8rem;
}


.page-search__empty-content {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 16px;
}


.page-search__empty-title {
    color: #111122;

    font-family: 'Inter', sans-serif;
    font-size: 24px;
    line-height: 1;
    font-weight: 500;
}


.page-search__empty-text {
    max-width: 421px;

    color: #111122;

    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1.5;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1199px) {

    .page-search__select {
        width: 260px;

        flex-basis: 260px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .page-search {
        flex-wrap: wrap;

        gap: 8px;
    }


    .page-search__input-wrap {
        width: 100%;

        flex-basis: 100%;
    }


    .page-search__input {
        font-size: 16px;
    }


    .page-search__reset {
        width: calc(50% - 4px);

        flex: 1;
    }


    .page-search__select {
        width: 100%;

        flex: 1;
    }


    /*
     * Если "Сбросить" не показан,
     * select занимает всю ширину.
     */

    .page-search:not(.has-search)
    .page-search__select {
        width: 100%;

        flex-basis: 100%;
    }


    /* EMPTY */

    .page-search__empty {
        padding: 40px 10px;
    }


    .page-search__empty-title {
        font-size: 18px;
        line-height: 1.2;
    }


    .page-search__empty-text {
        font-size: 16px;
    }

}