/* =========================================================
   NOVA SKIN - BRIDGE
   Liga o design system do "nova skin" ao sistema atual
   (CodeIgniter + Bootstrap 4 + jQuery).
   Carregue SEMPRE depois de bootstrap.min.css e nova.css
   ========================================================= */

/* ---------------------------------------------------------
   1. Tokens - herdam a cor do tema cadastrado no painel
   (app.css e gerado por Style::generate_css)
   --------------------------------------------------------- */
:root {
   /* Paleta identica a maxiii.bet (roxo #8b5cf6).
      Para voltar a usar a cor do painel, troque por var(--default). */
   --ci-primary-color: #8b5cf6;
   --ci-gray-medium: #0f0f0f;
   --ci-gray-over: #0f0f0f;
   --promo-green: #8b5cf6;
}

html,
body {
   color: #fff;
   background: #0f0f0f;
   font-family: Arial, Helvetica, sans-serif;
}

body.modal-open {
   overflow: hidden;
}

a {
   color: inherit;
}

/* ---------------------------------------------------------
   2. Integracao com os modais do Bootstrap 4
   O markup do nova skin vive dentro de .modal-content,
   entao zeramos a casca do Bootstrap.
   --------------------------------------------------------- */
.modal.nova-modal {
   padding: 0 !important;
}

.nova-modal .modal-dialog {
   width: 100%;
   max-width: none;
   min-height: 100%;
   margin: 0;
   display: grid;
   place-items: center;
   pointer-events: none;
}

.nova-modal .modal-content {
   width: 100%;
   background: transparent;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   place-items: center;
   display: grid;
   pointer-events: none;
}

.nova-modal .modal-content > * {
   pointer-events: auto;
}

.modal-backdrop.show {
   opacity: .82;
}

/* deposito / auth ocupam a tela toda no mobile, viram card no desktop */
.nova-modal .deposit-panel,
.nova-modal .auth-dialog {
   margin: 0 auto;
}

/* saque / regras / sucesso sao dialogos centrais */
.nova-modal .withdraw-dialog,
.nova-modal .bonus-rules-dialog,
.nova-modal .withdraw-success-card {
   margin: 16px auto;
}

.nova-modal .withdraw-success-card {
   background: radial-gradient(circle at 50% -18%, #a78bfa2b, #0000 38%), #111514;
   border: 1px solid #a78bfa29;
   border-radius: 18px;
   width: min(100% - 32px, 380px);
   padding: 30px 24px 28px;
}

/* botao de fechar padrao dos dialogos */
.nova-close {
   position: absolute;
   top: 14px;
   right: 14px;
   z-index: 6;
   width: 36px;
   height: 36px;
   display: grid;
   place-items: center;
   border: 0;
   border-radius: 9px;
   color: #c9d0cc;
   background: #ffffff12;
   cursor: pointer;
   font-size: 20px;
   line-height: 1;
}

.nova-close:hover {
   color: #fff;
   background: #ffffff1f;
}

/* ---------------------------------------------------------
   3. Faixa de bonus de idioma (#alertBonus)
   O JS legado alterna display none/block; forcamos grid.
   --------------------------------------------------------- */
#alertBonus {
   display: none;
}

#alertBonus[style*="display: block"],
#alertBonus[style*="display:block"] {
   display: grid !important;
}

.language-bonus-card p strong {
   color: #ffe27a;
}

/* ---------------------------------------------------------
   4. Grades de jogos (cassino, busca, populares)
   --------------------------------------------------------- */
.nova-page {
   width: 100%;
   max-width: 430px;
   margin: 0 auto;
   padding: 14px 8px 28px;
   color: #fff;
}

.nova-page-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   margin-bottom: 14px;
}

.nova-page-head h1 {
   margin: 0;
   font-size: 21px;
   font-weight: 900;
   line-height: 1.1;
}

.nova-page-head a {
   color: var(--ci-primary-color);
   background: #000;
   border-radius: 999px;
   padding: 2px 9px;
   font-size: 11px;
   font-weight: 900;
   text-decoration: none;
}

.game-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 10px;
}

.game-grid .provider-page-card img {
   width: 100%;
}

.nova-empty {
   color: #9fa8a3;
   background: #171a19;
   border-radius: 8px;
   padding: 22px 14px;
   font-size: 13px;
   font-weight: 800;
   text-align: center;
}

/* paginacao */
.nova-pagination {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 6px;
   margin-top: 22px;
}

