/*
Theme Name: Axben Tema Personalizado
Theme URI: https://tusitio.com/
Author: Catmedia El Salvador
Author URI: https://tusitio.com/
Description: Tema a la medida para Axben desde cero a partir del figma
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: mitemawoo
*/



body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Figtree', sans-serif;
}

.yith-wcwl-add-to-wishlist-button:is(button):not(.yith-wcwl-theme-button-style){
    width: 36px;
    display: flex;
    justify-content: center;
    padding-right: 5px;
}


.how-to-buy {
   
    background-color: #d8ede0; 
    padding: 30px 0;
    width: 100%;
}

.how-to-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 50px;
    display: flex;
    align-items: center;
    gap: 50px; 
}

.how-to-title {
    color: #004E01; 
    font-size: 2.2rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap; /
}

.how-to-steps {
    display: flex;
    align-items: center;
    gap: 30px;
    flex: 1; 
}

.step-item {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1; 
}

.step-number {
    color: #00B903;
    font-size: 3.5rem;
    font-weight: 600;
    line-height: 0.8;
}

.step-text h3 {
    color: #004E01;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 5px 0;
}

.step-text p {
    color: #004E01; 
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.4;
}




.nav-prev, .nav-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 46px;
    background-color: #8f8373;
    color: #ffffff;
    border-radius: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
    z-index: 100;
}

.nav-prev { left: 30px; }
.nav-next { right: 30px; }


.dots-pagination {
    position: absolute;
    bottom: 20px; 
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    padding: 8px 16px;
    background-color: white; 
    border-radius: 30px;
}

.dot {
    width: 11px;
    height: 11px;
    background-color: #ccc;
    border-radius: 50%;
    margin: 0 7px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.active {
    background-color: #009d31; 
}



/* ==========================================================================
   Estilos Mobile (Figma Móvil)
   ========================================================================== */
@media screen and (max-width: 991px) {


     .how-to-container {
        flex-direction: column; 
        align-items: flex-start;
        padding: 0 20px;
        gap: 20px;
    }

    .how-to-title {
        font-size: 2rem;
    }

    .how-to-steps {
        width: 100%;
        gap: 15px;
        
       
        overflow-x: auto; 
        
      
        scroll-snap-type: x mandatory; 
        -webkit-overflow-scrolling: touch; 
        
       
        scrollbar-width: none; 
        -ms-overflow-style: none;
        padding-bottom: 10px;
    }

    .how-to-steps::-webkit-scrollbar {
        display: none; 
    }

    .step-item {
        min-width: 65%; 
        flex-shrink: 0; 
        
        scroll-snap-align: start; 
    }


    .step-number {
    font-size: 40px;
}


    .step-text h3 {
    font-size: 16px;

}

.step-text p {
    font-size: 11px;
}
    
}

/* ==========================================================================
   AXBEN Custom My Account Layout (REVISADO Y CORREGIDO)
   ========================================================================== */

/* 1. LAYOUT PRINCIPAL - DESKTOP */
.woocommerce-account .woocommerce {
    display: flex;
    flex-direction: row-reverse; /* Nav Derecha, Perfil Izquierda NATIVAMENTE */
    justify-content: flex-start;
    align-items: flex-start;
    gap: 40px; 
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Columna de Navegación Nativa (ahora a la derecha) */
.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 35%; 
    float: none; margin: 0; padding: 0;
}
/* Ocultamos totalmente la lista <ul> nativa */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: none !important; 
}

/* Columna de Contenido Principal Nativa (ahora a la izquierda) */
.woocommerce-account .woocommerce-MyAccount-content {
    width: 65%; 
    float: none; margin: 0; padding: 0;
}

/* ==========================================================================
   ALINEACIÓN MASTER (DESKTOP $> 768px)
   Alinea el inicio de los botones con el inicio de la CARD BLANCA, no del H1.
   ========================================================================== */
@media screen and (min-width: 769px) {
    .axben-wc-account-navigation {
        /* Shifteamos la columna de nav hacia abajo */
        /* Sumamos la altura estimada del H1 (36px font + ~20px margin-bottom) */
        margin-top: 65px; 
    }
}


/* ==========================================================================
   1. TARJETA DE PERFIL (Figma Match)
   ========================================================================== */
