body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #1a1d21;
}

main {
  flex: 1;
}

/* ── Search card ── */
.search-card {
  background: #2b3035;
  border: 1px solid #495057;
  border-radius: 14px;
  padding: 28px 32px 20px;
  max-width: 640px;
  margin: 0 auto 32px;
}

.search-card .form-control:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.search-card .form-control::placeholder {
  font-size: 0.82rem;
  color: #6c757d;
}

/* ── Result wrapper ── */
.result-wrapper {
  max-width: 640px;
  margin: 0 auto;
}

/* ── Result card ── */
.result-card {
  background: #2b3035;
  border: 1px solid #495057;
  border-radius: 14px;
  padding: 28px;
  animation: fadeInUp 0.45s ease;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Info rows ── */
.info-block {
  border-bottom: 1px solid #495057;
  padding-bottom: 16px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #373b40;
  gap: 12px;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  color: #adb5bd;
  font-size: 0.88rem;
  white-space: nowrap;
}

.info-value {
  color: #f8f9fa;
  font-size: 0.88rem;
  font-weight: 500;
  text-align: right;
}

/* ── Section label ── */
.divider-label {
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  color: #6c757d;
  text-transform: uppercase;
  margin: 20px 0 8px;
  position: relative;
}

.divider-label::before,
.divider-label::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 28%;
  height: 1px;
  background: #495057;
}

.divider-label::before { left: 0; }
.divider-label::after  { right: 0; }

/* ── Stepper ── */
.stepper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px 0 8px;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.step-connector {
  position: relative;
  flex: 1;
  height: 4px;
  background: #495057;
  align-self: center;
  margin-bottom: 36px;
  border-radius: 2px;
  overflow: hidden;
}

/* Trilho preenchido com animação de avanço */
.step-connector::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #0dcaf0, #6f42c1, #198754);
  transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.step-connector.active::after {
  width: 100%;
}

.step-connector-skel {
  flex: 1;
  height: 4px;
  align-self: center;
  margin-bottom: 36px;
  border-radius: 2px;
}

.step-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #343a40;
  border: 3px solid #495057;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  margin-bottom: 10px;
  color: #6c757d;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.step-label {
  font-size: 0.78rem;
  text-align: center;
  color: #6c757d;
  font-weight: 500;
  max-width: 90px;
  transition: color 0.3s;
}

/* Step: alcançado (etapa concluída ou atual) — usa a cor da própria etapa */
.step.reached .step-icon {
  background: var(--step-color, #0d6efd);
  border-color: var(--step-color, #0d6efd);
  color: #fff;
  box-shadow: 0 6px 18px -4px var(--step-color, #0d6efd);
  animation: stepPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.step.reached .step-label {
  color: #f8f9fa;
  font-weight: 600;
}

/* Step: etapa atual — pulso contínuo na cor da etapa */
.step.current .step-icon {
  animation: stepPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), stepPulse 2s ease-in-out 0.45s infinite;
}

.step.current .step-label {
  color: #fff;
  font-weight: 700;
}

@keyframes stepPop {
  0%   { transform: scale(0.5); opacity: 0.4; }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes stepPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--step-color, #0d6efd) 55%, transparent); }
  70%  { box-shadow: 0 0 0 16px color-mix(in srgb, var(--step-color, #0d6efd) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--step-color, #0d6efd) 0%, transparent); }
}

/* Status badge */
.status-badge {
  font-size: 0.95rem !important;
  letter-spacing: 0.5px;
  border-radius: 50rem;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.6);
  animation: badgeIn 0.5s ease;
}

/* Descrição da etapa atual */
.status-desc {
  animation: fadeInUp 0.5s ease 0.1s both;
}

.status-desc-text {
  color: #ced4da;
  font-size: 0.9rem;
  max-width: 460px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Etapa 3: destaque do prazo de entrega */
.prazo-highlight {
  display: block;
  margin-top: 10px;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(111, 66, 193, 0.16);
  border: 1px solid rgba(111, 66, 193, 0.45);
  color: #c9b6ec;
  font-weight: 600;
  font-size: 0.88rem;
  animation: prazoGlow 2.2s ease-in-out infinite;
}

@keyframes prazoGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(111, 66, 193, 0); }
  50%      { box-shadow: 0 0 14px 1px rgba(111, 66, 193, 0.35); }
}

/* Etapa 4: data de entrega */
.entrega-data {
  display: block;
  margin-top: 10px;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(25, 135, 84, 0.16);
  border: 1px solid rgba(25, 135, 84, 0.45);
  color: #75d8a4;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Botão de comprovante de entrega (canhoto) */
.btn-comprovante {
  border: 1px solid rgba(25, 135, 84, 0.6);
  background: rgba(25, 135, 84, 0.12);
  color: #75d8a4;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 10px 20px;
  border-radius: 50rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  animation: badgeIn 0.5s ease 0.15s both;
}

.btn-comprovante:hover {
  background: rgba(25, 135, 84, 0.25);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(25, 135, 84, 0.7);
}

/* Imagem do canhoto no modal */
.canhoto-img {
  max-width: 100%;
  max-height: 65vh;
  border-radius: 10px;
  border: 1px solid #495057;
}

@keyframes badgeIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* Seletor segmentado NF / CNPJ */
.tipo-switch {
  display: flex;
  gap: 6px;
  background: #1a1d21;
  border: 1px solid #495057;
  border-radius: 10px;
  padding: 5px;
  max-width: 340px;
  margin: 0 auto;
}

.tipo-option {
  flex: 1;
  border: none;
  background: transparent;
  color: #adb5bd;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.tipo-option i {
  margin-right: 5px;
}

.tipo-option:hover {
  color: #f8f9fa;
}

.tipo-option.active {
  background: #0d6efd;
  color: #fff;
  box-shadow: 0 4px 12px -3px rgba(13, 110, 253, 0.6);
}

/* ── Skeleton shimmer ── */
.skeleton {
  background: linear-gradient(90deg, #343a40 25%, #434c55 50%, #343a40 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 6px;
  display: block;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Input hint ── */
#input-hint {
  min-height: 18px;
  font-size: 0.78rem;
  color: #6c757d;
}

#input-hint.hint-cpf   { color: #0dcaf0; }
#input-hint.hint-cnpj  { color: #ffc107; }
#input-hint.hint-nf    { color: #adb5bd; }

/* ── Responsive ── */
@media (max-width: 576px) {
  .search-card { padding: 20px 16px 16px; }
  .result-card { padding: 20px 16px; }
  .step-icon   { width: 48px; height: 48px; font-size: 20px; }
  .step-label  { font-size: 0.68rem; max-width: 68px; }
  .info-row    { flex-direction: column; align-items: flex-start; gap: 2px; }
  .info-value  { text-align: left; }
}