/*
Theme Name: DGrey
Description: Tema hijo de Fashion Designer.
Author: DGrey
Template: fashion-designer
Version: 1.0.0
Text Domain: dgrey
*/

/*
 * Ajustes del footer personalizados (centrado y responsive)
 * Estos estilos se aplican sobre el footer sobreescrito en footer.php del tema hijo.
 */

/* Estilo base de enlaces del tema hijo */
a {
    text-decoration: none;
}

/* Reglas base */
#footer .widget,
#footer .widget .widget-title,
#footer .widget address,
.footer #footer-2 .copyright p {
    text-align: center;
}


/* Listas dentro de widgets (categorías, etc.) */
#footer .widget ul {
    list-style: none;
    padding: 25px 0px;
    margin: 0.25rem 0 0;
}

/* Mostrar elementos de lista en línea y centrados */
#footer .widget ul li {
    display: inline-block;
    margin: 0 0.5rem 0.5rem;
}

#footer .widget ul li a {
    text-decoration: none;
}

/* Bloques del footer: separación vertical en móvil */
#footer .footer-block {
    margin-bottom: 24px;
}

@media (min-width: 992px) {
    #footer .footer-block { margin-bottom: 0; }
}

/* Buscar: centrar formulario y controlar ancho */
#search form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0px 50px;
}

#search input[type="search"],
#search input[type="text"] {
    width: 100%;
}

#search input[type="submit"],
#search button {
    margin-top: 15px;
    padding: 10px 16px;
}

/* Redes sociales: centrar contenedor e incrementar área táctil */
#nuestras-redes .custom-social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding-left: 0;
    margin: 0.25rem 0 0;
}

#nuestras-redes .custom-social-icons li { margin: 0; }

#nuestras-redes .custom-social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
    font-size: 1.1rem;
    transition: all .2s ease-in-out;
}

#nuestras-redes .custom-social-icons a:hover,
#nuestras-redes .custom-social-icons a:focus {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.5);
}



/* Ajustes responsive adicionales */
@media (max-width: 767.98px) {
    /* Aumentar tamaño de iconos en móvil para mejor accesibilidad */
    #nuestras-redes .custom-social-icons a {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }

    /* Separación entre columnas apiladas */
    #footer .footer-block + .footer-block {
        margin-top: -70px;
    }
    #footer .widget ul {
        padding-bottom: 0px;
    }
}

/* --- Fixes: redes sociales y categorías en footer (2025-12-03) --- */
/* Asegurar iconos circulares, centrados y sin fondo/cuadro amarillo */
#nuestras-redes .custom-social-icons a {
    background-color: transparent !important; /* anula fondo heredado */
    border-radius: 50% !important;            /* mantiene forma circular */
    border: 1px solid rgba(255,255,255,0.25); /* borde sutil */
    box-shadow: none !important;              /* evita resaltes cuadrados */
    outline: none;                            /* el focus se manejará con color/borde */
}
#nuestras-redes .custom-social-icons a:hover,
#nuestras-redes .custom-social-icons a:focus {
    background-color: transparent !important; /* no rellenar de dorado */
    color: #d4af37;                           /* dorado para el icono */
    border-color: #d4af37;                    /* borde dorado al hover/focus */
}
#nuestras-redes .custom-social-icons a i {
    background: none !important;              /* evita fondos sobre el <i> */
}


/* El tema padre añade estilos de fondo/bordes y pseudo-elementos en enlaces de widgets.
   Los anulamos explícitamente solo en la sección "Nuestras redes" del footer. */
#nuestras-redes .custom-social-icons a,
#nuestras-redes .custom-social-icons a:link,
#nuestras-redes .custom-social-icons a:visited {
    background: transparent !important;
    box-shadow: none !important;
}
#nuestras-redes .custom-social-icons a:hover,
#nuestras-redes .custom-social-icons a:focus,
#nuestras-redes .custom-social-icons a:active {
    background: transparent !important; /* evita relleno dorado al hover */
}
#nuestras-redes .custom-social-icons a::before,
#nuestras-redes .custom-social-icons a::after {
    content: none !important;          /* elimina cuadros decorativos del tema padre */
    display: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
