/* ============================================================
   Duekal Carousel Builder — Frontend Styles
   ============================================================ */

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

.dc-swiper {
    overflow: hidden;
    width: 100%;
}

.dc-slide {
    height: auto;
}

/* ── Navigation arrows ─────────────────────────────────────── */
.dc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #4B206D;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(75, 32, 109, .35);
    transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
}

.dc-arrow:hover {
    background: #5e2a88;
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 6px 20px rgba(75, 32, 109, .45);
}

.dc-arrow.swiper-button-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.dc-arrow--prev {
    left: -22px;
}

.dc-arrow--next {
    right: -22px;
}

/* ── Pagination dots ───────────────────────────────────────── */
.dc-pagination {
    margin-top: 20px;
    text-align: center;
}

.dc-pagination .swiper-pagination-bullet {
    background: #c9a96e;
    opacity: .4;
    width: 8px;
    height: 8px;
    transition: opacity 0.2s, transform 0.2s;
}

.dc-pagination .swiper-pagination-bullet-active {
    background: #4B206D;
    opacity: 1;
    transform: scale(1.3);
}