/* ==========================================
   OFERTAFLEX — IDENTIDADE VISUAL GLOBAL
   ========================================== */

:root{
    --of-black:#090909;
    --of-dark:#111111;
    --of-card:#171717;
    --of-card2:#1d1d1d;
    --of-border:#292929;
    --of-yellow:#ffd400;
    --of-orange:#ff9d00;
    --of-red:#ff3b30;
    --of-text:#f5f5f5;
    --of-muted:#a3a3a3;
    --of-green:#20c978;
}

*{
    box-sizing:border-box;
}

html{
    background:var(--of-black);
}

body{
    background:
        radial-gradient(circle at 85% 0%, rgba(255,212,0,.09), transparent 28%),
        radial-gradient(circle at 10% 100%, rgba(255,59,48,.06), transparent 30%),
        var(--of-black) !important;
    color:var(--of-text) !important;
    font-family:Inter,Segoe UI,Arial,Helvetica,sans-serif !important;
}

header{
    background:rgba(10,10,10,.96) !important;
    border-bottom:1px solid var(--of-border) !important;
}

.container{
    color:var(--of-text);
}

.card,
.jornal,
.vazio,
.usuario-logado,
.estatistica,
.acao,
.plano,
.ferramenta,
.box,
.secao,
.form-card{
    background:linear-gradient(145deg,#191919,#121212) !important;
    color:var(--of-text) !important;
    border:1px solid var(--of-border) !important;
    box-shadow:0 12px 35px rgba(0,0,0,.35) !important;
}

h1,h2,h3,h4,h5,h6{
    color:#fff !important;
}

p,
.subtitulo,
.ajuda,
.produto-dados,
.produto-marca,
.criado,
.cabecalho-produtos p{
    color:var(--of-muted) !important;
}

input,
textarea,
select{
    background:#101010 !important;
    color:#fff !important;
    border:1px solid #333 !important;
    border-radius:10px !important;
}

input:focus,
textarea:focus,
select:focus{
    outline:none !important;
    border-color:var(--of-yellow) !important;
    box-shadow:0 0 0 3px rgba(255,212,0,.10) !important;
}

label{
    color:#ddd !important;
}

button,
.btn,
.btn-principal,
.btn-pesquisar,
.btn-camera,
.btn-barcode{
    border:none !important;
    border-radius:10px !important;
    font-weight:800 !important;
    transition:.2s ease !important;
}

button:hover,
.btn:hover{
    transform:translateY(-1px);
    filter:brightness(1.08);
}

.btn-principal{
    background:linear-gradient(135deg,#ff3b30,#ff5a36) !important;
    color:#fff !important;
}

.btn-camera{
    background:linear-gradient(135deg,#ff9d00,#ff7300) !important;
}

.btn-barcode,
.btn-pesquisar{
    background:linear-gradient(135deg,#ffd400,#ff9d00) !important;
    color:#111 !important;
}

.btn-visualizar{
    background:#292929 !important;
    color:#fff !important;
    border:1px solid #3b3b3b !important;
}

.btn-imprimir{
    background:#252525 !important;
    color:#fff !important;
}

.btn-compartilhar{
    background:linear-gradient(135deg,#20c978,#159957) !important;
    color:#fff !important;
}

.btn-excluir{
    background:linear-gradient(135deg,#ff3b30,#c91f1f) !important;
    color:#fff !important;
}

.btn-voltar,
.voltar{
    background:#202020 !important;
    color:#fff !important;
    border:1px solid #333 !important;
    border-radius:10px !important;
}

.btn-sair{
    background:#252525 !important;
    color:#fff !important;
}

.produto-item,
.produto{
    border-color:#292929 !important;
}

.produto img,
.resultado-barcode img,
.preview img{
    background:#0d0d0d !important;
    border:1px solid #292929 !important;
}

.resultado-barcode{
    background:#111 !important;
    color:#fff !important;
    border:1px solid #292929 !important;
}

.separador{
    border-color:#292929 !important;
}

.quantidade{
    background:#242424 !important;
    color:#ddd !important;
}

.preco{
    color:var(--of-yellow) !important;
}

.menu-compartilhar{
    background:#171717 !important;
    border:1px solid #333 !important;
}

.menu-compartilhar button{
    background:#171717 !important;
    color:#fff !important;
}

.menu-compartilhar button:hover{
    background:#252525 !important;
}

.logo,
.logo-text{
    color:#fff !important;
}

.logo span,
.logo-flex{
    color:var(--of-red) !important;
}

.acao:hover,
.card:hover,
.jornal:hover{
    border-color:#3b3b3b !important;
}

.estatistica strong,
.numero,
.valor{
    color:var(--of-yellow) !important;
}

.plano{
    border-color:rgba(255,212,0,.35) !important;
}

a{
    color:var(--of-yellow);
}

a:hover{
    color:#fff;
}

footer{
    color:#777 !important;
}

@media(max-width:700px){

    body{
        padding:12px !important;
    }

    .container{
        width:100% !important;
    }

    .card,
    .jornal,
    .vazio{
        border-radius:14px !important;
    }

    button,
    .btn{
        min-height:44px;
    }

}

/* ==========================================
   OFERTAFLEX — LOGO
   ========================================== */

.ofertaflex-logo{
    font-weight:900;
    letter-spacing:-1.5px;
    font-size:28px;
}

.ofertaflex-logo .flex{
    color:var(--of-red);
}