/* ═══════════════════════════════════════════════════════════════
   Freedom — Status Flow Timeline v2.0
   Timeline vertical animada para cliente e prestador.
   ═══════════════════════════════════════════════════════════════ */

/* ── Wrapper da timeline ──────────────────────────────────────── */
.mc-timeline {
  position: relative;
  padding: 16px 0 4px;
  margin: 12px 0 0;
}

/* ── Linha de trilho vertical ─────────────────────────────────── */
.mc-timeline::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: var(--bd2);
  border-radius: 2px;
}

/* ── Linha de progresso animada ───────────────────────────────── */
.mc-timeline-progress {
  position: absolute;
  left: 17px;
  top: 24px;
  width: 2px;
  background: linear-gradient(180deg, var(--pr) 0%, var(--pr-dk) 100%);
  border-radius: 2px;
  height: 0;
  transition: height 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Variante verde para prestador */
.mc-timeline--prestador .mc-timeline-progress {
  background: linear-gradient(180deg, var(--green) 0%, var(--green-dk) 100%);
}

/* ── Cada step ────────────────────────────────────────────────── */
.mc-tl-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 0 18px 0;
  position: relative;
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

/* Animação de entrada em cascata */
.mc-tl-step.mc-tl-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── Ícone/dot ────────────────────────────────────────────────── */
.mc-tl-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  border: 2px solid var(--bd2);
  background: var(--surface);
  color: var(--tx4);
  position: relative;
  z-index: 1;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

/* Step concluído — cliente */
.mc-tl-step.done .mc-tl-dot {
  background: var(--pr-lt);
  border-color: var(--pr);
  color: var(--pr);
}

/* Step ativo — cliente */
.mc-tl-step.active .mc-tl-dot {
  background: var(--pr);
  border-color: var(--pr);
  color: #fff;
  box-shadow: 0 0 0 4px var(--pr-glow), 0 4px 12px rgba(0,201,184,.3);
  transform: scale(1.08);
  animation: mc-pulse-or 2.2s ease-in-out infinite;
}

/* Step concluído — prestador */
.mc-timeline--prestador .mc-tl-step.done .mc-tl-dot {
  background: var(--green-lt);
  border-color: var(--green);
  color: var(--green-dk);
}

/* Step ativo — prestador */
.mc-timeline--prestador .mc-tl-step.active .mc-tl-dot {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(16,185,129,.14), 0 4px 12px rgba(16,185,129,.3);
  animation: mc-pulse-green 2.2s ease-in-out infinite;
}

/* ── Checkmark para etapas concluídas ─────────────────────────── */
.mc-tl-step.done .mc-tl-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10l3.5 3.5L15 7' stroke='%23FF5A1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;
}

.mc-timeline--prestador .mc-tl-step.done .mc-tl-dot::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10l3.5 3.5L15 7' stroke='%23059669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;
}

/* Esconde ícone quando done (o ::after assume) */
.mc-tl-step.done .mc-tl-icon { display: none; }

/* SVG inline nos dots */
.mc-tl-dot svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: var(--tx3);
  transition: stroke .3s ease;
}
.mc-tl-step.active .mc-tl-dot svg { stroke: #fff; }
.mc-tl-step.done   .mc-tl-dot svg { display: none; }

/* ── Conteúdo textual ─────────────────────────────────────────── */
.mc-tl-content {
  padding-top: 7px;
  flex: 1;
}

.mc-tl-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx3);
  line-height: 1.2;
  transition: color 0.3s ease;
}

.mc-tl-step.done .mc-tl-label {
  color: var(--tx2);
}

.mc-tl-step.active .mc-tl-label {
  color: var(--pr-dk);
  font-weight: 700;
  font-size: 13.5px;
}

.mc-timeline--prestador .mc-tl-step.active .mc-tl-label {
  color: var(--green-dk);
}

.mc-tl-sub {
  font-size: 11.5px;
  color: var(--tx4);
  margin-top: 2px;
  font-weight: 400;
}

.mc-tl-step.active .mc-tl-sub {
  color: var(--tx3);
}

/* ── Badge "atual" ────────────────────────────────────────────── */
.mc-tl-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
  background: var(--pr-lt2);
  color: var(--pr-dk);
}

.mc-timeline--prestador .mc-tl-badge {
  background: var(--green-lt);
  color: var(--green-dk);
}

/* ── Barras de estado especial ────────────────────────────────── */
.mc-sf-cancelled-bar,
.mc-sf-reagend-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
}

.mc-sf-cancelled-bar {
  background: var(--red-lt);
  color: var(--red-dk);
  border: 1px solid #fecaca;
}

.mc-sf-reagend-bar {
  background: var(--amber-lt);
  color: var(--amber-dk);
  border: 1px solid #fde68a;
}

/* ── Animações de pulso ───────────────────────────────────────── */
@keyframes mc-pulse-or {
  0%, 100% { box-shadow: 0 0 0 4px var(--pr-glow), 0 4px 12px rgba(0,201,184,.3); }
  50%       { box-shadow: 0 0 0 8px rgba(0,201,184,.08), 0 4px 16px rgba(0,201,184,.4); }
}

@keyframes mc-pulse-green {
  0%, 100% { box-shadow: 0 0 0 4px rgba(16,185,129,.14), 0 4px 12px rgba(16,185,129,.3); }
  50%       { box-shadow: 0 0 0 8px rgba(16,185,129,.07), 0 4px 16px rgba(16,185,129,.4); }
}

/* ── Modo compacto (cards menores) ────────────────────────────── */
.mc-timeline.mc-tl-compact {
  padding: 10px 0 2px;
}

.mc-timeline.mc-tl-compact .mc-tl-step {
  padding-bottom: 12px;
}

.mc-timeline.mc-tl-compact .mc-tl-dot {
  width: 28px;
  height: 28px;
  font-size: 13px;
}

.mc-timeline.mc-tl-compact::before,
.mc-timeline.mc-tl-compact .mc-timeline-progress {
  left: 13px;
  top: 18px;
  bottom: 18px;
}

.mc-timeline.mc-tl-compact .mc-tl-sub { display: none; }