/* ************************************** */
/* Lastik Ebat Arama Stilleri - search-tire-size- ön eki */
/* ************************************** */

.search-tire-size-selector { 
    text-align: center; 
}

/* Bootstrap sınıfı .form-select-lg, ana seçici altına kapsüllendi */
.search-tire-size-selector .form-select-lg { 
    font-size: 1rem; 
    font-weight: 500; 
}

.search-tire-size-display-area { 
    position: relative; 
    max-width: 700px; 
    margin: 0 auto; 
}

.search-tire-size-image-wrapper {
    position: relative;
    display: inline-block;
    width: 100%; 
    max-width: 487px; 
    aspect-ratio: 487 / 155; 
}

/* Bootstrap sınıfı .img-fluid, ana seçici altına kapsüllendi */
.search-tire-size-image-wrapper .img-fluid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.search-tire-size-overlay-svg {
    position: absolute;
    top: 0.7rem;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 20;
    opacity: 0.5;
}

.search-tire-size-overlay-svg text {
    fill: rgb(255, 255, 255);
    font-size: 1.7rem;
    font-weight: bold;
    font-family: 'Arial Black', Gadget, sans-serif;
    letter-spacing: 0.1em;
}

.search-tire-size-guide-lines-container { 
    display: none; 
}

.search-tire-size-season-box { 
    position: absolute; 
    top: 50%; 
    right: 0; 
    transform: translateY(-50%); 
    border: 2px solid var(--brand-orange); /* CSS Değişkeni kullanıldı */ 
    border-radius: 8px; 
    padding: 10px 15px; 
    background: #fff; 
    z-index: 10; 
}

/* Bu sınıflar HTML'de olmadığı için kapsamaya gerek yok, doğrudan isimlendirildi */
.search-tire-size-icon-placeholder { 
    font-size: 2rem; 
    color: var(--brand-orange); /* CSS Değişkeni kullanıldı */
}

.search-tire-size-text-placeholder { 
    font-size: 0.9rem; 
    font-weight: 500; 
}

@media (max-width: 768px) {
    .search-tire-size-overlay-svg text { 
        font-size: 1.5rem; 
    }
    .search-tire-size-overlay-svg {
        top: 16px;
    }
}