/* ==========================================================================
   1. Genel Offcanvas ve Arayüz Stilleri 
   ========================================================================== */

#offcanvasFilter .custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

#offcanvasFilter .custom-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #dee2e6;
}

#offcanvasFilter .transition-base {
    transition: all 0.2s ease-in-out;
}

#offcanvasFilter .ls-wide {
    letter-spacing: 0.05rem;
}

#offcanvasFilter .cursor-pointer {
    cursor: pointer;
}

#offcanvasFilter .loading-products {
    opacity: 0.5;
    pointer-events: none;
    cursor: wait;
}

/* Slider Rayı (Arka Plandaki Çizgi)  */
#sliderTrack {
    position: absolute;
    width: 100%;
    height: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #dee2e6;
    border-radius: 10px;
    z-index: 1;
    pointer-events: none;
}

/* Ortak Input Ayarları  */
#offcanvasFilter .price-range {
    pointer-events: none; /* Rayın kendisine tıklamayı engelle */
    position: absolute;
    width: 100%;
    /* DİKKAT: bu yükseklik thumb yüksekliği ile BİREBİR aynı olmalı.
       Chrome thumb'ı ::-webkit-slider-runnable-track'in ÜSTÜNE hizalar; track
       thumb'dan yüksek olursa thumb yukarıda kalır (ölçüldü: 24px track +
       20px thumb = 2.5px yukarı kayma). Eşitleyince ortalama kendiliğinden
       doğru olur, sihirli margin-top değerine gerek kalmaz.
       Dokunma alanı için sorun değil: pointer-events yalnız thumb'da açık. */
    height: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent !important;
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    z-index: 10;
}

/* --- Chrome, Safari, Edge İçin Sürgü Dairesi (Thumb) --- */
#offcanvasFilter .price-range::-webkit-slider-thumb {
    pointer-events: auto; /* Sadece dairenin tutulabilmesini sağla  */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #FEC303;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: 0; /* track ile thumb aynı yükseklikte -> ek kaydırma gerekmez */
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    transition: transform 0.1s ease;
}

#offcanvasFilter .price-range::-webkit-slider-thumb:active {
    transform: scale(1.1);
}

/* Chrome Track Temizliği */
#offcanvasFilter .price-range::-webkit-slider-runnable-track {
    background: transparent;
    border: none;
    height: 20px; /* thumb yüksekliği ile eşit — yukarıdaki nota bakınız */
}

/* --- Firefox İçin Sürgü Dairesi (Thumb)  --- */
#offcanvasFilter .price-range::-moz-range-thumb {
    pointer-events: auto;
    width: 20px;   /* Chrome ile aynı ölçü */
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0071e3;
    box-sizing: border-box;
    cursor: pointer;
}

/* Firefox Track ve Progress Temizliği  */
#offcanvasFilter .form-range::-moz-range-track {
    background: transparent;
}

#offcanvasFilter .form-range::-moz-range-progress {
    background: transparent;
}

/* ==========================================================================
   3. Liste ve Etkileşim Elemanları [cite: 3, 5]
   ========================================================================== */

.brand-row, .option-row {
    transition: background-color 0.2s ease;
}

.brand-row:hover, .option-row:hover {
    background-color: #f8f9fa;
}

/* Arama kutusu odaklandığında turuncu efekt */
.transition-focus:focus-within {
    border-color: var(--musteri-rengi-1) !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 102, 0, 0.1) !important;
}

/* Kategori Listesi Aktif Durumu [cite: 3] */
.list-group-item.active {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
    border-color: var(--bs-primary);
}

/* Input içindeki rakamın sembolle çakışmasını önler */
#price-min, #price-max {
    padding-right: 2.8rem !important;
    font-size: 0.95rem;
}

/* Sembolün (Badge) görünümünü iyileştirir */
#collapsePrice .badge {
    font-size: 0.7rem;
    padding: 0.35em 0.65em;
    pointer-events: none; /* Tıklama etkileşimini engellemez */
}

#offcanvasFilter .badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	font-size: 11px;
	line-height: 1;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--tuva-white);
	background-color: var(--btn-info-bg) !important;
	border-radius: 0.25em;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
	vertical-align: middle;
	white-space: nowrap;
}
 
/* ==========================================================================
   1. Genel Offcanvas ve Arayüz Stilleri 
   ========================================================================== */

/* Firefox Desteği (İnce ve modern görünüm) */
#offcanvasFilter .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #ced4da transparent;
}

/* Chrome, Edge ve Safari İçin Scrollbar Genişliği */
#offcanvasFilter .custom-scrollbar::-webkit-scrollbar {
    width: 8px; /* Tıklaması kolay, görünümü ince olması için 8px verip içini daraltacağız */
}

/* Scrollbar Arka Planı (Track) */
#offcanvasFilter .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent; /* Modern sitelerdeki gibi şeffaf zemin */
}

/* Kaydırma Çubuğu (Thumb) */
#offcanvasFilter .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #ced4da; /* Zarif, göz yormayan gri tonu */
    border-radius: 10px;
    border: 2px solid transparent; /* Kenarlardan boşluk verip daha ince görünmesini sağlar */
    background-clip: content-box; /* Rengi sadece iç kısma hapseder, Apple tarzı görünüm katar */
    transition: background-color 0.2s ease-in-out;
}

/* Kaydırma Çubuğu Üzerine Gelindiğinde (Hover) */
#offcanvasFilter .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #adb5bd; /* Kullanıcı üzerine geldiğinde rengi koyulaşarak tepki verir */
}

#offcanvasFilter .transition-base {
    transition: all 0.2s ease-in-out;
}

#offcanvasFilter  #collapseBrand img {
    height: 26px;

}