/*
 * AvtoMapa
 * assets/css/mobile-search-fix.css
 *
 * Мобільне виправлення пошуку для iPhone / вузьких екранів.
 */

@media (max-width: 575.98px) {

    /*
     * Підказки не повинні закривати пів сторінки.
     */
    #part-search-suggestions,
    .part-search-suggestions {
        top: calc(100% + 5px);
        left: 0;
        right: 0;

        width: 100%;
        max-height: min(220px, 30dvh);

        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;

        border-radius: 12px;
        box-shadow:
            0 12px 28px rgba(15, 43, 78, 0.18),
            0 2px 8px rgba(15, 43, 78, 0.08);
    }

    /*
     * Компактніший рядок підказки.
     */
    #part-search-suggestions .part-suggestion-item,
    .part-search-suggestions .part-suggestion-item,
    #part-search-suggestions .global-search-suggestion,
    .part-search-suggestions .global-search-suggestion {
        padding: 9px 12px;
        min-height: 0;
        font-size: 0.92rem;
        line-height: 1.25;
    }

    #part-search-suggestions .part-suggestion-item .fw-semibold,
    #part-search-suggestions .global-search-suggestion .fw-semibold {
        font-size: 0.95rem;
    }

    #part-search-suggestions .small,
    .part-search-suggestions .small {
        font-size: 0.78rem;
        margin-top: 3px !important;
    }

    #part-search-suggestions .badge,
    .part-search-suggestions .badge {
        font-size: 0.72rem;
        padding: 0.3em 0.5em;
    }

    /*
     * Ціна не повинна стискати назву запчастини.
     */
    #part-search-suggestions .text-nowrap,
    .part-search-suggestions .text-nowrap {
        font-size: 0.9rem;
        white-space: nowrap;
    }

    /*
     * Коли клавіатура відкрита, Safari змінює видиму висоту.
     * dvh коректніше реагує на це, ніж звичайний vh.
     */
    @supports (height: 100dvh) {
        #part-search-suggestions,
        .part-search-suggestions {
            max-height: min(220px, 30dvh);
        }
    }

    /*
     * Мапа на телефоні трохи компактніша:
     * менше порожнього екрану над клавіатурою.
     */
    .am-map-card,
    #map {
        min-height: 360px;
    }

    /*
     * Права колонка результатів на мобільному стає
     * звичайним блоком під мапою.
     */
    .am-results-host {
        min-height: 0;
        max-height: none;
    }

    #parts-search-results {
        max-height: none;
        overflow: visible;
    }
}