/*==================================================
    FLEET
==================================================*/

.fleet{

    background:var(--surface);

}

/*==================================================
    HEADER
==================================================*/

.fleet-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:40px;

    margin-bottom:40px;

}

.fleet-title{

    max-width:700px;

}

.fleet-title .section-subtitle{

    margin-bottom:12px;

}

.fleet-title .section-title{

    margin-bottom:15px;

}

.fleet-title .section-description{

    max-width:620px;

    color:var(--text);

}

/*==================================================
    FILTER
==================================================*/

.fleet-filter{

    background:#fff;

    padding:25px;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

    margin-bottom:45px;

}

.fleet-filter form{

    display:grid;

    grid-template-columns:220px 220px 1fr auto;

    gap:20px;

    align-items:end;

}

.filter-group{

    display:flex;

    flex-direction:column;

}

.filter-group label{

    margin-bottom:10px;

    font-size:14px;

    font-weight:600;

    color:var(--title);

}

.filter-group select,

.filter-group input{

    height:50px;

    padding:0 18px;

    border:1px solid #E5E7EB;

    border-radius:var(--radius-md);

    font-size:15px;

    transition:var(--transition);

}

.filter-group select:focus,

.filter-group input:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(244,180,0,.12);

}

.filter-group input::placeholder{

    color:#9CA3AF;

}

/*==================================================
    SLIDER
==================================================*/

.fleet-slider{

    position:relative;

    overflow:hidden;

}

.swiper-slide{

    height:auto;

}

.fleet-pagination{

    margin-top:40px;

    display:flex;

    justify-content:center;

}

.fleet-pagination .swiper-pagination-bullet{

    width:12px;

    height:12px;

    opacity:1;

    background:#d8d8d8;

}

.fleet-pagination .swiper-pagination-bullet-active{

    background:var(--primary);

}

/*==================================================
    CARD
==================================================*/

.fleet-card{

    background:#fff;

    border:1px solid #ececec;

    border-radius:18px;

    overflow:hidden;

    transition:.35s;

    height:100%;

}

.fleet-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.10);

}

.fleet-card-image{

    position:relative;

    overflow:hidden;

    aspect-ratio:4/3;

}

.fleet-card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.45s;

}

.fleet-card:hover .fleet-card-image img{

    transform:scale(1.05);

}

.fleet-badge{

    position:absolute;

    top:18px;

    left:18px;

    padding:9px 18px;

    border-radius:40px;

    background:var(--primary);

    color:#111;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

}

.fleet-card-body{

    padding:24px;

}

.fleet-card-body h3{

    text-align:center;

    font-size:20px;

    margin-bottom:18px;

    color:var(--title);

}

.fleet-meta{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:8px;

    margin-bottom:24px;

}

.fleet-meta span{

    display:flex;

    align-items:center;

    gap:6px;

    font-size:13px;

    color:var(--text);

    white-space:nowrap;

}

.fleet-meta i{

    color:var(--primary);

    font-size:15px;

}

.fleet-details{

    display:block;

    text-align:center;

    font-size:14px;

    font-weight:700;

    letter-spacing:.4px;

    color:var(--primary);

    text-transform:uppercase;

    transition:.3s;
    text-decoration: none;

}

.fleet-details:hover{

    color:var(--secondary);

}

/*==================================================
    RESPONSIVE
==================================================*/

@media(max-width:1200px){

    .fleet-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .fleet-filter form{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){
    .fleet{
        padding: 30px 0 0 0;
    }
    .fleet-filter{

        padding:20px;

    }

    .fleet-filter form{

        grid-template-columns:1fr;

    }

    .fleet-header{

        gap:25px;

    }

    .fleet-prev,

    .fleet-next{

        display:none;

    }

    .fleet-card-body{

        padding:20px;

    }

    .fleet-card-body h3{

        font-size:22px;

    }

    .fleet-meta{

        justify-content:center;

        flex-wrap:wrap;

        gap:12px;

    }

}
.swiper-pagination {
    position: relative;
}

/*==================================================
    FILTER
==================================================*/

.fleet-actions{

    display:flex;

    align-items:center;

    gap:15px;

}

/*==================================================
    FLEET FILTER CONTAINER
==================================================*/

.fleet-filter-container{

    height:0;

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    margin-bottom:0;

    transition:
        height .45s ease,
        opacity .3s ease,
        visibility .3s ease,
        margin-bottom .45s ease;

}

.fleet-filter-container.active{

    opacity:1;

    visibility:visible;

    margin-bottom:45px;

}

.fleet-filter{

    background:#fff;

    padding:25px;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

}

.fleet-filter form{

    display:grid;

    grid-template-columns:220px 220px minmax(250px,1fr) auto;

    gap:20px;

    align-items:end;

}

.filter-group{

    display:flex;

    flex-direction:column;

}

.filter-group label{

    margin-bottom:10px;

    font-size:14px;

    font-weight:600;

    color:var(--title);

}

.filter-group select,

.filter-group input{

    width:100%;

    height:50px;

    padding:0 18px;

    border:1px solid #E5E7EB;

    border-radius:var(--radius-md);

    background:#fff;

    font-size:15px;

    transition:var(--transition);

}

.filter-group input::placeholder{

    color:#9CA3AF;

}

.filter-group select:focus,

.filter-group input:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(244,180,0,.12);

}