.nova-pagination a,
.nova-pagination span {
   min-width: 34px;
   height: 34px;
   display: grid;
   place-items: center;
   padding: 0 10px;
   border-radius: 8px;
   background: #171a19;
   color: #cfd6d2;
   font-size: 13px;
   font-weight: 900;
   text-decoration: none;
   border: 1px solid #ffffff12;
}

.nova-pagination span.current {
   background: var(--ci-primary-color);
   border-color: var(--ci-primary-color);
   color: #fff;
}

/* ---------------------------------------------------------
   5. Marca de provedores (carrossel infinito)
   --------------------------------------------------------- */
.nova-marquee {
   overflow: hidden;
   width: 100%;
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
   mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.nova-marquee-track {
   display: flex;
   align-items: center;
   gap: 26px;
   width: max-content;
   animation: nova-marquee 38s linear infinite;
}

.nova-marquee img {
   height: 26px;
   width: auto;
   opacity: .6;
   filter: grayscale(1);
   transition: opacity .2s, filter .2s;
}

.nova-marquee img:hover {
   opacity: 1;
   filter: none;
}

@keyframes nova-marquee {
   0% { transform: translateX(0); }
   100% { transform: translateX(-50%); }
}

/* ---------------------------------------------------------
   6. Alertas do flashdata
   --------------------------------------------------------- */
.nova-flash {
   width: 100%;
   max-width: 430px;
   margin: 12px auto 0;
   padding: 0 8px;
}

.nova-flash .alert {
   border: 1px solid #ffffff14;
   border-radius: 10px;
   background: #171a19;
   color: #dfe6e2;
   font-size: 13px;
   font-weight: 700;
}

.nova-flash .alert-success {
   border-color: #8b5cf64d;
   color: #c4b5fd;
}

.nova-flash .alert-danger {
   border-color: #ff4f5f59;
   color: #ff9aa4;
}

/* ---------------------------------------------------------
   7. Minha conta / carteira
   --------------------------------------------------------- */
.wallet-page .wallet-grid {
   grid-template-columns: minmax(0, 1fr);
}

.nova-form {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 14px;
}

.nova-form .full {
   grid-column: 1 / -1;
}

.nova-form label {
   display: block;
   margin: 0;
}

.nova-form label > span {
   display: block;
   margin-bottom: 7px;
   color: #d6ded9;
   font-size: 13px;
   font-weight: 900;
}

.nova-form input,
.nova-form select {
   width: 100%;
   height: 47px;
   padding: 0 14px;
   color: #fff;
   background: #090d0f;
   border: 1px solid #ffffff0f;
   border-radius: 9px;
   outline: 0;
   font-size: 14px;
   font-weight: 700;
}

.nova-form input:focus,
.nova-form select:focus {
   border-color: #a78bfa6b;
   box-shadow: 0 0 0 3px #a78bfa17;
}

.nova-submit {
   width: 100%;
   min-height: 48px;
   margin-top: 4px;
   border: 0;
   border-radius: 10px;
   background: var(--ci-primary-color);
   color: #fff;
   font-size: 15px;
   font-weight: 900;
   cursor: pointer;
}

@media (max-width: 640px) {
   .nova-form {
      grid-template-columns: minmax(0, 1fr);
   }
}

/* ---------------------------------------------------------
   8. Preloader
   --------------------------------------------------------- */
#preloader {
   position: fixed;
   inset: 0;
   z-index: 5000;
   display: grid;
   place-items: center;
   background: #0f0f0f;
}

#preloader img {
   max-width: 180px;
   height: auto;
   animation: nova-pulse 1.1s ease-in-out infinite;
}

@keyframes nova-pulse {
   0%, 100% { opacity: .45; transform: scale(.97); }
   50% { opacity: 1; transform: scale(1); }
}

/* ---------------------------------------------------------
   9. Ajustes finos
   --------------------------------------------------------- */
.search-results {
   display: none;
}

.search-results.is-open {
   display: block;
}

.profile-dropdown {
   display: none;
}

.profile-dropdown.is-open {
   display: block;
}

.deposit-tabs {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
   margin-bottom: 16px;
}

