/* ==========================================================================
    KUÚL SALSAS - OPENCART OVERRIDE CSS (FULL UNIFIED)
   ========================================================================== */

/* 1. TIPOGRAFÍAS */
@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* 2. RESET Y BASE */
body {
    background-color: #000000 !important;
    color: #EAEAEA !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    line-height: 1.6;
    font-size: 16px; 
}

/* 3. ENCABEZADOS Y TEXTOS GLOBALES */
h1, h2, h3, h4, h5, h6, .nav-link, .price {
    font-family: 'Antonio', sans-serif !important;
    letter-spacing: 2px;
    font-weight: 700;
    color: #FFFFFF !important;
}

h1 { font-size: 48px; text-transform: uppercase; }
h2 { font-size: 36px; text-transform: uppercase; }
h3 { font-size: 28px; }

a {
    color: #FFFFFF;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

a:hover {
    color: #FCB041;
}

/* 4. CABECERA Y NAVEGACIÓN (Corrección de Logo y Alineación) */
header {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid #1A1A1A;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Forzar que el logo, buscador y carrito se alineen horizontalmente */
header .container .row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Domando el logo: a la izquierda y tamaño moderado */
#logo {
    text-align: left !important;
    padding: 0 !important;
}

#logo img {
    max-height: 70px !important; /* Ajuste para que no domine toda la pantalla */
    width: auto !important;
    transition: transform 0.3s ease;
}

#logo img:hover {
    transform: scale(1.05);
}

/* Barra superior de OpenCart (Moneda, Cuenta) */
#top {
    background-color: #000000 !important;
    border-bottom: 1px solid #1A1A1A !important;
}
#top .list-inline a {
    color: #888888 !important;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}
#top .list-inline a:hover {
    color: #FCB041 !important;
}

/* Menú de Categorías OpenCart */
#menu {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #1A1A1A !important;
    margin-bottom: 20px !important;
}
#menu .nav-link {
    font-size: 18px !important;
    letter-spacing: 4px;
    text-transform: uppercase;
}
#menu .nav-link:hover {
    color: #FCB041 !important;
    transform: scale(1.05);
}

/* 5. ELIMINACIÓN DE AZULES Y ESTILOS ESPECÍFICOS DE BOTONES */

/* El botón del Carrito (Superior derecho) */
#cart > .btn {
    background-color: #1a1a1a !important;
    color: #FFFFFF !important;
    border: 1px solid #FCB041 !important;
    border-radius: 4px !important;
    font-family: 'Antonio', sans-serif !important;
    letter-spacing: 1px !important;
}

/* Eliminar colores azules de info, insignias y paginación activa */
.btn-info, .badge-info, .pagination > .active > a, .pagination > .active > span {
    background-color: #FCB041 !important;
    border-color: #FCB041 !important;
    color: #000 !important;
}

/* Estilo de Botón KUÚL */
.btn {
    font-family: 'Antonio', sans-serif !important;
    font-size: 14px !important;
    letter-spacing: 5px !important;
    text-transform: uppercase !important;
    padding: 12px 30px !important;
    transition: all 0.25s ease !important;
    border-radius: 0 !important;
}

/* Botón Principal (Comprar, Añadir al Carrito) */
.btn-primary {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border: 2px solid #FFFFFF !important;
    font-weight: 700;
}

.btn-primary:hover {
    background-color: #FCB041 !important;
    border-color: #FCB041 !important;
    color: #000000 !important;
    transform: scale(1.05);
}

/* Botones Secundarios */
.btn-inverse, .btn-light, .btn-default {
    background-color: #1A1A1A !important;
    color: #FFFFFF !important;
    border: 1px solid #333333 !important;
}
.btn-inverse:hover, .btn-light:hover {
    background-color: #FCB041 !important;
    color: #000000 !important;
    border-color: #FCB041 !important;
}

/* 6. CAJAS DE PRODUCTOS (Grid y Thumbnails) */
.product-thumb {
    background: #000000;
    border: 1px solid #1A1A1A !important;
    border-radius: 8px;
    padding: 20px;
    transition: all 0.3s ease;
}

