/* ==========================================================================
   appEvent.css - Estilos da Tela de Compra de Ingressos (Event Details)
   Hoppin E-commerce & Ticketing Platform
   ==========================================================================
   ESTRUTURA MODULAR PARA SUPORTE A WHITE-LABEL:
   - PARTE 1: CORES, TEMAS E WHITE-LABEL (Colors, Backgrounds, Borders & Shadows)
     (Para customizar o tema de um novo cliente/white-label, altere apenas esta seção)
   - PARTE 2: ESTRUTURA, POSICIONAMENTO E LAYOUT (SEM CORES)
     (Regras estruturais, responsividade, flexbox e dimensões imutáveis entre white-labels)
   ========================================================================== */

/* ==========================================================================
   PARTE 1: CORES, TEMAS E WHITE-LABEL (CUSTOMIZÁVEL POR CLIENTE)
   ========================================================================== */

/* 1.1 Variáveis Globais de Cores e Degradês */
:root {
    --event-border-gradient: var(--wl-card-border-gradient, linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.2) 100%));
}

/* 1.2 Efeito Blur de Fundo da Capa */
#blur-canvas {
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 100%);
}

/* 1.3 Container e Card Principal do Evento */
#event {
    background: transparent;
    color: var(--wl-text-heading, #ffffff);
}

.event-card-gradient-border {
    background:
        linear-gradient(var(--wl-card-bg, #20222a), var(--wl-card-bg, #20222a)) padding-box,
        var(--event-border-gradient) border-box;
    border-color: transparent;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75);
}

/* 1.4 Bordas e Sombras da Capa do Evento (Modos Paisagem e Retrato) */
#eventHeader.header-landscape .event-cover-img {
    border-color: var(--wl-border-subtle, rgba(255, 255, 255, 0.1));
    box-shadow: none;
}

#eventHeader.header-portrait .event-cover-img {
    border-color: var(--wl-border-highlight, rgba(255, 255, 255, 0.2));
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}

/* 1.5 Tabela de Ingressos, Linhas e Zebra Alternada */
#event header,
#event section,
#event #divTickets,
#event #divTickets table {
    background: transparent;
}

#event #divTickets table tr,
#event #divTickets tr {
    border-bottom-color: var(--wl-table-border, rgba(255, 255, 255, 0.05));
}

#event #divTickets table tbody tr.ticket-row-odd td,
#event #divTickets table tbody tr:nth-child(odd) td {
    background-color: var(--wl-table-row-odd, rgba(255, 255, 255, 0.02));
}

#event #divTickets table tbody tr.ticket-row-even td,
#event #divTickets table tbody tr:nth-child(even) td {
    background-color: var(--wl-table-row-even, rgba(255, 255, 255, 0.075));
}

#event #divTickets table tbody tr:hover td {
    background-color: var(--wl-table-row-hover, rgba(255, 255, 255, 0.13));
}

#event #divTickets table tbody tr[data-cupom] td {
    background-color: var(--wl-table-cupom-bg, rgba(6, 182, 212, 0.08));
}

#event #divTickets table tbody tr[data-cupom]:hover td {
    background-color: var(--wl-table-cupom-hover, rgba(6, 182, 212, 0.16));
}

/* 1.5.1 Barra de Resumo e Total de Ingressos */
.event-total-bar {
    background: var(--wl-total-bar-bg, transparent);
    border-color: var(--wl-total-bar-border, var(--wl-border-subtle, rgba(255, 255, 255, 0.1)));
}

/* 1.5.2 Selo de Compra Segura */
.event-secure-badge {
    border-top-color: var(--wl-secure-badge-border, rgba(255, 255, 255, 0.06));
}

