/* =====================================================================
   EventPlatform - Design System (tema escuro / "black")
   Paleta: fundo quase-preto + dourado como acento de marca, inspirada em
   estetica de eventos de igreja/adoracao premium. Verde/vermelho ficam
   reservados para estados semanticos (disponivel / erro), nunca como
   acento de marca.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600&family=Caveat:wght@600;700&display=swap');

:root {
    --ep-bg: #05060a;
    --ep-bg-soft: #0a0c14;
    --ep-surface: #0e1220;
    --ep-surface-2: #161b2e;
    --ep-surface-hover: #1c2238;
    --ep-border: #262c42;
    --ep-border-soft: #1a1f33;

    --ep-text: #f5f5f7;
    --ep-text-muted: #98a2b3;
    --ep-text-faint: #5b6478;

    /* Nomes mantidos (--ep-gold*) para nao ter que reescrever cada regra
       que os referencia, mas o valor agora e verde -- mesmo verde ja
       usado no hero da Imersao (--ep-gold-bright = o brilho neon,
       --ep-gold = o tom solido do gradiente do botao). */
    --ep-gold: #16a34a;
    --ep-gold-bright: #39ff6a;
    --ep-gold-dim: #15803d;
    --ep-gold-foreground: #052e14;

    --ep-purple: #8b5cf6;
    --ep-success: #16a34a;
    --ep-danger: #e0483f;
    --ep-info: #38bdf8;

    --ep-radius-sm: 8px;
    --ep-radius: 14px;
    --ep-radius-lg: 22px;
    --ep-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
    --ep-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);

    --ep-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ep-font-display: "Playfair Display", Georgia, "Times New Roman", serif;

    /* Sobrescreve tokens do Bootstrap 5.3 (data-bs-theme="dark") para
       alinhar com a marca, mantendo todos os componentes nativos
       (forms, tabelas, dropdowns, modais) coerentes automaticamente. */
    --bs-body-bg: var(--ep-bg);
    --bs-body-color: var(--ep-text);
    --bs-border-color: var(--ep-border);
    --bs-primary: var(--ep-gold);
    --bs-primary-rgb: 22, 163, 74;
    --bs-link-color: var(--ep-gold-bright);
    --bs-link-hover-color: var(--ep-gold);
    --bs-secondary-bg: var(--ep-surface);
    --bs-tertiary-bg: var(--ep-surface-2);
}

/* Varios componentes do Bootstrap "gravam" a cor primaria em variaveis
   proprias no momento da compilacao do CSS (nao referenciam
   --bs-primary em tempo real) -- por isso precisam de override
   explicito para acompanhar o dourado da marca. */
.form-check-input:checked {
    background-color: var(--ep-gold);
    border-color: var(--ep-gold);
}

.form-check-input:focus {
    border-color: var(--ep-gold);
    box-shadow: 0 0 0 .2rem rgba(22, 163, 74, 0.25);
}

.pagination {
    --bs-pagination-bg: var(--ep-surface);
    --bs-pagination-border-color: var(--ep-border);
    --bs-pagination-color: var(--ep-text-muted);
    --bs-pagination-hover-bg: var(--ep-surface-2);
    --bs-pagination-hover-border-color: var(--ep-border);
    --bs-pagination-hover-color: var(--ep-text);
    --bs-pagination-active-bg: var(--ep-gold);
    --bs-pagination-active-border-color: var(--ep-gold);
    --bs-pagination-active-color: var(--ep-gold-foreground);
    --bs-pagination-disabled-bg: var(--ep-surface);
    --bs-pagination-disabled-border-color: var(--ep-border);
}

.nav-tabs, .nav-pills {
    --bs-nav-pills-link-active-bg: var(--ep-gold);
    --bs-nav-tabs-link-active-bg: var(--ep-surface);
    --bs-nav-tabs-link-active-color: var(--ep-gold-bright);
    --bs-nav-tabs-border-color: var(--ep-border);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--ep-surface);
    --bs-dropdown-border-color: var(--ep-border);
    --bs-dropdown-link-color: var(--ep-text);
    --bs-dropdown-link-hover-bg: var(--ep-surface-2);
    --bs-dropdown-link-hover-color: var(--ep-text);
    --bs-dropdown-divider-bg: var(--ep-border);
}

.modal-content {
    --bs-modal-bg: var(--ep-surface);
    --bs-modal-border-color: var(--ep-border);
}

