/* =========================================================================
   Tutok — Booking surface styles (Confirm + Matching)
   Owned by the booking screen agent. All classes prefixed bk- to avoid
   collisions. Shared classes are styled by components.css; only screen-
   specific treatment lives here. Tokens only — no raw hex / px where a
   token exists.
   ========================================================================= */

/* =========================================================================
   CONFIRM — layout rhythm
   The footer-cta is sticky; give the scroll region a touch more bottom space
   so the fare/reassurance never hides behind it.
   ========================================================================= */
.bk-screen {
  padding-bottom: var(--s-3);
}
.bk-screen .section-title {
  margin: var(--s-5) 0 var(--s-3);
}

/* =========================================================================
   CONFIRM — tutor hero card
   ========================================================================= */
.bk-hero {
  padding: var(--s-2) var(--s-2) var(--s-3);
  overflow: hidden;
  background:
    radial-gradient(120% 130% at 100% 0%, color-mix(in srgb, var(--brand-soft) 70%, transparent) 0%, transparent 52%),
    var(--surface);
}
.bk-hero__main {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  text-align: left;
  padding: var(--s-2);
  border-radius: var(--r-md);
  transition: background var(--dur-fast) var(--ease);
}
.bk-hero__main:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.bk-hero__main:active { background: var(--surface-2); }

.bk-hero__avatar { position: relative; flex: 0 0 auto; }
.bk-hero__verify {
  position: absolute;
  right: -3px; bottom: -3px;
  width: 21px; height: 21px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--grad-brand);
  border: 2.5px solid var(--surface);
}
.bk-hero__verify svg { width: 12px; height: 12px; }

.bk-hero__body { flex: 1 1 auto; min-width: 0; }
.bk-hero__name-row { display: flex; align-items: center; gap: 5px; }
.bk-hero__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: -.01em;
  color: var(--ink);
}
.bk-hero__headline {
  display: block;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  font-weight: 600;
  margin-top: 1px;
}
.bk-hero__rating { display: flex; align-items: center; gap: 5px; margin-top: 5px; }
.bk-hero__rating-num { font-weight: 800; font-size: var(--fs-sm); color: var(--ink); }
.bk-hero__reviews { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }

.bk-hero__chev { color: var(--muted); flex: 0 0 auto; }

.bk-hero__foot {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-2);
  padding: var(--s-3) var(--s-2) 0;
  border-top: 1px solid var(--line);
}
.bk-hero__rate { margin-left: auto; }
.bk-hero__rate .price__amount { font-size: var(--fs-h3); }

/* =========================================================================
   CONFIRM — mode segmented wrapper
   ========================================================================= */
.bk-mode { margin-top: var(--s-1); }

/* =========================================================================
   CONFIRM — home-visit address card
   ========================================================================= */
.bk-address {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  text-align: left;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--brand-soft) 35%, transparent), color-mix(in srgb, var(--brand-soft) 35%, transparent)),
    var(--surface);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 22%, var(--line));
  transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  animation: bkSlideIn var(--dur) var(--ease);
}
.bk-address:hover { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand) 40%, var(--line)); }
.bk-address:active { transform: scale(.99); }
.bk-address__icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: #fff;
  background: var(--grad-brand);
}
.bk-address__icon svg { width: 20px; height: 20px; }
.bk-address__body { flex: 1 1 auto; min-width: 0; }
.bk-address__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.bk-address__value {
  display: block;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink);
  margin-top: 2px;
}
.bk-address__edit {
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand);
}

/* =========================================================================
   CONFIRM — details list
   ========================================================================= */
.bk-list {
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.bk-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 62px;
  padding: var(--s-3) var(--s-4);
  text-align: left;
  background: var(--surface);
  transition: background var(--dur-fast) var(--ease);
}
.bk-row + .bk-row { border-top: 1px solid var(--line); }
.bk-row:hover { background: var(--surface-2); }
.bk-row:active { background: var(--surface-3); }
.bk-row__icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 1.15rem;
  line-height: 1;
}
.bk-row__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.bk-row__title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
}
.bk-row__value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink);
}
.bk-row__emoji { font-size: 1.05em; line-height: 1; }
.bk-row__chev { flex: 0 0 auto; color: var(--muted); }

/* =========================================================================
   CONFIRM — payment row (full-width, designed selected affordance)
   ========================================================================= */
.bk-pay {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-1);
  text-align: left;
  transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.bk-pay:hover { box-shadow: var(--sh-2); }
.bk-pay:active { transform: scale(.995); }
.bk-pay__emoji {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 1.35rem;
}
.bk-pay__body { flex: 1 1 auto; min-width: 0; }
.bk-pay__label { display: block; font-weight: 700; font-size: var(--fs-body); color: var(--ink); }
.bk-pay__detail { display: block; font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }
.bk-pay__change {
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
}

/* =========================================================================
   CONFIRM — promo
   ========================================================================= */
.bk-promo { display: flex; flex-direction: column; gap: var(--s-3); }
.bk-promo__form { display: block; }
.bk-promo__input { padding-right: 6px; }
.bk-promo__apply { flex: 0 0 auto; }

