/* =====================================================================
   SKIN "PATRON" — reskin do frontend no estilo patronbet.io
   Carregado DEPOIS do CSS do app (ver layouts/app.blade.php).
   Para desativar: remover a linha <link ... patron-skin.css> do layout.
   ===================================================================== */

:root {
    /* Paleta base */
    --pb-bg:        #0c0e11; /* mesma cor do menu lateral (--pb-side-bg) */
    --pb-sidebar:   #0b151e;
    --pb-header:    #0d1922;
    --pb-panel:     #142430;
    --pb-panel-2:   #1a2d3b;
    --pb-border:    #1e3242;
    --pb-text:      #eef4f9;
    --pb-muted:     #8da2b3;
    --pb-accent:    #1e9ee8;
    --pb-accent-2:  #0b74c0;
    --pb-accent-grad: linear-gradient(180deg, #2bb0f5 0%, #0d7fcf 100%);
    --pb-strip:     #12384c;
    --pb-radius:    12px;

    /* Mapeia a "Central de Design" para a paleta */
    --background_geral: var(--pb-bg);
    --background_geral_text_color: var(--pb-text);
    --background-color: var(--pb-bg);
    --home_background: var(--pb-bg);
    --home_text_color: var(--pb-text);
    --gamelist_background: var(--pb-bg);
    --carregando_background: var(--pb-bg);
    --title-color: var(--pb-text);
    --text-color: var(--pb-text);
    --sub-text-color: var(--pb-muted);
    --placeholder-color: var(--pb-muted);
    --ci-primary-color: var(--pb-accent);
    --ci-secundary-color: var(--pb-panel);
    --card-color: var(--pb-panel);
    --card-color-dark: var(--pb-panel);
    --standard-color: var(--pb-panel);
    --shadow-color: #08111a;

    --navbar-background: var(--pb-header);
    --navbar-text: var(--pb-text);
    --navbar-icon-menu: var(--pb-muted);
    --navbar-button-background-login: var(--pb-panel-2);
    --navbar-button-text-login: var(--pb-text);
    --navbar-button-background-registro: var(--pb-accent);
    --navbar-button-text-registro: #fff;
    --navbar-button-border-color: transparent;
    --navbar_button_deposito_background: var(--pb-accent);
    --navbar_button_deposito_text_color: #fff;
    --navbar_button_carteira_background: var(--pb-panel-2);
    --navbar_button_carteira_text_color: var(--pb-text);

    --sidebar-background: var(--pb-sidebar);
    --sidebar-text-color: var(--pb-text);
    --sidebar-text-hover: #fff;
    --sidebar-button-hover: var(--pb-panel-2);
    --sidebar-border: var(--pb-border);
    --sidebar-icons: var(--pb-muted);

    --footer-background: var(--pb-sidebar);
    --footer-text-color: var(--pb-muted);
    --footer-titulos: var(--pb-text);
    --footer-links: var(--pb-text);

    --home_background_categorias: var(--pb-panel);
    --home_text_color_categorias: var(--pb-text);
    --home_background_input_pesquisa: var(--pb-panel);
    --home_border_color_input_pesquisa: var(--pb-border);
    --home_icon_color_input_pesquisa: var(--pb-muted);
    --pesquisar_homepage_background: var(--pb-panel);
    --pesquisar_homepage_texto_color: var(--pb-text);
    --home_background_button_vertodos: var(--pb-panel-2);
    --home_text_color_button_vertodos: var(--pb-text);
    --home_background_button_banner: rgba(8, 17, 26, .75);
    --home_icon_color_button_banner: #fff;

    --login_background: var(--pb-bg);
    --login_input_background: var(--pb-panel);
    --login_input_border_color: var(--pb-border);
    --login_button_background: var(--pb-accent);
    --register_background: var(--pb-bg);
    --register_input_background: var(--pb-panel);
    --register_input_border_color: var(--pb-border);
    --register_button_background: var(--pb-accent);

    --popup_cookies_background: var(--pb-panel);
    --popup_cookies_button_background: var(--pb-accent);
    --menu_cell_background: var(--pb-header);
}

/* ---------- Base ---------- */
html, body, body.bg-base, #tourosbet {
    background: var(--pb-bg) !important;
    color: var(--pb-text);
}
body, button, input, h1, h2, h3, p, a, span {
    font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--pb-sidebar); }
::-webkit-scrollbar-thumb { background: var(--pb-panel-2); border-radius: 8px; }