.progress {
    --bs-progress-bg: var(--ep-surface-2);
    --bs-progress-bar-bg: var(--ep-gold);
}

::-moz-selection {
    background: var(--ep-gold);
    color: var(--ep-gold-foreground);
}

html, body {
    background-color: var(--ep-bg);
    color: var(--ep-text);
}

body {
    font-family: var(--ep-font-body);
    font-size: 16px;
    line-height: 1.6;
}

h1, h2, h3, .display-font {
    font-family: var(--ep-font-display);
    letter-spacing: -0.01em;
}

a {
    text-decoration: none;
}

::selection {
    background: var(--ep-gold);
    color: var(--ep-gold-foreground);
}

/* ---------------------------------------------------------------------
   Navbar
   --------------------------------------------------------------------- */

.ep-navbar {
    background: linear-gradient(180deg, #0a0c16 0%, #05060a 100%);
    border-bottom: 1px solid var(--ep-border-soft);
    backdrop-filter: blur(10px);
}

.ep-navbar .navbar-brand {
    font-family: var(--ep-font-display);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--ep-text) !important;
    letter-spacing: 0.01em;
}

.ep-navbar .navbar-brand i {
    color: var(--ep-gold);
}

.ep-navbar .nav-link {
    color: var(--ep-text-muted) !important;
    font-weight: 500;
    transition: color .15s ease;
}

.ep-navbar .nav-link:hover,
.ep-navbar .nav-link.active {
    color: var(--ep-text) !important;
}

.ep-navbar .btn-gold {
    margin-left: .5rem;
}

/* ---------------------------------------------------------------------
   Botoes
   --------------------------------------------------------------------- */

.btn-gold, .btn-primary {
    background: linear-gradient(135deg, var(--ep-gold-bright), var(--ep-gold));
    border: none;
    color: var(--ep-gold-foreground) !important;
    font-weight: 600;
    box-shadow: 0 2px 12px rgba(22, 163, 74, 0.25);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn-gold:hover, .btn-primary:hover,
.btn-gold:focus, .btn-primary:focus {
    filter: brightness(1.08);
    color: var(--ep-gold-foreground) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.35);
}

.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark {
    border-color: var(--ep-border);
    color: var(--ep-text-muted);
}

.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover {
    background: var(--ep-surface-2);
    border-color: var(--ep-gold);
    color: var(--ep-gold-bright);
}

.btn-link {
    color: var(--ep-gold-bright);
}

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

.ep-hero {
    position: relative;
    background:
        radial-gradient(ellipse 60% 50% at 15% 0%, rgba(22, 163, 74, 0.16), transparent 60%),
        radial-gradient(ellipse 50% 60% at 85% 10%, rgba(139, 92, 246, 0.14), transparent 60%),
        var(--ep-bg);
    color: var(--ep-text);
    padding: 96px 0 88px;
    overflow: hidden;
    border-bottom: 1px solid var(--ep-border-soft);
}

.ep-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 75%);
    pointer-events: none;
}

.ep-hero .container { position: relative; z-index: 1; }

.ep-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    background: rgba(22, 163, 74, 0.12);
    border: 1px solid rgba(22, 163, 74, 0.35);
    color: var(--ep-gold-bright);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.ep-hero h1 {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 1.2rem 0 1rem;
}

.ep-hero h1 .accent { color: var(--ep-gold); }

.ep-hero p.lead {
    color: var(--ep-text-muted);
    font-size: 1.15rem;
    max-width: 640px;
}

.ep-search-card {
    background: var(--ep-surface);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius-lg);
    box-shadow: var(--ep-shadow-lg);
    padding: 10px;
}

.ep-search-card .form-control {
    background: transparent;
    border: none;
    color: var(--ep-text);
    padding: .85rem 1rem;
}

.ep-search-card .form-control::placeholder { color: var(--ep-text-faint); }
.ep-search-card .form-control:focus { box-shadow: none; }

