/**
 * Loop Carousel Vertical - Estilos
 * 
 * Estilos específicos para el widget Loop Carousel Vertical
 */

/* ============================================
   BASE - Contenedor Vertical
   ============================================ */
.elementor-widget-loop-carousel-vertical .elementor-loop-container {
    overflow: hidden;
    height: 500px; /* Altura por defecto, se sobrescribe por el control o JS */
}

.elementor-widget-loop-carousel-vertical .elementor-loop-container.swiper {
    width: 100%;
}

/* Cuando el modo de altura del contenedor es auto, permitir que JS lo controle */
.elementor-widget-loop-carousel-vertical[data-carousel-height-auto="true"] .elementor-loop-container {
    height: auto !important;
}

.elementor-widget-loop-carousel-vertical .swiper-vertical {
    height: 100%;
}

.elementor-widget-loop-carousel-vertical .swiper-vertical .swiper-wrapper {
    flex-direction: column;
}

.elementor-widget-loop-carousel-vertical .swiper-vertical .swiper-slide {
    width: 100% !important;
    flex-shrink: 0;
    display: flex;
}

/* ============================================
   SLIDES - Contenido
   ============================================ */
.elementor-widget-loop-carousel-vertical .swiper-slide > .elementor-element {
    width: 100%;
}

/* Altura igual para slides verticales */
.elementor-widget-loop-carousel-vertical .swiper-vertical .swiper-slide {
    height: auto;
}

/* ============================================
   NAVEGACIÓN - Flechas Verticales
   Solo rotamos los iconos para que apunten arriba/abajo
   Las posiciones y colores las controla Elementor
   ============================================ */

/* Variables por defecto para el posicionamiento (heredadas de loop-carousel) */
.elementor-widget-loop-carousel-vertical {
    --arrow-prev-top-align: 50%;
    --arrow-prev-top-position: 0px;
    --arrow-prev-caption-spacing: 15px;
    --arrow-next-top-align: 50%;
    --arrow-next-top-position: 0px;
    --arrow-next-caption-spacing: 15px;
    --arrow-prev-left-align: 0px;
    --arrow-prev-left-position: 0px;
    --arrow-next-right-align: 0px;
    --arrow-next-right-position: 0px;
    --arrow-next-translate-x: 0px;
    --arrow-next-translate-y: -50%;
    --arrow-prev-translate-x: 0px;
    --arrow-prev-translate-y: -50%;
}

/* ============================================
   Copiar estilos de navegación de Elementor
   (porque el selector original es .elementor-widget-loop-carousel)
   ============================================ */

/* Estilos base de los botones de navegación */
.elementor-widget-loop-carousel-vertical .elementor-swiper-button.elementor-swiper-button-next,
.elementor-widget-loop-carousel-vertical .elementor-swiper-button.elementor-swiper-button-prev {
    border-style: var(--arrow-normal-border-type);
    color: var(--arrow-normal-color, hsla(0,0%,93%,.9));
    font-size: var(--arrow-size, 25px);
    transition-duration: .25s;
    z-index: 2;
}

.elementor-widget-loop-carousel-vertical .elementor-swiper-button.elementor-swiper-button-next svg,
.elementor-widget-loop-carousel-vertical .elementor-swiper-button.elementor-swiper-button-prev svg {
    fill: var(--arrow-normal-color, hsla(0,0%,93%,.9));
}

.elementor-widget-loop-carousel-vertical .elementor-swiper-button.elementor-swiper-button-next:hover,
.elementor-widget-loop-carousel-vertical .elementor-swiper-button.elementor-swiper-button-prev:hover {
    border-style: var(--arrow-hover-border-type);
    color: var(--arrow-hover-color, hsla(0,0%,93%,.9));
}

.elementor-widget-loop-carousel-vertical .elementor-swiper-button.elementor-swiper-button-next:hover svg,
.elementor-widget-loop-carousel-vertical .elementor-swiper-button.elementor-swiper-button-prev:hover svg {
    fill: var(--arrow-hover-color, hsla(0,0%,93%,.9));
}

/* Posicionamiento de las flechas usando las variables de Elementor */
.elementor-widget-loop-carousel-vertical.elementor-element :is(.swiper,.swiper-container)~.elementor-swiper-button-next {
    right: calc(var(--arrow-next-right-align) + var(--arrow-next-right-position));
    top: calc(var(--arrow-next-top-align) + var(--arrow-next-top-position) - var(--arrow-next-caption-spacing, 0px));
    transform: translate(var(--arrow-next-translate-x), var(--arrow-next-translate-y));
}

.elementor-widget-loop-carousel-vertical.elementor-element :is(.swiper,.swiper-container)~.elementor-swiper-button-prev {
    left: calc(var(--arrow-prev-left-align) + var(--arrow-prev-left-position));
    top: calc(var(--arrow-prev-top-align) + var(--arrow-prev-top-position) - var(--arrow-prev-caption-spacing, 0px));
    transform: translate(var(--arrow-prev-translate-x), var(--arrow-prev-translate-y));
}

