/*
 * Plugin: Rolex Custom Components
 * Author: Rida Labbar
 * Year: 2026
 * File: components\rolex-keep-exploring\assets\keep-exploring.css
 */

.rcc-keep-exploring {
    font-family: var(--rcc-font);
    color: #2c2c2c;
    /* padding: 0 0 60px; */
    background: #ffffff;
}

.rcc-keep-exploring .rcc-keep-exploring__slider {
    position: relative;
    padding: 0 8vw;
}

.rcc-keep-exploring .rcc-keep-exploring__viewport {
    overflow: hidden;
    padding: 0;
}

.rcc-keep-exploring .rcc-keep-exploring__track {
    --rcc-gap: 7px;
    --rcc-slides-per-view: 2;
    display: flex;
    gap: var(--rcc-gap);
    transition: transform 0.4s ease;
    will-change: transform;
}

.rcc-keep-exploring .rcc-keep-exploring__card {
    flex: 0 0 calc((100% - (var(--rcc-gap) * (var(--rcc-slides-per-view) - 1))) / var(--rcc-slides-per-view));
}

.rcc-keep-exploring .rcc-keep-exploring__card a,
.rcc-keep-exploring .rcc-keep-exploring__card .rcc-keep-exploring__link {
    color: inherit;
    text-decoration: none;
    display: block;
    font-family: var(--rcc-font) !important;
}

.rcc-keep-exploring .rcc-keep-exploring__image {
    width: 100%;
    background: #f2f2f2;
    position: relative;
    overflow: hidden;
}

.rcc-keep-exploring .rcc-keep-exploring__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.rcc-keep-exploring .rcc-keep-exploring__image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../../../assets/img/rolex-logo-footer.svg") center center / 120px auto no-repeat;
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}

.rcc-keep-exploring .rcc-keep-exploring__card h3 {
    margin: 0;
    font-weight: 600;
    font-family: var(--rcc-font) !important;
    line-height: 1.1 !important;
    padding-inline-end: 20px;
}

.rcc-keep-exploring .rcc-keep-exploring__card.is-active h3,
.rcc-keep-exploring .rcc-keep-exploring__link.is-active {
    color: #127749;
}

.rcc-keep-exploring .rcc-keep-exploring__link.is-active {
    cursor: default;
    pointer-events: none;
}

.rcc-keep-exploring .rcc-keep-exploring__pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
    padding-bottom: 16px;
    position: relative;
    bottom: -20px;
}

@media (max-width: 767px) {
    .rcc-keep-exploring .rcc-keep-exploring__pagination {
        padding-bottom: 0;
        bottom: 0;
    }
}

.rcc-keep-exploring .rcc-keep-exploring__pagination .swiper-pagination-bullet {
    width: 24px;
    height: 4px;
    margin: 0;
    border-radius: 0.25rem;
    background: #452c1e;
    opacity: 1;
    transition: width 0.2s ease, opacity 0.2s ease;
    border: 0;
    padding: 0;
    cursor: pointer;
    box-shadow: none !important;
}

.rcc-keep-exploring .rcc-keep-exploring__pagination .swiper-pagination-bullet-active {
    width: 50px;
    opacity: 1;
}

.rcc-keep-exploring .rcc-keep-exploring__nav {
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    z-index: 5;
    display: var(--scs-arrows-display-desktop, flex);
}

@media (max-width: 767px) {
    .rcc-keep-exploring .rcc-keep-exploring__nav {
        display: none;
    }
}

.rcc-keep-exploring .rcc-keep-exploring__nav.is-hidden {
    display: none;
}

.rcc-keep-exploring .rcc-keep-exploring__nav button {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    background: #d4d4d44d;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rcc-keep-exploring .rcc-keep-exploring__nav button:hover,
.rcc-keep-exploring .rcc-keep-exploring__nav button:focus,
.rcc-keep-exploring .rcc-keep-exploring__nav button:active {
    background: #f3f3f380;
    box-shadow: none !important;
}

.rcc-keep-exploring .rcc-keep-exploring__nav button svg {
    display: block;
    fill: #452c1e;
}

.rcc-keep-exploring .rcc-keep-exploring__prev {
    left: 55px;
}

.rcc-keep-exploring .rcc-keep-exploring__next {
    right: 55px;
}

.rcc-keep-exploring .rcc-keep-exploring__prev svg {
    transform: rotate(180deg);
}

@media (max-width: 1023px) {
    .rcc-keep-exploring .rcc-keep-exploring__next {
        right: 10px;
    }

    .rcc-keep-exploring .rcc-keep-exploring__prev {
        left: 10px;
    }
}

.rcc-keep-exploring[dir="rtl"] .rcc-keep-exploring__prev {
    right: 55px;
    left: auto;
}

.rcc-keep-exploring[dir="rtl"] .rcc-keep-exploring__next {
    left: 55px;
    right: auto;
}

.rcc-keep-exploring[dir="rtl"] .rcc-keep-exploring__nav button svg {
    transform: rotate(180deg);
}

.rcc-keep-exploring[dir="rtl"] .rcc-keep-exploring__prev svg {
    transform: rotate(0deg) !important;
}

@media (max-width: 1023px) {
    .rcc-keep-exploring[dir="rtl"] .rcc-keep-exploring__prev {
        right: 10px;
    }

    .rcc-keep-exploring[dir="rtl"] .rcc-keep-exploring__next {
        left: 10px;
    }
}

@media (min-width: 768px) {
    .rcc-keep-exploring .rcc-keep-exploring__track {
        --rcc-slides-per-view: 3;
    }
}

@media (min-width: 1024px) {
    .rcc-keep-exploring .rcc-keep-exploring__track {
        --rcc-slides-per-view: 4;
    }
}