.fleet-filter .btn{

    width:100%;

    height:50px;

}

.fleet-filter-toggle{

    width:50px;

    height:50px;

    border:none;

    border-radius:var(--radius-md);

    background:var(--primary);

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:var(--transition);

}

.fleet-filter-toggle:hover{

    background:var(--primary-dark);

    color:#111;

    transform:translateY(-2px);

}

/*==============================
    RESPONSIVE
==============================*/

@media(max-width:1200px){

    .fleet-filter form{

        grid-template-columns:repeat(2,1fr);

    }

    .fleet-filter .btn{

        grid-column:1/-1;

    }

}

@media(max-width:768px){

    .fleet-actions{

        width:100%;

        justify-content:space-between;

    }

    .fleet-filter{

        padding:20px;

    }

    .fleet-filter form{

        grid-template-columns:1fr;

        gap:16px;

    }

    .fleet-filter .btn{

        width:100%;

    }

}

@media(max-width:480px){

    .fleet-actions{

        flex-direction:column-reverse;

        align-items:stretch;

        gap:12px;

    }

    .fleet-filter-toggle{

        width:100%;

    }

}

/*==================================================
    AJAX FILTER
==================================================*/

.fleet-slider{

    position:relative;

    transition:opacity .25s ease;

}

.fleet-slider.is-loading{

    opacity:.35;

    pointer-events:none;

}

.fleet-loading{

    display:none;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:25px;

    color:var(--text);

    font-size:14px;

}

.fleet-loading.active{

    display:flex;

}

.fleet-loading i{

    color:var(--primary);

    animation:fleetSpinner .8s linear infinite;

}

@keyframes fleetSpinner{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/*==================================================
    EMPTY
==================================================*/

.fleet-empty{

    padding:50px 20px;

    text-align:center;

}

.fleet-empty[hidden]{

    display:none;

}

.fleet-empty > i{

    margin-bottom:15px;

    color:var(--primary);

    font-size:40px;

}

.fleet-empty h3{

    margin-bottom:8px;

    color:var(--title);

    font-size:20px;

}

.fleet-empty p{

    margin-bottom:20px;

    color:var(--text);

    font-size:14px;

}


/*==================================================
    FILTER RESET
==================================================*/

.fleet-filter-reset{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    height:50px;

    padding:0 18px;

    border:1px solid #E5E7EB;

    border-radius:var(--radius-md);

    background:#fff;

    color:var(--text);

    font-size:14px;

    cursor:pointer;

    transition:var(--transition);

}

.fleet-filter-reset:hover{

    border-color:var(--primary);

    background:#fff;

    color:var(--primary);

}

/*==================================================
    FLEET AJAX + SWIPER MOBILE
==================================================*/

.fleet-slider{

    width:100%;

    overflow:hidden;

}

.fleet-slider .swiper-wrapper{

    align-items:stretch;

}

.fleet-slider .swiper-slide{

    height:auto;

    box-sizing:border-box;

}


/*==================================================
    MOBILE
==================================================*/

@media(max-width:575px){

    .fleet-slider{

        width:100%;

        overflow:hidden;

    }

    .fleet-slider .swiper-wrapper{

        align-items:stretch;

    }

    .fleet-slider .swiper-slide{

        width:100% !important;

        flex-shrink:0;

    }

    .fleet-card{

        width:100%;

        height:auto;

    }

    .fleet-card-image{

        width:100%;

        aspect-ratio:4 / 3;

    }

    .fleet-card-body{

        width:100%;

    }

}