/* 
   Nota: Las posiciones de las flechas se controlan desde:
   - Panel de Elementor > Navigation > Previous Arrow / Next Arrow
   - Horizontal Position y Vertical Position
   - Los colores desde Style > Navigation > Icons
   
   No forzamos posiciones ni colores aquí para respetar la configuración del usuario.
*/

/* ============================================
   PAGINACIÓN - Vertical
   ============================================ */
.elementor-widget-loop-carousel-vertical.elementor-carousel-direction-vertical .swiper-pagination {
    width: auto !important;
    left: auto;
    right: 10px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.elementor-widget-loop-carousel-vertical.elementor-carousel-direction-vertical .swiper-pagination-bullet {
    margin: 0 !important;
}

/* Pagination - Progress Bar Vertical */
.elementor-widget-loop-carousel-vertical.elementor-carousel-direction-vertical.elementor-pagination-type-progressbar .swiper-pagination {
    width: 4px !important;
    height: 100%;
    top: 0;
    transform: none;
}

.elementor-widget-loop-carousel-vertical.elementor-carousel-direction-vertical.elementor-pagination-type-progressbar .swiper-pagination-progressbar-fill {
    transform-origin: top left;
}

/* Pagination - Fraction */
.elementor-widget-loop-carousel-vertical.elementor-carousel-direction-vertical.elementor-pagination-type-fraction .swiper-pagination {
    flex-direction: row;
    gap: 0;
}

/* ============================================
   PAGINACIÓN - Posición Outside
   ============================================ */
.elementor-widget-loop-carousel-vertical.elementor-carousel-direction-vertical.elementor-pagination-position-outside .swiper-pagination {
    right: -30px;
}

/* ============================================
   ESPACIADO - Gap entre slides
   ============================================ */
.elementor-widget-loop-carousel-vertical .swiper-vertical .swiper-slide {
    margin-bottom: var(--swiper-slides-gap, 10px);
}

.elementor-widget-loop-carousel-vertical .swiper-vertical .swiper-slide:last-child {
    margin-bottom: 0;
}

/* ============================================
   EFECTOS - Transiciones suaves
   ============================================ */
.elementor-widget-loop-carousel-vertical .swiper-wrapper {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   RESPONSIVE - Ajustes móviles
   ============================================ */
@media (max-width: 767px) {
    .elementor-widget-loop-carousel-vertical.elementor-carousel-direction-vertical .swiper-pagination {
        right: 5px;
    }
    
    /* Las flechas se controlan desde Elementor, no las ocultamos por defecto */
}

/* ============================================
   SCROLLBAR - Opcional
   ============================================ */
.elementor-widget-loop-carousel-vertical .swiper-scrollbar {
    position: absolute;
    right: 3px;
    top: 5%;
    height: 90%;
    width: 4px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
}

.elementor-widget-loop-carousel-vertical .swiper-scrollbar-drag {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 2px;
}

/* ============================================
   ACCESIBILIDAD - Focus States
   ============================================ */
.elementor-widget-loop-carousel-vertical .swiper-slide:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

.elementor-widget-loop-carousel-vertical .elementor-swiper-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ============================================
   FREE MODE - Modo Libre
   ============================================ */
.elementor-widget-loop-carousel-vertical .swiper-free-mode .swiper-wrapper {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   GRABBING CURSOR
   ============================================ */
.elementor-widget-loop-carousel-vertical .swiper-vertical {
    cursor: grab;
}

.elementor-widget-loop-carousel-vertical .swiper-vertical:active {
    cursor: grabbing;
}

/* ============================================
   MODOS DE ALTURA DE SLIDES
   ============================================ */

/* Modo AUTO - Altura automática según contenido */
.elementor-widget-loop-carousel-vertical.slide-height-mode-auto .swiper-slide {
    height: auto !important;
    min-height: auto !important;
}

.elementor-widget-loop-carousel-vertical.slide-height-mode-auto .swiper-slide > .elementor-element {
    height: auto;
}

/* Modo EQUAL - Igual altura (todos toman la altura del contenedor / slides_to_show) */
.elementor-widget-loop-carousel-vertical.slide-height-mode-equal .swiper-slide {
    height: auto;
    display: flex;
    flex-direction: column;
}

.elementor-widget-loop-carousel-vertical.slide-height-mode-equal .swiper-slide > .elementor-element {
    height: 100%;
    flex: 1;
}

/* Modo FIXED - Altura fija (se define por el control slide_fixed_height) */
.elementor-widget-loop-carousel-vertical.slide-height-mode-fixed .swiper-slide {
    flex-shrink: 0;
    overflow: hidden;
}

.elementor-widget-loop-carousel-vertical.slide-height-mode-fixed .swiper-slide > .elementor-element {
    height: 100%;
    overflow: hidden;
}

/* ============================================
   LEGACY - Compatibilidad con clase anterior
   ============================================ */
.elementor-widget-loop-carousel-vertical .swiper-vertical.swiper-equal-height .swiper-slide {
    height: auto !important;
}

.elementor-widget-loop-carousel-vertical .swiper-vertical.swiper-equal-height .swiper-slide > .elementor-element {
    height: 100%;
}