/**
 * Vehicle Carousel with Interior/Exterior Toggle Styling and favorite btn
 */

.dv-vehicle-carousel {
     margin-bottom: 40px;
}
 
/* Title section */
.carousel-title-section, 
.vehicle-carousel-header {
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    gap: 12px;
}
 
.carousel-title {
     font-size: clamp(1.825rem, 2.5vw, 2rem);
     font-weight: 500;
     margin-top: 0;
     margin-bottom: 0px;
     color: #333;
}

.carousel-title:has(font) font {
    font-weight: 600;
}

.carousel-subtitle {
     font-size: 18px;
     color: #666;
     margin-bottom: 20px;
}
 
/* Carousel container */
.vehicle-carousel-wrapper {
     position: relative;
     padding: 0px;
     margin: 0 -6px; /* Counteract the padding in slides */
}
 
.vehicle-carousel {
     position: relative;
     overflow: hidden;
     padding: 8px 0px;
}
 
/* Add styling for items within the carousel */
.vehicle-carousel .vehicle-item {
     padding: 0 6px !important;
     height: auto;
}
 
 /* Carousel navigation */
.carousel-nav-container {
     position: absolute;
     width: 100%;
     top: 30%;
     left: 0;
     transform: translateY(-50%);
     z-index: 10;
     pointer-events: none;
     display: flex;
     justify-content: space-between;
}
 
.carousel-prev,
.carousel-next {
     width: 32px;
     height: 32px;
     border-radius: 4px;
     background: white;
     border: none;
     color: #000099;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     cursor: pointer;
     pointer-events: auto;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), 0 2px 10px rgba(0, 0, 0, 0.2);
     transition: all 0.3s ease;
     z-index: 20;
}
 
/* Swiper pagination */
.swiper-pagination {
     position: relative;
     bottom: 0;
     margin-top: 10px;
}

.vehicle-image-slider .swiper-pagination {
    z-index: 50;
    position: absolute;
}
 
/* Inner slider - pagination */
.vehicle-image-slider .swiper-pagination-bullet {
     width: 6px;
     height: 6px;
     opacity: .5;
 }
 
.swiper-pagination-bullet {
     width: 8px;
     height: 8px;
     background: #ccc;
     opacity: 1;
}
 
/* Inner slider - bullet active color */
.vehicle-image-slider .swiper-pagination-bullet-active {
     background: #ffffff;
     opacity: 1;
}
 
.swiper-pagination-bullet-active {
     background: #ff7c00;
}
 
/* View all link */
.view-all-container {
     text-align: right;
}

.view-all-container .btn {
    border-radius: 4px;
}
 
.view-all-link {
     display: inline-block;
     color: #333;
     font-weight: 500;
     text-decoration: none;
     transition: all 0.3s ease;
}
 
.view-all-link:hover {
     color: #ff7c00;
}
 
