body.modal-open {
    overflow: hidden; /* Отключаем прокрутку страницы если открыто окно всплывающее */
}

#mypopover {
    border: none;
    padding: 0 20px;
    border-radius: var(--borderRadius);
    width: clamp(250px, 50%, 70vw);
    margin: 50px auto 0;
    background-color: var(--color-back);
    color: var(--color-front);

    /* затемнение остальной страницы */
    &::backdrop {
        background-color: #0009;
        backdrop-filter: blur(5px);
    }

    & #closeBtn {
        font-size: 2rem;
        margin: 10px 0 1.5rem;
        color: var(--color-front);
        background: none;
        border: none;
        cursor: pointer;
        display: block;
        margin-left: auto;
        outline: 0;
        transition: color 0.3s ease;

        &:hover {
            color: var(--color-red);
        }
    }

    & input {
        color: var(--color-front);
        width: 100%;
        background-color: var(--color-back_second);
        border-radius: var(--borderRadius);
        font-size: 1.5rem;
        padding: 10px 20px;
        border: none;

        &:focus {
            outline: none; /* Убираем стандартное выделение */
            box-shadow: 0px 0px 7px var(--color-front); /* Добавляем тень */
        }   
    }

    & #results {
        max-height: 200px;
        overflow-y: auto;
        border-radius: var(--borderRadius);

        &:has(.result-item) {
            border: 1px solid #ccc;
        }

        & .result-item {
            border-radius: var(--borderRadius);
            border-bottom: 1px solid #ccc;

            & a {
                display: flex;
                align-items: center;
                gap: 10px;
                padding-left: 10px;
            }
        }
    }

    & #resultCount {
        margin: 20px 0;
    }
}