/* PawTrack - Trust & visibility components.
   Reusable pieces that make the booking lifecycle visible, verification specific,
   reviews credible, and the parent's open loops clear. Link AFTER parent.css / pro.css.
   No left-border accent stripes, no gradients - grouping comes from borders + spacing,
   per the PawTrack design guide. */

/* ============================================================
   1. Booking lifecycle timeline
   Requested → Accepted → Paid → Arrival confirmed → Completed → Reviewed.
   Audience-aware via --tl-accent: terracotta for parents, teal (--pro) for pros.
   ============================================================ */
.p-timeline {
  --tl-accent: var(--petparent);
  --tl-accent-soft: var(--pt-warm-soft);
  list-style: none; margin: 0; padding: 0;
}
.p-timeline--pro { --tl-accent: var(--petprofessional); --tl-accent-soft: var(--pt-cool-soft); }

.p-timeline__step { position: relative; display: grid; grid-template-columns: 24px 1fr; column-gap: 14px; padding-bottom: 18px; }
.p-timeline__step:last-child { padding-bottom: 0; }

.p-timeline__rail { position: relative; display: flex; justify-content: center; }
.p-timeline__dot {
  width: 24px; height: 24px; border-radius: 50%; z-index: 1;
  display: grid; place-items: center;
  background: var(--pt-surface); border: 2px solid var(--pt-border-strong); color: var(--pt-muted);
}
.p-timeline__dot i { width: 13px; height: 13px; }
/* connecting line between dots */
.p-timeline__step:not(:last-child) .p-timeline__rail::after {
  content: ""; position: absolute; top: 24px; bottom: -18px;
  width: 2px; background: var(--pt-border);
}

.p-timeline__body { padding-top: 2px; min-width: 0; }
.p-timeline__title { font-weight: 700; color: var(--pt-ink); font-size: 14px; line-height: 1.3; }
.p-timeline__meta { font-size: 13px; color: var(--pt-muted); margin-top: 1px; }

/* done */
.p-timeline__step.is-done .p-timeline__dot { background: var(--pt-success); border-color: var(--pt-success); color: #fff; }
.p-timeline__step.is-done .p-timeline__rail::after { background: var(--pt-success); }
/* current */
.p-timeline__step.is-current .p-timeline__dot { border-color: var(--tl-accent); color: var(--tl-accent); box-shadow: 0 0 0 4px var(--tl-accent-soft); }
.p-timeline__step.is-current .p-timeline__title { color: var(--tl-accent); }
/* upcoming */
.p-timeline__step.is-upcoming .p-timeline__title { color: var(--pt-muted); font-weight: 600; }

/* ============================================================
   2. Verification checklist - "what was verified" on a profile.
   Shows the fact each check passed (+ date), never the private document.
   ============================================================ */
.p-verify { display: grid; gap: 12px; }
.p-verify__item { display: flex; gap: 11px; align-items: flex-start; }
.p-verify__icon {
  width: 24px; height: 24px; border-radius: 50%; flex: none; margin-top: 1px;
  display: grid; place-items: center;
  background: var(--pt-success-soft); color: var(--pt-success);
}
.p-verify__icon i { width: 14px; height: 14px; }
.p-verify__label { font-weight: 700; color: var(--pt-ink); font-size: 14px; }
.p-verify__sub { color: var(--pt-muted); font-size: 13px; margin-top: 1px; }
.p-verify__item--pending .p-verify__icon { background: var(--pt-pending-soft); color: var(--pt-pending); }

/* Trust badge - distinct from a status pill. Used for "Verified pro",
   so the info status pill is freed up to mean a booking state only. */
.p-trust-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800;
  color: var(--petprofessional-deep); background: var(--pt-cool-soft);
  border: 1px solid rgba(21, 128, 140, 0.24); border-radius: var(--radius-pill);
  padding: 4px 11px;
}
.p-trust-badge i { width: 14px; height: 14px; }
.p-trust-badge { white-space: nowrap; }

/* ============================================================
   3. Verified-booking review marker - credibility on the review wall.
   ============================================================ */
.p-verified {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: var(--pt-success); white-space: nowrap;
}
.p-verified i { width: 13px; height: 13px; }

/* ============================================================
   4. "Needs your attention" - parent open-loop surface.
   ============================================================ */
