/*
Theme Name: Astra-child
Description: Astra personalizado optimizado
Author: Alicia Martinez
Template: astra
Version: 4.7.3
*/

/* ===================================================== */
/* ================== GLOBAL STYLES ==================== */
/* ===================================================== */

body {
    --wp--custom--ast-default-block-right-padding: 0 !important;
    --wp--custom--ast-default-block-left-padding: 0 !important;
    overflow-x: hidden;
    margin: 0;
}

a {
    text-decoration: none !important;
}

/* ===================================================== */
/* ================== TOP BAR ========================== */
/* ===================================================== */

.top-bar {
    background: #000;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1002;
}

body.admin-bar .top-bar {
    top: 32px;
}

/* ===================================================== */
/* ================== NAVBAR BASE ====================== */
/* ===================================================== */

body.admin-bar #wpadminbar {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999 !important;
}

body.admin-bar .top-bar,
body.admin-bar .navbar.fixed-top {
    top: 32px;  /* Ajusta el espacio para no tapar la barra de administración */
}

body.admin-bar .navbar-nav .nav-link {
    color: #000 !important;  /* Asegúrate de que los enlaces sean visibles */
}


/* ===================================================== */
/* ================== ADMIN BAR ====================== */
/* ===================================================== */
#wpadminbar {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999 !important;
    display: block !important;  /* Asegúrate de que no esté oculta */
}


/* Ajustar top-bar y navbar para no solaparse con la admin bar */
body.admin-bar .top-bar {
    top: 32px; /* 32px es la altura de la admin bar por defecto */
}

body.admin-bar .navbar.fixed-top {
    top: 32px; /* Empujar navbar hacia abajo para no tapar la admin bar */
}

/* Ajustar elementos dentro del navbar si es necesario */
body.admin-bar .navbar-brand img {
    margin-top: 5px; /* Ajusta la distancia del logo si se ve mal */
}

/* Ajustar el menú desplegable (hamburguesa) para asegurar que no se oculte */
body.admin-bar .navbar-toggler {
    margin-top: 5px; /* Para no tapar la barra de admin */
}


/* ===================================================== */
/* ================== NAVBAR STATES ==================== */
/* ===================================================== */

/* Estado transparente (Home arriba) */
.navbar-transparent {
    background: transparent;
}

.navbar-transparent .nav-link,
.navbar-transparent .navbar-icons a {
    color: #ffffff !important;
}

