/**
 * RP3 Brand Header Colors
 *
 * Cambia el color del header segun la marca activa.
 * Depende de las CSS variables que inyecta el plugin rp3-multi-brand:
 *   --rp3-brand-primary
 *   --rp3-brand-secondary
 *   --rp3-brand-accent
 *
 * Solo afecta #rp3-header y sus hijos.
 */

/* =============================================
   BARRA SUPERIOR (top_menu_custom)
   ============================================= */

#rp3-header .top_menu_custom {
    background-color: var(--rp3-brand-primary, #F37021) !important;
    transition: background-color 0.3s ease;
}

/* =============================================
   TABS DE MARCA
   ============================================= */

#rp3-header .logo-tab {
    background-color: #DCDCDC;
    border-left: 1px solid rgba(94, 94, 94, 0.2);
    border-right: 1px solid rgba(94, 94, 94, 0.2);
    border-top: none;
    border-bottom: none;
    position: relative;
}

#rp3-header .logo-tab.active-logo {
    background-color: #F3F1F1;
}

/* Linea inferior solo en tab activo */
#rp3-header .logo-tab.active-logo::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--rp3-brand-primary, #F37021);
    transition: background-color 0.3s ease;
}

#rp3-header .logo-tab:not(.active-logo)::after {
    display: none;
}

/* =============================================
   BANNER TEXT Y CUSTOM LINKS (barra superior)
   ============================================= */

#rp3-header .rp3-topbar-banner {
    flex: 1;
    text-align: center;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#rp3-header .rp3-topbar-links {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-right: 15px;
}

#rp3-header .rp3-topbar-links a {
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0.3px;
    transition: opacity 0.2s ease;
}

#rp3-header .rp3-topbar-links a:hover {
    opacity: 0.8;
}

/* Responsive: ocultar texto/links — el fondo de la barra (--rp3-brand-primary) permanece visible */
@media (max-width: 991px) {
    #rp3-header .rp3-topbar-banner,
    #rp3-header .rp3-topbar-links {
        display: none !important;
    }
}

/* =============================================
   SEGUNDA BARRA (header-top / busqueda)
   Siempre blanca, NO cambia con la marca
   ============================================= */

#rp3-header .top-header {
    background-color: #ffffff !important;
}

/* =============================================
   BOTON PROMOCIONES
   ============================================= */

#rp3-header #boton-promo,
#rp3-header .rp3-promo-btn {
    background-color: var(--rp3-brand-primary, #F37021) !important;
    transition: background-color 0.3s ease;
}

#rp3-header #boton-promo:hover,
#rp3-header .rp3-promo-btn:hover {
    background-color: var(--rp3-brand-secondary, #F37021) !important;
}

/* =============================================
   NAVEGACION ACTIVA
   ============================================= */

#rp3-header .rp3store-nav-menu .current-menu-item > a,
#rp3-header .rp3store-nav-menu .current_page_item > a {
    color: var(--rp3-brand-primary, #F37021) !important;
}

/* =============================================
   BOTONES GLOBALES DEL SITIO
   Hereda el color de la marca activa en todo el sitio,
   no solo en el header.
   ============================================= */

#payment button[type=submit],
.woocommerce div.product form.cart .button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
table.shop_table div.coupon .button,
table.shop_table div.coupon button,
.woof_reset_search_form,
.button-primary,
.woocommerce-button,
.btn-element-pay,
button[name="apply_coupon"] {
    background-color: var(--rp3-brand-primary, #E13A4A) !important;
    border-color: var(--rp3-brand-primary, #E13A4A) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Hover: fondo blanco, texto y borde del color de marca */
#payment button[type=submit]:hover,
.woocommerce div.product form.cart .button:hover,
table.shop_table div.coupon .button:hover,
table.shop_table div.coupon button:hover,
.woof_reset_search_form:hover,
.button-primary:hover,
.woocommerce-button:not(.button-order-wc):hover,
.btn-element-pay:hover,
button[name="apply_coupon"]:hover {
    background-color: #FFFFFF !important;
    color: var(--rp3-brand-primary, #E13A4A) !important;
    border: 1px solid var(--rp3-brand-primary, #E13A4A) !important;
}

/* Botón comprar (single product) — estilo outlined, igual al loop y bloque promocional */
.single_add_to_cart_button {
    background-color: #FFFFFF !important;
    color: var(--rp3-brand-primary, #F37021) !important;
    border: 2px solid var(--rp3-brand-primary, #F37021) !important;
    border-radius: 50px !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.single_add_to_cart_button:hover {
    background-color: var(--rp3-brand-primary, #F37021) !important;
    color: #FFFFFF !important;
    border-color: var(--rp3-brand-primary, #F37021) !important;
}