/* ============================================================
   AM9 TICKETS — Design System
   Bootstrap 5 + custom layer
   ============================================================ */

/* ── 1. CUSTOM PROPERTIES ───────────────────────────────────── */
:root {
  --am9-primary:        #2563EB;
  --am9-primary-hover:  #1E3A8A;
  --am9-primary-light:  rgba(37, 99, 235, .10);
  --am9-secondary:      #ff6600;
  --am9-accent:         #14213D;
  --am9-highlight:      #38BDF8;
  --am9-dark:           #0D1B2A;
  --am9-success:        #198754;
  --am9-warning:        #ffc107;

  --am9-radius-sm:  8px;
  --am9-radius:     12px;
  --am9-radius-lg:  16px;
  --am9-radius-xl:  24px;

  --am9-shadow-sm:  0 1px 4px rgba(0,0,0,.06);
  --am9-shadow:     0 2px 12px rgba(0,0,0,.08);
  --am9-shadow-lg:  0 8px 28px rgba(0,0,0,.13);
  --am9-shadow-xl:  0 16px 48px rgba(0,0,0,.18);

  --am9-nav-h:      64px;
  --am9-bottom-h:   62px;

  --am9-transition: .18s ease;
  --am9-font:       'Poppins', 'Inter', system-ui, -apple-system, sans-serif;

  --am9-body-bg:    #dfeafe;

  /* Textura de papel (ruído sutil via SVG) */
  --am9-paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");

  /* Máscara da perfuração (furos reais) como um SVG único — evita
     depender de mask-composite pra combinar várias camadas, que tem
     suporte irregular entre navegadores e some com os furos quando
     não é reconhecido. O recorte (notch + furinhos) já vem pronto
     num só path, via fill-rule:evenodd. */
  --am9-perf-mask-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 90'%3E%3Cpath fill-rule='evenodd' fill='%23000' d='M0,0H1000V90H0Z M0,45m-46,0a46,46 0 1,0 92,0a46,46 0 1,0 -92,0 M1000,45m-46,0a46,46 0 1,0 92,0a46,46 0 1,0 -92,0 M61,45m-11.5,0a11.5,11.5 0 1,0 23,0a11.5,11.5 0 1,0 -23,0 M107,45m-11.5,0a11.5,11.5 0 1,0 23,0a11.5,11.5 0 1,0 -23,0 M153,45m-11.5,0a11.5,11.5 0 1,0 23,0a11.5,11.5 0 1,0 -23,0 M199,45m-11.5,0a11.5,11.5 0 1,0 23,0a11.5,11.5 0 1,0 -23,0 M245,45m-11.5,0a11.5,11.5 0 1,0 23,0a11.5,11.5 0 1,0 -23,0 M291,45m-11.5,0a11.5,11.5 0 1,0 23,0a11.5,11.5 0 1,0 -23,0 M337,45m-11.5,0a11.5,11.5 0 1,0 23,0a11.5,11.5 0 1,0 -23,0 M383,45m-11.5,0a11.5,11.5 0 1,0 23,0a11.5,11.5 0 1,0 -23,0 M429,45m-11.5,0a11.5,11.5 0 1,0 23,0a11.5,11.5 0 1,0 -23,0 M475,45m-11.5,0a11.5,11.5 0 1,0 23,0a11.5,11.5 0 1,0 -23,0 M521,45m-11.5,0a11.5,11.5 0 1,0 23,0a11.5,11.5 0 1,0 -23,0 M567,45m-11.5,0a11.5,11.5 0 1,0 23,0a11.5,11.5 0 1,0 -23,0 M613,45m-11.5,0a11.5,11.5 0 1,0 23,0a11.5,11.5 0 1,0 -23,0 M659,45m-11.5,0a11.5,11.5 0 1,0 23,0a11.5,11.5 0 1,0 -23,0 M705,45m-11.5,0a11.5,11.5 0 1,0 23,0a11.5,11.5 0 1,0 -23,0 M751,45m-11.5,0a11.5,11.5 0 1,0 23,0a11.5,11.5 0 1,0 -23,0 M797,45m-11.5,0a11.5,11.5 0 1,0 23,0a11.5,11.5 0 1,0 -23,0 M843,45m-11.5,0a11.5,11.5 0 1,0 23,0a11.5,11.5 0 1,0 -23,0 M889,45m-11.5,0a11.5,11.5 0 1,0 23,0a11.5,11.5 0 1,0 -23,0 M935,45m-11.5,0a11.5,11.5 0 1,0 23,0a11.5,11.5 0 1,0 -23,0'/%3E%3C/svg%3E");
  --am9-perf-mask-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 300'%3E%3Cpath fill-rule='evenodd' fill='%23000' d='M0,0H40V300H0Z M20,0m-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0 M20,300m-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0 M20,40m-3,0a3,3 0 1,0 6,0a3,3 0 1,0 -6,0 M20,60m-3,0a3,3 0 1,0 6,0a3,3 0 1,0 -6,0 M20,80m-3,0a3,3 0 1,0 6,0a3,3 0 1,0 -6,0 M20,100m-3,0a3,3 0 1,0 6,0a3,3 0 1,0 -6,0 M20,120m-3,0a3,3 0 1,0 6,0a3,3 0 1,0 -6,0 M20,140m-3,0a3,3 0 1,0 6,0a3,3 0 1,0 -6,0 M20,160m-3,0a3,3 0 1,0 6,0a3,3 0 1,0 -6,0 M20,180m-3,0a3,3 0 1,0 6,0a3,3 0 1,0 -6,0 M20,200m-3,0a3,3 0 1,0 6,0a3,3 0 1,0 -6,0 M20,220m-3,0a3,3 0 1,0 6,0a3,3 0 1,0 -6,0 M20,240m-3,0a3,3 0 1,0 6,0a3,3 0 1,0 -6,0 M20,260m-3,0a3,3 0 1,0 6,0a3,3 0 1,0 -6,0'/%3E%3C/svg%3E");
}

/* Bootstrap color-system sync */
:root {
  --bs-primary:         var(--am9-primary);
  --bs-primary-rgb:     37, 99, 235;
  --bs-link-color:      var(--am9-primary);
  --bs-link-hover-color:var(--am9-primary-hover);
}

/* ── 2. BASE ──────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: var(--am9-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #1a1a2e;
  background: var(--am9-body-bg);
}

/* Main content offset for sticky nav */
.am9-main {
  padding-top: var(--am9-nav-h);
  min-height: 100vh;
}
/* .am9-archive-page não precisa desse padding: a navbar é sticky-top (fica
   no fluxo normal do documento), não fixed — o padding extra só duplicava
   o espaço já ocupado pela navbar. */
.am9-archive-page { min-height: 100vh; }
/* Homepage: sem padding-top extra — o .am9-poster-hero já compensa */
.am9-homepage { min-height: 100vh; }

/* ── POSTER HERO SLIDER ─────────────────────────────────────── */
.am9-poster-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: var(--am9-nav-h);
}
/* No mobile, a barra inferior fixa (.am9-bottom-nav, só existe abaixo de
   768px) fica por cima da parte de baixo do hero — como o conteúdo do
   slider é centralizado num bloco de 100vh, o "peek" com o botão "Ver
   detalhes" acaba embaixo da barra e o toque nunca chega no slide (por
   isso só funcionava no desktop, onde essa barra nem existe). Descontar
   a altura da barra aqui evita a sobreposição. */
@media (max-width: 767px) {
  .am9-poster-hero { min-height: calc(100vh - var(--am9-bottom-h)); }
}

/* Backgrounds desfocados empilhados */
.am9-poster-bgs { position: absolute; inset: 0; }
.am9-poster-bg {
  position: absolute; inset: -40px;
  background-size: cover;
  background-position: center;
  filter: blur(28px) brightness(.45) saturate(1.4);
  opacity: 0;
  transition: opacity .7s ease;
  transform: scale(1.08);
}
.am9-poster-bg.active { opacity: 1; }

.am9-poster-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.10) 35%,
    rgba(0,0,0,0.10) 60%,
    rgba(0,0,0,0.45) 100%
  );
  z-index: 1;
}

.am9-poster-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 32px 0 48px;
}

/* Swiper container */
.am9-poster-swiper {
  width: 100%;
  padding: 10px 0 32px !important;
  overflow: visible !important;
  position: relative; z-index: 2;
  animation: am9FadeIn 0.9s 0.2s ease both;
}
.am9-poster-slide {
  width: 220px !important;
  opacity: 0.5;
  transform: scale(0.85);
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.swiper-slide-active.am9-poster-slide {
  opacity: 1;
  transform: scale(1);
}
@media (min-width: 576px) { .am9-poster-slide { width: 250px !important; } }
@media (min-width: 992px) { .am9-poster-slide { width: 280px !important; } }

/* Card do cartaz */
.am9-poster-card {
  display: block;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  transition: transform .3s ease, box-shadow .3s ease;
}
.swiper-slide-active .am9-poster-card {
  transform: translateY(-12px);
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
}

/* Imagem do cartaz */
.am9-poster-img-wrap {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #111;
}
.am9-poster-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.am9-poster-card:hover .am9-poster-img-wrap img { transform: scale(1.04); }

.am9-poster-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #2a2a3e; color: #666; font-size: 3rem;
}

