@import url('tokens.css');

/* ---------- Componentes compartilhados (botão, campo, estados) ----------
   Duplicados de painel.css de propósito: a loja pública não deveria
   carregar o CSS do painel administrativo só para reaproveitar um botão. */

.botao {
    font-family: var(--fonte-corpo);
    font-weight: 600;
    font-size: 14px;
    border: none;
    border-radius: 999px;
    padding: 12px 22px;
    cursor: pointer;
    transition: transform 0.08s ease, opacity 0.15s ease;
}
.botao:active { transform: scale(0.98); }
.botao:disabled { opacity: 0.45; cursor: not-allowed; }
.botao--ouro { background: var(--cor-ouro); color: #2A1E00; }
.botao--ouro:hover:not(:disabled) { background: var(--cor-ouro-escuro); }
.botao--linha { background: transparent; color: var(--cor-tinta); border: 1.5px solid var(--cor-linha); }
.botao--linha:hover { border-color: var(--cor-tinta); }
.botao--pequeno { padding: 8px 14px; font-size: 13px; }

.campo { margin-bottom: 16px; }
.campo label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: var(--cor-tinta-suave); }
.campo input {
    width: 100%;
    font-family: var(--fonte-corpo);
    font-size: 14px;
    padding: 11px 12px;
    border: 1.5px solid var(--cor-linha);
    border-radius: var(--raio-pequeno);
    background: var(--cor-fundo);
}
.campo input:focus { outline: none; border-color: var(--cor-esmeralda); }

.mensagem-erro {
    background: var(--cor-alerta-suave);
    color: var(--cor-alerta);
    font-size: 13px;
    padding: 10px 12px;
    border-radius: var(--raio-pequeno);
    margin-bottom: 16px;
    display: none;
}

.estado-vazio { padding: 40px 20px; text-align: center; color: var(--cor-tinta-suave); font-size: 14px; grid-column: 1 / -1; }

/* ================================================================
   Loja pública — página de compra da rifa
   ================================================================ */

.loja-container { max-width: 720px; margin: 0 auto; padding: 0 16px 100px; }

/* ---------- Hero ---------- */

.loja-hero { padding: 20px 0 0; }

.loja-hero__marca {
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0 20px;
    flex-wrap: wrap;
    row-gap: 10px;
}
.loja-hero__marca .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--cor-ouro); display: inline-block; }

.loja-hero__banner {
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    border-radius: var(--raio);
    display: block;
    background: var(--cor-linha);
}

.loja-hero__titulo {
    font-size: 26px;
    font-weight: 800;
    margin: 20px 0 8px;
    letter-spacing: -0.01em;
}

.loja-hero__descricao {
    font-size: 15px;
    color: var(--cor-tinta-suave);
    margin: 0 0 20px;
}

.loja-hero__valor {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    background: var(--cor-tinta);
    color: var(--cor-ouro);
    font-family: var(--fonte-numero);
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 14px;
    margin-bottom: 24px;
}
.loja-hero__valor small { color: #B9C4B4; font-family: var(--fonte-corpo); font-weight: 500; }

/* ---------- Ações rápidas de seleção ---------- */

.acoes-rapidas {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.chip-acao {
    font-family: var(--fonte-corpo);
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--cor-linha);
    background: var(--cor-cartao);
    cursor: pointer;
}
.chip-acao:hover { border-color: var(--cor-esmeralda); }
.chip-acao--destaque { background: var(--cor-esmeralda-suave); border-color: var(--cor-esmeralda); color: var(--cor-esmeralda); }

/* ---------- Cartela de números ---------- */

#cartela-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 6px;
    margin-bottom: 8px;
}

.numero-item {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fonte-numero);
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--raio-pequeno);
    border: 1.5px solid var(--cor-linha);
    background: var(--cor-cartao);
    cursor: pointer;
    user-select: none;
    transition: transform 0.08s ease;
}

.numero-item:hover:not(.numero-item--indisponivel) { border-color: var(--cor-esmeralda); }
.numero-item:active:not(.numero-item--indisponivel) { transform: scale(0.94); }

.numero-item--selecionado {
    background: var(--cor-esmeralda);
    border-color: var(--cor-esmeralda);
    color: #fff;
}

.numero-item--indisponivel {
    background: var(--cor-fundo);
    color: var(--cor-linha);
    cursor: not-allowed;
    text-decoration: line-through;
}

