/**
 * ░░░░░██╗░█████╗░░█████╗░░█████╗░  ░░██╗  ██████╗░███████╗██╗░░░██╗  ██╗░░
 * ░░░░░██║██╔══██╗██╔══██╗██╔══██╗  ░██╔╝  ██╔══██╗██╔════╝██║░░░██║  ╚██╗░
 * ░░░░░██║██║░░██║███████║██║░░██║  ██╔╝░  ██║░░██║█████╗░░╚██╗░██╔╝  ░╚██╗
 * ██╗░░██║██║░░██║██╔══██║██║░░██║  ╚██╗░  ██║░░██║██╔══╝░░░╚████╔╝░  ░██╔╝
 * ╚█████╔╝╚█████╔╝██║░░██║╚█████╔╝  ░╚██╗  ██████╔╝███████╗░░╚██╔╝░░  ██╔╝░
 * ░╚════╝░░╚════╝░╚═╝░░╚═╝░╚════╝░  ░░╚═╝  ╚═════╝░╚══════╝░░░╚═╝░░░  ╚═╝░░
 *
 * Central iGaming — desenvolvido por João
 *
 * Canal      https://t.me/central_igaming_channel
 * Network    https://t.me/central_igaming
 * Contato    https://t.me/Joao_igaming
 */

/* ============================================================================
   JogPIX — pages/games.css  (catálogo de jogos: /jogos /slots /cassino)
   Estrutura (ver jp_render_games_page):
     .jp-real-games-shell
       .jp-games-mini-tools (voltar + busca)
       .jp-games-provider-scroll (provedores horizontais)
       .jp-games-content-polished → .jp-games-grid-polished (cards)
       .jp-ver-mais-wrap / .jp-pagination
   ============================================================================ */

.jp-real-games-shell { display: flex; flex-direction: column; gap: 10px; }

/* ---- ferramentas (voltar + busca) ---------------------------------------- */
.jp-games-mini-tools { display: flex; align-items: center; gap: 8px; }
.jp-games-inline-search {
  flex: 1;
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 12px;
  border-radius: 12px;
  background: rgba(var(--jp-card-rgb), .78);
  border: 1px solid rgba(255, 255, 255, .12);
}
.jp-games-inline-search i { color: var(--jp-muted); }
.jp-games-inline-search input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: none;
  color: #fff;
}
.jp-games-inline-search button {
  flex: 0 0 auto;
  height: 30px; padding: 0 14px;
  border: 0; border-radius: 9px;
  background: var(--jp-grad-action);
  color: #fff; font-weight: 800; font-size: 12px; cursor: pointer;
}

/* ---- provedores (scroll horizontal) -------------------------------------- */
.jp-games-provider-scroll {
  display: flex; gap: 6px;
  width: calc(100% + var(--jp-frame-pad));
  margin-right: calc(var(--jp-frame-pad) * -1);
  padding: 2px 12px 8px 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.jp-games-provider-scroll::-webkit-scrollbar { display: none; }
.jp-games-provider-scroll a {
  flex: 0 0 60px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  width: 60px; height: 60px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--jp-muted); font-size: 8.5px; font-weight: 800;
  text-align: center;
}
.jp-games-provider-scroll a.active {
  background: rgba(var(--jp-purple-rgb), .42);
  border-color: rgba(var(--jp-purple-rgb), .6);
  color: #fff;
}
.jp-games-provider-scroll img { width: 28px; height: 28px; object-fit: contain; }
.jp-games-provider-scroll span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- conteúdo + grade ---------------------------------------------------- */
.jp-games-content-polished {
  padding: 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(var(--jp-panel-rgb), .35), rgba(var(--jp-card-rgb), .45));
  border: 1px solid rgba(255, 255, 255, .05);
}
.jp-games-grid-polished, .jp-game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 420px) {
  .jp-games-grid-polished, .jp-game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 320px) {
  .jp-games-grid-polished, .jp-game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- botão "ver mais" ---------------------------------------------------- */
.jp-ver-mais-wrap { display: flex; justify-content: center; margin: 14px 0 4px; }
.jp-ver-mais-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 28px;
  border: 0; border-radius: 14px;
  background: var(--jp-grad-action);
  color: #fff; font-weight: 800; font-size: 14px; cursor: pointer;
  transition: opacity .2s, transform .1s;
}
.jp-ver-mais-btn:hover { opacity: .92; }
.jp-ver-mais-btn:active { transform: scale(.97); }

/* ---- paginação (anterior / próximo) -------------------------------------- */
.jp-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.jp-page-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 16px;
  border: 0; border-radius: 12px;
  background: var(--jp-grad-action);
  color: #fff; font-weight: 800; font-size: 13px; cursor: pointer;
  text-decoration: none; transition: opacity .2s, transform .1s;
}
.jp-page-btn:active { transform: scale(.97); }
.jp-page-btn.is-disabled { background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .35); cursor: not-allowed; pointer-events: none; }
.jp-page-info { color: var(--jp-muted); font-size: 13px; font-weight: 800; min-width: 120px; text-align: center; }