.ep-hero-stats {
    display: flex;
    gap: 2.5rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.ep-hero-stats .stat-value {
    font-family: var(--ep-font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--ep-text);
}

.ep-hero-stats .stat-label {
    color: var(--ep-text-faint);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ---------------------------------------------------------------------
   Secoes / Titulos
   --------------------------------------------------------------------- */

.ep-section {
    padding: 64px 0;
}

.ep-section-title {
    font-family: var(--ep-font-display);
    font-weight: 700;
    font-size: 1.9rem;
    color: var(--ep-text);
    margin-bottom: .25rem;
}

.ep-section-subtitle {
    color: var(--ep-text-muted);
    margin-bottom: 2rem;
}

.ep-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
    gap: 1rem;
}

/* ---------------------------------------------------------------------
   Categorias
   --------------------------------------------------------------------- */

.ep-category-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.1rem;
    border-radius: 999px;
    background: var(--ep-surface);
    border: 1px solid var(--ep-border);
    color: var(--ep-text-muted);
    font-size: .875rem;
    font-weight: 500;
    transition: all .15s ease;
}

.ep-category-chip:hover {
    border-color: var(--ep-gold);
    color: var(--ep-gold-bright);
    background: var(--ep-surface-2);
    transform: translateY(-1px);
}

.ep-category-chip i { color: var(--ep-gold); }

/* ---------------------------------------------------------------------
   Cards de evento
   --------------------------------------------------------------------- */

