/*
Theme Name: Hello Child Theme Xcalable
Template: hello-elementor
Version: 1.0.0
Author: Adrian
Description: Tema hijo de Hello Elementor
*/

/* =========================================
   1. Ajustes generales de front
   ========================================= */
/* Ajuste para el botón del carrito en el menú */
.elementor-menu-cart__toggle_button.elementor-button.elementor-size-sm {
    background-color: transparent !important;
}

/* =========================================
   2. Estilos de menú principal
   ========================================= */
/* Fondo y color de texto para submenús */
.elementor-nav-menu .sub-menu {
    background-color: #c3011a
}
.elementor-nav-menu .sub-menu a {
   color: #FFFFFF;
   text-transform: uppercase;
}

/* =========================================
   3. Icono en loop de productos (.catprod)
   ========================================= */
/* Tooltip "Seleccionar opciones" al hacer hover en productos */
.catprod .select_op {
    position: relative;
    opacity: 0;
    transform: translateY(4px);
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.catprod:hover .select_op {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}
/* Flecha y caja del tooltip */
.catprod .select_op::after {
    content: "Seleccionar opciones";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translate(-50%, 4px);
    background: #000000;
    color: #ffffff;
    font-size: 12px;
    line-height: 1.2;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.catprod .select_op::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2px);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 6px 0 6px;
    border-color: #000000 transparent transparent transparent;
    transform: translate(-50%, 4px);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}
.catprod .select_op:hover::after,
.catprod .select_op:hover::before,
.catprod .select_op:focus-visible::after,
.catprod .select_op:focus-visible::before {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* =========================================
   4. Buscador de productos (Shortcode)
   ========================================= */
/* Forzar ancho completo en los contenedores de Elementor para este widget */
.elementor-widget-shortcode .elementor-widget-container,
.elementor-widget-shortcode .elementor-shortcode {
    width: 100%;
}

/* Contenedor principal del buscador */
.hello-child-product-search {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    display: block;
}

/* Formulario (Input + Botón) */
.hello-child-product-search__form {
    display: flex;
    align-items: center;
    background-color: #e6e6e6;
    border-radius: 50px;
    padding: 4px;
    box-sizing: border-box;
    width: 100% !important;
}

/* Campo de texto */
.hello-child-product-search__input {
    flex: 1;
    padding: 10px 20px;
    border: none;
    background: transparent;
    font-size: 16px;
    color: #000000;
    outline: none;
    min-width: 0; /* Fix para flexbox */
}

.hello-child-product-search__input::placeholder {
    color: #373737;
    opacity: 0.5; /* Más suave para que parezca placeholder */
}

/* Botón de búsqueda (Lupa) */
.hello-child-product-search__button {
    width: 40px;
    height: 40px;
    background-color: #cc0000; /* Rojo botón */
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    flex-shrink: 0;
    margin-left: 5px;
    transition: background-color 0.3s ease;
}

.hello-child-product-search__button:hover {
    background-color: #a30000;
}

.hello-child-product-search__button svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

/* Dropdown de sugerencias (Autocompletado) */
.hello-child-product-search__suggestions {
    position: absolute;
    top: calc(100% + 10px);
    left: 0; /* Alineado al borde izquierdo */
    right: 0; /* Alineado al borde derecho */
    width: 100%; /* Ancho completo */
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    max-height: 300px;
    overflow-y: auto;
    z-index: 9999; /* Z-index muy alto */
    display: none;
    padding: 10px 0;
    box-sizing: border-box;
}

/* Items de sugerencia individual */
.hello-child-product-search__suggestion {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.2s ease;
    font-size: 14px;
}

.hello-child-product-search__suggestion:hover,
.hello-child-product-search__suggestion:focus {
    background-color: #f5f5f5;
    color: #cc0000;
}

/* =========================================
   5. Swatches de Variaciones (Colores y Tallas)
   ========================================= */

/* Ocultar los selects originales de WooCommerce dentro de las variaciones */
/* Solo ocultamos los que tienen swatches personalizados */
.variations td.value select[data-attribute_name="attribute_pa_colores"],
.variations td.value select[data-attribute_name="attribute_pa_tallas"],
.variations td.value select[data-attribute_name="attribute_pa_talle"],
.variations td.value select[data-attribute_name="attribute_pa_talle-ninos"],
.variations td.value select[data-attribute_name="attribute_pa_talle-nino"],
.hello-child-swatches + select { /* Regla genérica: si hay swatches, ocultar el select adyacente */
    display: none !important; /* Ocultar visualmente pero mantener en DOM si es necesario, aunque display:none suele funcionar bien con WC */
}
/* Alternativa si display:none causa problemas con plugins de terceros:
.variations td.value select {
    visibility: hidden;
    position: absolute;
    z-index: -1;
    opacity: 0;
} 
*/

/* Contenedor de swatches */
.hello-child-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

/* Estilos base para items */
.swatch-item {
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* --- Colores (Círculos) --- */
.swatch-color {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #ddd; /* Borde sutil para colores claros */
    position: relative;
}

/* Indicador de seleccionado para colores (Anillo exterior) */
.swatch-color.selected {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #000000; /* Anillo blanco + anillo negro */
    border-color: transparent;
}

/* Tooltip para nombre del color (Hover y Selected) */
.swatch-color::after {
    content: attr(data-name);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background-color: #000;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
    z-index: 10;
}

/* Flechita del tooltip */
.swatch-color::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    border: 4px solid transparent;
    border-top-color: #000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
    z-index: 10;
}

.swatch-color:hover::after,
.swatch-color:hover::before,
.swatch-color.selected::after,
.swatch-color.selected::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-8px); /* Ajuste posición final */
}

