/* Site-specific overrides (evarentacar). Loaded after master.css. */

/* Car model thumbnail carousel arrows.
   master.css hides them below 1025px and, on desktop, renders them as a
   white circle with a light icon 30px outside the container — invisible on
   the white page background and clipped at narrow viewports. Show them on
   every screen size, inside the container edges, in the brand gradient so
   visitors realise the model list scrolls horizontally. Side padding on the
   container reserves a lane for the arrows so they never sit on top of the
   first/last model button. */
.horizontal_car_tab_gallery-thumbs--container {
    padding: 0 3rem;
}

.horizontal_car_tab_button {
    display: flex;
    align-items: center;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.375rem;
    height: 2.375rem;
    background: linear-gradient(30deg, #ff4c30 0, #ff6830 100%);
    box-shadow: 0 5px 15px rgba(255, 83, 48, .35);
    border-radius: 50%;
    cursor: pointer;
    font-size: .9375rem;
    color: #fff;
    z-index: 2;
    transition: all .4s ease;
}

.horizontal_car_tab_button > i {
    width: 100%;
}

.horizontal_car_tab_button.swiper-button-disabled {
    opacity: .25;
    pointer-events: none;
}

.horizontal_car_tab_button:not(.swiper-button-disabled):hover {
    color: #fff;
    filter: brightness(1.1);
}

.horizontal_car_tab_style .car-button-next,
.horizontal_car_tab_style .swiper-container-rtl .car-button-prev {
    right: 0;
    left: auto;
}

.horizontal_car_tab_style .car-button-prev,
.horizontal_car_tab_style .swiper-container-rtl .car-button-next {
    left: 0;
    right: auto;
}

@media (max-width: 640px) {
    .horizontal_car_tab_button {
        width: 2rem;
        height: 2rem;
        font-size: .8125rem;
    }
}