.bk-promo__chips {
  margin: 0 calc(-1 * var(--s-4));
  padding: var(--s-1) var(--s-4) var(--s-2);
}
.bk-promo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 14px 7px 11px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--brand-ink);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1.5px transparent;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.bk-promo-chip__icon { display: inline-flex; color: var(--brand); }
.bk-promo-chip:hover { background: color-mix(in srgb, var(--brand-soft) 70%, var(--surface)); }
.bk-promo-chip:active { transform: scale(.95); }
.bk-promo-chip.is-applied {
  color: #fff;
  background: var(--grad-success);
  box-shadow: var(--sh-1);
}
.bk-promo-chip.is-applied .bk-promo-chip__icon { color: #fff; }

.bk-promo-applied {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--success-soft);
  color: var(--success);
  font-size: var(--fs-sm);
  animation: bkSlideIn var(--dur) var(--ease);
}
.bk-promo-applied__icon {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--success);
}
.bk-promo-applied__text { color: var(--ink-soft); }
.bk-promo-applied__text strong { color: var(--success); font-weight: 800; }

/* =========================================================================
   CONFIRM — reassurance line
   ========================================================================= */
.bk-reassure {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--muted);
  font-weight: 500;
  line-height: var(--lh-snug);
}
.bk-reassure__icon { flex: 0 0 auto; color: var(--success); display: inline-flex; }

/* =========================================================================
   CONFIRM — sticky confirm button label sizing
   ========================================================================= */
.bk-confirm-btn { font-size: var(--fs-body); }
.bk-confirm-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* On very wide phone frames give the footer a 2-part look; on narrow, the
   total chip can crowd — hide the standalone total and let the button carry it. */
@media (max-width: 360px) {
  .footer-cta .footer-cta__info { display: none; }
}

/* =========================================================================
   MATCHING — shared shell (full-screen, centered, nav hidden by platform)
   ========================================================================= */
.bk-match {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: var(--s-5) var(--s-5) var(--s-6);
  overflow: hidden;
}
/* Atmospheric brand glow behind the whole searching/matched stage */
.bk-match::before {
  content: "";
  position: absolute;
  top: -10%;
  left: 50%;
  width: min(560px, 130%);
  height: 60%;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 40%, rgba(124,58,237,.20), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.bk-match__top { position: relative; z-index: 1; }
.bk-match__stage {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
}
.bk-match__foot { position: relative; z-index: 1; margin-top: var(--s-4); }
.bk-match__foot--ghost { display: grid; place-items: center; }
.bk-match__rate { font-size: var(--fs-sm); font-weight: 600; }

/* Status pill at the top */
.bk-match__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--sh-1);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.bk-match__pill svg { stroke-width: 2.4; }
.bk-match__pill--ok { color: var(--success); }
.bk-match__pill--ok svg { color: var(--success); }
.bk-match__pulse {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 60%, transparent);
  animation: bkDot 1.6s var(--ease-io) infinite;
}

/* Titles + sub */
.bk-match__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  letter-spacing: -.02em;
  line-height: var(--lh-tight);
  color: var(--ink);
  margin-top: var(--s-2);
}
.bk-match__title-accent {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--brand-2);
}
.bk-match__sub {
  font-size: var(--fs-body);
  color: var(--muted);
  max-width: 30ch;
  line-height: var(--lh-body);
}

/* =========================================================================
   MATCHING — radar (searching)
   ========================================================================= */
.bk-radar {
  position: relative;
  width: clamp(220px, 64vw, 280px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  margin: var(--s-2) 0 var(--s-3);
}
.bk-radar__ring {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--brand) 35%, transparent);
  opacity: 0;
}
.bk-radar__ring--1 { animation: bkRadar 2.8s var(--ease-io) infinite; }
.bk-radar__ring--2 { animation: bkRadar 2.8s var(--ease-io) infinite; animation-delay: .8s; }
.bk-radar__ring--3 { animation: bkRadar 2.8s var(--ease-io) infinite; animation-delay: 1.6s; }

/* Static guide rings so the area reads as a "radar" even between pulses */
.bk-radar::before,
.bk-radar::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--surface-3);
}
.bk-radar::before { inset: 14%; }
.bk-radar::after  { inset: 30%; }

/* Sweeping conic beam */
.bk-radar__sweep {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    color-mix(in srgb, var(--brand) 26%, transparent) 50deg,
    transparent 95deg);
  -webkit-mask: radial-gradient(circle, transparent 18%, #000 19%);
  mask: radial-gradient(circle, transparent 18%, #000 19%);
  animation: bkSweep 2.6s linear infinite;
}

.bk-radar__core {
  position: relative;
  z-index: 3;
  width: 84px; height: 84px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--sh-2), 0 0 0 6px color-mix(in srgb, var(--brand-soft) 80%, transparent);
  animation: bkCoreBeat 2.2s var(--ease-io) infinite;
}
.bk-radar__core svg { filter: drop-shadow(0 3px 6px rgba(124,58,237,.4)); }