.product-thumb .image img {
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-thumb:hover .image img {
    transform: scale(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.product-thumb .description h4 a {
    font-family: 'Antonio', sans-serif;
    font-size: 24px;
    text-transform: uppercase;
    color: #FFFFFF;
}

.product-thumb .price {
    color: #FCB041 !important;
    font-size: 28px !important;
    margin-top: 15px;
}

/* 7. FORMULARIOS (Checkout, Registro, Contacto) */
.form-control, .form-select {
    background-color: #1a1a1a !important;
    border: 1px solid #333333 !important;
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif !important;
    border-radius: 4px !important;
    padding: 10px 15px !important;
}

.form-control:focus, .form-select:focus {
    border-color: #FCB041 !important;
    box-shadow: 0 0 0 0.25rem rgba(252, 176, 65, 0.25) !important;
    background-color: #1a1a1a !important;
    color: #FFFFFF !important;
}

.form-label, .col-form-label {
    font-family: 'Antonio', sans-serif !important;
    font-weight: 700;
    letter-spacing: 1px;
    color: #FFFFFF !important;
}

/* 8. FOOTER */
footer {
    background-color: #000000 !important;
    padding: 60px 0 30px 0 !important;
    border-top: 1px solid #1A1A1A !important;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #888888 !important;
}

footer h5 {
    font-family: 'Antonio', sans-serif !important;
    font-size: 20px !important;
    color: #FFFFFF !important;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

footer ul li a {
    color: #888888 !important;
    font-family: 'Inter', sans-serif;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

footer ul li a:hover {
    color: #FCB041 !important;
    transform: translateX(5px);
}

/* 9. UTILIDADES Y EXTRAS (Restauradas) */
.dropdown-menu {
    background-color: #1a1a1a !important;
    border: 1px solid #333333 !important;
}
.dropdown-item {
    color: #EAEAEA !important;
}
.dropdown-item:hover {
    background-color: #000000 !important;
    color: #FCB041 !important;
}

.breadcrumb {
    background: transparent !important;
    padding: 20px 0 !important;
}
.breadcrumb-item a {
    color: #888888 !important;
    font-family: 'Antonio', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.breadcrumb-item a:hover {
    color: #FCB041 !important;
}
.breadcrumb-item.active {
    color: #FFFFFF !important;
}

.alert-success {
    background-color: rgba(252, 176, 65, 0.1) !important;
    border: 1px solid #FCB041 !important;
    color: #FFFFFF !important;
}
.alert-success a {
    color: #FCB041 !important;
    text-decoration: underline;
}

/* 10. RESPONSIVO */
@media (max-width: 768px) {
    header .container .row {
        flex-direction: column !important;
        gap: 15px;
    }

    #logo {
        text-align: center !important;
    }

    #logo img {
        max-height: 55px !important;
    }

    .product-thumb:hover .image img, .btn-primary:hover {
        transform: none !important;
    }
}

/* =========================================
   FORZAR FONDO NEGRO ABSOLUTO (#000)
   ========================================= */

/* 1. Fondo para todos los contenedores principales */
#content, 
#product-info, 
#product-category, 
#common-home,
.container-fluid,
main {
    background-color: #000000 !important;
}

/* 2. Quitar el fondo blanco de las "Cards" y contenedores de OpenCart 4 */
.card, 
.well, 
.img-thumbnail,
.table-responsive {
    background-color: #000000 !important;
    border: 1px solid #1a1a1a !important; /* Borde sutil para que no se pierda todo */
}

/* 3. Arreglar los Breadcrumbs (Migas de pan) */
.breadcrumb {
    background-color: transparent !important;
    border: none !important;
    margin-bottom: 20px !important;
}

/* 4. Forzar color de texto en descripciones y etiquetas que podrían seguir en gris oscuro */
#content p, 
#content ul, 
#content li, 
.description,
.form-check-label {
    color: #EAEAEA !important;
}

/* 5. Si el fondo de la imagen del producto tiene un marco blanco, esto lo elimina */
.img-thumbnail {
    padding: 0 !important;
    background-color: transparent !important;
}

/* =========================================
   ESTILO DE PESTAÑAS - TABS (KUÚL STYLE)
   ========================================= */

/* 1. Fondo negro absoluto para el área de contenido de las pestañas */
.tab-content {
    background-color: #000000 !important;
    border: 1px solid #1a1a1a !important; /* Borde sutil para separar */
    border-radius: 0 0 8px 8px; /* Redondeado solo abajo */
    padding: 30px !important;
    color: #EAEAEA !important;
    font-family: 'Inter', sans-serif;
}

/* 2. Estilo de los botones de las pestañas (Inactivas) */
.nav-tabs {
    border-bottom: 2px solid #FCB041 !important; /* Línea base naranja */
    margin-bottom: 0 !important;
    background-color: transparent !important;
}

.nav-tabs .nav-link {
    background-color: #1a1a1a !important; /* Fondo gris muy oscuro */
    color: #FFFFFF !important; /* Texto blanco */
    font-family: 'Antonio', sans-serif !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    border: 2px solid #1a1a1a !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0; /* Redondeado arriba */
    margin-right: 5px;
    padding: 12px 25px !important;
    transition: all 0.2s ease;
}

/* 3. Estilo de la pestaña ACTIVA (Fondo Naranja y Texto Negro) */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: #FCB041 !important; /* Fondo Naranja exacto */
    color: #000000 !important; /* Texto Negro absoluto */
    border: 2px solid #FCB041 !important;
    border-bottom-color: #000000 !important; /* Oculta la línea base */
}

/* 4. Efecto Hover en pestañas inactivas */
.nav-tabs .nav-link:hover {
    border-color: #FCB041 !important;
    color: #FCB041 !important;
    background-color: #1a1a1a !important;
}