/*
Theme Name:   Hello Elementor Child — Serior
Theme URI:    https://serior.com
Description:  Child theme de Hello Elementor para personalizaciones de Serior. Permite extender shortcodes y otros sin tocar el theme parent.
Author:       Serior
Template:     hello-elementor
Version:      1.0.6
Text Domain:  hello-elementor-child
*/

/* ============================================================
   Sidebar de filtros [tim_catalogo_sidebar] — modo mobile
   Convierte el modal actual en un drawer que desliza desde la
   izquierda, ocupa toda la altura y bloquea scroll del body.
   ============================================================ */
@media (max-width: 1024px) {

    /* Backdrop a pantalla completa */
    .tim-filters-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility 0s linear .25s;
        z-index: 9998;
        pointer-events: none;
    }
    .tim-filters-backdrop.tim-filters-backdrop--open {
        opacity: 1;
        visibility: visible;
        transition: opacity .25s ease, visibility 0s linear 0s;
        pointer-events: auto;
    }

    /* Drawer cerrado fuera de pantalla a la izquierda */
    aside.tim-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        width: min(88vw, 380px) !important;
        max-width: none !important;
        height: 100vh !important;
        max-height: 100dvh !important;
        background: #fff !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-100%) !important;
        transition: transform .3s ease !important;
        box-shadow: 2px 0 18px rgba(0, 0, 0, 0.18);
        padding: 16px !important;
        margin: 0 !important;
    }

    aside.tim-sidebar.tim-sidebar--open {
        transform: translateX(0) !important;
    }

    /* Cabecera mobile (título + cerrar) sticky arriba */
    .tim-sidebar__mobile-header {
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 4px 12px;
        margin: -16px -16px 12px;
        padding: 16px;
        border-bottom: 1px solid #eee;
    }

    .tim-sidebar__mobile-header span {
        font-weight: 600;
        font-size: 1.05rem;
    }

    .tim-sidebar__mobile-close {
        background: transparent;
        border: 0;
        font-size: 1.6rem;
        line-height: 1;
        cursor: pointer;
        padding: 4px 10px;
        color: #333;
    }
    .tim-sidebar__mobile-close:hover {
        color: #000;
    }

    /* Bloquear scroll del body cuando drawer abierto (sin JS, vía :has()) */
    body:has(.tim-filters-backdrop.tim-filters-backdrop--open) {
        overflow: hidden;
    }

    /* Forzar todas las secciones de filtro abiertas en mobile.
       El parent añade clase 'active' solo en desktop; aquí la replicamos en CSS. */
    aside.tim-sidebar .tim-filter-content {
        display: block !important;
    }
    aside.tim-sidebar .tim-filter-toggle {
        transform: rotate(180deg) !important;
    }
}

/* En desktop, ocultar header mobile y backdrop */
@media (min-width: 1025px) {
    .tim-sidebar__mobile-header,
    .tim-filters-backdrop,
    .tim-mobile-filters-btn {
        display: none !important;
    }
}

/* ============================================================
   Botón "FILTROS" mejorado en mobile — sticky en parte inferior
   con icono y full-width.
   ============================================================ */
@media (max-width: 1024px) {
    .tim-mobile-filters-btn {
        position: fixed !important;
        bottom: 16px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        z-index: 998 !important;
        display: inline-flex !important;
        align-items: center;
        gap: 10px;
        padding: 14px 28px !important;
        min-height: 48px;
        background: #d92418 !important; /* rojo Serior */
        color: #fff !important;
        border: 0 !important;
        border-radius: 999px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        line-height: 1;
        box-shadow: 0 6px 18px rgba(217, 36, 24, 0.45), 0 2px 6px rgba(0,0,0,0.15);
        cursor: pointer;
        transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }
    /* Icono SVG (sliders) antes del texto */
    .tim-mobile-filters-btn::before {
        content: "";
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='6' x2='20' y2='6'/><circle cx='10' cy='6' r='2.5' fill='%23d92418'/><line x1='4' y1='12' x2='20' y2='12'/><circle cx='16' cy='12' r='2.5' fill='%23d92418'/><line x1='4' y1='18' x2='20' y2='18'/><circle cx='8' cy='18' r='2.5' fill='%23d92418'/></svg>") no-repeat center / contain;
        flex-shrink: 0;
    }
    .tim-mobile-filters-btn:hover,
    .tim-mobile-filters-btn:focus {
        background: #b91d12 !important;
        transform: translateX(-50%) translateY(-2px) !important;
        box-shadow: 0 10px 24px rgba(217, 36, 24, 0.55), 0 4px 8px rgba(0,0,0,0.2);
    }
    .tim-mobile-filters-btn:active {
        transform: translateX(-50%) translateY(0) !important;
    }

    /* Espacio extra al final del listing para que el botón no tape el último producto */
    main, .site-main, ul.products, .woocommerce ul.products {
        padding-bottom: 90px !important;
    }

    /* Cuando el drawer está abierto, ocultar el botón flotante */
    body:has(.tim-filters-backdrop.tim-filters-backdrop--open) .tim-mobile-filters-btn {
        opacity: 0;
        pointer-events: none;
    }
}