/* Floating Side Tab - Frontend
 * (c) TelFo NetWorks - https://www.telfo.com
 */

.fst-wrapper,
.fst-wrapper * { box-sizing: border-box; }

/* TAB FLOTANTE
 * Blindaje contra estilos heredados del theme.
 * Cubrimos todos los estados (base, hover, focus, active) porque muchos themes
 * aplican background/border/box-shadow al hacer hover en cualquier <button>.
 */
button.fst-tab,
.fst-tab,
button.fst-tab:hover,
.fst-tab:hover,
button.fst-tab:focus,
.fst-tab:focus,
button.fst-tab:active,
.fst-tab:active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    color: inherit !important;
}

button.fst-tab,
.fst-tab {
    position: fixed;
    z-index: var(--fst-z, 9999);
    cursor: pointer;
    width: var(--fst-tab-w, 110px);
    height: auto;
    min-width: 0;
    min-height: 0;
    line-height: 0;
    font: inherit;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    transform: translate(0, var(--fst-tab-translate-y, 0));
    transition: filter .25s ease;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.18));
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    -webkit-appearance: none;
}

.fst-tab:hover { filter: drop-shadow(0 10px 22px rgba(0,0,0,.28)); }
.fst-tab:focus-visible { outline: 2px solid #1a73e8 !important; outline-offset: 4px; }


.fst-tab img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* Por defecto, la imagen móvil se oculta. CSS responsive más abajo la activa. */
.fst-tab .fst-img-mobile { display: none; }

.fst-tab-fallback {
    display: block;
    padding: 14px 10px;
    background: #2a6dbf;
    color: #fff;
    font: 600 13px/1.2 system-ui, -apple-system, sans-serif;
    text-align: center;
    border-radius: 8px 0 0 8px;
}

.fst-wrapper[data-position="left"] .fst-tab-fallback {
    border-radius: 0 8px 8px 0;
}

/* OVERLAY */
.fst-overlay {
    position: fixed;
    inset: 0;
    background: var(--fst-overlay-bg, rgba(0,0,0,.6));
    z-index: calc(var(--fst-z, 9999) + 1);
    opacity: 0;
    transition: opacity .3s ease;
    overflow: hidden;
}

.fst-overlay[hidden] { display: none; }
.fst-overlay.is-open { opacity: 1; }

/* PANEL */
.fst-panel {
    position: absolute;
    background: var(--fst-panel-bg, #fff);
    width: 100%;
    max-width: var(--fst-panel-w, 460px);
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 40px 28px 28px;
    will-change: transform, opacity;
}

/* Animación SLIDE - panel derecho */
.fst-wrapper[data-animation="slide"][data-panel-position="right"] .fst-panel {
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.fst-wrapper[data-animation="slide"][data-panel-position="right"] .fst-overlay.is-open .fst-panel {
    transform: translateX(0);
}

/* Animación SLIDE - panel izquierdo */
.fst-wrapper[data-animation="slide"][data-panel-position="left"] .fst-panel {
    transform: translateX(-100%);
    transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.fst-wrapper[data-animation="slide"][data-panel-position="left"] .fst-overlay.is-open .fst-panel {
    transform: translateX(0);
}

/* Animación SLIDE - panel centrado (modal) */
.fst-wrapper[data-animation="slide"][data-panel-position="center"] .fst-panel {
    transform: translate(-50%, -45%);
    opacity: 0;
    transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .25s ease;
}
.fst-wrapper[data-animation="slide"][data-panel-position="center"] .fst-overlay.is-open .fst-panel {
    transform: translate(-50%, -50%);
    opacity: 1;
}

/* Animación FADE - lateral */
.fst-wrapper[data-animation="fade"][data-panel-position="right"] .fst-panel,
.fst-wrapper[data-animation="fade"][data-panel-position="left"] .fst-panel {
    opacity: 0;
    transition: opacity .3s ease;
}
.fst-wrapper[data-animation="fade"][data-panel-position="right"] .fst-overlay.is-open .fst-panel,
.fst-wrapper[data-animation="fade"][data-panel-position="left"] .fst-overlay.is-open .fst-panel {
    opacity: 1;
}

/* Animación FADE - centrado (mantiene el translate del centrado) */
.fst-wrapper[data-animation="fade"][data-panel-position="center"] .fst-panel {
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .3s ease;
}
.fst-wrapper[data-animation="fade"][data-panel-position="center"] .fst-overlay.is-open .fst-panel {
    opacity: 1;
}

/* BOTÓN CERRAR
 * Blindaje contra estilos heredados del theme en todos los estados.
 */
button.fst-close,
.fst-close,
button.fst-close:hover,
.fst-close:hover,
button.fst-close:focus,
.fst-close:focus,
button.fst-close:active,
.fst-close:active {
    border: 0 !important;
    border-radius: 50% !important;
    color: #222 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: 0 !important;
}

button.fst-close,
.fst-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    min-width: 0;
    min-height: 0;
    background: rgba(0,0,0,.06) !important;
    background-color: rgba(0,0,0,.06) !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    transition: background-color .2s ease, transform .2s ease;
    z-index: 2;
    -webkit-appearance: none;
    appearance: none;
}
button.fst-close:hover,
.fst-close:hover {
    background: rgba(0,0,0,.12) !important;
    background-color: rgba(0,0,0,.12) !important;
    transform: rotate(90deg);
}
.fst-close:focus-visible { outline: 2px solid #1a73e8 !important; outline-offset: 2px; }

.fst-panel-title {
    margin: 0 0 18px;
    padding-right: 40px;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    color: #1a2a44;
}

.fst-panel-content { font-size: 15px; line-height: 1.5; }

/* Bloqueo de scroll del body cuando el panel está abierto */
body.fst-no-scroll {
    overflow: hidden;
}

/* Soporte para reduced motion */
@media (prefers-reduced-motion: reduce) {
    .fst-tab,
    .fst-overlay,
    .fst-panel,
    .fst-close {
        transition: none !important;
    }
}

/* RESPONSIVE - MÓVIL */
@media (max-width: 767px) {

    /* Si el usuario ha subido una imagen específica para móvil, esa se muestra
       en lugar de la de desktop. */
    .fst-wrapper[data-has-mobile-img="1"] .fst-tab .fst-img-desktop { display: none; }
    .fst-wrapper[data-has-mobile-img="1"] .fst-tab .fst-img-mobile  { display: block; }

    /* ====== MODO TAB LATERAL (igual que desktop, más pequeño) ====== */
    .fst-wrapper[data-mobile-mode="tab"] .fst-tab {
        width: var(--fst-tab-w-mobile, 70px);
    }

    /* ====== MODO FAB (icono circular flotante en esquina) ====== */
    .fst-wrapper[data-mobile-mode="fab"] .fst-tab {
        /* Reset de la posición lateral: en FAB va en esquina inferior */
        top: auto !important;
        bottom: 20px !important;
        width: var(--fst-fab-size, 60px) !important;
        height: var(--fst-fab-size, 60px) !important;
        border-radius: 50% !important;
        background: var(--fst-fab-bg, #2a6dbf) !important;
        background-color: var(--fst-fab-bg, #2a6dbf) !important;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: none !important;
        --fst-tab-translate-y: 0;
        filter: drop-shadow(0 4px 12px rgba(0,0,0,.25));
    }

    .fst-wrapper[data-mobile-mode="fab"][data-mobile-position="bottom-right"] .fst-tab {
        right: 16px !important;
        left: auto !important;
    }
    .fst-wrapper[data-mobile-mode="fab"][data-mobile-position="bottom-left"] .fst-tab {
        left: 16px !important;
        right: auto !important;
    }

    /* La imagen dentro del FAB se centra y se recorta circular */
    .fst-wrapper[data-mobile-mode="fab"] .fst-tab img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

    .fst-wrapper[data-mobile-mode="fab"] .fst-tab:hover,
    .fst-wrapper[data-mobile-mode="fab"] .fst-tab:active {
        transform: scale(1.05) !important;
    }

    /* Fallback (sin imagen) dentro del FAB */
    .fst-wrapper[data-mobile-mode="fab"] .fst-tab-fallback {
        background: transparent;
        padding: 6px;
        font-size: 11px;
        line-height: 1.1;
        border-radius: 50%;
    }

    /* ====== PANEL (común en ambos modos en móvil) ====== */
    .fst-panel {
        position: absolute !important;
        inset: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        transform: none !important;
        padding: 56px 18px 24px;
    }

    .fst-wrapper[data-animation="slide"] .fst-panel,
    .fst-wrapper[data-animation="fade"]  .fst-panel {
        opacity: 0;
        transform: translateY(20px) !important;
        transition: opacity .3s ease, transform .3s ease;
    }
    .fst-wrapper[data-animation="slide"] .fst-overlay.is-open .fst-panel,
    .fst-wrapper[data-animation="fade"]  .fst-overlay.is-open .fst-panel {
        opacity: 1;
        transform: translateY(0) !important;
    }

    .fst-close { top: 14px; right: 14px; }
    .fst-panel-title { font-size: 20px; }
}