body {
    position: relative;
}

canvas {
    max-width: 100%;
    height: auto;
}

.swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset,10px);
    right: auto;
    background-color: #58b001;
    border-radius: 50%;
    width: 4vh;
    height: 4vh;
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset,10px);
    left: auto;
    background-color: #58b001;
    border-radius: 50%;
    width: 4vh;
    height: 4vh;
}

    .swiper-button-next:after, .swiper-button-prev:after {
        font-family: swiper-icons;
        font-size: 0.9em;
        font-weight: 700;
        text-transform: none !important;
        letter-spacing: 0;
        font-variant: initial;
        line-height: 1;
    }

.slider-for .slick-prev, .slick-next {
    opacity: 0;
    background: #ffffff;
    border-radius: 50%;
    border: 1px solid #e3e3e3;
}

span.slick-prev.slick-arrow, span.slick-next.slick-arrow {
    /*padding: 10px;*/
    width: 34px;
    height: 35px;
}

.loantermbtn {
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.43);
    background: #FFF;
    text-align: center;
    width: 18%;
}

.loantermbtnActive {
    border: 1px solid #6FB203;
    background: #6FB203;
    color: white;
}

.baloonbtn {
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.43);
    background: #FFF;
    text-align: center;
    width: 11%;
    min-width: 39px;
}

.baloonbtnActive {
    border: 1px solid #6FB203;
    background: #6FB203;
    color: white;
}

.customBlockMsg {
    top: 10% !important;
    left: 0% !important;
    background-color: #ffffff; /* Change background color */
    border: 2px solid #333; /* Add border */
    padding: 20px; /* Add padding */
}

/* Custom CSS for blockElement */
.customBlockElement {
    background-color: rgba(0, 0, 0, 0.5); /* Change background color and opacity */
}

.favorites {
    color: #ffffff;
    transition: transform 0.2s ease-in-out;
}

    .favorites:hover {
        color: #86bd29;
        transform: scale(1.2);
    }

.circle-singleline-favorites {
    line-height: 29px;
    margin: 9px;
    position: absolute;
    width: 26px;
    height: 26px;
    right: 7px;
    border-radius: 50%;
    font-size: 18px;
    text-align: center;
    background-color: rgba(0,0,0,.314);
    color: #ffffff;
    z-index: 1;
    top: 0;
}

.favorites-Selected {
    color: #6FB203;
}

.favorites-not-Selected {
    color: #ffffff;
}

.blockUI.blockMsg {
    z-index: 2010 !important;
    border: none !important;
}

.alternate-row-colors {
    background-color: #f3f3f3;
    color: #000000;
    border-color: #f3f3f3;
}

.row.ms-0.me-0:nth-child(even) {
    background-color: #ffffff;
    color: #000000;
    border-color: #ffffff;
}



.dekraimage {
    width: 120px !important
}



@media (max-width: 767px) {
    .dekraimage {
        width: 80px !important
    }
}

.vehicle-details-header .spec-box {
    font-size: 16px;
}

.vehicle-details-header .status-badge-img {
    height: 28px;
}

.vehicle-details-header .price {
    font-size: 53px;
}

.vehicle-details-header .location {
    font-size: 16px;
}

/* Center the lightbox image container */


/* If you show captions, avoid them shrinking the image too much on small screens */
@media (max-width: 768px) {

    .sl-wrapper .sl-image {
        top: 50% !important;
        left: 50% !important;
        width: auto !important;
        height: auto !important;
        transform: translate(-50%, -50%) !important;
    }
        /* Make the image fill the mobile viewport without cropping */
        .sl-wrapper .sl-image img {
            width: auto !important; /* let natural ratio rule */
            height: auto !important;
            max-width: 100vw !important;
            max-height: 100dvh !important; /* dynamic viewport height fixes iOS url bar issues */
            object-fit: contain !important; /* use 'cover' if you want edge-to-edge crop */
            display: block;
        }
    /* Optional: ensure overlay covers everything cleanly */
    .sl-overlay {
        position: fixed !important;
    }

    .sl-caption {
        max-width: 100vw;
        padding: 8px 12px;
        font-size: 14px;
        line-height: 1.3;
    }
}

.sl-wrapper .sl-navigation button {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10060;
    font-family: Arial, Baskerville, monospace;
    background-color: #58b001;
    border-radius: 50%;
    height: 44px;
    width: 44px;
    color: white;
    margin: 0;
    line-height: 0;
    align-items: center;
    cursor: pointer;
    padding: 10px 12px 15px 15px;
}

.vehicle-title-Page {
    min-height: 48px;
    color: #000;
    font-family: Poppins;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}
#specCollapse .label {
    font-size: 10pt;
}
.spec-value {
    display: inline-block;
    padding: clamp(0.3rem, 1vw, 0.4rem) clamp(0.5rem, 1.5vw, 0.6rem);
    border: 1px solid #e8e8e8;
    border-radius: clamp(8px, 2vw, 12px);
    background: #f3f3f3;
    width: 100%;
    text-align: center;
    font-weight: 600;
    font-size: clamp(16px, 2vw, 18px);
}
.vehicle-right-Details {
    border-radius: 10px;
    border: 0.5px solid rgba(0, 0, 0, 0.30);
}
.Vehicle-price {
    color: #6fb203;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
}

@media (max-width: 1200px) {
    .Vehicle-price {
        color: #6fb203;
        font-size: 30px;
        font-weight: 800;
        line-height: 1;
    }
}

.vehcileFinanceTitle {
    color: #000;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
}

@media (max-width: 991px) {
    .vehcileFinanceTitle {
        color: #000;
        font-size: 19px;
        font-style: normal;
        font-weight: 700;
    }
    .vehicle-right-Details {
        border: none !important;
    }

    .Vehicle-price {
        color: #6fb203;
        font-size: 30px;
        font-weight: 800;
        line-height: 1;
    }
}

.fixed-bottom {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1030;
    /* Ensure it respects iOS safe-area insets */
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff; /* Or your desired background */
}

.floating-chat {
    position: fixed;
    bottom: 29px;
    right: 20px;
    background: #6FB203;
    color: #fff;
    font-size: 19px;
    font-weight: 600;
    border: none;
    border-radius: 41px;
    padding: 10px 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    transition: all 0.3s ease;
    width: 47px;
    height: 47px;
}

    .floating-chat:hover {
        background: #5aa002;
        transform: translateY(-3px);
    }