#nuestras-redes .custom-social-icons a i::before,
#nuestras-redes .custom-social-icons a i::after {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
/* Asegurar forma circular y centrado (refuerzo) */
#nuestras-redes .custom-social-icons a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50% !important;
    overflow: hidden; /* evita esquinas visibles de hijos */
}
@media (max-width: 767.98px) {
    #nuestras-redes .custom-social-icons a { width: 48px; height: 48px; }
}



/* --- Final overrides (2025-12-03 13:27 local) — social icons shape/hover + categories list --- */
/* Reset cualquier fondo/cuadro heredado en los enlaces de redes dentro del footer */
#footer #nuestras-redes .custom-social-icons li,
#footer #nuestras-redes .custom-social-icons a,
#footer #nuestras-redes .custom-social-icons a:link,
#footer #nuestras-redes .custom-social-icons a:visited,
#footer #nuestras-redes .custom-social-icons a:hover,
#footer #nuestras-redes .custom-social-icons a:focus,
#footer #nuestras-redes .custom-social-icons a:active,
#footer #nuestras-redes .custom-social-icons i,
#footer #nuestras-redes .custom-social-icons i::before {
    background: transparent !important;
    box-shadow: none !important;
}

/* Asegurar botón circular y centrado (tamaño táctil adecuado) */
#footer #nuestras-redes .custom-social-icons a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    color: inherit;
    line-height: 1; /* evita desalineación vertical del ícono */
    overflow: hidden; /* oculta posibles esquinas de hijos */
    outline: none !important; /* usaremos borde como indicador de foco */
}

/* Eliminar pseudo-elementos decorativos que puedan pintar cuadros (no afectar iconos Font Awesome) */
#footer #nuestras-redes .custom-social-icons a::before,
#footer #nuestras-redes .custom-social-icons a::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Hover/Focus: solo cambia color del ícono y el borde a dorado, sin rellenar fondo */
#footer #nuestras-redes .custom-social-icons a:hover,
#footer #nuestras-redes .custom-social-icons a:focus {
    color: #d4af37 !important;       /* dorado para el ícono */
    border-color: #d4af37 !important;/* borde dorado */
    transform: translateY(-1px);
}

/* Tamaño mayor en móvil para accesibilidad */
@media (max-width: 767.98px) {
    #footer #nuestras-redes .custom-social-icons a {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }
}

/* Información de contacto: evitar desbordes en email/teléfono */
#informacion-contacto address {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Copyright: centrar texto */
.footer .copyright p {
    margin: 0;
}

