/**
 * Event Ticketing QR — frontend design system.
 * Tokens mirror the Pencil design (pencil-new.pen).
 */
.etqr {
	--etqr-accent: #FF9800;
	--etqr-border: #EEEEEE;
	--etqr-danger: #DC2626;
	--etqr-danger-bg: #FEE2E2;
	--etqr-success: #16A34A;
	--etqr-success-bg: #DCFCE7;
	--etqr-warning: #F59E0B;
	--etqr-warning-bg: #FEF3C7;
	--etqr-fg: #000000;
	--etqr-fg-2: #666666;
	--etqr-fg-inv: #FFFFFF;
	--etqr-surface: #FCFAF7;
	--etqr-surface-2: #FFFFFF;
	--etqr-surface-3: #F5F3EE;
	--etqr-ink: #0E0E0E;
	--etqr-radius: 8px;
	--etqr-radius-md: 6px;
	--etqr-radius-full: 9999px;
	font-family: "Geist", -apple-system, "Segoe UI", system-ui, sans-serif;
	color: var(--etqr-fg);
}
.etqr * { box-sizing: border-box; }
.etqr h1, .etqr h2, .etqr h3 { font-family: "Inter", system-ui, sans-serif; font-weight: 700; line-height: 1.1; margin: 0; }

/* ---- Hero ---- */
.etqr-hero {
	position: relative;
	background: var(--etqr-ink);
	color: var(--etqr-fg-inv);
	border-radius: var(--etqr-radius);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 320px;
}
.etqr-hero__body { padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.etqr-hero__eyebrow {
	display: inline-block; align-self: flex-start;
	background: var(--etqr-accent); color: #111;
	font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	padding: 5px 12px; border-radius: var(--etqr-radius-full);
}
.etqr-hero__title { font-size: clamp(32px, 5vw, 52px); }
.etqr-hero__lede { color: rgba(255,255,255,.7); max-width: 46ch; }
.etqr-hero__meta { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 8px; }
.etqr-hero__meta dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.5); }
.etqr-hero__meta dd { margin: 2px 0 0; font-weight: 600; }
.etqr-hero__media { background-size: cover; background-position: center; }
.etqr-hero__cta { margin-top: 12px; display: flex; gap: 12px; }

/* ---- Buttons ---- */
.etqr-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-weight: 600; font-size: 15px; line-height: 1;
	padding: 14px 22px; border-radius: var(--etqr-radius-full);
	border: 0; cursor: pointer; text-decoration: none; transition: transform .05s ease, opacity .15s ease;
}
.etqr-btn:active { transform: translateY(1px); }
.etqr-btn--primary { background: var(--etqr-accent); color: #111; }
.etqr-btn--ghost { background: transparent; color: var(--etqr-fg-inv); border: 1px solid rgba(255,255,255,.35); }
.etqr-btn--block { width: 100%; }
.etqr-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- Packages ---- */
.etqr-packages { margin-top: 40px; }
.etqr-packages__title { font-size: 28px; margin-bottom: 20px; }
.etqr-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.etqr-card {
	background: var(--etqr-surface-2); border: 1px solid var(--etqr-border);
	border-radius: var(--etqr-radius); padding: 22px; display: flex; flex-direction: column; gap: 14px;
}
.etqr-card--featured { background: var(--etqr-ink); color: var(--etqr-fg-inv); border-color: var(--etqr-ink); }
.etqr-card__tag {
	align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	padding: 4px 10px; border-radius: var(--etqr-radius-full); background: var(--etqr-surface-3); color: var(--etqr-fg-2);
}
.etqr-card--featured .etqr-card__tag { background: var(--etqr-accent); color: #111; }
.etqr-card__name { font-size: 18px; font-weight: 700; }
.etqr-card__desc { font-size: 13px; color: var(--etqr-fg-2); }
.etqr-card--featured .etqr-card__desc { color: rgba(255,255,255,.65); }
.etqr-card__price { font-size: 30px; font-weight: 800; margin-top: auto; }
.etqr-card__price small { font-size: 13px; font-weight: 500; color: var(--etqr-fg-2); }
.etqr-card__remaining { font-size: 12px; color: var(--etqr-warning); }
.etqr-card__qty { display: flex; align-items: center; gap: 10px; }
.etqr-qtybtn {
	width: 34px; height: 34px; border-radius: var(--etqr-radius-full); border: 1px solid var(--etqr-border);
	background: var(--etqr-surface-2); font-size: 18px; cursor: pointer; line-height: 1;
}
.etqr-card--featured .etqr-qtybtn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }
.etqr-qtyval { min-width: 22px; text-align: center; font-weight: 700; }

/* ---- Checkout bar ---- */
.etqr-buybar {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	margin-top: 20px; padding: 16px 20px; border-radius: var(--etqr-radius);
	background: var(--etqr-surface-3); flex-wrap: wrap;
}
.etqr-buybar__total { font-size: 20px; font-weight: 800; }
.etqr-legal { font-size: 13px; color: var(--etqr-fg-2); display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; }

/* ---- My ticket ---- */
.etqr-ticket {
	display: grid; grid-template-columns: 1fr auto; gap: 24px;
	background: var(--etqr-surface-2); border: 1px solid var(--etqr-border);
	border-radius: var(--etqr-radius); padding: 24px; align-items: center;
}
.etqr-ticket__qr { background: var(--etqr-ink); padding: 16px; border-radius: var(--etqr-radius); }
.etqr-ticket__qr img { display: block; }
.etqr-badge {
	display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	padding: 4px 10px; border-radius: var(--etqr-radius-full);
}
.etqr-badge--valid { background: var(--etqr-success-bg); color: var(--etqr-success); }
.etqr-badge--checked_in { background: var(--etqr-warning-bg); color: var(--etqr-warning); }
.etqr-badge--refunded, .etqr-badge--cancelled, .etqr-badge--expired { background: var(--etqr-danger-bg); color: var(--etqr-danger); }

.etqr-notice { padding: 14px 16px; border-radius: var(--etqr-radius); margin: 10px 0; font-size: 14px; }
.etqr-notice--error { background: var(--etqr-danger-bg); color: var(--etqr-danger); }

/* ---- Mobile sticky CTA ---- */
@media (max-width: 782px) {
	.etqr-hero { grid-template-columns: 1fr; }
	.etqr-hero__media { min-height: 200px; order: -1; }
	.etqr-buybar { position: sticky; bottom: 0; z-index: 20; box-shadow: 0 -6px 24px rgba(0,0,0,.12); }
}

/* ---- RTL (Arabic) ---- */
[dir="rtl"] .etqr,
.etqr[dir="rtl"] { direction: rtl; text-align: right; }
[dir="rtl"] .etqr-hero__eyebrow,
[dir="rtl"] .etqr-card__tag { align-self: flex-end; }
[dir="rtl"] .etqr-hero__lede { margin-left: 0; margin-right: auto; }
[dir="rtl"] .etqr-legal { flex-direction: row-reverse; }
[dir="rtl"] .etqr-card__price small { margin-right: 4px; margin-left: 0; }