.ep-card-event {
    background: var(--ep-surface);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    overflow: hidden;
    height: 100%;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ep-card-event:hover {
    transform: translateY(-4px);
    box-shadow: var(--ep-shadow-lg);
    border-color: rgba(22, 163, 74, 0.4);
}

.ep-card-event .card-img-top {
    height: 170px;
    object-fit: cover;
    background: var(--ep-surface-2);
}

.ep-card-event .card-body {
    padding: 1.1rem 1.15rem 1.25rem;
}

.ep-card-event .card-title {
    color: var(--ep-text);
}

.ep-badge-category {
    background: var(--ep-surface-2);
    color: var(--ep-gold-bright);
    border: 1px solid var(--ep-border);
    font-weight: 600;
    font-size: .72rem;
    padding: .3rem .6rem;
}

.ep-badge-free {
    background: rgba(22, 163, 74, 0.16);
    color: #4ade80;
    border: 1px solid rgba(22, 163, 74, 0.35);
    font-weight: 600;
    font-size: .72rem;
}

.ep-price {
    color: var(--ep-gold-bright);
    font-weight: 700;
}

/* ---------------------------------------------------------------------
   CTA "crie seu evento"
   --------------------------------------------------------------------- */

.ep-cta-banner {
    background: linear-gradient(135deg, #14110a 0%, #1a1408 55%, #0a0c14 100%);
    border: 1px solid rgba(22, 163, 74, 0.3);
    border-radius: var(--ep-radius-lg);
    padding: 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ep-cta-banner::after {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, rgba(22, 163, 74, 0.18), transparent 70%);
    top: -120px;
    right: -80px;
    pointer-events: none;
}

.ep-cta-banner h3 {
    font-family: var(--ep-font-display);
    font-size: 2rem;
    margin-bottom: .5rem;
}

.ep-cta-banner p {
    color: var(--ep-text-muted);
    max-width: 520px;
    margin: 0 auto 1.75rem;
}

/* ---------------------------------------------------------------------
   Cards / dashboard / forms (paginas internas)
   --------------------------------------------------------------------- */

.card {
    background-color: var(--ep-surface);
    border: 1px solid var(--ep-border);
    color: var(--ep-text);
}

.ep-dashboard-card {
    border-radius: var(--ep-radius);
    box-shadow: var(--ep-shadow);
    border: 1px solid var(--ep-border);
    transition: border-color .15s ease, transform .15s ease;
}

.ep-dashboard-card:hover {
    border-color: rgba(22, 163, 74, 0.35);
    transform: translateY(-2px);
}

.ep-dashboard-card h6 {
    color: var(--ep-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .04em;
}

.ep-dashboard-card h2 {
    font-family: var(--ep-font-display);
    font-weight: 700;
    color: var(--ep-text);
    margin-bottom: 0;
}

.form-control, .form-select {
    background-color: var(--ep-surface-2);
    border: 1px solid var(--ep-border);
    color: var(--ep-text);
}

.form-control:focus, .form-select:focus {
    background-color: var(--ep-surface-2);
    border-color: var(--ep-gold);
    color: var(--ep-text);
    box-shadow: 0 0 0 .2rem rgba(22, 163, 74, 0.2);
}

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

.form-label { color: var(--ep-text-muted); font-weight: 500; }

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ep-text);
    --bs-table-striped-bg: var(--ep-surface-2);
    --bs-table-hover-bg: var(--ep-surface-2);
    --bs-table-border-color: var(--ep-border);
}

.table.bg-white { background: var(--ep-surface) !important; }

.bg-white { background-color: var(--ep-surface) !important; color: var(--ep-text); }

.badge.bg-primary-subtle { background-color: rgba(22, 163, 74, 0.15) !important; color: var(--ep-gold-bright) !important; border: 1px solid rgba(22,163,74,.3); }
.text-primary { color: var(--ep-gold-bright) !important; }

/* Icones decorativos da marca (ticket no navbar/sidebar, coracao no
   rodape) -- antes usavam .text-warning do Bootstrap "de emprestimo"
   porque combinava com o dourado antigo; agora que a marca e verde,
   passam a usar o token proprio em vez do --bs-warning (que fica livre
   para avisos reais, ex. Error.aspx). */
.ep-icon-accent { color: var(--ep-gold-bright) !important; }

/* ---------------------------------------------------------------------
   Sidebar (Organizer / Admin)
   --------------------------------------------------------------------- */

.ep-sidebar {
    background: #030409;
    min-height: 100vh;
    color: var(--ep-text-muted);
    border-right: 1px solid var(--ep-border-soft);
}

.ep-sidebar a {
    color: var(--ep-text-muted);
    text-decoration: none;
    display: block;
    padding: .65rem 1rem;
    border-radius: var(--ep-radius-sm);
    font-weight: 500;
    font-size: .925rem;
    transition: background .15s ease, color .15s ease;
}

.ep-sidebar a:hover {
    background: var(--ep-surface);
    color: var(--ep-text);
}

.ep-sidebar a.active {
    background: rgba(22, 163, 74, 0.14);
    color: var(--ep-gold-bright);
}

/* ---------------------------------------------------------------------
   Ingresso / QR
   --------------------------------------------------------------------- */

.ep-ticket-card {
    background: var(--ep-surface);
    border: 2px dashed rgba(22, 163, 74, 0.4);
    border-radius: var(--ep-radius);
}

.ep-qr-wrap {
    background: #fff;
    display: inline-block;
    padding: 16px;
    border-radius: var(--ep-radius-sm);
}

.ep-qr-wrap img { max-width: 220px; }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */

.ep-footer {
    background: #030409;
    border-top: 1px solid var(--ep-border-soft);
    color: var(--ep-text-faint);
}

.ep-footer a {
    color: var(--ep-text-muted);
}

.ep-footer a:hover { color: var(--ep-gold-bright); }

.ep-footer .brand {
    font-family: var(--ep-font-display);
    font-weight: 700;
    color: var(--ep-text);
    font-size: 1.15rem;
}

/* ---------------------------------------------------------------------
   Diversos
   --------------------------------------------------------------------- */

.list-group-item {
    background: var(--ep-surface);
    border-color: var(--ep-border-soft);
    color: var(--ep-text);
}

.ep-checkin-result {
    font-size: 1.05rem;
    padding: 1rem 1.25rem;
}

.alert-danger {
    background-color: rgba(224, 72, 63, 0.12);
    border-color: rgba(224, 72, 63, 0.35);
    color: #ff8f87;
}

.alert-success {
    background-color: rgba(22, 163, 74, 0.12);
    border-color: rgba(22, 163, 74, 0.35);
    color: #4ade80;
}

/* Cor propria (nao usa --ep-gold*): "warning" precisa continuar
   ambar/amarelo mesmo com a marca agora sendo verde, senao um aviso
   fica com a mesma cor de "sucesso" -- confuso pro usuario. */
.alert-warning {
    background-color: rgba(212, 160, 23, 0.12);
    border-color: rgba(212, 160, 23, 0.35);
    color: #e8b94a;
}

hr { border-color: var(--ep-border); opacity: 1; }

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

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ep-bg); }
::-webkit-scrollbar-thumb { background: var(--ep-surface-2); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--ep-border); }

/* ---------------------------------------------------------------------
   asp:Wizard (Organizer > Criar evento)
   O controle nao gera markup Bootstrap: ele monta tabelas HTML simples e
   aplica as classes abaixo (definidas via SideBarStyle/SideBarButtonStyle/
   StepStyle/NavigationStyle no CreateEvent.aspx) diretamente nas <td>/<a>
   internas. Por isso os seletores aqui miram elementos genericos de tabela
   dentro de cada classe, em vez de markup proprio.
   --------------------------------------------------------------------- */

