/* ==========================================================================
   Página pública de evento — CBIC
   As cores vêm de --evt-primary / --evt-accent, definidas por evento no Blade.
   ========================================================================== */

.evt-page {
    --evt-ink: #16202a;
    --evt-muted: #5b6b79;
    --evt-line: #e2e8ef;
    --evt-bg: #f5f8fb;
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    color: var(--evt-ink);
    background: var(--evt-bg);
}

/* ── Faixa institucional ──────────────────────────────────────────────── */
/* Cor da página (não do evento): a identidade colorida começa no banner. */
.evt-topbar {
    background: #fff;
    border-bottom: 1px solid var(--evt-line);
}

.evt-topbar-inner {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1120px;
    padding: 12px 20px;
}

.evt-topbar-brand {
    display: inline-flex;
    flex-shrink: 0;
}

/* Mesmo tamanho da logo na topbar do Portal (.topbar-logo, 60px/38px): a
   assinatura "Câmara Brasileira da Indústria da Construção" fica ao lado do
   símbolo em corpo pequeno e some quando a imagem encolhe demais. */
.evt-topbar-brand img {
    display: block;
    height: 56px;
    width: auto;
}

.evt-topbar-link {
    align-items: center;
    border: 1px solid var(--evt-line);
    border-radius: 8px;
    color: var(--evt-muted);
    display: inline-flex;
    font-size: .82rem;
    font-weight: 700;
    gap: 8px;
    padding: 8px 14px;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
    white-space: nowrap;
}

.evt-topbar-link:hover {
    background: #f5f8fb;
    border-color: color-mix(in srgb, var(--evt-primary) 35%, var(--evt-line));
    color: var(--evt-primary);
}

.evt-topbar-link:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--evt-primary) 30%, transparent);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .evt-topbar-inner { padding: 10px 16px; }
    .evt-topbar-brand img { height: 40px; }
    .evt-topbar-link { font-size: .76rem; padding: 7px 11px; }
    .evt-topbar-link i { display: none; }
}

/* ── Banner ───────────────────────────────────────────────────────────── */
/*
 * A arte do banner é feita em 3:1 (recomendação passada à equipe). O bloco,
 * porém, não tinha proporção própria: a altura vinha do texto, e a imagem se
 * ajustava a ela. O resultado eram dois problemas opostos —
 *
 *   - em tela larga o bloco fica achatado e o `cover` corta ~21% da altura;
 *   - no celular ele fica MAIS ALTO QUE LARGO, e o `cover` estica a imagem
 *     até sobrar uma fatia central da largura.
 *
 * O primeiro caso está resolvido abaixo: em tela larga o bloco ganha a
 * proporção da arte e quase nada é cortado.
 *
 * O segundo fica como está, por decisão de layout: a imagem continua atrás
 * do texto no celular, igual ao desktop. Separá-la numa faixa própria mostra
 * a arte inteira, mas quebra a consistência entre as duas telas — e foi
 * testado e descartado. A consequência é que no celular se vê só a parte
 * central da arte, então o que importa nela deve estar no meio.
 */
