/*
Theme Name: Crypto Soccer Theme
Theme URI: https://cryptosoccer.io
Author: Crypto Soccer Dev Team
Description: Futbol, neon, gamer, green-black. WordPress theme for Crypto Soccer plugin.
Version: 5.1
*/

/* Notification Badge on Main Profile Link in Header */
.cs-profile-nav-item {
    position: relative;
    display: flex;
    align-items: center;
}

/* --- INICIO DE LA CORRECCIÓN PARA EL CONTADOR DE NOTIFICACIONES --- */
.cs-header-notification-count {
    position: absolute;
    top: -2px;
    right: 8px;
    /* Ajusta este valor si es necesario */
    background-color: #ff3b3b;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: bold;
    border-radius: 10px; /* MODIFICADO: Ajustado para forma de píldora */
    min-width: 18px; /* MODIFICADO: Cambiado de width a min-width */
    height: 18px;
    padding: 0 6px; /* MODIFICADO: Aumentado para dar más espacio */
    box-sizing: border-box; /* AÑADIDO: Asegura que el padding no rompa las dimensiones */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
    /* Permite hacer clic en el enlace de debajo */
    border: 2px solid var(--cs-bg-dark);
}
/* --- FIN DE LA CORRECCIÓN --- */

html.cs-light .cs-header-notification-count {
    border-color: #fff;
}

/* ==========================================================================
   FIX DEFINITIVO: Contexto de apilamiento para los menús desplegables
   ========================================================================== */

/* 1. Prepara a los contenedores de los menús para que manejen capas */
.cs-nav > .cs-nav-user-dropdown {
    position: relative;
}

/* 2. Asigna una capa superior al submenú para que flote por encima de todo */
.cs-nav .cs-dropdown-content {
    z-index: 1000;
}

/* 3. Aumentar el z-index del contenedor ACTIVO para asegurar que esté por encima de sus hermanos */
.cs-nav > .cs-nav-user-dropdown.is-active-dropdown {
    z-index: 1001;
}

/* FIX FINAL: Se establece un contexto de apilamiento IGUAL para todos los menús desplegables */
.cs-nav > .cs-nav-user-dropdown {
    position: relative;
}
/* FIX: Asegura que el texto del contador de notificaciones sea siempre visible */
    .cs-dropdown-link:hover .cs-header-notification-count,
    .cs-dropdown-link.active .cs-header-notification-count {
        color: #fff !important;
    }