/* =====================================================
   Expo Nerd Core — E-Ticket
   ===================================================== */

:root {
	--et-dark:     #111111;
	--et-card:     #1A1A1A;
	--et-card-2:   #222222;
	--et-lime:     #A3D900;
	--et-cyan:     #00D4FF;
	--et-purple:   #9B59FF;
	--et-orange:   #FF8C42;
	--et-white:    #FFFFFF;
	--et-muted:    rgba(255,255,255,.45);
	--et-border:   rgba(255,255,255,.10);
	--et-radius:   20px;
}

/* ── Wrap da página ── */
.en-ticket-page {
	min-height: 100vh;
	background: var(--et-dark);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 16px 80px;
	font-family: 'Outfit', -apple-system, sans-serif;
}

.en-ticket-page-title {
	color: var(--et-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 32px;
	text-align: center;
}

/* ── Card principal ── */
.en-ticket-card {
	width: 100%;
	max-width: 540px;
	background: var(--et-card);
	border-radius: var(--et-radius);
	overflow: hidden;
	box-shadow:
		0 0 0 1px var(--et-border),
		0 40px 80px rgba(0,0,0,.7),
		0 0 0 1px rgba(163,217,0,.06);
	position: relative;
}

/* Tier color — definida via data attribute ou classe */
.en-ticket-card[data-tier="pista"]    { --et-tier: var(--et-lime)   }
.en-ticket-card[data-tier="vip"]      { --et-tier: var(--et-cyan)   }
.en-ticket-card[data-tier="camarote"] { --et-tier: var(--et-purple) }
.en-ticket-card[data-tier="mesa"]     { --et-tier: var(--et-orange) }
.en-ticket-card                       { --et-tier: var(--et-lime)   }

/* Faixa superior colorida */
.en-ticket-card::before {
	content: '';
	display: block;
	height: 4px;
	background: linear-gradient(90deg, var(--et-tier), transparent);
}

/* ── HEADER — evento ── */
.en-ticket-header {
	padding: 24px 28px 20px;
	background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 100%);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	border-bottom: 1px solid var(--et-border);
}

.en-ticket-brand {
	flex: 1;
}

.en-ticket-logo {
	margin-bottom: 12px;
}

.en-ticket-logo img {
	height: 40px;
	width: auto;
	/* Logo branca/lime sobre fundo escuro */
}

.en-ticket-logo-text {
	display: inline-block;
	font-family: 'Bangers', cursive;
	font-size: 26px;
	letter-spacing: 2px;
	color: var(--et-white);
	line-height: 1;
}

.en-ticket-logo-text span { color: var(--et-lime) }

.en-ticket-event-meta {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.en-ticket-date,
.en-ticket-local {
	font-size: 12px;
	color: var(--et-muted);
	letter-spacing: .3px;
}

.en-ticket-date { color: var(--et-white); font-weight: 600 }

.en-ticket-status {
	flex-shrink: 0;
	align-self: flex-start;
	padding: 5px 12px;
	border-radius: 50px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.en-ticket-status.paid      { background: rgba(163,217,0,.15); color: var(--et-lime);   border: 1px solid rgba(163,217,0,.3)   }
.en-ticket-status.pending   { background: rgba(250,204,21,.12); color: #facc15;          border: 1px solid rgba(250,204,21,.3)  }
.en-ticket-status.used      { background: rgba(255,255,255,.06); color: var(--et-muted); border: 1px solid var(--et-border)     }
.en-ticket-status.cancelled { background: rgba(248,113,113,.12); color: #f87171;         border: 1px solid rgba(248,113,113,.3) }

/* ── PERFURAÇÃO (tear line) ── */
.en-ticket-perforation {
	position: relative;
	height: 1px;
	margin: 0 16px;
	border-top: 2px dashed rgba(255,255,255,.12);
}

/* Círculos de perfuração nas extremidades */
.en-ticket-perforation::before,
.en-ticket-perforation::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--et-dark);
	border: 1px solid rgba(255,255,255,.08);
}

.en-ticket-perforation::before { left: -28px }
.en-ticket-perforation::after  { right: -28px }

/* ── BODY — tipo + holder + QR ── */
.en-ticket-body {
	display: grid;
	grid-template-columns: 1fr 180px;
	gap: 0;
}

.en-ticket-info {
	padding: 24px 28px;
	border-right: 1px dashed var(--et-border);
}

/* Tipo do ingresso */
.en-ticket-tier-name {
	font-family: 'Bangers', cursive;
	font-size: 42px;
	letter-spacing: 3px;
	color: var(--et-tier);
	line-height: 1;
	margin-bottom: 2px;
}

.en-ticket-tier-sub {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--et-muted);
	margin-bottom: 20px;
}

/* Divisor interno */
.en-ticket-info-divider {
	height: 1px;
	background: var(--et-border);
	margin-bottom: 20px;
}

/* Labels e valores */
.en-ticket-label {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--et-muted);
	margin-bottom: 3px;
}

