/**
 * Sixt Klon - Arama Paneli ek CSS
 *
 * Sixt'in orijinal app.css'i panel'in açılma/kapanma + mobile davranışı dahil
 * tüm responsive davranışı yönetir. Burada yalnızca DB-tabanlı render için
 * iki noktasal görsel touch:
 *   1) Liste öğesi hover/active highlight
 *   2) Liste başlığında ikon hizalaması
 *
 * Sixt mobile davranışı (otomatik orijinal CSS'ten):
 *   - input'a focus -> .search.is-opened
 *   - column-item--pickup -> .is-active -> position:fixed top:0
 *   - <div class="search__popup"> açılır, padding-top:8.5625rem ile altında liste
 */

/* Liste öğesi hover/active highlight */
.search__stations-list-item {
    padding: 12px 24px;
    border-left: 3px solid transparent;
    transition: background-color .15s, color .15s, border-color .15s;
    list-style: none;
    cursor: pointer;
}
.search__stations-list-item:hover,
.search__stations-list-item.is-active {
    background: #fff8f3;
    color: #ff5f00;
    border-left-color: #ff5f00;
}
.search__stations-list-item span {
    color: #888;
    font-weight: 400;
}
.search__stations-list-item:hover span,
.search__stations-list-item.is-active span {
    color: #ad4400;
}

/* Liste başlığında ikon */
.search__stations-header {
    align-items: center;
    gap: 10px;
}
.search__stations-header-icon {
    font-size: 18px;
    color: #222;
}

/* search__popup-container stations-group ile uyumlu */
[data-search-station] {
    width: 100%;
}
[data-search-station] .search__stations-group {
    width: 100%;
}

/* KRİTİK: Sixt'in 3 popup-wrapper'ı (station/date/time) varsayılanda hepsi
   display:flex'le açık. Bizim JS'imiz şu an sadece "station"'ı kullanıyor —
   diğer ikisi (date, time) altta sızıp 00:00, 00:30 vs gösteriyordu. Hide et.
   Sixt JS'i normalde [data-search-popup-wrapper-active] ile kontrol ediyor;
   biz biz biz 'is-visible' class'ıyla yönetiyoruz. */
.search__popup .search__popup-wrapper--date,
.search__popup .search__popup-wrapper--time {
    display: none !important;
}
/* JS bir wrapper'ı aktive ettiğinde diğerleri zaten gizli kalır */
.search__popup .search__popup-wrapper--station.sx-active {
    display: flex;
}

/* Liste öğelerini açıkça block yap (Sixt CSS'i li için bir şey demiyor ama
   bazı app.js davranışlarında 'list--fix > li' display kuralı override edilebilir) */
.search__stations-list {
    display: block !important;
    margin: 0;
    padding: 0;
}
.search__stations-list-item {
    display: block !important;
}

/* Mobil: panel içeriği kaydırılabilir olsun (alış-dönüş seçim listesi).
   Sixt'in default padding-top: 8.5625rem (~137px) çok fazla,
   bizim fixed input bar daha küçük — sıkı boşluk + scroll çalışsın. */
@media (max-width: 991px) {
    /* Popup tam ekran, dikey scroll açık */
    section.search.is-opened .search__popup {
        position: fixed !important;
        inset: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Wrapper (station listesi) - kalan alanı doldur ve KENDİ scroll'u */
    section.search.is-opened .search__popup-wrapper--station {
        padding-top: 3.25rem !important;  /* fixed input bar'ın altında ~52px boşluk */
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        height: auto !important;
        max-height: none !important;
    }

    /* Wrapper-left ve container (Sixt'in nested div'leri) scroll'u dış wrapper'a delege etsin */
    section.search.is-opened .search__popup-wrapper--station .search__popup-wrapper-left {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }
    section.search.is-opened .search__popup-wrapper--station .search__popup-container {
        max-height: none !important;
        overflow: visible !important;
        height: auto !important;
        padding-bottom: 80px !important;  /* Alt boşluk - son öğe rahat görünsün */
    }

    /* Stations group başlığını yukarı al */
    .search__stations-group:first-child { margin-top: 0; }
    .search__stations-header {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    /* Sticky header - input bar'ın altına yapışık kalsın */
    .search__stations-header {
        position: sticky !important;
        top: 0 !important;
        background-color: #fff !important;
        z-index: 5;
    }
}