/* PontalBET — acabamento visual global, carregado depois do tema legado. */

/* Cards dos jogos: mesmo formato vertical e profissional dos jogos da casa. */
.item-game {
    aspect-ratio: 3 / 4 !important;
    border-radius: 10px !important;
    background: linear-gradient(145deg, #102a5c, #071126) !important;
    overflow: hidden !important;
}

.item-game > a,
.item-game > a > img {
    width: 100% !important;
    height: 100% !important;
}

.item-game > a > img {
    display: block !important;
    object-fit: cover !important;
    border-radius: 10px !important;
}

.pontalbet-game-loading-title {
    margin-top: 14px;
    color: #fff;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: .04em;
}

.pontalbet-game-loading-subtitle {
    margin-top: 6px;
    color: #9fc2ff;
    font-size: 13px;
}
:root {
    --pb-bg: #071126;
    --pb-bg-soft: #0d1b38;
    --pb-surface: rgba(20, 40, 82, .88);
    --pb-surface-strong: #132b5c;
    --pb-border: rgba(105, 154, 255, .24);
    --pb-primary: #5790ff;
    --pb-primary-strong: #2f6fe5;
    --pb-cyan: #55d9ff;
    --pb-gold: #f7c755;
    --pb-text: #f5f8ff;
    --pb-muted: #aebddd;
    --pb-success: #22c98b;
    --pb-danger: #ff647c;
    --pb-radius: 16px;
    --pb-shadow: 0 14px 40px rgba(0, 5, 18, .32);
}

/* Fechamento sempre visível da roleta de convites/recompensas. */
.invite-friends-modal-container {
    position: relative !important;
}

.pontal-roulette-close {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, calc((100vw - min(450px, 100vw)) / 2 + 14px));
    z-index: 1000002;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, .92);
    border-radius: 999px;
    background: rgba(5, 12, 28, .92);
    color: #fff;
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .55), 0 0 18px rgba(87, 144, 255, .55);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pontal-roulette-close:active {
    transform: scale(.94);
}

html { background: var(--pb-bg); color-scheme: dark; }
body,
#infinitysoft,
.background-color-cassino,
.bg-base {
    background:
        radial-gradient(circle at 10% -10%, rgba(71, 125, 235, .19), transparent 32rem),
        radial-gradient(circle at 100% 20%, rgba(42, 190, 255, .08), transparent 28rem),
        var(--pb-bg) !important;
    color: var(--pb-text);
}

body { min-height: 100vh; -webkit-font-smoothing: antialiased; }

