/**
 * Search Filters CSS
 * Toast mesajları ve ek stiller
 */

/* Toast Mesajları */
.toast-message {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast-message.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast-message i {
    font-size: 18px;
}

.toast-success i {
    color: #2ecc71;
}

.toast-error i {
    color: #e74c3c;
}

.toast-info i {
    color: #3498db;
}

/* ===== RESPONSIVE GRID SİSTEMİ ===== */

/* Mobil (< 640px) - 1 sütun */
@media (max-width: 639px) {
    body.search-results-page #listings-container {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
}

/* Tablet (640px - 1023px) - 2 sütun */
@media (min-width: 640px) and (max-width: 1023px) {
    body.search-results-page #listings-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }
}

/* Desktop (1024px+) - Kullanıcı seçimine göre */
@media (min-width: 1024px) {
    /* Varsayılan: 3'lü grid */
    body.search-results-page #listings-container {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px;
    }

    /* Body class'ına göre grid modları */
    body.search-results-page.view-mode-grid-2 #listings-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    body.search-results-page.view-mode-grid-3 #listings-container {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    body.search-results-page.view-mode-grid-4 #listings-container {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    body.search-results-page.view-mode-list #listings-container {
        grid-template-columns: 1fr !important;
    }
}

/* Büyük ekranlar (1536px+) - 4'lü grid varsayılan olabilir */
@media (min-width: 1536px) {
    body.search-results-page.view-mode-grid-3 #listings-container {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    body.search-results-page.view-mode-grid-4 #listings-container {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Container class ile de destekle (fallback) */
#listings-container.view-grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

#listings-container.view-grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

#listings-container.view-grid-4 {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* PC Liste Modu - 3 Sütunlu Tasarım */
#listings-container.view-list {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}

#listings-container.view-list > div {
    display: flex !important;
    flex-direction: row !important;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Sütun 1: Görsel */
#listings-container.view-list > div > .ilan-slider-container {
    width: 220px !important;
    height: 165px !important;
    flex-shrink: 0 !important;
}

#listings-container.view-list > div .ilan-slider {
    height: 165px !important;
}

#listings-container.view-list > div .ilan-slider img {
    height: 165px !important;
    object-fit: cover !important;
}

/* Sütun 2: İçerik */
#listings-container.view-list > div > .p-4 {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 16px !important;
    min-width: 0 !important;
}

#listings-container.view-list > div > .p-4 h3 {
    font-size: 15px !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
}

#listings-container.view-list > div > .p-4 > p.text-gray-500 {
    font-size: 13px !important;
    margin-bottom: 6px !important;
}

/* Özellikler satırı */
#listings-container.view-list > div > .p-4 > .flex.flex-wrap.gap-1 {
    margin-bottom: 8px !important;
}

#listings-container.view-list > div > .p-4 > .flex.flex-wrap.gap-1 span {
    font-size: 10px !important;
}

/* Fiyat/buton satırını gizle (sağ sütuna taşınacak) */
#listings-container.view-list > div > .p-4 > .border-t {
    display: none !important;
}

/* Randevu butonu gizle (sağ sütuna taşınacak) */
#listings-container.view-list > div > .p-4 > button {
    display: none !important;
}

/* Interest badge gizle (sağ sütuna taşınacak) */
#listings-container.view-list > div > .p-4 > .interest-badge {
    display: none !important;
}

/* Sütun 3: Fiyat ve Butonlar (JS ile oluşturulacak) */
#listings-container.view-list .list-price-column {
    width: 260px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 12px 16px !important;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-left: 1px solid #e2e8f0 !important;
    gap: 8px !important;
}

#listings-container.view-list .list-price-column .price-text {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #e74c3c !important;
    text-align: center !important;
}

#listings-container.view-list .list-price-column .action-buttons {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

#listings-container.view-list .list-price-column .action-buttons a,
#listings-container.view-list .list-price-column .action-buttons button {
    padding: 6px 12px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
}