.axben-perfil-title {
    font-size: 36px;
    font-weight: 700;
    color: #111;
    margin: 0 0 20px 0; /* Este margen es clave para la alineación */
    letter-spacing: -1px;
}

.mc-profile-card {
    background-color: #ffffff;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    overflow: hidden; 
}

.green-side-accent {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 20px; 
    background-color: #00b912;
}

.card-inner-flex {
    padding: 30px 30px 30px 45px; /* Espacio para barra verde */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.status-badge {
    background-color: #eaf4ea; 
    color: #00b912;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.mc-avatar-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-top: 5px;
}

.mc-user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mc-username {
    font-size: 24px;
    font-weight: 700;
    color: #111;
    margin: 0;
}

.mc-email {
    font-size: 14px;
    color: #888;
    margin: 0;
}

.mc-profile-divider {
    width: 100%;
    height: 1px;
    background-color: #f0f0f0;
    margin: 10px 0;
}

.mc-profile-actions {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 15px;
}

.mc-outline-btn {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 12px 15px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    background-color: #ffffff;
    border: 1px solid #e2e4e8;
    text-decoration: none;
    transition: all 0.3s;
}

.mc-outline-btn:hover {
    background-color: #f4f5f7;
    color: #111;
}

/* ==========================================================================
   2. BOTONES DE NAVEGACIÓN (Figma Match)
   ========================================================================== */
.axben-wc-account-navigation .account-nav-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.axben-wc-account-navigation .account-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 25px;
    border-radius: 15px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s;
}

/* Solid Green (Activo) */
.axben-wc-account-navigation .account-nav-item.active-solid {
    background-color: #00b912;
    color: #ffffff;
}

/* Light Green (Inactivo) */
.axben-wc-account-navigation .account-nav-item.light-green {
    background-color: #eaf4ea; 
    color: #00b912; 
}
.axben-wc-account-navigation .account-nav-item.light-green:hover {
    background-color: #dcedc8;
}

/* Botón Contacto a Asesor (Figma Match) */
.contact-advisor-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background-color: #00b912; 
    color: #ffffff;
    width: 100%;
    padding: 18px 0;
    border-radius: 30px; 
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.3s;
    margin-top: 10px;
}
.contact-advisor-btn:hover {
    background-color: #00990f;
}

/* ==========================================================================
   3. RESPONSIVE MÓVIL (Magia para Apilar Correctamente - CORREGIDO)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* Forzamos que la columna del contenido (Perfil) vaya primero con order negativo */
    .woocommerce-account .woocommerce {
        flex-direction: column;
        gap: 30px;
        padding: 0 15px;
    }
    
    .woocommerce-account .woocommerce-MyAccount-content {
        order: -1; /* <--- MAGIA: Forzamos el Dashboard arriba del todo */
        width: 100%;
    }
    
    .woocommerce-account .woocommerce-MyAccount-navigation {
        order: 1; /* <--- MAGIA: Forzamos la navegación abajo */
        width: 100%;
    }

    /* Ajuste de acciones dentro de la card en móvil */
    .mc-profile-actions {
        flex-direction: column;
    }
    .mc-outline-btn {
        width: 100%;
        box-sizing: border-box;
    }

    /* ==========================================
       NUEVO: FORZAR ANCHO COMPLETO EN BOTONES
       ========================================== */
    .axben-wc-account-navigation,
    .axben-wc-account-navigation .account-nav-grid {
        width: 100%;
    }
    
    .axben-wc-account-navigation .account-nav-item {
        width: 100%;
        box-sizing: border-box;
    }
}
/* ==========================================================================
   NOTIFICACIÓN TOAST (Lista de Deseos)
   ========================================================================== */
.axben-toast-notification {
    position: fixed;
    bottom: -100px; /* Empieza escondido abajo */
    left: 50%;
    transform: translateX(-50%);
    background-color: #222222; /* Fondo oscuro elegante */
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    z-index: 9999;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Animación con un pequeño rebote */
    pointer-events: none; /* Para que no estorbe si el usuario hace clic ahí */
}

/* Estado activo cuando se muestra en pantalla */
.axben-toast-notification.show-toast {
    bottom: 40px; /* Sube a la pantalla */
    opacity: 1;
}