/* --- Tallas (Botones) --- */
.swatch-size {
    padding: 0; /* Quitamos padding para usar flex center */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff; /* Fondo blanco */
    color: #000000; /* Texto negro */
    font-family: 'Roboto';
    font-size: 12px;
    font-weight: 500;
    border-radius: 10px; /* Radio solicitado */
    text-align: center;
    min-width: 40px; /* Ancho mínimo uniforme */
    height: 30px; /* Altura fija para uniformidad */
    border: 1px solid #000000; /* Borde negro */
}

/* Estado Hover Tallas */
.swatch-size:hover {
    background-color: #000000; /* Fondo negro */
    color: #ffffff; /* Texto blanco */
    border-color: #000000;
}

/* Estado Seleccionado Tallas */
.swatch-size.selected {
    background-color: #000000; /* Fondo negro */
    color: #ffffff; /* Texto blanco */
    border: 1px solid #000000;
}

/* Botón de limpiar en single product */
.woocommerce div.product form.cart .reset_variations {
    font-family: 'Roboto';
    text-transform: uppercase;
    color: #cc0000;
}

/* =========================================
   6. Botón Añadir al Carrito
   ========================================= */
/* Estilizar el botón nativo de WooCommerce */
.single_add_to_cart_button.button {
    background-color: #cc0000 !important; /* Rojo del buscador */
    color: #ffffff !important;
    border: none !important;
    padding: 12px 24px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
    border-radius: 4px !important; /* Coherencia con tallas */
    width: 100% !important; /* Ocupar todo el ancho disponible */
}

/* Estado Hover del botón */
.single_add_to_cart_button.button:hover {
    background-color: #cc0000 !important; /* Mismo fondo */
    color: #FFFFFF !important; /* Color texto solicitado */
}

/* Ajuste para el input de cantidad (opcional, para que combine) */
.quantity .input-text.qty {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
    height: 46px; /* Igualar altura visual del botón aprox */
}

/* =========================================
   7. Swatches en Loop (Shortcode)
   ========================================= */
.hello-child-loop-swatches .single_add_to_cart_button,
.hello-child-loop-swatches .quantity,
.hello-child-loop-swatches .woocommerce-variation-add-to-cart .qty,
.hello-child-loop-swatches .woocommerce-variation-add-to-cart .button {
    display: none !important;
}

/* Asegurar que el botón de limpiar sea visible y estilizado */
.hello-child-loop-swatches .reset_variations {
    display: inline-block !important; /* Forzar visibilidad si WC lo oculta */
    visibility: visible !important;
    margin-top: 10px;
    color: #cc0000; /* Azul estándar de link o el que prefieras */
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
}

/* Ajustar tamaño de swatches en loop si es necesario (opcional) */
/* Por ahora heredan los estilos globales, que parecen adecuados (30px) */