.ep-wizard {
    background: var(--ep-surface);
    border: 1px solid var(--ep-border-soft);
    border-radius: var(--ep-radius-lg);
    overflow: hidden;
    width: 100%;
}

.ep-wizard td { border: none; }

.ep-wizard-sidebar {
    background: var(--ep-bg-soft);
    border-right: 1px solid var(--ep-border-soft);
    padding: 1.5rem 0;
    width: 200px;
    min-width: 180px;
    vertical-align: top;
}

.ep-wizard-sidebar table { width: 100%; border-collapse: collapse; }
.ep-wizard-sidebar table td { padding: 0; }

.ep-wizard-sidebar-btn,
.ep-wizard-sidebar a,
.ep-wizard-sidebar span {
    display: block;
    padding: .6rem 1.5rem;
    color: var(--ep-text-muted) !important;
    text-decoration: none !important;
    font-size: .9rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    background: transparent;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.ep-wizard-sidebar a:hover { color: var(--ep-text) !important; background: var(--ep-surface-hover); }

/* O passo ativo do sidebar e renderizado sem link (texto simples via <span>). */
.ep-wizard-sidebar span {
    color: var(--ep-gold-bright) !important;
    border-left-color: var(--ep-gold);
    background: rgba(22, 163, 74, .08);
    font-weight: 600;
}

.ep-wizard-step {
    padding: 1.75rem 2rem;
    vertical-align: top;
    color: var(--ep-text);
}

.ep-wizard-step h5 {
    color: var(--ep-text);
    font-family: var(--ep-font-display);
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.ep-wizard-nav {
    padding: 1.5rem 2rem 1.75rem;
    border-top: 1px solid var(--ep-border-soft) !important;
}

.ep-wizard-nav td { padding-right: .5rem; }

/* ---------------------------------------------------------------------
   Checkout (Event/Checkout.aspx)
   --------------------------------------------------------------------- */

.ep-checkout-steps {
    display: flex;
    align-items: center;
    gap: .75rem;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.ep-checkout-steps li {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--ep-text-faint);
    font-size: .875rem;
    font-weight: 600;
}

.ep-checkout-steps li:not(:last-child)::after {
    content: "";
    width: 32px;
    height: 1px;
    background: var(--ep-border);
    margin-left: .5rem;
}

.ep-step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ep-surface-2);
    border: 1px solid var(--ep-border);
    color: var(--ep-text-faint);
    font-size: .75rem;
}

.ep-checkout-steps li.active { color: var(--ep-text); }
.ep-checkout-steps li.active .ep-step-dot { background: var(--ep-gold); border-color: var(--ep-gold); color: var(--ep-gold-foreground); }
.ep-checkout-steps li.done { color: var(--ep-text-muted); }
.ep-checkout-steps li.done .ep-step-dot { background: rgba(22, 163, 74, .15); border-color: var(--ep-success); color: var(--ep-success); }

.ep-checkout-timer {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: rgba(22, 163, 74, .08);
    border: 1px solid rgba(22, 163, 74, .3);
    color: var(--ep-text-muted);
    border-radius: var(--ep-radius);
    padding: .75rem 1rem;
    font-size: .875rem;
}

.ep-checkout-timer i { color: var(--ep-gold-bright); font-size: 1.1rem; }
.ep-checkout-timer strong { color: var(--ep-gold-bright); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.ep-checkout-timer.expired { background: rgba(224, 72, 63, .1); border-color: rgba(224, 72, 63, .35); }
.ep-checkout-timer.expired strong { color: #ff8f87; }

.ep-checkout-event {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--ep-surface);
    border: 1px solid var(--ep-border-soft);
    border-radius: var(--ep-radius-lg);
}

.ep-checkout-event-banner {
    width: 84px;
    height: 84px;
    flex-shrink: 0;
    border-radius: var(--ep-radius);
    background: linear-gradient(135deg, var(--ep-surface-2), var(--ep-bg-soft)) center / cover no-repeat;
}

.ep-participant-card {
    background: var(--ep-surface);
    border: 1px solid var(--ep-border-soft);
    border-radius: var(--ep-radius);
    padding: 1rem;
}

.ep-checkout-summary { position: sticky; top: 1rem; }

.ep-checkout-line-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--ep-surface);
    border: 1px solid var(--ep-border-soft);
    border-radius: var(--ep-radius);
    padding: .75rem 1rem;
}