/* Floating WhatsApp Button (bottom-left) */
.whatsapp-fab {
    position: fixed;
    left: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #25D366; /* WhatsApp brand green */
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    line-height: 1;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    z-index: 9999; /* on top of most UI */
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.whatsapp-fab:hover,
.whatsapp-fab:focus {
    background-color: #1ebe57;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.32);
    outline: none;
}
.whatsapp-fab svg {
    width: 28px;
    height: 28px;
    display: block;
    color: currentColor;
}

/* Responsive sizing: slightly larger on touch devices */
@media (max-width: 767.98px) {
    .whatsapp-fab {
        width: 64px;
        height: 64px;
        left: 14px;
        bottom: 14px;
    }
    .whatsapp-fab svg {
        width: 30px;
        height: 30px;
    }
}

/* === WooCommerce: Botón "Pedir por Whatsapp" alineado con "Añadir al carrito" === */
.dg-dual-actions {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 10px; /* espacio entre botones */
    width: 100%;
}

/* Asegurar que ambos botones ocupen el mismo ancho y se vean idénticos */
.dg-dual-actions .button,
.dg-dual-actions .add_to_cart_button,
.dg-dual-actions .single_add_to_cart_button,
.dg-dual-actions .dg-whatsapp-btn {
    flex: 1 1 0;
    text-align: center;
    margin: 0; /* evitar márgenes que rompan la alineación */
    /* Evitar desbordes en tarjetas estrechas y asegurar igualdad visual */
    white-space: normal; /* permitir salto de línea si no hay ancho suficiente */
    min-width: 0; /* permite que el flex item se reduzca sin desbordar */
    max-width: 100%;
    box-sizing: border-box;
    display: inline-flex; /* centra contenido vertical/horizontalmente */
    align-items: center;
    justify-content: center;
}

/* Heredar el estilo base del tema padre y solo ajustar color para WhatsApp si se desea.
   Por defecto, usamos exactamente las mismas clases core (button, add_to_cart_button)
   para que ambos botones luzcan iguales. Si el tema los diferencia por color,
   puedes descomentar el bloque inferior para forzar igualdad total.
*/
/*
.dg-dual-actions .dg-whatsapp-btn {
    background-color: inherit;
    color: inherit;
    border-color: inherit;
    font-weight: inherit;
    line-height: inherit;
}
.dg-dual-actions .dg-whatsapp-btn:hover,
.dg-dual-actions .dg-whatsapp-btn:focus {
    background-color: inherit;
    color: inherit;
    border-color: inherit;
}
*/

/* En móviles, si el espacio es reducido, apilar verticalmente */
@media (max-width: 480px) {
    .dg-dual-actions {
        flex-direction: column;
        gap: 8px;
    }
    .dg-dual-actions .button,
    .dg-dual-actions .add_to_cart_button,
    .dg-dual-actions .single_add_to_cart_button,
    .dg-dual-actions .dg-whatsapp-btn {
        width: 100%;
    }
}

/* === Ajustes específicos: página de producto individual === */
/* Hacer que el formulario del botón nativo sea un ítem flex igual al de WhatsApp */
.dg-dual-actions--single form.cart {
    flex: 1 1 0;
    margin: 0 !important;
    width: auto !important;
}
.dg-dual-actions--single form.cart .single_add_to_cart_button {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Igualar métricas visuales entre ambos botones en el single (altura, padding, grosor) */
.dg-dual-actions--single .single_add_to_cart_button,
.dg-dual-actions--single .dg-whatsapp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    font-size: inherit;         /* evitar que uno se vea más grande */
    font-weight: inherit;       /* mismo grosor de texto */
    line-height: 1;             /* centra el texto verticalmente y evita desfases */
    padding: 0.618em 1em;       /* padding estándar estilo Woo */
    min-height: 44px;           /* misma altura mínima táctil */
    border-width: 1px;          /* mismo grosor de borde */
    border-style: solid;        /* asegurar estilo consistente */
    border-radius: 3px;         /* misma curvatura */
}

/* Refuerzo específico para el botón de WhatsApp en single: evitar overrides del tema */
.dg-dual-actions--single .dg-whatsapp-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0.618em 1em !important;
    min-height: 44px !important;
    white-space: normal !important;
}
.dg-dual-actions--single .dg-whatsapp-btn::before,
.dg-dual-actions--single .dg-whatsapp-btn::after {
    content: none !important;
    display: none !important;
}

/* Asegurar que el contenedor form se comporte igual que el link como item flex */
.dg-dual-actions--single form.cart {
    display: flex;              /* mantiene qty + botón en línea sin afectar altura */
    align-items: stretch;       /* el botón ocupa toda la altura del item */
}

/* Forzar apilado de botones en todos los listados (tienda/categorías/búsqueda) */
.woocommerce ul.products li.product .dg-dual-actions {
    flex-direction: column;
    gap: 8px;
}
.woocommerce ul.products li.product .dg-dual-actions .button,
.woocommerce ul.products li.product .dg-dual-actions .add_to_cart_button,
.woocommerce ul.products li.product .dg-dual-actions .single_add_to_cart_button,
.woocommerce ul.products li.product .dg-dual-actions .dg-whatsapp-btn {
    width: 100%;
}

/* === Evitar desbordes en "Productos relacionados", upsells y cross-sells === */
.related .dg-dual-actions,
.upsells .dg-dual-actions,
.cross-sells .dg-dual-actions {
    flex-direction: column;
    gap: 8px;
}
.related .dg-dual-actions .button,
.related .dg-dual-actions .add_to_cart_button,
.related .dg-dual-actions .single_add_to_cart_button,
.related .dg-dual-actions .dg-whatsapp-btn,
.upsells .dg-dual-actions .button,
.upsells .dg-dual-actions .add_to_cart_button,
.upsells .dg-dual-actions .single_add_to_cart_button,
.upsells .dg-dual-actions .dg-whatsapp-btn,
.cross-sells .dg-dual-actions .button,
.cross-sells .dg-dual-actions .add_to_cart_button,
.cross-sells .dg-dual-actions .single_add_to_cart_button,
.cross-sells .dg-dual-actions .dg-whatsapp-btn {
    width: 100%;
}