/*
 * Tema do Eventon -- camada de fundacao.
 *
 * Carregada por ultimo, depois de site.css, para vencer o Bootstrap e o tema
 * legado sem precisar reescrever os arquivos antigos.
 *
 * ESCOPO: site publico e painel do organizador.
 * O admin NAO e afetado: todas as regras dele sao escopadas em .admin-app,
 * que tem especificidade maior que os seletores de elemento/classe daqui.
 *
 * Aqui tambem ficam os tokens usados por eventon-form-controls.css (flatpickr
 * e autonumeric), para haver uma fonte unica de verdade de cor e medida.
 */

:root {
    /* Cor -- a paleta da marca, disciplinada e alinhada com a do admin. */
    --ev-ink: #171c28;
    --ev-ink-soft: #3a4455;
    --ev-muted: #647080;
    --ev-faint: #98a1ad;

    --ev-red: #eb373b;
    --ev-red-deep: #c31f23;
    --ev-red-wash: #fdecec;

    --ev-paper: #ffffff;
    --ev-surface: #f5f6f8;
    --ev-surface-deep: #eceef2;
    --ev-line: #e4e7eb;
    --ev-line-strong: #d3d8e0;

    --ev-navy: #1b2436;
    --ev-focus: #497cbe;

    /* Estados. Verde e ambar proprios, nao o do Bootstrap: o vermelho da marca
       ja ocupa o papel de erro, entao os outros dois precisam conviver com ele. */
    --ev-ok: #12a594;
    --ev-ok-wash: #e6f6f3;
    --ev-warn: #d9970a;
    --ev-warn-wash: #fff6e3;

    /* Raio ligado a hierarquia: controle < cartao < painel. */
    --ev-r-control: 8px;
    --ev-r-card: 14px;
    --ev-r-panel: 20px;
    --ev-r-pill: 999px;

    /* Uma escala de elevacao. O site tinha exatamente uma sombra no arquivo todo. */
    --ev-e1: 0 1px 2px rgba(23, 28, 40, .06), 0 1px 1px rgba(23, 28, 40, .04);
    --ev-e2: 0 4px 12px rgba(23, 28, 40, .07), 0 1px 3px rgba(23, 28, 40, .05);
    --ev-e3: 0 14px 34px rgba(23, 28, 40, .13), 0 3px 9px rgba(23, 28, 40, .06);

    --ev-control-h: 46px;
    --ev-ease: cubic-bezier(.2, .7, .3, 1);

    /* Nomes herdados por eventon-form-controls.css */
    --ev-accent: var(--ev-red);
    --ev-accent-strong: var(--ev-red-deep);
    --ev-accent-soft: var(--ev-red-wash);
    --ev-on-accent: #fff;
    --ev-border: var(--ev-line);
    --ev-surface-alt: var(--ev-surface);
    --ev-radius: var(--ev-r-control);
    --ev-radius-day: 7px;
    --ev-shadow: var(--ev-e3);
}

/* O admin tem paleta propria. Os componentes (flatpickr, autonumeric) leem os
   mesmos nomes, entao basta trocar os tokens -- nenhuma regra e reescrita. */
.admin-app {
    --ev-accent: #c92935;
    --ev-accent-strong: #ab202b;
    --ev-accent-soft: #faf0f1;
    --ev-ink: #222b36;
    --ev-muted: #647080;
    --ev-border: #e4e7eb;
    --ev-line: #e4e7eb;
    --ev-surface-alt: #f5f6f8;
}

/* ==========================================================================
   Base e tipografia
   Rubik ja estava no projeto e tem personalidade suficiente; uma familia so,
   hierarquia por peso e tamanho. Escala ~1.22 a partir de 16px.
   ========================================================================== */