.legenda-cartela {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--cor-tinta-suave);
    margin: 14px 0 32px;
    flex-wrap: wrap;
}
.legenda-cartela span { display: inline-flex; align-items: center; gap: 6px; }
.legenda-cartela .amostra { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* ---------- Seções de conteúdo (regulamento etc.) ---------- */

.secao-conteudo { margin: 32px 0; }
.secao-conteudo h2 { font-size: 17px; margin: 0 0 8px; }
.secao-conteudo p { font-size: 14px; color: var(--cor-tinta-suave); white-space: pre-line; }

.caixa-regulamento {
    max-height: 320px;
    overflow-y: auto;
    background: var(--cor-cartao);
    border: 1px solid var(--cor-linha);
    border-radius: var(--raio-pequeno);
    padding: 16px 18px;
    font-size: 13px;
    color: var(--cor-tinta-suave);
    line-height: 1.7;
}
.caixa-regulamento strong { color: var(--cor-tinta); }

/* ---------- CTA flutuante ---------- */

.cta-flutuante {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%, 16px);
    width: min(600px, calc(100% - 32px));
    background: var(--cor-tinta);
    color: #F4EFE2;
    border-radius: var(--raio);
    box-shadow: 0 12px 32px rgba(27, 36, 32, 0.28);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 50;
}

.cta-flutuante--visivel {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.cta-flutuante__info { font-size: 13px; }
.cta-flutuante__info strong { display: block; font-family: var(--fonte-numero); font-size: 16px; color: var(--cor-ouro); }
.cta-flutuante__acoes { display: flex; gap: 8px; align-items: center; }
.cta-flutuante__limpar { background: none; border: none; color: #B9C4B4; font-size: 12px; cursor: pointer; text-decoration: underline; }

.toast-selecao {
    position: fixed;
    left: 50%;
    bottom: 96px;
    transform: translateX(-50%);
    background: var(--cor-esmeralda);
    color: #fff;
    font-size: 13px;
    padding: 10px 18px;
    border-radius: 999px;
    box-shadow: var(--sombra);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 60;
    max-width: calc(100% - 32px);
    text-align: center;
}
.toast-selecao--visivel { opacity: 1; }

/* ---------- Modal ---------- */

.sobreposicao-modal {
    position: fixed;
    inset: 0;
    background: rgba(27, 36, 32, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 100;
}
.sobreposicao-modal--aberta { display: flex; }

.modal-compra {
    background: var(--cor-cartao);
    border-radius: var(--raio);
    max-width: 380px;
    width: 100%;
    padding: 28px 24px;
}

.modal-compra h2 { font-size: 18px; margin: 0 0 4px; }
.modal-compra p.subtitulo { font-size: 13px; color: var(--cor-tinta-suave); margin: 0 0 20px; }

.campo-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--cor-tinta-suave);
    margin: 4px 0 18px;
}
.campo-checkbox input { margin-top: 3px; }

/* ---------- Tela de pagamento ---------- */

.tela-pagamento { text-align: center; }
.tela-pagamento img#qrcode-pix { width: 220px; height: 220px; margin: 0 auto 16px; display: block; border-radius: var(--raio-pequeno); border: 1px solid var(--cor-linha); }

.campo-copia-cola {
    font-family: var(--fonte-numero);
    font-size: 11px;
    background: var(--cor-fundo);
    border: 1px dashed var(--cor-linha);
    border-radius: var(--raio-pequeno);
    padding: 10px;
    word-break: break-all;
    margin-bottom: 12px;
    max-height: 80px;
    overflow-y: auto;
}

.status-aguardando {
    font-size: 13px;
    color: var(--cor-tinta-suave);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.girando {
    width: 14px; height: 14px;
    border: 2px solid var(--cor-linha);
    border-top-color: var(--cor-esmeralda);
    border-radius: 50%;
    animation: girar 0.8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
    #cartela-numeros { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
    .loja-hero__titulo { font-size: 22px; }
}

/* ---------- Faixa de confiança (acima da cartela de números) ---------- */

.faixa-confianca {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 4px 0 24px;
}

.selo-confianca {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--cor-tinta-suave);
    background: var(--cor-cartao);
    border: 1px solid var(--cor-linha);
    border-radius: 999px;
    padding: 7px 12px;
}

/* ---------- Rodapé de confiança (fim da página) ---------- */

.rodape-confianca {
    margin: 40px 0 8px;
    padding: 28px 20px;
    background: var(--cor-tinta);
    border-radius: var(--raio);
    text-align: center;
    color: #F4EFE2;
}

.rodape-confianca__titulo {
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 6px;
}

.rodape-confianca__texto {
    font-size: 13px;
    color: #B9C4B4;
    margin: 0 0 18px;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}

.rodape-confianca .botao--ouro {
    display: inline-block;
    text-decoration: none;
}

.rodape-confianca__selos {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(244, 239, 226, 0.14);
}

.rodape-confianca__selos .selo-confianca {
    background: rgba(244, 239, 226, 0.06);
    border-color: rgba(244, 239, 226, 0.16);
    color: #D7DED2;
}