#listings-container.view-list .list-price-column .gezmek-btn {
    width: 100% !important;
    padding: 8px 12px !important;
    font-size: 11px !important;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

#listings-container.view-list .list-price-column .gezmek-btn:hover {
    opacity: 0.9 !important;
}

#listings-container.view-list .list-price-column .interest-badge {
    margin-top: 0 !important;
    width: 100% !important;
}

#listings-container.view-list .list-price-column .interest-badge .ib-content {
    padding: 8px 10px !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

#listings-container.view-list .list-price-column .interest-badge .ib-text {
    font-size: 11px !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.3 !important;
}

#listings-container.view-list .list-price-column .interest-badge .ib-icon {
    font-size: 14px !important;
}

/* Görsel üzerindeki badge'ler */
#listings-container.view-list > div .absolute.top-3 span {
    font-size: 10px !important;
    padding: 3px 8px !important;
}

/* Mobil için görünüm modları */
@media (max-width: 768px) {
    /* Grid (tek sütun) - mobil varsayılan */
    body.view-mode-grid-1 #listings-container,
    #listings-container.view-grid-1 {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    /* 2'li Grid - mobilde 2 sütun */
    body.view-mode-grid-2 #listings-container,
    #listings-container.view-grid-2 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 3'lü Grid mobilde 2 sütun olarak göster */
    body.view-mode-grid-3 #listings-container,
    #listings-container.view-grid-3 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Liste modu - kompakt görünüm */
    body.view-mode-list #listings-container,
    #listings-container.view-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* Liste kartları - Ana kart yapısı */
    body.view-mode-list #listings-container > div,
    #listings-container.view-list > div {
        display: flex !important;
        flex-direction: column !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        background: #fff !important;
    }

    /* ÜST SATIR: Görsel + İçerik yan yana */
    body.view-mode-list .list-top-row {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
    }

    /* Görsel - sol üst, kare */
    body.view-mode-list .list-top-row > a.ilan-slider-container {
        width: 120px !important;
        height: 120px !important;
        flex-shrink: 0 !important;
    }

    body.view-mode-list .list-top-row .ilan-slider,
    body.view-mode-list .list-top-row .ilan-slider img {
        height: 120px !important;
        width: 120px !important;
        object-fit: cover !important;
    }

    /* İçerik alanı - sağ üst (görsel yanı) */
    body.view-mode-list .list-content-wrap {
        flex: 1 !important;
        padding: 8px 10px !important;
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* Üst badge'ler (ilan no, tarih) */
    body.view-mode-list .list-content-wrap > .mb-2:first-child {
        margin-bottom: 2px !important;
    }

    body.view-mode-list .list-content-wrap > .mb-2 .text-xs {
        font-size: 8px !important;
        padding: 1px 3px !important;
    }

    /* Başlık */
    body.view-mode-list .list-content-wrap h3 {
        font-size: 12px !important;
        line-height: 1.3 !important;
        margin-bottom: 2px !important;
    }

    /* Konum */
    body.view-mode-list .list-content-wrap > p.text-gray-500 {
        font-size: 10px !important;
        margin-bottom: 4px !important;
    }

    /* Özellikler satırı */
    body.view-mode-list .list-content-wrap > .flex.flex-wrap.gap-1 {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 2px !important;
        margin-bottom: 0 !important;
    }

    body.view-mode-list .list-content-wrap > .flex.flex-wrap.gap-1 span {
        font-size: 8px !important;
        padding: 1px 4px !important;
    }

    /* ALT SATIR: Fiyat + Butonlar tam genişlik */
    body.view-mode-list .list-bottom-row {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 8px 10px !important;
        background: #f8fafc !important;
        border-top: 1px solid #e2e8f0 !important;
    }

    /* Fiyat/butonlar satırı */
    body.view-mode-list .list-bottom-row > .border-t {
        border-top: none !important;
        padding-top: 0 !important;
    }

    body.view-mode-list .list-bottom-row .text-primary.font-bold {
        font-size: 16px !important;
    }

    /* Randevu butonu */
    body.view-mode-list .list-bottom-row > button {
        margin-top: 6px !important;
        padding: 8px !important;
        font-size: 12px !important;
    }

    /* Interest badge */
    body.view-mode-list .list-bottom-row > .interest-badge {
        margin-top: 6px !important;
    }

    /* Görsel üzerindeki badge'ler küçült */
    body.view-mode-list .list-top-row .absolute.top-3 span {
        font-size: 7px !important;
        padding: 1px 4px !important;
    }

    /* Segment ve dot indicators gizle */
    body.view-mode-list .list-top-row .segment-indicators,
    body.view-mode-list .list-top-row [class*="absolute bottom"],
    body.view-mode-list .list-top-row .absolute.top-0.left-0.right-0.z-20 {
        display: none !important;
    }

    /* Orijinal elemanları gizle (liste modunda) */
    body.view-mode-list #listings-container > div > .p-4,
    body.view-mode-list #listings-container > div > a.ilan-slider-container {
        display: none !important;
    }

    /* Liste modunda oluşturulan wrapper'lar görünür */
    body.view-mode-list .list-top-row,
    body.view-mode-list .list-bottom-row {
        display: flex !important;
    }

    /* Grid modunda liste wrapper'ları gizle */
    body:not(.view-mode-list) .list-top-row,
    body:not(.view-mode-list) .list-bottom-row {
        display: none !important;
    }

    /* Grid modunda orijinal yapı görünür */
    body:not(.view-mode-list) #listings-container > div > .p-4,
    body:not(.view-mode-list) #listings-container > div > a.ilan-slider-container {
        display: block !important;
    }
}

