.sf-card { padding: 10px; background: #fff; border: 1px solid #dfe6ec; border-radius: 12px; }
.sf-title { display: none; }
.sf-cap { display: block; min-height: 32px; margin-bottom: 4px; font-size: 12.5px; line-height: 1.25; color: #45626f; }
.sf-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.sf-dates-row { display: contents; }
.sf-dd { position: relative; display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
.sf-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 46px; padding: 0 12px; border: 1px solid #cfe1f0; border-radius: 8px; background: #eef6fd; font-size: 15px; color: #33475b; cursor: pointer; white-space: nowrap; }
.sf-chip:hover { border-color: #9dc3e0; }
.sf-chip.is-set { background: #fff; border-color: #9dc3e0; }
.sf-chip-label { display: none; }
.sf-chip-value { max-width: none; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.sf-chev { flex: 0 0 auto; width: 14px; height: 14px; fill: none; stroke: #ff7303; stroke-width: 1.8; transition: transform .15s; }
.sf-dd.is-open .sf-chev { transform: rotate(180deg); }
.sf-dd.is-open .sf-chip { border-color: #9dc3e0; }
.sf-panel { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 1000; width: 330px; max-width: 92vw; padding: 10px; border: 1px solid #dfe6ec; border-radius: 10px; background: #fff; box-shadow: 0 12px 30px rgba(6, 66, 100, .14); }
.sf-dd.is-open .sf-panel { display: block; }
.sf-panel-sm { width: 280px; }
.sf-search { display: block; position: relative; margin: 0 0 8px; }
.sf-search svg { position: absolute; left: 10px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); fill: #9aa5ad; pointer-events: none; }
.sf-search input { width: 100%; height: 44px; padding: 0 10px 0 32px; border: 1px solid #cfe1f0; border-radius: 8px; background: #fff; font-size: 15px; color: #33475b; }
.sf-search input:focus { outline: none; border-color: #478cbf; }
.sf-list { scrollbar-width: thin; scrollbar-color: #c8d6e2 #eef6fd; display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.sf-list::-webkit-scrollbar { width: 8px; }
.sf-list::-webkit-scrollbar-track { background: #eef6fd; border-radius: 4px; }
.sf-list::-webkit-scrollbar-thumb { background: #c8d6e2; border-radius: 4px; }
.sf-opt { display: flex; align-items: center; gap: 9px; margin: 0; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; font-size: 15px; font-weight: 400; line-height: 1.3; color: #33475b; cursor: pointer; }
.sf-opt:hover { background: #f2f8fd; }
.sf-opt.is-checked { padding: 5px 7px; border-color: #ff7303; background: #fff6ee; font-weight: 600; }
.sf-opt input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; cursor: pointer; accent-color: #ff7303; }
.sf-more { margin-top: 6px; padding: 2px 0; border: 0; background: none; font-size: 13px; font-weight: 600; color: #478cbf; cursor: pointer; }
.sf-more:hover { color: #c25600; }
.sf-empty { margin-top: 6px; font-size: 13px; color: #8a949b; }
.sf-check { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 15px; font-weight: 400; color: #33475b; cursor: pointer; }
.sf-check input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; cursor: pointer; accent-color: #ff7303; }
.sf-check-top { margin: 0 0 8px; padding: 8px 10px; border: 1px solid #ffd7b0; border-radius: 8px; background: #fff6ee; font-size: 14px; }
.sf-date { position: relative; }
.sf-date-input { display: block; width: 100%; height: 44px; padding: 0 38px 0 10px; border: 1px solid #cfe1f0; border-radius: 8px; background: #fff; font-size: 15px; color: #33475b; cursor: pointer; }
.sf-date-input:focus { outline: none; border-color: #478cbf; }
.sf-cal { position: absolute; right: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: #ff7303; pointer-events: none; }
.sf-dd-date .sf-chip, .sf-dd-days .sf-chip { display: none; }
.sf-dd-date .sf-panel, .sf-dd-days .sf-panel { display: block; position: static; width: auto; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.sf-dd-date { flex: 1.3 1 0; }
.sf-dd-date .sf-date-input { height: 46px; padding: 0 34px 0 12px; background: #eef6fd; border-color: #cfe1f0; font-size: 13px; }
.sf-dd-date .sf-cal { right: 11px; width: 17px; height: 17px; }
.sf-f { display: block; margin: 0; }
.sf-select { display: block; width: 100%; height: 46px; padding: 0 34px 0 12px; border: 1px solid #cfe1f0; border-radius: 8px; background: #eef6fd url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6L8 10.5 12.5 6' fill='none' stroke='%23ff7303' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center; font-size: 15px; color: #33475b; appearance: none; -webkit-appearance: none; }
.sf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 12px; padding: 0 10px; }
.sf-submit-row { display: contents; }
.sf-submit { margin-left: auto; height: 46px; padding: 0 28px; border: 0; border-radius: 8px; background: #ff7303; font-size: 16px; font-weight: 700; color: #fff; cursor: pointer; }
.sf-submit:hover { background: #e66700; }
.sf-reset { font-size: 14px; color: #8a949b; }
.sf-reset:hover { color: #c25600; }
@media (max-width: 359px){.sf-actions { gap: 10px 5px; padding: 10px 8px 14px; }
.sf-check { gap: 5px; font-size: 11.5px; }}
/* === Поиск: подсказка «?» у поля дат + правый блок кнопок (перенесено из widget/toursearch.blade.php) === */
.sf-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.sf-submit-row {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}
.sf-help {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    vertical-align: middle;
}
.sf-help-btn {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid #bbb;
    border-radius: 50%;
    background: #fff;
    color: #888;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
}
.sf-help-btn:hover,
.sf-help.is-open .sf-help-btn {
    border-color: #e87722;
    color: #e87722;
}
.sf-help-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 2000;
    min-width: 220px;
    max-width: 280px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    font-size: 13px;
    line-height: 1.35;
    color: #333;
    white-space: normal;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility .15s;
}
.sf-help.is-open .sf-help-pop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* === Липкая шапка выше выпадающих панелей фильтра ===
   .sf-panel имеет z-index:1000, а #header на мобиле — только 2, поэтому открытая
   панель «Даты» / «Сколько дней» уезжала поверх шапки. Поднимаем шапку над
   панелями (но ниже модалок и fancybox — там 99992+). */
@media only screen and (max-width: 1000px) {
    #header { z-index: 2100 !important; }
}
/* === Мобильная раскладка подбора: каждое поле с новой строки,
       «Даты круиза» и «Продолжительность» — в одной строке вдвоём === */
@media (max-width: 767px) {
    .sf-row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px;
    }
    .sf-row > .sf-dd {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }
    .sf-dates-row {
        display: flex;
        flex: 1 1 100%;
        width: 100%;
        gap: 10px;
    }
    .sf-dates-row > .sf-dd {
        flex: 1 1 0;
        width: auto;
        max-width: none;
    }
    .sf-panel,
    .sf-panel-sm {
        width: 100%;
        max-width: 100%;
        left: 0;
    }
    .sf-cap {
        min-height: 0;
        margin-bottom: 4px;
    }
}

/* === Порядок наложения полей подбора ===
   Внутри полей «Даты» и «Продолжительность» панель выводится статикой (без выпадашки),
   но наследует z-index:1000 — из-за этого открытая выпадашка соседнего поля
   («Город отправления») уезжала ПОД поля дат. Гасим z-index у встроенных панелей
   и поднимаем именно открытое поле. */
.sf-dd-date .sf-panel,
.sf-dd-days .sf-panel {
    position: static;
    z-index: auto;
}
.sf-dd {
    position: relative;
    z-index: 1;
}
.sf-dd.is-open {
    z-index: 30;
}
.sf-dd.is-open .sf-panel {
    z-index: 1200;
}