/*
 * HEADER STYLES - 3sidedcube inspired
 * Estilos para el header principal del sitio
 * Minimalista y limpio
 */

/* ========================================
   CONTAINER PRINCIPAL DEL HEADER
   ======================================== */

/* Header principal - súper compacto */
.site-primary-header-wrap {
    background: var(--customify-blanco) !important;
    padding: 12px 0 !important;
    position: relative !important;
}

/* Borde negro que ocupa todo el ancho de la pantalla */
.site-header-focus-item[data-section="section-primary-header-builder"]::after,
.site-primary-header-wrap::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    height: var(--customify-border-thick) !important;
    background: var(--customify-negro) !important;
    z-index: 0 !important;
}

/* Asegurar que el header padre también permita el borde completo */
.site-header[itemtype*="WPHeader"],
#masthead {
    position: relative !important;
}

.site-header[itemtype*="WPHeader"]::after,
#masthead::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--customify-border-thick) !important;
    background: var(--customify-negro) !important;
    z-index: 0 !important;
}

.ast-builder-grid-row {
    align-items: center !important;
    gap: var(--customify-spacing-xl) !important;
}

/* ========================================
   LOGO / SITE TITLE - Cuadrado verde neón
   ======================================== */

.site-branding {
    padding: 0 !important;
    margin: 0 !important;
}

.site-branding .ast-site-title-wrap {
    margin: 0 !important;
}

.site-branding .site-title {
    margin: 0 !important;
    line-height: 1 !important;
}

.site-branding .site-title a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--customify-verde-neon) !important;
    border: var(--customify-border-thick) solid var(--customify-negro) !important;
    box-shadow: var(--customify-shadow-md) !important;
    padding: var(--customify-spacing-md) var(--customify-spacing-lg) !important;
    font-size: 18px !important;
    font-weight: var(--customify-font-weight-extrabold) !important;
    letter-spacing: -0.5px !important;
    color: var(--customify-negro) !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transition: var(--customify-transition-normal) !important;
    border-radius: 4px !important;
}

.site-branding .site-title a:hover {
    transform: var(--customify-hover-lift-sm) !important;
    box-shadow: var(--customify-shadow-hover) !important;
}

/* ========================================
   MENÚ PRINCIPAL - Minimalista 3sidedcube style
   ======================================== */

.main-header-menu {
    gap: var(--customify-spacing-xl) !important;
}

.main-header-menu .menu-item {
    margin: 0 !important;
    line-height: 1 !important;
}

.main-header-menu .menu-link {
    font-size: 16px !important;
    font-weight: var(--customify-font-weight-semibold) !important;
    color: var(--customify-negro) !important;
    text-decoration: none !important;
    padding: var(--customify-spacing-sm) 0 !important;
    transition: var(--customify-transition-normal) !important;
    position: relative !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    display: inline-block !important;
    letter-spacing: 0.5px !important;
}

/* Hover effect simple - underline */
.main-header-menu .menu-link::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 3px !important;
    background: var(--customify-negro) !important;
    transition: width 0.3s ease !important;
}

.main-header-menu .menu-link:hover::after {
    width: 100% !important;
}

/* Item activo/actual - underline magenta */
.main-header-menu .current-menu-item .menu-link,
.main-header-menu .current_page_item .menu-link {
    color: var(--customify-negro) !important;
}

.main-header-menu .current-menu-item .menu-link::after,
.main-header-menu .current_page_item .menu-link::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 4px !important;
    background: var(--customify-rosa-magenta) !important;
}

/* ========================================
   HEADER CART - Mini carrito
   ======================================== */

.customify-header-cart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 48px !important;
    height: 48px !important;
    background: var(--customify-blanco) !important;
    border: var(--customify-border-thick) solid var(--customify-negro) !important;
    border-radius: var(--customify-border-radius-sm) !important;
    box-shadow: var(--customify-shadow-md) !important;
    color: var(--customify-negro) !important;
    text-decoration: none !important;
    transition: var(--customify-transition-normal) !important;
}

.customify-header-cart:hover {
    background: var(--customify-verde-neon) !important;
    transform: var(--customify-hover-lift-sm) !important;
    box-shadow: var(--customify-shadow-hover) !important;
    color: var(--customify-negro) !important;
}

.customify-header-cart svg {
    width: 22px !important;
    height: 22px !important;
}

.customify-header-cart .cart-count {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    min-width: 20px !important;
    height: 20px !important;
    background: var(--customify-rosa-magenta) !important;
    color: var(--customify-blanco) !important;
    font-size: 11px !important;
    font-weight: var(--customify-font-weight-extrabold) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
    border: 2px solid var(--customify-blanco) !important;
    box-shadow: var(--customify-shadow-sm) !important;
}

/* Cart Wrapper con dropdown */
.customify-header-cart-wrapper {
    position: relative !important;
}

.customify-header-cart-wrapper .customify-header-cart {
    cursor: pointer !important;
}