.evt-hero {
    background: linear-gradient(135deg, var(--evt-primary) 0%, color-mix(in srgb, var(--evt-primary) 70%, #000) 100%);
    background-size: cover;
    background-position: center;
    position: relative;
}

/* `--evt-banner` vem do HTML, com a URL da imagem do evento. */
.evt-hero.has-image { background-image: var(--evt-banner); }

.evt-hero.has-image .evt-hero-overlay {
    /* Véu escuro a 35%, uniforme — definido assim pela CBIC.
       Deixa a arte bem visível. Em troca sobra pouco contraste para o texto
       branco sobre os trechos claros da imagem, então o miolo da arte (onde
       caem o título e os cartões) precisa ser escuro. */
    background: rgba(8, 14, 22, .35);
}
.evt-hero-overlay { padding: 56px 20px 44px; }

/* ── Banner: telas largas ─────────────────────────────────────────────── */
@media (min-width: 761px) {
    /*
     * O bloco passa a ter a altura de uma faixa 3:1 (33.33vw), que é a
     * proporção da arte — assim quase nada é cortado. É `min-height`, não
     * `height`: se o texto for maior que isso, ele continua mandando e nada
     * transborda.
     *
     * O teto de 620px existe para monitor ultralargo, onde 33vw viraria um
     * banner de 900px de altura empurrando todo o conteúdo para fora da tela.
     * Ali volta a haver corte, e tudo bem: é o comportamento normal de um
     * banner, e ninguém estranha.
     */
    .evt-hero.has-image {
        display: flex;
        min-height: min(33.33vw, 620px);
    }

    /*
     * O véu é o fundo do overlay, e o overlay tinha só a altura do texto —
     * com o bloco mais alto que ele, sobravam faixas da arte sem véu em cima
     * e embaixo. `align-self: stretch` faz o overlay ocupar o bloco inteiro,
     * e a centralização passa para dentro dele: o texto continua no meio, mas
     * agora o véu vai de ponta a ponta.
     */
    .evt-hero.has-image .evt-hero-overlay {
        width: 100%;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.evt-hero-inner { max-width: 940px; margin: 0 auto; color: #fff; }

.evt-hero-logo { max-height: 56px; width: auto; margin-bottom: 20px; display: block; }

.evt-type-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff; font-size: 12px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 5px 12px; border-radius: 100px; margin-bottom: 16px;
}

.evt-title {
    font-size: clamp(1.7rem, 4.2vw, 2.7rem);
    font-weight: 800; line-height: 1.15; letter-spacing: -.02em;
    margin: 0 0 12px; text-wrap: balance;
}
.evt-subtitle {
    font-size: 1.05rem; line-height: 1.6;
    color: rgba(255, 255, 255, .9); max-width: 62ch; margin: 0 0 28px;
}

.evt-facts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px; margin-top: 26px;
}
.evt-fact {
    display: flex; gap: 11px; align-items: flex-start;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px; padding: 13px 15px;
}
.evt-fact > i { font-size: 1.15rem; opacity: .85; margin-top: 2px; }
.evt-fact-label {
    display: block; font-size: 10px; letter-spacing: .12em;
    text-transform: uppercase; opacity: .75; margin-bottom: 3px;
}
.evt-fact strong { display: block; font-size: .97rem; font-weight: 700; }
.evt-fact small { display: block; font-size: .8rem; opacity: .8; margin-top: 1px; }
.evt-fact .evt-urgent { color: #ffd166; font-weight: 700; }

/* ── Corpo ────────────────────────────────────────────────────────────── */
.evt-body { max-width: 940px; margin: 0 auto; padding: 36px 20px 44px; }

.evt-content {
    background: #fff; border: 1px solid var(--evt-line); border-radius: 12px;
    padding: 28px 30px; margin-bottom: 26px;
    font-size: .97rem; line-height: 1.75; color: #2c3a46;
}
.evt-content h2, .evt-content h3 {
    color: var(--evt-primary); font-weight: 750; margin: 22px 0 10px;
}
.evt-content h2:first-child, .evt-content h3:first-child { margin-top: 0; }
.evt-content ul, .evt-content ol { padding-left: 22px; }
.evt-content img { max-width: 100%; height: auto; border-radius: 8px; }

/* ── Avisos ───────────────────────────────────────────────────────────── */
.evt-invite-banner,
.evt-closed {
    display: flex; gap: 13px; align-items: flex-start;
    border-radius: 12px; padding: 16px 18px; margin-bottom: 24px;
}
.evt-invite-banner {
    background: #fff8e6; border: 1px solid #f0d9a0;
}
.evt-invite-banner > i { color: #d99a00; font-size: 1.3rem; margin-top: 1px; }
.evt-closed {
    background: #eef2f6; border: 1px solid var(--evt-line); color: var(--evt-muted);
}
.evt-closed > i { font-size: 1.25rem; margin-top: 1px; }
.evt-invite-banner strong,
.evt-closed strong { display: block; margin-bottom: 3px; color: var(--evt-ink); }
.evt-invite-banner span,
.evt-closed span { font-size: .9rem; line-height: 1.55; }

/* ── Formulário ───────────────────────────────────────────────────────── */
.evt-form-card {
    background: #fff; border: 1px solid var(--evt-line);
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 2px 4px rgba(22, 32, 42, .04), 0 12px 32px rgba(22, 32, 42, .06);
}
.evt-form-head {
    padding: 26px 30px 20px;
    border-bottom: 1px solid var(--evt-line);
    border-top: 4px solid var(--evt-accent);
}
.evt-form-head h2 {
    font-size: 1.3rem; font-weight: 780; margin: 0 0 5px; color: var(--evt-ink);
}
.evt-form-head p { margin: 0; color: var(--evt-muted); font-size: .92rem; }

.evt-form { padding: 24px 30px 30px; }

.evt-step { border: 0; padding: 0; margin: 0 0 30px; min-width: 0; }
.evt-step legend {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.02rem; font-weight: 750; color: var(--evt-ink);
    margin-bottom: 14px; padding: 0; width: 100%;
}
.evt-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--evt-primary); color: #fff;
    font-size: .82rem; font-weight: 700; flex-shrink: 0;
}
.evt-step-hint {
    font-size: .88rem; color: var(--evt-muted); margin: -6px 0 16px 36px;
}

.evt-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: 100%;
}
.evt-col-2 { grid-column: span 2; }
.evt-col-3 { grid-column: span 3; }

.evt-field { display: flex; flex-direction: column; min-width: 0; }
.evt-field label {
    font-size: .82rem; font-weight: 650; color: #3b4a58; margin-bottom: 6px;
}
.evt-field label span { color: var(--evt-accent); }
.evt-field input,
.evt-field select,
.evt-field textarea {
    border: 1px solid #cfd9e3; border-radius: 8px;
    padding: 10px 12px; font-size: .93rem; font-family: inherit;
    background: #fff; color: var(--evt-ink); width: 100%;
    transition: border-color .15s, box-shadow .15s;
}
.evt-field input:focus,
.evt-field select:focus,
.evt-field textarea:focus {
    outline: none; border-color: var(--evt-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--evt-primary) 16%, transparent);
}
.evt-field small {
    font-size: .78rem; color: var(--evt-muted); margin-top: 5px; line-height: 1.4;
}

/* ── Pagamento ────────────────────────────────────────────────────────── */
.evt-price-box {
    display: flex; justify-content: space-between; align-items: center;
    background: #f4f8fc; border: 1px solid #d9e6f2;
    border-radius: 10px; padding: 14px 18px; margin: 0 0 18px;
}
.evt-price-box span { font-size: .88rem; color: var(--evt-muted); font-weight: 600; }
.evt-price-box strong { font-size: 1.35rem; font-weight: 800; color: var(--evt-primary); }

.evt-methods {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 12px; margin-bottom: 16px;
}
.evt-method { cursor: pointer; }
.evt-method input { position: absolute; opacity: 0; pointer-events: none; }
.evt-method-box {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 5px; padding: 16px 12px;
    border: 2px solid #dde5ee; border-radius: 10px;
    background: #fff; transition: border-color .15s, background .15s;
    height: 100%;
}
.evt-method-box i { font-size: 1.5rem; color: var(--evt-muted); }
.evt-method-box strong { font-size: .92rem; font-weight: 700; }
.evt-method-box small { font-size: .76rem; color: var(--evt-muted); line-height: 1.35; }
.evt-method input:checked + .evt-method-box {
    border-color: var(--evt-primary);
    background: color-mix(in srgb, var(--evt-primary) 5%, #fff);
}
.evt-method input:checked + .evt-method-box i { color: var(--evt-primary); }
.evt-method input:focus-visible + .evt-method-box {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--evt-primary) 22%, transparent);
}