.view-all-link i {
     margin-left: 5px;
}
 
 /* ----------------------------------------
    IMPROVED VEHICLE CARD STYLES
    ---------------------------------------- */
 
 /* Basic structure for vehicle item */
 .vehicle-item {
     position: relative;
 }
 
 /* Vehicle Card Structure */
 .vehicle-card {
     position: relative;
     display: flex;
     flex-direction: column;
     background-color: #fff;
     border: 1px solid rgba(57, 57, 57, 0.125);
     border-radius: 4px;
     overflow: hidden;
     height: 100%;
     transition: all 0.3s ease;
 }
 
 .vehicle-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
 
 .vehicle-card-link {
     display: block;
     text-decoration: none !important;
     color: inherit;
     height: 100%;
 }
 
 /* Card Image Section */
 .card__image {
     position: relative;
     width: 100%;
     overflow: hidden;
 }

 .card__image:not(.EXT_ *):not(.INT_ *) {
    aspect-ratio: 4 / 3;
}
 
 .EXT_, .INT_ {
     width: 100%;
     aspect-ratio: 4 / 3;
 }
 
 /* Vehicle Image Slider (Swiper) */
 .vehicle-image-slider.swiper {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
 }
 
 .vehicle-image-slider .swiper-wrapper,
 .vehicle-image-slider .swiper-slide {
     height: 100%;
 }
 
 /* Individual Vehicle Slides */
 .vehicle-slide {
     width: 100%;
     height: 100%;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
 }
 
 /* Tab-Style Toggle Buttons */
 .image-toggle-buttons {
     position: absolute;
     top: 8px;
     left: 8px;
     z-index: 30;
     display: flex;
     border-radius: 4px;
     overflow: hidden;
     pointer-events: auto;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 }
 
 .toggle-btn {
     padding: 5px 10px;
     font-size: 11px;
     font-weight: 500;
     background: #ffffff;
     border: none;
     cursor: pointer;
     transition: all 0.2s ease;
     position: relative;
     z-index: 31;
     color: #333;
     min-width: 70px;
     text-align: center;
 }
 
 .toggle-btn:first-child {
     border-radius: 4px 0 0 4px;
 }
 
 .toggle-btn:last-child {
     border-radius: 0 4px 4px 0;
 }
 
 .toggle-btn.active {
     background: #ff7c00;
     color: white;
 }
 
 .toggle-btn:not(.active) {
     border-top: 1px solid #ddd;
     border-bottom: 1px solid #ddd;
 }
 
 .toggle-btn[data-type="exterior"]:not(.active) {
     border-left: 1px solid #ddd;
 }
 
 .toggle-btn[data-type="interior"]:not(.active) {
     border-right: 1px solid #ddd;
 }
 
 .toggle-btn:hover:not(.active) {
     background-color: #f0f0f0;
 }
 
 /* Add a small indicator for active tab */
 .toggle-btn.active:after {
     content: "";
     position: absolute;
     bottom: -1px;
     left: 50%;
     transform: translateX(-50%);
     width: 0;
     height: 0;
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
     border-bottom: 6px solid white;
     display: none; /* Hidden by default, can be enabled if desired */
 }
 
 /*.vehicle-image-slider .swiper-pagination {
      bottom: 41px; 
 }*/
 
 /* Tab content transition effect */
 .swiper-slide.interior-slide,
 .swiper-slide.exterior-slide {
     transition: opacity 0.3s ease;
 }
 
 /* Navigation Arrows - Make sure they're visible and interactive */
 .image-slider-prev,
 .image-slider-next {
     width: 24px;
     height: 24px;
     background: rgba(255, 255, 255, 0.8) !important;
     color: #ff7c00 !important;
     border-radius: 4px;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: opacity 0.3s ease;
     cursor: pointer;
     border: solid 1px #ff7c00;
     z-index: 50;
     position: absolute;
 }
 
 .image-slider-prev:after,
 .image-slider-next:after {
     font-size: 12px !important;
 }
 
 .image-slider-prev {
     left: auto;
     top: auto;
     bottom: 8px;
     right: 40px;
 
 }
 
 .image-slider-next {
     right: 8px !important;
     bottom: 8px !important;
     top: auto;
 }
 
 .vehicle-card:hover .image-slider-prev,
 .vehicle-card:hover .image-slider-next {
     opacity: 1;
 }
 
 /* View Count Label - Ensure it's visible */
 .vehicle-item .view-count,
 .card__image .view-count {
     position: absolute;
     bottom: 8px;
     left: 8px !important;
     background: #000099;
     color: #fff;
     padding: 2px 5px;
     border-radius: 2px;
     font-size: 11px;
     z-index: 25;
 }
 
 /* View More Slide */
 .view-more-slide {
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(0, 0, 0, 0.6);
     cursor: pointer;
 }
 
 .view-more-content {
     text-align: center;
     color: white;
     font-size: 16px;
     font-weight: 500;
 }
 
 /* Hidden Slides */
 .hidden-slide {
     display: none !important;
 }
 
 /* Card Body Content */
 .card-body {
     flex: 1;
     padding: 8px;
     display: flex;
     flex-direction: column;
     z-index: 5;
 }
 
 /* Info Section - Preserve original styling */
 .card-body .info {
     flex: 1;
     display: flex;
     flex-direction: column;
 }
 
 .card-body .info h3 {
     margin-top: 0;
     margin-bottom: 10px;
     font-size: 20px;
 }
 
 .card-body .info h3 span {
     display: block;
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 4px;
     color: #333;
 }
 
 .card-body .info h3 span:last-child {
     font-size: 14px;
     font-weight: 400;
     color: #bebebe;
     line-height: 20px;
     max-height: 60px;
     overflow: hidden;
     margin-bottom: 0;
     display: -webkit-box;
     -webkit-line-clamp: 1;
     line-clamp: 1;
     -webkit-box-orient: vertical;
     word-break: break-word;
 }
 
 /* Price Section */
 .card-body .price-line {
     justify-content: space-between;
     flex: 1;
     display: flex;
     flex-direction: row;
     align-items: flex-end;
     margin-top: auto;
 }
 
 .card-body .price {
     color: #333;
 }
 
 .card-body .price div:first-child {
     font-size: 22px;
     font-weight: 700;
     line-height: 28px;
 }
 
 .card-body .price div:last-child {
     font-size: 12px;
     color: #777;
     font-weight: normal;
 }
 
 .card-body .lease {
     flex: 1;
     font-size: 12px;
     line-height: 13px;
     color: #333;
     text-align: right;
 }

