/*
 *  Търсачката на круизи — общото между страницата с резултати (/kruizi) и
 *  новия вид на началната страница (засега /temp-homepage).
 *
 *  Формата е един partial (_layouts/parts/search-form) за няколко страници.
 *  Разметката ѝ не се пипа; всичко тук е закачено за .page-cruises-index
 *  (body на резултатите) или .mobile-search (картата на началната страница),
 *  за да не мърдат останалите места, където формата стои.
 */

/* --- ред на полетата в резултатите --------------------------------------- */

/* Същата последователност като на началната страница: къде, кога, колко
   дни, пристанища, компания, кораб, тип, цена. Решетката става flex, защото
   с float редът не се мени. */
.page-cruises-index .cruise-search-form .grid {
    display: flex;
    flex-wrap: wrap;
}
.page-cruises-index .cruise-search-form .grid:after {
    display: none;
}
.page-cruises-index .cruise-search-form .grid > li {
    float: none;
}
.page-cruises-index .cruise-search-form .js-region-checkbox-filter { order: 1; }
.page-cruises-index .cruise-search-form .grid > li:first-child { order: 2; }
.page-cruises-index .cruise-search-form .js-duration-checkbox-filter { order: 3; }
.page-cruises-index .cruise-search-form .js-startpoint-checkbox-filter { order: 4; }
.page-cruises-index .cruise-search-form .js-routepoint-checkbox-filter { order: 5; }
.page-cruises-index .cruise-search-form .js-company-checkbox-filter { order: 6; }
.page-cruises-index .cruise-search-form .js-ship-checkbox-filter { order: 7; }
.page-cruises-index .cruise-search-form .js-type-checkbox-filter { order: 8; }
.page-cruises-index .cruise-search-form .price-per-person-filter { order: 9; }
.page-cruises-index .cruise-search-form .col-20.center { order: 10; }
.page-cruises-index .cruise-search-form .search-close-button-parent { order: 11; }