/* Dropdown del carrito */
.cart-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    width: 320px !important;
    background: var(--customify-blanco) !important;
    border: var(--customify-border-thick) solid var(--customify-negro) !important;
    border-radius: var(--customify-border-radius-sm) !important;
    box-shadow: var(--customify-shadow-lg) !important;
    z-index: 9999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.2s ease !important;
}

.customify-header-cart-wrapper.active .cart-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Header del dropdown */
.cart-dropdown-header {
    padding: var(--customify-spacing-md) !important;
    border-bottom: 2px solid var(--customify-negro) !important;
    font-weight: var(--customify-font-weight-bold) !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.cart-dropdown-count {
    font-weight: var(--customify-font-weight-normal) !important;
    color: #666 !important;
    font-size: 12px !important;
}

/* Items del carrito */
.cart-dropdown-items {
    max-height: 280px !important;
    overflow-y: auto !important;
    padding: var(--customify-spacing-sm) !important;
}

.mini-cart-item {
    display: flex !important;
    gap: var(--customify-spacing-sm) !important;
    padding: var(--customify-spacing-sm) !important;
    border-bottom: 1px solid #eee !important;
}

.mini-cart-item:last-child {
    border-bottom: none !important;
}

.mini-cart-item img {
    width: 50px !important;
    height: 50px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    border: 1px solid #ddd !important;
}

.mini-cart-item .item-details {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
}

.mini-cart-item .item-name {
    font-size: 13px !important;
    font-weight: var(--customify-font-weight-semibold) !important;
    color: var(--customify-negro) !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.mini-cart-item .item-qty-price {
    font-size: 12px !important;
    color: #666 !important;
}

/* Diseños personalizados en mini cart */
.mini-cart-item.custom-design img {
    border: 2px solid var(--customify-rosa-magenta) !important;
    border-radius: 6px !important;
}

/* Link de editar diseño en mini cart */
.mini-cart-edit-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 11px !important;
    color: var(--customify-rosa-magenta) !important;
    text-decoration: none !important;
    margin-top: 4px !important;
    transition: all 0.2s ease !important;
}

.mini-cart-edit-link:hover {
    color: var(--customify-negro) !important;
    text-decoration: underline !important;
}

/* Estado vacío */
.mini-cart-empty {
    padding: var(--customify-spacing-xl) !important;
    text-align: center !important;
    color: #999 !important;
}

.mini-cart-empty span {
    font-size: 48px !important;
    display: block !important;
    margin-bottom: var(--customify-spacing-sm) !important;
    opacity: 0.5 !important;
}

.mini-cart-empty p {
    margin: 0 !important;
    font-size: 14px !important;
}

/* Footer del dropdown */
.cart-dropdown-footer {
    padding: var(--customify-spacing-md) !important;
    border-top: 2px solid var(--customify-negro) !important;
    background: #f9f9f9 !important;
}

.cart-total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: var(--customify-spacing-sm) !important;
    font-size: 14px !important;
}

.cart-total strong {
    font-size: 16px !important;
    color: var(--customify-negro) !important;
}

.cart-buttons {
    display: flex !important;
    gap: var(--customify-spacing-sm) !important;
}

.cart-buttons a {
    flex: 1 !important;
    padding: 10px !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: var(--customify-font-weight-bold) !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    border: 2px solid var(--customify-negro) !important;
    transition: all 0.2s ease !important;
}

.btn-view-cart {
    background: var(--customify-blanco) !important;
    color: var(--customify-negro) !important;
}

.btn-view-cart:hover {
    background: var(--customify-verde-neon) !important;
}

.btn-checkout {
    background: var(--customify-rosa-magenta) !important;
    color: var(--customify-blanco) !important;
}

.btn-checkout:hover {
    background: #c72c85 !important;
}

/* ========================================
   HEADER ACTIONS - Contenedor usuario + carrito
   ======================================== */

.customify-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: var(--customify-spacing-md) !important;
}

/* ========================================
   LOGIN BUTTON (Usuario no logueado)
   ======================================== */

.customify-header-login {
    display: inline-flex !important;
}

.customify-header-login a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    background: var(--customify-amarillo) !important;
    color: var(--customify-negro) !important;
    border: var(--customify-border-thick) solid var(--customify-negro) !important;
    border-radius: var(--customify-border-radius-sm) !important;
    box-shadow: var(--customify-shadow-md) !important;
    font-weight: var(--customify-font-weight-bold) !important;
    font-size: 14px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: var(--customify-transition-normal) !important;
}

.customify-header-login a:hover {
    background: var(--customify-verde-neon) !important;
    transform: var(--customify-hover-lift-sm) !important;
    box-shadow: var(--customify-shadow-hover) !important;
}

/* ========================================
   USER DROPDOWN CUSTOM - Estilo "REACH OUT" button
   ======================================== */

.customify-header-user {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--customify-spacing-sm) !important;
    cursor: pointer !important;
    padding: 12px !important;
    background: var(--customify-rosa-magenta) !important;
    border: var(--customify-border-thick) solid var(--customify-negro) !important;
    border-radius: var(--customify-border-radius-sm) !important;
    box-shadow: var(--customify-shadow-md) !important;
    transition: var(--customify-transition-normal) !important;
    font-weight: var(--customify-font-weight-bold) !important;
    z-index: 10 !important;
}