/* Arama Sonuçları Sayfası Layout */
body.search-results-page {
    overflow-x: hidden;
}

/* KRITIK: transform fixed positioning'i bozar - kaldır */
/* max-width kısıtlamasını da kaldır - tam genişlik */
body.search-results-page .site-content-wrapper {
    transform: none !important;
    -webkit-transform: none !important;
    max-width: 100% !important;
}

/* Site header gizle */
body.search-results-page .site-header,
body.search-results-page header:not(.desktop-content-header):not(.modal-header) {
    display: none !important;
}

/* Quick filter butonu gizle (mobile header'da zaten filtre var) */
body.search-results-page .quick-access-btn,
body.search-results-page #quickFilterBtn {
    display: none !important;
}

/* Hero section gizle */
body.search-results-page .hero-section,
body.search-results-page #filterSteps {
    display: none !important;
}

/* Mobil layout (< 1024px) - Sidebar yok, sadece mobile bar */
@media (max-width: 1023px) {
    /* Transform fixed positioning'i bozar - mobilde de kaldır */
    body.search-results-page,
    body.search-results-page .site-content-wrapper,
    body.search-results-page main {
        transform: none !important;
        -webkit-transform: none !important;
    }

    /* Main'in z-index'i stacking context oluşturuyor, kaldır */
    body.search-results-page #main-content,
    body.search-results-page main#main-content,
    body.search-results-page .site-content-wrapper > main,
    body.search-results-page main.bg-white {
        z-index: auto !important;
    }

    /* Site wrapper da stacking context oluşturmasın */
    body.search-results-page .site-content-wrapper {
        z-index: auto !important;
    }

    body.search-results-page .search-results-wrapper {
        margin-left: 0;
        padding: 0 10px;
        padding-top: 135px !important; /* Mobile header yüksekliği + ufak boşluk */
    }

    /* Mobil filter bar sabit - en üstte */
    body.search-results-page .mobile-filter-bar,
    body.search-results-page #mobileFilterBar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 99999 !important;
    }

    /* İlan kartları header'ın altında kalmalı */
    body.search-results-page .search-results-wrapper {
        z-index: 1 !important;
        position: relative !important;
    }

    body.search-results-page #listings-container,
    body.search-results-page .listings-section {
        z-index: auto !important;
    }

    /* Kart z-index sıfırla */
    body.search-results-page #listings-container > div {
        z-index: 1 !important;
    }
}

