/* Estilos para el sistema de búsqueda y filtro */
    .container-provider .btn.btn-warning {
      color: #000 !important;
      font-weight: 600;
    }
    .search-filter-container {
      background: transparent;
      margin: 10px 0;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    
    .search-input-wrapper {
      position: relative;
    }
    
    .search-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #fff;
      z-index: 1000;
    }
    
    .custom-search-input .el-input__inner {
      background: rgba(255, 255, 255, 0.1) !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
      color: #fff !important;
      font-size: 14px;
      border-radius: 6px;
      padding: 10px 20px 10px 40px !important;
      outline: 0 !important;
      transition: all 0.3s ease;
      height: 40px;
    }
    
    .custom-search-input .el-input__inner:focus {
      border-color: #e9b108 !important;
      box-shadow: 0 0 0 2px rgba(233, 177, 8, 0.2) !important;
    }
    
    .custom-search-input .el-input__inner::placeholder {
      color: #fff !important;
    }
    
    .provider-selector-wrapper {
      position: relative;
    }
    
    .provider-select {
      width: 100%;
    }
    
    .provider-select .el-input__inner {
      background: rgba(255, 255, 255, 0.1) !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
      color: #fff !important;
      font-size: 14px;
      border-radius: 6px;
      padding: 10px 20px !important;
      outline: 0 !important;
      transition: all 0.3s ease;
      height: 40px;
    }
    
    .provider-select .el-input__inner:focus {
      border-color: #e9b108 !important;
      box-shadow: 0 0 0 2px rgba(233, 177, 8, 0.2) !important;
    }
    .el-select-dropdown__list {
      background: #1e1a45 !important;
    }
    .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
      background-color: #040030 !important;
    }
    .el-select-dropdown__item {
      color: #ffffff !important;
    }
    .el-select-dropdown {
      border: 1px solid #4b486a !important;
    }
    .provider-select .el-select__caret {
      color: #e9b108 !important;
    }
    
    .active-filters {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }
    
    .filter-badge {
      background: rgba(233, 177, 8, 0.2);
      border: 1px solid rgba(233, 177, 8, 0.4);
      color: #e9b108;
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 12px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    
    .clear-filter {
      cursor: pointer;
      color: #ff6b6b;
      margin-left: 5px;
      transition: color 0.3s ease;
    }
    
    .clear-filter:hover {
      color: #ff3838;
    }
    
    .clear-all-btn {
      background: transparent !important;
      border: 1px solid rgba(255, 107, 107, 0.5) !important;
      color: #ff6b6b !important;
      padding: 5px 15px !important;
      font-size: 12px !important;
    }
    
    .clear-all-btn:hover {
      background: rgba(255, 107, 107, 0.1) !important;
      border-color: #ff6b6b !important;
    }
    
    .filtered-count {
      color: #e9b108;
      font-size: 14px;
      margin-left: 10px;
      font-weight: normal;
    }
    
    /* Responsive */
    @media screen and (max-width: 768px) {
      .search-filter-container {
        border-radius: 0;
      }
      .search-filter-container {
        padding: 10px;
      }
      
      .search-filter-container .row {
        margin: 0 -5px;
      }
      
      .search-filter-container .col-12 {
        padding: 0 5px;
      }
      
      .custom-search-input .el-input__inner,
      .provider-select .el-input__inner {
        font-size: 13px;
        padding: 8px 15px 8px 35px !important;
      }
      
      .search-icon {
        left: 10px;
        font-size: 14px;
      }
      
      .active-filters {
        flex-direction: column;
        align-items: flex-start;
      }
      
      .clear-all-btn {
        margin-top: 5px;
      }
    }
    
    @media screen and (max-width: 480px) {
      .search-filter-container {
        margin: 5px 0;
        padding: 8px;
      }
      
      .filter-badge {
        font-size: 11px;
        padding: 4px 10px;
      }
      
      .custom-search-input .el-input__inner,
      .provider-select .el-input__inner {
        font-size: 12px;
        padding: 6px 12px 6px 30px !important;
      }
      
      .search-icon {
        left: 8px;
        font-size: 12px;
      }
    }

    /* Estilos existentes */
    #menu-scroll.container-fluid.provider-container {
      width: 80%;
      margin-left: 0px !important;
      display: flex;
    }
    
    .tags-all #next2 {
      cursor: pointer;
      top: 100px;
      left: 575px;
      height: 75px;
      width: 30px;
      color: #777777;
      background: #222222;
      text-align: center;
      user-select: none;
      display: flex;
      align-items: center;
      padding-left: 6px;
      border-left: 1px solid #343434;
    }

    .tags-all #prev2 {
      color: #777777;
      cursor: pointer;
      top: 100px;
      left: 275px;
      height: 75px;
      width: 30px;
      background: #222222;
      text-align: center;
      user-select: none;
      display: flex;
      align-items: center;
      padding-left: 6px;
      border-right: 1px solid #343434;
    }
    
    .fas.fa-heart, .far.fa-heart {
      color: #747474;
      font-size: 1.5rem;
      font-style: normal;
    }
    
    .favorite-btn {
      position: absolute;
      bottom: 10px;
      right: 10px;
      background:#000000;
      border-radius: 50px;
      padding: 3px;
      width: 28px;
      height: 25px;
      text-align: center;
    }
    
    .favorite-btn:hover .far.fa-heart{
      color:#ff5a7f; 
    }
    
    .input-general .el-input__inner {
      background: rgba(255,255,255,.2) !important;
      color: #fff !important;
      font-size: 14px;
      border-radius: 6px;
      padding: 6px 20px;
      padding-left: 30px;
      outline: 0 !important;
      text-align: center !important;
    }
    
    @media screen and (max-width: 480px) {
      .input-general {
        width: 100%;
        padding: 5px;
      }
      
      .el-input,
      .el-button {
        width: 100% !important;
      }
    }
    
    @media screen and (min-width: 200px) and (max-width: 480px) and (orientation: portrait) {
      #playSlot {
        width: 100vh;
        height: 100vh;
        background: #090909 !important;
      }

      #loadinglaunch {
        display: block !important;
        color: white !important;
        margin-top: 25%;
        text-align: center;
      }

      #box-wallet {
        bottom: -255px;
        width: 50px !important;
        height: 494px !important;
        margin-left: 100px;
        position: absolute;
      }

      #wallet-box-total {
        display: none;
      }

      .logo-img {
        display: none !important;
      }
    }

    /* external css: flickity.css */
    body { font-family: sans-serif; }

    .gallery {
      background: #EEE;
      overflow: hidden;
    }

    .gallery-cell {
      width: 5%;
      height: 200px;
      margin-right: 10px;
      background: #8C8;
      counter-increment: gallery-cell;
    }

    /* cell number */
    .gallery-cell:before {
      display: block;
      text-align: center;
    }

    ol.flickity-page-dots {
      display: none !important;
    }
    
    .provider-container {
      min-height: 75px;
      max-height: 75px;
      background: linear-gradient(0deg, black, #1b1b1b);
      display: inline-flex;
      overflow: hidden;
      margin-bottom: -6px;
      display: flex !important;
      justify-content: left;
      padding: 5px 10px;
    }
    
    #menu-scroll {
      width: 80%;
      margin-left: 0px !important;
      display: flex;
    }
    
    /*
    *  STYLE 4
    */

    #menu-scroll::-webkit-scrollbar-track
    {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      background-color: transparent;
    }
    
    #menu-scroll::-webkit-scrollbar
    {
      height: 5px;
      background-color: transparent;
    }
    
    #menu-scroll::-webkit-scrollbar-thumb
    {
      background-color: #727272;
    }
    
    #menu-scroll-2::-webkit-scrollbar-track
    {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      background-color: transparent;
    }
    
    #menu-scroll-2::-webkit-scrollbar
    {
      height: 5px;
      background-color: transparent;
    }
    
    #menu-scroll-2::-webkit-scrollbar-thumb
    {
      background-color: #727272;
    }
    
    #menu-scroll-2::-webkit-scrollbar-thumb
    {
      background-color: #727272;
    }
    
    #menu-scroll, #menu-scroll-2 {
      scroll-behavior: smooth;
    }
    
    #scroll-button {
      transition: scroll-left 1s ease;
    }
    
    .provider-title {
      border-right: 1px solid #ffffff1c;
    }
    
    .provider-title:nth-last-child() {
      border: none;
    }
    
    /*
    *  STYLE 4
    */

    .fa-arrow-circle-right {
      margin-top: 30px;
      font-size: 20px;
      color: #fff;
      cursor: pointer;
    }
    
    .fa-arrow-circle-left {
      margin-top: 30px;
      font-size: 20px;
      color: #fff;
      margin-left: 5px;
      cursor: pointer;
    }
    
    .fullscreen {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      height: -webkit-fill-available !important;
      z-index: 9999 !important;
      margin: 0 !important;
    }
    
    .loading-spinner{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
      border: 4px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: #e9b108;
      animation: spin 1s linear infinite;
      z-index: 2;
    }
    
    @keyframes spin {
      0% { transform: translate(-50%, -50%) rotate(0deg); }
      100% { transform: translate(-50%, -50%) rotate(360deg); }
    }
    
    .loading .imgslot{
      opacity: 0.5;
    }
    
    .hidden{
      visibility: hidden
    }
    
    @media screen and (max-width:1960px) {
      .provider-title a {
        font-size: 10px;
      }
    }  

    #pSLots5 {
      z-index: 10000;
    }
    
    #pSLots5 .modal-dialog {
      max-width: 80% !important;
      margin: 1.75rem auto;
    }
    
    @media screen and (min-width:769px) {
      #pSLots5 .modal-dialog {
        max-width: 60% !important;
      }
    }
    
    @media screen and (max-width:768px) {
      #pSLots5 .modal-dialog {
        max-width: 80% !important;
      }
    }
    
    @media screen and (max-width:1360px) {
      .provider-title a {
        font-size: 9px;
      }
      
      .provider-title {
        gap: 5px;
        height: 100%;
        border-radius: 0px;
        padding: 7px 0;
        min-width: 120px;
        flex: 1 1 14.2857142857%;
        flex: 1;
        min-height: 60px !important;
        font-size: 12px;
        line-height: 32px;
      }
      
      .provider-title:hover {
        background: #ffffff0f;
      }
    }

    .shine {
      position: relative;
      overflow: hidden;
    }

    .shine {
      -webkit-transition: 1s ease;
      transition: 1s ease;
    }

    .shine:hover {
      -webkit-transform: scale(1.1);
      transform: scale(1.05)
    }

    .shine:hover::before {
      translate: 150%;
      opacity: 1
    }

    .shine:not(:hover)::before {
      translate: -150%;
      opacity: 0;
      -webkit-transition: 0s;
      transition: 0s
    }

    .shine:before {
      content: "";
      position: absolute;
      top: 0;
      z-index: 9;
      display: block;
      width: 100%;
      height: 100%;
      background: -webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),to(rgba(255,255,255,.3)));
      background: linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);
      -webkit-transform: skewX(-25deg);
      transform: skewX(-25deg);
      opacity: .4;
      pointer-events: none;
      translate: -120%;
      -webkit-transition: translate cubic-bezier(.16,1,.3,1) 2.5s;
      transition: translate cubic-bezier(.16,1,.3,1) 2.5s
    }
    
    .shine svg {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      margin: 0 auto;
      cursor: pointer;
      opacity: 0;
      z-index: 0;
      transition: all cubic-bezier(.16,1,.3,1) 1.0s;
    }

    .shine:hover svg {
      opacity: 1;
      z-index: 1;
      top: 40%;
      transform: translateY(-50%);
      pointer-events: none;
    }
    
    .slots-play-title {
      opacity: 0;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
    }
    
    .shine:hover .slots-play-title {
      opacity: 1;
      font-size: 80%;
      font-weight: 700;
      position: absolute;
      top: auto;
      right: 0;
      left: 0;
      bottom: 40px;
      margin: auto;
      display: flex;
      justify-content: center;
      z-index: 1000;
    }
    
    .shine:hover .imgslot {
      opacity: 0.5 !important;
    }
    
    .software_icon {
      opacity: 0;
      position: absolute;
    }
    
    .shine:hover .software_icon {
      opacity: 1;
      top:auto;
      left: 10px;
      bottom: 10px;
      position: absolute;
      max-width: 40px;
      max-height: 40px;
      border-radius: 2rem;
      z-index: 100;
    }
    /* Estilos para el botón Jugar con hover */
      .image-box.slots-grid-item.slot-hover {
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
      }

      .slot-play-btn {
        position: absolute;
        bottom: -50px; /* Oculto por defecto */
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(135deg, #e9b108 0%, #ff9800 100%);
        border: none;
        color: #000;
        font-weight: bold;
        padding: 10px 25px;
        border-radius: 25px;
        font-size: 14px;
        box-shadow: 0 4px 15px rgba(233, 177, 8, 0.3);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        z-index: 10;
        opacity: 0;
        visibility: hidden;
        cursor: pointer;
        min-width: 120px;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .image-box.slots-grid-item.slot-hover:hover .slot-play-btn {
        bottom: 20px;
        opacity: 1;
        visibility: visible;
      }

      /* Efecto hover en el contenedor */
      .image-box.slots-grid-item.slot-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
      }

      /* Efecto hover en el botón */
      .slot-play-btn:hover {
        background: linear-gradient(135deg, #ff9800 0%, #e9b108 100%);
        transform: translateX(-50%) scale(1.05);
        box-shadow: 0 6px 20px rgba(233, 177, 8, 0.5);
      }

      /* Efecto de transición suave en la imagen al hacer hover */
      .image-box.slots-grid-item.slot-hover .image-container {
        transition: all 0.3s ease;
      }

      .image-box.slots-grid-item.slot-hover:hover .image-container {
        filter: brightness(0.8);
      }

      /* Para los juegos promocionados */
      .image-box.slots-grid-item.slot-hover.primero .slot-play-btn {
        background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
      }

      .image-box.slots-grid-item.slot-hover.primero .slot-play-btn:hover {
        background: linear-gradient(135deg, #ff4b2b 0%, #ff416c 100%);
      }

      /* Responsive */
      @media screen and (max-width: 768px) {
        .slot-play-btn {
          padding: 8px 20px;
          font-size: 13px;
          min-width: 100px;
          bottom: -40px;
        }
        
        .image-box.slots-grid-item.slot-hover:hover .slot-play-btn {
          bottom: 15px;
        }
      }

    /* Estilos para el Swiper del menú de proveedores */
    .swiper-container-provider {
      width: 100%;
      height: 100%;
      position: relative;
      padding: 0 40px; /* Espacio para los botones de navegación */
    }

    .swiper-wrapper {
      display: flex;
      align-items: center;
    }

    .swiper-slide {
      width: auto !important; /* Ancho automático para que se ajuste al contenido */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 0.3s ease;
      padding: 5px 10px;
    }

    .swiper-slide:hover {
      transform: translateY(-5px);
    }

    .swiper-button-next-provider,
    .swiper-button-prev-provider {
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      cursor: pointer;
    }

    .swiper-button-next-provider:after,
    .swiper-button-prev-provider:after {
      font-size: 16px;
      font-weight: bold;
    }

    .swiper-button-next-provider {
      right: 5px;
    }

    .swiper-button-prev-provider {
      left: 5px;
    }

    .swiper-button-next-provider:hover,
    .swiper-button-prev-provider:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }

    /* Ajustes responsivos para el Swiper */
    @media screen and (max-width: 640px) {
      .swiper-container-provider {
        padding: 0 35px;
      }
      
      .swiper-button-next-provider,
      .swiper-button-prev-provider {
        width: 25px;
        height: 25px;
      }
      
      .swiper-button-next-provider:after,
      .swiper-button-prev-provider:after {
        font-size: 14px;
      }
    }