@font-face { font-family: 'Riosark'; src: url(assets/riosark-regular.otf) format('opentype'); font-display: swap; }
:root {
  --ink: #000000; --paper: #FFFFFF; --cyan: #00BFED; --grey: #8A8E95; --line: #2A2C30;
  --ok: #19C37D; --warn: #F5A524; --bad: #F04438;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ink); color: var(--paper); font-family: 'Funnel Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.wrap { max-width: 440px; margin: 0 auto; padding: 24px 16px 48px; }
.rio { font-family: 'Riosark', 'Funnel Sans', sans-serif; font-weight: 400; letter-spacing: 0; }
.label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); }
.demo { background: #F5A524; color: #000; font: 600 13px/1.3 'Funnel Sans', sans-serif; padding: 8px 16px; text-align: center; }
.logo { height: 32px; width: auto; display: block; }
a { color: inherit; }

/* Form */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13px; letter-spacing: 0.08em; color: #C9CBCF; }
.field input { font: 400 17px 'Funnel Sans', sans-serif; color: #fff; background: #0E0F11; border: 1px solid var(--line); border-radius: 10px; padding: 14px; outline: none; }
.field input:focus { border-color: var(--cyan); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: #C9CBCF; margin: 8px 0 22px; }
.consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--cyan); flex: none; }
.btn { display: block; width: 100%; font: 600 17px 'Funnel Sans', sans-serif; border: 0; border-radius: 12px; padding: 16px; cursor: pointer; text-align: center; text-decoration: none; }
.btn-cyan { background: var(--cyan); color: #000; }
.btn-ghost { background: transparent; color: #fff; border: 1px solid var(--line); }
.btn:disabled { opacity: 0.5; cursor: default; }
.err { color: #FF8A80; font-size: 14px; min-height: 20px; margin-top: 10px; }
.small { font-size: 12px; line-height: 1.5; color: var(--grey); }

/* Flip ticket: front is the share card image, back is the boarding QR */
.flip { perspective: 1600px; cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; }
.flip:focus-visible .flip-in { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 18px; }
.flip-in { position: relative; aspect-ratio: 4 / 5; transition: transform 0.7s cubic-bezier(0.3, 0.7, 0.2, 1); transform-style: preserve-3d; }
.flip.on .flip-in { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #0E0F11; display: block; }
.back { transform: rotateY(180deg); background: var(--cyan); color: #000; display: flex; flex-direction: column; justify-content: space-between; padding: 6% 7%; }
.back-head { display: flex; justify-content: space-between; align-items: center; }
.back-head img { height: 28px; width: auto; }
.back-head span { font: 300 15px 'Funnel Sans', sans-serif; letter-spacing: 0.2em; }
.back-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.back-row .k { font-size: 10px; letter-spacing: 0.18em; opacity: 0.7; margin-bottom: 4px; }
.back-row .v { font-size: 17px; font-weight: 500; }
.back-row .v.rio { font-size: 40px; line-height: 1; color: #fff; }
.back-foot { text-align: center; font-size: 11px; letter-spacing: 0.2em; }
.qr { display: block; width: 72%; margin: 0 auto; aspect-ratio: 1; }
@media (prefers-reduced-motion: reduce) { .flip-in { transition: none; } }
.actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }