/* ═══════════════════════════════════════════════════════════════════════════
   ONBOARDING  –  CitySideQuest
   All selectors are prefixed .ob- to avoid conflicts with the rest of the app.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shell ───────────────────────────────────────────────────────────────── */
.ob-shell {
  /* Override brand colours for the onboarding experience */
  --color-primary:       #C13383;
  --color-primary-dark:  #a82c72;
  --color-primary-light: rgba(193,51,131,.15);

  position: fixed; inset: 0; z-index: 200;
  background: #F5F0FF;
  font-family: 'Nunito', sans-serif;
  display: flex; flex-direction: column;
  align-items: center;   /* centres the column on desktop */
  overflow: hidden;
}

/* Every direct child of the shell spans up to 600px, centred */
.ob-shell > * {
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
}

/* The body still needs to scroll and fill remaining height */
.ob-shell > .ob-body {
  flex: 1;
  overflow-y: auto;
}

@media (min-width: 768px) {
  .ob-shell {
    background: #F5F0FF;
    align-items: center;
  }
  .ob-shell > * {
    width: 100%;
    max-width: 600px;
    background: #F5F0FF;
  }
  .ob-shell > .ob-body { background: #F5F0FF; }
  .ob-shell > .ob-footer { background: #F5F0FF; }
}

/* Onboarding keeps lavender even in dark OS mode on desktop */
@media (min-width: 768px) and (prefers-color-scheme: dark) {
  .ob-shell,
  .ob-shell > *,
  .ob-shell > .ob-body,
  .ob-shell > .ob-footer { background: #F5F0FF !important; }
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.ob-header {
  display: flex; align-items: center;
  padding: 12px 24px 10px;
  gap: 12px; flex-shrink: 0;
  min-height: 52px;
}
.ob-header__step {
  font-size: .78rem; color: var(--color-text-muted); font-weight: 500;
  white-space: nowrap; flex-shrink: 0;
}
.ob-header__back {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; color: var(--color-text-muted); font-size: 1.15rem;
  transition: background .15s; margin-left: -6px;
  -webkit-tap-highlight-color: transparent;
}
.ob-header__back:active { background: rgba(0,0,0,.06); }

/* ── Progress bar ────────────────────────────────────────────────────────── */
.ob-progress {
  flex: 1; height: 4px; background: var(--color-border);
  border-radius: 2px; overflow: hidden;
}
.ob-progress__fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #C13383, #792CA2);
  border-radius: 2px;
  transition: width .45s cubic-bezier(.4,0,.2,1);
}

/* ── Scrollable body ─────────────────────────────────────────────────────── */
.ob-body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ── Screen animation ────────────────────────────────────────────────────── */
.ob-screen {
  padding: 4px 24px 0;
  animation: ob-in .26s ease both;
}
.ob-screen--back { animation: ob-in-back .26s ease both; }

@keyframes ob-in      { from{opacity:0;transform:translateX(22px)} to{opacity:1;transform:translateX(0)} }
@keyframes ob-in-back { from{opacity:0;transform:translateX(-22px)} to{opacity:1;transform:translateX(0)} }

/* ── Why label ───────────────────────────────────────────────────────────── */
.ob-why {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 700; color: var(--color-primary);
  background: var(--color-primary-light); border-radius: 100px;
  padding: 4px 12px; margin-top: 14px; margin-bottom: 10px;
}

/* ── Headline & subhead ──────────────────────────────────────────────────── */
.ob-headline {
  font-family: 'Gajraj One', serif;
  font-size: 1.9rem; font-weight: 400; line-height: 1.15;
  color: #443199; margin-bottom: 8px;
}
.ob-subhead {
  font-size: .9rem; color: var(--color-text-muted); line-height: 1.6;
  margin-bottom: 18px;
}
.ob-counter {
  font-size: .82rem; color: var(--color-text-muted); margin-bottom: 12px;
}
.ob-counter strong { color: var(--color-primary); }

/* ── Search input ────────────────────────────────────────────────────────── */
.ob-search {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border: 1.5px solid var(--color-border); border-radius: 100px;
  background: var(--color-bg); margin-bottom: 14px;
}
.ob-search input {
  border: none; background: none; flex: 1;
  font-size: .93rem; outline: none; color: var(--color-text);
  font-family: 'Nunito', sans-serif;
}
.ob-search input::placeholder { color: var(--color-text-muted); }

/* ── Field / group label — used for ALL labels above inputs or chip groups ── */
.ob-field-label {
  font-size: .93rem; font-weight: 700; line-height: 1.4;
  color: #443199;
  margin-bottom: 8px;
}

/* ── Chip grid ───────────────────────────────────────────────────────────── */
.ob-chips {
  display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 28px;
}
.ob-chip {
  padding: 10px 16px; border-radius: 100px;
  border: 2px solid var(--color-border);
  font-size: .86rem; font-weight: 600;
  background: var(--color-surface); color: var(--color-text);
  display: flex; align-items: center; gap: 6px;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Nunito', sans-serif;
}
.ob-chip:active { transform: scale(.94); }
.ob-chip--selected {
  background: #C13383; color: #ffffff;
  border-color: #C13383; transform: scale(1.04);
}

/* ── Personality toggles ─────────────────────────────────────────────────── */
.ob-toggles { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.ob-toggle-row {
  border: 1.5px solid var(--color-border);
  border-radius: 14px; overflow: hidden; background: var(--color-surface);
}
.ob-toggle-row__opts { display: flex; }
.ob-toggle-opt {
  flex: 1; padding: 14px 6px;
  font-size: .86rem; font-weight: 600;
  color: var(--color-text-muted); text-align: center;
  transition: background .18s, color .18s;
  position: relative;
  font-family: 'Nunito', sans-serif;
}
.ob-toggle-opt:first-child::after {
  content: ''; position: absolute;
  right: 0; top: 22%; bottom: 22%;
  width: 1px; background: var(--color-border);
}
.ob-toggle-opt--active {
  background: #C13383; color: #ffffff;
}
.ob-toggle-opt--active::after { display: none !important; }

/* ── Sticky footer ───────────────────────────────────────────────────────── */
.ob-footer {
  padding: 12px 24px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: none;
  background: #F5F0FF !important; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.ob-cta {
  width: 100%; padding: 15px;
  background: #C13383; color: #ffffff;
  border-radius: 14px; font-size: .98rem; font-weight: 700;
  font-family: 'Nunito', sans-serif;
  transition: background .15s, transform .1s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.ob-cta:active { transform: scale(.98); background: #a82c72; }
.ob-cta:disabled { opacity: .38; pointer-events: none; }
.ob-cta--ghost {
  background: none; color: var(--color-text-muted); font-weight: 500;
  font-size: .88rem; padding: 8px;
}

/* Row layout for Back + Next side by side */
.ob-footer-row {
  display: flex; gap: 12px; width: 100%;
}
.ob-footer-row .ob-cta {
  width: auto; flex: 1;
}
.ob-footer-row .ob-cta--ghost {
  flex: 0 0 auto; min-width: 80px;
  border: 1.5px solid var(--color-border); border-radius: 14px;
  padding: 15px; font-size: .98rem;
}

/* ── Text input (name / age) ─────────────────────────────────────────────── */
.ob-input {
  width: 100%; padding: 13px 16px;
  border: 1.5px solid var(--color-border); border-radius: 12px;
  font-size: .95rem; font-family: 'Nunito', sans-serif;
  background: var(--color-surface); color: var(--color-text);
  transition: border-color .15s;
}
.ob-input:focus { outline: none; border-color: #C13383; }
.ob-input::placeholder { color: var(--color-text-muted); }
.ob-input--lg { font-size: 1.3rem; font-weight: 500; padding: 16px; border-radius: 14px; }

/* ── Photo upload ────────────────────────────────────────────────────────── */
.ob-photo-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding-bottom: 24px;
}
.ob-photo-area {
  width: 160px; height: 160px; border-radius: 50%;
  border: 3px dashed var(--color-border); overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.ob-photo-area:active { border-color: #C13383; }
.ob-photo-area--filled { border-style: solid; border-color: #C13383; }
.ob-photo-area img { width: 100%; height: 100%; object-fit: cover; }
.ob-photo-area__icon { display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); }
.ob-photo-area__hint { font-size: .78rem; font-weight: 500; color: var(--color-text-muted); margin-top: 6px; }

/* ════════════════════════════════════════════════════════════════════════════
   WELCOME SCREEN
   ════════════════════════════════════════════════════════════════════════════ */
.ob-welcome {
  min-height: 100dvh; min-height: 100vh;
  display: flex; flex-direction: column;
  background: linear-gradient(145deg, #C13383 0%, #792CA2 60%, #443199 100%);
  padding: 52px 24px 36px; overflow: hidden; position: relative;
}
.ob-welcome__glow { display: none; }
.ob-welcome__visual {
  flex: 1; display: flex; align-items: center; justify-content: center;
}
.ob-welcome__cards { position: relative; width: 280px; height: 220px; }

.ob-welcome__card {
  position: absolute; padding: 14px 16px; color: #1A1D2E;
  background: rgba(255,255,255,.85); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.9); border-radius: 18px; width: 210px;
}
.ob-welcome__card:first-child {
  top: 0; left: 0;
  animation: ob-float-a 3.8s ease-in-out infinite;
}
.ob-welcome__card:last-child {
  bottom: 0; right: 0;
  animation: ob-float-b 3.8s ease-in-out infinite .55s;
}
.ob-welcome__card-cat   { font-size: .72rem; opacity: .7; margin-bottom: 5px; font-family: 'Nunito', sans-serif; }
.ob-welcome__card-title { font-size: .88rem; font-weight: 700; font-family: 'Nunito', sans-serif; }
.ob-welcome__card-meta  { font-size: .72rem; opacity: .62; margin-top: 5px; font-family: 'Nunito', sans-serif; }

@keyframes ob-float-a { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-10px)} }
@keyframes ob-float-b { 0%,100%{transform:translateY(0)}  50%{transform:translateY(10px)}  }

.ob-welcome__copy { color: #ffffff; }
.ob-welcome__headline {
  font-family: 'Gajraj One', serif;
  font-size: 2.1rem; font-weight: 400; line-height: 1.1;
  margin-bottom: 10px; color: #ffffff;
}
.ob-welcome__sub { font-size: .98rem; color: rgba(255,255,255,.78); line-height: 1.55; margin-bottom: 26px; }
.ob-welcome__cta {
  width: 100%; padding: 16px;
  background: #ffffff; color: #443199;
  border-radius: 14px; font-size: 1.05rem; font-weight: 700;
  font-family: 'Nunito', sans-serif;
  transition: transform .12s, background .12s; margin-bottom: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.ob-welcome__cta:active { transform: scale(.98); background: #f0ecff; }
.ob-welcome__login {
  text-align: center; color: rgba(255,255,255,.6); font-size: .86rem;
}
.ob-welcome__login-btn {
  color: rgba(255,255,255,.9); text-decoration: underline;
  background: none; border: none; font: inherit; cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════════════════
   MICRO-REWARD SCREEN
   ════════════════════════════════════════════════════════════════════════════ */
.ob-body--center {
  display: flex; align-items: center; justify-content: center;
}
.ob-reward {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px; padding: 40px 32px; text-align: center;
  position: relative; overflow: hidden; width: 100%;
}
/* ambient glow behind emoji */
.ob-reward::before {
  content: ''; position: absolute;
  width: 260px; height: 260px; border-radius: 50%;
  background: #C13383; opacity: .15; filter: blur(70px);
  pointer-events: none;
}
.ob-reward__emoji {
  display: flex; align-items: center; justify-content: center;
  position: relative;
  animation: ob-pop .5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes ob-pop {
  0%  { transform: scale(0) rotate(-10deg); opacity: 0; }
  70% { transform: scale(1.2) rotate(3deg); opacity: 1; }
  100%{ transform: scale(1) rotate(0); }
}
.ob-reward__headline { font-family: 'Gajraj One', serif; font-size: 2rem; font-weight: 400; color: #443199; position: relative; }
.ob-reward__sub { font-size: .96rem; color: var(--color-text-muted); line-height: 1.6; max-width: 280px; position: relative; }
.ob-reward__bar-wrap {
  width: 100%; max-width: 240px; height: 4px;
  background: var(--color-border); border-radius: 2px; overflow: hidden; position: relative;
}
.ob-reward__bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #C13383, #792CA2); border-radius: 2px;
  transition: width 2.4s cubic-bezier(.4,0,.2,1);
}

/* ════════════════════════════════════════════════════════════════════════════
   AUTH SCREEN
   ════════════════════════════════════════════════════════════════════════════ */
.ob-auth-screen { padding: 8px 24px 32px; }
.ob-auth-intro { font-size: .88rem; color: var(--color-text-muted); line-height: 1.6; margin-bottom: 20px; }

.ob-provider-btn {
  display: flex; align-items: center; gap: 14px; padding: 15px 16px;
  border: 1.5px solid var(--color-border); border-radius: 14px;
  font-size: .93rem; font-weight: 600; background: var(--color-surface);
  transition: background .12s; color: var(--color-text); width: 100%; margin-bottom: 10px;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Nunito', sans-serif;
}
.ob-provider-btn:active { background: var(--color-bg); }
.ob-provider-logo {
  font-size: 1.15rem; width: 22px; text-align: center; flex-shrink: 0; font-weight: 800;
  color: #4285F4; letter-spacing: -.5px;
}
.ob-provider-apple { color: var(--color-text); }

.ob-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--color-text-muted); font-size: .8rem; margin: 4px 0;
}
.ob-divider::before, .ob-divider::after { content:''; flex:1; height:1px; background:var(--color-border); }

.ob-email-form { display: flex; flex-direction: column; gap: 10px; }
.ob-legal {
  font-size: .76rem; color: var(--color-text-muted); line-height: 1.55; text-align: center;
  margin-top: 4px;
}
.ob-legal a { color: #C13383; text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE  (onboarding keeps a light lavender feel even in dark OS mode)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  /* Keep lavender shell — onboarding is always light */
  .ob-footer { background: #F5F0FF !important; border-color: rgba(68,49,153,.1); }

  .ob-headline { color: #443199; }
  .ob-field-label { color: #443199; }
  .ob-reward__headline { color: #443199; }
  .ob-reward__sub { color: rgba(26,29,46,.7); }
  .ob-reward__bar-wrap { background: rgba(193,51,131,.2); }

  .ob-chip { background: rgba(255,255,255,.8); border-color: rgba(68,49,153,.2); color: #1A1D2E; }
  .ob-chip--selected { background: #C13383; border-color: #C13383; color: #ffffff; }

  .ob-toggle-row  { background: rgba(255,255,255,.7); border-color: rgba(68,49,153,.2); }
  .ob-toggle-opt  { color: rgba(26,29,46,.55); }
  .ob-toggle-opt--active { background: #C13383; color: #ffffff; }

  .ob-input { background: rgba(255,255,255,.85); border-color: rgba(68,49,153,.2); color: #1A1D2E; }
  .ob-input::placeholder { color: rgba(26,29,46,.45); }

  .ob-search { background: rgba(255,255,255,.85); border-color: rgba(68,49,153,.2); }
  .ob-search input { color: #1A1D2E; }

  .ob-provider-btn { background: rgba(255,255,255,.85); border-color: rgba(68,49,153,.2); color: #1A1D2E; }
  .ob-photo-area { border-color: rgba(193,51,131,.4); }
}

/* ── Accessibility: visible keyboard focus (overrides the outline:none above) ── */
/* onboarding.css loads after main.css, so these re-assert a focus ring for the
   onboarding controls that explicitly cleared it. Keyboard-only via :focus-visible. */
.ob-input:focus-visible,
.ob-search input:focus-visible {
  outline: 2px solid #C13383;
  outline-offset: 1px;
  border-color: #C13383;
}
.ob-chip:focus-visible,
.ob-cta:focus-visible,
.ob-photo-area:focus-visible,
.ob-header__back:focus-visible {
  outline: 2px solid #C13383;
  outline-offset: 2px;
}