body {
    color: var(--ev-ink);
    background: var(--ev-paper);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

main h1, main h2, main h3, main h4 {
    color: var(--ev-ink);
    letter-spacing: -.015em;
    line-height: 1.22;
}

main h1 { font-size: clamp(30px, 4.2vw, 42px); font-weight: 700; letter-spacing: -.028em; }
main h2 { font-size: clamp(24px, 3vw, 31px);   font-weight: 650; }
main h3 { font-size: 23px; font-weight: 600; }
main h4 { font-size: 19px; font-weight: 600; }
main h5 { font-size: 17px; font-weight: 600; }

main p { max-width: 68ch; }

a {
    color: var(--ev-red);
    text-decoration: none;
    transition: color .15s var(--ev-ease);
}

a:hover { color: var(--ev-red-deep); text-decoration: none; }

/* Foco visivel em tudo, com a mesma convencao ja adotada no admin. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.nav-link:focus-visible {
    outline: 3px solid var(--ev-focus);
    outline-offset: 2px;
    box-shadow: none;
}

::selection { background: var(--ev-red); color: #fff; }

hr { border-top-color: var(--ev-line); }

.text-muted { color: var(--ev-muted) !important; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   Botoes
   O Bootstrap 4 entrega um botao raso e generico. Aqui ele ganha altura,
   peso e estados -- hover/ativo nao existiam antes.
   ========================================================================== */

.btn {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
    border-radius: var(--ev-r-control);
    padding: 11px 20px;
    min-height: var(--ev-control-h);
    border-width: 1px;
    letter-spacing: 0;
    text-transform: none;
    transition: background-color .15s var(--ev-ease), border-color .15s var(--ev-ease),
                color .15s var(--ev-ease), transform .08s var(--ev-ease);
}

.btn:active { transform: translateY(1px); }

.btn-lg { font-size: 16px; padding: 14px 26px; min-height: 54px; border-radius: 10px; }
.btn-sm { font-size: 13.5px; padding: 7px 14px; min-height: 38px; border-radius: 7px; }

.btn-primary,
.btn-danger {
    background: var(--ev-red);
    border-color: var(--ev-red);
    color: #fff;
    box-shadow: var(--ev-e1);
}

.btn-primary:hover, .btn-primary:focus,
.btn-danger:hover, .btn-danger:focus {
    background: var(--ev-red-deep);
    border-color: var(--ev-red-deep);
    color: #fff;
}

.btn-outline-primary,
.btn-outline-danger {
    background: transparent;
    border-color: var(--ev-line-strong);
    color: var(--ev-ink);
}

.btn-outline-primary:hover,
.btn-outline-danger:hover {
    background: var(--ev-red-wash);
    border-color: var(--ev-red);
    color: var(--ev-red-deep);
}

.btn-secondary, .btn-default, .btn-light {
    background: var(--ev-paper);
    border-color: var(--ev-line-strong);
    color: var(--ev-ink);
}

.btn-secondary:hover, .btn-default:hover, .btn-light:hover {
    background: var(--ev-surface);
    border-color: var(--ev-line-strong);
    color: var(--ev-ink);
}

.btn-link { color: var(--ev-red); font-weight: 600; }
.btn-link:hover { color: var(--ev-red-deep); }

.btn:disabled, .btn.disabled { opacity: .5; box-shadow: none; }

.btn i, .btn .fa { margin-right: 7px; }

/* ==========================================================================
   Formularios
   Mesma altura e mesmo anel de foco dos campos de data e numero, para o
   formulario inteiro ler como um conjunto so.
   ========================================================================== */

label, .control-label {
    color: var(--ev-ink-soft);
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 6px;
}

.form-control {
    height: var(--ev-control-h);
    padding: 11px 14px;
    font-size: 15px;
    color: var(--ev-ink);
    background: var(--ev-paper);
    border: 1px solid var(--ev-line-strong);
    border-radius: var(--ev-r-control);
    box-shadow: none;
    transition: border-color .15s var(--ev-ease), box-shadow .15s var(--ev-ease);
}

textarea.form-control { height: auto; min-height: 110px; line-height: 1.55; }

.form-control::placeholder { color: var(--ev-faint); }

.form-control:focus {
    border-color: var(--ev-red);
    box-shadow: 0 0 0 3px var(--ev-red-wash);
    background: var(--ev-paper);
}

.form-control:disabled,
.form-control[readonly] {
    background: var(--ev-surface);
    color: var(--ev-muted);
}

/* O <select> nativo calculava a altura por conta propria e cortava a ultima
   linha de texto: com height fixa, o line-height 1.5 do Bootstrap nao cabia na
   caixa de conteudo. Aqui a seta e nossa, o texto tem espaco e sobra recuo a
   direita para ela. */
select.form-control,
select.form-control:not([size]):not([multiple]) {
    cursor: pointer;
    height: var(--ev-control-h);
    line-height: 1.3;
    padding: 10px 40px 10px 14px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23647080' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    text-overflow: ellipsis;
}

select.form-control::-ms-expand { display: none; }

select.form-control:disabled { background-image: none; }

/* Campo travado: cinza para dizer que nao aceita digitacao, mas com contraste
   de leitura -- o valor continua sendo informacao que a pessoa precisa ler. */
.form-control:disabled,
.form-control[readonly] { color: var(--ev-ink-soft); }

.form-group { margin-bottom: 20px; }

/* Validacao: a mensagem precisa ser lida como aviso, nao como texto solto.
   .text-danger NAO entra aqui: e o utilitario de cor do Bootstrap, usado
   inline em varios lugares (o asterisco de campo obrigatorio, por exemplo).
   Transforma-lo em bloco quebra todos esses usos. */
.field-validation-error {
    display: block;
    color: #a71c22;
    font-size: 13px;
    margin-top: 6px;
}

.text-danger { color: #a71c22 !important; }

.input-validation-error,
.form-control.is-invalid {
    border-color: var(--ev-red) !important;
}

.input-validation-error:focus {
    box-shadow: 0 0 0 3px var(--ev-red-wash);
}

.validation-summary-errors {
    color: #8e1a20;
    background: #fff5f5;
    border: 1px solid #f3c9cc;
    border-radius: var(--ev-r-card);
    padding: 16px 20px;
    margin-bottom: 22px;
}

.validation-summary-errors ul { margin: 0; padding-left: 20px; }

/* Sem erros o ASP.NET ainda emite o div, com um <ul> dentro. Sem isto ele
   ocupa a margem do <ul> em todo formulario do sistema. */
.validation-summary-valid { display: none; }

/* ==========================================================================
   Superficies: cartoes, tabelas, modais
   Uma escala de elevacao. O raio acompanha a hierarquia -- controle menor,
   cartao medio, painel maior -- em vez de um raio unico em tudo.
   ========================================================================== */

.card, .box, .panel {
    background: var(--ev-paper);
    border: 1px solid var(--ev-line);
    border-radius: var(--ev-r-card);
    box-shadow: var(--ev-e1);
}

.card-header, .panel-heading {
    background: transparent;
    border-bottom: 1px solid var(--ev-line);
    padding: 18px 22px;
    font-weight: 600;
}

.card-body, .box-body { padding: 22px; }

.table { color: var(--ev-ink); }

.table thead th {
    border-bottom: 1px solid var(--ev-line);
    border-top: 0;
    color: var(--ev-muted);
    font-size: 13px;
    font-weight: 600;
    padding: 12px 14px;
}

.table td, .table th { border-top-color: var(--ev-line); padding: 14px; vertical-align: middle; }

.table-hover tbody tr:hover { background: var(--ev-surface); }

.modal-content {
    border: 0;
    border-radius: var(--ev-r-panel);
    box-shadow: var(--ev-e3);
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--ev-line);
    padding: 22px 26px;
    align-items: center;
}

.modal-header .modal-title, .modal-header h1, .modal-header h4 {
    font-size: 21px;
    font-weight: 650;
    letter-spacing: -.015em;
    margin: 0;
}

.modal-body { padding: 26px; }

.modal-footer {
    border-top: 1px solid var(--ev-line);
    padding: 18px 26px;
    background: var(--ev-surface);
}

.modal-backdrop.show { opacity: .42; }

.badge {
    font-weight: 600;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: var(--ev-r-pill);
    letter-spacing: 0;
}

.alert { border: 1px solid var(--ev-line); border-radius: var(--ev-r-card); padding: 16px 20px; }

/* ==========================================================================
   Cabecalho
   ========================================================================== */

/* Sem !important de proposito: paginas que vazam a navbar sobre um banner
   (page-index.css faz isso) precisam poder sobrepor. .navbar.bg-menu ja tem
   especificidade maior que o nav.bg-menu delas. */
.navbar.bg-menu {
    background: var(--ev-navy);
    padding-top: 14px;
    padding-bottom: 14px;
}

.navbar-dark .navbar-nav .nav-link {
    color: #c3cad6;
    font-size: 15px;
    font-weight: 500;
    padding: 9px 14px;
    border-radius: var(--ev-r-control);
    transition: color .15s var(--ev-ease), background-color .15s var(--ev-ease);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.active { color: #fff; }

.navbar-brand img { height: 42px; width: auto; }

.navbar-toggler { border-color: rgba(255, 255, 255, .2); border-radius: var(--ev-r-control); }

/* O rodape e a faixa de atendimento vivem em eventon-footer.css: o markup
   mudou e as regras antigas (.contact-stripe-section, .footer-section,
   .footer-stripe-section) nao tinham mais a quem se aplicar. */

/* ==========================================================================
   O canhoto
   O logo do Eventon e um ingresso com picote, e o site nao usava esse gesto em
   lugar nenhum. Ele aparece UMA vez, no painel onde a pessoa escolhe o
   ingresso -- onde o conteudo realmente e um ingresso. Nao e decoracao
   espalhada: e a faixa lateral com picote que transforma a tabela de precos
   em um canhoto.
   Feito so em CSS, sem tocar no markup da pagina de compra.
   ========================================================================== */

.event-price-table {
    position: relative;
    background: var(--ev-paper);
    border: 1px solid var(--ev-line);
    border-radius: var(--ev-r-card);
    box-shadow: var(--ev-e2);
    padding-left: 30px;
    overflow: hidden;
}

/* Faixa do canhoto. */
.event-price-table::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    background: var(--ev-surface);
    border-right: 2px dashed var(--ev-line-strong);
}

.event-price-table .table { margin-bottom: 0; }

.event-price-table .table thead th {
    padding-top: 18px;
    font-size: 12.5px;
    color: var(--ev-muted);
}

.event-price-table .table tbody tr:last-child td { border-bottom: 0; }

.event-price-table .table td:first-child { font-weight: 550; }

/* Seletor de quantidade: e o unico controle da tabela, entao precisa se
   distinguir do texto ao redor sem gritar. */
.event-price-table select.quantity {
    height: 40px;
    padding: 6px 10px;
    font-weight: 600;
    text-align: center;
    border-radius: 7px;
}

/* No celular a faixa rouba largura util da tabela de precos. */
@media (max-width: 575.98px) {
    .event-price-table { padding-left: 0; }
    .event-price-table::before { display: none; }
}

/* ==========================================================================
   Checkbox e radio
   Estilo proprio, sem plugin. Substitui o iCheck, que escondia o input nativo
   e desenhava um substituto com sprite PNG -- se a imagem faltasse ou
   corrompesse, o controle sumia da tela sem erro nenhum.
   Aqui o proprio input e estilizado, entao teclado, foco, leitor de tela e a
   associacao com o <label> continuam sendo os nativos do navegador.
   ========================================================================== */

input[type="checkbox"],
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin: 0 8px 0 0;
    vertical-align: -4px;
    background: var(--ev-paper);
    border: 1.5px solid var(--ev-line-strong);
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: background-color .13s var(--ev-ease), border-color .13s var(--ev-ease), box-shadow .13s var(--ev-ease);
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

input[type="checkbox"] { border-radius: 5px; }
input[type="radio"] { border-radius: 50%; }

input[type="checkbox"]:hover,
input[type="radio"]:hover { border-color: var(--ev-muted); }

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--ev-red);
    border-color: var(--ev-red);
}

