@font-face {
    font-family: 'Inter';
    src: url('../fonts/static/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
}

/* Aplicarla a todo el sistema de casino */
body {
    font-family: 'Inter', sans-serif;
}


.casino-game-item-image-wrapper {
    aspect-ratio: 4/4 !important;
    width: 100%;
}

.casino-game-item-image-bc {
    width: 100%;
}


#div_carrusel_top .casino-game-item-image-bc {
    aspect-ratio: 3.5/4 !important;
}

#div_carrusel_top .casino-game-item-image-wrapper {
    aspect-ratio: 3.5/4 !important;
    width: 100%;
}


/* --- Media Query para aplicar estos estilos solo en pantallas de escritorio --- */
@media (min-width: 992px) {
    .nav-menu-container {
        display: flex; 
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .main-nav-carousel-wrapper {
        display: flex;
        align-items: center;
        flex-grow: 1; 
        overflow: hidden; 
        position: relative; 
    }

    /* Área desplazable de los elementos del menú principal */
    .nav-menu-scroll-area {
        flex-grow: 1;
        overflow-x: auto; /* Habilita el desplazamiento horizontal */
        white-space: nowrap; /* Mantiene los ítems en una sola línea */
        -webkit-overflow-scrolling: touch; /* Suaviza el scroll en iOS */
        scrollbar-width: none; /* Oculta la barra de desplazamiento en Firefox */
    }

    /* Oculta la barra de desplazamiento en WebKit (Chrome, Safari) */
    .nav-menu-scroll-area::-webkit-scrollbar {
        display: none;
    }

    /* Lista de elementos del menú principal */
    .nav-menu {
        display: flex; /* Para que los <li> se alineen horizontalmente */
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav-menu li {
        flex-shrink: 0;
        padding: 0 10px; 
    }

    .nav-menu-item {
        display: block;
        padding: 15px 0; /* Ajusta según el diseño de tus ítems */
        text-decoration: none;
        color: #333; /* Color de texto predeterminado */
    }

    /* Estilos para los botones de desplazamiento (flechas) */
    .nav-scroll-button {
        background: rgba(0, 0, 0, 0.1); /* Fondo semi-transparente */
        border: none;
        color: #fff; /* Color de las flechas */
        font-size: 1.5em;
        cursor: pointer;
        padding: 10px 5px;
        flex-shrink: 0;
        z-index: 10; /* Asegura que estén por encima de los ítems */
    }

    .nav-scroll-button:hover {
        background: rgba(0, 0, 0, 0.3);
    }

    /* Estilos para el menú "Más" */
    .nav-menu-other {
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative; /* Para el submenú */
        flex-shrink: 0; /* Evita que el menú "Más" se encoja */
        margin-left: 10px; /* Espacio entre el menú principal y "Más" */
    }

    .nav-menu-other .nav-menu-item {
        cursor: pointer;
        position: relative;
        padding-right: 20px; /* Espacio para el icono de "Más" o flecha */
    }

    .nav-menu-other .nav-menu-sub {
        list-style: none;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 100%; /* Debajo del elemento "Más" */
        right: 0; /* Alineado a la derecha del botón "Más" */
        /*  background: white; /* Color de fondo del submenú */
        border: 1px solid #eee;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        min-width: 180px;
        display: none; /* Oculto por defecto */
        z-index: 100;
    }

    .nav-menu-other:hover .nav-menu-sub {
        display: block; /* Muestra el submenú al pasar el ratón */
    }

    .nav-menu-other .nav-menu-sub li {
        padding: 0; /* Remover padding del li principal */
    }

    .nav-menu-other .nav-menu-sub .nav-menu-item {
        padding: 10px 15px; /* Padding para los ítems del submenú */
        white-space: nowrap;
    }

    .hidden-global {
        display: none !important;
    }

    .user-balance-list{
        padding: 5px;
    }
}

/* Estilos para el contenedor principal de la barra de búsqueda */
.search-box-widget {
    display: flex;
    align-items: center; /* Alinea los elementos verticalmente */
    background-color: #333; /* Fondo oscuro */
    padding: 8px 15px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados para un look moderno */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra sutil */
    width: 100%; /* Ocupa todo el ancho disponible */
}

/* Estilos para el campo de entrada (input) */
.search-input {
    background: transparent; /* Fondo transparente para que el color del contenedor sea visible */
    border: none; /* Elimina el borde predeterminado */
    color: #fff; /* Color de texto blanco */
    font-size: 16px; /* Tamaño de fuente legible */
    flex-grow: 1; /* Permite que el input crezca para ocupar el espacio restante */
    outline: none; /* Elimina el resplandor de enfoque al hacer clic */
    padding-right: 10px; /* Espacio a la derecha antes del ícono */
    /* Estilo del placeholder */
    &::placeholder {
        color: #bbb; /* Color más claro para el texto del placeholder */
    }
}

/* Estilos para el botón de búsqueda */
.search-button {
    background: transparent; /* Fondo transparente */
    border: none; /* Elimina el borde */
    cursor: pointer; /* Cambia el cursor a una mano al pasar por encima */
    color: #fff; /* Color del ícono blanco */
    font-size: 18px; /* Tamaño del ícono */
    padding: 0; /* Sin espaciado interno */
    transition: color 0.2s ease; /* Transición suave para el color del ícono */
    /* Hover y focus para una mejor interactividad */
    &:hover,
        &:focus {
        color: #FFD700; /* Color dorado al pasar el mouse */
        outline: none;
    }
}





/* Contenedor de los resultados de la búsqueda */
.juegos-resultados-container {
    background-color: #1a1a1a;
    /* border: 1px solid #444; */
    border-radius: 10px;
    margin-top: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-height: 70vh;
    overflow-y: auto; 
}

/* El contenedor principal para los elementos de juego (GRID) */
.juegos-resultados-grid {
    display: grid;
    /* Las columnas se ajustan automáticamente para llenar el espacio */
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 20px; /* Espacio entre los juegos */
}

/* Estilo para cada elemento de juego dentro de la cuadrícula */
.casino-game-item-content {
    /* Ya no necesita estilos de flex */
    width: 100%;
}

.juegos-search-widget {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    border-radius: 18px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    width: 100%;
}

.juegos-search-input {
    /*  background: transparent; */
    border: none;
    color: #fff;
    font-size: 16x;
    flex-grow: 1; /* Ocupa el espacio restante */
    outline: none;
    padding: 0; /* Elimina el padding del input para que el del contenedor sea el único */
    margin-left: 10px; /* Espacio entre el ícono y el texto */
}

.juegos-search-input::placeholder {
    color: #bbb;
}

/* Estilos para el botón del ícono */
.juegos-search-button {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 18px;
    padding: 0;
    transition: color 0.2s ease;
}

.juegos-search-button:hover,
.juegos-search-button:focus {
    color: #FFD700;
    outline: none;
}


.fa-search:before { content: "\f002"; }
.fa-times:before { content: "\f00d"; }



.dark-theme #contenedor-ppal {
    background: #0F141A !important;
}

/* --- Media Query para móviles (Ancho de pantalla <= 768px) --- */
@media (max-width: 768px) {
    /* Ajustes para el contenedor principal de la búsqueda */
    .juegos-search-widget {
        padding: 6px 10px; /* Reducir el padding */
        border-radius: 6px;
    }

    .juegos-search-input {
        font-size: 16px; /* Tamaño de fuente más pequeño para móviles */
        padding-right: 8px;
    }

    .juegos-search-button {
        font-size: 16px; /* Ícono un poco más pequeño */
    }

    /* Reducir el padding y el radio del contenedor de resultados */
    .juegos-resultados-container {
        padding: 10px;
        border-radius: 8px;
        max-height: 60vh; /* Ajuste para una visualización más cómoda */
    }

    /* Configuración de cuadrícula específica para móviles */
    .juegos-resultados-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px; /* Reducir el espacio entre los juegos */
    }

    /* Estilo del item en móvil */
    .casino-game-item-content {
        width: auto; /* Dejar que el grid lo maneje */
    }
}