/* Desktop layout (1024px+) */
@media (min-width: 1024px) {
    /* Wrapper - sidebar'dan sonra başlar, sol ve sağda küçük boşluk */
    body.search-results-page div.search-results-wrapper {
        margin-left: 240px !important;
        padding: 190px 15px 0 15px !important;
    }

    /* FAQ, SEO text, İlgili Aramalar - sidebar kadar sola kaydır */
    body.search-results-page .search-bottom-sections {
        margin-left: 240px;
    }

    /* İç elementler tam genişlik */
    body.search-results-page .search-results-content,
    body.search-results-page .listings-section,
    body.search-results-page .listings-section .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.search-results-page #listings-container {
        width: 100% !important;
        /* Grid sütunlarını esnek yap - tüm alanı doldur */
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* 4'lü grid modu */
    body.search-results-page.view-mode-grid-4 #listings-container {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* 2'li grid modu */
    body.search-results-page.view-mode-grid-2 #listings-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Liste modu */
    body.search-results-page.view-mode-list #listings-container {
        grid-template-columns: 1fr !important;
    }

    /* Tailwind container override - ortalama ve max-width kaldır */
    body.search-results-page .listings-section > .container {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Orta ekranlar (1024-1280px) - sidebar 220px */
@media (min-width: 1024px) and (max-width: 1280px) {
    body.search-results-page div.search-results-wrapper {
        margin-left: 220px !important;
        padding: 190px 10px 0 10px !important;
    }

    body.search-results-page .search-bottom-sections {
        margin-left: 220px;
    }

    /* Tailwind container override */
    body.search-results-page .listings-section > .container {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

    body.search-results-page .search-results-content {
        padding-top: 0;
    }

    /* Header spacer gizle */
    body.search-results-page .header-spacer,
    body.search-results-page #headerSpacer,
    body.search-results-page #headerSpacerDesktop {
        display: none !important;
    }

    /* Container padding azalt */
    body.search-results-page .listings-section .container {
        padding: 0 10px;
    }
}

/* Mobile layout */
@media (max-width: 1023px) {
    body.search-results-page .search-results-content {
        padding-top: 110px;
    }

    /* Mobilde min-height kaldır - İlan Bulunamadı sayfasında aşırı boşluk önleme */
    body.search-results-page .listings-section {
        min-height: auto !important;
    }
}

/* Listings Section Adjustments */
body.search-results-page .listings-section {
    padding-top: 0 !important;
}

body.search-results-page .listings-section .container {
    max-width: 100%;
    padding: 0 20px;
}

/* Filter Bar Active Filter Badge */
.filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
}

.filter-badge i {
    font-size: 10px;
}

.filter-badge.blue {
    background: rgba(52, 152, 219, 0.25);
    border: 1px solid rgba(52, 152, 219, 0.5);
}

.filter-badge.green {
    background: rgba(46, 204, 113, 0.25);
    border: 1px solid rgba(46, 204, 113, 0.5);
}

.filter-badge.purple {
    background: rgba(155, 89, 182, 0.25);
    border: 1px solid rgba(155, 89, 182, 0.5);
}

.filter-badge.orange {
    background: rgba(243, 156, 18, 0.25);
    border: 1px solid rgba(243, 156, 18, 0.5);
}

.filter-badge .badge-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 2px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    font-size: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.filter-badge .badge-remove:hover {
    background: #e74c3c;
}

/* Smooth Scroll Behavior */
html {
    scroll-behavior: smooth;
}

/* Pagination Fix */
body.search-results-page .pagination {
    margin-top: 30px;
    margin-bottom: 30px;
}

/* Footer - Sidebar genişliği kadar margin */
body.search-results-page .site-footer,
body.search-results-page footer {
    margin-left: 0 !important;
}

@media (min-width: 1024px) {
    body.search-results-page .site-footer,
    body.search-results-page footer {
        margin-left: 240px !important;
    }
}

@media (min-width: 1024px) and (max-width: 1280px) {
    body.search-results-page .site-footer,
    body.search-results-page footer {
        margin-left: 220px !important;
    }
}