@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@700&display=swap");

/* ---- Menu lateral desativado (navegação pela barra inferior) ---- */
ion-menu,
ion-menu-controller,
ion-buttons.menu-btn,
.menu-btn,
.menu-icon {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* Celular — maior e legível, sem cobrir Entrar/Registro */
@media (max-width: 767px) {
    ion-header ion-toolbar:not(.header-logo) {
        align-items: center !important;
        --padding-start: 0.2rem;
        --padding-end: 0.2rem;
    }

    ion-header ion-toolbar:not(.header-logo) .logo-wrap,
    ion-header ion-toolbar:not(.header-logo) .layout1.logo-wrap,
    ion-header ion-toolbar:not(.header-logo) .layout2.logo-wrap {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        z-index: 1 !important;
        flex: 0 1 auto !important;
        justify-content: flex-start !important;
        align-self: center !important;
        align-items: center !important;
        min-width: 0 !important;
        max-width: clamp(8.5rem, 52vw, 14rem) !important;
        width: auto !important;
        margin: 0 0.2rem 0 0.4rem !important;
        padding: 0.1rem 0 !important;
        overflow: visible !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    ion-header ion-toolbar:not(.header-logo) .logo-wrap .brand-title-text {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        align-items: baseline !important;
        justify-content: flex-start !important;
        width: auto !important;
        max-width: 100% !important;
        line-height: 1.08 !important;
        transform-origin: left center !important;
        letter-spacing: 0.02em !important;
    }

    ion-header ion-toolbar:not(.header-logo) .logo-wrap .brand-title-text .bt-num {
        font-size: 1.08em !important;
    }

    ion-header ion-toolbar:not(.header-logo) .logo-wrap .brand-title-text .bt-bet {
        font-size: 1.02em !important;
    }

    ion-header ion-toolbar:not(.header-logo) .logo-wrap .brand-title-text .bt-dom {
        font-size: 0.55em !important;
        margin-left: 1px !important;
    }

    ion-header ion-toolbar:not(.header-logo) .logo-wrap .brand-title-text.stretch-on {
        transform: none !important;
        letter-spacing: 0.04em !important;
    }

    ion-header ion-toolbar:not(.header-logo) ion-buttons[slot="end"] {
        z-index: 10 !important;
        position: relative !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
        max-width: 52% !important;
    }
}

/* PC: logo à esquerda, menor — não cobre Entrar/Registro */
@media (min-width: 768px) {
    ion-header ion-toolbar:not(.header-logo) .logo-wrap {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        z-index: 1 !important;
        flex: 0 0 auto !important;
        justify-content: flex-start !important;
        max-width: 9rem !important;
        margin: 0 0.25rem 0 0.5rem !important;
        width: auto !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    ion-header ion-toolbar:not(.header-logo) .logo-wrap .brand-title-text.size-sm {
        font-size: 0.95rem !important;
        max-width: 8rem !important;
    }

    ion-header ion-toolbar:not(.header-logo) .logo-wrap .brand-title-text.size-md {
        font-size: 1.1rem !important;
        max-width: 9rem !important;
    }

    ion-header ion-toolbar:not(.header-logo) .logo-wrap .brand-title-text.size-lg {
        font-size: 1.35rem !important;
        max-width: 11rem !important;
    }

    ion-header ion-toolbar:not(.header-logo) .logo-wrap .brand-title-text.stretch-on {
        transform: scale(1.05, 1) !important;
        letter-spacing: 0.04em !important;
    }

    ion-header ion-toolbar:not(.header-logo) ion-buttons[slot="end"] {
        z-index: 10 !important;
        position: relative !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }
}

/* ---- Prévia painel admin (faixa tipo topo do site) ---- */
.brand-preview-panel {
    margin-top: 1rem;
    padding: 1rem 1.1rem 1.15rem;
    border-radius: 10px;
    background: linear-gradient(180deg, #1e2a3d 0%, #121a28 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.brand-preview-panel .preview-label {
    display: block;
    margin-bottom: 0.65rem;
    font-size: 0.75rem;
    color: #94a3b8 !important;
}

/* ---- Prévia painel admin ---- */
.brand-preview-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 3.25rem;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    background: linear-gradient(180deg, #0d1524 0%, #080f1a 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.brand-preview-header::after {
    content: "R$ ···";
    position: absolute;
    right: 0.75rem;
    font-size: 0.65rem;
    color: rgba(255, 213, 74, 0.45);
    font-family: system-ui, sans-serif;
    pointer-events: none;
}

/* ---- Estilos compartilhados do título ---- */
.brand-preview-header .brand-title-text,
.logo-wrap .brand-title-text,
.header-logo .brand-title-text {
    display: inline-flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 0.2rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-family: "Bebas Neue", "Oswald", Impact, sans-serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-text-fill-color: currentColor !important;
    color: #ffe566 !important;
    pointer-events: none !important;
}

.brand-preview-header .brand-title-text {
    position: static !important;
    transform: none !important;
    max-width: 100% !important;
}

ion-header .logo-wrap {
    cursor: pointer !important;
    pointer-events: auto !important;
}

.logo-wrap .brand-title-text {
    position: relative !important;
    z-index: 12 !important;
    max-width: 100% !important;
    pointer-events: none !important;
}

.brand-title-text .bt-sp {
    display: inline !important;
    width: 0.25em !important;
}

/* Tamanhos — prévia admin */
.brand-preview-header .brand-title-text.size-sm { font-size: 1.15rem !important; }
.brand-preview-header .brand-title-text.size-md { font-size: 1.55rem !important; }
.brand-preview-header .brand-title-text.size-lg { font-size: 2rem !important; }

/* Tamanhos — site (header) só no PC */
@media (min-width: 768px) {
    .logo-wrap .brand-title-text.size-sm { font-size: 0.95rem !important; }
    .logo-wrap .brand-title-text.size-md { font-size: 1.1rem !important; }
    .logo-wrap .brand-title-text.size-lg { font-size: 1.35rem !important; }
}

/* Login / Registro — logo só no topo do modal (não no formulário) */
#login-modal .header-content.brand-auth-top,
#login-modal .header .header-content {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    min-height: 2.5rem !important;
}

#login-modal .header-content .brand-title-text {
    position: relative !important;
    z-index: 2 !important;
    max-width: 14rem !important;
}

#login-modal .header-content .brand-title-text.size-sm { font-size: 1.2rem !important; }
#login-modal .header-content .brand-title-text.size-md { font-size: 1.45rem !important; }
#login-modal .header-content .brand-title-text.size-lg { font-size: 1.65rem !important; }

#login-modal .header-content img.logo,
#login-modal .header-content ion-img.logo {
    display: none !important;
}

#login-modal .content .brand-title-text {
    display: none !important;
}