.action-buttons {
    display: flex;
    gap: 10px;
}

.card-body .action-buttons .btn {
        border-radius: 4px;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
}

.card-body .btn-view {
    background: #ff7c00;
    color: white;
}
 
.card-body .btn:not(.btn-icon) {
    border-radius: 4px;
    margin-top: 10px;
}
 
 /* Placeholder slide styling */
 .placeholder-slide {
     background-color: #f0f0f0 !important;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
     text-align: center !important;
 }
 
 .placeholder-slide i {
     font-size: 24px;
     color: #999;
     margin-bottom: 10px;
 }
 
 .placeholder-slide p {
     margin-top: 10px;
     color: #666;
 }
 
 /* New Toggle Styles */
 .carousels {
     position: relative;
 }
 
 .carousels.EXT_ .carousel-container-ext {
     display: block;
 }
 
 .carousels.EXT_ .carousel-container-int {
     display: none;
 }
 
 .carousels.INT_ .carousel-container-ext {
     display: none;
 }
 
 .carousels.INT_ .carousel-container-int {
     display: block;
 }
 
 .toggle-container {
     position: absolute;
     top: 8px;
     left: 8px;
     z-index: 30;
     display: flex;
     border-radius: 4px;
     overflow: hidden;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 }
 
 .toggle-view-btn {
     padding: 4px 8px;
     font-size: 10px;
     font-weight: 500;
     background: #ffffff;
     border: none;
     cursor: pointer;
     transition: all 0.2s ease;
     text-align: center;
 }
 
 .toggle-view-btn:first-child {
     border-radius: 4px 0 0 4px;
     border-left: 1px solid #ff7c00;
 }
 
 .toggle-view-btn:last-child {
     border-radius: 0 4px 4px 0;
     border-right: 1px solid #ff7c00;
 }
 
 .toggle-view-btn.active {
     background: #ff7c00;
     color: white;
     border-color: #ff7c00;
 }
 
 .toggle-view-btn:not(.active) {
     border-top: 1px solid #ff7c00;
     border-bottom: 1px solid #ff7c00;
     color: #ff7c00;
 }
 
 .toggle-view-btn:hover:not(.active) {
     background-color: #f0f0f0;
 }
 
 /* Favorites Button Styles */
 .vehicle-wishlist {
     position: absolute;
     top: 8px;
     right: 8px;
     z-index: 30;
     width: 24px;
     height: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: white;
     border-radius: 4px;
     cursor: pointer;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
     transition: all 0.2sease;
     pointer-events: all;
 }
 
 .vehicle-wishlist:hover {
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
 }
 
 .vehicle-wishlist i {
     color: #ccc;
     font-size: 14px;
     transition: all 0.2s ease;
 }
 
 .vehicle-wishlist.active i {
     color: #ff7c00;
 }
 
 .fa-heart {
     transition: transform 0.3s ease;
 }
 
 .fa-heart:hover {
     animation: fa-beat 1s infinite;
 }
 
 /* Improving clickable areas - add visible click zones */
 .toggle-click-zone {
     position: absolute;
     z-index: 25;
     background: transparent;
     pointer-events: all;
 }
 
 .ext-click-zone {
     display: none;
 }
 
 .int-click-zone {
     display: none;
 }
 
 .carousels.EXT_ .ext-click-zone {
     display: block;
 }
 
 .carousels.INT_ .int-click-zone {
     display: block;
 }
 
 /* Ensure toggle buttons capture clicks */
 .toggle-view-btn {
     pointer-events: all; /* Ensure clicks are captured */
 }

/* Favorites as a grid */
.favorites-grid {
    display: grid;
    grid-auto-rows: 1fr 1fr;
    gap: 1rem;
}

/* Favorites as a grid - responsive */
@media (min-width: 768px) {
    .favorites-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Desktop layout */
@media (min-width: 1194px) {
    .favorites-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
 /* Responsive styles */
 @media (max-width: 991px) {    
     .carousel-nav-container {
         width: 100%;
         margin-left: 0;
     }
 }

 @media (max-width: 767px) {    
     .carousel-nav-container {
         top: 30%;
     }

     .carousel-title-section, .mobile-direction {
        align-items: flex-end;
        flex-direction: column;
     }
 }
 
 /* Touch Device Styles */
 @media (hover: none) {
     .image-slider-prev,
     .image-slider-next {
         opacity: 1;
     }
 }