/* ── Shared Slider Styles ── */
.kolam-slider {
    font-family: 'Poppins', sans-serif;
}

.kolam-slider.card-slider .swiper-pagination.swiper-pagination-bullets {
    position: relative;
    margin-top: 10px;
    bottom: 0;
}

.kolam-slider.card-slider .swiper-pagination-bullets .swiper-pagination-bullet-active {
    background: #121212;
}

/* ── Mode: Auto & Full (Locked State) ── */
.kolam-slider[data-mode="auto"].is-locked .swiper-wrapper,
.kolam-slider[data-mode="full-left"].is-locked .swiper-wrapper,
.kolam-slider[data-mode="full-center"].is-locked .swiper-wrapper {
    justify-content: space-between;
}

.kolam-slider[data-mode="auto"].is-locked .swiper-slide,
.kolam-slider[data-mode="full-left"].is-locked .swiper-slide,
.kolam-slider[data-mode="full-center"].is-locked .swiper-slide {
    margin-right: 0 !important;
}

/* ── Mode: Full (Unlocked State) ── */
.kolam-slider[data-mode="full-left"]:not(.is-locked),
.kolam-slider[data-mode="full-center"]:not(.is-locked) {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    overflow-x: visible;
}

.kolam-slider[data-mode="full-left"]:not(.is-locked) .swiper,
.kolam-slider[data-mode="full-center"]:not(.is-locked) .swiper {
    padding-left: 10px;
    padding-right: 10px;
}

/* ── Variant: Image Slider ── */
.kolam-slider.image-slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
}

.kolam-slider.image-slider .kolam-slider__img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ── Variant: Card Slider (Base Styles) ── */
.kolam-slider.card-slider .kolam-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.kolam-slider.card-slider .kolam-card__image {
    position: relative;
    overflow: hidden;
}

.kolam-slider.card-slider .kolam-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kolam-slider.card-slider .kolam-card__content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.kolam-slider.card-slider .kolam-card__title {
    margin: 0 0 0.5rem;
    font-weight: 600;
}

.kolam-slider.card-slider .kolam-card__text {
    margin-bottom: 1rem;
    font-size: 14px;
    font-weight: 400;
}

.kolam-slider.card-slider .kolam-card__button {
    display: inline-block;
    width: 189px;
    padding: 10px 0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 5px;
}

/* ── Variant: Card Slider – Simple Card ── */
.kolam-slider.card-slider.simple-card .swiper-slide {
    width: auto;
}

.kolam-slider.card-slider.simple-card .kolam-card {
    flex-direction: row;
    width: 322px;
    background-color: #F9F9F9;
    border-radius: 5px;
    overflow: hidden;
}

.kolam-slider.card-slider.simple-card .kolam-card__image {
    max-width: 96px;
}

.kolam-slider.card-slider.simple-card .kolam-card__content {
    padding: 1rem;
    padding-right: 9px;
}

.kolam-slider.card-slider.simple-card .kolam-card__title {
    font-size: 14px;
    color: #175981;
}

.kolam-slider.card-slider.simple-card .kolam-card__text {
    color: #404852;
}

.kolam-slider.card-slider.simple-card .kolam-card__button {
    color: #006ADC;
    border: 1px solid #006ADC;
}

/* ── Variant: Card Slider – Navbar Card ── */
.kolam-slider.card-slider.navbar-card .kolam-card {
    padding: 0 8px;
    display: flex;
    flex-direction: column;
    color: #ffffff;
}

.kolam-slider.card-slider.navbar-card .kolam-card__title {
    font-size: 16px;
}

.kolam-slider.card-slider.navbar-card .kolam-card__button {
    color: #ffffff;
    border: 1px solid #ffffff;
}

.kolam-slider.card-slider.navbar-card .kolam-card__image {
    display: flex;
    margin-top: 32px;
    border-radius: 5px;
}

/* ── Navbar Structure & Styles ── */
.kolam-slider__navbar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
    position: relative;
}

