/* ==========================================================================
   BeatLatin — Topbar acciones (desktop first)
   Reemplaza Icon Box de Elementor con shortcodes [bl_topbar_cart] y [bl_topbar_profile]
   ========================================================================== */

/* Notificaciones — no usadas por ahora */
.bl-topbar-notifications {
    display: none !important;
}

/* ---------- Tooltips topbar ---------- */

.bl-topbar-tooltip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.bl-topbar-tooltip-wrap::after {
    content: attr(data-bl-tooltip);
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: calc(var(--z-tooltip, 120) + 1);
    display: block;
    padding: 6px 10px;
    color: #fff;
    background: rgba(0, 0, 0, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-family: var(--bl-font);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(4px);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;
}

.bl-topbar-tooltip-wrap:hover::after,
.bl-topbar-tooltip-wrap:focus-within::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

[data-theme="light"] .bl-topbar-tooltip-wrap::after {
    color: #1d1d1f;
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* ---------- Contenedor derecho ---------- */

.bl-topbar-right {
    gap: 8px !important;
    align-items: center !important;
}

.bl-topbar-cart,
.bl-topbar-profile {
    width: auto !important;
    min-width: 0 !important;
}

.bl-topbar-cart .elementor-widget-container,
.bl-topbar-profile .elementor-widget-container,
.bl-topbar-cart .elementor-shortcode,
.bl-topbar-profile .elementor-shortcode {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------- Carrito EDD ---------- */

.bl-topbar-cart-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 10px 0 8px;
    color: var(--bl-icon-muted);
    text-decoration: none !important;
    border-radius: 999px;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.bl-topbar-cart-btn:hover,
.bl-topbar-cart-btn:focus-visible {
    color: var(--bl-icon-hover);
   
    outline: none;
}

.bl-topbar-cart-btn__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 15px;
}

.bl-topbar-cart-btn__badge {
    position: absolute;
    top: -2px;
    right: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    color: #fff;
    background: var(--bl-red, #d90c0c);
    border-radius: 999px;
    font-family: var(--bl-font);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 2px rgba(22, 22, 20, 0.92);
}

[data-theme="light"] .bl-topbar-cart-btn__badge {
    box-shadow: 0 0 0 2px rgba(245, 245, 247, 0.96);
}

.bl-topbar-cart-btn__badge[hidden] {
    display: none !important;
}

.bl-topbar-cart-btn__total {
    min-width: 3.2em;
    color: var(--bl-text);
    font-family: var(--bl-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
}

.bl-topbar-cart-btn:not(.has-items) .bl-topbar-cart-btn__total {
    color: var(--bl-muted-soft);
    font-weight: 500;
}

.bl-topbar-cart-btn.is-updating .bl-topbar-cart-btn__total {
    opacity: 0.55;
}

/* ---------- Perfil ---------- */

.bl-topbar-profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    overflow: hidden;
    color: var(--bl-icon-muted);
    text-decoration: none !important;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.bl-topbar-profile-btn:hover,
.bl-topbar-profile-btn:focus-visible {
    color: var(--bl-icon-hover);
    background: var(--bl-icon-hover-bg);
    outline: none;
}

.bl-topbar-profile-btn__guest-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 16px;
}

.bl-topbar-profile-btn__avatar-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.bl-topbar-profile-btn__initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
    background: var(--bl-avatar-bg, #8f939e);
    font-family: var(--bl-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bl-topbar-profile-btn.has-avatar {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .bl-topbar-profile-btn.has-avatar {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}