/* Hamburger blanco */
.navbar-transparent .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Estado sólido (Scroll o resto páginas) */
.navbar-solid {
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.navbar-solid .nav-link,
.navbar-solid .navbar-icons a,
.navbar-solid .menu-item a {
    color: #000000 !important;
}

/* Hamburger oscuro */
.navbar-solid .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23333' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* ===================================================== */
/* ================== NAVBAR ICONS ===================== */
/* ===================================================== */

.navbar-icons {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.navbar-icons a {
    font-size: 20px;
    margin-left: 20px;
    transition: color 0.3s ease;
}

.navbar-icons a:hover {
    color: #4f4e4e;
}

/* ===================================================== */
/* ================== RESPONSIVE NAVBAR ================ */
/* ===================================================== */

@media (max-width: 991.98px) {

    .custom-navbar {
        background: rgba(255,255,255,0.95);
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 999;
        padding: 1rem;
        backdrop-filter: blur(8px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    }
    

    .navbar-nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .navbar-nav .nav-link {
        font-size: 1.1rem;
        color: #333 !important;
    }

    .navbar-icons {
        justify-content: flex-start;
        margin-top: 1rem;
    }

    .dropdown-menu {
        position: static;
        display: none;
        margin: 0;
        background-color: #000;
    }

    .dropdown-item.dropdown-toggle::after {
        content: " ▾";
    }

    .dropdown-item.dropdown-toggle:hover + .dropdown-menu,
    .dropdown-item.dropdown-toggle:focus + .dropdown-menu {
        display: block;
    }
    
/* Cuando el menú colapsable está abierto */
    .navbar-collapse.show .navbar-icons a {
        color: #000 !important; /* Iconos negros */
    }
    
}

/* ===================================================== */
/* ================== DROPDOWNS ======================== */
/* ===================================================== */

.dropdown-menu .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
    margin-top: -5px;
}

.dropdown:hover > .dropdown-menu,
.dropdown-menu > .dropdown-item:hover > .dropdown-menu {
    display: block;
}

/* Dropdown transparente */
.navbar-transparent .dropdown-menu {
    background: rgba(0,0,0,0.85);
    border: none;
}

.navbar-transparent .dropdown-item {
    color: #ffffff !important;
}

.navbar-transparent .dropdown-item:hover {
    color: #dddddd !important;
}

/* Dropdown sólido */
.navbar-solid .dropdown-menu {
    background: #ffffff;
    border: 1px solid #ddd;
}

.navbar-solid .dropdown-item {
    color: #333 !important;
}

.navbar-solid .dropdown-item:hover {
    color: #000 !important;
}

/* ===================================================== */
/* ================== HERO / BANNER ==================== */
/* ===================================================== */

.banner-custom {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    width: 100%;
    height: 60vh;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0;
}

.banner-custom h1,
.banner-custom p,
.banner-custom a {
    position: relative;
    z-index: 2;
    color: #ffffff;
}

.banner-custom a.btn {
    margin-top: 20px;
}

/* Full width fix */
.wp-block-columns.alignfull,
.wp-block-column.is-layout-constrained,
.wp-block-image.alignfull,
.home .ast-container,
.home .wp-block-image img {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100%;
    width: 100%;
}

.content-area.primary {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ===================================================== */
/* ================== BUTTONS ========================== */
/* ===================================================== */

.btn-primary {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #000 !important;
    transition: 0.3s ease;
}

.btn-primary:hover {
    background: #d5d6d7 !important;
    border-color: #d5d6d7 !important;
}

.checkout-button {
    color: #ffffff !important;
}

/* ===================================================== */
/* ================== CARDS ============================ */
/* ===================================================== */

.card {
    border-radius: 10px;
    overflow: hidden;
    transition: 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.card-img-top {
    object-fit: cover;
    width: 100%;
}

.card-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
}

.card-text.text-primary {
    font-size: 1.2rem;
    font-weight: 600;
}

/* ===================================================== */
/* ================== WOOCOMMERCE ====================== */
/* ===================================================== */

.woocommerce ul.products,
.woocommerce-page ul.products {
    display: flex !important;
    gap: 20px !important;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .woocommerce ul.products {
        display: block !important;
    }
}

.woocommerce-product-gallery__trigger {
    display: none !important;
}

a.button.wc-forward,
a.button.wc-backward {
    color: #ffffff !important;
    background-color: rgb(170,108,9) !important;
}

.woocommerce-message,
.woocommerce-info {
    border-color: rgb(170,108,9) !important;
    box-shadow: none !important;
}

.woocommerce-message::before,
.woocommerce-info::before {
    color: rgb(170,108,9) !important;
}

/* ===================================================== */
/* ================== FOOTER =========================== */
/* ===================================================== */

.footer {
    background: #333;
    color: #fff;
}

.footer h5 {
    font-weight: bold;
    color: #f8f9fa;
}

.footer a {
    color: #aaa;
    transition: color 0.3s;
}

.footer a:hover {
    color: #f8f9fa;
}

/* ===================================================== */
/* ================== ACCORDION ======================== */
/* ===================================================== */

.accordion-button {
    background: #fff;
    color: #333;
    border: none;
    box-shadow: none;
    transition: 0.3s ease;
}

.accordion-button:hover,
.accordion-button:not(.collapsed) {
    background: #f1f1f1;
}

/* ======================== */
/* Enlaces solo en contenido */
/* ======================== */

body:not(.home) .site-content a,
body:not(.home) .content-area a,
body:not(.home) .woocommerce a {
    color: #000 !important;
}

body:not(.home) .site-content a:hover,
body:not(.home) .content-area a:hover,
body:not(.home) .woocommerce a:hover {
    color: #333 !important;
}

/* ======================== */
/* Compensar navbar fija */
/* Solo fuera de home */
/* ======================== */


/* ======================== */
/* Offset navbar SOLO producto */
/* ======================== */

.single-product .margin-page {
    margin-top: 140px;
}

/* ======================== */
/* Offset navbar SOLO página de carrito */
/* ======================== */

body.woocommerce-cart .entry-content.clear,
body.woocommerce-checkout .entry-content.clear {
    margin-top: 140px; /* igual que en producto */
}

/* Tallas en cuadrados */
/* ======================== */

.option-selector__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.opt-btn {
    display: none; /* Ocultar radio por defecto */
}

.opt-label {
    display: inline-flex !important; /* Fusionado de las dos versiones */
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    /* Propiedades añadidas para asegurar visibilidad y alineación */
    min-width: 30px;
    min-height: 30px;
    text-align: center;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    white-space: nowrap;
    /* Colores y fuentes base para visibilidad */
    color: #333 !important; /* Color de texto oscuro por defecto */
    font-size: 16px !important;
    line-height: 1 !important; /* Ajustar línea para el texto */
}

.opt-label:hover {
    background-color: #f1f1f1;
}

/*      Añadir al carrito    */
/* ======================== */

.opt-btn:checked + .opt-label {
    background-color: #333 !important;
    color: #fff !important; /* Texto blanco en seleccionado */
    border-color: #333 !important;
}

/* El texto dentro del label cuando está seleccionado */
.opt-btn:checked + .opt-label .opt-label__text {
    color: #fff !important;
}

/* No disponible */
.opt-btn.is-unavailable + .opt-label {
    text-decoration: line-through;
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.opt-label__text {
    /* Aseguramos que el span interior también tenga color y tamaño base */
    color: inherit; /* Heredar del padre por defecto */
    font-size: inherit; /* Heredar del padre por defecto */
    line-height: inherit; /* Heredar del padre por defecto */
}


/* ===================================================== */
/* NAVBAR TRANSPARENTE: DROPDOWN ESCRITORIO ANTES SCROLL */
/* Letras negras y fondo blanco para que se vea correctamente */
/* ===================================================== */


    /* Dropdown principal */
    .navbar.navbar-transparent .dropdown-menu {
        background: #ffffff; /* Fondo blanco */
    }

    .navbar.navbar-transparent .dropdown-item {
        color: #000 !important; /* Letras negras */
    }

    .navbar.navbar-transparent .dropdown-item:hover,
    .navbar.navbar-transparent .dropdown-item:focus {
        color: #333 !important; /* Letras más oscuras al pasar el ratón */
        background-color: #f8f8f8; /* Fondo suave al hover */
    }

    /* Submenús (si existen) */
    .navbar.navbar-transparent .dropdown-menu .dropdown-menu {
        background: #ffffff;
    }

    .navbar.navbar-transparent .dropdown-menu .dropdown-item {
        color: #000 !important;
    }

    .navbar.navbar-transparent .dropdown-menu .dropdown-item:hover,
    .navbar.navbar-transparent .dropdown-menu .dropdown-item:focus {
        color: #333 !important;
        background-color: #f8f8f8;
    }