/* Ocultar mensaje de validación en el loop para no ensuciar el diseño */
.hello-child-loop-swatches .hello-child-variation-msg {
    display: none !important;
}

/*Variaciones en Loop Catalogo Productos*/
.catprod #tooltipComponent, .catprod #mp-credits-modal, .catprod th.label, .catprod .single_variation_wrap {
    display: none!important;
}

/* =========================================
   8. Carrito de compras (popup lateral)
   ========================================= */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name a{
    color: #000000!important;
}
.elementor-menu-cart__product-name, .elementor-menu-cart__product-price {
    font-size: 16px!important;
}
.elementor-menu-cart__product-price {
    color:#000000!important;
}
.elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover {
    background-color: #cc0000;
    color: #FFFFFF!important;
}

/* =========================================
   9. Ocultar Mensajes de WooCommerce
   ========================================= */
.woocommerce-message,
.woocommerce-info {
    display: none !important;
}

/* =========================================
   10. Checkout - Finalizar Compra
   ========================================= */
.a.shipping-calculator-button {
    text-decoration: underline!important;
}
/* =========================================
   ROSE MEGA MENU SHORTCODE STYLES
   ========================================= */

/* Container */
.rose-mega-menu-container {
    width: 100%;
    font-family: 'Roboto', sans-serif;
}

/* Root Menu (Horizontal) */
.rose-root-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px; /* Space between top items */
    align-items: center;
    flex-wrap: wrap;
    position: relative; /* Reference for full-width dropdown */
}

.rose-root-item {
    position: static; /* Allow dropdown to be full width of container */
    padding: 10px 0;
}

/* Root Links */
.rose-root-link {
    text-decoration: none;
    color: #000; /* Default black */
    font-size: 14px; /* Adjusted based on image */
    font-weight: 500;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
}

.rose-root-link:hover,
.rose-root-item.active .rose-root-link {
    color: #cc0000; /* Red on hover/active */
}

.rose-chevron-down {
    display: flex;
    align-items: center;
    color: inherit;
}

/* Dropdown Container */
.rose-mega-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%; /* Full width of rose-root-menu */
    background: #fff;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    z-index: 9999;
    border-top: 1px solid #eee;
    padding: 0;
}/* Show Dropdown on Hover */
.rose-root-item:hover .rose-mega-dropdown {
    display: block;
}

/* Dropdown Inner Layout */
.rose-dropdown-inner {
    display: flex;
    align-items: stretch; /* Stretch to match height */
}

/* Links Column */
.rose-col-links {
    flex: 1;
    padding: 30px 40px;
    background: #fff;
    width: 100%; /* Full width since image is gone */
}

/* Links List (Columns) */
.rose-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    column-count: 2; /* Split into 2 columns */
    column-gap: 40px;
    column-rule: 1px solid #000; /* Vertical line between columns */
}

.rose-sub-item {
    break-inside: avoid; /* Prevent splitting items */
    margin-bottom: 15px;
}

.rose-sub-item a {
    text-decoration: none;
    color: #000;
    font-size: 16px; /* Slightly larger for sub-items as per image */
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
    text-transform: uppercase; /* Uppercase as requested */
}

.rose-sub-item a:hover {
    color: #cc0000;
}

.rose-sub-arrow {
    font-size: 14px;
    font-weight: 300;
}

/* Responsive: Collapse to simple menu on mobile if needed, 
   but usually Elementor handles mobile menu separately. 
   This shortcode is likely for Desktop only. */
@media (max-width: 768px) {
    .rose-mega-dropdown {
        min-width: 300px;
    }
    .rose-links-list {
        column-count: 1;
    }
}