.am9-poster-badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--am9-secondary, #ff6600);
  color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .05em;
}

/* Info do cartaz */
.am9-poster-info {
  padding: 14px 14px 16px;
}
.am9-poster-titulo {
  font-size: 14px; font-weight: 800;
  color: #1a1a2e; margin: 0 0 6px;
  line-height: 1.3;
}
.am9-poster-meta {
  font-size: 11px; color: #888;
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 2px;
}
.am9-poster-meta i { font-size: 10px; flex-shrink: 0; }

.am9-poster-footer {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.am9-poster-preco {
  font-size: 13px; font-weight: 800;
  color: var(--am9-primary);
}
.am9-poster-btn {
  display: inline-flex; align-items: center;
  background: var(--am9-warning, #ffc107);
  color: #1a1a2e;
  font-size: 11px; font-weight: 700;
  padding: 5px 12px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .04em;
}

/* Navegação Swiper */
.am9-swiper-btn {
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.am9-swiper-btn::after { font-size: 20px !important; }
.am9-swiper-pag { bottom: 8px !important; }
.am9-swiper-pag .swiper-pagination-bullet {
  background: rgba(255,255,255,.5);
  opacity: 1;
}
.am9-swiper-pag .swiper-pagination-bullet-active {
  background: #fff;
  width: 20px;
  border-radius: 4px;
}

/* Busca no hero */
/* Busca no hero — glassmorphism */
.am9-poster-search {
  width: 100%; padding: 0 20px;
  position: relative; z-index: 2;
  animation: am9FadeInUp 0.7s 0.35s ease both;
}
.am9-poster-search .form-control {
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.38) !important;
  color: #fff !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.am9-poster-search .form-control::placeholder { color: rgba(255,255,255,0.55); }
.am9-poster-search .form-control:focus {
  background: rgba(255,255,255,0.22) !important;
  border-color: rgba(255,255,255,0.6) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.18) !important;
  color: #fff !important;
}

/* ── SLIDER NOVO (page-lista-ingressos style) ───────────────── */

/* Fundo dinâmico (troca via fade de opacity no JS) */
.app-bg {
  position: absolute;
  top: -10%; left: -10%; width: 120%; height: 120%;
  background-size: cover; background-position: center;
  filter: blur(10px) brightness(0.48) saturate(1.15);
  z-index: 0;
  transition: opacity 0.35s ease;
}

/* Header dinâmico (título + subtítulo que mudam com o slide) */
.am9-hero-header {
  position: relative; z-index: 2;
  text-align: center;
  padding: 12px 20px 0;
  color: #fff;
  animation: am9FadeInDown 0.7s ease both;
}
.am9-hero-subtitle {
  display: block;
  letter-spacing: 2px; font-size: 0.7rem;
  opacity: 0.8; text-transform: uppercase;
  margin-bottom: 4px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  transition: opacity 0.25s ease;
}
.am9-hero-title {
  font-weight: 800;
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  letter-spacing: 1px; margin: 0;
  line-height: 1.15;
  text-shadow: 0 2px 16px rgba(0,0,0,0.6);
  transition: opacity 0.25s ease;
}

/* Movie card: poster 3:4 + peek panel */
.am9-movie-card {
  position: relative;
  border-radius: 25px; overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
  border: 3px solid rgba(255,255,255,0.85);
  cursor: pointer;
  aspect-ratio: 2/3;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.swiper-slide-active .am9-movie-card {
  transform: translateY(-10px);
  box-shadow: 0 28px 64px rgba(0,0,0,0.55);
  border-color: #fff;
}
.am9-movie-poster {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}
.am9-movie-poster-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #2a2a3e; color: #555; font-size: 3rem;
}

/* Peek panel — faixa compacta (~10% do card) */
.am9-movie-peek {
  position: absolute; bottom: -2px; left: 0; width: 100%;
  background: #fff; border-radius: 0;
  padding: 6px 12px 10px; text-align: center;
}
.am9-peek-title {
  font-size: 12px; font-weight: 800;
  color: #1a1a2e; margin: 0 0 3px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.am9-peek-meta {
  display: block;
  font-size: 10px; color: #888; margin: 0 0 5px;
}
.am9-peek-btn {
  display: block; width: 100%;
  background: #1a1a2e; color: #fff;
  border: none; border-radius: 30px;
  padding: 5px 0; font-size: 10px; font-weight: 700;
  cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em;
  transition: background 0.2s;
}
.am9-peek-btn:hover { background: var(--am9-primary); color: #fff; }

/* Bottom Sheet */
.am9-bottom-sheet {
  position: fixed; bottom: -100%; left: 0; width: 100%; max-height: 85vh;
  background: #fff; border-radius: 30px 30px 0 0;
  z-index: 1060;
  display: flex; flex-direction: column;
  transition: bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.25);
}
.am9-bottom-sheet.show { bottom: 0; }

.am9-sheet-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1055; opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease;
}
.am9-sheet-overlay.show { opacity: 1; pointer-events: auto; }

.am9-sheet-close {
  position: absolute; top: 14px; right: 20px;
  background: none; border: none;
  font-size: 1.3rem; color: #333; cursor: pointer; z-index: 10;
  line-height: 1;
}
.am9-sheet-body {
  flex: 1; overflow-y: auto;
  padding: 28px 24px 100px;
}
.am9-sheet-body::-webkit-scrollbar { display: none; }
.am9-sheet-footer {
  position: absolute; bottom: 0; left: 0; width: 100%;
  padding: 16px 24px 28px;
  background: linear-gradient(to top, #fff 80%, rgba(255,255,255,0));
}
.am9-sheet-meta {
  font-size: 13px; color: #666; margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.am9-sheet-preco {
  font-size: 1.1rem; font-weight: 800; color: var(--am9-primary);
}

/* ── ANIMAÇÕES DE ENTRADA ───────────────────────────────────── */
@keyframes am9FadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes am9FadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes am9FadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Reveal via IntersectionObserver */
.am9-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  transition-delay: calc(var(--am9-delay, 0) * 80ms);
}
.am9-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── 3. TYPOGRAPHY ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { font-family: var(--am9-font); font-weight: 700; }

.am9-section-title {
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  font-weight: 800;
  line-height: 1.25;
}
.am9-section-subtitle {
  font-size: 14px;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}

/* ── 4. GLOBAL BOOTSTRAP OVERRIDES ─────────────────────────── */
/* Primary */
.btn-primary,
.btn-primary:focus   { background: var(--am9-primary); border-color: var(--am9-primary); }
.btn-primary:hover   { background: var(--am9-primary-hover); border-color: var(--am9-primary-hover); }
.btn-outline-primary { color: var(--am9-primary); border-color: var(--am9-primary); }
.btn-outline-primary:hover { background: var(--am9-primary); border-color: var(--am9-primary); color: #fff; }
.badge.bg-primary    { background: var(--am9-primary) !important; }
.text-primary        { color: var(--am9-primary) !important; }
.bg-primary          { background: var(--am9-primary) !important; }
.border-primary      { border-color: var(--am9-primary) !important; }

/* Form focus ring */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--am9-primary);
  box-shadow: 0 0 0 .2rem var(--am9-primary-light);
}
.form-check-input:checked { background-color: var(--am9-primary); border-color: var(--am9-primary); }

/* Tables */
.table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6c757d;
  font-weight: 700;
  white-space: nowrap;
}

/* Pagination */
.page-link         { color: var(--am9-primary); }
.page-link:hover   { color: var(--am9-primary-hover); }
.page-item.active .page-link { background: var(--am9-primary); border-color: var(--am9-primary); }

/* Badges: category label style */
.badge.bg-primary.bg-opacity-10 {
  background: var(--am9-primary-light) !important;
  color: var(--am9-primary) !important;
}

/* ── 5. NAVBAR ──────────────────────────────────────────────── */
.navbar {
  height: var(--am9-nav-h);
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
}
.navbar-brand img { max-height: 36px; }
.navbar .nav-link { font-size: 14px; font-weight: 500; color: #333; transition: color var(--am9-transition); }
.navbar .nav-link:hover { color: var(--am9-primary); }

/* Menu mobile: em vez de expandir pra baixo, #am9Navbar é um offcanvas de
   verdade (Bootstrap) que desliza da direita, com fundo escurecido atrás
   e um cabeçalho próprio com botão de fechar — ver header.php. A partir
   do breakpoint lg (onde o menu já aparece inteiro ao lado da logo),
   neutralizamos o offcanvas pra ele voltar a se comportar como uma barra
   normal, sem esconder/deslizar nada (mesmo efeito visual de antes).
   */
.offcanvas#am9Navbar { --bs-offcanvas-width: 280px; }
@media (min-width: 992px) {
  .offcanvas#am9Navbar {
    position: static;
    z-index: auto;
    display: flex !important;
    flex-grow: 1;
    width: auto;
    height: auto;
    visibility: visible;
    background-color: transparent;
    box-shadow: none !important;
    transform: none;
    transition: none;
  }
  .offcanvas#am9Navbar .offcanvas-header { display: none; }
  .offcanvas#am9Navbar .offcanvas-body {
    display: flex; flex-grow: 1; padding: 0; overflow-y: visible;
  }
}

