/* ════════════════════════════════════════════════════════════════════
 * Iron Route GPS — Onboarding P0 fixes (2026-05-03 r3)
 * Targets: progress dots spacing, animated logo block, touch handling,
 *          mobile viewport polish. Loaded AFTER onboarding.css.
 * ════════════════════════════════════════════════════════════════════ */

/* ── Touch / tap reliability ──────────────────────────────────────── */
.ob-veh-card,
.ob-chip,
.ob-role-card,
.ob-tab,
.ob-btn,
.ob-h-btn,
.ob-skip,
.ob-dot,
.ob-link,
[data-x-close],
[data-back],
[data-back-foot],
[data-continue],
[data-cta-start],
[data-cta-have-account],
[data-guest],
[data-oauth] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(212,168,75,.18);
  -webkit-user-select: none;
  user-select: none;
  min-height: 44px;
}
.ob-dot { min-height: 10px !important; }

/* ── Progress dots (clean round + better spacing) ─────────────────── */
.ob-dots {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 6px 12px !important;
  flex-wrap: nowrap;
  max-width: 100%;
}
.ob-dot {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  border-radius: 50% !important;
  background: rgba(244,241,234,.22) !important;
  border: none !important;
  padding: 0 !important;
  flex: 0 0 auto;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.ob-dot.done {
  background: var(--ob-success, #7ED957) !important;
  width: 10px !important;
  border-radius: 50% !important;
}
.ob-dot.done svg { width: 7px !important; height: 7px !important; }
.ob-dot.here {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: var(--ob-gold, #D4A84B) !important;
  box-shadow: 0 0 0 3px rgba(212,168,75,.22), 0 0 12px rgba(212,168,75,.55);
  transform: scale(1.05);
}
.ob-dot:focus-visible {
  outline: 2px solid var(--ob-gold, #D4A84B) !important;
  outline-offset: 4px !important;
}

@media (max-width: 480px) {
  .ob-header {
    grid-template-columns: 44px 1fr 44px !important;
    gap: 8px !important;
    padding: 12px 10px 8px 10px !important;
  }
  .ob-h-mid { gap: 4px !important; }
  .ob-dots { gap: 10px !important; padding: 4px 6px !important; }
  .ob-step-label { font-size: 11px !important; }
}

/* ── Welcome logo: centered, layered PNG + animated MP4 ───────────── */
.ob-welcome { padding-top: 4px; }
.ob-logo-wrap {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 20px 0 14px 0 !important;
  margin: 0 auto !important;
}
.ob-logo-frame {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  overflow: hidden;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.45));
  animation: obLogoEntrance .5s cubic-bezier(.2,.7,.2,1) both;
}
.ob-logo-frame video,
.ob-logo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  pointer-events: none;
  border-radius: 50%;
}
.ob-logo-static-underlay {
  position: absolute; inset: 0;
  z-index: 1;
}
.ob-logo-video-overlay {
  position: absolute; inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity .35s ease-out;
}
.ob-logo-frame.is-video-ready .ob-logo-video-overlay { opacity: 1; }
.ob-logo-frame.is-static .ob-logo-video-overlay { opacity: 0; }
.ob-logo-frame.is-static .ob-logo-static-underlay {
  animation: obLogoPulse 2.6s ease-in-out infinite;
}
@keyframes obLogoEntrance {
  from { opacity: 0; transform: scale(.92) translateY(6px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
@keyframes obLogoPulse {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 8px 22px rgba(0,0,0,.45)); }
  50%      { transform: scale(1.04); filter: drop-shadow(0 12px 28px rgba(212,168,75,.35)); }
}
@media (max-width: 480px) {
  .ob-logo-frame { width: 128px; height: 128px; }
}

.ob-logo-wrap > img.ob-logo:not(.ob-logo-keep) { display: none; }

/* ── Welcome layout polish ────────────────────────────────────────── */
.ob-welcome > .ob-h1,
.ob-welcome > .ob-sub {
  max-width: 540px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.ob-welcome .ob-bullets { margin-top: 18px; }

/* ── Vehicle cards: bigger tap target on mobile ───────────────────── */
@media (max-width: 480px) {
  .ob-veh-card {
    min-height: 64px !important;
    padding: 12px 14px !important;
  }
  .ob-veh-grid { gap: 10px !important; }
}

/* ── Continue button states ───────────────────────────────────────── */
.ob-btn-primary[disabled],
.ob-btn-primary:disabled {
  background: linear-gradient(180deg, rgba(226,182,86,.55), rgba(212,168,75,.55