/* Orbiting candidate faces */
.bk-radar__candidate {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(20,18,31,.18), 0 0 0 2.5px var(--surface);
  animation: bkFloat 3.4s var(--ease-io) infinite;
}
.bk-radar__candidate .avatar { display: block; }
.bk-radar__candidate--a { top: 6%;  left: 24%; animation-delay: 0s;   }
.bk-radar__candidate--b { top: 20%; right: 6%; animation-delay: .5s;  }
.bk-radar__candidate--c { bottom: 12%; left: 8%; animation-delay: 1s; }
.bk-radar__candidate--d { bottom: 4%; right: 22%; animation-delay: 1.5s; }

/* =========================================================================
   MATCHING — step list (searching)
   ========================================================================= */
.bk-steps {
  display: inline-flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-3);
  text-align: left;
}
.bk-steps__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
}
.bk-steps__item svg { color: var(--surface-3); }
.bk-steps__item.is-done { color: var(--ink-soft); }
.bk-steps__item.is-done svg { color: var(--success); }
.bk-steps__item.is-active { color: var(--ink); font-weight: 700; }
.bk-steps__spin {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid var(--surface-3);
  border-top-color: var(--brand);
  animation: bkSpin .7s linear infinite;
}

/* =========================================================================
   MATCHING — matched success
   ========================================================================= */
.bk-matched__burst {
  position: relative;
  width: clamp(200px, 60vw, 240px);
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  margin: var(--s-1) 0 var(--s-2);
}
.bk-matched__halo {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--success) 26%, transparent), transparent 68%);
  animation: bkHalo var(--dur-slow) var(--ease) both;
}
.bk-matched__ring {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--success) 55%, transparent);
  animation: bkSuccessRing 900ms var(--ease) both;
}
.bk-matched__avatar {
  position: relative;
  z-index: 2;
  border-radius: 50%;
  box-shadow: var(--sh-3), 0 0 0 5px var(--surface);
  animation: bkPop var(--dur-slow) var(--ease) both;
}
.bk-matched__avatar .avatar { display: block; }
.bk-matched__check {
  position: absolute;
  right: 4px; bottom: 4px;
  z-index: 3;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--grad-success);
  border: 3px solid var(--surface);
  box-shadow: var(--sh-2);
  animation: bkPop var(--dur-slow) var(--ease) 120ms both;
}
.bk-matched__check svg { stroke-width: 3; }

.bk-matched__stats {
  display: inline-flex;
  gap: var(--s-2);
  margin-top: var(--s-1);
}

.bk-matched__connect {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--sh-1);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--brand-ink);
}
.bk-matched__dots { display: inline-flex; gap: 4px; }
.bk-matched__dots i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  animation: bkBounce 1.2s var(--ease-io) infinite;
}
.bk-matched__dots i:nth-child(2) { animation-delay: .15s; }
.bk-matched__dots i:nth-child(3) { animation-delay: .3s; }

/* =========================================================================
   Keyframes
   ========================================================================= */
@keyframes bkRadar {
  0%   { transform: scale(.26); opacity: .65; }
  80%  { opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes bkSweep { to { transform: rotate(360deg); } }
@keyframes bkCoreBeat {
  0%, 100% { transform: scale(1); box-shadow: var(--sh-2), 0 0 0 6px color-mix(in srgb, var(--brand-soft) 80%, transparent); }
  50%      { transform: scale(1.06); box-shadow: var(--sh-2), 0 0 0 11px color-mix(in srgb, var(--brand-soft) 40%, transparent); }
}
@keyframes bkFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes bkDot {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); }
  70%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 0%, transparent); }
}
@keyframes bkSpin { to { transform: rotate(360deg); } }
@keyframes bkBounce {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(-5px); opacity: 1; }
}
@keyframes bkPop {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes bkHalo {
  0% { transform: scale(.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes bkSuccessRing {
  0%   { transform: scale(.5); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: scale(1.18); opacity: 0; }
}
@keyframes bkSlideIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================================
   Reduced motion — calm, static fallback (no spin/sweep/float/pulse)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .bk-radar__ring,
  .bk-radar__sweep { animation: none; opacity: 0; }
  .bk-radar__core { animation: none; }
  .bk-radar__candidate { animation: none; }
  .bk-radar::before { inset: 12%; border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
  .bk-radar::after { inset: 28%; border-color: color-mix(in srgb, var(--brand) 18%, transparent); }
  .bk-steps__spin { animation: none; border-top-color: var(--brand); }
  .bk-match__pulse { animation: none; }
  .bk-matched__halo,
  .bk-matched__ring,
  .bk-matched__avatar,
  .bk-matched__check { animation: none; opacity: 1; transform: none; }
  .bk-matched__dots i { animation: none; opacity: 1; }
  .bk-address,
  .bk-promo-applied { animation: none; }
}

/* =========================================================================
   Large-frame polish (desktop phone frame ≥ 480px keeps the bezel)
   ========================================================================= */
@media (min-width: 481px) {
  .bk-match__sub { max-width: 32ch; }
}