/**
 * Card Slider Widget for Elementor — CSS
 * Author:  Jhon Hernandez
 * Version: 2.7
 */

.csw-wrapper { width: 100%; padding-bottom: 20px; }

/* Quitar overflow:hidden de Elementor que corta las sombras */
.elementor-widget-csw_card_slider,
.elementor-widget-csw_card_slider .elementor-widget-container {
    overflow: visible !important;
}

/* Espacio interno para que la sombra no se corte */
.csw-wrapper .slick-list {
    padding: 16px 16px !important;
    margin: -16px -16px !important;
}

.csw-item { padding: 0 8px; }

.csw-card {
    background: #fff;
    border-radius: 26px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    padding: 16px 16px 56px;
    text-align: center;
    position: relative;
    transition: transform .3s ease, box-shadow .3s ease;
}
.csw-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.15);
}
.csw-card img {
    width: auto;
    max-width: 100%;
    border-radius: 26px;
    display: inline-block;
    margin-bottom: 20px;
}
.csw-title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 0 0 10px; }
.csw-desc  { font-size: 13px; color: #555; margin: 0; text-align: center; line-height: 1.6; }
.csw-extra { font-size: 13px; color: #333; text-align: center; margin-top: 8px; }

/* Flechas */
.csw-wrapper .slick-prev,
.csw-wrapper .slick-next {
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 50%;
    z-index: 10;
    transition: background-color .2s ease, border-color .2s ease;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.csw-wrapper .slick-prev:hover,
.csw-wrapper .slick-next:hover {
    background-color: #f0f0f0;
}
.csw-wrapper .slick-prev { left: -20px; }
.csw-wrapper .slick-next { right: -20px; }
.csw-wrapper .slick-prev:before,
.csw-wrapper .slick-next:before {
    font-size: 18px;
    color: #1a1a1a;
    opacity: 1;
    line-height: 1;
}

/* Dots */
.csw-wrapper .slick-dots {
    display: flex !important;
    justify-content: center;
    list-style: none !important;
    padding: 0 !important;
    margin: 36px 0 0 !important;
    gap: 4px;
}
.csw-wrapper .slick-dots li { margin: 0 !important; }
.csw-wrapper .slick-dots li button:before { font-size: 10px; color: #ccc; }
.csw-wrapper .slick-dots li.slick-active button:before { color: #e63946; }