.customify-header-user:hover {
    box-shadow: var(--customify-shadow-hover) !important;
    transform: var(--customify-hover-lift-sm) !important;
}

.customify-header-user .user-info-main {
    font-size: 14px !important;
    line-height: 1.2 !important;
    color: var(--customify-blanco) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.customify-header-user .user-info-main small {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 12px !important;
    font-weight: var(--customify-font-weight-bold) !important;
    color: var(--customify-blanco) !important;
    margin-top: 3px !important;
    text-transform: lowercase !important;
}

.customify-header-user .user-info-main small .emoji {
    width: 14px !important;
    height: 14px !important;
}

#header-tokens-count {
    font-weight: var(--customify-font-weight-extrabold) !important;
    color: var(--customify-blanco) !important;
}

/* Dropdown menu - compacto */
.customify-header-user .user-dropdown {
    position: absolute !important;
    top: calc(100% + 2px) !important;
    right: 0 !important;
    background: var(--customify-blanco) !important;
    border: var(--customify-border-thick) solid var(--customify-negro) !important;
    border-radius: var(--customify-border-radius-sm) !important;
    box-shadow: var(--customify-shadow-lg) !important;
    padding: var(--customify-spacing-sm) !important;
    min-width: 180px !important;
    z-index: 9999 !important;
    display: none !important;
}

.customify-header-user:hover .user-dropdown {
    display: block !important;
}

.customify-header-user .user-dropdown a {
    display: block !important;
    padding: var(--customify-spacing-sm) var(--customify-spacing-md) !important;
    color: var(--customify-negro) !important;
    text-decoration: none !important;
    font-weight: var(--customify-font-weight-semibold) !important;
    font-size: 14px !important;
    border-radius: 4px !important;
    transition: var(--customify-transition-normal) !important;
    text-transform: capitalize !important;
}

.customify-header-user .user-dropdown a:first-child:hover {
    background: var(--customify-verde-neon) !important;
    color: var(--customify-negro) !important;
}

.customify-header-user .user-dropdown a:nth-child(2):hover {
    background: var(--customify-amarillo) !important;
    color: var(--customify-negro) !important;
}

.customify-header-user .user-dropdown a:last-child:hover {
    background: var(--customify-rosa-magenta) !important;
    color: var(--customify-blanco) !important;
}

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

@media (max-width: 768px) {
    .site-primary-header-wrap {
        padding: 6px 0 !important;
    }

    .ast-builder-grid-row {
        gap: var(--customify-spacing-md) !important;
    }

    .site-branding .site-title a {
        font-size: 14px !important;
        padding: var(--customify-spacing-sm) var(--customify-spacing-md) !important;
    }

    .main-header-menu {
        gap: var(--customify-spacing-md) !important;
    }

    .main-header-menu .menu-link {
        font-size: 13px !important;
        padding: 6px 0 !important;
    }

    .customify-header-cart {
        width: 40px !important;
        height: 40px !important;
    }
    
    .customify-header-actions {
        gap: var(--customify-spacing-sm) !important;
    }

    .customify-header-cart svg {
        width: 18px !important;
        height: 18px !important;
    }

    .customify-header-cart .cart-count {
        min-width: 18px !important;
        height: 18px !important;
        font-size: 10px !important;
        top: -4px !important;
        right: -4px !important;
    }

    .customify-header-user {
        padding: var(--customify-spacing-sm) var(--customify-spacing-md) !important;
    }

    .customify-header-user .user-info-main {
        font-size: 12px !important;
    }

    .customify-header-user .user-info-main small {
        font-size: 10px !important;
    }

    .customify-header-user .user-dropdown {
        min-width: 180px !important;
    }

    .customify-header-user .user-dropdown a {
        font-size: 13px !important;
        padding: var(--customify-spacing-sm) var(--customify-spacing-md) !important;
    }

    /* Cart dropdown responsive */
    .cart-dropdown {
        width: 280px !important;
        right: -50px !important;
    }
    
    .cart-dropdown-items {
        max-height: 200px !important;
    }
    
    .mini-cart-item img {
        width: 40px !important;
        height: 40px !important;
    }
}

/* Mobile menu - cuando se colapsa en hamburguesa */
@media (max-width: 921px) {
    .ast-mobile-menu-buttons {
        border: var(--customify-border-thick) solid var(--customify-negro) !important;
        border-radius: 4px !important;
        box-shadow: var(--customify-shadow-sm) !important;
        background: var(--customify-amarillo) !important;
        padding: var(--customify-spacing-sm) !important;
    }

    .ast-mobile-menu-buttons .ast-button-wrap {
        background: transparent !important;
    }

    .ast-mobile-menu-buttons:hover {
        box-shadow: var(--customify-shadow-md) !important;
        transform: var(--customify-hover-lift-sm) !important;
    }

    /* Menu items dentro del mobile menu */
    .ast-mobile-popup-drawer .main-header-menu .menu-link {
        padding: var(--customify-spacing-md) var(--customify-spacing-lg) !important;
        font-size: 16px !important;
    }
}