/**
 * ============================================================================
 * NINFA BOUTIQUE - Brand Components v1.0
 * ============================================================================
 *
 * Sistema de Colores Branded (Solo Colores - No Flat Design)
 * Componentes que aplican ÚNICAMENTE la paleta de colores de Ninfa
 *
 * IMPORTANTE:
 * - Este archivo se carga DESPUÉS de brand-colors.css
 * - Usa variables CSS definidas en brand-colors.css
 * - Solo cambia COLORES, respeta el diseño existente
 * - NO modifica border-radius ni box-shadows
 * - NO modificar sin consultar BRAND_GUIDELINES.md
 *
 * Última actualización: Noviembre 2024
 * ============================================================================
 */

/* =============================================================================
   BOTONES BRANDED (Solo colores)
   ============================================================================= */

/**
 * Botón Primario - Vinotinto Ninfa
 * Uso: CTAs principales, "Agregar al carrito", acciones primarias
 */
.btn-primary,
.button-primary,
.carrito.button,
.button-black {
    background: var(--burgundy-ninfa) !important;
    color: var(--pure-white) !important;
    border-color: var(--burgundy-ninfa) !important;
}

.btn-primary:hover,
.button-primary:hover,
.carrito.button:hover,
.button-black:hover {
    background: var(--burgundy-ninfa-dark) !important;
    border-color: var(--burgundy-ninfa-dark) !important;
    color: var(--pure-white) !important;
}

.btn-primary:active,
.button-primary:active,
.carrito.button:active {
    opacity: 0.85;
}

/* =============================================================================
   BADGES Y ETIQUETAS (Sistema de Categorías - Solo colores)
   ============================================================================= */

/**
 * Badges por categoría de producto
 */
.badge-lingerie,
.category-lingerie,
.badge-lenceria {
    background: var(--burgundy-ninfa) !important;
    color: var(--pure-white) !important;
}

.badge-lubricants,
.category-lubricants,
.badge-lubricantes {
    background: var(--warm-terracotta) !important;
    color: var(--pure-white) !important;
}

.badge-toys,
.category-toys,
.badge-juguetes {
    background: var(--midnight-blue) !important;
    color: var(--pure-white) !important;
}

/**
 * Badges de estado
 */
.badge-new,
.badge-nuevo {
    background: var(--dusty-rose) !important;
    color: var(--pure-white) !important;
}

.badge-sale,
.badge-oferta {
    background: var(--error) !important;
    color: var(--pure-white) !important;
}

.badge-discount {
    background: var(--deep-black) !important;
    color: var(--pure-white) !important;
}

/* =============================================================================
   CARDS DE PRODUCTO (Solo colores)
   ============================================================================= */

.product-card,
.products-entry.product-wapper,
.item-product {
    border-color: var(--color-border);
}

.product-card:hover,
.products-entry.product-wapper:hover,
.item-product:hover {
    border-color: var(--deep-black);
}

/**
 * Info del producto
 */
.products-content .product-title a:hover,
.products-content h3 a:hover {
    color: var(--burgundy-ninfa);
}

/**
 * Precio del producto
 */
.products-content .price,
.product-price {
    color: var(--deep-black) !important;
}

.product-price-old,
.price del,
.price .amount del {
    color: var(--warm-grey-400);
}

/* =============================================================================
   FORMULARIOS (Solo colores de focus y estados)
   ============================================================================= */

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--burgundy-ninfa) !important;
}

/**
 * Estados de validación
 */
.form-control.is-invalid,
input.is-invalid,
.has-error .form-control {
    border-color: var(--error) !important;
}

.form-control.is-valid,
input.is-valid,
.has-success .form-control {
    border-color: var(--success) !important;
}

/**
 * Checkboxes y Radios
 */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--burgundy-ninfa) !important;
    border-color: var(--burgundy-ninfa) !important;
}

/* =============================================================================
   CONTADOR DE CARRITO (Solo color)
   ============================================================================= */

.cart-count,
.no_productos,
.mini-cart .cart-count {
    background: var(--burgundy-ninfa) !important;
    color: var(--pure-white) !important;
}

/* =============================================================================
   NAVEGACIÓN Y LINKS (Solo colores de hover)
   ============================================================================= */

/**
 * Links de navegación
 */
.nav-link:hover,
.nav-link.active,
.site-navigation a:hover {
    color: var(--burgundy-ninfa) !important;
}

/**
 * Links generales
 */
a:hover {
    color: var(--burgundy-ninfa) !important;
}

/**
 * Iconos hover
 */