.deposit-tabs button {
   height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   border: 1px solid #ffffff12;
   border-radius: 12px;
   background: linear-gradient(#151a19, #0b0e0d);
   color: #fff;
   font-size: 14px;
   font-weight: 900;
}

.deposit-tabs button.is-selected {
   border-color: var(--ci-primary-color);
   color: var(--ci-primary-color);
}

.deposit-tabs svg {
   width: 18px;
   height: 18px;
}

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

.pix-code-text {
   width: 100%;
}

/* input do codigo pix copiavel */
input.pix-code-text {
   border: 0;
   outline: 0;
   text-align: center;
}

.nova-qr-img {
   width: 188px;
   height: 188px;
   object-fit: contain;
}

/* jogo em iframe */
.nova-game-frame {
   width: 100%;
   height: 100%;
   min-height: calc(100dvh - 149px);
   border: 0;
   background: #050706;
}

@media (min-width: 1180px) {
   .nova-page {
      width: min(1080px, 100vw - 322px);
      max-width: none;
      margin-left: auto;
      margin-right: auto;
      padding: 24px 0 56px;
   }

   .game-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 14px;
   }

   .nova-flash {
      width: min(1080px, 100vw - 322px);
      max-width: none;
      padding: 0;
   }

   .nova-page-head h1 {
      font-size: 24px;
   }
}

@media (min-width: 768px) and (max-width: 1179px) {
   .nova-page,
   .nova-flash {
      width: min(720px, 100vw - 32px);
      max-width: none;
      margin-left: auto;
      margin-right: auto;
   }

   .game-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }
}

/* ---------------------------------------------------------
   10. Ajustes de itens que reaproveitam classes nova
   --------------------------------------------------------- */
.desktop-tab {
   text-decoration: none;
}

.desktop-tab.active {
   border-bottom: 3px solid var(--ci-primary-color);
}

/* FAB de deposito no menu inferior */
.mobile-deposit-fab {
   display: grid;
   place-items: center;
   width: 40px;
   height: 40px;
   margin-bottom: 2px;
   border-radius: 50%;
   background: var(--ci-primary-color);
   box-shadow: 0 6px 16px #0006;
}

.mobile-deposit-fab svg {
   width: 20px;
   height: 20px;
   color: #fff;
}

.mobile-menu .mobile-btn.live span.mobile-deposit-fab {
   background: var(--ci-primary-color);
}

/* faixa de bonus: garante grid quando visivel */
.language-bonus-card[style*="display: grid"],
.language-bonus-card[style*="display:grid"] {
   display: grid !important;
}

/* dialogos de saque/idioma: garante fundo mesmo fora do padrao nova */
.nova-modal .withdraw-dialog {
   width: min(100% - 24px, 420px);
}

/* select do saque com seta */
.withdraw-field select {
   -webkit-appearance: none;
   appearance: none;
}

/* code pix copiavel dentro do box */
.pix-code-box .pix-code-text {
   background: transparent;
   color: #fff;
   width: 100%;
   text-align: center;
   font-size: 12px;
}

/* ---------------------------------------------------------
   11. Badge de bonus (usa SVG no lugar do img /presente.png)
   --------------------------------------------------------- */
.bonus-badge svg {
   width: 15px;
   height: 15px;
   margin-top: -1px;
   object-fit: contain;
}

/* ---------------------------------------------------------
   12. Seletor de idioma inline no menu de perfil
   --------------------------------------------------------- */
.profile-menu #novaLangToggle {
   position: relative;
}

.profile-menu .lang-caret {
   width: 14px;
   height: 14px;
   margin-left: auto;
   color: #9aa49f;
   display: grid;
   place-items: center;
   transition: transform .2s ease;
}

.profile-menu .lang-caret svg {
   width: 14px;
   height: 14px;
}

.profile-menu #novaLangToggle.is-open .lang-caret {
   transform: rotate(180deg);
}

.profile-language-panel img {
   width: 100%;
   height: auto;
   border-radius: 3px;
   display: block;
}

/* ---------------------------------------------------------
   13. Banner do topo (carrossel): mesma exibicao do original
   (object-fit: cover), mas com a ALTURA acompanhando a largura
   na proporcao do banner (~1240x460). Assim ele preenche a
   largura sem cortar nem esticar, em qualquer tamanho de tela.
   --------------------------------------------------------- */
.carousel {
   height: auto !important;
   aspect-ratio: 1240 / 460;
}

.carousel .carousel__viewport,
.carousel .carousel__track,
.carousel .carousel__slide,
.carousel .carousel__item {
   height: 100% !important;
}

/* O track da nova e 300% (3 banners fixos). Como usamos slider proprio
   (translateX), cada slide deve ter 100% da largura visivel - senao a
   imagem estica para 3x e o cover corta errado. */
.carousel .carousel__track {
   width: 100% !important;
}

.carousel .carousel__slide {
   flex: 0 0 100% !important;
   width: 100% !important;
}

.carousel .carousel__item img {
   width: 100% !important;
   height: 100% !important;
   object-fit: cover !important;
   display: block;
}