.evt-note {
    display: flex; gap: 8px; align-items: flex-start;
    font-size: .84rem; color: var(--evt-muted); line-height: 1.55;
    margin: 10px 0 0;
}
.evt-note i { margin-top: 2px; flex-shrink: 0; }

/* ── Termos e envio ───────────────────────────────────────────────────── */
.evt-terms {
    display: flex; gap: 10px; align-items: flex-start;
    background: #f7fafc; border: 1px solid var(--evt-line);
    border-radius: 10px; padding: 14px 16px; margin: 22px 0 18px;
    cursor: pointer;
}
.evt-terms input { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; }
.evt-terms span { font-size: .86rem; line-height: 1.6; color: #3b4a58; }
.evt-terms a { color: var(--evt-primary); }

.evt-terms-detail {
    border: 1px solid var(--evt-line); border-radius: 10px;
    padding: 12px 16px; margin-bottom: 18px; background: #fff;
}
.evt-terms-detail summary {
    cursor: pointer; font-size: .87rem; font-weight: 650; color: var(--evt-primary);
}
.evt-terms-detail > div {
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--evt-line);
    font-size: .86rem; line-height: 1.65; color: #3b4a58;
    max-height: 240px; overflow-y: auto;
}

.evt-submit {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; border: 0; border-radius: 10px;
    background: var(--evt-accent); color: #fff;
    font-size: 1rem; font-weight: 750; font-family: inherit;
    padding: 14px 24px; cursor: pointer;
    transition: filter .15s, transform .06s;
}
.evt-submit:hover { filter: brightness(1.07); color: #fff; }
.evt-submit:active { transform: translateY(1px); }
.evt-submit:disabled { opacity: .65; cursor: wait; }
.evt-submit:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--evt-accent) 40%, transparent);
    outline-offset: 2px;
}
.evt-submit-inline { width: auto; margin-top: 18px; text-decoration: none; }

.evt-support {
    text-align: center; font-size: .87rem; color: var(--evt-muted);
    margin: 22px 0 0; line-height: 1.6;
}
.evt-support a { color: var(--evt-primary); }