.wishlist-box a:hover i,
.cart-icon:hover,
.icon:hover {
    color: var(--burgundy-ninfa) !important;
}

/* =============================================================================
   ALERTAS Y MENSAJES DEL SISTEMA (Solo colores)
   ============================================================================= */

.alert-success {
    background: var(--success-bg);
    border-color: var(--success);
    color: var(--success);
}

.alert-danger,
.alert-error {
    background: var(--error-bg);
    border-color: var(--error);
    color: var(--error);
}

.alert-warning {
    background: var(--warning-bg);
    border-color: var(--warning);
    color: var(--warning);
}

.alert-info {
    background: var(--info-bg);
    border-color: var(--info);
    color: var(--info);
}

/* =============================================================================
   PAGINACIÓN (Solo colores)
   ============================================================================= */

.pagination .page-link {
    color: var(--color-text);
    border-color: var(--color-border);
}

.pagination .page-link:hover {
    background: var(--burgundy-ninfa);
    border-color: var(--burgundy-ninfa);
    color: var(--pure-white);
}

.pagination .page-item.active .page-link {
    background: var(--burgundy-ninfa);
    border-color: var(--burgundy-ninfa);
    color: var(--pure-white);
}

/* =============================================================================
   MODAL Y OVERLAYS (Solo colores)
   ============================================================================= */

.modal-content {
    border-color: var(--deep-black);
}

.modal-header {
    border-bottom-color: var(--color-border);
}

.modal-footer {
    border-top-color: var(--color-border);
}

/* =============================================================================
   BREADCRUMBS (Solo colores)
   ============================================================================= */

.breadcrumbs a:hover,
.breadcrumb-item a:hover {
    color: var(--burgundy-ninfa) !important;
}

/* =============================================================================
   SLIDERS Y CAROUSELES (Solo colores)
   ============================================================================= */

/**
 * Dots de navegación
 */
.slick-dots li button {
    background: var(--warm-grey-400) !important;
}

.slick-dots li.slick-active button {
    background: var(--burgundy-ninfa) !important;
}

/**
 * Flechas de navegación
 */
.slick-arrow:hover {
    background: var(--burgundy-ninfa) !important;
    color: var(--pure-white) !important;
    border-color: var(--burgundy-ninfa) !important;
}

/* =============================================================================
   FOOTER SOCIAL MEDIA (Solo colores)
   ============================================================================= */

/**
 * Iconos de redes sociales
 * Nota: Esto se complementa con estilos en main.php y mobile-improvements.css
 */
#site-footer .social-link li a,
.footer-social-icon {
    background: var(--burgundy-ninfa) !important;
    border-color: var(--burgundy-ninfa);
    color: var(--pure-white) !important;
}

#site-footer .social-link li a:hover,
.footer-social-icon:hover {
    background: var(--burgundy-ninfa-dark) !important;
    border-color: var(--burgundy-ninfa-dark);
}

/* =============================================================================
   TABLAS (Solo colores)
   ============================================================================= */

.table thead th {
    background: var(--warm-grey-100);
    color: var(--color-text);
    border-bottom-color: var(--deep-black);
}

.table tbody tr:hover {
    background: var(--warm-grey-100);
}

.table-striped tbody tr:nth-of-type(even) {
    background: var(--warm-grey-100);
}

/* =============================================================================
   UTILITIES (Solo colores)
   ============================================================================= */

/**
 * Colores de texto
 */
.text-primary {
    color: var(--burgundy-ninfa) !important;
}

.text-secondary {
    color: var(--warm-grey-400) !important;
}

.text-muted {
    color: var(--warm-grey-400) !important;
}

.text-success {
    color: var(--success) !important;
}

.text-danger,
.text-error {
    color: var(--error) !important;
}

.text-warning {
    color: var(--warning) !important;
}

.text-info {
    color: var(--info) !important;
}

/**
 * Backgrounds
 */
.bg-primary {
    background-color: var(--burgundy-ninfa) !important;
    color: var(--pure-white) !important;
}

.bg-light {
    background-color: var(--warm-grey-100) !important;
}

.bg-dark {
    background-color: var(--deep-black) !important;
    color: var(--pure-white) !important;
}

/**
 * Bordes
 */
.border {
    border-color: var(--color-border) !important;
}

.border-primary {
    border-color: var(--burgundy-ninfa) !important;
}

.border-dark {
    border-color: var(--deep-black) !important;
}

/* =============================================================================
   FIN DE BRAND COMPONENTS
   ============================================================================= */