@media (max-width: 768px) {

    /* ================= PAGE WRAPPER ================= */
    .mobile-search-wrapper {
        /* вычитаем: верхний padding контента (16px) + нижний padding под меню (90px) */
        height: calc(100vh - 106px);
        height: calc(100dvh - 106px);
        display: flex;
        flex-direction: column;
        padding: 0;
        box-sizing: border-box;
    }

    /* ================= CARD ================= */
    .mobile-search-card {
        flex: 1;
        display: flex;
        flex-direction: column;

        max-width: 100% !important;
        margin: 0 !important;

        border-radius: 18px !important;
        box-shadow: none !important;

        padding: 14px !important;

        min-height: 0; /* чтобы flex-ребёнок мог сжиматься и скроллиться */
        overflow: hidden;
        gap: 10px;
    }

    /* убираем большие отступы Tailwind space-y-5 */
    .mobile-search-card > *,
    .mobile-search-form > *,
    .mobile-search-fields > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* ================= TITLE ================= */
    .mobile-search-title {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }

    /* ================= TYPE SWITCH ================= */
    .mobile-search-switch {
        display: flex;
        gap: 6px;
    }

    .mobile-search-switch a {
        flex: 1;
        font-size: 12px !important;
        padding: 8px !important;
        border-radius: 10px !important;
    }

    /* ================= FORM SCROLL AREA ================= */
    .mobile-search-form {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* ================= SCROLL AREA + подсказка прокрутки ================= */
    .mobile-search-fields {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        display: flex;
        flex-direction: column;
        gap: 10px;

        /* тень/затухание сверху и снизу, видны только когда есть что прокручивать */
        background:
            linear-gradient(#fff 30%, rgba(255,255,255,0)) center top,
            linear-gradient(rgba(255,255,255,0), #fff 70%) center bottom,
            radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.28), rgba(0,0,0,0)) center top,
            radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.28), rgba(0,0,0,0)) center bottom;
        background-color: #fff;
        background-repeat: no-repeat;
        background-size: 100% 36px, 100% 36px, 100% 12px, 100% 12px;
        background-attachment: local, local, scroll, scroll;
    }

    /* ================= INPUTS ================= */
    input,
    select {
        font-size: 15px !important;
        padding: 12px !important;
        border-radius: 12px !important;
    }

    /* ================= MULTI SELECT UI ================= */
    .vehicle-ui {
        padding: 8px !important;
    }

    .vehicle-list {
        max-height: 104px !important;
    }

    .vehicle-chips {
        gap: 6px;
    }

    /* ================= RANGE ================= */
    .relative.h-10 {
        height: 34px !important;
    }

    /* ================= BUTTON FIX (sticky bottom) ================= */
    .mobile-search-button {
        flex-shrink: 0;
        background: white;
        padding: 0;
        margin: 0 !important;
    }

    .mobile-search-button button {
        width: 100%;
        padding: 14px !important;
        border-radius: 14px !important;
        font-size: 15px !important;
    }

    .mobile-results-wrapper {
        height: 100vh;
        display: flex;
        flex-direction: column;
        padding: 10px;
    }

    /* header */
    .mobile-results-header {
        text-align: center;
        margin-bottom: 8px;
    }

    .mobile-results-header h1 {
        font-size: 18px !important;
    }

    .mobile-results-header p {
        font-size: 12px !important;
    }

    /* карта */
    .mobile-map {
        flex: 1;
        width: 100%;
        border-radius: 14px;

        /* ключевая часть */
        min-height: 300px;
        height: 100%;
    }

    /* убираем фикс 600px */
    #map {
        height: 100% !important;
    }
}