@media (max-width: 767px) {
    #login-modal .header-content .brand-title-text.size-lg { font-size: 1.4rem !important; }
}

.brand-preview-header .brand-title-text.stretch-on {
    letter-spacing: 0.08em !important;
    transform: scale(1.12, 1.05) !important;
}

@media (min-width: 768px) {
    .logo-wrap .brand-title-text.stretch-on {
        letter-spacing: 0.08em !important;
        transform: scale(1.12, 1.05) !important;
    }
}


.brand-preview-header .brand-title-text.glow-on,
.logo-wrap .brand-title-text.glow-on {
    animation: brandGlow 2.2s ease-in-out infinite !important;
}

.brand-preview-header .brand-title-text .bt-num,
.logo-wrap .brand-title-text .bt-num,
.header-logo .brand-title-text .bt-num {
    font-size: 1.2em !important;
    color: #ffd54a !important;
    -webkit-text-fill-color: #ffd54a !important;
    text-shadow: 0 0 10px rgba(255, 213, 74, 0.7), 0 2px 0 #6d3a00, 0 3px 0 #3d2200 !important;
}

.brand-preview-header .brand-title-text .bt-bet,
.logo-wrap .brand-title-text .bt-bet,
.header-logo .brand-title-text .bt-bet {
    font-size: 1.05em !important;
    color: #ff3d3d !important;
    -webkit-text-fill-color: #ff3d3d !important;
    margin-left: 2px !important;
    text-shadow: 0 0 10px rgba(255, 61, 61, 0.55), 0 2px 0 #7a0f0f !important;
}

.brand-preview-header .brand-title-text .bt-dom,
.logo-wrap .brand-title-text .bt-dom,
.header-logo .brand-title-text .bt-dom {
    font-size: 0.58em !important;
    font-family: "Oswald", sans-serif !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    margin-left: 2px !important;
    align-self: flex-end !important;
    padding-bottom: 0.1em !important;
    text-shadow: 0 1px 0 #5c0000, 0 0 8px rgba(255, 255, 255, 0.4) !important;
}

.brand-preview-header .brand-title-text .bt-full,
.logo-wrap .brand-title-text .bt-full,
.header-logo .brand-title-text .bt-full {
    color: #ffe566 !important;
    -webkit-text-fill-color: #ffe566 !important;
    text-shadow: 0 2px 0 #6d3a00, 0 0 12px rgba(255, 200, 80, 0.55) !important;
}