/* ---------- Faixa de anúncio no topo ---------- */
.pb-strip {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    height: 44px; display: flex; align-items: center; justify-content: center; gap: 16px;
    background: var(--pb-strip); border-bottom: 1px solid #1b4a62;
    color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .02em; text-transform: uppercase;
}
.pb-strip a {
    background: #fff; color: #0d1922 !important; border-radius: 6px;
    padding: 6px 14px; font-size: 13px; font-weight: 800;
}
.pb-strip a:hover { background: #dff1fd; }
body.pb-has-strip .nav-menu,
body.pb-has-strip aside { top: 44px !important; }
body.pb-has-strip .sm\:ml-64.mt-\[65px\] { margin-top: 116px !important; }
@media (max-width: 640px) {
    .pb-strip { font-size: 11px; gap: 10px; padding: 0 12px; text-align: center; }
    .pb-strip a { padding: 5px 10px; font-size: 11px; white-space: nowrap; }
}

/* ---------- Header ---------- */
.nav-menu {
    position: fixed; left: 0; right: 0; top: 0;
    height: 72px !important;
    background: var(--pb-header) !important;
    border-bottom: 1px solid var(--pb-border);
    z-index: 40;
}
.nav-menu > div { height: 72px; display: flex; align-items: center; }
.nav-menu .lg\:ml-\[280px\] { flex: 1; }
.nav-menu .tirar-esporte a { color: #fff; letter-spacing: .02em; }
#open-side-nav { color: var(--pb-muted) !important; }
#open-side-nav:hover { background: var(--pb-panel) !important; color: #fff !important; }

.nav-menu .menudepositoperfil { padding: 0 !important; }
.nav-menu .menudepositoperfil .flex.ml-5 { gap: 10px; }
.nav-menu .btn-cta.bullsbet {
    height: 46px; padding: 0 28px !important;
    border-radius: 10px !important; border: 0 !important;
    font-size: 16px !important; font-weight: 700 !important;
    margin: 0 !important; transition: filter .15s, transform .15s;
}
/* Ordem igual ao Patron: Entrar (escuro) e depois Criar conta (azul) */
.nav-menu .menudepositoperfil .flex.ml-5 > .bullsbet:first-child {
    order: 2; background: var(--pb-accent-grad) !important; color: #fff !important;
    box-shadow: 0 4px 18px rgba(30, 158, 232, .35), inset 0 1px 0 rgba(255,255,255,.25);
}
.nav-menu .menudepositoperfil .flex.ml-5 > .bullsbet:last-child {
    order: 1; background: var(--pb-panel-2) !important; color: #fff !important;
    border: 1px solid var(--pb-border) !important;
}
.nav-menu .btn-cta.bullsbet:hover { filter: brightness(1.12); transform: translateY(-1px); }

/* ---------- Sidebar ---------- */
aside.fixed {
    background: var(--pb-sidebar) !important;
    border-right: 1px solid var(--pb-border) !important;
    padding-top: 72px !important;
}
aside .px-4:first-child {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 14px 8px 18px !important; border-bottom: 0 !important;
}
aside .px-4:first-child > button {
    margin: 0 !important; min-height: 58px; border-radius: 8px !important;
    position: relative; overflow: hidden; border: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 14px rgba(0,0,0,.35);
    transition: transform .15s, filter .15s;
}
aside .px-4:first-child > button:hover { transform: translateY(-1px); filter: brightness(1.1); }
aside .px-4:first-child > button:nth-child(1) {
    grid-column: 1 / -1; min-height: 64px;
    background: linear-gradient(100deg, #b3121c 0%, #e5242d 55%, #ff5b3a 100%) !important;
}
aside .px-4:first-child > button:nth-child(2),
aside .px-4:first-child > button:nth-child(3) {
    background: linear-gradient(160deg, #8a5a16 0%, #5b3a0d 100%) !important;
}
aside .px-4:first-child > button:nth-child(4) {
    grid-column: 1 / -1;
    background: linear-gradient(100deg, #0d6fb8 0%, #1e9ee8 100%) !important;
}
aside .px-4:first-child > button h1 { color: #fff !important; font-weight: 800; text-transform: uppercase; font-size: 13px; line-height: 1.15; }
aside .px-4:first-child > button small { color: rgba(255,255,255,.8) !important; text-transform: none; font-weight: 500; font-size: 11px; display: block; }
aside .px-4:first-child > button span.text-\[25px\] { font-size: 28px !important; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }

/* Títulos de seção estilo "ATALHOS DE CASSINO ———" */
aside .COrIc { display: flex; align-items: center; gap: 12px; margin: 6px 0 8px; }
aside .COrIc .text-sidebar-titles {
    color: var(--pb-muted) !important; font-size: 12px !important; font-weight: 700 !important;
    letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
aside .COrIc::after { content: ""; flex: 1; height: 1px; background: var(--pb-border); order: 1; }
aside .COrIc .text-sidebar-links { order: 2; color: var(--pb-muted) !important; }

aside ul.space-y-2 { margin-left: 0 !important; padding: 8px 14px !important; }
aside a.texto-categoria {
    padding: 9px 10px !important; border-radius: 8px; margin: 0 -10px;
    color: var(--pb-text) !important; font-size: 16px; font-weight: 500;
    opacity: 1 !important; filter: none !important; transition: background .15s;
}
aside a.texto-categoria:hover { background: var(--pb-panel); }
aside a.texto-categoria img { width: 22px !important; height: 22px !important; margin-right: 14px !important; filter: grayscale(1) brightness(1.6); opacity: .85; }
aside a.texto-categoria:hover img { filter: none; opacity: 1; }

/* ---------- Conteúdo ---------- */
.sm\:ml-64.mt-\[65px\] { margin-top: 72px !important; }
@media (min-width: 1024px) {
    .sm\:ml-64.mt-\[65px\] { margin-left: 280px !important; }
    .sm\:ml-64.mt-\[65px\] .lg\:max-w-\[1020px\] { max-width: none !important; }
}

/* Banner: slide central grande, vizinhos aparecendo esmaecidos */
.carousel-banners { width: 100%; padding: 22px 0 8px !important; overflow: hidden; }
.carousel-banners > div { padding: 0 !important; }
.carousel-banners .carousel__viewport { overflow: visible !important; }
.carousel-banners .carousel__slide { padding: 0 8px; transition: opacity .35s, transform .35s; }
.carousel-banners .carousel__slide:not(.carousel__slide--active) { opacity: .28; transform: scale(.94); }
.carousel-banners .carousel__item,
.carousel-banners .carousel__item a,
.carousel-banners .carousel__item img { border-radius: 18px !important; background: transparent !important; }
.carousel-banners .carousel__item img { object-fit: cover; box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.carousel-banners .carousel__prev,
.carousel-banners .carousel__next {
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(8, 17, 26, .8) !important; border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(6px); z-index: 5;
}
.carousel-banners .carousel__prev { left: -18px; }
.carousel-banners .carousel__next { right: -18px; }

/* Busca */
.UTJUl {
    height: 52px; background: var(--pb-panel) !important;
    border: 1px solid var(--pb-border) !important; border-radius: 10px !important;
    padding: 0 16px !important;
}
.UTJUl input, .UTJUl input::placeholder { color: var(--pb-muted) !important; font-size: 16px; background: transparent !important; }
.UTJUl .zgpS2 { background: var(--pb-panel-2) !important; border-radius: 8px; padding: 6px 12px; height: 34px; color: var(--pb-text); }

/* Atalhos de categoria */
.categorias0101 {
    width: 64px !important; height: 64px !important; border-radius: 14px !important;
    background: var(--pb-panel) !important; border: 1px solid var(--pb-border);
    transition: background .15s, border-color .15s, transform .15s;
}
.category-list a:hover .categorias0101 { background: var(--pb-panel-2) !important; border-color: var(--pb-accent); transform: translateY(-2px); }
.category-list p { color: var(--pb-muted) !important; font-size: 13px; font-weight: 500; }
.category-list a:hover p { color: #fff !important; }

/* Títulos de seção com selo azul — "Os mais jogados" */
h2.title_prviders,
.providers-carousel h2 {
    display: inline-flex; align-items: center; gap: 14px;
    font-size: 22px !important; font-weight: 700 !important; color: #fff !important;
    line-height: 48px !important; height: 48px;
}
h2.title_prviders::before,
.providers-carousel h2::before {
    content: "\f11b"; /* gamepad */
    font-family: "Font Awesome 6 Pro"; font-weight: 900; font-size: 18px; color: #fff;
    width: 48px; height: 48px; border-radius: 12px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pb-accent-grad);
    box-shadow: 0 4px 14px rgba(30, 158, 232, .35), inset 0 1px 0 rgba(255,255,255,.25);
}
.providers-carousel h2::before { content: "\f1b3"; }
.game-list > .w-full, .mt-3 > .w-full.flex { align-items: center; margin-bottom: 6px; min-height: 48px; }

/* Setas e "Ver todos" como botões quadrados escuros */
.celular-providers-setas,
.mt-3 .nuxt-icon.cursor-pointer,
.providers-carousel .nuxt-icon.cursor-pointer {
    width: 40px !important; height: 40px !important; border-radius: 10px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    background: var(--pb-panel) !important; border: 1px solid var(--pb-border);
    color: var(--pb-text) !important; margin-left: 6px !important;
}
.celular-providers-setas:hover,
.mt-3 .nuxt-icon.cursor-pointer:hover,
.providers-carousel .nuxt-icon.cursor-pointer:hover { background: var(--pb-panel-2) !important; color: #fff !important; }
.vertodos {
    background: var(--pb-panel) !important; border: 1px solid var(--pb-border);
    color: var(--pb-text) !important; border-radius: 10px; padding: 0 16px;
    height: 40px; line-height: 40px; font-size: 14px !important; font-weight: 600;
}
.vertodos:hover { background: var(--pb-panel-2) !important; }

/* ---------- Cards de jogo ---------- */
.item-sombra2 .carousel__slide { padding: 6px !important; }
.item-sombra2 .carousel__slide > div.cursor-pointer,
.game-list .carousel__slide > div.cursor-pointer {
    border-radius: 12px !important; background: var(--pb-panel);
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    transition: transform .2s ease, box-shadow .2s ease;
    isolation: isolate;
}
.item-sombra2 .carousel__slide > div.cursor-pointer img { transition: transform .35s ease, filter .25s; }
/* overlay + botão play no hover */
.item-sombra2 .carousel__slide > div.cursor-pointer::after {
    content: "\f04b";
    font-family: "Font Awesome 6 Pro"; font-weight: 900; font-size: 18px; color: #fff;
    position: absolute; inset: 0; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at center, var(--pb-accent) 0 26px, transparent 27px),
        linear-gradient(180deg, rgba(8,17,26,.15), rgba(8,17,26,.75));
    opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.item-sombra2 .carousel__slide > div.cursor-pointer:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0,0,0,.5), 0 0 0 2px var(--pb-accent);
}
.item-sombra2 .carousel__slide > div.cursor-pointer:hover::after { opacity: 1; }
.item-sombra2 .carousel__slide > div.cursor-pointer:hover img { transform: scale(1.06); }

/* Provedores */
.providers-carousel a.block {
    background: var(--pb-panel); border: 1px solid var(--pb-border); border-radius: 12px;
    transition: background .15s, border-color .15s;
}
.providers-carousel a.block:hover { background: var(--pb-panel-2); border-color: var(--pb-accent); }

/* ---------- Footer ---------- */
.footer.pb-32 {
    background: var(--pb-sidebar) !important; border-top: 1px solid var(--pb-border);
    margin-top: 32px; color: var(--pb-muted);
}
.footer .border-\[\#5B5E5F\], .footer [class*="border-[#5B5E5F]"] { border-color: var(--pb-border) !important; }
.footer p.font-bold, .footer p.text-lg { color: #fff; }
.footer button.rounded-full { background: var(--pb-panel) !important; border-color: var(--pb-border) !important; border-radius: 10px !important; }
.footer .footer .footer { background: transparent !important; border: 0; margin: 0; }

/* ---------- Mobile ---------- */
.navBtn {
    background: var(--pb-header) !important; border-top: 1px solid var(--pb-border);
    box-shadow: 0 -6px 20px rgba(0,0,0,.4);
}
.navBtn span { color: var(--pb-muted); font-weight: 600; }
.navBtn button:hover span { color: #fff; }

@media (max-width: 1023px) {
    .nav-menu { height: 64px !important; }
    .nav-menu > div { height: 64px; }
    .nav-menu .btn-cta.bullsbet { height: 38px; padding: 0 14px !important; font-size: 14px !important; }
    .sm\:ml-64.mt-\[65px\] { margin-top: 64px !important; }
    body.pb-has-strip .sm\:ml-64.mt-\[65px\] { margin-top: 108px !important; }
    aside.fixed { padding-top: 64px !important; }
    .carousel-banners { padding: 12px 0 4px !important; }
    .carousel-banners .carousel__slide:not(.carousel__slide--active) { opacity: 1; transform: none; }
    .carousel-banners .carousel__item img { border-radius: 12px !important; }
    h2.title_prviders, .providers-carousel h2 { font-size: 17px !important; height: 38px; line-height: 38px !important; gap: 10px; }
    h2.title_prviders::before, .providers-carousel h2::before { width: 38px; height: 38px; border-radius: 10px; font-size: 15px; }
}

/* ---------- Popups / modais ---------- */
.BsNH3 { background: var(--pb-panel) !important; border: 1px solid var(--pb-border); border-radius: 14px !important; }
.BsNH3 .HqiXL { background: var(--pb-accent) !important; color: #fff !important; border-radius: 8px; padding: 0 14px; border: 0; }
.BsNH3 .u9v7x { border-radius: 8px; padding: 0 14px; color: var(--pb-muted) !important; }
#modalProfileEl .modal-my-profile { background: var(--pb-panel) !important; border: 1px solid var(--pb-border); border-radius: 16px !important; }

/* ---------- Ajustes finos ---------- */
/* Banner com "peek": no desktop o carrossel ocupa 80% e os vizinhos aparecem nas laterais */
@media (min-width: 1024px) {
    .carousel-banners > div { width: 80% !important; max-width: none !important; margin: 0 auto; }
    .carousel-banners .carousel__prev { left: -23px; }
    .carousel-banners .carousel__next { right: -23px; }
}
/* Botão CASSINO como a pílula azul do Patron */
.nav-menu .tirar-esporte.border-primary {
    background: var(--pb-accent-grad); border-radius: 10px; padding: 10px 18px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25); border: 0 !important; margin-top: 4px;
}
.nav-menu .tirar-esporte.border-primary a { font-size: 15px !important; }
/* Tiles da sidebar: legenda numa linha só */
aside .px-4:first-child > button small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
aside .px-4:first-child > button h1 { padding-right: 34px; }
aside .px-4:first-child > button span.text-\[25px\] { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }

@media (max-width: 1023px) {
    .carousel-banners .carousel__prev, .carousel-banners .carousel__next { display: none !important; }
    .game-list .celular-providers-setas { display: none !important; }
    .game-list > .w-full > .flex:first-child { min-width: 0; flex: 1; }
    h2.title_prviders { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; max-width: 100%; }
    .vertodos { height: 34px; line-height: 34px; padding: 0 12px; font-size: 13px !important; white-space: nowrap; }
}

/* ---------- Largura total (desktop) ---------- */
@media (min-width: 1024px) {
    .sm\:ml-64.mt-\[65px\] .sm\:max-w-\[690px\],
    .sm\:ml-64.mt-\[65px\] .lg\:max-w-\[1020px\] { max-width: none !important; width: 100%; }
    .sm\:ml-64.mt-\[65px\] > .relative > div > .mx-auto.p-4,
    .sm\:ml-64.mt-\[65px\] .mx-auto.p-4.sm\:max-w-\[690px\] { padding-left: 28px !important; padding-right: 28px !important; }
    .carousel-banners > div { width: 76% !important; }

    /* Fileiras de jogos: rolagem nativa com cards de largura fixa (mais jogos por linha) */
    .item-sombra2 .carousel__viewport {
        overflow-x: auto !important; scroll-behavior: smooth; scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .item-sombra2 .carousel__viewport::-webkit-scrollbar { display: none; }
    .item-sombra2 .carousel__track { transform: none !important; }
    .item-sombra2 .carousel__slide { width: 196px !important; flex: 0 0 196px !important; scroll-snap-align: start; }
    .item-sombra2 .carousel__slide > div.cursor-pointer { height: auto !important; aspect-ratio: 3 / 4; }
    .game-list .item-sombra2 .carousel__slide > div.cursor-pointer { aspect-ratio: 133 / 155; }
    .item-sombra2 .carousel__slide > div.cursor-pointer img { height: 100% !important; }
    .category-list .flex.flex-row.justify-between { justify-content: flex-start !important; gap: 14px; }
}
@media (min-width: 1024px) {
    .game-list { margin-bottom: 22px; }
    .item-sombra2 .carousel__viewport { padding-bottom: 6px; }
}

/* =====================================================================
   MENU LATERAL — layout do Patron (montado por layouts/patron-sidebar.blade.php)
   ===================================================================== */
:root { --pb-side-bg: #0c0e11; --pb-side-line: #1d2228; --pb-side-text: #eef1f4; --pb-side-muted: #8e98a3; }

aside.fixed { background: var(--pb-side-bg) !important; border-right-color: var(--pb-side-line) !important; }
/* esconde o conteúdo original (fica no DOM: os botões são acionados pelo novo menu) */
body.pb-side-on aside.fixed > div > :not(.pb-side) { display: none !important; }
body.pb-side-on aside.fixed > div { padding-bottom: 24px !important; }

.pb-side { padding: 18px 14px 8px; }

/* Blocos de promoção */
.pb-promos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.pb-tile {
    position: relative; display: flex; align-items: center; gap: 10px; overflow: hidden;
    border-radius: 10px; color: #fff !important; text-align: left; cursor: pointer;
    border: 1px solid rgba(255, 200, 90, .25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 16px rgba(0,0,0,.45);
    transition: transform .15s, filter .15s;
}
.pb-tile:hover { transform: translateY(-1px); filter: brightness(1.12); }
.pb-tile__art { flex: none; display: flex; align-items: center; justify-content: center; }
.pb-tile__txt { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.pb-tile__txt b { font-weight: 900; letter-spacing: .01em; text-shadow: 0 2px 6px rgba(0,0,0,.45); }
.pb-tile__txt small { font-size: 13px; font-weight: 500; opacity: .92; margin-top: 3px; }

.pb-tile--hero {
    grid-column: 1 / -1; height: 92px; padding: 0 16px 0 6px;
    background:
        radial-gradient(120% 140% at 0% 50%, rgba(255,120,60,.55) 0%, transparent 55%),
        linear-gradient(100deg, #d0131c 0%, #a80d15 55%, #7a070d 100%);
    border-color: rgba(255,110,110,.35);
}
.pb-tile--hero .pb-tile__art { width: 96px; height: 92px; font-size: 54px;
    --fa-primary-color: #ffd36b; --fa-secondary-color: #ff7a1a; --fa-secondary-opacity: 1;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); transform: rotate(-8deg); }
.pb-tile--hero .pb-tile__txt { margin-left: auto; text-align: left; }
.pb-tile--hero b { font-size: 23px; }

.pb-tile--gold {
    height: 88px; padding: 0 12px 0 4px; justify-content: space-between;
    background: linear-gradient(90deg, #17130c 0%, #3b2a10 45%, #8f6a26 100%);
}
.pb-tile--gold .pb-tile__art { width: 62px; height: 88px; font-size: 42px;
    --fa-primary-color: #ffcc4d; --fa-secondary-color: #e0451f; --fa-secondary-opacity: 1;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.55)); transform: rotate(-10deg) translateX(-4px); }
.pb-tile--gold b { font-size: 15px; }

/* Títulos de seção "ATALHOS DE CASSINO ———" */
.pb-sec {
    display: flex; align-items: center; gap: 16px; margin: 8px 2px 10px;
    color: var(--pb-side-muted); font-size: 13px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
}
.pb-sec::after { content: ""; flex: 1; height: 1px; background: var(--pb-side-line); }

/* Links */
.pb-links { display: flex; flex-direction: column; margin-bottom: 18px; }
.pb-links a {
    display: flex; align-items: center; gap: 16px; padding: 0 10px; height: 46px;
    border-radius: 8px; color: var(--pb-side-text) !important;
    font-size: 17px; font-weight: 400; letter-spacing: .005em;
    transition: background .15s, color .15s;
}
.pb-links a:hover { background: #161a1f; color: #fff !important; }
.pb-links a.is-active { background: #161a1f; box-shadow: inset 3px 0 0 var(--pb-accent); }
.pb-links a > i { width: 24px; text-align: center; font-size: 19px; color: #e9edf1; flex: none; }
.pb-links--games a { gap: 18px; }
.pb-links--games img {
    width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none;
    box-shadow: 0 0 0 2px #1b2026;
}

/* Topo da sidebar: logo + botão recolher (desktop) */
.pb-brand { display: none; }
@media (min-width: 1024px) {
    .pb-brand {
        position: fixed; top: 0; left: 0; z-index: 45; width: 280px; height: 72px;
        display: flex; align-items: center; justify-content: space-between; padding: 0 22px 0 24px;
        background: var(--pb-side-bg); border-right: 1px solid var(--pb-side-line);
        border-bottom: 1px solid var(--pb-side-line);
    }
    body.pb-has-strip .pb-brand { top: 44px; }
    .pb-brand img { max-height: 40px; max-width: 170px; object-fit: contain; }
    .pb-collapse { color: #7d8792; font-size: 20px; padding: 6px; border-radius: 8px; }
    .pb-collapse:hover { color: #fff; background: #161a1f; }
    /* a pílula CASSINO sai de cima da sidebar e vai para depois do logo */
    .nav-menu > .absolute.top-0.left-5 { left: 296px !important; }
    .nav-menu .lg\:ml-\[280px\] { margin-left: 440px !important; }
    #open-side-nav, .nav-menu .custom-component { display: none !important; }

    /* recolher: esconde a sidebar e o conteúdo ocupa tudo */
    body.pb-collapsed aside.fixed { transform: translateX(-100%) !important; }
    body.pb-collapsed .sm\:ml-64.mt-\[65px\] { margin-left: 0 !important; }
    body.pb-collapsed .pb-brand { border-right-color: transparent; }
}

/* ajustes do menu lateral: sidebar de 280px no desktop */
@media (min-width: 1024px) { .pb-brand { z-index: 1000; } }
.pb-side { padding: 16px 12px 8px; }
.pb-tile--hero { height: 84px; padding: 0 14px 0 4px; }
.pb-tile--hero .pb-tile__art { width: 78px; height: 84px; font-size: 46px; }
.pb-tile--hero b { font-size: 19px; }
.pb-tile--hero small { font-size: 12px; }
.pb-tile--gold { height: 74px; padding: 0 10px 0 2px; }
.pb-tile--gold .pb-tile__art { width: 46px; height: 74px; font-size: 32px; }
.pb-tile--gold b { font-size: 13px; }
.pb-sec { font-size: 11.5px; letter-spacing: .13em; gap: 12px; }
.pb-links a { font-size: 16px; height: 44px; gap: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-links a > i { font-size: 18px; }

/* =====================================================================
   MODAL ENTRAR / CRIAR CONTA (layouts/patron-auth-modal.blade.php)
   ===================================================================== */
html.pb-auth-open, html.pb-auth-open body { overflow: hidden !important; }
.pb-auth[hidden] { display: none !important; }
.pb-auth { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.pb-auth__backdrop { position: absolute; inset: 0; background: rgba(3, 8, 13, .72); backdrop-filter: blur(3px); opacity: 0; transition: opacity .18s; }
.pb-auth__dialog {
    position: relative; display: flex; width: 100%; max-width: 912px; max-height: calc(100vh - 32px);
    border-radius: 18px; overflow: hidden;
    background:
        radial-gradient(90% 70% at 100% 100%, rgba(22, 104, 160, .38) 0%, transparent 60%),
        linear-gradient(180deg, #0f1c27 0%, #0e1b26 100%);
    border: 1px solid #1d3242;
    box-shadow: 0 30px 80px rgba(0,0,0,.6);
    transform: translateY(12px) scale(.98); opacity: 0; transition: transform .18s ease, opacity .18s ease;
}
.pb-auth.is-in .pb-auth__backdrop { opacity: 1; }
.pb-auth.is-in .pb-auth__dialog { transform: none; opacity: 1; }

.pb-auth__close {
    position: absolute; top: 12px; right: 12px; z-index: 2; width: 52px; height: 52px; border-radius: 12px;
    color: #c9d5df; font-size: 20px; background: #13222e; border: 1px solid #1d3242;
}
.pb-auth__close:hover { color: #fff; background: #1a2d3b; }

.pb-auth__art { flex: 0 0 39%; background: #0b1620; display: flex; }
.pb-auth__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-auth.no-art .pb-auth__art { display: none; }

.pb-auth__body { flex: 1; min-width: 0; overflow-y: auto; padding: 40px 42px 34px; display: flex; flex-direction: column; }
.pb-auth__title {
    text-align: center; color: #fff; font-size: 34px; line-height: 1.1; margin: 0;
    font-weight: 900; font-style: italic; letter-spacing: .01em;
}
.pb-auth__subtitle { text-align: center; color: #cfdae3; font-size: 14px; margin: 10px 0 22px; }

.pb-auth__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 26px; border-radius: 10px; background: #1b2b38; border: 1px solid #22394a; }
.pb-auth__tabs button {
    height: 38px; border-radius: 7px; color: #dce6ee; font-size: 14px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: background .15s;
}
.pb-auth__tabs button:hover { background: #22384a; }
.pb-auth__tabs button.is-on {
    background: linear-gradient(180deg, #2bb0f5 0%, #0d7fcf 100%); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 14px rgba(30, 158, 232, .3);
}

.pb-auth__form { display: flex; flex-direction: column; gap: 16px; }
.pb-auth__form[hidden] { display: none; }
.pb-field {
    position: relative; display: flex; align-items: center; height: 58px; border-radius: 10px;
    background: #12212d; border: 1px solid #1f3444; transition: border-color .15s, box-shadow .15s; cursor: text;
}
.pb-field:focus-within { border-color: #1e9ee8; box-shadow: 0 0 0 3px rgba(30, 158, 232, .15); }
.pb-field.is-bad { border-color: #e5484d; box-shadow: 0 0 0 3px rgba(229, 72, 77, .14); }
.pb-field > i { width: 54px; text-align: center; color: #9fb0bd; font-size: 16px; flex: none; }
.pb-field input {
    flex: 1; min-width: 0; height: 100%; background: transparent !important; border: 0 !important; outline: 0 !important;
    box-shadow: none !important; color: #fff; font-size: 17px; padding: 0 16px 0 0;
}
.pb-field input::placeholder { color: #c3ced8; opacity: 1; }
.pb-field input:-webkit-autofill { -webkit-text-fill-color: #fff; transition: background-color 9999s; }
.pb-field--phone .pb-ddi {
    display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 16px; margin-right: 16px;
    border-right: 1px solid #1f3444; color: #dce6ee; font-size: 14px; flex: none;
}
.pb-flag { width: 18px; height: 18px; border-radius: 50%; flex: none;
    background: radial-gradient(circle at 50% 50%, #1f3f9a 0 28%, #ffdf00 29% 46%, #009c3b 47%); }
.pb-eye { width: 52px; height: 100%; color: #9fb0bd; font-size: 15px; flex: none; }
.pb-eye:hover { color: #fff; }

.pb-terms { display: flex; gap: 14px; padding: 16px 18px; border-radius: 10px; background: #12212d; border: 1px solid #1f3444; cursor: pointer; }
.pb-terms input { position: absolute; opacity: 0; pointer-events: none; }
.pb-terms__box { flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; border: 2px solid #5f7383; transition: all .15s; }
.pb-terms input:checked + .pb-terms__box { border-color: #1e9ee8; background: #1e9ee8; box-shadow: inset 0 0 0 3px #12212d; }
.pb-terms input:focus-visible + .pb-terms__box { outline: 2px solid #1e9ee8; outline-offset: 2px; }
.pb-terms__txt { color: #dce6ee; font-size: 12.5px; line-height: 1.5; }
.pb-terms__txt b, .pb-terms__txt a { color: #2aa8f2; font-weight: 700; }
.pb-terms__txt a:hover { text-decoration: underline; }
.pb-terms__txt small { display: block; margin-top: 10px; color: #c1ccd6; font-size: 11.5px; line-height: 1.5; }

.pb-auth__forgot { align-self: flex-end; color: #2aa8f2; font-size: 13px; font-weight: 600; margin-top: -4px; }
.pb-auth__forgot:hover { text-decoration: underline; }

.pb-auth__error { border-radius: 10px; padding: 10px 14px; background: rgba(229, 72, 77, .12); border: 1px solid rgba(229, 72, 77, .4); color: #ffb4b6; font-size: 13px; line-height: 1.45; }

.pb-auth__submit {
    height: 54px; border-radius: 10px; margin-top: 4px;
    background: linear-gradient(180deg, #1990d6 0%, #0c5f97 100%);
    color: #072a42; font-size: 16px; font-weight: 800; letter-spacing: .02em;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 22px rgba(13, 110, 175, .35);
    transition: filter .15s, transform .15s;
}
.pb-auth__submit:hover { filter: brightness(1.1); transform: translateY(-1px); }
.pb-auth__submit:disabled { filter: grayscale(.4) brightness(.85); cursor: wait; transform: none; }
.pb-auth__submit.is-loading i { animation: pb-spin .8s linear infinite; }
.pb-auth__submit.is-loading i::before { content: "\f110"; }
@keyframes pb-spin { to { transform: rotate(360deg); } }

@media (max-width: 767px) {
    .pb-auth { padding: 0; align-items: flex-end; }
    .pb-auth__dialog { max-height: 94vh; border-radius: 18px 18px 0 0; }
    .pb-auth__art { display: none; }
    .pb-auth__body { padding: 28px 18px 22px; }
    .pb-auth__title { font-size: 27px; }
    .pb-auth__close { width: 42px; height: 42px; top: 10px; right: 10px; font-size: 17px; }
    .pb-field { height: 52px; }
    .pb-field input { font-size: 16px; }
}

/* Modal: proporções medidas do print do Patron (desktop) */
@media (min-width: 768px) {
    .pb-auth__dialog { max-width: 764px; border-radius: 16px; }
    .pb-auth__art { flex: 0 0 297px; background: #0d1821; align-items: center; justify-content: center; }
    .pb-auth__art img { width: 100%; height: auto; max-height: 100%; object-fit: contain; }
    .pb-auth__close { top: 0; right: 0; width: 46px; height: 46px; border-radius: 0 16px 0 12px; font-size: 16px; border-width: 0 0 1px 1px; }
    .pb-auth__body { padding: 34px 35px 30px 36px; }
    .pb-auth__title { font-size: 28px; }
    .pb-auth__subtitle { font-size: 11.5px; margin: 8px 0 18px; }
    .pb-auth__tabs { padding: 3px; margin-bottom: 20px; border-radius: 8px; }
    .pb-auth__tabs button { height: 30px; font-size: 12px; border-radius: 6px; gap: 8px; }
    .pb-auth__form { gap: 14px; }
    .pb-field { height: 48px; border-radius: 8px; }
    .pb-field > i { width: 43px; font-size: 13px; }
    .pb-field input { font-size: 15px; }
    .pb-field--phone .pb-ddi { width: 80px; padding: 0 0 0 14px; margin-right: 14px; font-size: 11.5px; gap: 7px; }
    .pb-flag { width: 15px; height: 15px; }
    .pb-eye { width: 44px; font-size: 13px; }
    .pb-terms { padding: 12px 16px 14px 16px; gap: 12px; border-radius: 8px; }
    .pb-terms__box { width: 16px; height: 16px; }
    .pb-terms__txt { font-size: 10.5px; }
    .pb-terms__txt small { font-size: 9.5px; margin-top: 8px; }
    .pb-auth__forgot { font-size: 12px; }
    .pb-auth__error { font-size: 12px; padding: 8px 12px; }
    .pb-auth__submit { height: 42px; border-radius: 8px; font-size: 13px; margin-top: 2px; }
}

/* =====================================================================
   TOPO: Cassino/Esportes + busca (header) e faixa de jogos (layouts/patron-topbar.blade.php)
   ===================================================================== */
.pb-topnav { display: none; }
@media (min-width: 1024px) {
    .pb-topnav {
        position: fixed; top: 0; left: 280px; z-index: 1000; height: 72px;
        display: flex; align-items: center; gap: 12px; padding-left: 20px;
        pointer-events: none;
    }
    .pb-topnav > * { pointer-events: auto; }
    body.pb-has-strip .pb-topnav { top: 44px; }
    body.pb-collapsed .pb-topnav { left: 280px; }
    /* esconde o que o header original tinha nessa área */
    body.pb-topnav-on .nav-menu > .absolute.top-0.left-5,
    body.pb-topnav-on .nav-menu .lg\:ml-\[280px\] .justify-start { display: none !important; }
    body.pb-topnav-on .nav-menu .lg\:ml-\[280px\] > div > div { justify-content: flex-end !important; }
}

.pb-seg { display: flex; gap: 2px; padding: 4px; border-radius: 12px; background: #14232f; border: 1px solid #1e3242; }
.pb-seg a, .pb-seg button {
    position: relative; height: 38px; padding: 0 18px; border-radius: 9px;
    display: inline-flex; align-items: center; gap: 10px;
    color: #c9d6e0 !important; font-size: 14px; font-weight: 700; white-space: nowrap;
}
.pb-seg a i, .pb-seg button i { font-size: 15px; }
.pb-seg .is-on {
    background: linear-gradient(180deg, #2bb0f5 0%, #0d7fcf 100%); color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 14px rgba(30, 158, 232, .3);
}
.pb-seg button:hover { background: #1a2d3b; color: #fff !important; }
.pb-seg__soon em {
    position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%);
    background: #fff; color: #0d1922; font-style: normal; font-size: 11px; font-weight: 800;
    padding: 4px 8px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .15s;
}
.pb-seg__soon:hover em, .pb-seg__soon.is-flash em { opacity: 1; }

.pb-search { position: relative; width: clamp(180px, calc(100vw - 1000px), 380px); }
.pb-search > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #7f93a3; font-size: 14px; pointer-events: none; }
.pb-search input {
    width: 100%; height: 46px; padding: 0 16px 0 44px; border-radius: 10px;
    background: #12212d !important; border: 1px solid #1e3242 !important; color: #fff; font-size: 15px;
    outline: 0 !important; box-shadow: none !important;
}
.pb-search input::placeholder { color: #a8b7c3; }
.pb-search input:focus { border-color: #1e9ee8 !important; }
.pb-search input::-webkit-search-cancel-button { filter: invert(.6); }
.pb-search__drop {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); max-height: 420px; overflow-y: auto;
    background: #12212d; border: 1px solid #1e3242; border-radius: 12px; padding: 6px;
    box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
.pb-search__item { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 8px; color: #fff !important; }
.pb-search__item:hover { background: #1a2d3b; }
.pb-search__item img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex: none; }
.pb-search__item span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pb-search__item b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-search__item small { font-size: 12px; color: #8da2b3; }
.pb-search__item > i { color: #1e9ee8; font-size: 12px; opacity: 0; }
.pb-search__item:hover > i { opacity: 1; }
.pb-search__empty { padding: 14px 12px; color: #8da2b3; font-size: 13px; }

/* Faixa de jogos */
.pb-ticker[hidden] { display: none !important; }
.pb-ticker {
    display: flex; align-items: stretch; gap: 14px; padding: 16px 28px 4px;
}
.pb-ticker__tabs {
    flex: none; display: flex; flex-direction: column; gap: 4px; padding: 4px;
    border-radius: 10px; background: #14232f; border: 1px solid #1e3242;
}
.pb-ticker__tabs button { width: 32px; flex: 1; border-radius: 7px; color: #8da2b3; font-size: 14px; }
.pb-ticker__tabs button:hover { color: #fff; }
.pb-ticker__tabs button.is-on { background: linear-gradient(180deg, #2bb0f5 0%, #0d7fcf 100%); color: #fff; }
.pb-ticker__viewport {
    flex: 1; min-width: 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
            mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.pb-ticker__track { display: flex; gap: 14px; width: max-content; animation: pb-marquee 60s linear infinite; }
.pb-ticker:hover .pb-ticker__track { animation-play-state: paused; }
@keyframes pb-marquee { to { transform: translateX(-50%); } }
.pb-tk {
    display: flex; align-items: center; gap: 12px; width: 222px; height: 76px; padding: 0 12px 0 10px; flex: none;
    border-radius: 10px; background: #14232f; border: 1px solid #1e3242; color: #fff !important;
    transition: background .15s, border-color .15s;
}
.pb-tk:hover { background: #1a2d3b; border-color: #2a4a60; }
.pb-tk img { width: 54px; height: 54px; border-radius: 8px; object-fit: cover; flex: none; }
.pb-tk span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pb-tk b { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-tk small { font-size: 12px; color: #a9b8c4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-tk em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6f8596; }
@media (prefers-reduced-motion: reduce) {
    .pb-ticker__track { animation: none; }
    .pb-ticker__viewport { overflow-x: auto; }
}
@media (max-width: 1023px) {
    .pb-ticker { padding: 12px 14px 0; gap: 10px; }
    .pb-tk { width: 190px; height: 64px; }
    .pb-tk img { width: 44px; height: 44px; }
    .pb-tk b { font-size: 13px; }
}
/* desktop: a busca fica no header, então some a busca antiga do corpo */
@media (min-width: 1024px) { body.pb-topnav-on .UTJUl { display: none !important; } }

/* =====================================================================
   HOME + RODAPÉ (layouts/patron-home.blade.php)
   ===================================================================== */
/* conteúdo original da home e rodapé original ficam ocultos */
body.pb-is-home .sm\:ml-64.mt-\[65px\] .carousel-banners ~ .mx-auto.p-4 { display: none !important; }
.sm\:ml-64.mt-\[65px\] .footer.pb-32 { display: none !important; }
.pb-home[hidden] { display: none !important; }

.pb-home { padding: 8px 28px 10px; display: flex; flex-direction: column; gap: 26px; }

.pb-ico {
    flex: none; width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #2bb0f5 0%, #0d7fcf 100%); color: #fff; font-size: 17px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 14px rgba(30, 158, 232, .3);
}
.pb-row-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pb-row-head h2 { flex: 1; min-width: 0; margin: 0; color: #fff; font-size: 21px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-row-nav { display: flex; gap: 8px; }
.pb-row-nav > * {
    width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    background: #1a2a37; border: 1px solid #22394a; color: #e6eef5 !important; font-size: 14px; transition: background .15s;
}
.pb-row-nav > *:hover { background: #22384a; color: #fff !important; }

.pb-row {
    display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity;
    scrollbar-width: none; padding: 2px 0 6px;
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
            mask-image: linear-gradient(90deg, #000 90%, transparent);
}
.pb-row::-webkit-scrollbar { display: none; }

.pb-card {
    position: relative; flex: 0 0 calc((100% - 14px * 9) / 9.4); aspect-ratio: 3 / 4; scroll-snap-align: start;
    border-radius: 10px; overflow: hidden; background: #14232f;
    box-shadow: 0 6px 16px rgba(0,0,0,.35); isolation: isolate;
}
.pb-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease, filter .25s; }
.pb-card__cta {
    position: absolute; left: 50%; bottom: 18%; transform: translate(-50%, 8px); z-index: 2;
    padding: 9px 18px; border-radius: 8px; white-space: nowrap;
    background: linear-gradient(180deg, #2bb0f5 0%, #0d7fcf 100%); color: #fff; font-size: 13px; font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 16px rgba(0,0,0,.4);
    opacity: 0; transition: opacity .2s, transform .2s;
}
.pb-card:hover img { filter: brightness(.45) saturate(.8); transform: scale(1.04); }
.pb-card:hover .pb-card__cta { opacity: 1; transform: translate(-50%, 0); }

/* Categorias */
.pb-cats { display: flex; align-items: center; gap: 18px; }
.pb-cats__label { display: flex; align-items: center; gap: 14px; flex: none; }
.pb-cats__label span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.pb-cats__label b { color: #fff; font-size: 16px; font-weight: 700; }
.pb-cats__label small { color: #8da2b3; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.pb-cats__list {
    flex: 1; min-width: 0; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.pb-cats__list::-webkit-scrollbar { display: none; }
.pb-chip {
    flex: none; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px;
    border-radius: 10px; background: #14232f; border: 1px solid #1e3242; color: #e6eef5 !important;
    font-size: 15px; font-weight: 600; white-space: nowrap; transition: background .15s, border-color .15s;
}
.pb-chip img { width: 20px; height: 20px; object-fit: contain; }
.pb-chip:hover { background: #1a2d3b; border-color: #2a4a60; color: #fff !important; }

/* Provedores */
.pb-prov {
    flex: 0 0 calc((100% - 14px * 9) / 9.4); aspect-ratio: 3 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 14px; border-radius: 12px; background: #13212c; border: 1px solid #1e3242; color: #fff !important;
    transition: border-color .15s, background .15s;
}
.pb-prov:hover { border-color: #2a4a60; background: #172836; }
.pb-prov__logo { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; }
.pb-prov__logo img { max-width: 85%; max-height: 70px; object-fit: contain; }
.pb-prov__logo b { font-size: 18px; text-align: center; }
.pb-prov__count { color: #c6d3dd; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pb-prov__btn {
    padding: 9px 20px; border-radius: 8px; font-size: 13px; font-weight: 700; color: #fff;
    background: linear-gradient(180deg, #2bb0f5 0%, #0d7fcf 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.pb-row-head--plain h2 { font-size: 21px; }

@media (max-width: 1279px) { .pb-card, .pb-prov { flex-basis: calc((100% - 14px * 6) / 6.4); } }
@media (max-width: 1023px) {
    .pb-home { padding: 4px 14px 10px; gap: 22px; }
    .pb-card, .pb-prov { flex-basis: calc((100% - 10px * 2) / 2.6); }
    .pb-row { gap: 10px; }
    .pb-row-nav > button { display: none; }
    .pb-row-nav > * { width: 36px; height: 36px; }
    .pb-ico { width: 38px; height: 38px; font-size: 15px; border-radius: 10px; }
    .pb-row-head h2 { font-size: 17px; }
    .pb-cats { flex-direction: column; align-items: stretch; gap: 10px; }
    .pb-chip { height: 40px; font-size: 14px; padding: 0 14px; }
    .pb-card__cta { display: none; }
}

/* Rodapé */
.pb-footer { margin: 34px 28px 0; padding: 40px 0 0; border-top: 1px solid #1c2e3c; color: #a9b8c4; }
.pb-footer h4 { color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 16px; }
.pb-footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.pb-footer__brand img { max-height: 42px; max-width: 200px; object-fit: contain; }
.pb-footer__brand b { color: #fff; font-size: 26px; }
.pb-footer__brand p { margin-top: 20px; max-width: 420px; font-size: 14px; line-height: 1.7; }
.pb-footer nav { display: flex; flex-direction: column; gap: 10px; }
.pb-footer nav a { color: #c9d6e0 !important; font-size: 15px; display: flex; align-items: center; gap: 10px; }
.pb-footer nav a::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #4b6070; }
.pb-footer nav a:hover { color: #fff !important; }
.pb-footer__support {
    display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 26px; border-radius: 10px;
    background: linear-gradient(180deg, #2bb0f5 0%, #0d7fcf 100%); color: #072a42 !important;
    font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 22px rgba(13,110,175,.3);
}
.pb-footer__support:hover { filter: brightness(1.1); }
.pb-footer__mails { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; font-size: 13px; }
.pb-footer__mails a { color: #c9d6e0 !important; }
.pb-footer__mails a span { color: #7f93a3; margin-right: 8px; }
.pb-footer__mails a:hover b { text-decoration: underline; }
.pb-footer__legal { margin-top: 40px; border-radius: 14px; border: 1px solid #1c2e3c; background: #101d27; }
.pb-footer__legal h4 { margin: 0; padding: 20px 28px; border-bottom: 1px solid #1c2e3c; }
.pb-footer__legal p { padding: 20px 28px; font-size: 13px; line-height: 1.7; color: #dbe4eb; margin: 0; }
.pb-footer__bottom { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 30px 0 70px; }
.pb-footer__18 { display: flex; align-items: center; gap: 18px; }
.pb-footer__18 > span {
    width: 58px; height: 58px; border-radius: 50%; border: 3px solid #23394a; display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 16px;
}
.pb-footer__18 p { display: flex; flex-direction: column; margin: 0; line-height: 1.3; }
.pb-footer__18 small { color: #c9d6e0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pb-footer__18 b { color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pb-footer__copy { color: #a9b8c4; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin: 0; }
.pb-footer__totop {
    position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 40px; border-radius: 12px 12px 0 0;
    background: #1b2b38; border: 1px solid #23394a; border-bottom: 0; color: #e6eef5; font-size: 14px; font-weight: 800;
    letter-spacing: .04em; text-transform: uppercase;
}
.pb-footer__totop:hover { background: #22384a; color: #fff; }
@media (max-width: 1023px) {
    .pb-footer { margin: 28px 14px 0; padding-top: 28px; }
    .pb-footer__top { grid-template-columns: 1fr 1fr; gap: 26px; }
    .pb-footer__brand { grid-column: 1 / -1; }
    .pb-footer__top > div:last-child { grid-column: 1 / -1; }
    .pb-footer__bottom { flex-direction: column; align-items: flex-start; padding-bottom: 150px; }
    .pb-footer__totop { bottom: 80px; border-radius: 12px; border-bottom: 1px solid #23394a; }
    .pb-footer__legal h4, .pb-footer__legal p { padding: 16px 18px; }
}
/* o rodapé novo já tem "Voltar ao topo" */
.btn-scroll-top { display: none !important; }
.pb-footer__totop { white-space: nowrap; }
.pb-prov__btn { white-space: nowrap; padding: 9px 16px; }
.pb-prov__logo img { filter: brightness(0) invert(1); opacity: .95; }

/* enquanto a tela de "Carregando" estiver aberta, não mostra logo/menu/topo por cima dela */
body.pb-loading .pb-brand,
body.pb-loading .pb-topnav,
body.pb-loading .pb-ticker { display: none !important; }

/* tela de "Carregando" na mesma cor do fundo do site */
.is-loading-component, .dark .is-loading-component { background-color: var(--pb-bg) !important; }

/* =====================================================================
   LAYOUT 1 (print de referência do patronbet): tudo mais compacto e o conteúdo
   centralizado em 1306px. Medidas tiradas do print em 1917px de largura.
   ===================================================================== */
:root { --pb1-strip: 38px; --pb1-head: 52px; --pb1-side: 190px; --pb1-wrap: 1306px; --pb1-pad: 13px; }

/* faixa do Telegram */
.pb-strip { height: var(--pb1-strip); gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: 0; background: #12384c; }
.pb-strip a { padding: 4px 10px; font-size: 10.5px; border-radius: 4px; }
body.pb-has-strip .nav-menu, body.pb-has-strip aside { top: var(--pb1-strip) !important; }

/* bolinhas do banner */
.pb-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 6; display: flex; justify-content: center; gap: 12px; pointer-events: none; }
.pb-dots button { pointer-events: auto; width: 6px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.35); transition: width .2s, background .2s; }
.pb-dots button.is-on { width: 18px; background: #fff; }
.carousel-banners > div > div { position: relative; }

@media (min-width: 1024px) {
    /* conteúdo ocupa toda a largura ao lado do menu (sem centralizar em --pb1-wrap) */
    :root { --pb1-gutter: 0px; }

    /* header */
    .nav-menu, .nav-menu > div { height: var(--pb1-head) !important; }
    .nav-menu { background: #0d1922 !important; border-bottom-color: #172633; }
    .nav-menu .lg\:ml-\[280px\], .nav-menu .lg\:ml-\[440px\] { margin-left: var(--pb1-side) !important; padding-right: calc(var(--pb1-gutter) + var(--pb1-pad)); }
    .nav-menu .menudepositoperfil .flex.ml-5 { gap: 8px; }
    .nav-menu .btn-cta.bullsbet { height: 32px; padding: 0 18px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 700 !important; }
    .nav-menu .menudepositoperfil .flex.ml-5 > .bullsbet:first-child { box-shadow: 0 2px 10px rgba(30,158,232,.3), inset 0 1px 0 rgba(255,255,255,.25); }

    .pb-brand { width: var(--pb1-side); height: var(--pb1-head); padding: 0 10px 0 10px; }
    body.pb-has-strip .pb-brand, body.pb-has-strip .pb-topnav { top: var(--pb1-strip); }
    .pb-brand img { max-height: 24px; max-width: 120px; }
    .pb-collapse { font-size: 13px; padding: 4px; color: #6d7882; }

    .pb-topnav, body.pb-collapsed .pb-topnav { left: calc(var(--pb1-side) + var(--pb1-gutter) + var(--pb1-pad)); height: var(--pb1-head); padding-left: 0; gap: 8px; }
    .pb-seg { padding: 3px; gap: 1px; border-radius: 8px; }
    .pb-seg a, .pb-seg button { height: 26px; padding: 0 13px; gap: 7px; border-radius: 6px; font-size: 10.5px; }
    .pb-seg a i, .pb-seg button i { font-size: 11px; }
    .pb-search { width: 282px; }
    .pb-search > i { left: 12px; font-size: 11px; }
    .pb-search input { height: 32px; padding-left: 32px; border-radius: 7px; font-size: 12px; background: #101e29 !important; border-color: #182a37 !important; }

    /* menu lateral */
    aside.fixed { width: var(--pb1-side) !important; padding-top: var(--pb1-head) !important; }
    .sm\:ml-64.mt-\[65px\] { margin-left: var(--pb1-side) !important; margin-top: var(--pb1-head) !important; padding: 0 var(--pb1-gutter); }
    body.pb-has-strip .sm\:ml-64.mt-\[65px\] { margin-top: calc(var(--pb1-head) + var(--pb1-strip)) !important; }
    body.pb-collapsed .sm\:ml-64.mt-\[65px\] { padding: 0; }
    body.pb-collapsed .pb-topnav { left: calc(var(--pb1-side) + var(--pb1-pad)); }

    .pb-side { padding: 20px 4px 6px; }
    .pb-promos { gap: 4px; margin-bottom: 18px; }
    .pb-tile { border-radius: 4px; gap: 4px; }
    .pb-tile__txt small { font-size: 7px; margin-top: 1px; }
    .pb-tile--hero { height: 40px; padding: 0 10px 0 0; }
    .pb-tile--hero .pb-tile__art { width: 80px; height: 40px; font-size: 26px; transform: rotate(-12deg); --fa-primary-color: #f1f4f7; --fa-secondary-color: #ff3b30; }
    .pb-tile--hero .pb-tile__txt { margin-left: 0; }
    .pb-tile--hero b { font-size: 11px; }
    .pb-tile--gold { height: 41px; padding: 0 6px 0 0; }
    .pb-tile--gold .pb-tile__art { width: 34px; height: 41px; font-size: 24px; }
    .pb-tile--gold b { font-size: 8.5px; margin-right: auto; padding-left: 6px; }
    .pb-sec { font-size: 7.5px; letter-spacing: .1em; gap: 8px; margin: 0 6px 4px; }
    .pb-links { margin-bottom: 14px; }
    .pb-links a { height: 30px; gap: 10px; padding: 0 6px; font-size: 11.5px; border-radius: 5px; }
    .pb-links a > i { width: 14px; font-size: 10px; color: #c3cad1; }
    .pb-links--games a { gap: 10px; padding-left: 4px; }
    .pb-links--games img { width: 18px; height: 18px; box-shadow: 0 0 0 1px #1b2026; }

    /* faixa de ganhos */
    .pb-ticker { padding: 12px var(--pb1-pad) 13px; gap: 13px; border-bottom: 1px solid #16232e; }
    .pb-ticker__tabs { padding: 3px; gap: 3px; border-radius: 7px; }
    .pb-ticker__tabs button { width: 20px; font-size: 9px; border-radius: 5px; }
    .pb-ticker__track { gap: 13px; }
    .pb-tk { width: 154px; height: 52px; gap: 9px; padding: 0 8px 0 7px; border-radius: 7px; background: #111f2a; border-color: #182a37; }
    .pb-tk img { width: 38px; height: 38px; border-radius: 4px; }
    .pb-tk span { line-height: 1.2; }
    .pb-tk b { font-size: 11px; }
    .pb-tk small { font-size: 8.5px; color: #c3ced8; }
    .pb-tk em { font-size: 7px; letter-spacing: .02em; color: #8193a1; }

    /* banner */
    .carousel-banners { padding: 23px 0 0 !important; }
    .carousel-banners > div { width: 82.6% !important; }
    .carousel-banners .carousel__slide { padding: 0 10px; }
    .carousel-banners .carousel__slide:not(.carousel__slide--active) { opacity: .3; transform: scale(.86); }
    .carousel-banners .carousel__item img { max-height: none !important; border-radius: 20px !important; }
    .carousel-banners .carousel__prev, .carousel-banners .carousel__next { width: 30px; height: 30px; border-color: rgba(255,255,255,.18); }
    .carousel-banners .carousel__prev i, .carousel-banners .carousel__next i { font-size: 10px !important; }
    .carousel-banners .carousel__prev { left: -5px; }
    .carousel-banners .carousel__next { right: -5px; }

    /* home */
    .pb-home { padding: 6px var(--pb1-pad) 10px; gap: 20px; }
    .pb-ico { width: 32px; height: 32px; border-radius: 8px; font-size: 12px; }
    .pb-row-head { gap: 10px; margin-bottom: 10px; }
    .pb-row-head h2, .pb-row-head--plain h2 { font-size: 14.5px; }
    .pb-row-nav { gap: 7px; }
    .pb-row-nav > * { width: 30px; height: 30px; border-radius: 6px; font-size: 10px; background: #15232e; border-color: #1c2e3c; }
    .pb-row { gap: 10px; }
    .pb-card, .pb-prov { flex-basis: calc((100% - 10px * 9) / 9.92); border-radius: 8px; }
    .pb-card__cta { padding: 6px 12px; font-size: 10.5px; border-radius: 6px; }
    .pb-prov { gap: 6px; padding: 10px; }
    .pb-prov__logo img { max-height: 46px; }
    .pb-prov__count { font-size: 8.5px; }
    .pb-prov__btn { padding: 6px 12px; font-size: 10px; border-radius: 6px; }

    .pb-cats { gap: 12px; }
    .pb-cats__label { gap: 9px; margin-right: 26px; }
    .pb-cats__label b { font-size: 12px; }
    .pb-cats__label small { font-size: 7.5px; }
    .pb-cats__list { gap: 8px; }
    .pb-chip { height: 30px; padding: 0 12px; gap: 7px; border-radius: 6px; font-size: 11.5px; font-weight: 600; background: #111f2a; border-color: #182a37; }
    .pb-chip img { width: 14px; height: 14px;
        filter: brightness(0) saturate(100%) invert(52%) sepia(86%) saturate(1900%) hue-rotate(178deg) brightness(98%); }

    /* rodapé */
    .pb-footer { margin: 30px var(--pb1-pad) 0; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
    .pb-card, .pb-prov { flex-basis: calc((100% - 10px * 6) / 6.6); }
    .pb-search { width: 220px; }
}
@media (max-width: 1023px) {
    body.pb-has-strip .sm\:ml-64.mt-\[65px\] { margin-top: calc(64px + var(--pb1-strip)) !important; }
}
@media (max-width: 640px) {
    .pb-strip { font-size: 10px; gap: 8px; padding: 0 10px; }
    .pb-strip a { padding: 4px 8px; font-size: 10px; }
}

/* Blocos Aviator VIP / Cupom / Promo com arte saindo da borda (como no print) */
.pb-promos { padding-top: 4px; }
.pb-tile { overflow: visible; isolation: isolate; }
.pb-tile__img { position: absolute; z-index: 1; pointer-events: none; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.pb-tile__txt { position: relative; z-index: 2; }
.pb-tile--hero {
    justify-content: flex-end;
    background:
        radial-gradient(70% 120% at 25% 50%, rgba(255,90,60,.45) 0%, transparent 70%),
        linear-gradient(180deg, #d11a22 0%, #a10c14 100%);
    border: 1px solid #e0464b; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 12px rgba(0,0,0,.45);
}
.pb-tile--hero .pb-tile__img { left: -6px; top: 50%; width: 46%; transform: translateY(-58%); }
.pb-tile--hero .pb-tile__txt { width: 54%; text-align: left; padding-left: 4px; }
.pb-tile--hero b { letter-spacing: 0; }
.pb-tile--gold {
    justify-content: flex-end;
    background:
        radial-gradient(60% 140% at 100% 50%, rgba(214,158,52,.55) 0%, transparent 70%),
        radial-gradient(50% 120% at 0% 50%, rgba(214,158,52,.35) 0%, transparent 70%),
        linear-gradient(90deg, #2a1d0a 0%, #120d06 50%, #2a1d0a 100%);
    border: 1px solid #b8862f; box-shadow: inset 0 0 10px rgba(255,200,90,.18), 0 4px 12px rgba(0,0,0,.45);
}
.pb-tile--gold .pb-tile__img { left: -8px; top: 50%; width: 58%; max-width: 64px; transform: translateY(-55%); }
.pb-tile--gold .pb-tile__txt { width: 50%; align-items: center; }
.pb-tile--gold b { margin: 0 !important; padding: 0 !important; }
@media (min-width: 1024px) {
    .pb-promos { gap: 6px; }
    .pb-tile--hero { height: 42px; padding: 0; }
    .pb-tile--hero b { font-size: 11.5px; }
    .pb-tile--hero small { font-size: 7.5px; }
    .pb-tile--gold { height: 42px; padding: 0; }
    .pb-tile--gold b { font-size: 9px; }
}

/* Blocos com as artes oficiais (a imagem já traz fundo, arte e texto) */
.pb-promos { padding-top: 0; gap: 4px; }
.pb-tile, .pb-tile--hero, .pb-tile--gold {
    display: block; height: auto !important; padding: 0 !important; border: 0 !important;
    border-radius: 6px; background: none !important; box-shadow: none !important; overflow: visible;
}
.pb-tile .pb-tile__img {
    position: static; display: block; width: 100%; max-width: none; height: auto;
    transform: none; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4));
}

/* Banner do tamanho do print do original: slide central com ~82% da largura do conteúdo
   (arquivos de 1560x675, então não amplia) */
@media (min-width: 1024px) {
    .carousel-banners .carousel__item img { width: 100% !important; height: auto !important; }
}

/* Faixa de ganhos: medidas do print do original (card 190x63, capa 48px) */
@media (min-width: 1024px) {
    .pb-ticker { gap: 18px; padding-top: 16px; padding-bottom: 16px; }
    .pb-ticker__tabs { width: 34px; padding: 3px; gap: 3px; border-radius: 8px; background: #111d27; border-color: #1a2b38; }
    .pb-ticker__tabs button { width: 100%; font-size: 11px; border-radius: 6px; color: #6f8291; background: #172631; }
    .pb-ticker__tabs button.is-on { background: linear-gradient(180deg, #2bb0f5 0%, #0d7fcf 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
    .pb-ticker__track { gap: 18px; }
    .pb-tk { width: 190px; height: 63px; gap: 11px; padding: 0 10px 0 8px; border-radius: 8px; background: #13202b; border: 1px solid #1a2b38; }
    .pb-tk img { width: 48px; height: 48px; border-radius: 6px; }
    .pb-tk span { line-height: 1.25; gap: 1px; }
    .pb-tk b { font-size: 13px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
    .pb-tk small { font-size: 11px; color: #c9d3dc; font-weight: 500; }
    .pb-tk em { font-size: 9px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #8193a1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pb-tk:not(.pb-tk--win) b { font-size: 12.5px; }
}