/* O tique e um SVG embutido: nitido em qualquer zoom e sem arquivo externo.
   Pseudo-elemento nao serve -- <input> e elemento substituido e nao os
   renderiza de forma confiavel. */
input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 6-6'/%3E%3C/svg%3E");
    background-size: 15px 15px;
}

/* Estado indeterminado (marcado por JS em selecao parcial). */
input[type="checkbox"]:indeterminate {
    background-color: var(--ev-red);
    border-color: var(--ev-red);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-width='2.4' stroke-linecap='round' d='M4.5 8h7'/%3E%3C/svg%3E");
    background-size: 15px 15px;
}

/* O ponto do radio e um anel branco por dentro do circulo cheio. */
input[type="radio"]:checked { box-shadow: inset 0 0 0 3.5px var(--ev-paper); }

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 3px solid var(--ev-focus);
    outline-offset: 2px;
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    background-color: var(--ev-surface-deep);
    border-color: var(--ev-line);
    cursor: not-allowed;
}

input[type="checkbox"]:disabled:checked,
input[type="radio"]:disabled:checked {
    background-color: var(--ev-faint);
    border-color: var(--ev-faint);
}

/* Rotulo que envolve o controle vira alvo de clique inteiro. */
label > input[type="checkbox"],
label > input[type="radio"] { cursor: pointer; }

label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) { cursor: pointer; }