.event-secure-badge p,
.event-secure-badge span {
    color: var(--wl-secure-badge-text, #a3a3a3);
}

.event-secure-badge i.material-icons {
    color: var(--wl-secure-badge-icon, #34d399);
}

/* 1.6 Botões de Quantidade (+ e -) e Contadores */
#event .btnMenos,
.btnMenos,
#event .btnMais,
.btnMais {
    background: var(--wl-btn-qty-bg, rgba(255, 255, 255, 0.08));
    border-color: var(--wl-btn-qty-border, rgba(255, 255, 255, 0.18));
    color: var(--wl-btn-qty-color, #ffffff);
}

#event .btnMenos:hover,
.btnMenos:hover,
#event .btnMais:hover,
.btnMais:hover {
    background: var(--wl-btn-qty-hover-bg, rgba(255, 255, 255, 0.2));
    border-color: var(--wl-btn-qty-hover-border, rgba(255, 255, 255, 0.4));
}

#event .btnMenos::before,
.btnMenos::before,
#event .btnMais::before,
.btnMais::before,
#event .btnMais::after,
.btnMais::after {
    background-color: var(--wl-btn-qty-color, #ffffff);
}

#event #divTickets .lblQtd,
.lblQtd {
    color: var(--wl-btn-qty-color, #ffffff);
}

/* 1.7 Badges de Status (Esgotado e Cupom) */
.badge-soldout {
    background: var(--wl-badge-danger-bg, rgba(244, 63, 94, 0.15));
    color: var(--wl-badge-danger-text, #fda4af);
    border-color: var(--wl-badge-danger-border, rgba(244, 63, 94, 0.3));
}

.badge-cupom {
    background: var(--wl-badge-success-bg, rgba(16, 185, 129, 0.16));
    color: var(--wl-badge-success-text, #34d399);
    border-color: var(--wl-badge-success-border, #10b981);
}

/* 1.8 Seção de Cupom de Desconto (Input e Botão Aplicar) */
.txtCupom {
    background-color: var(--wl-input-bg, rgba(0, 0, 0, 0.45));
    color: var(--wl-input-text, #ffffff);
    border-color: var(--wl-input-border, rgba(255, 255, 255, 0.15));
}

.txtCupom:focus {
    border-color: var(--wl-input-focus-border, #38bdf8);
    box-shadow: 0 0 0 2px var(--wl-input-focus-shadow, rgba(56, 189, 248, 0.25));
}

.txtCupom::placeholder {
    color: var(--wl-input-placeholder, #94a3b8);
}

#event #btnAplicar,
#event .btnApply,
.btnApply {
    background: var(--wl-btn-apply-bg, #ffffff);
    color: var(--wl-btn-apply-text, #dc2626);
    border-color: var(--wl-btn-apply-border, #ffffff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

#event #btnAplicar:hover,
#event .btnApply:hover,
.btnApply:hover {
    background: var(--wl-btn-apply-hover-bg, #fef2f2);
    color: var(--wl-btn-apply-hover-text, #b91c1c);
    border-color: var(--wl-btn-apply-hover-border, #fca5a5);
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
}

#event #btnAplicar:active,
#event .btnApply:active,
.btnApply:active {
    background: var(--wl-btn-apply-active-bg, #fee2e2);
}

/* 1.9 Botões Primários e Secundários de Ação */
.btn-event-primary,
.addToCart,
.fillNames,
.addToCartNames {
    background: var(--wl-btn-primary-bg, linear-gradient(135deg, #10b981 0%, #06b6d4 50%, #0284c7 100%));
    color: var(--wl-btn-primary-color, #ffffff);
    border-color: var(--wl-btn-primary-border, rgba(255, 255, 255, 0.2));
    box-shadow: 0 2px 8px var(--wl-btn-primary-shadow, rgba(6, 182, 212, 0.25));
}

.btn-event-primary:hover,
.addToCart:hover,
.fillNames:hover,
.addToCartNames:hover {
    box-shadow: 0 4px 16px -1px var(--wl-btn-primary-hover-shadow, rgba(6, 182, 212, 0.45));
    color: var(--wl-btn-primary-color, #ffffff);
}

.btn-event-secondary {
    background: var(--wl-btn-secondary-bg, rgba(255, 255, 255, 0.06));
    color: var(--wl-btn-secondary-color, #ffffff);
    border-color: var(--wl-btn-secondary-border, rgba(255, 255, 255, 0.15));
}

.btn-event-secondary:hover {
    background: var(--wl-btn-secondary-hover-bg, rgba(255, 255, 255, 0.12));
    border-color: var(--wl-btn-secondary-hover-border, rgba(255, 255, 255, 0.3));
    color: var(--wl-btn-secondary-hover-color, #38bdf8);
}

/* 1.10 Formulário de Participantes e Recargas */
.event-input,
.txtName {
    background-color: var(--wl-input-bg, rgba(0, 0, 0, 0.45));
    color: var(--wl-input-text, #ffffff);
    border-color: var(--wl-input-border, rgba(255, 255, 255, 0.15));
}

.event-input:focus,
.txtName:focus {
    border-color: var(--wl-input-focus-border, #38bdf8);
    box-shadow: 0 0 0 2px var(--wl-input-focus-shadow, rgba(56, 189, 248, 0.25));
    background-color: rgba(0, 0, 0, 0.6);
}

.event-select,
.chkWallet {
    background-color: var(--wl-select-bg, #1a1c23);
    color: var(--wl-input-text, #ffffff);
    border-color: var(--wl-input-border, rgba(255, 255, 255, 0.15));
}

.event-select:focus,
.chkWallet:focus {
    border-color: var(--wl-input-focus-border, #38bdf8);
    box-shadow: 0 0 0 2px var(--wl-input-focus-shadow, rgba(56, 189, 248, 0.25));
}

/* 1.10.1 Quadros Informativos, Badges e Totais de Participantes */
.event-wallets-notice {
    background-color: var(--wl-notice-info-bg, rgba(8, 47, 73, 0.3));
    border-color: var(--wl-notice-info-border, rgba(6, 182, 212, 0.3));
    color: var(--wl-notice-info-text, #a5f3fc);
}

.event-wallets-notice p.font-bold {
    color: var(--wl-notice-info-title, #67e8f9);
}

.event-wallets-notice i.material-icons {
    color: var(--wl-notice-info-icon, #67e8f9);
}

.event-participant-badge {
    background-color: var(--wl-badge-participant-bg, rgba(6, 182, 212, 0.2));
    border-color: var(--wl-badge-participant-border, rgba(6, 182, 212, 0.3));
    color: var(--wl-badge-participant-text, #67e8f9);
}

.event-order-totals-card {
    background-color: var(--wl-totals-card-bg, rgba(0, 0, 0, 0.4));
    border-color: var(--wl-totals-card-border, rgba(255, 255, 255, 0.1));
}

.event-names-warning {
    background-color: var(--wl-notice-warning-bg, rgba(245, 158, 11, 0.1));
    border-color: var(--wl-notice-warning-border, rgba(245, 158, 11, 0.2));
    color: var(--wl-notice-warning-text, #fcd34d);
}

/* 1.11 Descrição Textual do Evento */
#event #desc,
#event #desc p {
    color: var(--wl-text-description, #d1d5db);
}


/* ==========================================================================
   PARTE 2: ESTRUTURA, POSICIONAMENTO E LAYOUT (SEM CORES)
   ========================================================================== */

/* 2.1 Efeito Blur de Fundo da Capa */
#blur-canvas {
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    width: 100%;
    z-index: -1;
    pointer-events: none;
}

/* 2.2 Reset Estrutural do Container Principal */
#event {
    box-shadow: none;
    border-radius: 0;
    max-width: 1000px;
    margin: 0 auto;
    font-family: inherit;
}

.event-card-container {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

.event-card-gradient-border {
    position: relative;
    border-width: 1px;
    border-style: solid;
    transition: background 0.4s ease;
}

/* 2.2 Fade-in da Capa do Evento */
.event-cover-img {
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

.event-cover-img.is-loaded {
    opacity: 1;
}

/* 2.3 Cabeçalho no Modo Paisagem (Landscape) */
#eventHeader.header-landscape {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
}

#eventHeader.header-landscape .event-image-box {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    line-height: 0;
    overflow: hidden;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

#eventHeader.header-landscape .event-cover-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 560px;
    object-fit: cover;
    display: block;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-radius: 0;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

#event #info,
#event #eventHeader.header-landscape #info,
#eventHeader.header-landscape #info,
#eventHeader.header-landscape .event-info-box {
    width: 100%;
    padding: 1.5rem;
    text-align: left;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    #event #info,
    #event #eventHeader.header-landscape #info,
    #eventHeader.header-landscape #info,
    #eventHeader.header-landscape .event-info-box {
        padding: 2rem;
    }
}

/* 2.4 Cabeçalho no Modo Retrato / Quadrado (Portrait) */
#eventHeader.header-portrait {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    gap: 24px;
    align-items: center;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    #eventHeader.header-portrait {
        padding: 2rem;
    }
}

#eventHeader.header-portrait .event-image-box {
    width: 100%;
    display: flex;
    justify-content: center;
}

#eventHeader.header-portrait .event-cover-img {
    width: 100%;
    max-width: 320px;
    max-height: 480px;
    height: auto;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 16px;
    border-width: 1px;
    border-style: solid;
}

#event #eventHeader.header-portrait #info,
#eventHeader.header-portrait #info,
#eventHeader.header-portrait .event-info-box {
    width: 100%;
    padding: 0;
    margin: 0;
    text-align: left;
}

@media (min-width: 768px) {
    #eventHeader.header-portrait {
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        gap: 36px;
    }

    #eventHeader.header-portrait .event-image-box {
        width: auto;
        flex-shrink: 0;
        display: flex;
        justify-content: flex-end;
    }

    #eventHeader.header-portrait .event-cover-img {
        max-width: 380px;
    }

    #event #eventHeader.header-portrait #info,
    #eventHeader.header-portrait #info,
    #eventHeader.header-portrait .event-info-box {
        flex: 1 1 0%;
        width: auto;
    }
}

/* 2.5 Estrutura das Seções e Tabela de Ingressos */
#event header,
#event section,
#event #divTickets {
    float: none;
    width: 100%;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

#event #divTickets table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    display: table;
    border: none;
    box-shadow: none;
    margin-bottom: 0;
}

#event #divTickets table tr,
#event #divTickets tr {
    width: 100%;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

#event #divTickets table tr[data-cupom] {
    display: none;
}

#event #divTickets table tbody tr:last-child,
#event #divTickets tr:last-child {
    border-bottom: none;
}

#event #divTickets td,
#event #divTickets td p {
    margin: 0;
}

#event #divTickets td.tipo,
#event #divTickets .tipo {
    display: table-cell;
    width: 100%;
    max-width: none;
    padding: 18px 20px;
    text-align: left;
    vertical-align: middle;
}

#event #divTickets td.qtd,
#event #divTickets .qtd {
    display: table-cell;
    width: 1%;
    white-space: nowrap;
    max-width: none;
    min-width: 130px;
    padding: 18px 20px;
    text-align: right;
    vertical-align: middle;
}

/* 2.6 Estrutura dos Botões de Quantidade (+ e -) */
#event .btnMenos,
.btnMenos,
#event .btnMais,
.btnMais {
    background-image: none;
    border-width: 1px;
    border-style: solid;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    text-decoration: none;
    box-shadow: none;
    margin: 0;
}

#event .btnMenos:hover,
.btnMenos:hover,
#event .btnMais:hover,
.btnMais:hover {
    box-shadow: none;
    transform: scale(1.08);
}

#event .btnMenos::before,
.btnMenos::before {
    content: '';
    display: block;
    width: 14px;
    height: 2px;
    border-radius: 1px;
}

#event .btnMais::before,
.btnMais::before {
    content: '';
    display: block;
    width: 14px;
    height: 2px;
    border-radius: 1px;
    position: absolute;
}

#event .btnMais::after,
.btnMais::after {
    content: '';
    display: block;
    width: 2px;
    height: 14px;
    border-radius: 1px;
    position: absolute;
}

#event #divTickets .lblQtd,
.lblQtd {
    font-size: 16px;
    font-weight: 700;
    min-width: 28px;
    text-align: center;
    display: inline-block;
    line-height: 36px;
    vertical-align: middle;
    margin: 0 4px;
    height: auto;
}

#event #divTickets .lblQtd.hidden,
#event #divTickets .lblQtd[style*="none"] {
    display: none !important;
}

/* 2.7 Estrutura das Badges (Esgotado e Cupom) */
.badge-soldout {
    border-width: 1px;
    border-style: solid;
    padding: 0 16px;
    height: 36px;
    min-width: 108px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.badge-cupom {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
}

/* 2.8 Estrutura do Input de Cupom e Botão Aplicar */
.txtCupom {
    font-size: 13.5px;
    height: 44px;
    width: 100%;
    padding: 10px 16px 10px 42px;
    border-width: 1px;
    border-style: solid;
    border-radius: 14px;
    box-sizing: border-box;
    outline: none;
    transition: all 0.2s ease;
}

#event #btnAplicar,
#event .btnApply,
.btnApply {
    border-width: 1px;
    border-style: solid;
    border-radius: 14px;
    height: 44px;
    line-height: 44px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#event #btnAplicar:hover,
#event .btnApply:hover,
.btnApply:hover {
    transform: translateY(-1px);
}

#event #btnAplicar:active,
#event .btnApply:active,
.btnApply:active {
    transform: translateY(0) scale(0.98);
}

/* 2.9 Estrutura dos Botões de Ação Principal e Secundário */
.btn-event-primary,
.addToCart,
.fillNames,
.addToCartNames {
    background-size: 150% auto;
    border-width: 1px;
    border-style: solid;
    border-radius: 16px;
    height: 50px;
    line-height: 50px;
    padding: 0 28px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    float: none;
}

.btn-event-primary:hover,
.addToCart:hover,
.fillNames:hover,
.addToCartNames:hover {
    background-position: right center;
    transform: translateY(-1px) scale(1.005);
}

.btn-event-secondary {
    border-width: 1px;
    border-style: solid;
    border-radius: 16px;
    height: 48px;
    line-height: 48px;
    padding: 0 20px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

/* 2.10 Estrutura dos Formulários de Participantes e Recargas */
.event-input,
.txtName {
    font-size: 13.5px;
    height: 44px;
    width: 100%;
    padding: 10px 16px 10px 42px;
    border-width: 1px;
    border-style: solid;
    border-radius: 14px;
    box-sizing: border-box;
    outline: none;
    transition: all 0.2s ease;
}

.event-select,
.chkWallet {
    font-size: 13.5px;
    height: 44px;
    width: 100%;
    padding: 10px 16px 10px 42px;
    border-width: 1px;
    border-style: solid;
    border-radius: 14px;
    box-sizing: border-box;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 2.11 Estrutura da Descrição do Evento */
#event #desc {
    display: block;
    width: 100%;
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
}

#event #desc p {
    margin: 0 0 1rem 0;
    font-size: 15px;
    line-height: 1.7;
}