/* ==========================================================================
   BookingPass — flip boarding-pass card
   ========================================================================== */
.hp-pass { position: relative; z-index: 0; isolation: isolate; perspective: 1400px; width: 100%; font-family: var(--hp-font-ui); }
.hp-pass__flip { position: relative; width: 100%; min-height: 236px; transform-style: preserve-3d; cursor: pointer; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.hp-pass.is-flipped .hp-pass__flip { transform: rotateY(180deg); }
.hp-pass__front, .hp-pass__back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 20px; overflow: hidden; }

.hp-pass__front { display: grid; grid-template-columns: minmax(0, 1fr) 128px; background: var(--hp-ink); color: #fff; box-shadow: 0 30px 60px -30px rgba(14, 27, 36, .7); }
.hp-pass__left { position: relative; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hp-pass__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; z-index: 0; }
.hp-pass__scrim { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(14, 27, 36, .95), rgba(14, 27, 36, .6)); z-index: 0; }
/* Lift only the CONTENT above the absolute bg/scrim — must NOT re-position the bg/scrim
   themselves (equal specificity + source order would otherwise drop the bg image into flow). */
.hp-pass__left > :not(.hp-pass__bg):not(.hp-pass__scrim) { position: relative; z-index: 1; }
.hp-pass__toprow { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hp-pass__eyebrow { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--hp-saffron-l); font-weight: 700; }
.hp-pass__chip { font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.hp-pass__title { font-family: var(--hp-font-display); font-weight: 700; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.1; }
.hp-pass__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: auto; }
.hp-pass__ml { display: block; font-size: 11px; color: #AFBDC5; text-transform: uppercase; letter-spacing: .08em; }
.hp-pass__mv { display: block; font-weight: 700; font-size: 14.5px; }
.hp-pass__stub { position: relative; background: var(--hp-saffron); color: var(--hp-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; border-left: 2px dashed rgba(14, 27, 36, .35); }
.hp-pass__notch { position: absolute; left: -12px; width: 22px; height: 22px; border-radius: 50%; }
.hp-pass__notch--t { top: -12px; }
.hp-pass__notch--b { bottom: -12px; }
.hp-pass__reflbl { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hp-pass__ref { font-family: var(--hp-font-display); font-weight: 800; font-size: 15px; text-align: center; line-height: 1.1; }
.hp-pass__tap { font-size: 11px; margin-top: 6px; opacity: .8; }

.hp-pass__back { transform: rotateY(180deg); background: #fff; border: 1px solid var(--hp-line-12); display: flex; gap: 18px; align-items: center; padding: 20px; box-shadow: 0 30px 60px -30px rgba(14, 27, 36, .5); }
.hp-pass__qr { flex: 0 0 auto; display: grid; place-items: center; padding: 10px; background: #fff; border: 1px solid var(--hp-line-12); border-radius: 12px; }
.hp-pass__qr svg { width: 116px; height: 116px; display: block; }
.hp-pass__qrgrid { display: grid; grid-template-columns: repeat(9, 12px); gap: 2px; }
.hp-pass__qrgrid span { width: 12px; height: 12px; border-radius: 2px; display: block; }
.hp-pass__instr { min-width: 0; font-size: 14px; line-height: 1.55; color: var(--hp-text-2); }
.hp-pass__ih { font-family: var(--hp-font-display); font-size: 19px; font-weight: 700; color: var(--hp-ink); margin-bottom: 6px; }
.hp-pass__instr strong { color: var(--hp-ink); }

@media (max-width: 390px) { .hp-pass__back { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .hp-pass__flip { transition: none !important; } }

/* ==== Responsive audit fix: stacked back face needs more height ==== */
@media (max-width: 390px) { .hp-pass__flip { min-height: 340px; } }