/* ── Tela de status ───────────────────────────────────────────────────── */
.evt-status-page { min-height: 70vh; }
.evt-status-card {
    background: #fff; border: 1px solid var(--evt-line);
    border-top: 5px solid var(--evt-primary);
    border-radius: 14px; padding: 38px 34px; text-align: center;
    box-shadow: 0 2px 4px rgba(22, 32, 42, .04), 0 12px 32px rgba(22, 32, 42, .06);
    max-width: 620px; margin: 30px auto 0;
}
.evt-status-card.is-ok   { border-top-color: #17935c; }
.evt-status-card.is-wait { border-top-color: #d99a00; }
.evt-status-card.is-off  { border-top-color: #c9202f; }

.evt-status-icon i { font-size: 3.1rem; line-height: 1; }
.evt-status-card.is-ok   .evt-status-icon i { color: #17935c; }
.evt-status-card.is-wait .evt-status-icon i { color: #d99a00; }
.evt-status-card.is-off  .evt-status-icon i { color: #c9202f; }

.evt-status-card h1 {
    font-size: 1.5rem; font-weight: 780; margin: 16px 0 8px; letter-spacing: -.015em;
}
.evt-status-card > p {
    color: var(--evt-muted); font-size: .95rem; line-height: 1.65;
    margin: 0 auto 24px; max-width: 46ch;
}

.evt-status-facts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px; background: var(--evt-line);
    border: 1px solid var(--evt-line); border-radius: 10px;
    overflow: hidden; margin: 0 0 20px; text-align: left;
}
.evt-status-facts > div { background: #fff; padding: 12px 15px; }
.evt-status-facts dt {
    font-size: 10px; letter-spacing: .11em; text-transform: uppercase;
    color: var(--evt-muted); margin-bottom: 2px; font-weight: 700;
}
.evt-status-facts dd { margin: 0; font-size: .92rem; font-weight: 620; }
.evt-code {
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    letter-spacing: .04em; color: var(--evt-primary); font-weight: 700 !important;
}

.evt-status-alert {
    display: flex; gap: 9px; align-items: flex-start; text-align: left;
    background: #fff8e6; border: 1px solid #f0d9a0; border-radius: 10px;
    padding: 13px 16px; font-size: .87rem; line-height: 1.55; color: #6b4e00;
}
.evt-status-hint {
    font-size: .82rem; color: var(--evt-muted); margin: 20px 0 0;
}

/* ── Responsivo ───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .evt-hero-overlay { padding: 38px 16px 32px; }
    .evt-body { padding: 24px 14px 56px; }
    .evt-content, .evt-form-head, .evt-form { padding-left: 18px; padding-right: 18px; }
    .evt-status-card { padding: 30px 20px; }

    /* Uma coluna: campo estreito em celular vira ilegível */
    .evt-grid { grid-template-columns: 1fr; }
    .evt-col-2, .evt-col-3 { grid-column: span 1; }

    .evt-facts { grid-template-columns: 1fr 1fr; }
    .evt-step legend { font-size: .96rem; }
    .evt-step-hint { margin-left: 0; }
}

@media (max-width: 420px) {
    .evt-facts { grid-template-columns: 1fr; }
    .evt-methods { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .evt-submit, .evt-method-box, .evt-field input { transition: none; }
}

/* ── Campos extras configuráveis ──────────────────────────────────────── */
.evt-col-4 { grid-column: span 4; }

.evt-choices {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px; margin-top: 2px;
}
.evt-choice {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid #cfd9e3; border-radius: 8px;
    padding: 9px 12px; cursor: pointer; background: #fff;
    font-size: .9rem; transition: border-color .15s, background .15s;
}
.evt-choice:hover { border-color: var(--evt-primary); }
.evt-choice input { width: 16px; height: 16px; flex-shrink: 0; margin: 0; }
.evt-choice:has(input:checked) {
    border-color: var(--evt-primary);
    background: color-mix(in srgb, var(--evt-primary) 6%, #fff);
}
.evt-choice-single { max-width: 140px; }

.evt-field textarea { resize: vertical; min-height: 84px; }

.evt-error { color: #c9202f !important; font-weight: 600; }

@media (max-width: 760px) {
    .evt-col-4 { grid-column: span 1; }
    .evt-choices { grid-template-columns: 1fr; }
}

/* ── Validação pública de certificado ────────────────────────────────────
   Campo único de busca dentro do cartão de status. Fica em coluna no
   celular para o botão não espremer o campo. */
.evt-verify {
    display: flex; gap: 8px; margin: 0 auto 22px; max-width: 420px;
}
.evt-verify-input {
    flex: 1 1 auto; min-width: 0;
    border: 1px solid var(--evt-line); border-radius: 9px;
    padding: 11px 13px; font-size: .92rem;
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    letter-spacing: .04em; text-transform: uppercase;
    background: #fff; color: inherit;
}
.evt-verify-input:focus {
    outline: none; border-color: var(--evt-primary);
    box-shadow: 0 0 0 3px rgba(12, 77, 162, .13);
}
.evt-verify-btn {
    flex: 0 0 auto; border: 0; border-radius: 9px; cursor: pointer;
    background: var(--evt-primary); color: #fff;
    padding: 11px 20px; font-size: .9rem; font-weight: 700;
}
.evt-verify-btn:hover { filter: brightness(1.08); }

@media (max-width: 480px) {
    .evt-verify { flex-direction: column; }
    .evt-verify-btn { width: 100%; }
}

/* ── Pré-reserva (evento lotado com lista de espera) ──────────────────────
   As formas de pagamento continuam visíveis, para a pessoa saber como vai
   poder pagar, mas não são selecionáveis: a escolha acontece quando a vaga
   for liberada. */
.evt-methods.is-inerte { opacity: .55; pointer-events: none; }
.evt-methods.is-inerte .evt-method-box { border-style: dashed; }

.evt-prereserva-selo {
    display: inline-flex; align-items: center; gap: 7px;
    margin: 12px 0 0; padding: 7px 14px;
    background: #fff8e6; border: 1px solid #f0d9a0; border-radius: 999px;
    font-size: .82rem; font-weight: 700; color: #6b4e00;
}

.evt-form-card.is-prereserva { border-top-color: #d99a00; }

/* ── Aviso de evento lotado ───────────────────────────────────────────── */
.evt-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(11, 18, 34, .62);
    /* dvh para o iOS não cortar o cartão com a barra do navegador */
    min-height: 100dvh;
}
.evt-modal[hidden] { display: none; }

.evt-modal-box {
    background: #fff; border-radius: 16px; padding: 32px 28px;
    max-width: 460px; width: 100%; text-align: center;
    box-shadow: 0 18px 60px rgba(11, 18, 34, .3);
    max-height: 88dvh; overflow-y: auto;
}
.evt-modal-icone i { font-size: 2.6rem; color: var(--evt-primary, #0c4da2); }
.evt-modal-box h2 { font-size: 1.28rem; font-weight: 780; margin: 12px 0 10px; }
.evt-modal-box p { font-size: .93rem; line-height: 1.62; color: #5b6b79; margin: 0 0 12px; }
.evt-modal-nota { font-size: .82rem !important; color: #7a8896 !important; }
.evt-modal-box .evt-submit { margin-top: 6px; width: 100%; }

/* ── Busca de empresa ─────────────────────────────────────────────────── */
.evt-autocomplete { position: relative; }

.evt-autocomplete-lista {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
    margin: 0; padding: 4px; list-style: none;
    background: #fff; border: 1px solid var(--evt-line, #dfe6ee);
    border-radius: 10px; box-shadow: 0 10px 30px rgba(22, 32, 42, .12);
    max-height: 240px; overflow-y: auto;
}
.evt-autocomplete-lista[hidden] { display: none; }
.evt-autocomplete-lista li {
    padding: 9px 12px; border-radius: 7px; cursor: pointer; font-size: .9rem;
    display: flex; flex-direction: column; gap: 1px;
}
.evt-autocomplete-lista li:hover,
.evt-autocomplete-lista li[aria-selected=true] { background: #f0f5fb; }
.evt-autocomplete-lista li.is-vazio { color: #7a8896; cursor: default; }
.evt-autocomplete-lista li.is-vazio:hover { background: transparent; }
.evt-autocomplete-nome { font-weight: 500; }
.evt-autocomplete-dica { color: #7a8896; font-size: .78rem; }

.evt-field-hint { display: block; margin-top: 5px; font-size: .78rem; color: #7a8896; }

.evt-check-inline {
    display: flex; align-items: center; gap: 8px;
    margin: 12px 0; font-size: .88rem; cursor: pointer;
}
.evt-check-inline input { width: 16px; height: 16px; cursor: pointer; }

/* ── Credenciamento pelo link público ─────────────────────────────────────
   Usado no celular, na recepção: cartões separados, alvos grandes, e o
   resultado da leitura logo abaixo do placar — onde o olho já está. */
.evt-checkin-page .evt-body { max-width: 540px; padding-bottom: 40px; }

.evt-checkin-head { text-align: center; padding: 30px 0 20px; }
.evt-checkin-kicker {
    display: inline-block; margin-bottom: 9px;
    font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: #fff; background: var(--evt-primary, #0c4da2);
    padding: 5px 14px; border-radius: 999px;
}
.evt-checkin-head h1 { font-size: 1.26rem; font-weight: 800; margin: 0 0 6px; line-height: 1.3; }
.evt-checkin-head p { margin: 0; font-size: .85rem; color: var(--evt-muted, #5b6b79); }

.evt-checkin-placar {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--evt-line, #dfe6ee);
    border: 1px solid var(--evt-line, #dfe6ee);
    border-radius: 14px; overflow: hidden; margin-bottom: 16px;
}
.evt-checkin-placar > div { background: #fff; padding: 15px 8px; text-align: center; }
.evt-checkin-placar strong { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.05; }
.evt-checkin-placar span {
    font-size: .67rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--evt-muted, #5b6b79); font-weight: 700;
}
.evt-checkin-placar .is-ok strong { color: #17935c; }
.evt-checkin-placar .is-wait strong { color: #d99a00; }

.evt-checkin-card {
    background: #fff; border: 1px solid var(--evt-line, #dfe6ee);
    border-radius: 14px; padding: 20px 18px; margin-bottom: 16px;
    box-shadow: 0 2px 4px rgba(22, 32, 42, .03);
}
.evt-checkin-card h2 { font-size: .95rem; font-weight: 750; margin: 0 0 14px; }

.evt-checkin-cam-abrir { width: 100%; }

.evt-checkin-camera { position: relative; margin-bottom: 14px; }
.evt-checkin-camera video {
    width: 100%; border-radius: 12px; background: #0b1222;
    aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
.evt-checkin-camera canvas { display: none; }

/* Mira: enquadrar o QR sem precisar de instrução escrita. */
.evt-checkin-mira {
    position: absolute; top: 50%; left: 50%;
    width: 55%; aspect-ratio: 1; transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 255, 255, .85);
    border-radius: 14px;
    box-shadow: 0 0 0 100vmax rgba(11, 18, 34, .35);
    pointer-events: none;
}

.evt-checkin-cam-fechar {
    position: absolute; top: 10px; right: 10px;
    border: 0; border-radius: 999px; cursor: pointer;
    background: rgba(0, 0, 0, .66); color: #fff;
    padding: 8px 14px; font-size: .8rem; font-weight: 600;
}

.evt-checkin-ou {
    display: flex; align-items: center; gap: 12px;
    margin: 16px 0 12px; color: var(--evt-muted, #5b6b79); font-size: .78rem;
}
.evt-checkin-ou::before, .evt-checkin-ou::after {
    content: ''; flex: 1; height: 1px; background: var(--evt-line, #dfe6ee);
}

/* A busca por nome não é código: sem caixa alta nem monoespaçada. */
.evt-verify-input-livre { text-transform: none; font-family: inherit; letter-spacing: 0; }

.evt-checkin-resultado {
    display: flex; gap: 12px; align-items: flex-start;
    border-radius: 12px; padding: 15px 17px; margin-bottom: 16px;
    font-size: .9rem; line-height: 1.5;
}

/* ── Tipo de inscrição: pessoa física ou jurídica ────────────────────────
   A escolha muda o formulário inteiro (o bloco da empresa aparece ou some),
   então precisa de peso visual — não pode ser um radio solto. */
.evt-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }

.evt-tipo-opcao { cursor: pointer; display: block; position: relative; }
.evt-tipo-opcao input { position: absolute; opacity: 0; pointer-events: none; }

.evt-tipo-box {
    display: block; text-align: center;
    border: 2px solid var(--evt-line, #dfe6ee); border-radius: 12px;
    padding: 5px 8px; background: #fff;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    position: relative;
    overflow: hidden;
}

.evt-tipo-opcao:hover .evt-tipo-box {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.06);
    border-color: #cbd5e1;
}

.evt-tipo-box i { 
    font-size: 1.0rem; 
    color: var(--evt-muted, #5b6b79); 
    display: block; 
    margin-bottom: 2px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s;
}

.evt-tipo-box strong { 
    display: block; 
    font-size: 0.85rem; 
    font-weight: 600;
    color: var(--evt-text, #1e293b);
}

.evt-tipo-box small { 
    display: block; 
    margin-top: 2px; 
    font-size: 0.65rem; 
    color: var(--evt-muted, #5b6b79); 
}

.evt-tipo-opcao input:checked + .evt-tipo-box {
    border-color: var(--evt-primary, #0c4da2);
    background: #f8fafc;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 0 0 1px var(--evt-primary, #0c4da2) inset;
    transform: translateY(-1px);
}

.evt-tipo-opcao input:checked + .evt-tipo-box i { 
    color: var(--evt-primary, #0c4da2); 
    transform: scale(1.15);
}

/* Pseudo-elemento sutil (mini-check) para reforcar a selecao */
.evt-tipo-opcao input:checked + .evt-tipo-box::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--evt-primary, #0c4da2);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.8);
}

.evt-tipo-opcao input:focus-visible + .evt-tipo-box {
    outline: 3px solid rgba(12, 77, 162, .4);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .evt-tipo { grid-template-columns: 1fr; }
}

/* UX Redesign Styles */

.evt-step-highlight {
    background: #f8fafc;
    border: 2px solid var(--evt-primary, #0c4da2);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
}
.evt-step-highlight legend {
    color: var(--evt-primary, #0c4da2);
    font-weight: 700;
}

.evt-participant-card {
    background: #fff;
    border: 1px solid #dfe6ee;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    margin-bottom: 16px;
    overflow: hidden;
}
.evt-participant-card.mt-4 {
    margin-top: 1.5rem;
}
.evt-participant-card.mt-3 {
    margin-top: 1rem;
}
.evt-participant-header {
    background: #f8fafc;
    padding: 12px 16px;
    border-bottom: 1px solid #dfe6ee;
}
.evt-participant-header h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--evt-text, #1e293b);
}
.evt-participant-body {
    padding: 16px;
}

.evt-summary-card {
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
}
.evt-summary-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--evt-text, #1e293b);
    margin-bottom: 8px;
    text-align: center;
}
.evt-summary-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.evt-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
    color: var(--evt-muted, #5b6b79);
    padding: 0 20px;
}
.evt-summary-total {
    border-top: 1px solid #e2e8f0;
    padding-top: 16px;
    font-size: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 0;
}
.evt-summary-total span {
    color: var(--evt-text, #1e293b);
    font-weight: 600;
}
.evt-summary-total strong {
    color: var(--evt-primary, #0c4da2);
    font-size: 1.5rem;
}

/* Modern Quantity UI */
.evt-qty-ui {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 2px solid var(--evt-primary);
    border-radius: 20px;
    padding: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    margin-bottom: 8px;
    transition: all 0.3s ease;
}
.evt-qty-ui:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.evt-qty-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--evt-primary);
    color: #fff;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    user-select: none;
}
.evt-qty-btn:hover:not(:disabled) {
    transform: scale(1.05);
    filter: brightness(1.1);
}
.evt-qty-btn:active:not(:disabled) {
    transform: scale(0.95);
}
.evt-qty-btn:disabled {
    background: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
    border: 1px solid #cbd5e1;
}
.evt-qty-display {
    font-size: 1.2rem;
    font-weight: 700;
    min-width: 40px;
    text-align: center;
    color: #1e293b;
}
.evt-qty-label {
    margin-left: 4px;
    margin-right: 16px;
    font-size: 1.1rem;
    color: #64748b;
    font-weight: 500;
}

/* ── Variantes usadas dentro do formulário ───────────────────────────────
   O passo de quantidade e o resumo do pedido ficam mais discretos dentro do
   formulário do que as versões soltas acima. Antes isto vinha por style=""
   no Blade, o que impedia ajustar o visual sem mexer no template. */

.evt-qty-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 20px; padding: 10px 14px;
    border: 1px solid #e2e8f0; border-radius: 8px; background: #fafbfc;
}
.evt-qty-row-label {
    display: flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: 1rem; color: var(--evt-primary);
}

.evt-step-num.is-sm { margin: 0; width: 22px; height: 22px; font-size: .75rem; }

.evt-qty-ui.is-compact {
    margin-bottom: 0; height: 36px; min-width: 110px;
    background: #fff; border: 1px solid #cbd5e1; box-shadow: none;
}
.evt-qty-ui.is-compact .evt-qty-btn     { width: 32px; height: 32px; font-size: 1rem; }
.evt-qty-ui.is-compact .evt-qty-display { min-width: 28px; font-size: 1rem; }

.evt-summary-card.is-inline {
    padding: 15px; margin-bottom: 20px;
    border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc;
}
.evt-summary-card.is-inline .evt-summary-title {
    margin-top: 0; font-size: 1.1rem;
}
.evt-summary-card.is-inline .evt-summary-row {
    display: flex; justify-content: space-between;
    margin-bottom: 10px; padding: 0;
}
.evt-summary-card.is-inline .evt-summary-total {
    margin-bottom: 0; padding: 10px 0 0;
    border-top: 1px solid #cbd5e1; font-weight: 700;
}

/* Link do local para o Maps: herda a cor do bloco, sem cara de link solto. */
.evt-fact-map { color: inherit; text-decoration: none; }
.evt-fact-map .bi { font-size: .9em; }

/* `display: contents` faz o wrapper sumir do layout: os campos de endereço
   continuam sendo filhos diretos da grade mesmo agrupados por este div. */
.evt-endereco-grupo { display: contents; }

.evt-uf-input { text-transform: uppercase; }

/* ══════════════════════════════════════════════════════════════════
   CUPOM NA INSCRICAO
   O campo perdeu o "confere na proxima etapa" e ganhou resposta na
   hora: quem digita precisa saber se valeu, e de quanto foi.
   ══════════════════════════════════════════════════════════════════ */
.evt-cupom-linha {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.evt-cupom-linha .evt-input { flex: 1 1 auto; min-width: 0; }

.evt-cupom-btn {
    flex: 0 0 auto;
    padding: 0 18px;
    border: 1px solid var(--evt-primary, #0c4da2);
    border-radius: 8px;
    background: #fff;
    color: var(--evt-primary, #0c4da2);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: background .15s, color .15s, opacity .15s;
}

.evt-cupom-btn:hover:not(:disabled) {
    background: var(--evt-primary, #0c4da2);
    color: #fff;
}

.evt-cupom-btn:disabled { opacity: .55; cursor: default; }

.evt-cupom-msg {
    margin: 8px 0 0;
    font-size: .85rem;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

/* O simbolo entra pelo CSS: e decoracao do estado, nao conteudo que um
   leitor de tela precise ouvir antes da frase. */
.evt-cupom-msg::before { font-weight: 700; }

.evt-cupom-msg.is-ok         { color: #1c7c43; }
.evt-cupom-msg.is-ok::before { content: "\2713"; }

.evt-cupom-msg.is-erro         { color: #b3261e; }
.evt-cupom-msg.is-erro::before { content: "\26A0"; }

.evt-cupom-msg.is-carregando { color: var(--evt-muted, #5b6b79); }

.evt-summary-desconto {
    color: #1c7c43;
    font-weight: 600;
}

/* Avisos do servidor na inscricao (validacao, convite expirado). */
.evt-alerta-erro {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid #f3c9c6;
    border-left: 4px solid #b3261e;
    border-radius: 8px;
    background: #fdf3f2;
    color: #8c1d18;
    font-size: .9rem;
    line-height: 1.45;
}

.evt-alerta-erro i { font-size: 1.05rem; line-height: 1.35; }
.evt-alerta-erro p { margin: 0; }
.evt-alerta-erro p + p { margin-top: 4px; }

/* ══════════════════════════════════════════════════════════════════════
   PROGRAMAÇÃO
   Cada dia era uma seção solta: título grande, lista comprida, e dois
   dias ocupando a altura de uma tela. Reunidos num cartão com abas, o
   bloco passa a ocupar a altura de um dia só — e fica claro que os dias
   são partes da mesma programação, não seções diferentes.
   ══════════════════════════════════════════════════════════════════════ */
.evt-prog {
    border: 1px solid #e4e9f0;
    border-radius: 12px;
    overflow: hidden;
    margin: 26px 0;
    background: #fff;
}

.evt-prog-cab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: #f6f8fb;
    border-bottom: 1px solid #e4e9f0;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--evt-primary, #0c4da2);
}

.evt-prog-cab i { font-size: 1rem; }

/* As abas rolam na horizontal quando não cabem — num evento de muitos dias,
   ou no celular. A sombra da direita denuncia que há mais, sem precisar de
   seta nem de carrossel que gira sozinho: programação se lê com atenção, e
   conteúdo que troca sozinho atrapalha justamente quem está lendo. */
.evt-prog-abas {
    display: flex;
    gap: 4px;
    padding: 10px 12px 0;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    background:
        linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left / 24px 100% no-repeat,
        linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right / 24px 100% no-repeat,
        linear-gradient(to right, rgba(0,0,0,.10), rgba(0,0,0,0)) left / 12px 100% no-repeat,
        linear-gradient(to left,  rgba(0,0,0,.10), rgba(0,0,0,0)) right / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
}

.evt-prog-aba {
    flex: 0 0 auto;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: transparent;
    padding: 9px 15px;
    font-size: .87rem;
    font-weight: 600;
    color: var(--evt-muted, #5b6b79);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.evt-prog-aba:hover { background: #f2f5f9; color: var(--evt-text, #1e293b); }

.evt-prog-aba.is-ativa {
    background: #fff;
    border-color: #e4e9f0;
    color: var(--evt-primary, #0c4da2);
    box-shadow: 0 -2px 0 var(--evt-primary, #0c4da2) inset;
}

.evt-prog-aba:focus-visible {
    outline: 2px solid var(--evt-primary, #0c4da2);
    outline-offset: -2px;
}

/* Sem JS, todos os dias aparecem empilhados: perde-se a economia de espaço,
   mas nada some da página. O script esconde os demais ao carregar. */
.evt-prog-dia { padding: 16px 18px 4px; border-top: 1px solid #e4e9f0; }
.evt-prog-abas + .evt-prog-dia { border-top: none; }

.evt-prog-titulo {
    margin: 0 0 10px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--evt-text, #1e293b);
}

/* As listas do editor de texto vêm com margem de parágrafo; aqui elas são o
   conteúdo principal e ficam mais próximas. */
.evt-prog-dia ul,
.evt-prog-dia ol { margin: 0 0 12px; padding-left: 20px; }
.evt-prog-dia li { margin-bottom: 5px; line-height: 1.5; }
.evt-prog-dia p:last-child,
.evt-prog-dia ul:last-child { margin-bottom: 12px; }

@media (max-width: 760px) {
    .evt-prog-cab  { padding: 10px 14px; }
    .evt-prog-dia  { padding: 14px 14px 2px; }
    .evt-prog-abas { padding: 8px 10px 0; }
    .evt-prog-aba  { padding: 8px 12px; font-size: .84rem; }
}