@media screen and (max-width: 767px) {

    /* --- цена на човек -------------------------------------------------- */

    /* На телефон style.css я крие навсякъде. Тук се връща — като бяло поле
       с двата входа един до друг. На началната страница стои между
       допълнителните полета, които се показват след разгъване. */
    .page-cruises-index .cruise-search-form .price-per-person-filter,
    .mobile-search.is-expanded .cruise-search-form .price-per-person-filter {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 4px 8px;
        height: auto;
        min-height: 48px;
        padding: 6px 12px 8px;
        background: #fff;
    }
    .page-cruises-index .cruise-search-form .price-per-person-filter > b,
    .mobile-search .cruise-search-form .price-per-person-filter > b {
        flex: 0 0 100%;
        font-size: 13px;
        font-weight: 500;
        text-align: center;
    }
    .page-cruises-index .cruise-search-form .price-per-person-filter label,
    .mobile-search .cruise-search-form .price-per-person-filter label {
        position: static;
        font-size: 14px;
    }
    /* 16px, иначе iPhone увеличава страницата при докосване. */
    .page-cruises-index .cruise-search-form .price-per-person-filter input[type="number"],
    .mobile-search .cruise-search-form .price-per-person-filter input[type="number"] {
        width: 80px;
        margin: 0;
        font-size: 16px;
        background: transparent;
    }

    /* --- полето за период ----------------------------------------------- */

    /* iPhone увеличава страницата, щом се докосне поле с шрифт под 16px —
       оттам и подскачането при отваряне на периода. */
    .page-cruises-index .cruise-search-form input.daterangepicker,
    .page-cruises-index .cruise-search-form .js-checkbox-dropdown-search,
    .mobile-search .cruise-search-form input.daterangepicker,
    .mobile-search .cruise-search-form .js-checkbox-dropdown-search {
        font-size: 16px;
    }

    /* Панелите са ниски и се въртят вътре в себе си, вместо да се простират
       под формата. */
    .page-cruises-index .cruise-period-selector-wrapper,
    .page-cruises-index .checkbox-dropdown[aria-expanded="true"] .checkbox-dropdown__panel {
        max-height: 50vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* --- месеците ------------------------------------------------------- */

    /* Година, под нея месеците по два на ред, после следващата година —
       всичко едно под друго и се върти надолу, вместо да се листи
       настрани със стрелки. */
    .page-cruises-index .cruise-period-selector-whole-months-years,
    .mobile-search .cruise-period-selector-whole-months-years {
        width: auto !important;
        overflow: visible;
        padding: 0 14px 8px;
    }
    .page-cruises-index .cruise-period-selector-whole-months-years .prev-year,
    .page-cruises-index .cruise-period-selector-whole-months-years .next-year,
    .mobile-search .cruise-period-selector-whole-months-years .prev-year,
    .mobile-search .cruise-period-selector-whole-months-years .next-year {
        display: none !important;
    }
    .page-cruises-index .cruise-period-selector-whole-months-years-column,
    .mobile-search .cruise-period-selector-whole-months-years-column {
        display: block;
        float: none;
        width: 100%;
        padding: 0;
        margin: 0 0 12px;
        text-align: left;
    }
    .page-cruises-index .cruise-period-selector-whole-months-years-column > strong,
    .mobile-search .cruise-period-selector-whole-months-years-column > strong {
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 18px;
        line-height: 1;
        margin: 0 0 8px;
        color: #0b3152;
    }
    .page-cruises-index .cruise-period-selector-whole-months-years-column ol,
    .mobile-search .cruise-period-selector-whole-months-years-column ol {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        margin: 0;
        padding: 0;
    }
    .page-cruises-index .cruise-period-selector-whole-months-years-column ol li,
    .mobile-search .cruise-period-selector-whole-months-years-column ol li {
        display: block;
        margin: 0;
        padding: 0;
        font-size: 15px;
        line-height: 1;
    }
    .page-cruises-index .cruise-period-selector-whole-months-years-column ol li:before,
    .mobile-search .cruise-period-selector-whole-months-years-column ol li:before {
        display: none;
    }
    .page-cruises-index .cruise-period-selector-whole-months-years-column ol li button,
    .mobile-search .cruise-period-selector-whole-months-years-column ol li button {
        display: block;
        width: 100%;
        margin: 0;
        padding: 11px 6px;
        border: 0;
        background-color: #f2efe9;
        font-size: 15px;
        font-weight: 500;
        color: #0b3152;
        text-transform: capitalize;
    }
    .page-cruises-index .cruise-period-selector-whole-months-years-column ol li button.active,
    .mobile-search .cruise-period-selector-whole-months-years-column ol li button.active {
        background-color: #83d9f5;
    }
    /* Отминалите месеци на текущата година само пречат. */
    .page-cruises-index .cruise-period-selector-whole-months-years-column ol li:has(button:disabled),
    .mobile-search .cruise-period-selector-whole-months-years-column ol li:has(button:disabled) {
        display: none;
    }

    .page-cruises-index .cruise-period-selector-tabs,
    .mobile-search .cruise-period-selector-tabs {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #fff;
    }
    .page-cruises-index .cruise-period-selector .info-text,
    .mobile-search .cruise-period-selector .info-text {
        font-size: 12.5px;
        line-height: 1.35;
        margin: 10px 14px 8px;
    }

    /* Бутоните „Изчисти" и „Запази" стоят видими, а не в дъното на дългия
       списък. */
    .page-cruises-index .checkbox-dropdown__clear,
    .mobile-search .checkbox-dropdown__clear {
        position: sticky;
        bottom: 0;
        background: #fff;
        padding: 8px 0;
        box-shadow: 0 -6px 12px rgba(255, 255, 255, 0.9);
    }

    /* --- видим скролбар ------------------------------------------------- */

    /* iPhone показва скролбара само докато пръстът върти, а тогава е
       късно да личи, че панелът продължава надолу. Скриптът в
       additional-scripts/search-form слага собствен — лента с височина нула,
       залепена за горния ръб на панела, а плъзгачът вътре е колкото
       видимата част. */
    .search-panel-scrollbar {
        position: sticky;
        top: 0;
        height: 0;
        z-index: 5;
        pointer-events: none;
    }
    .search-panel-scrollbar span {
        position: absolute;
        right: 3px;
        width: 4px;
        border-radius: 2px;
        background: rgba(11, 49, 82, 0.4);
    }
}