/* Redesign ZoomSlots -- PREVIA (so carrega com ?preview=1). Cores vem do tema (--skin__*),
   aqui so forma: raio, sombra, tipografia, espacos. Seletores por prefixo de classe
   ([class*="_nome_"]) pra nao depender do hash do build. */
:root{
  --zs-ink:#0E2D4B; --zs-muted:#4C6B8A; --zs-line:#CFE3F4; --zs-sky:#EAF5FF;
  --zs-blue:#1C6FE8; --zs-cyan:#12B5F0; --zs-gold:#F5A524;
  --zs-lift:0 6px 18px rgba(28,111,232,.12); --zs-lift-sm:0 3px 10px rgba(14,45,75,.10);
  --zs-display:"Baloo 2",system-ui,sans-serif;
}

/* fundo: ceu que clareia de cima pra baixo */
[class*="_home-layout_"]{background:linear-gradient(180deg,#CDEBFF 0,#EAF5FF 260px,#EAF5FF 100%)!important}

/* cabecalho: faixa azul (o logo enviado no painel e branco) */
.lobby-home-header-container{background-color:#1C6FE8!important;border-bottom:0!important;box-shadow:0 3px 14px rgba(28,111,232,.30)}
header:has(.lobby-home-header-container){background:linear-gradient(100deg,#12B5F0 0%,#1C6FE8 70%)}
header:has(.lobby-home-header-container) .lobby-home-header-container{background-color:transparent!important}
.lobby-home-header-container svg,.lobby-home-header-container [class*="icon"]{color:#fff}
[class*="_un-login_"]>*{font-family:var(--zs-display)!important;font-weight:700!important;border-radius:999px!important;background-image:none!important}
[class*="_un-login_"]>*:first-child{background:#fff!important;color:var(--zs-blue)!important;box-shadow:0 3px 8px rgba(8,40,90,.25)}
[class*="_un-login_"]>*:last-child{background:transparent!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.9)!important}

/* carrossel de banners */
[class*="_banner-container_"] [class*="_banner-item_"],[class*="_banner-container_"] .swiper{border-radius:16px;overflow:hidden}
[class*="_banner-container_"] [class*="_banner-item_"]{box-shadow:var(--zs-lift)}

/* faixa de avisos: pilula branca */
.global-marquee{margin:4px 10px 0!important;width:auto!important;background:#fff;border:1px solid var(--zs-line);border-radius:999px;color:var(--zs-ink)}

/* recorde do grande premio: cartao com titulo dourado */
[class*="_winner_"]{background:#fff;border:1px solid var(--zs-line);border-radius:16px;box-shadow:var(--zs-lift-sm);padding:10px 0 8px;margin-top:10px!important}
[class*="_winner_"] .winner-title{font-family:var(--zs-display);font-weight:800;color:var(--zs-gold)!important;font-size:17px}
[class*="_winner_"] [class*="_card-right-box_"]{background:var(--zs-sky)!important;border-radius:12px}

/* abas de categoria: blocos brancos, ativo com borda azul */
[class*="_game-exhibition_"]>.ui-tabs__wrap .ui-tab{margin:0 4px;background:#fff;border:1.5px solid var(--zs-line);border-radius:14px;box-shadow:var(--zs-lift-sm)}
[class*="_game-exhibition_"]>.ui-tabs__wrap .ui-tab--active{background:linear-gradient(180deg,#F2F8FF,#DDEEFF);border-color:var(--zs-blue)}
[class*="_game-exhibition_"]>.ui-tabs__wrap [class*="_text_"]{font-family:var(--zs-display);font-weight:700}
[class*="_game-exhibition_"] .ui-tabs__line{display:none!important}

/* titulos de secao */
[class*="_game-headline_"] [class*="_title-text_"]{font-family:var(--zs-display)!important;font-weight:800!important;font-size:18px!important;color:var(--zs-ink)!important}

/* cards de jogo: canto arredondado, moldura branca, sombra curta */
[class*="_list-ordinary_"] .lobby-image{border-radius:14px!important;overflow:hidden;box-shadow:0 0 0 2px #fff,var(--zs-lift-sm)}

/* carregar mais */
.load-more-button{background:#fff;border:1px solid var(--zs-line);border-radius:999px;padding:6px 0}
.load-more-button [class*="_trigger-text_"]{color:var(--zs-blue)!important;font-weight:700}

/* barra de baixo: branca, cantos de cima arredondados, item ativo em capsula */
[class*="_tabbar_"]{background:#fff!important;border-radius:20px 20px 0 0;box-shadow:0 -4px 18px rgba(28,111,232,.12)}

[class*="_tabbar_"] [class*="_text_"]{font-family:var(--zs-display);font-weight:600}

/* rodape */
.footer-box{background:#fff!important;border-radius:20px 20px 0 0;border-top:1px solid var(--zs-line)}

/* popups (login, cadastro, avisos) */
.ui-dialog__main{background:#fff!important;border-radius:20px!important;box-shadow:0 20px 50px rgba(14,45,75,.28);overflow:hidden}
.ui-dialog__main::before{content:"";display:block;height:6px;background:linear-gradient(90deg,var(--zs-cyan),var(--zs-blue))}
.ui-dialog__main input{background:#F4F9FF!important;color:var(--zs-ink)!important}
.ui-dialog__main .ui-input,.ui-dialog__main [class*="input-wrap"],.ui-dialog__main [class*="_input_"]{border-radius:12px!important}
.ui-overlay{background:rgba(14,45,75,.55)!important;backdrop-filter:blur(3px)}
.ui-dialog__main .ui-button--primary{color:#fff!important;background:linear-gradient(180deg,#3B8CFF,#1C6FE8)!important;border:0!important;border-radius:14px!important;font-family:var(--zs-display);font-weight:700!important;box-shadow:0 4px 12px rgba(28,111,232,.35)}

/* ---------- faixa de atalhos (injetada pelo redesign.js) ---------- */
.zs-atalhos{margin:10px 10px 0;padding:10px;background:#fff;border:1px solid var(--zs-line);border-radius:18px;box-shadow:var(--zs-lift);display:flex;align-items:center;gap:8px;font-family:var(--zs-display)}
.zs-atalhos__conta{display:flex;flex-direction:column;gap:6px;flex:0 0 108px}
.zs-atalhos__btn{appearance:none;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:15px;line-height:1;border-radius:12px;padding:10px 0;width:100%}
.zs-atalhos__btn--entrar{background:linear-gradient(180deg,#3B8CFF,#1C6FE8);color:#fff;box-shadow:0 3px 8px rgba(28,111,232,.35)}
.zs-atalhos__btn--cadastrar{background:#fff;color:var(--zs-blue);border:1.5px solid var(--zs-blue)}
.zs-atalhos__icones{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.zs-atalhos__item{appearance:none;border:0;background:none;cursor:pointer;padding:4px 0;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--zs-ink);font:inherit;font-size:13px;font-weight:600;border-radius:12px}
.zs-atalhos__item svg{display:none}

.zs-atalhos__item:focus-visible,.zs-atalhos__btn:focus-visible{outline:2px solid var(--zs-blue);outline-offset:2px}
.zs-atalhos--logado .zs-atalhos__conta{display:none}
@media (prefers-reduced-motion:no-preference){.zs-atalhos__item:active img,.zs-atalhos__btn:active{transform:scale(.94)}}

/* ---------- icones do pacote da plataforma (pasta zs-claro, so este tema) ---------- */
[class*="_tabbar_"] i:has(>svg>use[*|href="#icon_btm_sy0"]){background:url(/siteadmin/skin/lobby_asset/zs-claro/btm/icon_btm_sy.avif) center/contain no-repeat}
[class*="_tabbar_"] i:has(>svg>use[*|href="#icon_btm_sy1"]){background:url(/siteadmin/skin/lobby_asset/zs-claro/btm/icon_btm_sy1.avif) center/contain no-repeat}
[class*="_tabbar_"] i:has(>svg>use[*|href="#icon_btm_tg0"]){background:url(/siteadmin/skin/lobby_asset/zs-claro/btm/icon_btm_tg.avif) center/contain no-repeat}
[class*="_tabbar_"] i:has(>svg>use[*|href="#icon_btm_tg1"]){background:url(/siteadmin/skin/lobby_asset/zs-claro/btm/icon_btm_tg.avif) center/contain no-repeat}
[class*="_tabbar_"] i:has(>svg>use[*|href="#icon_btm_yh0"]){background:url(/siteadmin/skin/lobby_asset/zs-claro/btm/icon_btm_yh.avif) center/contain no-repeat}
[class*="_tabbar_"] i:has(>svg>use[*|href="#icon_btm_yh1"]){background:url(/siteadmin/skin/lobby_asset/zs-claro/btm/icon_btm_yh1.avif) center/contain no-repeat}
[class*="_tabbar_"] i:has(>svg>use[*|href="#icon_btm_zc0"]){background:url(/siteadmin/skin/lobby_asset/zs-claro/btm/icon_btm_zc.avif) center/contain no-repeat}
[class*="_tabbar_"] i:has(>svg>use[*|href="#icon_btm_zc1"]){background:url(/siteadmin/skin/lobby_asset/zs-claro/btm/icon_btm_zc.avif) center/contain no-repeat}
[class*="_tabbar_"] i:has(>svg>use[*|href="#icon_btm_wd0"]){background:url(/siteadmin/skin/lobby_asset/zs-claro/btm/icon_btm_wd.avif) center/contain no-repeat}
[class*="_tabbar_"] i:has(>svg>use[*|href="#icon_btm_wd1"]){background:url(/siteadmin/skin/lobby_asset/zs-claro/btm/icon_btm_wd1.avif) center/contain no-repeat}
[class*="_tabbar_"] i:has(>svg>use[*|href="#icon_btm_cz0"]){background:url(/siteadmin/skin/lobby_asset/zs-claro/btm/icon_btm_cz.avif) center/contain no-repeat}
[class*="_tabbar_"] i:has(>svg>use[*|href="#icon_btm_cz1"]){background:url(/siteadmin/skin/lobby_asset/zs-claro/btm/icon_btm_cz1.avif) center/contain no-repeat}
[class*="_tabbar_"] i:has(>svg>use[*|href="#icon_btm_dl0"]){background:url(/siteadmin/skin/lobby_asset/zs-claro/btm/icon_btm_dl.avif) center/contain no-repeat}
[class*="_tabbar_"] i:has(>svg>use[*|href="#icon_btm_dl1"]){background:url(/siteadmin/skin/lobby_asset/zs-claro/btm/icon_btm_dl.avif) center/contain no-repeat}
[class*="_tabbar_"] i:has(>svg>use[*|href="#icon_btm_kf0"]){background:url(/siteadmin/skin/lobby_asset/zs-claro/btm/icon_btm_kf.avif) center/contain no-repeat}
[class*="_tabbar_"] i:has(>svg>use[*|href="#icon_btm_kf1"]){background:url(/siteadmin/skin/lobby_asset/zs-claro/btm/icon_btm_kf1.avif) center/contain no-repeat}
[class*="_tabbar_"] i:has(>svg>use[*|href^="#icon_btm_"])>svg{opacity:0}
[class*="_tabbar_"] [class*="_itemOutsideImg_"]{visibility:hidden}
[class*="_tabbar_"] [class*="_itemImg_"]{width:30px!important;height:30px!important}
img[src*="/icon_dtfl_rm_1."]{content:url(/siteadmin/skin/lobby_asset/zs-claro/dtfl/icon_dtfl_rm_1.avif)}
img[src*="/icon_dtfl_dz_1."]{content:url(/siteadmin/skin/lobby_asset/zs-claro/dtfl/icon_dtfl_dz_1.avif)}
img[src*="/icon_dtfl_qkl_1."]{content:url(/siteadmin/skin/lobby_asset/zs-claro/dtfl/icon_dtfl_qkl_1.avif)}
img[src*="/icon_dtfl_sw_1."]{content:url(/siteadmin/skin/lobby_asset/zs-claro/dtfl/icon_dtfl_sw_1.avif)}
img[src*="/icon_dtfl_zj_1."]{content:url(/siteadmin/skin/lobby_asset/zs-claro/dtfl/icon_dtfl_zj_1.avif)}
img[src*="/icon_dtfl_sc_1."]{content:url(/siteadmin/skin/lobby_asset/zs-claro/dtfl/icon_dtfl_sc_1.avif)}
img[src*="/icon_dtfl_zr_1."]{content:url(/siteadmin/skin/lobby_asset/zs-claro/dtfl/icon_dtfl_zr_1.avif)}
img[src*="/icon_dtfl_cp_1."]{content:url(/siteadmin/skin/lobby_asset/zs-claro/dtfl/icon_dtfl_cp_1.avif)}
img[src*="/icon_dtfl_by_1."]{content:url(/siteadmin/skin/lobby_asset/zs-claro/dtfl/icon_dtfl_by_1.avif)}
img[src*="/icon_dtfl_ty_1."]{content:url(/siteadmin/skin/lobby_asset/zs-claro/dtfl/icon_dtfl_ty_1.avif)}
img[src*="/icon_dt_pmd."]{content:url(/siteadmin/skin/lobby_asset/zs-claro/dt/icon_dt_1gg.avif)}
img[src*="/icon_dt_1xx."]{content:url(/siteadmin/skin/lobby_asset/zs-claro/dt/icon_dt_1xx.avif)}
[style*="img_game_tj_1"]{background-image:url(/siteadmin/skin/lobby_asset/zs-claro/home/img_game_tj1_zj.avif)!important}
[class*="_game-exhibition_"]>.ui-tabs__wrap .ui-tab{background:url(/siteadmin/skin/lobby_asset/zs-claro/home/btn_db_sy_dtfl.avif) center/100% 100% no-repeat!important;border:0!important}
[class*="_game-exhibition_"]>.ui-tabs__wrap .ui-tab--active{background-image:url(/siteadmin/skin/lobby_asset/zs-claro/home/btn_db_sy_dtfl1.avif)!important}
[class*="_game-exhibition_"]>.ui-tabs__wrap .ui-tab img{width:30px!important;height:30px!important;object-fit:contain}
.zs-atalhos__btn--entrar{background:url(/siteadmin/skin/lobby_asset/zs-claro/home/btn_zb_dl.avif) center/100% 100% no-repeat;box-shadow:none;text-shadow:0 1px 1px rgba(0,40,120,.35)}
.zs-atalhos__btn--cadastrar{background:url(/siteadmin/skin/lobby_asset/zs-claro/home/btn_zb_zc.avif) center/100% 100% no-repeat;color:#fff;border:0;text-shadow:0 1px 1px rgba(0,0,0,.3)}
.zs-atalhos__item img{width:44px;height:40px;object-fit:contain}

/* ---------- animacoes (mesmos tempos da referencia) ---------- */
@keyframes zs-pulsar{0%{transform:scale(1)}50%{transform:scale(.83333)}to{transform:scale(1)}}
@keyframes zs-respirar{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}
@media (prefers-reduced-motion:no-preference){
  .ui-badge__dot,[class*="red-dot"],[class*="_badge-dot"]{animation:zs-pulsar .6s ease-in-out infinite;will-change:transform}
  .zs-atalhos__btn--cadastrar,.ui-dialog__main .ui-button--primary{animation:zs-respirar 1.5s ease-in-out infinite}
}

/* ---------- ordem do topo da home (igual a referencia) ----------
   banner -> faixa de avisos -> jackpot -> atalhos (login/cadastro) -> recorde -> jogos -> rodape.
   So reordena (flex + order); nenhum elemento do app sai do lugar no DOM. */
.lobby-scroll--y:has(>[class*="_banner-container_"]){display:flex;flex-direction:column}
.lobby-scroll--y:has(>[class*="_banner-container_"])>*{flex-shrink:0}
.lobby-scroll--y>[class*="_banner-container_"]{order:1}
.lobby-scroll--y>.global-marquee{order:2;margin-top:10px!important}
.lobby-scroll--y>*:has(.jackpot-content){order:3;margin-top:8px}
.lobby-scroll--y>.zs-atalhos{order:4}
.lobby-scroll--y>[class*="_winner_"]{order:5}
.lobby-scroll--y>.ui-tabs{order:6}
.lobby-scroll--y>.footer-box{order:7}

/* ---------- menu de navegacao inferior com contraste (igual a referencia) ---------- */
[class*="_tabbar_"]{background:#BFF0FF url(/siteadmin/skin/lobby_asset/zs-claro/common/img_db_dt_btm.avif) center/100% 100% no-repeat!important;border-radius:20px 20px 0 0;box-shadow:0 -3px 12px rgba(0,120,200,.18)!important}
[class*="_tabbar_"] [class*="_text_"]{color:#8E9AA3!important;font-weight:600}
[class*="_tabbar_"] .ui-tab--active [class*="_text_"],[class*="_tabbar_"] [class*="_active_"]{color:#00A5F1!important;font-weight:700}
/* atras dos cantos arredondados do menu inferior aparece o fundo da pagina: mesmo azul da home, nao branco */
html,body{background-color:#EAF5FF!important}

/* ---------- faixa de atalhos numa linha so (igual a referencia, 2026-09-24):
   [Entrar][Cadastrar] lado a lado + 3 icones (Deposito, Saques, Eventos) ---------- */
.zs-atalhos{padding:12px 10px 10px 14px;gap:10px;align-items:center}
.zs-atalhos__conta{flex-direction:row;flex:0 0 auto;gap:4px}
.zs-atalhos__btn{width:85px;height:38px;padding:0;font-size:14.5px;border-radius:10px}
.zs-atalhos__icones{grid-template-columns:repeat(3,1fr);gap:2px;flex:1}
.zs-atalhos__item{gap:3px;padding:0;font-size:10.5px;font-weight:500;color:#464646}
.zs-atalhos__item img{width:30px;height:26px}
.zs-atalhos--logado .zs-atalhos__icones{grid-template-columns:repeat(3,1fr)}
.zs-atalhos--logado .zs-atalhos__item img{width:40px;height:34px}
.zs-atalhos--logado .zs-atalhos__item{font-size:12px}

/* ---------- espacamento do topo da home mais justo, igual a referencia (2026-09-24) ---------- */
.lobby-scroll--y>*:has(.jackpot-content){margin-top:4px!important}
.zs-atalhos{margin:6px 10px 0!important;padding:8px 10px 8px 12px!important}

/* ---------- faixa de avisos igual a referencia (2026-09-24): pilula branca, texto azul-claro,
   nome do site em verde negrito (o redesign.js envolve "ZOOMSLOTS.FUN" num span .zs-dominio) ---------- */
.global-marquee{background:#fff!important;border:0!important;border-radius:11px!important;box-shadow:0 1px 4px rgba(0,120,200,.10);color:#36D5F3!important}
.global-marquee .home-marquee-content,.global-marquee .home-marquee-content *{color:#36D5F3!important;font-size:12.5px!important;font-weight:600!important}
.global-marquee .zs-dominio{color:#2DC26B!important;font-weight:800!important}
img[src*="/icon_dt_1xx."]{content:url(/siteadmin/skin/lobby_asset/zs-claro/dt/icon_dt_1xx_wd.avif)!important}
.global-marquee img{width:18px!important;height:16px!important;object-fit:contain}
.global-marquee [class*="_right_"] img,.global-marquee [class*="_message-icon_"],.global-marquee [class*="_message-icon_"] img{width:18px!important;height:15px!important}

/* botao "Carregar mais": sem a linha "A exibir X jogos de Y" (2026-09-24) */
.load-more-button>div:not([class*="_trigger-text_"]){display:none!important}
.load-more-button{padding:7px 18px!important}

/* faixa de icones animados de jogos abaixo do banner (2026-09-24) */
.zs-icones{display:flex;justify-content:space-between;margin:10px 12px 0;padding:0}
.lobby-scroll--y>.zs-icones{order:1}
.zs-icones__item{appearance:none;border:0;padding:0;background:none;cursor:pointer;width:47px;height:47px;border-radius:11px;overflow:hidden;box-shadow:0 0 0 1.5px #fff,0 3px 8px rgba(14,45,75,.18);flex:0 0 auto;transition:transform .15s}
.zs-icones__item:active{transform:scale(.92)}
.zs-icones__item img{display:block;width:100%;height:100%;object-fit:cover}

/* icones flutuantes nas laterais (2026-09-24) -- o float nativo do app (uma coluna so) fica escondido */
[class*="_fastList_"]{display:none!important}
.zs-floats{position:fixed;z-index:30;pointer-events:none;display:flex;justify-content:space-between;align-items:flex-end}
.zs-floats__col{display:flex;flex-direction:column;gap:11px;padding:0 4px;transition:transform .35s ease,margin-bottom .3s ease}
.zs-floats__item{pointer-events:auto;appearance:none;border:0;padding:0;background:none;cursor:pointer;position:relative;width:62px;height:62px;border-radius:14px;box-shadow:0 0 0 2px #fff,0 4px 12px rgba(14,45,75,.28);transition:transform .15s}
.zs-floats__item:active{transform:scale(.92)}
.zs-floats__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s}
.zs-floats__item img.zs-oculto{opacity:0}
.zs-floats--recolhido .zs-floats__col--esquerda{transform:translateX(-45%)}
.zs-floats--recolhido .zs-floats__col--direita{transform:translateX(45%)}
@media (prefers-reduced-motion:reduce){.zs-floats__col,.zs-floats__item img{transition:none}}
/* texto de chamada embaixo de cada float (vem do Titulo no painel) */
.zs-floats__col{gap:17px}
.zs-floats__item{overflow:visible;margin-bottom:6px}
.zs-floats__item img{border-radius:14px}
.zs-floats__txt{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);max-width:72px;padding:2px 7px;border-radius:999px;background:linear-gradient(180deg,#FF8A1E,#F2380F);color:#fff;font:800 10.5px/1.25 var(--zs-display,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 6px rgba(242,56,15,.35);border:1.5px solid #fff;pointer-events:none;animation:zs-chama 1.6s ease-in-out infinite}
@keyframes zs-chama{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.07)}}
@media (prefers-reduced-motion:reduce){.zs-floats__txt{animation:none}}

/* cards de jogo: a borda branca e so da capa; a estrela (favorito) e a etiqueta do canto ficam sem anel, como na referencia (2026-09-24) */
[class*="_list-ordinary_"] .lobby-image[class*="_game-status-lab"],
.name-img-layout .lobby-image[class*="_game-status-lab"]{box-shadow:none!important;border-radius:0!important;overflow:visible}
[class*="_list-ordinary_"] .lobby-image[class*="_circle-star-ico"],
.name-img-layout .lobby-image[class*="_circle-star-ico"]{box-shadow:0 0 2px rgba(0,0,0,.3)!important;border-radius:50%!important}