/* Efeito cassino (padrão) — também em nome único .bt-full */
.brand-preview-header .brand-title-text.effect-casino .bt-full,
.logo-wrap .brand-title-text.effect-casino .bt-full,
.header-logo .brand-title-text.effect-casino .bt-full {
    color: #ffd54a !important;
    -webkit-text-fill-color: #ffd54a !important;
    text-shadow: 0 0 10px rgba(255, 213, 74, 0.7), 0 2px 0 #6d3a00 !important;
}

/* Efeitos */
.brand-preview-header .brand-title-text.effect-neon .bt-num,
.logo-wrap .brand-title-text.effect-neon .bt-num {
    color: #5efcff !important;
    -webkit-text-fill-color: #5efcff !important;
    text-shadow: 0 0 12px #00e5ff, 0 0 22px #00bcd4 !important;
}

.brand-preview-header .brand-title-text.effect-neon .bt-bet,
.logo-wrap .brand-title-text.effect-neon .bt-bet {
    color: #ff7bff !important;
    -webkit-text-fill-color: #ff7bff !important;
    text-shadow: 0 0 12px #e040fb, 0 0 20px #9c27b0 !important;
}

.brand-preview-header .brand-title-text.effect-neon .bt-dom,
.logo-wrap .brand-title-text.effect-neon .bt-dom {
    color: #e0f7fa !important;
    -webkit-text-fill-color: #e0f7fa !important;
}

.brand-preview-header .brand-title-text.effect-neon .bt-full,
.logo-wrap .brand-title-text.effect-neon .bt-full {
    color: #5efcff !important;
    -webkit-text-fill-color: #5efcff !important;
    text-shadow: 0 0 12px #00e5ff, 0 0 22px #00bcd4 !important;
}

.brand-preview-header .brand-title-text.effect-gold .bt-num,
.brand-preview-header .brand-title-text.effect-gold .bt-bet,
.brand-preview-header .brand-title-text.effect-gold .bt-dom,
.brand-preview-header .brand-title-text.effect-gold .bt-full,
.logo-wrap .brand-title-text.effect-gold .bt-num,
.logo-wrap .brand-title-text.effect-gold .bt-bet,
.logo-wrap .brand-title-text.effect-gold .bt-dom,
.logo-wrap .brand-title-text.effect-gold .bt-full {
    color: #f5d061 !important;
    -webkit-text-fill-color: #f5d061 !important;
    text-shadow: 0 0 14px rgba(245, 208, 97, 0.8), 0 2px 0 #4a3800 !important;
}

.brand-preview-header .brand-title-text.effect-fire .bt-num,
.logo-wrap .brand-title-text.effect-fire .bt-num {
    color: #ffeb3b !important;
    -webkit-text-fill-color: #ffeb3b !important;
    text-shadow: 0 0 12px #ff9800, 0 2px 0 #bf360c !important;
}

.brand-preview-header .brand-title-text.effect-fire .bt-bet,
.logo-wrap .brand-title-text.effect-fire .bt-bet {
    color: #ff5722 !important;
    -webkit-text-fill-color: #ff5722 !important;
    text-shadow: 0 0 14px #f44336, 0 2px 0 #7f0000 !important;
}

.brand-preview-header .brand-title-text.effect-fire .bt-dom,
.logo-wrap .brand-title-text.effect-fire .bt-dom {
    color: #ffccbc !important;
    -webkit-text-fill-color: #ffccbc !important;
}

.brand-preview-header .brand-title-text.effect-fire .bt-full,
.logo-wrap .brand-title-text.effect-fire .bt-full {
    color: #ff5722 !important;
    -webkit-text-fill-color: #ff5722 !important;
    text-shadow: 0 0 14px #f44336, 0 2px 0 #7f0000 !important;
}

.brand-preview-header .brand-title-text.effect-ice .bt-num,
.brand-preview-header .brand-title-text.effect-ice .bt-bet,
.logo-wrap .brand-title-text.effect-ice .bt-num,
.logo-wrap .brand-title-text.effect-ice .bt-bet {
    color: #b3e5fc !important;
    -webkit-text-fill-color: #b3e5fc !important;
    text-shadow: 0 0 14px #03a9f4, 0 2px 0 #01579b !important;
}

.brand-preview-header .brand-title-text.effect-ice .bt-dom,
.logo-wrap .brand-title-text.effect-ice .bt-dom {
    color: #e1f5fe !important;
    -webkit-text-fill-color: #e1f5fe !important;
}

.brand-preview-header .brand-title-text.effect-ice .bt-full,
.logo-wrap .brand-title-text.effect-ice .bt-full {
    color: #b3e5fc !important;
    -webkit-text-fill-color: #b3e5fc !important;
    text-shadow: 0 0 14px #03a9f4, 0 2px 0 #01579b !important;
}

