/* ------------------------------------  */
/* ---------- MAchines CSS ----------  */
/* ------------------------------------  */

@import 'variables.php';

/*Search Module*/
.search-form-module{padding: 45px 0; background: var(--mainColour)}
.search-form-module > div{padding: 0 15px;}
.search-form-module .sfm-filters-form{display: flex; gap:30px;}
.search-form-module .sfm-filters{display: flex; flex-direction: column; gap:30px;}
.search-form-module .sfm-filters-main{display: flex; gap:30px; align-items: center;}
.search-form-module .sfm-filter{width: 359px;}
.search-form-module .sfm-filter-buttons{display: flex; gap:10px; flex-shrink: 0;}
.search-form-module .sfm-search{background: #fff; border-radius: 5px; height: 54px; padding: 0 40px; border: 0; color: var(--tertiaryColour); font-weight: 500;
    text-align: center; justify-content: center;}
.search-form-module .sfm-advanced-search{background: transparent; border-radius: 5px; height: 54px; padding: 0 40px; border: 1px solid #fff; color: #fff; font-weight: 500;
    display:flex; align-items: center; text-align: center; justify-content: center;}
.search-form-module .sfm-filters-advanced{display: none;}
.search-form-module .sfm-filters-advanced.open{display: flex; gap:30px; align-items: center;}
.sfm-filter{position: relative;}
.sfm-filter::after{content: ""; height: 10px; width: 10px; border: solid #fff; border-width: 0 2px 2px 0; position: absolute; right: 5px; top: 17px;
 transform: rotate(45deg); pointer-events: none;}