/* ---------------------------------------------------------
   14. Correcao MOBILE: em qualquer aparelho de toque (celular/
   tablet), nunca usar a barra lateral fixa do desktop. Sempre
   a gaveta deslizante + conteudo em largura total + menu
   inferior. Isso evita a "gaveta aparecendo o tempo todo" e a
   tela cortada quando o navegador do celular reporta largura
   grande (ex.: modo site para desktop).
   --------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
   .site-shell {
      padding-left: 0 !important;
      padding-right: 0 !important;
      padding-top: 49px !important;
      padding-bottom: 56px !important;
      min-height: 100vh !important;
   }

   .nav-menu { height: 49px !important; }
   .nav-inner {
      height: 49px !important;
      max-width: none !important;
      margin: 0 auto !important;
      padding: 0 12px !important;
   }
   .desktop-tabs { display: none !important; }
   .menu-button { display: inline-flex !important; }

   /* gaveta = deslizante (escondida por padrao) */
   .mobile-drawer {
      pointer-events: none !important;
      width: auto !important;
      inset: 0 !important;
      z-index: 999 !important;
   }
   .drawer-backdrop { display: block !important; }
   .drawer-head { display: flex !important; }
   .drawer-panel {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      right: auto !important;
      width: min(100%, 430px) !important;
      height: calc(100vh - 56px) !important;
      border-right: 0 !important;
      box-shadow: none !important;
   }
   /* fechada por padrao (totalmente fora da tela); abre via :checked ou .nova-open */
   .mobile-drawer .drawer-panel { transform: translateX(-100%) !important; }
   .drawer-toggle:checked ~ .mobile-drawer .drawer-panel,
   .mobile-drawer.nova-open .drawer-panel { transform: translateX(0) !important; }
   .drawer-toggle:checked ~ .mobile-drawer,
   .mobile-drawer.nova-open { pointer-events: auto !important; }
   .drawer-toggle:checked ~ .mobile-drawer .drawer-backdrop,
   .mobile-drawer.nova-open .drawer-backdrop { opacity: 1 !important; }

   /* menu inferior sempre visivel no mobile */
   .mobile-menu-wrapper {
      display: block !important;
      width: 100% !important;
      max-width: 430px !important;
      left: 50% !important;
      transform: translate(-50%) !important;
      height: 56px !important;
   }

   /* conteudo preenche a largura (telefone = tela toda; tablet = ate 980px) */
   .language-bonus-card,
   .carousel,
   .search-wrap,
   .category-list,
   .gains-container,
   .playfiver-section,
   .site-footer,
   .provider-page,
   .wallet-page,
   .affiliate-page,
   .nova-page,
   .nova-flash,
   .game-launch-page,
   .game-frame-page,
   .helix-page {
      width: 100% !important;
      max-width: min(100vw - 20px, 980px) !important;
      margin-left: auto !important;
      margin-right: auto !important;
   }
}

/* ---------------------------------------------------------
   15. Correcao GERAL da gaveta em telas < 1180px (inclui
   PC/notebook com a janela reduzida - mouse). A regra da nova
   (left:50% + translate(-150%)) so escondia 100% quando o
   painel tinha a largura da tela; entre ~430px e 767px o
   painel "sobrava" espiando na esquerda. Aqui garantimos que
   fique totalmente fora da tela quando fechada.
   --------------------------------------------------------- */
@media (max-width: 1179px) {
   .drawer-panel {
      left: 0 !important;
      right: auto !important;
      transform: translateX(-100%) !important;
   }
   .drawer-toggle:checked ~ .mobile-drawer .drawer-panel,
   .mobile-drawer.nova-open .drawer-panel {
      transform: translateX(0) !important;
   }
   .drawer-toggle:checked ~ .mobile-drawer,
   .mobile-drawer.nova-open {
      pointer-events: auto !important;
   }
   .drawer-toggle:checked ~ .mobile-drawer .drawer-backdrop,
   .mobile-drawer.nova-open .drawer-backdrop {
      opacity: 1 !important;
   }

   /* conteudo preenche a largura (evita o espaco vazio nas laterais em
      telas medias: PC com janela reduzida, tablets, etc.) */
   .language-bonus-card,
   .carousel,
   .search-wrap,
   .category-list,
   .gains-container,
   .playfiver-section,
   .site-footer,
   .provider-page,
   .wallet-page,
   .affiliate-page,
   .nova-page,
   .nova-flash,
   .game-launch-page,
   .game-frame-page,
   .helix-page {
      width: 100% !important;
      max-width: min(100vw - 20px, 980px) !important;
      margin-left: auto !important;
      margin-right: auto !important;
   }
}