/* ============================================================
 *  Candelea Carousel – Frontend Styles
 *  All configurable values come as CSS custom properties
 *  set inline on .candelea-carousel-wrapper via PHP.
 * ============================================================ */

/* ── Section / Wrapper ──────────────────────────────────────── */

.candelea-carousel-section {
    position: relative;
    width: 100%;
}

.candelea-carousel-section.cdl-fullwidth {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.candelea-carousel-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: var(--cdl-border-radius, 0);
}

/* ── Swiper overrides ───────────────────────────────────────── */

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

.candelea-carousel .swiper-slide {
    position: relative;
    overflow: hidden;
}

/* ── Image ──────────────────────────────────────────────────── */

.candelea-carousel__img {
    display: block;
    width: 100%;
    max-height: var(--cdl-max-height, none);
    object-fit: cover;
    object-position: center;
}

/* ── Overlay ────────────────────────────────────────────────── */

.candelea-carousel__overlay {
    position: absolute;
    inset: 0;
    background: var(--cdl-overlay-color, #000);
    opacity: var(--cdl-overlay-opacity, 0.3);
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.3s ease;
}

/* ── Content wrapper (positioned on top of slide) ───────────── */

.candelea-carousel__content {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: var(--cdl-h-align, center);
    align-items: var(--cdl-v-align, center);
    padding: var(--cdl-content-pad, 30px);
    z-index: 2;
    pointer-events: none;
    text-align: center;
}

.candelea-carousel__content[style*="flex-start"]:not([style*="align-items:flex-start"]) {
    text-align: left;
}
.candelea-carousel__content[style*="justify-content:flex-end"] {
    text-align: right;
}

.candelea-carousel__inner {
    max-width: var(--cdl-content-maxw, 800px);
    pointer-events: auto;
}

/* ── Typography ─────────────────────────────────────────────── */

.candelea-carousel__title {
    margin: 0 0 0.4em;
    font-size: var(--cdl-title-size, 42px);
    font-weight: var(--cdl-title-weight, 700);
    color: var(--cdl-title-color, #fff);
    text-transform: var(--cdl-title-transform, none);
    line-height: 1.15;
}

.candelea-carousel__title.cdl-text-shadow {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.candelea-carousel__desc {
    margin: 0 0 1em;
    font-size: var(--cdl-desc-size, 18px);
    color: var(--cdl-desc-color, #fff);
    line-height: 1.5;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.candelea-carousel__desc p:last-child {
    margin-bottom: 0;
}

/* ── Button ─────────────────────────────────────────────────── */

.candelea-carousel__btn {
    display: inline-block;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid var(--cdl-btn-bg, #007aff);
    transition: all 0.25s ease;
    letter-spacing: 0.02em;
}

/* Sizes */
.candelea-carousel__btn.cdl-btn--sm {
    padding: 8px 20px;
    font-size: 13px;
}
.candelea-carousel__btn.cdl-btn--md {
    padding: 12px 32px;
    font-size: 15px;
}
.candelea-carousel__btn.cdl-btn--lg {
    padding: 16px 44px;
    font-size: 17px;
}

/* Filled (default) */
.candelea-carousel__btn.cdl-btn--filled {
    background: var(--cdl-btn-bg, #007aff);
    color: var(--cdl-btn-color, #fff);
    border-radius: var(--cdl-btn-radius, 4px);
}
.candelea-carousel__btn.cdl-btn--filled:hover {
    background: var(--cdl-btn-hover-bg, #0056b3);
    border-color: var(--cdl-btn-hover-bg, #0056b3);
}

/* Outline */
.candelea-carousel__btn.cdl-btn--outline {
    background: transparent;
    color: var(--cdl-btn-bg, #007aff);
    border-radius: var(--cdl-btn-radius, 4px);
}
.candelea-carousel__btn.cdl-btn--outline:hover {
    background: var(--cdl-btn-bg, #007aff);
    color: var(--cdl-btn-color, #fff);
}

/* Pill */
.candelea-carousel__btn.cdl-btn--pill {
    background: var(--cdl-btn-bg, #007aff);
    color: var(--cdl-btn-color, #fff);
    border-radius: 999px;
}
.candelea-carousel__btn.cdl-btn--pill:hover {
    background: var(--cdl-btn-hover-bg, #0056b3);
    border-color: var(--cdl-btn-hover-bg, #0056b3);
}

/* Ghost */
.candelea-carousel__btn.cdl-btn--ghost {
    background: transparent;
    color: var(--cdl-btn-color, #fff);
    border-color: var(--cdl-btn-color, #fff);
    border-radius: var(--cdl-btn-radius, 4px);
}
.candelea-carousel__btn.cdl-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ── Navigation arrows ──────────────────────────────────────── */

.candelea-carousel .swiper-button-prev,
.candelea-carousel .swiper-button-next {
    width: var(--cdl-arrow-size, 44px);
    height: var(--cdl-arrow-size, 44px);
    background: var(--cdl-arrow-bg, rgba(0, 0, 0, 0.3));
    border-radius: var(--cdl-arrow-radius, 50%);
    transition: background 0.25s ease, transform 0.2s ease;
}

.candelea-carousel .swiper-button-prev:hover,
.candelea-carousel .swiper-button-next:hover {
    background: rgba(0, 0, 0, 0.55);
    transform: scale(1.08);
}

.candelea-carousel .swiper-button-prev::after,
.candelea-carousel .swiper-button-next::after {
    font-size: calc(var(--cdl-arrow-size, 44px) * 0.35);
    color: var(--cdl-arrow-color, #fff);
    font-weight: 700;
}

/* ── Pagination ─────────────────────────────────────────────── */

.candelea-carousel .swiper-pagination-bullet {
    width: var(--cdl-pag-size, 10px);
    height: var(--cdl-pag-size, 10px);
    background: var(--cdl-pag-color, rgba(255, 255, 255, 0.5));
    opacity: 1;
    transition: background 0.3s ease, transform 0.2s ease;
}

.candelea-carousel .swiper-pagination-bullet-active {
    background: var(--cdl-pag-active, #fff);
    transform: scale(1.25);
}

.candelea-carousel .swiper-pagination-fraction {
    color: var(--cdl-pag-active, #fff);
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.candelea-carousel .swiper-pagination-progressbar {
    background: var(--cdl-pag-color, rgba(255, 255, 255, 0.25));
}

.candelea-carousel .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--cdl-pag-active, #fff);
}

/* ── Animations (slide entry) ───────────────────────────────── */

.candelea-carousel .swiper-slide-active .candelea-carousel__title {
    animation: cdlFadeUp 0.7s 0.1s both ease-out;
}

.candelea-carousel .swiper-slide-active .candelea-carousel__desc {
    animation: cdlFadeUp 0.7s 0.25s both ease-out;
}

.candelea-carousel .swiper-slide-active .candelea-carousel__btn {
    animation: cdlFadeUp 0.7s 0.4s both ease-out;
}

@keyframes cdlFadeUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    .candelea-carousel-section.cdl-hide-mobile {
        display: none !important;
    }

    .candelea-carousel__content.cdl-hide-caption-mob {
        display: none !important;
    }

    .candelea-carousel__title {
        font-size: var(--cdl-mob-title-size, 24px) !important;
    }

    .candelea-carousel__desc {
        font-size: var(--cdl-mob-desc-size, 14px) !important;
    }

    .candelea-carousel__content {
        padding: 15px;
    }

    .candelea-carousel .swiper-button-prev,
    .candelea-carousel .swiper-button-next {
        width: 34px;
        height: 34px;
    }

    .candelea-carousel .swiper-button-prev::after,
    .candelea-carousel .swiper-button-next::after {
        font-size: 12px;
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .candelea-carousel__title {
        font-size: calc(var(--cdl-title-size, 42px) * 0.75);
    }

    .candelea-carousel__desc {
        font-size: calc(var(--cdl-desc-size, 18px) * 0.9);
    }
}