.p-attention { display: grid; gap: 10px; }
.p-attention__item {
  display: flex; gap: 14px; align-items: center;
  padding: 14px 16px; background: var(--pt-surface);
  border: 1px solid var(--pt-border); border-radius: var(--radius-lg);
}
.p-attention__icon { width: 38px; height: 38px; border-radius: 42% 58% 55% 45% / 50% 44% 56% 50%; flex: none; display: grid; place-items: center; }
.p-attention__item:nth-child(odd) .p-attention__icon { transform: rotate(-8deg); }
.p-attention__item:nth-child(even) .p-attention__icon { transform: rotate(8deg); }
.p-attention__icon i { width: 19px; height: 19px; }
.p-attention__icon--warn { background: var(--pt-warning-soft); color: var(--pt-warning); }
.p-attention__icon--act  { background: var(--pt-warm-soft);    color: var(--petparent-deep); }
.p-attention__icon--info { background: var(--pt-cool-soft);    color: var(--petprofessional-deep); }
.p-attention__body { flex: 1; min-width: 0; }
.p-attention__title { font-weight: 700; color: var(--pt-ink); font-size: 14px; }
.p-attention__sub { font-size: 13px; color: var(--pt-ink-soft); margin-top: 1px; }
.p-attention__item .pt-button { flex: none; }

/* Cleared state - render INSTEAD of the items when nothing needs the user.
   Calm and reassuring, not alarming: dashed border, muted surface, success tick. */
.p-attention__empty {
  display: flex; gap: 14px; align-items: center;
  padding: 18px 16px; background: var(--pt-bg-soft);
  border: 1px dashed var(--pt-border); border-radius: var(--radius-lg);
}
.p-attention__empty-icon {
  width: 38px; height: 38px; border-radius: var(--radius-md); flex: none;
  display: grid; place-items: center;
  background: var(--pt-success-soft); color: var(--pt-success);
}
.p-attention__empty-icon i { width: 19px; height: 19px; }

/* ============================================================
   5. Refund line - non-refundable rows read muted with a strike on the value.
   Reuses .p-break; this just styles the retained / refunded rows.
   ============================================================ */
.p-break__row--muted { color: var(--pt-muted); }
.p-break__row--muted strong { color: var(--pt-muted); font-weight: 600; text-decoration: line-through; }
.p-break__refund { border-top: 1px solid var(--pt-border); padding-top: 11px; display: flex; justify-content: space-between; font-weight: 800; color: var(--pt-success); font-size: 17px; }

/* ============================================================
   6. Messaging trust cues - context + safety inside a thread.
   The thread is where off-platform scams happen; these keep the
   real booking visible and gently keep money/codes on PawTrack.
   ============================================================ */
.p-msg__head-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Let the thread column shrink below its content's min-content width
   (the nowrap context bar would otherwise force horizontal clipping). */
.p-msg__thread { min-width: 0; }
.p-msg__body { overflow-x: hidden; }