.ep-checkout-line-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(22, 163, 74, .12);
    color: var(--ep-gold-bright);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.ep-checkout-totals td { border-color: var(--ep-border-soft); color: var(--ep-text-muted); }
.ep-checkout-totals .total-row td { color: var(--ep-text); font-weight: 700; font-size: 1.05rem; border-top: 1px solid var(--ep-border); }

/* ---------------------------------------------------------------------
   Marca "Event Hub Church City" -- lockup EVENT HUB (bold, maiusculas) +
   Church City (manuscrita). A parte script usa a fonte Caveat como
   aproximacao da logo manuscrita real ate ela ser fornecida como imagem.
   --------------------------------------------------------------------- */

.eh-brand {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
}

.eh-brand-main {
    font-family: var(--ep-font-body);
    font-weight: 800;
    letter-spacing: .04em;
}

/* Logo real "Church City" (churchCity-trimmed.png -- recorte do
   arquivo original sem as margens transparentes ao redor da
   assinatura, que deixavam a marca minuscula/ilegivel dentro da caixa)
   usada via mask-image: preenche a silhueta com a cor da marca
   (background-color) em vez do preto original do arquivo, entao
   acompanha qualquer troca de cor de acento (--ep-gold-bright) sem
   precisar gerar uma nova imagem. Proporcao do recorte e quase
   quadrada (259x240). */
.eh-brand-script {
    display: inline-block;
    width: 80px;
    height: 80px;
    background-color: var(--ep-gold-bright);
    -webkit-mask-image: url('img/churchCity-trimmed.png');
    mask-image: url('img/churchCity-trimmed.png');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    transform: rotate(-4deg);
    vertical-align: middle;
}

/* Variante empilhada para espacos estreitos (sidebar de 240px). Sem
   rotacao aqui -- alinhada retinha, embaixo do "Event Hub", fica mais
   organizada que a versao inclinada (que fica com jeito de "torta"
   numa coluna estreita). */
.eh-brand-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    white-space: normal;
}

.eh-brand-stack .eh-brand-main { line-height: 1.2; }

.eh-brand-stack .eh-brand-script {
    width: 64px;
    height: 60px;
    margin-top: .35rem;
    transform: none;
}

/* ---------------------------------------------------------------------
   Imersao - hero de evento unico (Default.aspx enquanto so ha 1 evento
   ativo na plataforma). Paleta propria (verde neon sobre preto), i.e.
   nao usa os tokens --ep-gold/--ep-purple do resto do site -- e o
   "cartaz" do evento em si, o chrome ao redor (navbar/footer) continua
   com a marca da plataforma.
   --------------------------------------------------------------------- */

.imersao-hero {
    position: relative;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(57, 255, 106, .1), transparent 60%),
        #000;
    color: #f5f5f7;
    padding: 90px 0 100px;
    overflow: hidden;
    border-bottom: 1px solid rgba(57, 255, 106, .15);
}

.imersao-hero .container { position: relative; z-index: 2; }

/* Respingos verdes (estilo spray/tinta) espalhados pelo hero -- blobs
   organicos via border-radius assimetrico + blur, sem depender de imagem. */
.imersao-splatter {
    position: absolute;
    background: radial-gradient(circle, rgba(57, 255, 106, .6), rgba(57, 255, 106, .15) 55%, transparent 75%);
    filter: blur(3px);
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: screen;
    opacity: .8;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.imersao-splatter-1 { top: -40px; right: 10%; width: 220px; height: 190px; border-radius: 42% 58% 63% 37% / 41% 49% 51% 59%; animation: imersaoDriftA 12s infinite ease-in-out; }
.imersao-splatter-2 { bottom: 6%; left: 3%; width: 170px; height: 150px; border-radius: 63% 37% 41% 59% / 55% 45% 55% 45%; animation: imersaoDriftB 15s infinite ease-in-out; animation-delay: -4s; }
.imersao-splatter-3 { top: 18%; left: 48%; width: 60px; height: 60px; border-radius: 50%; opacity: .5; animation: imersaoDriftA 9s infinite ease-in-out; animation-delay: -2s; }
.imersao-splatter-4 { top: 55%; right: 4%; width: 90px; height: 80px; border-radius: 55% 45% 48% 52% / 45% 55% 45% 55%; opacity: .55; animation: imersaoDriftB 11s infinite ease-in-out; animation-delay: -6s; }

@keyframes imersaoDriftA {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(34px, 34px); }
    100% { transform: translate(0, 0); }
}

