/**
 * CamStreamHub - Iconos de Plataformas en Slider
 *
 * Estilos para los iconos de plataformas que se muestran
 * en los slides del widget slider de trx_addons/Playful.
 */

/* ═══════════════════════════════════════════════════
   Contenedor de iconos
   ═══════════════════════════════════════════════════ */

.csh-slider-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
    padding: 10px 0;
}

/* ═══════════════════════════════════════════════════
   Icono individual (enlace)
   ═══════════════════════════════════════════════════ */

.csh-slider-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    transition: transform 0.25s cubic-bezier(.4,0,.2,1),
                background 0.25s ease,
                box-shadow 0.25s ease;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    overflow: visible;
    cursor: pointer !important;
    z-index: 10 !important;
}

.csh-slider-icon:hover {
    transform: scale(1.2);
    background: rgba(255, 255, 255, 0.28);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    cursor: pointer !important;
}

/* Tamaño base de los iconos */
.csh-slider-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

/* ═══════════════════════════════════════════════════
   Iconos MONOCROMO (chaturbate, camsoda, stripchat, bongacams)
   Se invierten a blanco. En hover vuelven a su color original.
   ═══════════════════════════════════════════════════ */

.csh-slider-icon.csh-icon-mono img {
    filter: brightness(0) invert(1);
}

.csh-slider-icon.csh-icon-mono:hover img {
    filter: none;
}

/* ═══════════════════════════════════════════════════
   Iconos CON COLOR (livejasmin, whatsapp, telegram, otro)
   Se muestran con sus colores originales siempre.
   ═══════════════════════════════════════════════════ */

.csh-slider-icon:not(.csh-icon-mono) img {
    filter: none;
}

/* ═══════════════════════════════════════════════════
   Swap de iconos (ej: WhatsApp normal → color en hover)
   Dos <img> dentro del <a>, se alternan con opacity.
   ═══════════════════════════════════════════════════ */

.csh-slider-icon.csh-icon-swap .csh-img-hover {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.csh-slider-icon.csh-icon-swap .csh-img-normal {
    display: block;
}

.csh-slider-icon.csh-icon-swap:hover .csh-img-normal {
    display: none;
}

.csh-slider-icon.csh-icon-swap:hover .csh-img-hover {
    display: block;
}

/* ═══════════════════════════════════════════════════
   Tooltip llamativo (CSS puro via data-tooltip)
   ═══════════════════════════════════════════════════ */

.csh-slider-icon[data-tooltip]::before,
.csh-slider-icon[data-tooltip]::after {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(.4,0,.2,1), visibility 0.25s ease;
}

/* Texto del tooltip */
.csh-slider-icon[data-tooltip]::after {
    content: attr(data-tooltip);
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    white-space: nowrap;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #0da6fd, #0847b4, #9a0567, #fd42ac);
    box-shadow: 0 4px 15px rgba(13, 166, 253, 0.4);
    z-index: 9999;
}

/* Flecha del tooltip */
.csh-slider-icon[data-tooltip]::before {
    content: '';
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    border: 6px solid transparent;
    border-top-color: #9a0567;
    z-index: 9999;
}

/* Mostrar en hover */
.csh-slider-icon[data-tooltip]:hover::before,
.csh-slider-icon[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════════════
   Efecto Hover en Slides (zoom + overlay degradado)
   NOTA: .slider-slide y .swiper-slide son el MISMO <div>
   ═══════════════════════════════════════════════════ */

/* Variables por defecto del degradado */
.csh-hover-effect {
    --csh-hover-c1: #0da6fd;
    --csh-hover-c2: #0847b4;
    --csh-hover-c3: #9a0567;
    --csh-hover-c4: #fd42ac;
}

/* Cada slide individual contiene el zoom */

/* Slide base — z-index 1 por defecto, con delay en la vuelta del z-index */
.csh-hover-effect .slider-slide {
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-size: cover !important;
    transition: transform 0.6s cubic-bezier(.25, .46, .45, .94),
                z-index 0s 0.6s !important;
}

/* Zoom en hover — z-index baja inmediato, queda DEBAJO de vecinos */
.csh-hover-effect .slider-slide:hover {
    transform: scale(1.12) !important;
    z-index: 0;
    transition: transform 0.6s cubic-bezier(.25, .46, .45, .94),
                z-index 0s 0s !important;
}

/* Overlay con degradado via ::before */
.csh-hover-effect .slider-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        var(--csh-hover-c1),
        var(--csh-hover-c2),
        var(--csh-hover-c3),
        var(--csh-hover-c4)
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.csh-hover-effect .slider-slide:hover::before {
    opacity: 0.45;
}

/* El contenido del slide debe estar por encima del overlay */
.csh-hover-effect .slider-slide .slide_info,
.csh-hover-effect .slider-slide .slide_number,
.csh-hover-effect .slider-slide .csh-slider-icons {
    position: relative;
    z-index: 2;
}

/* ═══════════════════════════════════════════════════
   Desactivar Mouse Helper + Restaurar cursor
   Sobreescribe [data-mouse-helper-hide-cursor="1"] * { cursor: none }
   del plugin trx_addons/addons/mouse-helper/mouse-helper.css
   ═══════════════════════════════════════════════════ */

.csh-no-mouse-helper,
.csh-no-mouse-helper *,
.csh-no-mouse-helper .slider_container,
.csh-no-mouse-helper .slider_container *,
.csh-no-mouse-helper .slider_swiper,
.csh-no-mouse-helper .slider_swiper *,
.csh-no-mouse-helper[data-mouse-helper-hide-cursor] *,
[data-mouse-helper-hide-cursor] .csh-no-mouse-helper *,
.csh-no-mouse-helper .slider-slide,
.csh-no-mouse-helper .slider-slide * {
    cursor: pointer !important;
}

/* ═══════════════════════════════════════════════════
   Dentro del contenido de un single modelo
   ═══════════════════════════════════════════════════ */

.single-modelo .csh-slider-icons {
    justify-content: flex-start;
    background: transparent;
    padding: 5px 0;
}

.single-modelo .csh-slider-icon {
    background: rgba(128, 128, 128, 0.1);
}

.single-modelo .csh-slider-icon img,
.single-modelo .csh-slider-icon.csh-icon-mono img {
    filter: none;
}

.single-modelo .csh-slider-icon:hover {
    background: rgba(128, 128, 128, 0.2);
}

/* ═══════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .csh-slider-icon {
        width: 30px;
        height: 30px;
    }

    .csh-slider-icon img {
        width: 18px;
        height: 18px;
    }

    /* Tooltip más compacto en mobile */
    .csh-slider-icon[data-tooltip]::after {
        font-size: 0.65rem;
        padding: 4px 10px;
    }
}