/* ComprasX Plugin Styles - Aplicando estilos del plugin al theme */

/* Variables CSS con la paleta de colores del plugin */
:root {
    /* Colores principales del plugin ComprasX */
    --comprasx-primary: #27e0c6;
    --comprasx-secondary: #6b5cff;
    --comprasx-dark-bg: #13162b;
    --comprasx-dark-bg-2: #1f2040;
    --comprasx-panel-bg: #232852;
    --comprasx-panel-bg-2: #10122a;
    --comprasx-text-light: #eaf6fa;
    --comprasx-amd-red: #ff4444;
    --comprasx-intel-blue: #0066cc;
    --comprasx-remove-red: #ff5876;
    
    /* Gradientes del plugin */
    --comprasx-gradient-main: linear-gradient(90deg, #27e0c6 0%, #6b5cff 100%);
    --comprasx-gradient-reverse: linear-gradient(90deg, #6b5cff 0%, #27e0c6 100%);
    --comprasx-gradient-bg: linear-gradient(135deg, #13162b 0%, #1f2040 100%);
    --comprasx-gradient-panel: linear-gradient(135deg, #232852 0%, #10122a 100%);
    --comprasx-gradient-amd: linear-gradient(90deg, #ff4444 0%, #ff6666 100%);
    --comprasx-gradient-intel: linear-gradient(90deg, #0066cc 0%, #0088ff 100%);
    
    /* Tipografía del plugin */
    --comprasx-font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
    
    /* Sombras del plugin */
    --comprasx-shadow-primary: 0 4px 16px rgba(39, 224, 198, 0.4);
    --comprasx-shadow-secondary: 0 8px 32px rgba(20, 30, 70, 0.3);
    --comprasx-shadow-hover: 0 6px 24px rgba(39, 224, 198, 0.6);
    
    /* Reemplazar variables del theme original */
    --wf-main-rgb: 39, 224, 198;
    --wf-main-color: rgba(var(--wf-main-rgb));
    --wf-secondary-color: var(--comprasx-text-light);
    --wf-text-color: var(--comprasx-text-light);
    --wf-gray-color: var(--comprasx-panel-bg);
    --wf-title-family: var(--comprasx-font-family);
    --wf-base-family: var(--comprasx-font-family);
}

/* Aplicar fondo oscuro al body */
body {
    background: var(--comprasx-gradient-bg) !important;
    color: var(--comprasx-text-light) !important;
    font-family: var(--comprasx-font-family) !important;
}

/* Contenedor principal */
#content,
.site-content {
    background: transparent !important;
}

/* Header */
.site-header,
.main-navigation {
    background: var(--comprasx-gradient-panel) !important;
    border-radius: 12px;
    box-shadow: var(--comprasx-shadow-secondary);
    margin-bottom: 20px;
}

.site-header a,
.main-navigation a {
    color: var(--comprasx-text-light) !important;
    transition: color 0.3s ease;
}

.site-header a:hover,
.main-navigation a:hover {
    color: var(--comprasx-primary) !important;
}

/* Botones principales */
button,
.button,
.btn,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.woocommerce-button,
.single_add_to_cart_button {
    background: var(--comprasx-gradient-main) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-weight: 700 !important;
    font-family: var(--comprasx-font-family) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: var(--comprasx-shadow-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

button:hover,
.button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-block-button__link:hover,
.woocommerce-button:hover,
.single_add_to_cart_button:hover {
    background: var(--comprasx-gradient-reverse) !important;
    transform: translateY(-3px) !important;
    box-shadow: var(--comprasx-shadow-hover) !important;
}

/* Títulos */
h1, h2, h3, h4, h5, h6 {
    color: var(--comprasx-primary) !important;
    font-family: var(--comprasx-font-family) !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 10px rgba(39, 224, 198, 0.5);
}

h1 {
    font-size: 2.5em !important;
    font-weight: 800 !important;
    background: var(--comprasx-gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

h2 {
    font-size: 2.2em !important;
}

h3 {
    font-size: 1.8em !important;
}

/* Contenedores y paneles */
.widget,
.sidebar,
.content-area,
article,
.post,
.page,
.woocommerce-product,
.product {
    background: var(--comprasx-gradient-panel) !important;
    border-radius: 12px !important;
    /* padding: 28px !important; */
    margin-bottom: 20px !important;
    box-shadow: var(--comprasx-shadow-secondary) !important;
    border: 1px solid rgba(39, 224, 198, 0.2) !important;
}

/* Enlaces */
a {
    color: var(--comprasx-primary) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

a:hover {
    color: var(--comprasx-secondary) !important;
}

/* Formularios */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select {
    background: var(--comprasx-panel-bg-2) !important;
    color: var(--comprasx-primary) !important;
    border: 1px solid var(--comprasx-primary) !important;
    border-radius: 8px !important;
    padding: 12px !important;
    font-family: var(--comprasx-font-family) !important;
    transition: all 0.3s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: var(--comprasx-secondary) !important;
    box-shadow: 0 0 10px rgba(39, 224, 198, 0.3) !important;
    outline: none !important;
}

/* WooCommerce específico */
.woocommerce .products .product,
.woocommerce ul.products li.product {
    background: var(--comprasx-panel-bg-2) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    transition: all 0.3s ease !important;
    border: 1px solid rgba(39, 224, 198, 0.2) !important;
}

.woocommerce .products .product:hover,
.woocommerce ul.products li.product:hover {
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow: 0 10px 30px rgba(39, 224, 198, 0.4) !important;
    border-color: var(--comprasx-primary) !important;
}

.woocommerce .price,
.woocommerce .amount {
    color: var(--comprasx-primary) !important;
    font-weight: 700 !important;
    font-size: 1.2em !important;
}

/* Navegación */
.pagination,
.nav-links {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 30px 0 !important;
}

.pagination a,
.pagination span,
.nav-links a,
.nav-links span {
    background: var(--comprasx-gradient-panel) !important;
    color: var(--comprasx-text-light) !important;
    padding: 10px 15px !important;
    border-radius: 8px !important;
    border: 1px solid var(--comprasx-primary) !important;
    transition: all 0.3s ease !important;
}

.pagination a:hover,
.nav-links a:hover {
    background: var(--comprasx-gradient-main) !important;
    transform: translateY(-2px) !important;
}

.pagination .current,
.nav-links .current {
    background: var(--comprasx-gradient-main) !important;
}

/* Footer */
.site-footer {
    background: var(--comprasx-gradient-panel) !important;
    border-radius: 12px !important;
    margin-top: 40px !important;
    padding: 40px !important;
    box-shadow: var(--comprasx-shadow-secondary) !important;
}

.site-footer a {
    color: var(--comprasx-text-light) !important;
}

.site-footer a:hover {
    color: var(--comprasx-primary) !important;
}

/* Efectos especiales - LIMITADOS para evitar problemas con elementos flotantes */
.comprasx-element:hover,
.theme-content:hover,
.main-content .widget:hover,
.main-content article:hover,
.main-content .post:hover,
.main-content .page:hover {
    box-shadow: 0 8px 25px rgba(39, 224, 198, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* Backdrop filter para elementos flotantes - REMOVIDO backdrop-filter problemático */
.modal:not([id*="chat"]):not([class*="chat"]),
.popup:not([id*="chat"]):not([class*="chat"]),
.dropdown:not([id*="chat"]):not([class*="chat"]) {
    background: rgba(35, 40, 82, 0.95) !important;
    border: 2px solid var(--comprasx-primary) !important;
    border-radius: 15px !important;
}

/* Scrollbar personalizado */
::-webkit-scrollbar {
    width: 8px !important;
}

::-webkit-scrollbar-track {
    background: var(--comprasx-panel-bg) !important;
}

::-webkit-scrollbar-thumb {
    background: var(--comprasx-gradient-main) !important;
    border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--comprasx-gradient-reverse) !important;
}

/* Animaciones - LIMITADAS para evitar conflictos con plugins */
@keyframes comprasxFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.main-content .widget:not([id*="chat"]):not([class*="chat"]):not([id*="float"]):not([class*="float"]),
.main-content article:not([id*="chat"]):not([class*="chat"]):not([id*="float"]):not([class*="float"]),
.main-content .post:not([id*="chat"]):not([class*="chat"]):not([id*="float"]):not([class*="float"]),
.main-content .page:not([id*="chat"]):not([class*="chat"]):not([id*="float"]):not([class*="float"]) {
    animation: comprasxFadeIn 0.6s ease-out !important;
}

/* Responsive */
@media (max-width: 768px) {
    .widget,
    .sidebar,
    .content-area,
    article,
    .post,
    .page {
        /* padding: 20px !important; */ 
        margin-bottom: 15px !important;
    }
    
    h1 {
        font-size: 2.5em !important;
    }
    
    h2 {
        font-size: 1.8em !important;
    }
    
    button,
    .button,
    .btn {
        padding: 10px 20px !important;
        font-size: 0.9em !important;
    }
}

/* Selección de texto */
::selection {
    background: var(--comprasx-primary) !important;
    color: white !important;
}

/* Placeholder de inputs */
::-webkit-input-placeholder {
    color: rgba(234, 246, 250, 0.6) !important;
}

:-moz-placeholder {
    color: rgba(234, 246, 250, 0.6) !important;
}

::-moz-placeholder {
    color: rgba(234, 246, 250, 0.6) !important;
}

:-ms-input-placeholder {
    color: rgba(234, 246, 250, 0.6) !important;
}