/* The Valet Parfait parking ticket, as printed (presentation p. 5), plus a live status strip.
   Sized in container units so it scales like the paper ticket wherever it sits. */
.ticket-stage { --rx: 0deg; --ry: 0deg; --notch: #141112; --sec: #d81b60; --paper: #2a2727; --cream: #e8dcb4;
  position: relative; width: min(540px, 100%); margin-inline: auto; perspective: 1200px; container-type: inline-size; }

.vt {
  position: relative; display: grid; grid-template-columns: 1fr 2.6cqw 21cqw; aspect-ratio: 2.36 / 1;
  border-radius: 2.4cqw; background: var(--paper); color: #fff; overflow: hidden;
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 0 90px -30px var(--sec);
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotate(-4deg); transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2, .7, .1, 1), box-shadow .8s; animation: vt-float 7s ease-in-out infinite;
}
.ticket-stage.is-tilting .vt { animation-play-state: paused; transition-duration: .12s; }
@keyframes vt-float { 50% { translate: 0 -8px; } }

/* body */
.vt-body { position: relative; display: flex; flex-direction: column; align-items: center; padding: 5.5cqw 4cqw 4.6cqw 5cqw; }
.vt-haz { position: absolute; width: 22cqw; height: 9cqw; pointer-events: none;
  background: repeating-linear-gradient(115deg, var(--cream) 0 .55cqw, transparent .55cqw 1.6cqw); }
.vt-haz--tl { left: -2cqw; top: -1cqw; clip-path: polygon(0 0, 100% 0, 0 100%); }
.vt-haz--br { right: 0; bottom: -1cqw; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.vt-logo { width: 21cqw; height: auto; }
.vt-logo .vt-pill { fill: var(--sec); transition: fill .6s; }
.vt-tag { margin: 1.6cqw 0 0; font: 400 1.85cqw/1 'Inter', sans-serif; letter-spacing: .3em; color: rgba(255, 255, 255, .8); white-space: nowrap; }
.vt-key { margin-top: auto; align-self: flex-start; display: flex; align-items: center; gap: 1.8cqw; color: var(--cream); }
.vt-key-ico { width: 11cqw; height: auto; }
.vt-key b { display: block; font: 600 2.15cqw/1.3 'Inter', sans-serif; letter-spacing: .08em; }
.vt-key span { display: block; font: 400 1.95cqw/1.35 'Inter', sans-serif; letter-spacing: .04em; padding-left: 1.4cqw; }
.vt-key i { font-style: normal; font-variant-numeric: tabular-nums; }

/* double perforation with notches */
.vt-perf { position: relative; border-inline: .25cqw dashed rgba(232, 220, 180, .55); margin-block: 0; }
.vt-perf::before, .vt-perf::after { content: ''; position: absolute; left: 50%; width: 3cqw; height: 3cqw; margin-left: -1.5cqw; border-radius: 50%; background: var(--notch); }
.vt-perf::before { top: -1.6cqw; }
.vt-perf::after { bottom: -1.6cqw; }

/* stub */
.vt-stub { position: relative; display: flex; align-items: center; justify-content: center; padding: 3.6cqw 5cqw 3.6cqw 2.4cqw; }
.vt-stub-c { width: 100%; height: 100%; border-radius: .6cqw; background: var(--sec); display: flex; align-items: center; justify-content: center; transition: background .6s; }
.vt-stub-c b, .vt-stub-c span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; color: #241f20; }
.vt-stub-c b { font: 700 3.3cqw/1 'Oswald', 'Arial Narrow', sans-serif; letter-spacing: .02em; }
.vt-stub-c span { font: 400 2.1cqw/1 'Oswald', 'Arial Narrow', sans-serif; margin-left: .6cqw; }
.vt-stub-no { position: absolute; right: 1cqw; top: 50%; writing-mode: vertical-rl; transform: translateY(-50%); font: 500 1.5cqw/1 'Inter', sans-serif; letter-spacing: .06em; color: rgba(255, 255, 255, .7); white-space: nowrap; }
.vt-stub-no i { font-style: normal; }

.ticket-shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .14) 45%, transparent 60%);
  background-size: 250% 100%; background-position: calc(50% + var(--ry) * 6) 0; mix-blend-mode: screen; }

/* live status strip */
.vt-live { position: relative; z-index: 2; width: 86%; margin: -1.5cqw auto 0; padding: 14px 18px 16px; border-radius: 18px; color: #fff;
  background: rgba(30, 26, 27, .82); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .7); transform: rotate(-1.5deg); }
.vt-live-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; font: 500 12.5px/1 'Inter', sans-serif; color: rgba(255, 255, 255, .7); }
.vt-live-head b { color: var(--sec); transition: color .6s; filter: brightness(1.25); }
.lang-ar .vt-live-head { font-family: 'IBM Plex Sans Arabic', 'Inter', sans-serif; }
.ticket-live { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px/1 'Inter', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #6fe0d3; background: rgba(68, 192, 178, .14); padding: 6px 10px; border-radius: 999px; }
.ticket-live i { width: 6px; height: 6px; border-radius: 50%; background: #44c0b2; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.ticket-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.ticket-steps::before { content: ''; position: absolute; top: 8px; inset-inline: 12%; height: 2px; background: rgba(255, 255, 255, .14); }
.ticket-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.ticket-steps .dot { position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: #2a2727; border: 2px solid rgba(255, 255, 255, .25); transition: all .4s; }
.ticket-steps .txt { font: 600 11px/1.2 'Inter', sans-serif; color: rgba(255, 255, 255, .45); transition: color .4s; }
.lang-ar .ticket-steps .txt { font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 12px; }
.ticket-steps li.done .dot { background: #44c0b2; border-color: #44c0b2; }
.ticket-steps li.done .dot::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141112' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 10px no-repeat; }
.ticket-steps li.done .txt, .ticket-steps li.now .txt { color: #fff; }
.ticket-steps li.now .dot { border-color: #44c0b2; box-shadow: 0 0 0 5px rgba(68, 192, 178, .25); animation: now 1.2s ease-in-out infinite; }
@keyframes now { 50% { box-shadow: 0 0 0 9px rgba(68, 192, 178, .08); } }
.ticket-bar { height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .1); margin: 14px 0 0; overflow: hidden; }
.ticket-bar span { display: block; height: 100%; width: 10%; border-radius: 3px; background: linear-gradient(90deg, #44c0b2, #6fe0d3); transition: width 1.4s cubic-bezier(.2, .7, .1, 1); }

.ticket-chip {
  position: absolute; z-index: 3; top: -14px; inset-inline-end: 0; display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: 999px; background: #44c0b2; color: #141112; font: 600 13px/1 'Inter', sans-serif;
  box-shadow: 0 16px 34px -12px rgba(68, 192, 178, .8);
  opacity: 0; transform: translateY(10px) scale(.94); transition: opacity .5s, transform .6s cubic-bezier(.2, .7, .1, 1);
}
.lang-ar .ticket-chip { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.ticket-chip i { width: 8px; height: 8px; border-radius: 50%; background: #141112; }
.ticket-stage.is-ready .ticket-chip { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .vt { animation: none; } }