/* Ícone com bolinha de contagem (carrinho) — usado na navbar desktop, no
   offcanvas mobile e no bottom nav (footer.php). O elemento com
   .am9-badge-count precisa de um ancestral direto com position:relative. */
.am9-nav-icon-wrap { position: relative; display: inline-flex; }
.am9-badge-count {
  position: absolute; top: -4px; right: -6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: #dc3545; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}

/* Menu mobile (offcanvas) — bloco de identidade do usuário + lista de
   itens com ícone-em-caixa, no lugar do antigo dropdown aninhado (que
   causava o menu quebrado: dropdown por cima de offcanvas é um padrão
   frágil, com corte de texto e sobreposição). */
.am9-mnav-user {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; border-bottom: 1px solid rgba(0,0,0,.06);
}
.am9-mnav-user-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--am9-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
}
.am9-mnav-user-name { font-weight: 600; font-size: 14px; color: #1a1a2e; }
.am9-mnav-user-email { font-size: 12px; color: #888; }

.am9-mnav-list { display: flex; flex-direction: column; padding: 8px; }
.am9-mnav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--am9-radius-sm);
  color: #333; text-decoration: none; font-size: 14px; font-weight: 500;
  transition: background var(--am9-transition);
}
.am9-mnav-item:hover { background: var(--am9-primary-light); color: var(--am9-primary); }
.am9-mnav-item-icon {
  width: 34px; height: 34px; border-radius: var(--am9-radius-sm); flex-shrink: 0;
  background: var(--am9-primary-light); color: var(--am9-primary);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.am9-mnav-item.text-danger .am9-mnav-item-icon { background: rgba(220,53,69,.1); color: #dc3545; }
.am9-mnav-divider { height: 1px; background: rgba(0,0,0,.06); margin: 8px 12px; }

/* ── 6. CARDS ───────────────────────────────────────────────── */
.card { border-radius: var(--am9-radius) !important; }

/* Generic hover card */
.am9-card {
  border: none;
  border-radius: var(--am9-radius);
  box-shadow: var(--am9-shadow);
  transition: transform var(--am9-transition), box-shadow var(--am9-transition);
  overflow: hidden;
}
.am9-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--am9-shadow-lg);
}

/* ── 7. EVENT CARDS ────────────────────────────────────────── */
/* Both names used in templates — both defined here */
.am9-event-card,
.am9-evento-card {
  border: none !important;
  border-radius: var(--am9-radius) !important;
  overflow: hidden;
  box-shadow: var(--am9-shadow) !important;
  transition: transform var(--am9-transition), box-shadow var(--am9-transition);
  background: #fff;
}
.am9-event-card:hover,
.am9-evento-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--am9-shadow-lg) !important;
}

/* Card image container */
.am9-card-img-wrap,
.am9-evento-banner-wrap {
  overflow: hidden;
  background: #e9ecef;
  height: 180px;
}
.am9-card-img-wrap img,
.am9-evento-banner-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.am9-event-card:hover .am9-card-img-wrap img,
.am9-evento-card:hover .am9-evento-banner-wrap img {
  transform: scale(1.04);
}

/* Empty banner placeholder */
.am9-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
  color: #adb5bd;
  font-size: 2.5rem;
}

/* Price display */
.am9-evento-preco       { font-weight: 700; color: var(--am9-success); font-size: 14px; }
.am9-evento-preco.gratis { color: #6c757d; }

/* Category badge */
.am9-badge-categoria {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--am9-primary-light);
  color: var(--am9-primary);
  font-weight: 700;
  line-height: 1.6;
}

/* ── 8. HERO SECTIONS ──────────────────────────────────────── */
/* Homepage hero */
.am9-hero {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--am9-primary) 0%, var(--am9-accent, #14213D) 100%);
}
.am9-hero-bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .2;
  transition: opacity .3s;
}
.am9-hero-content { position: relative; z-index: 1; }

/* Search bar inside hero */
.am9-search-bar {
  background: #fff;
  border-radius: var(--am9-radius-xl);
  padding: 6px 6px 6px 16px;
  box-shadow: var(--am9-shadow-xl);
  max-width: 580px;
  margin: 0 auto;
}
.am9-search-bar .form-control {
  border: none;
  background: transparent;
  font-size: 15px;
}
.am9-search-bar .form-control:focus { box-shadow: none; }

/* Single evento hero */
.am9-evento-hero {
  position: relative;
  max-height: 440px;
  overflow: hidden;
  background: #111;
}
.am9-evento-hero picture { display: block; }
.am9-evento-hero img {
  width: 100%;
  max-height: 440px;
  object-fit: cover;
  opacity: .85;
}
.am9-evento-hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem 0 1.5rem;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, transparent 100%);
}

/* Archive search hero */
.am9-search-hero {
  background: var(--am9-primary);
  padding: 36px 0 28px;
}
.am9-search-hero .form-control,
.am9-search-hero .form-select {
  background: rgba(255,255,255,.96);
  border: none;
  font-size: 14px;
}
.am9-search-hero .input-group-text {
  background: rgba(255,255,255,.96);
  border: none;
}

/* ── 9. CATEGORY FILTER BAR ────────────────────────────────── */
.am9-cat-bar {
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.07);
  padding: 10px 0;
}
.am9-cat-bar .btn-outline-secondary {
  border-radius: 20px;
  font-size: 13px;
  padding: 4px 14px;
  border-color: #dee2e6;
  color: #495057;
  font-weight: 500;
  transition: all var(--am9-transition);
}
.am9-cat-bar .btn-outline-secondary:hover,
.am9-cat-bar .btn-outline-secondary.active {
  background: var(--am9-primary);
  border-color: var(--am9-primary);
  color: #fff;
}

/* ── 10. SECTION LAYOUT ────────────────────────────────────── */
.am9-section { padding: 60px 0; }
.am9-section-sm { padding: 36px 0; }
.am9-section-bg-light { background: #f8f9fa; }
.am9-section-bg-white { background: #fff; }

/* Section heading row */
.am9-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
.am9-see-all {
  font-size: 13px;
  color: var(--am9-primary);
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}
.am9-see-all:hover { color: var(--am9-primary-hover); }

/* CTA full-width band */
.am9-cta-band {
  background: linear-gradient(135deg, var(--am9-primary) 0%, var(--am9-highlight, #38BDF8) 50%, var(--am9-accent, #14213D) 100%);
  padding: 72px 0;
  color: #fff;
  position: relative; overflow: hidden;
}
.am9-cta-band::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.06) 0%, transparent 60%),
                    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.04) 0%, transparent 50%);
}

/* ── 11. SINGLE EVENTO PAGE ─────────────────────────────────── */

/* Conteúdo "flutua" por cima da base do hero, com cantos bem arredondados */
.am9-single-content-overlap { position: relative; z-index: 2; margin-top: -28px; }
.am9-single-hero-card { border-radius: var(--am9-radius-xl) !important; }

/* Info row below hero */
.am9-evento-inforow {
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.07);
  padding: 16px 0;
  font-size: 14px;
}
.am9-evento-inforow .am9-info-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #495057;
  white-space: nowrap;
}
.am9-evento-inforow .am9-info-item i { color: var(--am9-primary); font-size: 16px; }

/* Sidebar sticky — só a partir do desktop (ver @media 992px mais abaixo).
   No mobile o card de ingressos é movido pra dentro do fluxo normal da
   página (ver script em single-evento.php), então "sticky" ali grudaria
   ele no topo da tela ao rolar, o que não faz sentido fora da barra
   lateral do desktop. */

