/*
 Theme Name:   Mediax Child  
 Theme URI:    https://wordpress.themeholy.com/mediax
 Description:  This is a child theme for Mediax - WordPress Theme
 Author:       Themeholy
 Author URI:   https://themeforest.net/user/themeholy 
 Template:     mediax
 Version:      1.0
 Tags:         two-columns, three-columns, left-sidebar, right-sidebar, flexible-header, custom-background, custom-colors, custom-header, custom-menu, theme-options, editor-style, featured-images, microformats, post-formats,  sticky-post, threaded-comments, translation-ready
 Text Domain:  mediax-child
*/

/*  [ Add your custom css below ]
- - - - - - - - - - - - - - - - - - - - */    
/* Añadir botones de login al top header */

/* Crear espacio para los botones en el top header */
.header-top-layout1 .header-top,
.header-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
}

/* Contenedor para los botones de login */
.login-buttons {
    display: flex !important;
    gap: 10px !important;
    margin-left: auto !important;
    padding-right: 20px !important;
}

/* Estilos para los botones */
.login-btn {
    background-color: #2196F3 !important;
    color: white !important;
    padding: 8px 15px !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
}

.login-btn:hover {
    background-color: #1976D2 !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3) !important;
}

/* Estilo específico para Employee Login */
.login-btn.employee {
    background-color: #4CAF50 !important;
}

.login-btn.employee:hover {
    background-color: #45a049 !important;
}

/* Responsive para móvil */
@media (max-width: 768px) {
    .login-buttons {
        padding-right: 10px !important;
        gap: 5px !important;
    }
    
    .login-btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
    
    /* Ocultar texto en móvil muy pequeño y mostrar solo iconos */
    @media (max-width: 480px) {
        .login-btn {
            padding: 6px 8px !important;
            font-size: 10px !important;
        }
        
        .login-btn-text {
            display: none !important;
        }
        
        .login-btn::before {
            font-family: 'FontAwesome' !important;
            margin-right: 0 !important;
        }
        
        .login-btn.employee::before {
            content: '\f007' !important; /* Icono de usuario */
        }
        
        .login-btn.customer::before {
            content: '\f2bd' !important; /* Icono de cliente */
        }
    }
}

/* Si el tema usa una clase específica para el top header */
.header-top-info {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

/* Ajustar la información de contacto para dar espacio */
.header-top-info .header-links,
.header-top-info .contact-info {
    flex: 1 !important;
}

/* Insertar los botones después del último elemento del header */
.header-top-info::after {
    content: '<div class="login-buttons"><a href="https://zommerxs.com/" class="login-btn employee"><span class="login-btn-text">Employee Login</span></a><a href="https://zommerxs.com/" class="login-btn customer"><span class="login-btn-text">Customer Login</span></a></div>' !important;
}

document.addEventListener('DOMContentLoaded', function() {
    // Buscar el contenedor del top header
    const topHeader = document.querySelector('.header-top') || 
                     document.querySelector('.header-top-layout1') ||
                     document.querySelector('.header-top-info') ||
                     document.querySelector('[class*="header-top"]');
    
    if (topHeader) {
        // Crear el contenedor de botones
        const loginButtonsContainer = document.createElement('div');
        loginButtonsContainer.className = 'login-buttons-container';
        loginButtonsContainer.style.cssText = `
            display: flex;
            gap: 10px;
            margin-left: auto;
            align-items: center;
        `;
        
        // Crear botón Employee Login
        const employeeBtn = document.createElement('a');
        employeeBtn.href = 'https://zommerxs.com/';
        employeeBtn.className = 'login-btn employee';
        employeeBtn.innerHTML = '<span class="login-btn-text">Employee Login</span>';
        employeeBtn.target = '_blank';
        
        // Crear botón Customer Login
        const customerBtn = document.createElement('a');
        customerBtn.href = 'https://zommerxs.com/mantenimiento/';
        customerBtn.className = 'login-btn customer';
        customerBtn.innerHTML = '<span class="login-btn-text">Customer Login</span>';
        customerBtn.target = '_blank';
        
        // Añadir botones al contenedor
        loginButtonsContainer.appendChild(employeeBtn);
        loginButtonsContainer.appendChild(customerBtn);
        
        // Hacer que el top header sea flex si no lo es
        topHeader.style.display = 'flex';
        topHeader.style.justifyContent = 'space-between';
        topHeader.style.alignItems = 'center';
        
        // Insertar los botones al final del top header
        topHeader.appendChild(loginButtonsContainer);
        
        console.log('Botones de login agregados exitosamente');
    } else {
        console.warn('No se encontró el contenedor del top header');
    }
});