/* CSS-only Image Slider for Car Details */

.car-details .all {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

.car-details input[name="respond"] {
    display: none;
}

.car-details article#slider {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.car-details article#slider input[name="slider"] {
    display: none;
}

.car-details #slides {
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 500px;
    background: #f8f9fa;
}

.car-details #overflow {
    width: 100%;
    overflow: hidden;
    height: 500px;
}

.car-details #slides .image {
    display: flex;
    transition: transform 0.5s ease;
    will-change: transform;
    height: 500px;
    width: 100%;
}

.car-details #slides .image article {
    flex: 0 0 100%;
    min-width: 100%;
    max-width: 100%;
    height: 500px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
}

.car-details #slides .image article img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 500px !important;
    display: block !important;
    object-fit: contain !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

.car-details #slides .image article {
    pointer-events: none !important;
    user-select: none !important;
}

/* Control labels (clickable dots at bottom) */
.car-details #controls {
    text-align: center;
    padding: 20px 0;
    position: relative;
    pointer-events: auto !important;
}

.car-details #controls label {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ccc;
    margin: 0 6px;
    cursor: pointer !important;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    pointer-events: auto !important;
}

.car-details #controls label:hover {
    background: #999;
    transform: scale(1.1);
}

/* Active indicators (hidden but needed for structure) */
.car-details #active {
    display: none;
}

/* Slider navigation based on checked radio buttons */
.car-details article#slider input#switch1:checked ~ #slides .image {
    transform: translateX(0);
}

.car-details article#slider input#switch2:checked ~ #slides .image {
    transform: translateX(-100%);
}

.car-details article#slider input#switch3:checked ~ #slides .image {
    transform: translateX(-200%);
}

.car-details article#slider input#switch4:checked ~ #slides .image {
    transform: translateX(-300%);
}

.car-details article#slider input#switch5:checked ~ #slides .image {
    transform: translateX(-400%);
}

.car-details article#slider input#switch6:checked ~ #slides .image {
    transform: translateX(-500%);
}

.car-details article#slider input#switch7:checked ~ #slides .image {
    transform: translateX(-600%);
}

.car-details article#slider input#switch8:checked ~ #slides .image {
    transform: translateX(-700%);
}

.car-details article#slider input#switch9:checked ~ #slides .image {
    transform: translateX(-800%);
}

.car-details article#slider input#switch10:checked ~ #slides .image {
    transform: translateX(-900%);
}

/* Active dot styling */
.car-details article#slider input#switch1:checked ~ #controls label:nth-child(1),
.car-details article#slider input#switch2:checked ~ #controls label:nth-child(2),
.car-details article#slider input#switch3:checked ~ #controls label:nth-child(3),
.car-details article#slider input#switch4:checked ~ #controls label:nth-child(4),
.car-details article#slider input#switch5:checked ~ #controls label:nth-child(5),
.car-details article#slider input#switch6:checked ~ #controls label:nth-child(6),
.car-details article#slider input#switch7:checked ~ #controls label:nth-child(7),
.car-details article#slider input#switch8:checked ~ #controls label:nth-child(8),
.car-details article#slider input#switch9:checked ~ #controls label:nth-child(9),
.car-details article#slider input#switch10:checked ~ #controls label:nth-child(10) {
    background: #F96D00;
    border-color: #F96D00;
    transform: scale(1.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .car-details #slides,
    .car-details #overflow,
    .car-details #slides .image,
    .car-details #slides .image article {
        height: 300px;
    }

    .car-details #slides .image article img {
        max-height: 300px !important;
    }

    .car-details #controls label {
        width: 12px;
        height: 12px;
        margin: 0 4px;
    }
}