.sfm-filter-type.sfm-filter::after{height: 22px; width: 22px; background: url(../images/type.svg) center no-repeat; transform: rotate(0); border: 0; top: 15px;}
.sfm-filter select{background: transparent; border: solid #fff; border-width: 0 0 1px 0; color: #fff; padding:0 0 0 10px; text-transform: capitalize;}
.sfm-filter select option{color: #000;}

/*Search Page*/
.machine-search-header{padding: 20px 0; background: #F4F7FF; border-bottom: 1px solid var(--border);}
.machine-search-header > div{padding: 0 15px; display: flex; justify-content: space-between; align-items: center;}
.machine-search-header > div > span{color: var(--secondaryColour);}

.machine-search-header .search-order { font-size: 1rem; width: 400px; display: flex; align-items: center; flex-wrap: nowrap; position: relative; }
.machine-search-header .orderBy { color: inherit; height: 50px; padding: 0 10px; display: flex; width: 100%; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 5px; }
.machine-search-header .orderBy:after { content: ''; width: 10px; height: 10px; border: solid #000; border-width: 0 2px 2px 0; align-self: center; margin-left: auto; position: absolute; right: 15px; z-index: 1000; transform: rotate(45deg); }
.machine-search-header .orderDrop { display: none; position: absolute; top: 40px; right: 0; background: #fff; border: 1px solid #EEECEC; border-top: 0; flex-direction: column; padding: 5px 10px; z-index: 1001; line-height: 30px; width: 100%; }
.machine-search-header .orderDrop.active { display: flex; }
.machine-search-header .orderDrop a { color: inherit; }

.machine-list{display: flex; flex-wrap: wrap; gap:20px; padding: 45px 0 20px 0;}

/*Pager*/
.search-machine-footer{width: 100%; margin:20px 0;}
.machine-pager { display: flex; width: 100%; align-items: center; height: 70px; justify-content: center; background: #F4F7FF; position: relative;}
.machine-pager-pages{display: flex; align-items: center;}
.machine-pager-pages a{padding: 0 10px; border-right: 1px solid var(--secondaryColour); color: var(--secondaryColour);}
.machine-pager-pages a.active{font-weight: bold;}
.machine-pager-pages a:last-child{border: 0;}
.machine-pager .pager-prev, .machine-pager .pager-next{background: var(--mainColour); color: #fff; width: 200px; text-transform: uppercase; font-weight: 600; height: 100%; display: flex; align-items: center; gap:10px; justify-content: center; font-size: 1.125rem;
    position: absolute; top:0;}
.machine-pager .pager-prev{left: 0;}
.machine-pager .pager-next{right: 0;}
.machine-pager .pager-prev::before{content:""; height: 10px; width: 10px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(45deg);}
.machine-pager .pager-next::after{content:""; height: 10px; width: 10px; border: solid #fff; border-width: 2px 2px 0 0; transform: rotate(45deg);}

/*Machine Block*/
.machine-block{display: flex !important; height: auto !important; flex-direction: column; width: calc(25% - 15px); border: 1px solid var(--border);}
.machine-block .mb-image{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow: hidden; position: relative;}
.machine-block .machine-sale-status{position: absolute; top: 10px; left: 10px; background: var(--mainColour); color: #fff; font-weight: 600; padding: 10px; 
    text-transform: capitalize;}

.machine-block .mb-image img{max-height: 100%;}
.machine-block .mb-description{display: flex; flex-direction: column; padding: 15px; gap:10px; color: var(--textColour); flex-grow: 1; justify-content: space-between;}
.machine-block .mb-button{color: #fff; width: 100%; border-radius: 5px; height: 54px; text-align: center; display: flex; align-items: center; justify-content: center; font-weight: bold; background: var(--mainColour);}

/*Details Page*/
.machines-details-page{padding: 20px 0;}
.machines-details-page > div{display: flex; flex-wrap: wrap;}
.machine-types{width: 100%; margin-bottom: 20px; flex-wrap: wrap; display: flex; align-items: center; gap:15px;}
.machine-types a{color: var(--secondaryColour); text-decoration: underline; font-weight: 600; font-size: 0.875rem;}
.machine-left{display: flex; flex-direction: column; gap:15px; width: 50%; padding-right: 10px;}
.machine-right{display: flex; flex-direction: column; align-items: flex-start; gap:15px; padding-left: 10px; width: 50%;}
.machine-main-gallery{width: 100%; border: 1px solid var(--border); position: relative;}
.machine-main-gallery > div{aspect-ratio: 1/1;}
.machine-image.swiper-slide{display: flex; align-items: center; justify-content: center;}
.machine-image img{max-width: 100%; max-height: 100%; height: auto; width: auto;}
.machine-thumbnail-gallery{width: 100%; display: flex;}
.machine-thumbnail-gallery > div{margin: 0; width: 100%;}
.machine-thumbnail-gallery .swiper-wrapper {display: flex; flex-wrap: wrap; gap:20px; }
.machine-thumbnail-gallery .swiper-slide {height: 90px; width: auto; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; transition: ease-in-out .3s; } 
.machine-thumbnail-gallery .swiper-slide img {max-width: 100%; max-height: 100%; }
.machine-thumbnail-gallery .swiper-slide.swiper-slide-thumb-active{border-color: #000;}

.mm-gal-nav{position: absolute; height: 60px; width: 40px; top: calc(50% - 30px); background: #0D3BCA; z-index: 1;}
.mm-gal-nav::after{content: ""; height: 14px; width: 14px; transform: rotate(45deg); border: solid #fff; border-width: 3px 3px 0 0; position: absolute; top:calc(50% - 7px); right: 14px}
.mm-gal-prev{left: 0; transform: rotate(180deg);}
.mm-gal-next{right: 0;}

.machine-status{color: var(--secondaryColour); font-weight: 600; border-radius: 5px; border: 1px solid #BECBEF; background: #F4F7FF; padding: 15px 20px; 
    text-transform: capitalize;}
.machine-make{font-weight: 500;}
.machine-title{line-height: 1; font-weight: 600; font-size: 2.625rem; color: var(--secondaryColour);}
.machine-price{color: #000; font-size: 1.75rem;}
.machine-listed{font-weight: 600; font-size: 1.125rem; display: flex; align-items: center; gap:10px;}
.machine-listed::before{content: ""; height: 16px; width: 16px; background: url(../images/time.svg) center no-repeat;}
.machine-cta{display: flex; flex-direction: column; gap:10px; width: 100%;}
.machine-cta .machine-enquiry, .machine-cta .machine-finance{display: flex; flex-direction: column; gap:10px; padding: 15px 10px; border-radius: 5px; border: 1px solid #EEE; background: #F4F7FF; }
.machine-cta .machine-enquiry > span, .machine-cta .machine-finance > span{font-weight: 600; font-size: 1.125rem; color: #000;}
.machine-cta .machine-buttons{display: flex; align-items: center; gap:10px;}
.machine-cta .machine-buttons a, .machine-finance a{color: #fff; font-weight: 600; flex-grow: 1; display: flex; align-items: center; justify-content: center; gap:10px; text-align: center; border-radius: 5px; padding: 15px 0;}
.machine-cta .machine-buttons a.mb-enquire{background: var(--mainColour);}
.machine-cta .machine-buttons a.mb-enquire::before{content: ""; height: 12px; width:17px; background: url(../images/email-white.svg) center no-repeat; flex-shrink: 0;}
.machine-cta .machine-buttons a.mb-phone{background: #0D3BCA;}
.machine-cta .machine-buttons a.mb-phone::before{content: ""; height: 18px; width:18px; background: url(../images/phone-white.svg) center no-repeat; flex-shrink: 0;}
.machine-finance a{background: var(--secondaryColour);}

.machine-details-wrap{display: flex; flex-direction: column; width: 100%; margin: 40px 0 60px 0; padding-top: 40px; border-top: 1px solid #E7E7E7; }
.machine-specs-wrap{margin-bottom: 40px; padding-bottom:40px; border-bottom:1px solid #E7E7E7; display: flex; flex-direction: column; gap:15px;}
.machine-specs-wrap > span, .machine-details > span{color: var(--secondaryColour); font-size:2rem; font-weight: 600; }
.machine-specs{display: flex; flex-wrap: wrap; gap:20px;}
.machine-specs > div{border-radius: 5px; border: 1px solid #E0E6ED; background: #F4F7FF; padding: 24px 18px; width: calc(25% - 15px); display: flex; gap:12px; align-items: center;}
.machine-specs > div > div{display: flex; flex-direction: column;}
.machine-specs > div::before{content: ""; flex-shrink: 0;}
.machine-specs > div.machine-spec-make::before{height: 35px; width: 53px; background:url(../images/make.svg) center no-repeat; }
.machine-specs > div.machine-spec-model::before{height: 40px; width: 50px; background:url(../images/model.svg) center no-repeat; }
.machine-specs > div.machine-spec-year::before{height: 42px; width: 41px; background:url(../images/year.svg) center no-repeat; }
.machine-specs > div.machine-spec-hours::before{height: 40px; width: 39px; background:url(../images/hours.svg) center no-repeat; }
.machine-specs > div.machine-spec-engine::before{height: 36px; width: 50px; background:url(../images/engine.svg) center no-repeat; }
.machine-specs > div.machine-spec-horse::before{height: 37px; width: 37px; background:url(../images/horsepower.svg) center no-repeat; }

.machine-details-wrap .machine-details{display: flex; flex-direction: column; gap:15px;}
.machine-details-wrap .machine-details > div{border-radius: 6px; border: 1px solid #D9D9D9; background: #FFF; padding: 50px 30px;}

/*Related Machines*/
.machine-related-wrap{width: 100%;}
.machine-related > span{color: var(--secondaryColour); font-weight: 600; font-size: 2rem; margin-bottom: 10px; display: block;}
.machine-related p{padding: 0; margin: 0 0 30px 0;}
.machine-related-gallery{position: relative;}

.mr-gal-nav{position: absolute; height: 60px; width: 40px; top: calc(50% - 30px); background: var(--secondaryColour); z-index: 1; transition: ease-in-out all .3s;}
.mr-gal-nav::after{content: ""; height: 14px; width: 14px; transform: rotate(45deg); border: solid #fff; border-width: 3px 3px 0 0; position: absolute; top:calc(50% - 7px); right: 14px}
.mr-gal-prev{left: -50px; transform: rotate(180deg);}
.mr-gal-next{right: -50px;}
.mr-gal-nav.swiper-button-disabled{opacity: .7;}

/*Machine List Module*/
.machines-module{padding: 40px 0;}
.machines-module > div{ display:flex; flex-direction:column; gap: 30px; padding: 0 15px;}
.ml-headings{display: flex; flex-direction: column; text-align: center; align-items: center; justify-content: center;}
.ml-headings span{color: var(--secondaryColour); font-size: 2.625rem; font-weight: 600;}
.machine-slider-wrapper{width: 100%; position: relative;}
.machine-slider > div{padding: 10px 0;}

.ml-gal-nav{height: 60px; width: 40px; background: var(--secondaryColour); position: absolute; top: calc(50% - 30px); transition: ease-in-out all .3s; z-index: 100;}
.ml-gal-nav::before{content: ""; height: 14px; width: 14px; border:solid #fff; border-width: 0 0 3px 3px; transform: rotate(45deg); position:absolute; left: 16px ; top: 23px;}
.ml-gal-nav.swiper-button-disabled{opacity: .7;}
.ml-gal-prev{left: -70px;}
.ml-gal-next{right: -70px; transform: rotate(180deg);}

/*Finance Form*/
.finance-form{width: 100%; padding: 40px 30px; display:flex; flex-direction:column; border:1px solid var(--border); margin:20px 0; }
.finance-form .ff-header{display: flex; align-items: center; gap:40px; margin-bottom: 20px;}
.finance-form .ff-contact{width: 400px; flex-shrink: 0; padding: 20px; border: 1px solid var(--border); border-radius: 5px; display: flex; flex-direction: column; gap:5px;}
.finance-form .ff-contact span{font-weight: 600; font-size: 1.5rem;}
.finance-form .ff-header .ff-phone{display: flex; align-items: center; gap:10px; color: var(--textColour);}
.finance-form .ff-header .ff-phone::before{content: ""; height: 14px; width: 14px; background: url(../images/phone.svg) center no-repeat; flex-shrink: 0;}
.finance-form .ff-header .ff-email{display: flex; align-items: center; gap:10px; color: var(--textColour);}
.finance-form .ff-header .ff-email::before{content: ""; height: 14px; width: 14px; background: url(../images/email.svg) center no-repeat; flex-shrink: 0;}
.finance-form .ff-intro{display: flex; flex-direction: column; gap:10px;}
.finance-form .ff-intro span{font-size: 2rem; font-weight: 600;}
.finance-form .ff-intro p{padding: 0;}
.finance-form .ff-form{display: flex; flex-direction: column;}
.finance-form .ff-form > div{display: flex; flex-direction: column; gap:20px; margin-bottom: 30px ; padding-bottom: 30px; border-bottom: 1px solid var(--border);}
.finance-form .ff-form > div > span{font-weight: 600;}
.finance-form .ff-row{width: 100%; display: flex; align-items: flex-start; gap:15px;}
.finance-form .ff-row > div{flex: 1 0 0; display: flex; flex-direction: column; gap:5px;}
.finance-form .ff-row > div.ff-row-split{flex-direction: row; gap:15px;}
.ff-row-split > div{flex: 1 0 0; display: flex; flex-direction: column; gap: 5px;}
.finance-form :is(input[type=text], input[type=email], input[type=tel], input[type=number], select){height: 36px; border-radius: 8px; background-color: #F4F7FF; border: 1px solid var(--border);}

.ff-number{position: relative;}
.ff-number::before{content: "€"; position: absolute; left: 10px; bottom: 7px;}
.ff-number input{padding-left: 30px;}

.finance-form .ff-form > div.ff-privacy{gap:0px; padding-bottom: 0; border-bottom: 0;}
.finance-form .ff-form > div.ff-privacy > span{margin-bottom: 10px;}
.finance-form .ff-form > div.ff-privacy strong{margin-top: 20px; color: var(--mainColour);}
.ff-button input[type=submit]{width: 100%; color: #fff; background: var(--mainColour); border: 0; outline: 0; text-align: center; border-radius: 8px; font-weight: 600; font-size: 0.875rem; height: 48px;}

@media (min-width:1400px) and (max-width:1599px) {

    /*Search Module*/
    .search-form-module .sfm-filters-main, .search-form-module .sfm-filters-advanced.open{gap:20px;}
    .search-form-module .sfm-filter {width: 286px;}

}

@media (min-width:1200px) and (max-width:1399px) {

    /*Search Module*/
    .search-form-module .sfm-filters-main, .search-form-module .sfm-filters-advanced.open{gap:20px;}
    .search-form-module .sfm-filter {width: 226px;}

}


/*---------LARGE DESKTOP < 1199px---------*/
@media (min-width:1200px) {
    

}

/*---------DESKTOP < 1199px---------*/
@media (min-width:992px) and (max-width:1199px) {
    
    /*Search Module*/
    .search-form-module .sfm-filters-main, .search-form-module .sfm-filters-advanced.open{gap:10px;}
    .search-form-module .sfm-filter {width: 203px;}
    .search-form-module .sfm-search, .search-form-module .sfm-advanced-search{padding: 0 20px;}
    .search-form-module .sfm-filters-form {gap:20px;}

    /*Details*/
    .machine-title{font-size: 2.25rem;}
    .machine-specs > div{width: calc((100%/3) - 14px);}
    .machine-thumbnail-gallery .swiper-wrapper{gap:10px;}
    .machine-thumbnail-gallery .swiper-slide{height: 60px;}

    /*Finance Form*/
    .finance-form{padding: 30px 20px;}
    .finance-form .ff-contact{width: 300px;}

    /*Machine List Module*/
    .ml-gal-prev{left: -30px;}
    .ml-gal-next{right: -30px;}

}

/*---------Tablet & Mobile---------*/
@media (max-width:991px) {

    /*Search Module*/
    .search-form-module .sfm-filters-form{flex-direction: column;}
    .search-form-module .sfm-filters-main, .search-form-module .sfm-filters-advanced.open{flex-direction: column; gap:10px;}
    .search-form-module .sfm-filters{gap:10px;}
    .search-form-module .sfm-filter{width: 100%;}
    .search-form-module .sfm-filter-buttons{gap:20px;}
    .search-form-module .sfm-search{flex: 1 0 0;}
    .search-form-module .sfm-advanced-search{flex: 1 0 0;}
  
    /*Finance Form*/
    .finance-form .ff-row{flex-direction: column;}
    .finance-form .ff-form > div{gap:15px;}
    .finance-form .ff-row > div{width: 100%;}
    .finance-form .ff-row > div.ff-row-split{flex-direction: column;}

    /*Details page*/
    .mr-gal-nav{height: 40px; width: 30px;}
    .mr-gal-prev{left: -20px; transform: rotate(180deg);}
    .mr-gal-next{right: -20px;}
    .mr-gal-nav::after{right: 11px;}

    /*Machine List Module*/
    .ml-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; height: 20px; margin-top: 20px;}
    .ml-pagination .ml-bullet{ height: 16px; width: 16px; border-radius: 100%; position: relative; display: flex; align-items: center; 
        justify-content: center; cursor: pointer; transition: ease-in-out all .3s; background: #9AA8CE;}
    .ml-pagination .ml-bullet.active { background-color: var(--mainColour);}
    .ml-pagination.swiper-pagination-lock { display: none; }

}

/*---------TABLET < 959px---------*/
@media (min-width:768px) and (max-width:991px) {
    
    /*Search Page*/
    .machine-search-header .search-order{width: 300px;}

    .machine-list{gap:10px;}

    /*Machine Block*/
    .machine-block{width: calc((100%/3) - 7px);}

     /*Details*/
    .machine-title{font-size: 2rem;}
    .machine-specs > div{width: calc((100%/3) - 14px);}
    .machine-thumbnail-gallery .swiper-wrapper{gap:10px;}
    .machine-thumbnail-gallery .swiper-slide{height: 50px;}
    .mm-gal-nav {height: 40px; width: 30px; top: calc(50% - 20px);}
    .machine-cta .machine-buttons{flex-direction: column;}
    .machine-cta .machine-buttons a, .machine-finance a{width: 100%;}
    .machine-specs-wrap > span, .machine-details > span{font-size: 1.5rem;}
    .mm-gal-nav::after {right: 10px;}

    /*Finance Form*/
    .finance-form{padding: 20px;}
    .finance-form .ff-header{gap:20px;}
    .finance-form .ff-contact{width: 230px; padding: 20px 10px;}
    .finance-form .ff-intro span{font-size: 1.5rem;}

}
@media (max-width:767px) {

    .search-form-module{padding: 30px 0;}
    .search-form-module .sfm-filter-buttons{flex-direction: column;}
    .search-form-module .sfm-filter-buttons > *{height: 54px; flex: initial; width: 100%;}

    /*Search Page*/
    .machine-search-header > div{flex-direction: column; justify-content: center; gap:15px;}
    .machine-search-header .search-order{width: 100%;}

    .machine-pager .pager-prev, .machine-pager .pager-next{width: 100px;}
    .machine-pager-pages > a:not(.active){display: none;}
    .machine-pager-pages > a{border: 0;}

    .machine-list{padding: 20px 0; gap:10px;}

    /*Machine Block*/
    .machine-block{width: calc(50% - 5px);}
    .machine-block .mb-description{font-size: 0.875rem; padding: 10px;}
    .machine-block .mb-image img{max-width: initial;}

    /*Details*/
    .machine-left, .machine-right{padding: 0; width: 100%;}
    .machine-left{margin-bottom: 20px;}
    .machine-title{font-size: 1.75rem;}
    .machine-specs > div{width: 100%;}
    .machine-thumbnail-gallery .swiper-wrapper{gap:5px;}
    .machine-thumbnail-gallery .swiper-slide{height: 50px;}
    .mm-gal-nav {height: 40px; width: 30px; top: calc(50% - 20px);}
    .machine-cta .machine-buttons{flex-direction: column;}
    .machine-cta .machine-buttons a, .machine-finance a{width: 100%;}
    .machine-specs-wrap > span, .machine-details > span{font-size: 1.25rem;}
    .mm-gal-nav::after {right: 10px;}
    .machine-specs{gap:10px;}

    /*Finance Form*/
    .finance-form{padding: 20px 10px;}
    .finance-form .ff-form > div.ff-privacy{margin-bottom: 10px;}
    .finance-form label{font-size: 0.875rem;}
    .finance-form .ff-intro span{font-size: 1.25rem;}
    .finance-form .ff-header{flex-direction: column; gap:20px;}
    .finance-form .ff-contact{width: 100%; padding: 15px;}
    #ff-basis, #ff-home-type{display: flex; flex-direction: column; gap:10px;}
    #ff-basis label, #ff-home-type label{margin: 0 !important;}

    /*Machine List*/
    .ml-headings span{font-size: 1.625rem;}

  
}