.brand-preview-header .brand-title-text.effect-platinum .bt-num,
.brand-preview-header .brand-title-text.effect-platinum .bt-bet,
.brand-preview-header .brand-title-text.effect-platinum .bt-dom,
.brand-preview-header .brand-title-text.effect-platinum .bt-full,
.logo-wrap .brand-title-text.effect-platinum .bt-num,
.logo-wrap .brand-title-text.effect-platinum .bt-bet,
.logo-wrap .brand-title-text.effect-platinum .bt-dom,
.logo-wrap .brand-title-text.effect-platinum .bt-full {
    color: #eceff1 !important;
    -webkit-text-fill-color: #eceff1 !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.65), 0 2px 0 #37474f !important;
}

.brand-preview-header .brand-title-text.effect-rainbow .bt-num,
.brand-preview-header .brand-title-text.effect-rainbow .bt-bet,
.brand-preview-header .brand-title-text.effect-rainbow .bt-dom,
.brand-preview-header .brand-title-text.effect-rainbow .bt-full,
.logo-wrap .brand-title-text.effect-rainbow .bt-num,
.logo-wrap .brand-title-text.effect-rainbow .bt-bet,
.logo-wrap .brand-title-text.effect-rainbow .bt-dom,
.logo-wrap .brand-title-text.effect-rainbow .bt-full {
    animation: brandRainbow 3s linear infinite !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
}

.layout2.logo-wrap .brand-title-text {
    position: relative !important;
    z-index: 12 !important;
}

.logo-wrap img.logo,
.logo-wrap ion-img.logo,
.logo-wrap .logo {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

@keyframes brandGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.25); }
}

@keyframes brandRainbow {
    0% { color: #ff5252; -webkit-text-fill-color: #ff5252; }
    25% { color: #ffeb3b; -webkit-text-fill-color: #ffeb3b; }
    50% { color: #69f0ae; -webkit-text-fill-color: #69f0ae; }
    75% { color: #40c4ff; -webkit-text-fill-color: #40c4ff; }
    100% { color: #ff5252; -webkit-text-fill-color: #ff5252; }
}

/* Mobile — tamanhos grandes (prioridade máxima, no fim do arquivo) */
@media (max-width: 767px) {
    html ion-header ion-toolbar:not(.header-logo) .logo-wrap .brand-title-text.size-sm,
    html ion-header ion-toolbar:not(.header-logo) .layout1.logo-wrap .brand-title-text.size-sm,
    html ion-header ion-toolbar:not(.header-logo) .layout2.logo-wrap .brand-title-text.size-sm {
        font-size: 1.15rem !important;
    }

    html ion-header ion-toolbar:not(.header-logo) .logo-wrap .brand-title-text.size-md,
    html ion-header ion-toolbar:not(.header-logo) .layout1.logo-wrap .brand-title-text.size-md,
    html ion-header ion-toolbar:not(.header-logo) .layout2.logo-wrap .brand-title-text.size-md {
        font-size: 1.32rem !important;
    }

    html ion-header ion-toolbar:not(.header-logo) .logo-wrap .brand-title-text.size-lg,
    html ion-header ion-toolbar:not(.header-logo) .layout1.logo-wrap .brand-title-text.size-lg,
    html ion-header ion-toolbar:not(.header-logo) .layout2.logo-wrap .brand-title-text.size-lg {
        font-size: 1.5rem !important;
    }

    html ion-header ion-toolbar:not(.header-logo) .logo-wrap .brand-title-text .bt-num,
    html ion-header ion-toolbar:not(.header-logo) .layout1.logo-wrap .brand-title-text .bt-num,
    html ion-header ion-toolbar:not(.header-logo) .layout2.logo-wrap .brand-title-text .bt-num {
        font-size: 1.15em !important;
    }

    html ion-header ion-toolbar:not(.header-logo) .logo-wrap .brand-title-text .bt-bet,
    html ion-header ion-toolbar:not(.header-logo) .layout1.logo-wrap .brand-title-text .bt-bet,
    html ion-header ion-toolbar:not(.header-logo) .layout2.logo-wrap .brand-title-text .bt-bet {
        font-size: 1.08em !important;
    }

    html ion-header ion-toolbar:not(.header-logo) .logo-wrap .brand-title-text,
    html ion-header ion-toolbar:not(.header-logo) .layout1.logo-wrap .brand-title-text,
    html ion-header ion-toolbar:not(.header-logo) .layout2.logo-wrap .brand-title-text {
        transform: none !important;
    }
}