/* Lote table row */
.am9-lote-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid #f0f0f0;
  gap: 12px;
  flex-wrap: wrap;
}
.am9-lote-item:last-child { border-bottom: none; }
.am9-lote-nome  { font-weight: 600; font-size: 14px; }
.am9-lote-tipo  { font-size: 11px; color: #6c757d; }
.am9-lote-preco { font-weight: 700; color: var(--am9-success); font-size: 15px; }
.am9-lote-preco.gratis { color: #6c757d; font-size: 14px; }
.am9-lote-esgotado { color: #dc3545; font-size: 12px; font-weight: 600; }
.am9-lote-disponiveis { font-size: 12px; color: #adb5bd; }

/* Organizer card */
.am9-org-card { border-radius: var(--am9-radius); overflow: hidden; }
.am9-org-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--am9-primary-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--am9-primary); font-weight: 700; font-size: 20px;
}

/* Sticky sidebar */
@media (min-width: 992px) {
  .am9-sticky-sidebar { position: sticky; top: calc(var(--am9-nav-h) + 16px); }
}

/* Event content (post_content) */
.am9-evento-content { font-size: 15px; line-height: 1.75; color: #444; }
.am9-evento-content img { max-width: 100%; height: auto; border-radius: var(--am9-radius-sm); }
.am9-evento-content h2,
.am9-evento-content h3 { margin-top: 1.5em; margin-bottom: .5em; }
.am9-evento-content p  { margin-bottom: 1em; }

/* ── 12. ARCHIVE PAGE ──────────────────────────────────────── */
.am9-archive-page { background: #f8f9fa; }
.am9-results-count { font-size: 14px; color: #6c757d; font-weight: 500; }

/* Empty state */
.am9-empty-state {
  padding: 80px 0;
  text-align: center;
  color: #adb5bd;
}
.am9-empty-state i { font-size: 64px; margin-bottom: 16px; display: block; }

/* ── 13. DASHBOARD ─────────────────────────────────────────── */
.am9-dashboard-wrap { min-height: 100vh; background: var(--am9-body-bg); padding-top: var(--am9-nav-h); }
.am9-dashboard-content { padding: 28px 24px 100px; }

/* Cards do dashboard: elevação sutil no hover, cantos mais arredondados */
.am9-dashboard-wrap .card {
  border-radius: var(--am9-radius-lg) !important;
  transition: box-shadow var(--am9-transition), transform var(--am9-transition);
}
.am9-dashboard-wrap .card:hover {
  box-shadow: var(--am9-shadow-lg) !important;
}

/* Sidebar nav */
.am9-sidebar { min-height: calc(100vh - var(--am9-nav-h)); }
.am9-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--am9-radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: #495057;
  padding: 10px 14px;
  transition: background var(--am9-transition), color var(--am9-transition);
}
.am9-sidebar .nav-link:hover:not(.active) { background: #f0f0f5; color: var(--am9-primary); }
.am9-sidebar .nav-link.active { background: var(--am9-primary); color: #fff; }
.am9-sidebar .nav-link i { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }

/* Metric cards */
.am9-metric-card .am9-metric-icon {
  width: 48px; height: 48px;
  border-radius: var(--am9-radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.am9-metric-value { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.am9-metric-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #6c757d; font-weight: 600; }

/* ── 14. BOTTOM NAVIGATION (mobile) ────────────────────────── */
.am9-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--am9-bottom-h);
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 -4px 16px rgba(0,0,0,.07);
  z-index: 1030;
  display: flex;
  align-items: stretch;
}
.am9-bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 10px;
  font-weight: 500;
  color: #6c757d;
  gap: 3px;
  padding: 6px 4px;
  border-top: 2px solid transparent;
  transition: color var(--am9-transition), border-color var(--am9-transition);
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.am9-bottom-nav-item i { font-size: 20px; line-height: 1; }
.am9-bottom-nav-item.active {
  color: var(--am9-primary);
  border-top-color: var(--am9-primary);
}
.am9-bottom-nav-item:hover { color: var(--am9-primary); }

/* Variante com CTA contextual (comprar / finalizar) em vez dos 5 ícones —
   ver footer.php ($GLOBALS['am9_bottom_nav_custom']). Mesma altura/fundo/
   sombra da barra padrão, só troca a distribuição interna. */
.am9-bottom-nav--custom {
  align-items: center;
  gap: 12px;
  padding: 0 16px;
}
.am9-bn-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}
.am9-bn-label {
  font-size: 11px;
  color: #6c757d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.am9-bn-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--am9-dark, #1a1a1a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.am9-bottom-nav--custom .btn {
  flex-shrink: 0;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
}

/* Body padding on mobile to prevent bottom nav overlap */
@media (max-width: 767px) {
  body { padding-bottom: var(--am9-bottom-h); }
}

/* ── 15. FOOTER ─────────────────────────────────────────────── */
.am9-footer-link {
  color: #6c757d;
  text-decoration: none;
  font-size: 13px;
  transition: color var(--am9-transition);
}
.am9-footer-link:hover { color: var(--am9-primary); }

/* ── 16. FORMS ──────────────────────────────────────────────── */
.am9-form-label { font-size: 13px; font-weight: 600; color: #495057; margin-bottom: 4px; }

/* Step indicator (multi-step form) */
.am9-steps { display: flex; gap: 8px; align-items: center; }
.am9-step-dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  background: #e9ecef; color: #6c757d;
  flex-shrink: 0;
  transition: background var(--am9-transition), color var(--am9-transition);
}
.am9-step-dot.active { background: var(--am9-primary); color: #fff; }
.am9-step-dot.done   { background: var(--am9-success); color: #fff; }
.am9-step-line { flex: 1; height: 2px; background: #e9ecef; }
.am9-step-line.done { background: var(--am9-success); }

/* ── 16b. CHECKOUT — CARDS DE PARTICIPANTE ─────────────────────
   Um card por lote/evento (cabeçalho com ícone + nome do evento),
   e dentro dele um bloco por participante com avatar numerado,
   inputs com ícone e feedback ao vivo (preenchido = borda/ícone
   verde) — pra ficar claro e rápido de preencher mesmo com vários
   ingressos de eventos diferentes na mesma compra. */
.am9-participante-card {
  border-radius: var(--am9-radius-lg);
  overflow: hidden;
  animation: am9ParticipanteIn .4s ease both;
}
@keyframes am9ParticipanteIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.am9-participante-lote-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(120deg, var(--am9-primary-light), rgba(56,189,248,.10));
  border-bottom: 1px solid #eef1f6;
}
.am9-participante-lote-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--am9-primary), var(--am9-highlight));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  box-shadow: 0 4px 10px rgba(37,99,235,.28);
}
.am9-participante-lote-titulo { font-weight: 700; font-size: 14px; color: var(--am9-dark); line-height: 1.3; }
.am9-participante-lote-evento { font-size: 12px; color: var(--am9-primary); font-weight: 600; }

.am9-participante-item { padding: 16px; border-top: 1px dashed #eef1f6; }
.am9-participante-item:first-of-type { border-top: none; }

.am9-participante-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.am9-participante-rotulo { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #495057; }
.am9-participante-avatar {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--am9-primary), var(--am9-highlight));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
}

.am9-usar-meus-dados {
  display: inline-flex; align-items: center; gap: 5px;
  border: none; background: var(--am9-primary-light); color: var(--am9-primary);
  font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
  transition: background var(--am9-transition), transform var(--am9-transition);
}
.am9-usar-meus-dados:hover { background: var(--am9-primary); color: #fff; transform: translateY(-1px); }
.am9-usar-meus-dados:active { transform: translateY(0) scale(.96); }

.am9-input-icon { position: relative; }
.am9-input-icon > i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: #adb5bd; font-size: 14px; pointer-events: none;
  transition: color var(--am9-transition);
}
.am9-input-icon .am9-input-check {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%) scale(.4);
  color: var(--am9-success); font-size: 14px; opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.am9-input-icon input {
  padding-left: 34px; padding-right: 28px;
  border-radius: var(--am9-radius-sm);
  border: 1.5px solid #e5e9f0;
  background: #fafbfc;
  transition: border-color var(--am9-transition), box-shadow var(--am9-transition), background var(--am9-transition);
}
.am9-input-icon input:focus {
  border-color: var(--am9-primary);
  box-shadow: 0 0 0 3px var(--am9-primary-light);
  background: #fff;
}
.am9-input-icon:focus-within > i { color: var(--am9-primary); }
.am9-input-icon.is-preenchido input { border-color: #b7e4c7; background: #fff; }
.am9-input-icon.is-preenchido .am9-input-check { opacity: 1; transform: translateY(-50%) scale(1); }

/* ── 17. CHECK-IN ───────────────────────────────────────────── */
.am9-scan-wrap {
  position: relative;
  max-width: 340px;
  margin: 0 auto;
  border-radius: var(--am9-radius);
  overflow: hidden;
  background: #000;
}
.am9-scan-wrap video { width: 100%; display: block; border-radius: var(--am9-radius); }
.am9-scan-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  display: none;
}
.am9-scan-success { border: 2px solid #198754 !important; }
.am9-scan-error   { border: 2px solid #dc3545 !important; }

/* Check-in result card */
.am9-checkin-result {
  border-radius: var(--am9-radius);
  padding: 28px;
  text-align: center;
  transition: border-color .2s;
}

/* ── 18. ANIMATIONS ─────────────────────────────────────────── */
/* @keyframes am9FadeIn definido acima (bloco do hero slider) */
.am9-fade-in { animation: am9FadeIn .28s ease both; }

@keyframes am9Pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); }
}
.am9-pulse-cta { animation: am9Pulse 2.2s ease-in-out infinite; }

@keyframes am9Shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.am9-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: am9Shimmer 1.4s infinite;
  border-radius: 4px;
}

/* ── 19. PWA INSTALL PROMPT ────────────────────────────────── */
#am9-pwa-install { display: none; }

/* ── 20. RESPONSIVE ADJUSTMENTS ────────────────────────────── */
@media (max-width: 767px) {
  .am9-hero { min-height: 360px; }
  .am9-card-img-wrap,
  .am9-evento-banner-wrap { height: 150px; }
  .am9-evento-hero { max-height: 280px; }
  .am9-evento-hero img { max-height: 280px; }

  /* Quando o hero exibe o cartaz no mobile, respeita a proporção 3:4
     em vez do corte "paisagem" usado para o banner. */
  .am9-evento-hero.am9-evento-hero-tem-cartaz {
    max-height: none;
    aspect-ratio: 3/4;
  }
  .am9-evento-hero.am9-evento-hero-tem-cartaz img {
    max-height: none;
    height: 100%;
  }
  .am9-section { padding: 40px 0; }
  .am9-dashboard-content { padding: 16px 12px 80px; }
  .am9-search-hero { padding: 24px 0 20px; }
  .am9-cta-band { padding: 48px 0; }
}

@media (max-width: 575px) {
  .am9-section-title { font-size: 1.3rem; }
  .am9-evento-inforow .am9-info-item { font-size: 13px; }
  .am9-lote-item { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ── 21. UTILITY HELPERS ────────────────────────────────────── */
.am9-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.am9-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.am9-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.am9-ratio-16-9 { aspect-ratio: 16/9; overflow: hidden; }
.am9-ratio-4-3  { aspect-ratio: 4/3;  overflow: hidden; }
.am9-ratio-4-3 img,
.am9-ratio-16-9 img { width: 100%; height: 100%; object-fit: cover; }

/* Touch targets */
.am9-touch { min-height: 44px; min-width: 44px; display: flex; align-items: center; }

/* Content visibility for off-screen sections */
.am9-lazy-section { content-visibility: auto; contain-intrinsic-size: 0 400px; }

/* Swiper bullet color */
.swiper-pagination-bullet-active { background: var(--am9-primary) !important; }

/* ── 22. POSTER GRID CARD (listagem de eventos) ─────────────────
   Card estático (sem swiper) no formato pôster 3:4, reaproveitando
   a linguagem visual do .am9-movie-card do hero da home. */
.am9-poster-grid-card {
  display: block;
  background: #fff;
  border-radius: var(--am9-radius-lg);
  overflow: hidden;
  box-shadow: var(--am9-shadow);
  transition: transform var(--am9-transition), box-shadow var(--am9-transition);
  text-decoration: none;
  height: 100%;
}
.am9-poster-grid-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--am9-shadow-lg);
}
.am9-poster-grid-img { position: relative; aspect-ratio: 3/4; overflow: hidden; background: #e9ecef; }
.am9-poster-grid-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.am9-poster-grid-card:hover .am9-poster-grid-img img { transform: scale(1.05); }
.am9-poster-grid-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
  color: #adb5bd; font-size: 2.5rem;
}
.am9-poster-grid-badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--am9-primary); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .04em;
}
.am9-poster-grid-card--passado { cursor: not-allowed; }
.am9-poster-grid-card--passado:hover { transform: none; box-shadow: var(--am9-shadow); }
.am9-poster-grid-card--passado:hover .am9-poster-grid-img img { transform: none; }
.am9-poster-grid-card--passado .am9-poster-grid-img img { filter: grayscale(100%); }

/* Faixa diagonal — texto/cor compartilhados, posição varia por variante.
   .am9-poster-grid-img já tem overflow:hidden, então a faixa girada
   sempre fica recortada certinho nas bordas do card. */
.am9-poster-grid-ribbon {
  position: absolute; text-align: center;
  color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  z-index: 2;
}
/* "Evento já realizado" — faixa grande, cruzando o meio do cartaz. */
.am9-poster-grid-ribbon--passado {
  top: 50%; left: 50%; width: 145%;
  background: #0059fe;
  font-size: 13px; padding: 9px 0;
  transform: translate(-50%, -50%) rotate(-18deg);
}
/* "Últimos ingressos" — faixa pequena, no canto (cor de urgência,
   diferente do vermelho de "já realizado") — estoque baixo, ver
   am9tickets_evento_ultimos_ingressos(). */
.am9-poster-grid-ribbon--ultimos {
  top: 18px; left: -38px; width: 150px;
  background: var(--am9-secondary);
  font-size: 10px; padding: 4px 0;
  transform: rotate(-45deg);
}
.am9-poster-grid-info { padding: 12px 14px 14px; }
.am9-poster-grid-title { font-size: 14px; font-weight: 800; color: #1a1a2e; margin: 0 0 6px; line-height: 1.3; }
.am9-poster-grid-meta { font-size: 11px; color: #888; display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.am9-poster-grid-meta i { font-size: 10px; flex-shrink: 0; }
.am9-poster-grid-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.am9-poster-grid-preco { font-size: 13px; font-weight: 800; color: var(--am9-success); }
.am9-poster-grid-preco.gratis { color: #6c757d; }
.am9-poster-grid-btn {
  display: inline-flex; align-items: center;
  background: var(--am9-primary-light); color: var(--am9-primary);
  font-size: 11px; font-weight: 700;
  padding: 5px 12px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .03em;
}

/* ── 23. LOTE CARD (seleção de ingresso na página do evento) ─── */
.am9-lote-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 16px;
  border: 1px solid #eee;
  border-radius: var(--am9-radius);
  margin: 0 16px 12px;
  transition: border-color var(--am9-transition), box-shadow var(--am9-transition);
}
.am9-lote-card:last-child { margin-bottom: 16px; }
.am9-lote-card:hover { border-color: var(--am9-primary); box-shadow: var(--am9-shadow-sm); }
.am9-lote-card .am9-lote-nome { font-weight: 700; font-size: 14px; }
.am9-lote-card .am9-lote-tipo {
  font-size: 10px; color: var(--am9-primary); text-transform: uppercase;
  letter-spacing: .04em; font-weight: 700;
}
.am9-lote-card .am9-lote-preco { font-weight: 800; font-size: 16px; color: var(--am9-success); }
.am9-lote-card .am9-lote-preco.gratis { color: #6c757d; }
.am9-lote-card .btn { border-radius: 20px; }

/* ── 24. CART ITEM (carrinho) ──────────────────────────────────── */
.am9-cart-item {
  padding: 14px; border-radius: var(--am9-radius);
  background: #fff; box-shadow: var(--am9-shadow-sm);
  margin-bottom: 12px;
}
.am9-cart-item:last-child { margin-bottom: 0; }
.am9-cart-item-row { display: flex; align-items: center; gap: 14px; }
.am9-cart-item-img { width: 56px; height: 56px; border-radius: var(--am9-radius-sm); object-fit: cover; flex-shrink: 0; background: #e9ecef; }
.am9-cart-item-body { flex: 1; min-width: 0; }
.am9-cart-item-title { font-weight: 700; font-size: 14px; }
.am9-cart-item-sub { font-size: 12px; color: #888; }
.am9-cart-item-price { font-weight: 800; font-size: 14px; white-space: nowrap; }
.am9-cart-item-remove {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: none; background: #f8f9fa; color: #dc3545;
  transition: background var(--am9-transition);
}
.am9-cart-item-remove:hover { background: #f8d7da; }

.am9-cart-item-qty { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.am9-cart-item-qty button {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid #e2ddf5; background: #fff; color: var(--am9-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; line-height: 1; transition: background var(--am9-transition);
}
.am9-cart-item-qty button:hover:not(:disabled) { background: #f3f0ff; }
.am9-cart-item-qty button:disabled { opacity: .35; cursor: not-allowed; }
.am9-cart-item-qty span { min-width: 18px; text-align: center; font-weight: 700; font-size: 14px; }

.am9-cart-item-numeros { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #eee; }
.am9-cart-item-numeros .am9-numero-btn { margin: 0 6px 6px 0; }

/* ── 25. TICKET VIEW (página "Baixar Ingresso") ───────────────────
   Ticket único e animado: papel com ruído sutil, brilho que varre
   o card, QR em destaque, faixa de status e canhoto que se rasga
   de verdade (clip-path serrilhado) e balança quando "usado". */
.am9-tv-page {
  background:
    radial-gradient(1200px 600px at 20% -10%, var(--am9-primary) 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 110%, var(--am9-highlight) 0%, transparent 55%),
    linear-gradient(160deg, var(--am9-accent) 0%, var(--am9-dark) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

.am9-tv-glow {
  position: fixed;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,.35), transparent 70%);
  pointer-events: none;
  animation: am9tvDrift 14s ease-in-out infinite alternate;
  z-index: 0;
}
.am9-tv-glow.d1 { width: 220px; height: 220px; top: 8%;  left: 6%;  animation-delay: 0s; }
.am9-tv-glow.d2 { width: 160px; height: 160px; top: 65%; left: 82%; animation-delay: -4s; }
.am9-tv-glow.d3 { width: 120px; height: 120px; top: 78%; left: 12%; animation-delay: -8s; }
@keyframes am9tvDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(30px, -40px) scale(1.15); }
}

.am9-tv-stage { position: relative; z-index: 1; }

/* Escala fluida via container query — o ticket foi desenhado numa
   base de ~360px de largura e todas as medidas usam cqw (1cqw = 1%
   da largura do wrapper), então ele escala como uma imagem em
   qualquer tamanho de tela, sem precisar de breakpoints manuais. */
.am9-tv-col { container-type: inline-size; }

.am9-tv {
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  position: relative;
  opacity: 0;
  transform: translateY(40px) scale(.96);
  animation: am9tvEnter .9s cubic-bezier(.22,1,.36,1) forwards;
  transition: transform .4s ease;
}
@keyframes am9tvEnter { to { opacity: 1; transform: translateY(0) scale(1); } }

.am9-tv-float { animation: am9tvFloaty 5.5s ease-in-out infinite; }
@keyframes am9tvFloaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5cqw); } }
.am9-tv:hover .am9-tv-float { animation-play-state: paused; }
.am9-tv:hover { transform: translateY(-6px); }

.am9-tv.is-cancelado { opacity: .8; }

.am9-tv-half {
  background: var(--am9-paper-noise), linear-gradient(180deg, #FBF8F2 0%, #f2efe6 100%);
  position: relative;
}

.am9-tv-top {
  border-radius: 7.2cqw 7.2cqw 0 0;
  padding: 6cqw 6cqw 0;
  text-align: center;
  box-shadow: 0 8cqw 16cqw -5cqw rgba(0,0,0,.55);
}

.am9-tv-banner {
  height: 36cqw;
  margin: -6cqw -6cqw 5cqw;
  border-radius: 7.2cqw 7.2cqw 0 0;
  background-size: cover;
  background-position: center;
}

.am9-tv-shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.am9-tv-shine::after {
  content: '';
  position: absolute; top: -60%; left: -80%;
  width: 55%; height: 220%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 70%, transparent 100%);
  animation: am9tvSweep 6s ease-in-out infinite;
  animation-delay: 1.2s;
}
@keyframes am9tvSweep { 0%, 55% { left: -80%; } 75%, 100% { left: 160%; } }

.am9-tv-event { font-weight: 900; font-size: 7.5cqw; color: #1a1a2e; line-height: 1.1; margin-bottom: .3cqw; }
.am9-tv-buyer { font-weight: 700; font-size: 5.4cqw; color: #8a8a99; margin-bottom: 4cqw; }

.am9-tv-qr {
  background: #f1f2f4;
  padding: 4cqw;
  display: inline-block;
  margin-bottom: 4cqw;
  border-radius: 3cqw;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.9);
  transition: transform .35s ease, box-shadow .35s ease;
  position: relative;
}
.am9-tv:hover .am9-tv-qr {
  transform: scale(1.03);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.08), 0 6cqw 14cqw -6cqw rgba(37,99,235,.35);
}
.am9-tv-qr img, .am9-tv-qr canvas { width: 52cqw; height: 52cqw; max-width: 100%; display: block; }

/* Só aparece na imagem/PDF exportados (ver .am9-tv-capturing) — na tela
   normal fica escondida, é só um registro de quando o arquivo foi gerado. */
.am9-tv-download-stamp {
  display: none;
  font-size: 2.6cqw;
  letter-spacing: .04em;
  color: #9a9aa8;
  margin: -2.5cqw 0 4cqw;
}
.am9-tv.am9-tv-capturing .am9-tv-download-stamp { display: block; }

.am9-tv-status {
  letter-spacing: .45em; text-indent: .45em;
  font-weight: 800; font-size: 3.9cqw; color: #fff;
  padding: 2.4cqw 0; margin: 4cqw -6cqw 0;
  position: relative; overflow: hidden;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.am9-tv-status--valido {
  background: linear-gradient(180deg, #2fa06a 0%, var(--am9-success) 60%, #145c3b 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 4px rgba(0,0,0,.2);
  animation: am9tvPulse 2.6s ease-in-out infinite;
}
@keyframes am9tvPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
.am9-tv-status--usado {
  background: linear-gradient(180deg, #9b3830 0%, #7a2e2e 60%, #501d1d 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 4px rgba(0,0,0,.3);
}
.am9-tv-status--cancelado {
  background: linear-gradient(180deg, #d5493a 0%, #c0392b 60%, #832a20 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 4px rgba(0,0,0,.3);
}

.am9-tv-code {
  color: #b0b0bd;
  font-family: monospace;
  font-weight: 700; font-size: 6cqw; letter-spacing: 2px;
  padding: 2.8cqw 0 4cqw;
}

.am9-tv-bottom {
  border-radius: 0 0 7.2cqw 7.2cqw;
  padding: 5cqw 6cqw 0;
  overflow: hidden;
  box-shadow: 0 9cqw 16cqw -4cqw rgba(0,0,0,.6);
}

/* Perfuração com furos de verdade — máscara única (SVG com o recorte
   já pronto via fill-rule:evenodd), sem depender de mask-composite
   pra combinar camadas. Como é um recorte real (não mais um círculo
   pintado na cor do fundo), mostra o que estiver atrás do ticket de
   verdade — não depende de bater com a cor da página. */
.am9-tv-perforation {
  background: var(--am9-paper-noise), linear-gradient(180deg, #f2efe6 0%, #FBF8F2 100%);
  height: 9cqw; position: relative;
  -webkit-mask-image: var(--am9-perf-mask-h);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: var(--am9-perf-mask-h);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

.am9-tv-date { color: #1a1a2e; font-weight: 800; font-size: 6cqw; text-align: center; margin: 1.5cqw 0 4.5cqw; }

.am9-tv-label { color: #8a8a99; font-size: 3.5cqw; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 0; }
.am9-tv-value { color: #1a1a2e; font-weight: 800; font-size: 4.4cqw; }

.am9-tv-participant { margin-bottom: 4cqw; }
.am9-tv-meta { margin-bottom: 1.5cqw; }
.am9-tv-checkin { color: var(--am9-success); font-size: 3.5cqw; font-weight: 700; margin: 2cqw 0 0; }

.am9-tv-footer {
  margin: 4.5cqw -6cqw 0;
  padding: 3.4cqw 0;
  text-align: center; color: #fff; font-weight: 700;
  letter-spacing: .45em; text-indent: .45em; font-size: 4.2cqw;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  border-radius: 0 0 7.2cqw 7.2cqw;
}
.am9-tv-footer--valido {
  background: linear-gradient(180deg, #4c82ff 0%, var(--am9-primary) 55%, #1f4fd0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.am9-tv-footer--usado {
  background: linear-gradient(180deg, #9b3830 0%, #7a2e2e 55%, #501d1d 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.am9-tv-footer--cancelado {
  background: linear-gradient(180deg, #d5493a 0%, #c0392b 55%, #832a20 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

/* ── Estado "usado": canhoto se solta, rasga e balança ──────────── */
.am9-tv.is-usado .am9-tv-top { border-radius: 7.2cqw 7.2cqw 2.4cqw 2.4cqw; }
.am9-tv.is-usado .am9-tv-perforation { background: transparent; }

.am9-tv-stub {
  background: var(--am9-paper-noise), linear-gradient(180deg, #FBF8F2 0%, #efece2 100%);
  border-radius: 4.5cqw 4.5cqw 7.2cqw 7.2cqw;
  padding: 5cqw 6cqw 0;
  overflow: hidden;
  transform-origin: top left;
  animation: am9tvDangle 4.5s ease-in-out infinite;
  filter: drop-shadow(0 8cqw 8cqw rgba(0,0,0,.5));
  --tear: 3cqw;
  clip-path: polygon(
    0 var(--tear), 4% 0, 8% var(--tear), 12% 0, 16% var(--tear), 20% 0,
    24% var(--tear), 28% 0, 32% var(--tear), 36% 0, 40% var(--tear), 44% 0,
    48% var(--tear), 52% 0, 56% var(--tear), 60% 0, 64% var(--tear), 68% 0,
    72% var(--tear), 76% 0, 80% var(--tear), 84% 0, 88% var(--tear), 92% 0,
    96% var(--tear), 100% 0, 100% 100%, 0 100%
  );
}
@keyframes am9tvDangle {
  0%, 100% { transform: rotate(5deg)   translate(3.5cqw, 2.5cqw); }
  50%      { transform: rotate(7.5deg) translate(4cqw, 3cqw); }
}

/* O carimbo agora fica dentro do .am9-tv-qr (não mais solto no topo do
   card) — assim ele estampa exatamente por cima do QR, que é o que
   faz sentido visualmente (".am9-tv-qr" já tem position:relative). */
.am9-tv-stamp {
  position: absolute; top: 40%; left: 50%;
  color: #7a2e2e; border: 1.4cqw solid #7a2e2e;
  border-radius: 3cqw; padding: 1cqw 4cqw;
  font-weight: 900; font-size: 8cqw;
  letter-spacing: .2em; text-indent: .2em; text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-14deg) scale(2.4);
  animation: am9tvStampIn .5s cubic-bezier(.2,1.6,.4,1) forwards;
  animation-delay: 1.1s;
  mix-blend-mode: multiply;
  pointer-events: none;
}
@keyframes am9tvStampIn { to { opacity: .85; transform: translate(-50%, -50%) rotate(-14deg) scale(1); } }

/* Congela toda animação enquanto o html2canvas captura a imagem/PDF,
   pra não exportar um frame no meio do balanço/flutuação — e desliga
   os efeitos que essa biblioteca renderiza mal (textura via filtro
   SVG, clip-path junto com filter, mix-blend-mode), que podem travar
   a captura e "engolir" outros elementos junto. */
.am9-tv.am9-tv-capturing,
.am9-tv.am9-tv-capturing * { animation: none !important; transition: none !important; }
.am9-tv.am9-tv-capturing { opacity: 1 !important; transform: none !important; --am9-paper-noise: none; }
.am9-tv.am9-tv-capturing .am9-tv-stub {
  transform: rotate(6deg) translate(3.5cqw, 2.5cqw) !important;
  clip-path: none !important;
  filter: none !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
}
.am9-tv.am9-tv-capturing .am9-tv-stamp {
  opacity: .85 !important;
  transform: translate(-50%, -50%) rotate(-14deg) scale(1) !important;
  mix-blend-mode: normal !important;
}

@media (prefers-reduced-motion: reduce) {
  .am9-tv, .am9-tv-float, .am9-tv-stub, .am9-tv-shine::after,
  .am9-tv-status--valido, .am9-tv-glow, .am9-tv-stamp {
    animation: none !important;
  }
  .am9-tv { opacity: 1; transform: none; }
  .am9-tv-stub { transform: rotate(6deg) translate(3.5cqw, 2.5cqw); }
  .am9-tv-stamp { opacity: .85; transform: translate(-50%, -50%) rotate(-14deg) scale(1); }
}

/* ── 25b. TICKET HORIZONTAL (grid "Meus Ingressos") ───────────────
   Escala fluida via container queries: o ticket foi desenhado numa
   base de 680px de largura e todas as medidas usam cqw (1cqw = 1% da
   largura da COLUNA, não da viewport) — então o ticket inteiro
   escala como uma imagem, com as mesmas proporções em col-6, col-12
   ou mobile, sem precisar de breakpoints manuais.
   Canhoto/cartaz à esquerda, perfuração real no meio (furos de
   verdade via mask-image, não mais um truque de cor), corpo com os
   dados e faixa de status à direita — cada peça com o próprio papel
   texturizado; a sombra do conjunto vem de um único filter:drop-
   shadow no wrapper externo. Ingresso usado: o canhoto se solta de
   verdade (clip-path serrilhado nas duas bordas do rasgo) e balança. */
.am9-ticket-h-col { container-type: inline-size; }

.am9-ticket-h {
  display: flex;
  align-items: stretch;
  width: 100%;
  position: relative;
  border-radius: 3.5cqw;
  filter: drop-shadow(0 3.5cqw 4.5cqw rgba(0,0,0,.55));
  transition: transform .4s ease;
}
.am9-ticket-h:hover { transform: translateY(-5px); }
.am9-ticket-h.is-cancelado { opacity: .8; }

.am9-ticket-h-float {
  display: flex; align-items: stretch; width: 100%;
  animation: am9hFloaty 6s ease-in-out infinite;
}
@keyframes am9hFloaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2cqw); } }
.am9-ticket-h:hover .am9-ticket-h-float { animation-play-state: paused; }

.am9-ticket-h-stub {
  background: var(--am9-paper-noise), linear-gradient(160deg, #FBF8F2 0%, #f2efe6 100%);
  border-radius: 3.5cqw 0 0 3.5cqw;
  padding: 3.2cqw;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  transition: border-radius var(--am9-transition);
}

.am9-ticket-h-poster {
  width: 26.5cqw;
  aspect-ratio: 3 / 4;
  border-radius: 2.4cqw;
  background: #e9ecef;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
  transition: filter var(--am9-transition);
}
.am9-ticket-h-poster::after {
  content: '';
  position: absolute; top: -60%; left: -80%;
  width: 55%; height: 220%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 70%, transparent 100%);
  animation: am9hSweep 6.5s ease-in-out infinite;
  animation-delay: 1.4s;
}
@keyframes am9hSweep { 0%, 55% { left: -80%; } 78%, 100% { left: 170%; } }

/* Perfuração com furos de verdade — máscara única (mesmo SVG em
   fill-rule:evenodd usado na página "Baixar Ingresso", só que
   girado pra orientação vertical). Sem mask-composite: esse valor
   tem suporte irregular entre navegadores e, quando não reconhecido,
   os furos somem por completo — por isso trocamos por um recorte
   já pronto num SVG só, que não precisa combinar camadas. */
.am9-ticket-h-perf {
  background: var(--am9-paper-noise), linear-gradient(160deg, #FBF8F2 0%, #f2efe6 100%);
  width: 5.9cqw;
  flex: 0 0 auto;
  position: relative;
  -webkit-mask-image: var(--am9-perf-mask-v);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: var(--am9-perf-mask-v);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

.am9-ticket-h-body {
  background: var(--am9-paper-noise), linear-gradient(160deg, #FBF8F2 0%, #f4f1e8 100%);
  flex: 1 1 auto; min-width: 0;
  padding: 3cqw 4.1cqw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  transition: border-radius var(--am9-transition);
}
.am9-ticket-h-event {
  font-weight: 800; font-size: 3.5cqw; line-height: 1.2; color: #1a1a2e; margin-bottom: .2cqw;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.am9-ticket-h-buyer { font-size: 2.6cqw; font-weight: 700; color: #8a8a99; margin-bottom: .5cqw; }

/* Código e data numa linha só, em vez de empilhados — poupa altura
   e deixa o cartaz (proporção 3:4) ditar a altura do card inteiro. */
.am9-ticket-h-codeline {
  display: flex; align-items: baseline; justify-content: center; gap: 1.2cqw;
  margin-bottom: 1.2cqw;
}
.am9-ticket-h-code {
  font-family: monospace; font-size: 2.7cqw; letter-spacing: 1.5px;
  color: #b0b0bd; margin: 0;
}
.am9-ticket-h-date { font-size: 2.8cqw; font-weight: 800; color: #1a1a2e; margin: 0; }
.am9-ticket-h-sep { color: #d8d5cc; font-size: 2cqw; }

.am9-ticket-h-participant {
  display: flex; align-items: baseline; gap: .7cqw;
  margin-bottom: 1.2cqw; text-align: left;
}
.am9-ticket-h-label { font-size: 1.85cqw; color: #9c9ca8; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 0; }
.am9-ticket-h-value { font-size: 2.35cqw; font-weight: 700; color: #1a1a2e; margin-bottom: 0; }

.am9-ticket-h-meta { text-align: left; margin-top: .6cqw; }
.am9-ticket-h-meta .am9-ticket-h-value { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.am9-ticket-h-checkin { margin-top: 1.5cqw; font-size: 1.85cqw; color: var(--am9-success); text-align: left; }

.am9-ticket-h-status {
  flex: 0 0 8.2cqw;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  writing-mode: vertical-rl; text-orientation: upright;
  font-size: 1.9cqw; font-weight: 800; letter-spacing: .45em;
  text-transform: uppercase; text-align: center;
  border-radius: 0 3.5cqw 3.5cqw 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  background: linear-gradient(90deg, #145c3b 0%, var(--am9-success) 45%, #2fa06a 100%);
  box-shadow: inset 2px 0 4px rgba(0,0,0,.2), inset -1px 0 0 rgba(255,255,255,.2);
  animation: am9hPulse 2.6s ease-in-out infinite;
  position: relative; overflow: hidden;
}
@keyframes am9hPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
.am9-ticket-h-status--usado {
  background: linear-gradient(90deg, #501d1d 0%, #7a2e2e 45%, #9b3830 100%);
  box-shadow: inset 2px 0 4px rgba(0,0,0,.3), inset -1px 0 0 rgba(255,255,255,.15);
  animation: none;
}
.am9-ticket-h-status--cancelado {
  background: linear-gradient(90deg, #832a20 0%, #c0392b 45%, #d5493a 100%);
  box-shadow: inset 2px 0 4px rgba(0,0,0,.3), inset -1px 0 0 rgba(255,255,255,.15);
  animation: none;
}

/* ── Ingresso usado: canhoto se solta de verdade, rasgado e balançando ── */
.am9-ticket-h.is-usado .am9-ticket-h-stub {
  border-radius: 3.5cqw 1.8cqw 1.8cqw 3.5cqw;
  margin-right: 2cqw;
  transform-origin: bottom right;
  animation: am9hDangle 4.5s ease-in-out infinite;
  filter: drop-shadow(0 2.6cqw 3.2cqw rgba(0,0,0,.45));
  --tear: 1.5cqw;
  clip-path: polygon(
    0 0, 100% 0,
    calc(100% - var(--tear)) 4%, 100% 8%,
    calc(100% - var(--tear)) 12%, 100% 16%,
    calc(100% - var(--tear)) 20%, 100% 24%,
    calc(100% - var(--tear)) 28%, 100% 32%,
    calc(100% - var(--tear)) 36%, 100% 40%,
    calc(100% - var(--tear)) 44%, 100% 48%,
    calc(100% - var(--tear)) 52%, 100% 56%,
    calc(100% - var(--tear)) 60%, 100% 64%,
    calc(100% - var(--tear)) 68%, 100% 72%,
    calc(100% - var(--tear)) 76%, 100% 80%,
    calc(100% - var(--tear)) 84%, 100% 88%,
    calc(100% - var(--tear)) 92%, 100% 96%,
    calc(100% - var(--tear)) 100%, 0 100%
  );
}
@keyframes am9hDangle {
  0%, 100% { transform: rotate(-4deg) translateY(-.9cqw); }
  50%      { transform: rotate(-6deg) translateY(-.3cqw); }
}
.am9-ticket-h.is-usado .am9-ticket-h-poster { filter: saturate(.7) brightness(.95); }

.am9-ticket-h.is-usado .am9-ticket-h-body {
  border-radius: 1.8cqw 0 0 1.8cqw;
  --tear: 1.5cqw;
  clip-path: polygon(
    var(--tear) 0, 100% 0, 100% 100%, var(--tear) 100%,
    0 96%, var(--tear) 92%, 0 88%, var(--tear) 84%,
    0 80%, var(--tear) 76%, 0 72%, var(--tear) 68%,
    0 64%, var(--tear) 60%, 0 56%, var(--tear) 52%,
    0 48%, var(--tear) 44%, 0 40%, var(--tear) 36%,
    0 32%, var(--tear) 28%, 0 24%, var(--tear) 20%,
    0 16%, var(--tear) 12%, 0 8%, var(--tear) 4%, 0 0
  );
}

@media (prefers-reduced-motion: reduce) {
  .am9-ticket-h-float, .am9-ticket-h-poster::after,
  .am9-ticket-h-status, .am9-ticket-h.is-usado .am9-ticket-h-stub {
    animation: none !important;
  }
  .am9-ticket-h.is-usado .am9-ticket-h-stub { transform: rotate(-5deg) translateY(-.6cqw); }
}

/* Respiro entre cada ticket e a borda da coluna na grade "Meus
   Ingressos" — soma ao gutter padrão do .row.g-4, então os cards
   ficam bem mais afastados uns dos outros e da borda da tela. */
.am9-ticket-h-col { padding: 50px; }
@media (max-width: 767.98px) { .am9-ticket-h-col { padding: 24px; } }
@media (max-width: 400px)    { .am9-ticket-h-col { padding: 12px; } }

/* Fundo azul-escuro da marca, escopado à aba "Meus Ingressos" do
   dashboard do comprador — faz bleed sobre o padding do container
   pai (24px 20px 80px) sem alterar o shell do dashboard. Mesmo
   gradiente + glows da página "Baixar Ingresso", pra manter a
   identidade visual entre as duas telas de ingresso. */
.am9-ingressos-page {
  background:
    radial-gradient(900px 500px at 15% -10%, var(--am9-primary) 0%, transparent 60%),
    radial-gradient(700px 400px at 100% 100%, var(--am9-highlight) 0%, transparent 55%),
    linear-gradient(160deg, var(--am9-accent) 0%, var(--am9-dark) 65%);
  margin: -24px -20px -80px;
  padding: 24px 20px 80px;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}
.am9-ingressos-glow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,.3), transparent 70%);
  pointer-events: none;
  animation: am9hDrift 14s ease-in-out infinite alternate;
  z-index: 0;
}
.am9-ingressos-glow.d1 { width: 200px; height: 200px; top: 6%;  left: 4%; }
.am9-ingressos-glow.d2 { width: 150px; height: 150px; top: 70%; right: 6%; animation-delay: -5s; }
@keyframes am9hDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(24px, -30px) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .am9-ingressos-glow { animation: none !important; }
}

/* ── 26. ABA INGRESSOS (organizador — Tipo de Ingresso + Lote) ──── */
.ed-tipo-card {
  border-radius: var(--am9-radius-lg) !important;
  overflow: hidden;
  transition: box-shadow var(--am9-transition);
}
.ed-tipo-card:hover { box-shadow: var(--am9-shadow); }

/* Cabeçalho do tipo de ingresso: ícone + nome editável + chips + ações,
   no mesmo espírito visual dos cards de participante do checkout. */
.ed-tipo-header {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(120deg, var(--am9-primary-light), rgba(56,189,248,.08));
  border-bottom: 1px solid #eef1f6;
}
.ed-tipo-icon {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--am9-primary), var(--am9-highlight));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(37,99,235,.28);
}
.ed-tipo-titlewrap { flex: 1 1 auto; min-width: 0; }
.ed-tipo-nome-visual {
  display: block; width: 100%;
  border: 1.5px solid transparent; background: transparent;
  font-size: 16px; font-weight: 700; color: var(--am9-dark);
  padding: 3px 8px; margin: -3px -8px 2px;
  border-radius: var(--am9-radius-sm);
  transition: border-color var(--am9-transition), background var(--am9-transition);
}
.ed-tipo-nome-visual:hover   { background: rgba(255,255,255,.6); }
.ed-tipo-nome-visual:focus   { outline: none; border-color: var(--am9-primary); background: #fff; }
.ed-tipo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: #666;
  background: rgba(255,255,255,.75); border: 1px solid rgba(0,0,0,.06);
  border-radius: 999px; padding: 3px 10px;
}
.ed-chip-info    { color: #0c5f7a; background: #e3f6fb; border-color: #cdeef7; }
.ed-chip-success { color: #14663f; background: #e4f7ec; border-color: #cdeedb; }
.ed-tipo-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ed-tipo-action-btn {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 10px;
  background: rgba(255,255,255,.7); color: #555;
  transition: background var(--am9-transition), color var(--am9-transition);
}
.ed-tipo-action-btn:hover { background: #fff; color: var(--am9-primary); }
.ed-tipo-action-btn--danger:hover { color: #dc3545; }

.ed-tipo-config-eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--am9-primary); margin-bottom: 10px;
}

.ed-lotes-do-tipo { background: #fbfbfd; }
.ed-lotes-vazio:empty { display: none; }

/* Card de lote: nome + status + ações no topo, campos organizados em
   grid, e estoque/numeração em blocos próprios — nada mais espremido
   numa única linha de 12 colunas. */
.am9-lote-ed {
  border-left: 3px solid #dee2e6;
  border-bottom: 1px solid #eef1f6;
  padding: 14px 18px;
  transition: background var(--am9-transition);
}
.am9-lote-ed:last-child { border-bottom: none; }
.am9-lote-ed:hover { background: #f7f6fc; }
.am9-lote-ed.ed-lote-ativo      { border-left-color: var(--am9-success); }
.am9-lote-ed.ed-lote-aguardando { border-left-color: var(--am9-warning); }
.am9-lote-ed.ed-lote-encerrado  { border-left-color: #adb5bd; background: #fafafa; }

.ed-lote-topo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.ed-lote-nome-visual {
  flex: 1 1 160px; min-width: 120px;
  border: 1.5px solid transparent; background: transparent;
  font-size: 14.5px; font-weight: 700; color: var(--am9-dark);
  padding: 3px 6px; margin: -3px -6px;
  border-radius: var(--am9-radius-sm);
  transition: border-color var(--am9-transition), background var(--am9-transition);
}
.ed-lote-nome-visual:hover { background: #fff; }
.ed-lote-nome-visual:focus { outline: none; border-color: var(--am9-primary); background: #fff; }
.ed-lote-status-badge { font-size: 11px; padding: 5px 10px; flex-shrink: 0; }
.ed-lote-toolbar { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.ed-lote-icon-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #e5e9f0; border-radius: 8px;
  background: #fff; color: #666;
  transition: background var(--am9-transition), color var(--am9-transition), border-color var(--am9-transition);
}
.ed-lote-icon-btn:hover { background: var(--am9-primary-light); border-color: var(--am9-primary); color: var(--am9-primary); }
.ed-lote-icon-btn--danger:hover { background: #fdecec; border-color: #f3b8b8; color: #dc3545; }
.ed-lote-btn-salvar { white-space: nowrap; }

.ed-lote-label { display: block; font-weight: 600; font-size: 11.5px; color: #666; margin-bottom: 3px; }

.ed-lote-estoque { margin-top: 12px; }
.ed-lote-progress { height: 6px; border-radius: 4px; }

.ed-lote-extra:empty { display: none; }
.ed-lote-extra:not(:empty) { margin-top: 12px; }

.ed-btn-add-lote {
  border: 2px dashed #d8cdf0;
  border-radius: var(--am9-radius-sm);
  color: var(--am9-primary);
  background: #fff;
  padding: 10px;
  font-weight: 600;
  transition: background var(--am9-transition), border-color var(--am9-transition);
}
.ed-btn-add-lote:hover { background: var(--am9-primary-light); border-color: var(--am9-primary); color: var(--am9-primary); }