/* Clients — frontend carousel styles. Scoped under .clnt-carousel. */
.clnt-carousel {
    position: relative;
    width: 100%;
    --clnt-arrow: #9aa0a6;
    --clnt-arrow-hover: #1b6e7a;
    --clnt-arrow-size: 20px;
    --clnt-arrow-thickness: 3px;
    --clnt-pag-color: #ccc;
    --clnt-pag-active: #f1c40f;
    --clnt-pag-size: 8px;
}
.clnt-carousel * { box-sizing: border-box; }
.clnt-carousel .swiper { width: 100%; padding: 8px 0; }

/* Item card */
.clnt-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    background: transparent;
    transition: transform .3s ease;
}
.clnt-equal .swiper-slide { height: auto; display: flex; }
.clnt-equal .clnt-item { width: 100%; }

.clnt-img-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.clnt-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    transition: transform .35s ease;
}

/* Video slides */
.clnt-img-wrap.clnt-is-video { display: block; }
.clnt-video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: inherit;
    overflow: hidden;
}
.clnt-video-embed iframe,
.clnt-video-embed video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Content positions */
.clnt-content-top .clnt-item { flex-direction: column-reverse; }
.clnt-content-left .clnt-item { flex-direction: row-reverse; gap: 14px; }
.clnt-content-right .clnt-item { flex-direction: row; gap: 14px; }

.clnt-title { width: 100%; }
.clnt-desc { width: 100%; }
.clnt-section-title { width: 100%; }

/* Hover zoom (images only) */
.clnt-zoom-in .clnt-item:hover .clnt-img { transform: scale(1.08); }
.clnt-zoom-out .clnt-img { transform: scale(1.08); }
.clnt-zoom-out .clnt-item:hover .clnt-img { transform: scale(1); }

/* Center style: the active (centered) card is full size, the rest shrink. */
.clnt-style-center .swiper-slide {
    transform: scale(.82);
    opacity: .5;
    transition: transform .35s ease, opacity .35s ease;
}
.clnt-style-center .swiper-slide-active {
    transform: scale(1);
    opacity: 1;
    z-index: 2;
}

/* ------------------------------------------------------------------ *
 * Navigation arrows — drawn with CSS borders so both the icon size and
 * the line thickness are controllable from the settings.
 * ------------------------------------------------------------------ */
.clnt-nav-btn {
    width: calc(var(--clnt-arrow-size) + 26px);
    height: calc(var(--clnt-arrow-size) + 26px);
    color: var(--clnt-arrow);
}
.clnt-nav-btn::after {
    content: "";
    display: block;
    width: var(--clnt-arrow-size);
    height: var(--clnt-arrow-size);
    border: solid var(--clnt-arrow);
    border-width: 0 var(--clnt-arrow-thickness) var(--clnt-arrow-thickness) 0;
    transition: border-color .2s;
}
.clnt-nav-btn.swiper-button-next::after { transform: rotate(-45deg); margin-left: -0.2em; }
.clnt-nav-btn.swiper-button-prev::after { transform: rotate(135deg); margin-right: -0.2em; }
.clnt-nav-btn:hover::after { border-color: var(--clnt-arrow-hover); }
/* "Double" style: a second chevron for a >> look */
.clnt-arrow-double.swiper-button-next::before,
.clnt-arrow-double.swiper-button-prev::before {
    content: "";
    position: absolute;
    width: var(--clnt-arrow-size);
    height: var(--clnt-arrow-size);
    border: solid var(--clnt-arrow);
    border-width: 0 var(--clnt-arrow-thickness) var(--clnt-arrow-thickness) 0;
}
.clnt-arrow-double.swiper-button-next::before { transform: rotate(-45deg) translate(-0.45em, 0.45em); }
.clnt-arrow-double.swiper-button-prev::before { transform: rotate(135deg) translate(-0.45em, 0.45em); }

/* Nav positions */
.clnt-nav-vertical-outer .swiper-button-prev { left: -6px; }
.clnt-nav-vertical-outer .swiper-button-next { right: -6px; }
.clnt-nav-bottom-center .swiper-button-prev,
.clnt-nav-bottom-center .swiper-button-next { top: auto; bottom: 0; transform: none; }
.clnt-nav-bottom-center .swiper-button-prev { left: 42%; }
.clnt-nav-bottom-center .swiper-button-next { right: 42%; }

.clnt-nav-hover .clnt-nav-btn { opacity: 0; transition: opacity .2s; }
.clnt-nav-hover:hover .clnt-nav-btn { opacity: 1; }

/* Pagination — centered horizontal row (works for static "outside" placement). */
.swiper-pagination.clnt-pag {
    position: relative;
    left: auto;
    margin-top: 16px;
    width: 100%;
    text-align: center;
    line-height: 0;
}
.clnt-pag.swiper-pagination-bullets-dynamic {
    position: relative;
    left: auto;
    transform: none;
    width: auto;
    display: inline-block;
    overflow: visible;
    white-space: nowrap;
}
.clnt-pag .swiper-pagination-bullet {
    display: inline-block;
    vertical-align: middle;
    width: var(--clnt-pag-size);
    height: var(--clnt-pag-size);
    margin: 0 4px;
    background: var(--clnt-pag-color);
    opacity: .6;
}
.clnt-pag .swiper-pagination-bullet-active { background: var(--clnt-pag-active); opacity: 1; }
.clnt-pag .clnt-num-bullet {
    width: calc(var(--clnt-pag-size) + 14px);
    height: calc(var(--clnt-pag-size) + 14px);
    line-height: calc(var(--clnt-pag-size) + 14px);
    border-radius: 50%;
    font-size: 11px; text-align: center; color: #555;
}
.clnt-pag .clnt-num-bullet.swiper-pagination-bullet-active { color: #fff; }

/* Image protection */
.clnt-protect .clnt-img { pointer-events: none; -webkit-user-drag: none; user-select: none; }

@media (max-width: 767px) {
    .clnt-nav-hide-mobile .clnt-nav-btn { display: none; }
    .clnt-pag-hide-mobile .clnt-pag { display: none; }
}

.clnt-empty { color: #888; font-style: italic; text-align: center; }