.en-ticket-value {
	font-size: 16px;
	font-weight: 700;
	color: var(--et-white);
	margin-bottom: 4px;
}

.en-ticket-value-sub {
	font-size: 12px;
	color: var(--et-muted);
	margin-bottom: 16px;
}

.en-ticket-order-value {
	font-size: 13px;
	font-weight: 600;
	color: rgba(255,255,255,.6);
	font-variant-numeric: tabular-nums;
	letter-spacing: .5px;
}

/* QR Code */
.en-ticket-qr {
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.en-ticket-qr-wrap {
	background: var(--et-white);
	border-radius: 12px;
	padding: 10px;
	box-shadow: 0 0 0 3px var(--et-tier);
}

.en-ticket-qr-wrap img {
	width: 140px;
	height: 140px;
	display: block;
}

.en-ticket-scan-hint {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--et-muted);
	text-align: center;
}

/* ── FOOTER — código único ── */
.en-ticket-footer {
	background: var(--et-card-2);
	border-top: 1px dashed var(--et-border);
	padding: 16px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.en-ticket-code-wrap {
	flex: 1;
	min-width: 0;
}

.en-ticket-code-label {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--et-muted);
	margin-bottom: 4px;
}

.en-ticket-code {
	font-family: 'Courier New', Courier, monospace;
	font-size: 10px;
	color: rgba(255,255,255,.4);
	letter-spacing: .5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.en-ticket-paid-at {
	font-size: 10px;
	color: var(--et-muted);
	text-align: right;
	flex-shrink: 0;
}

/* ── AÇÕES ── */
.en-ticket-actions {
	padding: 20px 28px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	border-top: 1px solid var(--et-border);
}

.en-ticket-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 20px;
	border-radius: 50px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	transition: all .2s;
	border: none;
	letter-spacing: .3px;
}

.en-ticket-btn-print {
	background: var(--et-tier);
	color: var(--et-dark);
	flex: 1;
	justify-content: center;
}

.en-ticket-btn-print:hover { opacity: .88; transform: translateY(-1px) }

.en-ticket-btn-back {
	background: transparent;
	color: var(--et-muted);
	border: 1px solid var(--et-border);
}

.en-ticket-btn-back:hover { color: var(--et-white); border-color: rgba(255,255,255,.25) }

/* ── Estado: ingresso não encontrado / sem acesso ── */
.en-ticket-empty {
	text-align: center;
	padding: 60px 24px;
}

.en-ticket-empty-icon { font-size: 48px; margin-bottom: 16px }

.en-ticket-empty-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--et-white);
	margin-bottom: 8px;
}

.en-ticket-empty-desc {
	font-size: 14px;
	color: var(--et-muted);
	line-height: 1.6;
	margin-bottom: 28px;
}

/* ── Lista de múltiplos ingressos ── */
.en-tickets-list {
	width: 100%;
	max-width: 540px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* ── RESPONSIVO ── */
@media (max-width: 480px) {
	.en-ticket-page { padding: 24px 12px 60px }

	.en-ticket-body {
		grid-template-columns: 1fr;
	}

	.en-ticket-info {
		border-right: none;
		border-bottom: 1px dashed var(--et-border);
		padding-bottom: 20px;
	}

	.en-ticket-qr {
		padding: 20px;
		flex-direction: row;
		justify-content: flex-start;
		gap: 20px;
	}

	.en-ticket-qr-wrap img { width: 100px; height: 100px }

	.en-ticket-tier-name { font-size: 32px }
}

/* ── IMPRESSÃO ── */
@media print {
	.en-ticket-page {
		background: white;
		padding: 0;
	}

	.en-ticket-page-title { color: #666 }

	.en-ticket-card {
		box-shadow: none;
		border: 1px solid #ddd;
		max-width: 100%;
		break-inside: avoid;
	}

	.en-ticket-actions { display: none }

	.en-ticket-header,
	.en-ticket-body,
	.en-ticket-footer {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}