/* Pinned booking-context bar under the thread head. */
.p-msg__context {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 8px;
  padding: 11px 18px; border-bottom: 1px solid var(--pt-border);
  background: var(--pt-cool-soft);
}
.p-msg__context-icon {
  width: 34px; height: 34px; border-radius: var(--radius-md); flex: none;
  display: grid; place-items: center;
  background: var(--pt-surface); color: var(--petprofessional-deep);
  border: 1px solid var(--pt-border);
}
.p-msg__context-icon i { width: 17px; height: 17px; }
.p-msg__context-main { flex: 1 1 150px; min-width: 0; }
.p-msg__context-title { font-weight: 700; font-size: 13px; color: var(--pt-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-msg__context-meta { font-size: 12px; color: var(--pt-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-msg__context .pt-status { flex: none; }
.p-msg__context a { font-size: 13px; font-weight: 600; color: var(--petprofessional-deep); text-decoration: none; white-space: nowrap; margin-left: auto; }
.p-msg__context a:hover { text-decoration: underline; }

/* Calm safety line, centred in the conversation. Informative, not alarming. */
.p-msg__safety {
  align-self: center; max-width: 86%; text-align: center;
  display: inline-flex; gap: 7px; align-items: center;
  font-size: 12px; color: var(--pt-muted);
  background: var(--pt-surface); border: 1px solid var(--pt-border);
  border-radius: var(--radius-pill); padding: 6px 14px; margin: 2px 0;
}
.p-msg__safety i { width: 14px; height: 14px; flex: none; color: var(--pt-success); }

@media (max-width: 520px) {
  .p-attention__item { flex-wrap: wrap; }
  .p-attention__item .pt-button { width: 100%; }
  .p-msg__context a { display: none; }
}

/* ============================================================
   7. Inbox rows - triage from the list: who (verified), which
   booking, when, and what's unread. Keeps the conversation tied
   to a real visit before you even open it.
   ============================================================ */
.p-msg__item { align-items: flex-start; }
.p-msg__item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.p-msg__item-top { display: flex; align-items: center; gap: 6px; }
.p-msg__verified { width: 14px; height: 14px; color: var(--pt-success); flex: none; }
.p-msg__time { margin-left: auto; font-size: 11px; color: var(--pt-muted); font-family: var(--font-mono); flex: none; white-space: nowrap; }
.p-msg__unread { width: 8px; height: 8px; border-radius: 50%; background: var(--petparent); flex: none; margin-left: 6px; }
.p-msg__tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--pt-muted); }
.p-msg__tag i { width: 13px; height: 13px; flex: none; }
.p-msg__item.has-unread .p-msg__prev { color: var(--pt-ink); font-weight: 600; }

/* ============================================================
   8. Off-platform nudge - active protection above the compose bar.
   Gentle while typing (.is-on); escalates to a decision on send
   (.is-blocking reveals the actions). Amber = caution, not error.
   ============================================================ */
.p-msg__nudge {
  display: none; gap: 11px; align-items: flex-start;
  margin: 0 14px; padding: 11px 13px;
  background: var(--pt-warning-soft);
  border: 1px solid color-mix(in srgb, var(--pt-warning) 38%, transparent);
  border-radius: var(--radius-md);
}
.p-msg__nudge.is-on { display: flex; }
.p-msg__nudge .lead { width: 18px; height: 18px; flex: none; color: var(--pt-warning); margin-top: 1px; }
.p-msg__nudge-body { flex: 1; min-width: 0; }
.p-msg__nudge-title { font-weight: 700; font-size: 13px; color: var(--pt-ink); }
.p-msg__nudge-text { font-size: 12px; color: var(--pt-ink-soft); margin-top: 1px; line-height: 1.4; }
.p-msg__nudge-actions { display: none; gap: 8px; margin-top: 10px; }
.p-msg__nudge.is-blocking .p-msg__nudge-actions { display: flex; }

/* Flagged message - the warning travels WITH the message, so the
   recipient is protected too, not just the sender. Aligns to whichever
   side sent it (me / them) and tucks under the bubble. */
.p-flag {
  max-width: 80%;
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 12px; line-height: 1.45; color: var(--pt-ink-soft);
  background: var(--pt-warning-soft);
  border: 1px solid color-mix(in srgb, var(--pt-warning) 38%, transparent);
  border-radius: var(--radius-md);
  padding: 9px 12px; margin-top: -4px;
}
.p-flag i { width: 15px; height: 15px; flex: none; color: var(--pt-warning); margin-top: 1px; }
.p-flag strong { color: var(--pt-ink); font-weight: 700; }
.p-flag--them { align-self: flex-start; }
.p-flag--me { align-self: flex-end; }
.p-flag__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.p-flag__actions { display: flex; }
.p-flag__report {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12px; font-weight: 700;
  color: var(--pt-warning); background: none; border: 0; padding: 0; cursor: pointer;
}
.p-flag__report i { width: 13px; height: 13px; color: var(--pt-warning); margin: 0; }
.p-flag__report:hover { text-decoration: underline; }
.p-flag.is-reported { background: var(--pt-success-soft); border-color: color-mix(in srgb, var(--pt-success) 38%, transparent); }
.p-flag.is-reported i { color: var(--pt-success); }

/* ============================================================
   9. Cancellation tier ladder - the refund policy shown at the
   cancel moment. Highlights the tier that applies right now, and
   names how a late cancellation still pays the professional, so
   the decision is transparent and fair to both sides.
   ============================================================ */
.p-cxtiers { display: grid; gap: 6px; margin: 12px 0 0; }
.p-cxtiers__row {
  display: flex; gap: 12px; align-items: baseline; justify-content: space-between;
  font-size: 13px; padding: 9px 12px;
  border: 1px solid var(--pt-border); border-radius: var(--radius-md);
  background: var(--pt-surface);
}
.p-cxtiers__when { font-weight: 600; color: var(--pt-ink); }
.p-cxtiers__what { color: var(--pt-ink-soft); text-align: right; }
.p-cxtiers__row--active { border-color: color-mix(in srgb, var(--pt-success) 42%, transparent); background: var(--pt-success-soft); }
.p-cxtiers__row--active .p-cxtiers__what { color: var(--pt-success); font-weight: 700; }
.p-cxtiers__now { font-weight: 700; color: var(--pt-success); }