@keyframes imersaoDriftB {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(-30px, 28px); }
    100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .imersao-splatter-1, .imersao-splatter-2, .imersao-splatter-3, .imersao-splatter-4 { animation: none; }
}

.imersao-lockup {
    position: relative;
    max-width: 640px;
    margin: 0 auto 2.5rem;
}

.imersao-x-glow {
    position: absolute;
    inset: -15% -40%;
    background: radial-gradient(ellipse 55% 55% at 50% 40%, rgba(57, 255, 106, .3), transparent 65%);
    filter: blur(14px);
    pointer-events: none;
    z-index: 0;
    animation: imersaoPulse 5s ease-in-out infinite;
}

@keyframes imersaoPulse {
    0%, 100% { opacity: .7; }
    50% { opacity: 1; }
}

/* X de cristal isolado (fundo removido de verdade, com canal alfa) --
   nenhuma mascara/blend-mode e necessaria, o PNG ja "flutua" sobre o
   preto do hero normalmente. */
.imersao-x-wrap {
    position: relative;
    width: min(360px, 68vw);
    margin: 0 auto -.5rem;
    z-index: 1;
    pointer-events: none;
    will-change: transform;
    transition: transform .2s ease-out;
}

.imersao-x-real {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 40px rgba(57, 255, 106, .45));
}

.imersao-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    background: rgba(57, 255, 106, .12);
    border: 1px solid rgba(57, 255, 106, .4);
    color: #7dffa0;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

/* Titulo do evento, logo abaixo do X -- o X e uma imagem isolada (sem
   texto embutido), entao o nome volta a ser o elemento grande de
   destaque do lockup. */
.imersao-title {
    position: relative;
    z-index: 1;
    font-family: 'Anton', var(--ep-font-body);
    font-size: clamp(2.4rem, 7vw, 4.5rem);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #3ad942;
    -webkit-text-stroke: 2px rgba(0, 20, 8, .5);
    text-shadow: 0 0 40px rgba(57, 255, 106, .5), 0 5px 0 rgba(0, 0, 0, .35);
    margin: .5rem 0 0;
}

.imersao-lead {
    color: var(--ep-text-muted);
    font-size: 1.1rem;
    max-width: 560px;
    margin-bottom: 1.5rem;
    white-space: pre-line;
}

.imersao-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    color: var(--ep-text-muted);
    font-size: .95rem;
    margin-bottom: 2rem;
}

.imersao-meta i { color: #39ff6a; margin-right: .4rem; }

.imersao-countdown {
    display: flex;
    gap: .75rem;
}

.imersao-countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(57, 255, 106, .25);
    border-radius: var(--ep-radius);
    backdrop-filter: blur(4px);
}

.imersao-countdown-item .val {
    font-family: 'Anton', var(--ep-font-body);
    font-size: 1.6rem;
    color: #7dffa0;
    line-height: 1;
}

.imersao-countdown-item .lbl {
    font-size: .68rem;
    color: var(--ep-text-faint);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: .3rem;
}

.imersao-btn {
    background: linear-gradient(135deg, #39ff6a, #16a34a);
    color: #06210f;
    font-weight: 700;
    border: none;
    box-shadow: 0 8px 30px rgba(57, 255, 106, .35);
    transition: transform .15s ease, box-shadow .15s ease;
}

.imersao-btn:hover {
    color: #06210f;
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(57, 255, 106, .45);
}

.imersao-btn.disabled {
    background: var(--ep-surface-2);
    color: var(--ep-text-faint);
    box-shadow: none;
    pointer-events: none;
}

.imersao-ticket-card {
    background: var(--ep-surface);
    border: 1px solid rgba(57, 255, 106, .25);
    border-radius: var(--ep-radius-lg);
    box-shadow: var(--ep-shadow-lg);
    padding: 1.75rem;
}

.imersao-ticket-card-eyebrow {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #7dffa0;
    font-weight: 600;
    margin-bottom: 1rem;
}

.imersao-ticket-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: var(--ep-bg-soft);
    border: 1px solid var(--ep-border-soft);
    border-radius: var(--ep-radius);
    padding: 1rem;
}

.imersao-ticket-price {
    font-family: var(--ep-font-display);
    font-weight: 700;
    font-size: 1.3rem;
    color: #7dffa0;
}