.kolam-slider__nav-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.kolam-slider__nav-title {
    flex: 1;
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
}

.kolam-slider__nav-title .swiper-wrapper {
    transition-timing-function: ease-out;
}

.kolam-slider__nav-title .swiper-slide {
    width: 100%;
    text-align: center;
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.kolam-slider__nav-title .swiper-slide-active,
.kolam-slider__nav-title .swiper-slide-duplicate-active {
    opacity: 1;
}

.kolam-slider__nav-title .swiper-slide-prev,
.kolam-slider__nav-title .swiper-slide-next {
    opacity: 0;
}

/* ── Navbar-Card: Swiper Buttons & Scrollbar ── */
.kolam-slider.card-slider.navbar-card .swiper-button-prev,
.kolam-slider.card-slider.navbar-card .swiper-button-next {
    position: static;
    margin: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 50%;
    color: #ffffff;
}

.kolam-slider.card-slider.navbar-card .swiper-button-prev svg,
.kolam-slider.card-slider.navbar-card .swiper-button-next svg {
    width: 16px;
    height: 16px;
    fill: #ffffff;
}

.kolam-slider.card-slider.navbar-card .swiper-button-prev:not(.swiper-button-disabled),
.kolam-slider.card-slider.navbar-card .swiper-button-next:not(.swiper-button-disabled) {
    background-color: #0083FF;
}

.kolam-slider.card-slider.navbar-card .swiper-button-disabled {
    opacity: 1;
    background-color: #ffffff;
}

.kolam-slider.card-slider.navbar-card .swiper-button-disabled svg {
    fill: #939393;
}

.kolam-slider.card-slider.navbar-card .swiper-button-prev:after,
.kolam-slider.card-slider.navbar-card .swiper-button-next:after {
    display: none;
}

.kolam-slider.card-slider.navbar-card .swiper-scrollbar {
    position: static;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.kolam-slider.card-slider.navbar-card .swiper-scrollbar-drag {
    background: #0083FF;
    border-radius: 2px;
}

/* ── Variant: Card Slider – Portait Card ── */
.kolam-slider.card-slider.portrait-card .swiper-slide {
    width: auto;
}

.kolam-slider.card-slider.portrait-card .kolam-card {
    width: 170px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.kolam-slider.card-slider.portrait-card .kolam-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: center;
}

.kolam-slider.card-slider.portrait-card .kolam-card__title {
    font-size: 14px;
    margin-bottom: 0;
}

.kolam-slider.card-slider.portrait-card .kolam-card__text {
    font-weight: 300;
    font-size: 12px;
    margin-bottom: 0;
}

.kolam-slider.card-slider.portrait-card .kolam-card__image img {
    display: flex;
}

/* ── Variant: Card Slider – Review Card ── */

.kolam-slider.card-slider.review-card {
    margin-left: -10px;
    margin-right: -10px;
}

.kolam-slider.card-slider.review-card .swiper {
    padding-left: 10px;
    padding-right: 10px;
}

.kolam-slider.card-slider.review-card .kolam-card__image {
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0% 100%);
    left: -10px;
    display: flex;
}

.kolam-slider.card-slider.review-card .kolam-card__content {
    position: relative;
    top: -26px;
    margin-bottom: -26px;
    padding: 0 1rem;
    color: #ffffff;
    display: flex;
    flex-direction: column-reverse;
}

.kolam-slider.card-slider.review-card .kolam-card__title {
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 0px;
}

.kolam-slider.card-slider.review-card .kolam-card__extra-title {
    font-weight: 400;
    font-size: 8px;
    margin-bottom: 0;
    color: #B9B9B9;
}

.kolam-slider.card-slider.review-card .kolam-card__text {
    font-weight: 300;
    font-size: 12px;
    margin-bottom: 10px;
    color: #DEDEDE;
}

.kolam-slider.card-slider.review-card .kolam-card__quotes {
    position: relative;
    display: flex;
    width: fit-content;
    gap: 10px;
    margin-bottom: 12px;
}