/**
 * ------------------------------------------------------------------------
 * TurboTyre Custom
 * Season Filter
 * ------------------------------------------------------------------------
 */
/* Custom CSS for season 
*/

.tt-season-chip.active{
    border-color:#d71920;
    background:#fff5f5;
}

.tt-season-chip.active img{
    filter:none;
}
.tt-season-filter{
    display:flex;
    align-items:center;
    gap:20px;
}

.tt-season-title{
    margin:0;
    font-weight:600;
    white-space:nowrap;
}
.tt-season-filter{
    margin:20px 0;
    padding:15px;
    border:1px solid #e5e5e5;
    border-radius:8px;
    background:#fff;
}

.tt-season-title{
    font-size:16px;
    font-weight:600;
    margin-bottom:12px;
}

.tt-season-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
}

.tt-season-chip{
    display:flex;
    align-items:center;
    gap:8px;

    padding:8px 14px;

    border:2px solid #ddd;
    border-radius:30px;

    cursor:pointer;
    transition:.25s;

    background:#fff;
}

.tt-season-chip:hover{
    border-color:#d71920;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}


.tt-season-chip img{
    width:20px;
    height:20px;
    object-fit:contain;
}

.tt-season-chip span{
    font-size:15px;
    font-weight:600;
    white-space:nowrap;
}
/*
|--------------------------------------------------------------------------
| Container
|--------------------------------------------------------------------------
*/

.tt-season-filter {

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 15px;
    margin-bottom: 20px;

    padding: 12px 15px;

    border: 1px solid #ececec;
    border-radius: 10px;

    background: #fafafa;

}


/*
|--------------------------------------------------------------------------
| Title
|--------------------------------------------------------------------------
*/

.tt-season-title {

    font-weight: 600;
    font-size: 15px;

    margin-right: 10px;

}


/*
|--------------------------------------------------------------------------
| Option
|--------------------------------------------------------------------------
*/

.tt-season-option {

    display: flex;
    align-items: center;

    gap: 7px;

    cursor: pointer;

    padding: 8px 14px;

    border-radius: 8px;

    border: 1px solid #dddddd;

    background: #ffffff;

    transition: all .20s ease;

}


/*
|--------------------------------------------------------------------------
| Hover
|--------------------------------------------------------------------------
*/

.tt-season-option:hover {

    background: #f3f3f3;

}


/*
|--------------------------------------------------------------------------
| Checkbox
|--------------------------------------------------------------------------
*/

.tt-season-option input {

    display: none;

}


/*
|--------------------------------------------------------------------------
| Icon
|--------------------------------------------------------------------------
*/

.tt-season-option img {

    width: 22px;
    height: 22px;

    object-fit: contain;

}


/*
|--------------------------------------------------------------------------
| Text
|--------------------------------------------------------------------------
*/

.tt-season-option span {

    font-size: 14px;
    font-weight: 500;

}


/*
|--------------------------------------------------------------------------
| Checked
|--------------------------------------------------------------------------
*/

.tt-season-option:has(input:checked) {

    background: #ffe98d;

    border-color: #e4b400;

}


/*
|--------------------------------------------------------------------------
| Active Effect
|--------------------------------------------------------------------------
*/

.tt-season-option:has(input:checked):hover {

    background: #ffe26a;

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width:768px){

    .tt-season-filter{

        flex-direction:column;

        align-items:flex-start;

    }

    .tt-season-option{

        width:100%;

    }

}