.axben-toast-icon {
    color: #00b912; /* El corazón en verde Axben */
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Forzar que el botón de favoritos siempre sea un círculo con el corazón */
.btn-wishlist {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    text-decoration: none !important;
    transition: all 0.3s ease;
    overflow: hidden; /* Oculta el texto que inyecta el plugin */
    text-indent: -9999px; /* Mueve el texto de YITH fuera de la vista */
}

/* Re-inyectamos el corazón mediante CSS para que sea "indestructible" */
.btn-wishlist::before {
    content: "\f487"; /* Código de Dashicons para el corazón */
    font-family: "dashicons";
    text-indent: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    pointer-events: none;
}

/* Colores cuando NO está en la lista */
.btn-wishlist.add_to_wishlist {
    background-color: #eaf4ea;
    color: #00b912;
}

/* Colores cuando YA ESTÁ en la lista (clase que añade YITH automáticamente) */
.btn-wishlist.yith-wcwl-wishlistaddedbrowse,
.btn-wishlist.yith-wcwl-wishlistexistsbrowse {
    background-color: #00b912 !important;
    color: #ffffff !important;
}

/* Efecto hover */
.btn-wishlist:hover {
    transform: scale(1.1);
}




/* ==========================================================================
   AJUSTE DE CONTENEDOR PARA PERMITIR FULL WIDTH ABAJO
   ========================================================================== */
.woocommerce-account .woocommerce {
    flex-wrap: wrap; /* ¡Clave! Permite que el banner salte a la siguiente línea */
}





/* ==========================================================================
   BANNER DE MEMBRESÍA AXBEN (Figma Match)
   ========================================================================== */
.axben-membership-wrapper {
    width: 93%; /* Ocupa el 100% debajo de la navegación y el perfil */
    margin-top: 30px;
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.axben-membership-card {
    display: flex;
    border-radius: 24px;
    overflow: hidden;
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 168, 3, 0.15);
}

/* --- Columna Izquierda (Info) - CORREGIDA SIN LÍNEAS --- */
.mc-info-col {
    flex: 1;
    padding: 50px 60px;
    background-color: #00A803; /* Verde principal solicitado - AHORA SÓLIDO */
    
    /* ELIMINAMOS ESTA LÍNEA QUE CAUSABA LAS FRANJAS:
       background-image: repeating-linear-gradient(...); 
    */
}

.mc-badge-dark {
    background-color: #075310;
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 25px;
}

.mc-promo-title {
    font-size: 38px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin: 0 0 15px 0;
    letter-spacing: -1px;
}

.mc-promo-desc {
    font-size: 15px;
    opacity: 0.95;
    margin: 0 0 25px 0;
    line-height: 1.5;
    max-width: 90%;
}

.mc-benefits-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 35px;
}

.mc-benefit-item {
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 30px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mc-btn-whatsapp-white {
    background-color: #ffffff;
    color: #00A803;
    padding: 15px 30px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s;
}

.mc-btn-whatsapp-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    color: #014e02;
}

/* --- Columna Derecha (Precio) --- */
.mc-price-col {
    width: 320px; /* Ancho fijo para la sección del precio */
    background-color: #004f01; /* Verde Oscuro solicitado */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px;
    position: relative;
    /* Sombre lateral para separar áreas */
    box-shadow: -10px 0 20px rgba(0,0,0,0.08);
}

.mc-price-large {
    font-size: 150px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    letter-spacing: -4px;
    margin-bottom: 15px;
}

.mc-billing-cycle {
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0.9;
}

/* ==========================================================================
   VISTA MÓVIL (Figma Match Vertical)
   ========================================================================== */
@media screen and (max-width: 991px) {

    .axben-membership-wrapper {
    width: 100%; /* Ocupa el 100% debajo de la navegación y el perfil */
}


    .axben-membership-card {
        flex-direction: column;
    }

    .mc-info-col {
        padding: 40px 25px;
    }

    .mc-promo-title {
        font-size: 32px;
    }

    .mc-btn-whatsapp-white {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }

    .mc-price-col {
        width: 100%;
        padding: 50px 20px;
        box-shadow: 0 -10px 20px rgba(0,0,0,0.05);
    }
    
    .mc-price-large {
        font-size: 80px;
    }
}