/* Rose Archive Sidebar Filters */
/* Base Styles (Desktop First - Static Layout) */
.rose-filter-sidebar-wrapper {
    font-family: 'Roboto', sans-serif;
    width: 100%; /* Occupy full width of container */
    height: auto;
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

.rose-filter-sidebar {
    position: relative;
    width: 100%;
    height: auto;
    background: #fff;
    padding: 0 20px 20px 0; /* Adjust padding for static layout */
    box-shadow: none;
    left: auto;
    top: auto;
    display: flex;
    flex-direction: column;
}

/* Hide Toggle & Close buttons on Desktop */
.rose-toggle-filters-btn,
.rose-close-filters-btn {
    display: none;
}

.rose-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.rose-filter-header h3 {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    font-size: 16px;
}

/* Mobile & Tablet Styles (Overlay/Off-canvas) */
@media (max-width: 1024px) {
    .rose-filter-sidebar-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 9999;
        pointer-events: none; /* Allow clicking through wrapper when closed */
        width: auto; /* Reset width */
    }

    .rose-filter-sidebar-wrapper.open {
        pointer-events: auto;
    }

    .rose-toggle-filters-btn {
        display: flex; /* Show toggle button */
        position: fixed;
        top: 200px;
        left: 0;
        z-index: 9998;
        background: #000;
        color: #fff;
        border: none;
        padding: 10px 15px;
        cursor: pointer;
        font-family: 'Roboto', sans-serif;
        text-transform: uppercase;
        font-size: 12px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        transition: left 0.3s ease;
        align-items: center;
        gap: 8px;
        pointer-events: auto;
    }

    .rose-toggle-filters-btn:hover {
        color: #fff !important;
        background-color: #333;
    }

    .rose-toggle-filters-btn svg {
        width: 16px;
        height: 16px;
    }

    .rose-filter-sidebar-wrapper.open .rose-toggle-filters-btn {
        display: none; 
    }

    .rose-filter-sidebar {
        position: absolute;
        top: 0;
        left: -320px; /* Hidden by default */
        width: 300px;
        height: 100%;
        background: #fff;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        padding: 20px;
        overflow-y: auto;
        transition: left 0.3s ease;
        z-index: 9999;
    }

    .rose-filter-sidebar-wrapper.open .rose-filter-sidebar {
        left: 0;
    }

    .rose-close-filters-btn {
        display: flex; /* Show close button */
        background: none;
        border: none;
        cursor: pointer;
        line-height: 1;
        align-items: center;
        justify-content: center;
        padding: 5px;
    }

    .rose-close-filters-btn svg {
        width: 24px;
        height: 24px;
    }
}

.rose-filter-group {
    margin-bottom: 25px;
}

.rose-filter-group h4 {
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 10px;
    font-weight: 600;
}

/* Accordion Styles */
.rose-accordion-title {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rose-accordion-icon {
    transition: transform 0.3s ease;
    font-size: 12px;
}

.rose-accordion-group.expanded .rose-accordion-icon {
    transform: rotate(90deg);
}

.rose-accordion-content {
    padding-left: 10px;
    margin-top: 10px;
}

.rose-price-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rose-price-inputs input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.rose-checkbox-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rose-filter-actions {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rose-apply-filters-btn {
    background: #000;
    color: #fff;
    border: none;
    padding: 12px;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    transition: background 0.3s, color 0.3s;
}

.rose-apply-filters-btn:hover {
    background: #333;
    color: #fff !important;
}

.rose-reset-filters-link {
    text-align: center;
    color: #666;
    text-decoration: underline;
    font-size: 12px;
    text-transform: uppercase;
}

/* =========================================
   Estilos para Breadcrumbs en Single Product
   ========================================= */
.single-product .woocommerce-breadcrumb {
    line-height: 1.2 !important;
}

/* =========================================
   11. Alineación de Swatches en Loop (Archive)
   ========================================= */

/* 1. Asegurar que el item del loop ocupe toda la altura de la fila */
.e-loop-item {
    height: 100%;
}

/* 2. Asegurar que el contenedor personalizado 'catprod' ocupe toda la altura */
.catprod {
    height: 100%;
}

/* 3. Convertir el contenedor interno en una columna flex para distribuir espacio */
.catprod > .e-con-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 4. Empujar el último elemento (Swatches + Botón) hacia el fondo */
/* Excluimos elementos absolutos si los hubiera, aunque last-child suele funcionar bien */
.catprod > .e-con-inner > .elementor-element:last-child {
    margin-top: auto;
    width: 100%; /* Asegurar ancho completo */
}

/* Ajustes opcionales para los swatches en el loop */
.hello-child-loop-swatches {
    /* Eliminamos min-height fijo para permitir flujo natural */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Alinear contenido al fondo del contenedor si sobra espacio */
}

.hello-child-loop-swatches .hello-child-swatches {
    margin-bottom: 8px !important;
}