/*
 * report.css — Onnow Play · Denunciar conteúdo
 *
 * A página reutiliza as classes do tema Canvas já carregado pelo header.php do onnowplay.com
 * (bootstrap.min.css, style.min.css, seo.min.css): section, heading-block, card, form-control,
 * form-check, button button-rounded. Aqui ficam apenas os complementos: erros, contador,
 * honeypot, status e foco.
 *
 * Valores NÃO confirmados no tema (não tive acesso ao style.min.css): marcados com "(?)".
 */

:root {
    --report-accent: #c73655;      /* cor do tema (colors.php?color=C73655) */
    --report-text: #333333;        /* (?) */
    --report-muted: #5b6670;       /* (?) texto secundário, contraste 5.9:1 sobre branco */
    --report-error: #b3261e;       /* (?) erro, contraste 6.5:1 sobre branco */
    --report-error-bg: #fdecea;    /* (?) */
    --report-success: #14532d;     /* (?) */
    --report-success-bg: #e8f5ec;  /* (?) */
    --report-radius: 4px;          /* (?) */
    --report-focus: #1a1a1a;       /* (?) foco com bom contraste sobre fundo claro e sobre o rosa do tema */
    --report-top-space: 150px;     /* (?) espaço para o header flutuante/transparente */
}

/* Fundo igual ao da seção de formulário do index.php; o espaço superior evita ficar sob o header flutuante. */
.report-section {

    padding: var(--report-top-space) 0 80px;
}

.report-page {
    color: var(--report-text);
}

.report-page .card {
    margin-top: 1.5rem;
}

.report-page .card-body {
    padding: 2rem;
}

.report-form label {
    font-weight: 600;
}

.report-form .form-check-label {
    font-weight: 400;
}

/* Honeypot: oculto por CSS (fora da tela), não por type=hidden. */
.report-hp {
    position: absolute !important;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Mensagens por campo */
.report-error {
    margin: 0.35rem 0 0;
    color: var(--report-error);
    font-size: 0.875rem;
    line-height: 1.4;
}

.report-error:empty {
    display: none;
}

.report-form [aria-invalid="true"] {
    border-color: var(--report-error);
}

/* Contador de caracteres */
.report-counter {
    margin-top: 0.35rem;
    text-align: right;
    color: var(--report-muted);
    font-size: 0.875rem;
}

.report-counter.is-over {
    color: var(--report-error);
    font-weight: 600;
}

.report-textarea {
    min-height: 160px;
    resize: vertical;
}

/* Status geral (aria-live): sucesso ou erro de envio */
.report-status {
    border-radius: var(--report-radius);
    outline: none;
}

.report-status:empty {
    display: none;
}

.report-status--error,
.report-status--success {
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.25rem;
    border: 1px solid transparent;
}

.report-status--error {
    background: var(--report-error-bg);
    border-color: var(--report-error);
    color: var(--report-error);
}

.report-status--success {
    background: var(--report-success-bg);
    border-color: var(--report-success);
    color: var(--report-success);
}

/* Botão "Enviar outra denúncia" criado pelo JS */
.report-again {
    display: inline-block;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--report-accent);
    text-decoration: underline;
    cursor: pointer;
}

/* Foco visível */
.report-form .form-control:focus-visible,
.report-form .form-check-input:focus-visible,
.report-form button:focus-visible,
.report-again:focus-visible,
.report-page a:focus-visible {
    outline: 3px solid var(--report-focus);
    outline-offset: 2px;
}

.report-form button[disabled] {
    cursor: not-allowed;
    opacity: 0.75;
}

.report-form [hidden] {
    display: none !important;
}

/* Aviso de privacidade */
.report-privacy {
    color: var(--report-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.report-privacy a,
.report-page .card a {
    color: var(--report-accent);
}

/* Mobile-first: o reCAPTCHA v2 tem 304px de largura. */
@media (max-width: 575.98px) {
    .report-section {
        padding-top: 120px;
    }

    .report-page .card-body {
        padding: 1.25rem;
    }
}

@media (max-width: 360px) {
    .report-form .g-recaptcha {
        transform: scale(0.88);
        transform-origin: 0 0;
    }
}