/* ─── Zwibits ScrollNews Carousel ──────────────────────────────────────────── */

.zsnc-carousel-wrapper {
    position: relative;
    width: 100%;
}

/* ─── Swiper overrides ───────────────────────────────────────────────────── */
.zsnc-swiper {
    width: 100%;
    padding-bottom: 40px; /* room for dots */
}

/* ─── Slide ──────────────────────────────────────────────────────────────── */
.zsnc-slide-inner {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;           /* overridden by Elementor control */
    background: #f1f5f9;
    line-height: 0;               /* kill inline-block gap under img */
}

.zsnc-slide-inner a {
    display: block;
    line-height: 0;
}

.zsnc-slide-img {
    width: 100%;
    height: 240px;                /* overridden by Elementor control */
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ─── Hover zoom ─────────────────────────────────────────────────────────── */
.zsnc-hover-zoom .zsnc-slide-inner:hover .zsnc-slide-img {
    transform: scale(1.06);
}

/* ─── Overlay ────────────────────────────────────────────────────────────── */
.zsnc-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);  /* overridden by Elementor control */
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.zsnc-slide-inner:hover .zsnc-overlay {
    opacity: 1;
}

/* ─── Navigation Arrows ──────────────────────────────────────────────────── */
.zsnc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(calc(-50% - 20px)); /* -20px offsets the dots padding */
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    padding: 0;
    line-height: 0;
}

.zsnc-arrow:hover {
    background: #f8fafc;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.zsnc-arrow svg {
    width: 20px;
    height: 20px;
    fill: #0f172a;
    pointer-events: none;
    display: block;
}

.zsnc-prev {
    left: -22px;
}

.zsnc-next {
    right: -22px;
}

.zsnc-arrow.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* ─── Pagination Dots ────────────────────────────────────────────────────── */
.zsnc-swiper .swiper-pagination {
    bottom: 0;
}

.zsnc-swiper .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid #334155;
    opacity: 0.4;
    transition: opacity 0.2s ease, transform 0.2s ease;
    margin: 0 4px !important;
}

.zsnc-swiper .swiper-pagination-bullet-active {
    background: #334155;
    opacity: 1;
    transform: scale(1.3);
}

/* ─── Empty notice (editor only) ─────────────────────────────────────────── */
.zsnc-empty-notice {
    padding: 24px;
    background: #fef9c3;
    border: 1px dashed #eab308;
    border-radius: 6px;
    text-align: center;
    color: #78350f;
    font-size: 14px;
}

/* ─── Responsive arrow nudge ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .zsnc-prev { left: 0; }
    .zsnc-next { right: 0; }
    .zsnc-arrow { width: 36px; height: 36px; }
    .zsnc-arrow svg { width: 16px; height: 16px; }
}