/* Tela inicial enquanto o aplicativo carrega */
.pontalbet-boot-screen {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 17px;
    padding: 28px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 35%, rgba(75, 136, 255, .25), transparent 34%),
        linear-gradient(145deg, #050c1d, #0b1b3e 55%, #102b60);
    color: var(--pb-text);
    opacity: 1;
    visibility: visible;
    transition: opacity .42s ease, visibility .42s ease;
}
.pontalbet-boot-screen.is-ready { opacity: 0; visibility: hidden; pointer-events: none; }
.pontalbet-boot-glow {
    position: absolute;
    width: min(520px, 90vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(66, 132, 255, .2), transparent 67%);
    animation: pbGlow 2.2s ease-in-out infinite;
}
.pontalbet-boot-logo {
    position: relative;
    width: min(370px, 76vw);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 14px 34px rgba(0, 7, 28, .56));
    animation: pbLogoIn .65s cubic-bezier(.2,.8,.2,1) both;
}
.pontalbet-boot-loader {
    position: relative;
    width: min(280px, 68vw);
    height: 5px;
    overflow: hidden;
    border: 1px solid rgba(125, 171, 255, .23);
    border-radius: 99px;
    background: rgba(2, 10, 27, .62);
}
.pontalbet-boot-loader span {
    display: block;
    width: 45%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, #57a0ff, #65e1ff, transparent);
    box-shadow: 0 0 18px rgba(84, 166, 255, .75);
    animation: pbLoading 1.25s ease-in-out infinite;
}
.pontalbet-boot-screen strong { position: relative; font-size: 16px; letter-spacing: .01em; }
.pontalbet-boot-screen small { position: relative; color: #aebddd; font-size: 13px; }
@keyframes pbLoading { from { transform: translateX(-120%); } to { transform: translateX(340%); } }
@keyframes pbGlow { 50% { transform: scale(1.12); opacity: .72; } }
@keyframes pbLogoIn { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
* { scrollbar-width: thin; scrollbar-color: #315fae #09152c; }
*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-thumb { background: #315fae; border-radius: 99px; }
*::-webkit-scrollbar-track { background: #09152c; }

/* Cabeçalho */
.navtop-color,
.navbar,
.navtop-sj777 {
    background: rgba(9, 24, 53, .9) !important;
    border-bottom: 1px solid var(--pb-border) !important;
    box-shadow: 0 10px 32px rgba(0, 5, 20, .3) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.navtop-logo { max-height: 44px !important; object-fit: contain; }
.navtop-logo-link .navtop-logo,
.navtop-logo-link > img,
.navtop-logo-link > span,
.navtop-logo-link > div,
.sidebar-logo .sidebar-teal-logo { display: none !important; }
.navtop-logo-link::before {
    content: none !important;
    display: none !important;
}
.navtop-logo-link::after,
.sidebar-logo::after {
    content: "PONTALBET";
    display: inline-block;
    color: #fff;
    font-family: Inter, sans-serif;
    font-size: 23px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.8px;
    white-space: nowrap;
    text-shadow: 0 2px 14px rgba(38, 113, 255, .42);
}
.navtop-logo-link::after {
    background: linear-gradient(90deg, #fff 0 64%, #72a7ff 64% 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
.sidebar-logo::after { font-size: 21px; }

/* Reserva espaco real para marca e saldo no cabecalho autenticado. */
.navtop-sj777 {
    gap: 7px !important;
}
.navtop-logo-link {
    flex: 0 1 128px !important;
    min-width: 0 !important;
    max-width: 128px !important;
    overflow: hidden !important;
}
.navtop-logo-link::after {
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(15px, 4.7vw, 21px) !important;
    letter-spacing: -.55px !important;
}
.navtop-balance-wrap,
.wallet-balance-sj777 {
    position: relative !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin-left: auto !important;
    white-space: nowrap !important;
}
@media (max-width: 390px) {
    .navtop-logo-link {
        flex-basis: 96px !important;
        max-width: 96px !important;
    }
    .navtop-logo-link::after {
        font-size: 15px !important;
        letter-spacing: -.4px !important;
    }
    .navtop-balance-wrap,
    .wallet-balance-sj777 {
        max-width: 112px !important;
        font-size: 12px !important;
    }
}
@media (max-width: 374px) {
    .navtop-logo-link::after { font-size: 13px !important; letter-spacing: -0.3px !important; }
    .navtop-logo-link { flex-basis: 82px !important; max-width: 82px !important; }
}
.pontalbet-chest-progress {
    margin: 12px;
    padding: 16px;
    border: 1px solid rgba(101, 145, 255, .35);
    border-radius: 16px;
    color: #eaf1ff;
    background: linear-gradient(145deg, rgba(16, 36, 79, .96), rgba(8, 20, 48, .98));
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}
.pontalbet-chest-progress h3 { margin: 0 0 6px; font-size: 18px; font-weight: 900; }
.pontalbet-chest-progress p { margin: 0 0 12px; color: #b9c9e8; font-size: 13px; }
.pontalbet-chest-progress-item { padding: 10px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; }
.pontalbet-chest-progress-label { margin-bottom: 3px; font-size: 13px; font-weight: 800; }
.pontalbet-chest-progress-track { height: 7px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: #071126; }
.pontalbet-chest-progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4d82ff, #72b6ff); }
.navtop-balance-wrap,
.wallet-balance-sj777 {
    border: 1px solid var(--pb-border) !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.055) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Menu esquerdo do cabeçalho e painel lateral.
 * O componente legado injeta homev2_menu_bg.png como estilo inline; a imagem
 * pertence ao tema antigo e fazia o menu mudar de cor ao abrir. */
.navtop-btn-menu {
    display: inline-flex !important;
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(112, 166, 255, .38) !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, rgba(34, 66, 132, .94), rgba(17, 39, 86, .98)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 7px 18px rgba(0, 7, 25, .28) !important;
    transition: background .18s ease, border-color .18s ease, transform .18s ease !important;
}
.navtop-btn-menu:hover,
.navtop-btn-menu:focus-visible,
.navtop-btn-menu:active {
    border-color: rgba(130, 183, 255, .72) !important;
    background: linear-gradient(145deg, #356bc9, #204b9d) !important;
}
.navtop-btn-menu:active { transform: scale(.94) !important; }
.navtop-btn-menu img { filter: brightness(0) invert(1) !important; }

.sidebar-teal.sidebar-popup {
    background-color: #0c1835 !important;
    background-image:
        radial-gradient(circle at 18% 0%, rgba(72, 126, 231, .24), transparent 36%),
        linear-gradient(180deg, #142957 0%, #0c1835 42%, #081126 100%) !important;
    background-size: cover !important;
    background-position: center !important;
    border-right: 1px solid rgba(91, 143, 239, .32) !important;
    color: #eef4ff !important;
}
.sidebar-teal-header,
.sidebar-teal-footer {
    background: rgba(8, 17, 38, .34) !important;
}
.sidebar-teal .sidebar-section,
.sidebar-teal .sidebar-user-card {
    border-color: rgba(100, 151, 244, .22) !important;
    background-color: rgba(16, 35, 76, .72) !important;
}
.sidebar-overlay {
    background: rgba(2, 7, 19, .70) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}

/* Botões principais */
.btn-deposit,
.deposit-button,
.background-botao-deposito-nav,
.background-botao-registro-nav,
.background-botao-registro-modal,
.install-app-button {
    border: 1px solid rgba(151, 190, 255, .42) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #69a2ff, #346fde) !important;
    color: #fff !important;
    font-weight: 750 !important;
    box-shadow: 0 8px 24px rgba(45, 103, 221, .34), inset 0 1px 0 rgba(255,255,255,.25) !important;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
}
.btn-deposit:hover,
.deposit-button:hover,
.background-botao-deposito-nav:hover,
.background-botao-registro-nav:hover {
    filter: brightness(1.09);
    transform: translateY(-1px);
    box-shadow: 0 11px 30px rgba(45, 103, 221, .43) !important;
}
button:disabled { filter: grayscale(.2); opacity: .55 !important; cursor: not-allowed !important; }

/* Depósito, saque e carteira */
.wallet,
.deposit-amount,
.modal-content,
.modal-container,
.details-modal-container,
.invite-friends-modal-container,
.invite-friends-modal-wrapper {
    border: 1px solid var(--pb-border) !important;
    border-radius: var(--pb-radius) !important;
    background: linear-gradient(145deg, rgba(21, 45, 93, .97), rgba(9, 24, 53, .98)) !important;
    box-shadow: var(--pb-shadow), inset 0 1px 0 rgba(255,255,255,.055) !important;
}
.modal-header,
.details-modal-header {
    border-bottom: 1px solid var(--pb-border) !important;
    background: rgba(255,255,255,.025) !important;
}
.modal-footer { border-top: 1px solid var(--pb-border) !important; }
.modal-title,
.details-modal-title { color: var(--pb-text) !important; font-weight: 750 !important; letter-spacing: -.01em; }
.values-deposit,
.wallet-money,
.wallet-value { color: var(--pb-gold) !important; font-weight: 750 !important; }

input,
select,
textarea {
    border: 1px solid rgba(112, 155, 238, .28) !important;
    border-radius: 12px !important;
    background: rgba(4, 14, 34, .72) !important;
    color: var(--pb-text) !important;
    outline: none !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input:focus,
select:focus,
textarea:focus {
    border-color: var(--pb-primary) !important;
    background: rgba(8, 23, 51, .95) !important;
    box-shadow: 0 0 0 3px rgba(87, 144, 255, .15) !important;
}
input::placeholder,
textarea::placeholder { color: #8093b9 !important; }

/* Confirmação de maioridade no cadastro */
input#acceptTerms[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 23px !important;
    min-width: 23px !important;
    height: 23px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid #759eea !important;
    border-radius: 7px !important;
    background: #091735 !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 15px 15px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    flex: 0 0 23px !important;
}
input#acceptTerms[type="checkbox"]:checked {
    border-color: #75a6ff !important;
    background-color: #3978e8 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m4 10 4 4 8-9'/%3E%3C/svg%3E") !important;
    box-shadow: 0 0 0 4px rgba(87,144,255,.17) !important;
}
input#acceptTerms[type="checkbox"]:focus-visible {
    outline: 2px solid #9bc0ff !important;
    outline-offset: 3px !important;
}
input#acceptTerms + span {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    cursor: pointer !important;
    user-select: none;
    color: var(--pb-muted) !important;
}

/* Catálogo, cards e imagens dos jogos */
.casino,
.casino-sports-container { color: var(--pb-text); }
.casino-game,
.item-game {
    border: 1px solid rgba(102, 150, 243, .2) !important;
    border-radius: 15px !important;
    background: linear-gradient(160deg, rgba(24, 49, 100, .82), rgba(9, 24, 53, .9)) !important;
    box-shadow: 0 9px 25px rgba(0, 6, 23, .24) !important;
    overflow: hidden !important;
    transform: translateZ(0);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
.casino-game:hover,
.item-game:hover {
    transform: translateY(-4px) scale(1.015);
    border-color: rgba(101, 160, 255, .58) !important;
    box-shadow: 0 15px 36px rgba(0, 7, 29, .42), 0 0 0 1px rgba(81, 143, 255, .12) !important;
}
.casino-game img,
.item-game img { width: 100%; object-fit: cover; transition: transform .28s ease, filter .28s ease; }
.casino-game:hover img,
.item-game:hover img { transform: scale(1.035); filter: saturate(1.08) contrast(1.03); }
.casino-game-title { color: var(--pb-text) !important; font-weight: 650 !important; }

/* Filtros de categorias e provedores */
.category-nav-bar,
.provider-nav-bar {
    border: 1px solid var(--pb-border) !important;
    border-radius: 15px !important;
    background: rgba(10, 27, 59, .74) !important;
    box-shadow: 0 8px 25px rgba(0, 5, 20, .2);
    backdrop-filter: blur(12px);
}
.category-nav-btn,
.provider-nav-btn,
.category-nav-todos,
.provider-nav-todos,
.category-nav-mais,
.provider-nav-mais {
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    transition: background .18s ease, border-color .18s ease, transform .18s ease !important;
}
.category-nav-btn:hover,
.provider-nav-btn:hover,
.category-nav-todos:hover,
.provider-nav-todos:hover {
    border-color: var(--pb-border) !important;
    background: rgba(87, 144, 255, .12) !important;
    transform: translateY(-1px);
}

/* Navegação inferior para celular */
.background-bottom-navigation,
.gameTypeList-bottom,
.bottomnav-sj777 {
    background: rgba(8, 22, 48, .93) !important;
    border-top: 1px solid rgba(104, 153, 250, .28) !important;
    box-shadow: 0 -12px 35px rgba(0, 5, 20, .38) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.bottomnav-icon-wrap,
.nav-action {
    border-radius: 12px !important;
    transition: transform .18s ease, background .18s ease, color .18s ease !important;
}
.bottomnav-icon-wrap:active,
.nav-action:active { transform: scale(.93); }
.wallet-active,
.background-itens-selected {
    background: linear-gradient(135deg, rgba(96, 159, 255, .3), rgba(59, 111, 220, .18)) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(130, 177, 255, .26);
}

/* Camadas e feedback */
.modal,
.over-modal,
.over-modals,
.details-modal-overlay,
.invite-friends-modal-overlay,
.congrats-modal { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
a, button { -webkit-tap-highlight-color: transparent; }

@media (max-width: 768px) {
    :root { --pb-radius: 14px; }
    body { padding-bottom: env(safe-area-inset-bottom); }
    .casino-game:hover,
    .item-game:hover { transform: none; }
    .modal-content,
    .modal-container,
    .details-modal-container { border-radius: 18px 18px 0 0 !important; }
    .background-bottom-navigation,
    .bottomnav-sj777 { padding-bottom: max(5px, env(safe-area-inset-bottom)) !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}