/**
 * Navigation Button Corner Positions
 * Adds top-left, top-right, bottom-left, bottom-right positions
 * for the carousel prev/next buttons.
 */

/* ─── Vertical slide direction ───────────────────────────────── */
/* When vertical mode is active, the swiper container needs an explicit height.
   The default fallback is 400px; users can override with custom CSS. */
.dica_divi_carousel .swiper-container-vertical {
    height: 400px;
}

/* Restack navigation buttons vertically */
.dica_divi_carousel .swiper-container-vertical ~ .swiper-buttton-container {
    flex-direction: column;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    left: auto;
    justify-content: space-between;
    align-items: center;
    z-index: 9;
}

/* ─── Shared: corner container base ─────────────────────────── */
.desktop_top-left  .swiper-buttton-container,
.desktop_top-right .swiper-buttton-container,
.desktop_bottom-left  .swiper-buttton-container,
.desktop_bottom-right .swiper-buttton-container {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    pointer-events: none;
    z-index: 9;
}

/* ─── TOP corners ────────────────────────────────────────────── */
.desktop_top-left .swiper-buttton-container,
.desktop_top-right .swiper-buttton-container {
    top: 0;
    bottom: auto;
    order: -1;
}

/* Top-left: both buttons huddle to the left */
.desktop_top-left .swiper-buttton-container {
    justify-content: flex-start;
}

/* Top-right: both buttons huddle to the right */
.desktop_top-right .swiper-buttton-container {
    justify-content: flex-end;
}

/* ─── BOTTOM corners ─────────────────────────────────────────── */
.desktop_bottom-left .swiper-buttton-container,
.desktop_bottom-right .swiper-buttton-container {
    top: auto;
    bottom: 0;
}

.desktop_bottom-left .swiper-buttton-container {
    justify-content: flex-start;
}

.desktop_bottom-right .swiper-buttton-container {
    justify-content: flex-end;
}

/* ─── Tablet ─────────────────────────────────────────────────── */
@media (max-width: 980px) and (min-width: 768px) {
    .tablet_top-left  .swiper-buttton-container,
    .tablet_top-right .swiper-buttton-container,
    .tablet_bottom-left  .swiper-buttton-container,
    .tablet_bottom-right .swiper-buttton-container {
        position: absolute;
        left: 0;
        right: 0;
        display: flex;
        pointer-events: none;
        z-index: 9;
    }

    .tablet_top-left .swiper-buttton-container,
    .tablet_top-right .swiper-buttton-container {
        top: 0;
        bottom: auto;
        order: -1;
    }

    .tablet_top-left .swiper-buttton-container  { justify-content: flex-start; }
    .tablet_top-right .swiper-buttton-container { justify-content: flex-end;   }

    .tablet_bottom-left .swiper-buttton-container,
    .tablet_bottom-right .swiper-buttton-container {
        top: auto;
        bottom: 0;
    }

    .tablet_bottom-left .swiper-buttton-container  { justify-content: flex-start; }
    .tablet_bottom-right .swiper-buttton-container { justify-content: flex-end;   }
}

/* ─── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .mobile_top-left  .swiper-buttton-container,
    .mobile_top-right .swiper-buttton-container,
    .mobile_bottom-left  .swiper-buttton-container,
    .mobile_bottom-right .swiper-buttton-container {
        position: absolute;
        left: 0;
        right: 0;
        display: flex;
        pointer-events: none;
        z-index: 9;
    }

    .mobile_top-left .swiper-buttton-container,
    .mobile_top-right .swiper-buttton-container {
        top: 0;
        bottom: auto;
        order: -1;
    }

    .mobile_top-left .swiper-buttton-container  { justify-content: flex-start; }
    .mobile_top-right .swiper-buttton-container { justify-content: flex-end;   }

    .mobile_bottom-left .swiper-buttton-container,
    .mobile_bottom-right .swiper-buttton-container {
        top: auto;
        bottom: 0;
    }

    .mobile_bottom-left .swiper-buttton-container  { justify-content: flex-start; }
    .mobile_bottom-right .swiper-buttton-container { justify-content: flex-end;   }
}