/* ════════════════════════════════════════════════════════════
   MãoCerta — app-compat.css
   Classes geradas pelo JS (app.js / app_patch.js) que estavam
   em style.css e não foram portadas para maocerta.css.
   ════════════════════════════════════════════════════════════ */

/* .spinner — defined later */

/* ── EMPTY STATE ────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--tx3, #6B7280);
}

.empty-icon { font-size: 56px; margin-bottom: 12px; }

.empty-title { font-size: 18px; font-weight: 800; color: var(--tx, #111827); margin-bottom: 6px; }

.empty-sub { font-size: 14px; }

/* .notif-titulo — defined later */

/* .notif-msg — defined later */

/* Service grid — 4 colunas, tiles grandes e tocáveis */
/* service-grid: defined later in this file with correct values */

/* .qdchip — defined later */

/* ── MODAL SUCESSO ───────────────────────────────────── */
/* .modal-overlay — defined later */

.modal-box {
  background: var(--surface, #fff);
  border-radius: 24px 24px 0 0;
  padding: 28px 24px 40px;
  width: 100%; max-width: 480px;
  position: relative;
  animation: slideUp 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

.modal-title { font-size: 24px; font-weight: 900; text-align: left; margin-bottom: 6px; flex: 1; min-width: 0; }

.modal-close-x {
  margin-left: auto; background: var(--bg, #F4F5F7); border: none;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── CARD PEDIDO v3 (prestador) ──────────────────────── */
.pedido-card-v3 {
  background: var(--surface, #fff);
  border-radius: var(--r, 14px);
  overflow: hidden;
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0,0,0,.08));
  margin-bottom: 12px;
  border: 1.5px solid var(--bd, #E5E7EB);
  transition: box-shadow .2s ease;
}

/* ═══════════════════════════════════════════════════════
   pcv3 — Card de pedido para o prestador (versão unificada)
   ═══════════════════════════════════════════════════════ */

/* ── Container ─────────────────────────────────────────── */
.pcv3-card {
  background: #fff;
  border-radius: 16px;
  overflow: visible;
  margin: 0 16px 12px;
  border: 1px solid #F1F5F9;
  box-shadow: 0 2px 12px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
  transition: transform .15s, box-shadow .15s;
  /* Clip only visually, not for content overflow */
  clip-path: none;
}
/* Re-apply border-radius clipping for the inner elements only */
.pcv3-card { overflow: hidden; border-radius: 16px; }
.pcv3-card:active { transform: scale(.985); box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.pcv3-card.pcv3-novo {
  border-color: #FF5A1F;
  border-width: 2px;
  animation: pulse-border 2.5s ease-in-out infinite;
}

/* ── Header: emoji | tipo+num | tempo ──────────────────── */
.pcv3-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid #F1F5F9;
  min-width: 0;
}

/* Wrapper do ícone SVG */
.pcv3-emoji-wrap {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #FFF0EB, #FFE4D6);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(255,90,31,.18);
}

/* Coluna central: nome do serviço + número */
.pcv3-tipo {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 2px;
}
.pcv3-nome {
  font-size: 15px;
  font-weight: 700;
  color: #0F172A;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pcv3-num {
  font-size: 11px;
  font-weight: 600;
  color: #94A3B8;
  letter-spacing: .03em;
}

/* Tempo — canto direito */
.pcv3-tempo {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
  white-space: nowrap;
  background: #F1F5F9;
  padding: 4px 9px;
  border-radius: 99px;
  flex-shrink: 0;
  align-self: flex-start;
}
.pcv3-tempo.recente {
  background: #ECFDF5;
  color: #059669;
}

/* Coluna direita do header (geo card): badge dist + tempo empilhados */
.pcv3-tempo-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}

/* ── Body: descrição + meta ────────────────────────────── */
.pcv3-body {
  padding: 10px 14px 12px;
}
.pcv3-desc {
  font-size: 14px;
  color: #1E293B;
  font-weight: 500;
  line-height: 1.45;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Meta-info (endereço, localidade) */
.pcv3-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.pcv3-meta-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #64748B;
  font-weight: 500;
}
.pcv3-meta-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Footer: botão interesse ───────────────────────────── */
.pcv3-aceitar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100% !important;
  margin: 0 !important;
  padding: 15px 16px !important;
  background: linear-gradient(135deg, #FF5A1F, #E04510) !important;
  color: #fff !important;
  border: none !important;
  border-top: 1px solid rgba(255,90,31,.2) !important;
  border-radius: 0 !important;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none !important;
  transition: opacity .15s, transform .12s;
  min-height: 50px;
  letter-spacing: -0.1px;
  box-sizing: border-box;
}
.pcv3-aceitar:active { opacity: .88; transform: scale(.97); }

/* ── CARD PEDIDO CLIENTE v3 ──────────────────────────── */
.pedido-card-cliente {
  background: var(--surface, #fff);
  border-radius: var(--r, 14px);
  overflow: hidden;
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0,0,0,.08));
  margin-bottom: 10px;
  border-left: 4px solid transparent;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  animation: pcc-enter 0.4s var(--spring, cubic-bezier(0.34,1.56,0.64,1)) both;
}
.pedido-card-cliente:hover {
  box-shadow: var(--shadow, 0 4px 20px rgba(0,0,0,.10));
  transform: translateY(-1px);
}

@keyframes pcc-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Status border colorida por estado */
.pedido-card-cliente[data-status="aguardando_interessados"] { border-left-color: var(--amber, #F59E0B); }
.pedido-card-cliente[data-status="em_andamento"]           { border-left-color: var(--blue, #3B82F6); }
.pedido-card-cliente[data-status="confirmado"]             { border-left-color: var(--green, #10B981); }
.pedido-card-cliente[data-status="cancelado"]              { border-left-color: var(--red, #EF4444); }
.pedido-card-cliente[data-status="concluido"]              { border-left-color: var(--green-dk, #059669); }

/* ── Badge de status SVG ── */
.pcc-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--r-pill, 9999px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.pcc-status-badge svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke: currentColor;
}

/* aguardando_interessados — âmbar pulsante */
.pcc-status-badge.aguardando_interessados {
  background: var(--amber-lt, #FFFBEB);
  color: var(--amber-dk, #D97706);
  border: 1px solid #FDE68A;
  animation: badge-pulse-amber 2.5s ease-in-out infinite;
}
@keyframes badge-pulse-amber {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.18); }
  50%       { box-shadow: 0 0 0 4px rgba(245,158,11,0.08); }
}

/* em_andamento — azul */
.pcc-status-badge.em_andamento {
  background: var(--blue-lt, #EFF6FF);
  color: var(--blue-dk, #2563EB);
  border: 1px solid #BFDBFE;
}

/* confirmado — verde */
.pcc-status-badge.confirmado {
  background: var(--green-lt, #ECFDF5);
  color: var(--green-dk, #059669);
  border: 1px solid #A7F3D0;
}

/* concluido — verde escuro */
.pcc-status-badge.concluido {
  background: #F0FDF4;
  color: #166534;
  border: 1px solid #86EFAC;
}

/* cancelado — vermelho */
.pcc-status-badge.cancelado {
  background: var(--red-lt, #FEF2F2);
  color: var(--red-dk, #DC2626);
  border: 1px solid #FECACA;
}



.pcc-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 0; }

.pcc-tipo { font-size: 15px; font-weight: 800; }

.pcc-body { padding: 8px 16px 14px; }

.pcc-desc { font-size: 13px; color: var(--tx3, #6B7280); margin-bottom: 6px; }

.pcc-local { font-size: 12px; color: var(--tx3, #6B7280); display: flex; align-items: center; gap: 4px; }

.pcc-prestador {
  margin-top: 10px; padding: 10px 12px;
  background: linear-gradient(135deg, #ECFDF5, #F0FFF4);
  border: 1px solid #A7F3D0;
  border-radius: var(--r-sm, 10px);
}

.pcc-prest-name { font-size: 14px; font-weight: 800; color: #065F46; }

.pcc-prest-action {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px;
}

.pcc-time { font-size: 11px; color: var(--tx3, #6B7280); font-weight: 600; padding: 2px 16px 6px; margin-top: 0; }

/* ── STEPPER DE STATUS ANTIGO — substituído pela mc-timeline em maocerta-status-flow.css ── */
/* Os blocos .status-progress e .sp-step abaixo são mantidos para não quebrar
   referências legadas, mas estão ocultos. A nova timeline usa .mc-timeline. */

/* Container principal */
.status-progress {
  display: none !important;
}

.status-progress::before,
.status-progress::after { content: none; }

/* Cabeçalho: título + contador */
.sp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.sp-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--tx2, #374151);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.sp-title svg {
  width: 14px;
  height: 14px;
  stroke: var(--or, #FF5A1F);
  flex-shrink: 0;
}

.sp-counter {
  font-size: 11px;
  font-weight: 600;
  color: var(--or, #FF5A1F);
  background: var(--or-lt, #FFF0EB);
  border-radius: 99px;
  padding: 2px 8px;
}

/* Wrapper dos dots — scroll horizontal se necessário */
.sp-dots {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sp-dots::-webkit-scrollbar { display: none; }

/* Descrição contextual da etapa atual */
.sp-desc {
  margin-top: 12px;
  padding: 9px 12px;
  background: var(--or-lt, #FFF0EB);
  border-left: 3px solid var(--or, #FF5A1F);
  border-radius: 0 8px 8px 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--tx2, #374151);
  line-height: 1.5;
}

/* Step */
.sp-step {
  flex: 1;
  min-width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  position: relative;
  z-index: 2;
  animation: sp-enter 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.sp-step:nth-child(1) { animation-delay:   0ms; }
.sp-step:nth-child(2) { animation-delay:  55ms; }
.sp-step:nth-child(3) { animation-delay: 110ms; }
.sp-step:nth-child(4) { animation-delay: 165ms; }
.sp-step:nth-child(5) { animation-delay: 220ms; }
.sp-step:nth-child(6) { animation-delay: 275ms; }

@keyframes sp-enter {
  from { opacity: 0; transform: translateY(8px) scale(0.88); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* Label do step */
.sp-step-label {
  font-size: 10px;
  font-weight: 500;
  color: #9CA3AF;
  text-align: center;
  line-height: 1.3;
  max-width: 58px;
  transition: color 0.3s ease, font-weight 0.2s ease;
}

/* Dot (círculo do ícone) */
.sp-step-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--bd, #E5E7EB);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #D1D5DB;
  position: relative;
  z-index: 2;
  transition:
    background   0.30s ease,
    border-color 0.30s ease,
    color        0.30s ease,
    transform    0.40s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow   0.30s ease;
  box-sizing: border-box;
}

/* SVG dentro do dot */
.sp-step-dot svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
  transition: stroke 0.25s ease;
}

/* Labels e spans do step (suporta <span> gerado pelo JS) */
.sp-step span {
  font-size: 10px;
  font-weight: 500;
  color: #9CA3AF;
  text-align: center;
  line-height: 1.3;
  max-width: 58px;
  transition: color 0.3s ease, font-weight 0.2s ease;
}

/* ── Estado: CONCLUÍDO ── */
.sp-step.done .sp-step-dot {
  background: var(--green, #10B981);
  border-color: var(--green, #10B981);
  color: #fff;
  transform: scale(1.05);
}
.sp-step.done .sp-step-dot svg { display: none; }
.sp-step.done .sp-step-dot::after {
  content: '';
  display: block;
  width: 7px;
  height: 11px;
  border: 2.5px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px, -1.5px);
  border-radius: 1px;
}
.sp-step.done span,
.sp-step.done .sp-step-label { color: var(--green-dk, #059669); font-weight: 600; }

/* ── Estado: ATIVO — suporta "current" (JS) e "active" (legado) ── */
.sp-step.current .sp-step-dot,
.sp-step.active  .sp-step-dot {
  background: var(--or, #FF5A1F);
  border-color: var(--or, #FF5A1F);
  color: #fff;
  transform: scale(1.14);
  animation: sp-pulse 2.2s ease-in-out infinite;
}
.sp-step.current .sp-step-dot svg,
.sp-step.active  .sp-step-dot svg { stroke: #fff; }
.sp-step.current span,
.sp-step.active  span,
.sp-step.current .sp-step-label,
.sp-step.active  .sp-step-label { color: var(--or, #FF5A1F); font-weight: 700; }

@keyframes sp-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 90, 31, 0.13), 0 3px 10px rgba(255, 90, 31, 0.22); }
  50%       { box-shadow: 0 0 0 9px rgba(255, 90, 31, 0.06), 0 4px 16px rgba(255, 90, 31, 0.32); }
}



.rating-bar-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: #78716C; margin-bottom: 5px;
}

.rating-bar-track {
  flex: 1; height: 7px; background: #E5E7EB; border-radius: 4px; overflow: hidden;
}

.rating-bar-fill {
  height: 100%; background: linear-gradient(90deg, #F59E0B, #D97706);
  border-radius: 4px; transition: width .5s cubic-bezier(.4,0,.2,1);
}

/* ── Star picker ── */
.rv-star-picker {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 8px;
}

/* ── Review card (lista) ── */
.rv-card {
  background: var(--card-bg,#fff);
  border: 1px solid var(--bd, #E5E7EB);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: box-shadow .2s;
}

.rv-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.rv-card-nome  { font-size: 13px; font-weight: 700; color: var(--tx, #111827); }

.rv-card-stars { font-size: 15px; letter-spacing: 1px; }

.rv-card-cmt   { font-size: 13px; color: var(--tx3, #6B7280); font-style: italic; margin-bottom: 6px; line-height: 1.5; }

.rv-card-data  { font-size: 11px; color: #9CA3AF; }

.rv-empty { text-align:center; color:var(--tx3, #6B7280); font-size:13px; padding:20px 0; }

.reviews { display:flex; flex-direction:column; gap:0; }

.rv-media {
  background: linear-gradient(135deg, #FEF9C3, #FFF);
  border: 1px solid #FDE68A;
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  margin-bottom: 16px;
}

.rv-avg-num   { font-size: 48px; font-weight: 900; line-height: 1; }

.rv-avg-stars { font-size: 22px; margin: 4px 0; }

.rv-avg-total { font-size: 12px; color: var(--tx3, #6B7280); margin-bottom: 12px; }

.rv-bars { display:flex; flex-direction:column; gap:6px; }

.rv-bar-row {
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  align-items: center;
  gap: 8px;
}

.rv-bar-n, .rv-bar-cnt { font-size: 11px; color: var(--tx3, #6B7280); text-align:right; }

.rv-bar-track {
  height: 6px;
  background: #F3F4F6;
  border-radius: 4px;
  overflow: hidden;
}

.rv-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}

.rv-badge-total { color: var(--tx3, #6B7280); font-weight: 400; }

.rv-badge-new   { color: #9CA3AF; font-size: 12px; font-weight: 500; }

/* ── Botão já avaliado ── */
.rv-avaliado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #059669;
}

/* ══════════════════════════════════════════════════
   FINANCEIRO — transparência de valores
   ══════════════════════════════════════════════════ */

/* ── Cliente: preço simples ── */
.fin-cliente {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 4px;
  flex-wrap: wrap;
}

.fin-total {
  font-size: 18px;
  font-weight: 900;
  color: var(--tx, #111827);
}

.fin-selos {
  font-size: 11px;
  color: var(--green, #10B981);
  font-weight: 700;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* ── Prestador: breakdown completo ── */
.fin-prestador {
  background: #F9FAFB;
  border: 1px solid var(--bd, #E5E7EB);
  border-radius: var(--r-sm, 10px);
  padding: 10px 12px;
  margin: 10px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
  min-width: 0;
}

.fin-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  gap: 8px;
  min-width: 0;
}

.fin-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fin-val   { flex-shrink: 0; white-space: nowrap; }

.fin-row-liquido {
  border-top: 1px solid var(--bd, #E5E7EB);
  padding-top: 6px;
  margin-top: 2px;
}

.fin-liquido {
  font-size: 16px;
  font-weight: 900;
  color: var(--green, #10B981);
}

/* fallback pedidos antigos sem financeiro */
.fin-fallback .fin-base {
  font-size: 15px;
  font-weight: 800;
  color: var(--tx, #111827);
}

/* ── Aviso de horário agendado no card do prestador ── */
.pcc-agend-aviso {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #92400E;
  margin-bottom: 8px;
}

.pcc-agend-falta {
  font-size: 12px;
  font-weight: 400;
  color: #B45309;
}

/* ── Frete / Deslocamento ── */
.fin-row-sm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
}

.fin-label-sm { color: var(--tx3, #6B7280); font-size: 12px; }

.fin-frete-row { color: #92400E; }

.fin-frete-val { font-weight: 700; color: #B45309; }

.fin-total-row { border-top: 1px solid var(--bd, #E5E7EB); margin-top: 4px; padding-top: 4px; }

.fin-selos-sm  { font-size: 11px; display: block; margin-top: 4px; }

.fin-frete-positivo { color: #059669; font-weight: 700; }

.fin-frete-gratis   { color: var(--tx3, #6B7280); font-size: 12px; font-style: italic; }

.metric-card {
  background: var(--surface, #fff);
  border: 1px solid var(--bd, #E5E7EB);
  border-radius: var(--r, 14px);
  padding: 16px 14px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.metric-card.metric-green  { border-top: 3px solid var(--green, #10B981); }

.metric-val {
  font-size: 28px;
  font-weight: 900;
  color: var(--tx, #111827);
  line-height: 1.1;
}

.metric-label {
  font-size: 11px;
  color: var(--tx3, #6B7280);
  font-weight: 700;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Categoria group ── */
.admin-cat-group { margin-bottom: 8px; }

.admin-cat-header {
  font-size: 12px;
  font-weight: 800;
  color: var(--tx3, #6B7280);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-cat-count {
  background: var(--bd, #E5E7EB);
  color: var(--tx3, #6B7280);
  border-radius: 20px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
}

/* ── Serviço card ── */
.admin-svc-card {
  background: var(--surface, #fff);
  border: 1px solid var(--bd, #E5E7EB);
  border-left: 4px solid var(--green, #10B981);
  border-radius: var(--r-sm, 10px);
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.admin-svc-inativo {
  border-left-color: #D1D5DB;
  opacity: 0.7;
}

.admin-svc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.admin-svc-nome {
  font-weight: 800;
  font-size: 15px;
  color: var(--tx, #111827);
  flex: 1;
}

.admin-svc-desc {
  font-size: 12px;
  color: var(--tx3, #6B7280);
  margin-bottom: 8px;
  line-height: 1.4;
}

.admin-svc-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 4px;
}

.admin-preco-total {
  font-size: 17px;
  font-weight: 900;
  color: var(--tx, #111827);
}

.admin-preco-liq {
  font-size: 11px;
  color: var(--green, #10B981);
  font-weight: 700;
  display: block;
}

.admin-svc-preco { line-height: 1.3; }

.admin-svc-dur { font-size: 12px; color: var(--tx3, #6B7280); font-weight: 600; }

/* ── Status badges admin ── */
.admin-badge-ativo {
  background: #ECFDF5; color: var(--green, #10B981);
  font-size: 11px; font-weight: 800;
  padding: 3px 8px; border-radius: 20px;
  border: 1px solid #BBF7D0;
  white-space: nowrap; flex-shrink: 0;
}

.admin-badge-inativo {
  background: #F3F4F6; color: #6B7280;
  font-size: 11px; font-weight: 800;
  padding: 3px 8px; border-radius: 20px;
  border: 1px solid #E5E7EB;
  white-space: nowrap; flex-shrink: 0;
}

/* ── Ações serviço ── */
.admin-svc-actions { display: flex; gap: 8px; }

.admin-btn-edit   { background: #EFF6FF; color: #2563EB; border: 1px solid #BFDBFE; }

.admin-btn-desat  { background: #FEF2F2; color: #EF4444; border: 1px solid #FECACA; }

.admin-btn-ativar { background: #ECFDF5; color: var(--green, #10B981); border: 1px solid #BBF7D0; }

/* ── Modal admin ── */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 16px 8px;
}

/* ── Usuários ── */
.admin-total-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--tx3, #6B7280);
  padding: 4px 0 10px;
}

.admin-user-list { display: flex; flex-direction: column; gap: 8px; }

.admin-user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--bd, #E5E7EB);
  border-radius: var(--r-sm, 10px);
  padding: 10px 12px;
}

.admin-user-avatar {
  width: 36px; height: 36px;
  background: var(--or-lt, #FFF0EB);
  color: var(--or, #FF5A1F);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 16px;
  flex-shrink: 0;
}

.admin-user-info { flex: 1; min-width: 0; }

.admin-user-nome  { font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 6px; }

.admin-user-email { font-size: 12px; color: var(--tx3, #6B7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.admin-user-tipo  { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 20px; flex-shrink: 0; }

.tipo-cliente    { background: #EEF2FF; color: #4F46E5; }

.tipo-prestador  { background: #ECFDF5; color: var(--green, #10B981); }

.admin-badge-mini {
  background: var(--or-lt, #FFF0EB);
  color: var(--or, #FF5A1F);
  font-size: 9px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
}

/* ── Preço no modal de sucesso (pós-criação) ── */
.msucc-preco {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--or-lt, #FFF0EB);
  border: 1.5px solid rgba(255,90,31,.3);
  border-radius: var(--r-sm, 10px);
  padding: 12px 16px;
  margin: 12px 0;
  gap: 4px;
}

.msucc-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--or, #FF5A1F);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.msucc-valor {
  font-size: 28px;
  font-weight: 900;
  color: var(--tx, #111827);
  line-height: 1;
}

.msucc-selos {
  font-size: 11px;
  color: var(--green, #10B981);
  font-weight: 700;
}

.wizard-preco-box {
  background: var(--or-lt, #FFF0EB);
  border: 2px solid var(--or, #FF5A1F);
  border-radius: var(--r, 14px);
  padding: 16px 20px;
  margin: 0 16px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: calc(100% - 32px);
  box-sizing: border-box;
}

.wpr-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--or, #FF5A1F);
  text-transform: uppercase;
  letter-spacing: .07em;
}

.wpr-valor {
  font-size: 32px;
  font-weight: 900;
  color: var(--tx, #111827);
  line-height: 1;
  word-break: break-all;
}

.wpr-duracao {
  font-size: 13px;
  color: var(--tx3, #6B7280);
  font-weight: 600;
}

.wpr-selos {
  font-size: 12px;
  font-weight: 700;
  color: var(--green, #10B981);
}

/* ══════════════════════════════════════════════════
   FLUXO 3 ETAPAS — Categorias → Serviços → Formulário
   ══════════════════════════════════════════════════ */

/* Etapa 1: grid de categorias — 2 colunas, tiles maiores */
.service-grid-cat {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 8px 16px 16px;
  width: 100%;
}

.cat-tile {
  padding: 16px 10px 12px;
  border-radius: var(--r, 14px);
  cursor: pointer;
  transition: all .18s;
  overflow: hidden;
  word-break: break-word;
  text-align: center;
}

.cat-tile-count {
  font-size: 11px;
  color: var(--tx3, #6B7280);
  margin-top: 4px;
  font-weight: 600;
}

.servico-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface, #fff);
  border: 1.5px solid var(--bd, #E5E7EB);
  border-radius: var(--r, 14px);
  padding: 14px 16px;
  cursor: pointer;
  transition: all .15s;
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0,0,0,.08));
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.si-left  { flex: 1; min-width: 0; }

.si-nome  { font-size: 14px; font-weight: 800; color: var(--tx, #111827); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.si-dur   { font-size: 12px; color: var(--tx3, #6B7280); margin-top: 2px; }

.si-right { text-align: right; flex-shrink: 0; }

.si-preco {
  font-size: 18px;
  font-weight: 900;
  color: var(--or, #FF5A1F);
  line-height: 1;
  white-space: nowrap;
}

.si-selos {
  font-size: 10px;
  color: var(--green, #10B981);
  font-weight: 700;
  margin-top: 2px;
}

.si-arrow {
  font-size: 22px;
  color: var(--tx3, #6B7280);
  font-weight: 300;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   REAGENDAMENTO — MãoCerta
   ══════════════════════════════════════════════════════════════ */

/* ── Aviso no card do CLIENTE ── */
.pcc-reagend-aviso {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: #1D4ED8;
  font-weight: 600;
  margin: 8px 14px;
}

.pcc-reagend-limite {
  font-size: 12px;
  color: var(--tx3, #6B7280);
  text-align: center;
  padding: 4px 0 8px;
}

.pcc-btn-info {
  background: #EFF6FF;
  color: #1D4ED8;
  border: 1.5px solid #93C5FD;
  font-weight: 700;
}

.pcc-btn-info:active { background: #DBEAFE; }

/* ── Aviso no card do PRESTADOR ── */
.pcc-reagend-prest-aviso {
  background: linear-gradient(135deg, #FFF7ED, #FFFBEB);
  border: 1.5px solid #FCD34D;
  border-radius: 12px;
  padding: 14px;
  margin: 8px 14px;
}

.prp-titulo {
  font-size: 14px;
  font-weight: 800;
  color: #92400E;
  margin-bottom: 4px;
}

.prp-data {
  font-size: 13px;
  color: #78350F;
  margin-bottom: 12px;
}

.prp-acoes {
  display: flex;
  gap: 8px;
}

.prp-btn {
  flex: 1;
  padding: 10px 0;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}

/* ── Modal de Reagendamento (cliente) ── */
.mreag-box {
  max-width: 420px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  padding: 0;
}

.mreag-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--bd, #E5E7EB);
  position: sticky;
  top: 0;
  background: var(--surface, #fff);
  z-index: 1;
  border-radius: 20px 20px 0 0;
}

.mreag-titulo {
  font-size: 17px;
  font-weight: 900;
  margin: 0;
}

.mreag-body {
  padding: 16px 20px 28px;
}

.mreag-atual {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: #166534;
  margin-bottom: 16px;
}

.mreag-section {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tx3, #6B7280);
  margin-bottom: 10px;
  margin-top: 16px;
}

.mreag-dias {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.mreag-dia-btn {
  flex-shrink: 0;
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid var(--bd, #E5E7EB);
  background: var(--surface, #fff);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.mreag-horas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.mreag-hora-btn {
  padding: 10px 0;
  border-radius: 10px;
  border: 2px solid var(--bd, #E5E7EB);
  background: var(--surface, #fff);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.mreag-resumo {
  background: #F0FDF4;
  border: 1.5px solid #BBF7D0;
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  color: #166534;
  margin-top: 16px;
  text-align: center;
}

.mreag-pen-aviso {
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: #92400E;
  margin-top: 10px;
}

.mreag-acoes {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   MODAL SAQUE
   ═══════════════════════════════════════════════════════════════ */
.saque-box { max-width: 380px; width: 92%; padding: 24px; }

.saque-form { margin: 16px 0; }

.saque-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--tx2, #374151);
  margin: 12px 0 4px;
}

.saque-input, .saque-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bd2, #D1D5DB);
  border-radius: 8px;
  font-size: 15px;
  background: #fff;
  box-sizing: border-box;
}

.saque-acoes {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

/* fin-destaque: destaca o "Você receberá" no card do prestador */
.fin-destaque {
  background: linear-gradient(90deg, #ECFDF5, #D1FAE5);
  border-radius: 8px;
  padding: 8px 12px !important;
  margin-top: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   CARD PRESTADOR — Aguardando pagamento do cliente
   ═══════════════════════════════════════════════════════════════ */
.pcc-aguardando-pag {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(90deg, #FFFBEB, #FEF3C7);
  border: 1px solid #F59E0B;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 8px 0 0;
}

/* [FIX-LOW3] Aviso quando prestador finalizou e cliente precisa confirmar */
.pcc-aviso-confirmar {
  background: var(--color-background-info, #EFF6FF);
  border-left: 3px solid var(--color-border-info, #3B82F6);
  border-radius: 0;
  padding: 10px 12px;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--color-text-info, #1D4ED8);
  line-height: 1.5;
}

/* [FIX] Avatar do prestador no modal de interessados */
.mi-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 0.5px solid var(--bd, #E5E7EB); }
.mi-card:last-child { border-bottom: none; }
.mi-avatar { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--color-background-info, #EFF6FF); display: flex; align-items: center; justify-content: center; }
.mi-avatar-img { width: 48px; height: 48px; object-fit: cover; border-radius: 50%; }
.mi-avatar-ini { width: 48px; height: 48px; border-radius: 50%; background: var(--or-lt, #FFF0EB); color: var(--or, #FF5A1F); font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.mi-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mi-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.mi-tag { font-size: 11px; font-weight: 600; color: var(--or, #FF5A1F); background: var(--or-lt, #FFF0EB); border-radius: 6px; padding: 2px 7px; }
.mi-local { font-size: 11px; color: var(--tx3, #6B7280); display: flex; align-items: center; gap: 2px; }
.mi-media { font-size: 13px; font-weight: 700; }
.mi-btn-contratar { width: 100%; margin-top: 10px; justify-content: center; }

/* ── Box informativo de titularidade ── */
.saque-info-box {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
  padding: 14px 20px;
  background: linear-gradient(135deg, #EFF6FF 0%, #F0FDF4 100%);
  border-bottom: 0.5px solid #BFDBFE;
}

.sib-icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.sib-texto { flex: 1; }

.sib-titulo {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #1E40AF;
  margin-bottom: 4px;
}

.sib-desc {
  font-size: 12px;
  color: #374151;
  line-height: 1.5;
  margin: 0 0 3px;
}

.sib-aviso {
  font-size: 11px;
  color: #B45309;
  font-weight: 500;
  margin-top: 4px;
}

.saque-campo {
  margin-bottom: 16px;
}

/* ── Valor com símbolo R$ ── */
.saque-valor-wrap {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--color-border-secondary, #E5E7EB);
  border-radius: var(--r-sm, 10px);
  background: var(--color-background-primary, #fff);
  overflow: hidden;
  transition: border-color .15s;
}

.saque-moeda {
  padding: 0 10px 0 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-secondary, #6B7280);
  flex-shrink: 0;
}

.saque-input-valor {
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 14px 12px 0 !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--color-text-primary, #111827) !important;
  flex: 1;
  width: 100%;
  background: transparent;
}

.saque-saldo-hint {
  font-size: 12px;
  color: var(--color-text-tertiary, #9CA3AF);
  margin-top: 5px;
}

/* ── Botões de tipo de chave ── */
.saque-tipo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.saque-tipo-btn {
  padding: 8px 4px;
  font-size: 11px;
  font-weight: 500;
  border: 1.5px solid var(--color-border-tertiary, #E5E7EB);
  border-radius: var(--r-sm, 10px);
  background: var(--color-background-primary, #fff);
  color: var(--color-text-secondary, #6B7280);
  cursor: pointer;
  text-align: center;
  transition: all .15s;
  touch-action: manipulation;
}

.saque-chave-dica {
  font-size: 11px;
  color: var(--color-text-tertiary, #9CA3AF);
  margin-top: 5px;
  line-height: 1.4;
}

/* ── Indicador de validação ── */
.saque-validacao {
  font-size: 12px;
  font-weight: 500;
  margin-top: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  min-height: 28px;
  transition: all .2s;
}

.sv-ok    { background: #F0FDF4; color: #15803D; }

.sv-erro  { background: #FEF2F2; color: #DC2626; }

.sv-aviso { background: #FFFBEB; color: #B45309; }

.sv-neutro{ background: transparent; color: transparent; }

/* ── Área de revisão manual ── */
.saque-revisao-wrap {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 8px;
  padding: 12px;
  margin-top: 4px;
}

/* ── Classes não encontradas no style.css antigo — definidas aqui ── */

.pvc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.pvc-footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mc-pulse-loader {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 40px 24px;
}
.mc-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--or, #FF5A1F);
  animation: mc-pulse 1.2s ease-in-out infinite;
}
.mc-pulse-dot:nth-child(2) { animation-delay: .2s; }
.mc-pulse-dot:nth-child(3) { animation-delay: .4s; }
@keyframes mc-pulse {
  0%, 80%, 100% { transform: scale(.8); opacity: .5; }
  40%           { transform: scale(1);  opacity: 1;  }
}

/* Modal overlay genérico */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,.65);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow-y: auto;
}
.modal-box {
  background: var(--surface, #fff);
  border-radius: 20px 20px 0 0;
  padding: 24px;
  width: 100%;
  max-width: 480px;
}

/* Spinner genérico */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
  opacity: .85;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════
   PATCH: Layout dos cards de pedido do prestador (pvc-*)
   Estas classes são geradas pelo JS mas não existiam no CSS antigo.
   ════════════════════════════════════════════════════════════════ */

/* Container da lista */
#lista-disponiveis,
#lista-aceitos {
  padding: 12px 0 16px;
}

/* Card base — adiciona padding interno que estava faltando */
.pedido-card-v3 {
  padding: 0;               /* reset — o padding fica nas sub-seções */
  margin-bottom: 12px;
}

/* Header do card */
.pvc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--bd, #E5E7EB);
}

.pvc-emoji {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}

.pvc-tipo {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx, #111827);
  flex: 1;
  min-width: 0;
}

.pvc-when {
  font-size: 12px;
  color: var(--tx4, #9CA3AF);
  white-space: nowrap;
  background: var(--bg, #F4F5F7);
  padding: 3px 8px;
  border-radius: 99px;
}

/* Body do card */
.pvc-body {
  padding: 12px 16px;
}

.pvc-desc {
  font-size: 14px;
  color: var(--tx2, #374151);
  line-height: 1.5;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pvc-end {
  font-size: 13px;
  color: var(--tx3, #6B7280);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pvc-cliente {
  font-size: 13px;
  color: var(--tx3, #6B7280);
  margin-bottom: 6px;
}

.pvc-preco {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx, #111827);
  margin-top: 8px;
}

/* Footer com botões */
.pvc-footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 16px 14px;
}

/* Botões do card do prestador */
.pvc-btn {
  flex: 1;
  min-width: 120px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s, transform .1s;
  text-align: center;
}

.pvc-btn:active { transform: scale(0.97); opacity: .85; }

.pvc-btn-aceitar {
  background: var(--or, #FF5A1F);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255,90,31,.25);
}

.pvc-btn-ja {
  background: var(--green-lt, #ECFDF5);
  color: var(--green-dk, #059669);
  border: 1.5px solid #A7F3D0;
}

.pvc-btn-cancelar {
  background: var(--red-lt, #FEF2F2);
  color: var(--red-dk, #DC2626);
  border: 1.5px solid #FECACA;
}

/* Card destaque — novo pedido */
.pvc-novo {
  border-color: var(--or, #FF5A1F);
  border-width: 2px;
  animation: pulse-border 2.5s ease-in-out infinite;
}

@keyframes pulse-border {
  0%, 100% { border-color: var(--or, #FF5A1F); }
  50%       { border-color: var(--or-lt, #FFF0EB); }
}

/* Interesse demonstrado (badge verde no fundo do card) */
.pvc-ja-banner {
  background: var(--green-lt, #ECFDF5);
  color: var(--green-dk, #059669);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  text-align: center;
  border-top: 1px solid #A7F3D0;
}

/* ── Ajuste do Hero do prestador ────────────────────────────────── */
.prest-hero {
  padding-left: 16px;
  padding-right: 16px;
}

/* ── Ajuste página cliente ──────────────────────────────────────── */
#lista-meus-pedidos {
  padding: 12px 16px 0;
}

/* ── Corrige "endereço não georef." e "788min" no pvc-when ──────── 
   Esses dados vêm do backend com campos crus — o CSS não pode
   corrigir dados mas pode ao menos esconder overflow 
──────────────────────────────────────────────────────────────── */
.pvc-when {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ════════════════════════════════════════════════════════════════
   PATCH 2: Profile sections, notif panel, form controls
   ════════════════════════════════════════════════════════════════ */

/* Profile header */
.profile-header-simple {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 16px;
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--bd, #E5E7EB);
}
.profile-name-block { flex: 1; min-width: 0; }
.profile-name { font-size: 18px; font-weight: 800; color: var(--tx, #111827); }
.profile-role-tag { font-size: 12px; color: var(--tx3, #6B7280); margin-top: 2px; }

/* Stats row */
.profile-stats-row {
  display: flex;
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--bd, #E5E7EB);
}
.pstat-item { flex: 1; text-align: center; padding: 14px 8px; }
.pstat-num  { font-size: 20px; font-weight: 800; color: var(--tx, #111827); }
.pstat-lbl  { font-size: 10px; color: var(--tx3, #6B7280); margin-top: 3px; font-weight: 600; text-transform: uppercase; }
.pstat-sep  { width: 1px; background: var(--bd, #E5E7EB); margin: 10px 0; }

/* Profile body */
.profile-section-body { padding-bottom: 16px; }
.profile-section-title {
  font-size: 12px; font-weight: 700; color: var(--tx3, #6B7280);
  text-transform: uppercase; letter-spacing: .5px;
  padding: 16px 16px 8px;
  display: flex; align-items: center; gap: 5px;
}
.profile-section-title svg { color: var(--or, #FF5A1F); opacity: .8; flex-shrink: 0; }
.profile-card-block {
  background: var(--surface, #fff);
  border-radius: var(--r, 14px);
  margin: 0 16px 12px;
  padding: 16px;
  box-shadow: var(--shadow-xs, 0 1px 4px rgba(0,0,0,.06));
}
.pf-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--bd, #E5E7EB);
  font-size: 14px;
}
.pf-row:last-child { border-bottom: none; }
.pf-lbl { color: var(--tx3, #6B7280); }
.pf-val { color: var(--tx, #111827); font-weight: 500; }
.profile-action-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: none; padding: 13px 0;
  font-size: 15px; font-weight: 500; color: var(--tx, #111827);
  font-family: inherit; cursor: pointer;
  border-bottom: 1px solid var(--bd, #E5E7EB);
}
.profile-action-btn span:first-child { display: flex; align-items: center; gap: 7px; }
.profile-action-btn span:first-child svg { color: var(--or, #FF5A1F); }
.profile-action-btn:last-child { border-bottom: none; }
.profile-action-btn:active { background: var(--bg, #F4F5F7); }
.pab-arrow { color: var(--tx4, #9CA3AF); font-size: 18px; }

/* Form controls (bridge between old and new) */
.form-group { margin-bottom: 14px; }
.form-label {
  display: block; font-size: 11px; font-weight: 700;
  color: var(--tx3, #6B7280); letter-spacing: .5px;
  text-transform: uppercase; margin-bottom: 6px;
}
/* .form-control — defined later */
.form-control:focus {
  border-color: var(--or, #FF5A1F);
  box-shadow: 0 0 0 3px rgba(255,90,31,.12);
}
textarea/* .form-control — defined later */
select.form-control { cursor: pointer; }

/* Notif panel items (used by renderNotifications) */
.notif-item {
  display: flex; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid var(--bd, #E5E7EB);
  cursor: pointer; transition: background .15s;
}
.notif-item:active { background: var(--bg, #F4F5F7); }
.notif-item.lida { opacity: .6; }
.notif-icon  { font-size: 22px; flex-shrink: 0; padding-top: 2px; }
.notif-body  { flex: 1; min-width: 0; }
.notif-titulo{ font-size: 14px; font-weight: 700; color: var(--tx, #111827); }
.notif-msg   { font-size: 13px; color: var(--tx3, #6B7280); margin-top: 2px; line-height: 1.4; }
.notif-time  { font-size: 11px; color: var(--tx4, #9CA3AF); margin-top: 3px; }
.notif-dot   { width: 8px; height: 8px; background: var(--or, #FF5A1F); border-radius: 50%; flex-shrink: 0; margin-top: 6px; }

/* Tabbar prestador (old classes used by ui-bridge) */
#tabbar-prestador {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 72px; background: var(--surface, #fff);
  border-top: 1px solid var(--bd, #E5E7EB);
  display: flex; z-index: 200;
}
.tab-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  background: none; border: none; cursor: pointer;
  font-size: 10px; font-weight: 600; color: var(--tx4, #9CA3AF);
  position: relative; font-family: inherit;
}
.tab-item .tab-icon { font-size: 20px; line-height: 1; }
.tab-item.active { color: var(--or, #FF5A1F); }

/* Service catalog */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; padding: 0 16px 16px;
}
.service-grid-cat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-tile {
  background: var(--surface, #fff);
  border-radius: 12px; padding: 14px 10px;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  cursor: pointer; border: 1.5px solid transparent;
  transition: all .15s;
  /* [FIX] min-width:0 é essencial em itens de grid flex: sem ele o item
     pode inflar para além da célula, causando overflow e quebra de layout.
     width:100% garante ocupação total da célula sem transbordar. */
  min-width: 0;
  width: 100%;
}
.service-tile:active, .service-tile.selected {
  border-color: var(--or, #FF5A1F);
  background: var(--or-lt, #FFF0EB);
}
.service-tile-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--or-lt, #FFF0EB);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.service-tile-name {
  font-size: 12px; font-weight: 700;
  color: var(--tx, #111827); text-align: center; line-height: 1.3;
  word-break: break-word; overflow-wrap: break-word; width: 100%;
}
.cat-tile-count { font-size: 11px; color: var(--tx3, #6B7280); }

/* Serviço item (step-servicos list) */
.servico-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface, #fff); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 8px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06); cursor: pointer;
  border: 1.5px solid transparent; transition: all .15s;
}
.servico-item:active, .servico-item.selected {
  border-color: var(--or, #FF5A1F); background: var(--or-lt, #FFF0EB);
}
.si-left  { flex: 1; min-width: 0; }
.si-right { text-align: right; flex-shrink: 0; }
.si-nome  { font-size: 15px; font-weight: 700; color: var(--tx, #111827); margin-bottom: 3px; }
.si-dur   { font-size: 12px; color: var(--tx3, #6B7280); }
.si-preco { font-size: 16px; font-weight: 800; color: var(--or, #FF5A1F); }
.si-selos { font-size: 10px; color: var(--tx4, #9CA3AF); margin-top: 2px; }
.si-arrow { font-size: 20px; color: var(--tx4, #9CA3AF); flex-shrink: 0; }

/* Quick description chips */
.qdchip {
  padding: 6px 12px; background: var(--bg, #F4F5F7);
  border-radius: 99px; border: 1px solid var(--bd, #E5E7EB);
  font-size: 12px; font-weight: 600; color: var(--tx3, #6B7280);
  cursor: pointer; font-family: inherit; transition: all .15s;
}
.qdchip:active { background: var(--or-lt, #FFF0EB); border-color: var(--or, #FF5A1F); color: var(--or, #FF5A1F); }

/* Wizard price box */
.wizard-preco-box {
  background: var(--or-lt, #FFF0EB); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 16px;
  border: 1px solid var(--or-lt2, #FFE4D6);
}
.wpr-label { font-size: 12px; color: var(--tx3, #6B7280); margin-bottom: 4px; }
.wpr-valor { font-size: 22px; font-weight: 800; color: var(--or, #FF5A1F); margin-bottom: 4px; }
.wpr-duracao { font-size: 13px; color: var(--tx3, #6B7280); }
.wpr-selos { font-size: 11px; color: var(--tx4, #9CA3AF); margin-top: 6px; line-height: 1.5; }

/* Chat bubble classes (used by chat.js) */
/* chat-bubble: sizing handled by chat.css */
.chat-bubble-meta { font-size: 10px; color: var(--tx4, #9CA3AF); margin-top: 3px; }
.chat-date-sep { text-align: center; margin: 12px 0; }
.chat-date-sep span {
  background: var(--bg, #F4F5F7); color: var(--tx4, #9CA3AF);
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 99px;
}
.chat-empty { padding: 40px 24px; text-align: center; }
.chat-empty-icon { font-size: 40px; margin-bottom: 12px; }
.chat-empty-title { font-size: 16px; font-weight: 700; color: var(--tx, #111827); }
.chat-empty-sub   { font-size: 14px; color: var(--tx3, #6B7280); margin-top: 6px; }
.chat-system-msg {
  text-align: center; margin: 8px 16px;
  font-size: 12px; color: var(--tx4, #9CA3AF);
  background: var(--bg, #F4F5F7); border-radius: 99px; padding: 4px 12px;
}
.chat-status-dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.conversa-item {
  display: flex; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid var(--bd, #E5E7EB);
  cursor: pointer; align-items: center;
}
.conversa-item:active { background: var(--bg, #F4F5F7); }
.conversa-nome { font-size: 15px; font-weight: 700; color: var(--tx, #111827); }
.conversa-body { flex: 1; min-width: 0; }
.conv-unread-dot { width: 8px; height: 8px; background: var(--or, #FF5A1F); border-radius: 50%; flex-shrink: 0; }
.conversa-unread-badge {
  min-width: 18px; height: 18px; background: var(--or, #FF5A1F);
  color: #fff; font-size: 10px; font-weight: 900; border-radius: 99px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* Auth screens (OTP injected by otp-auth.js) */
.mc-auth-screen {
  display: none; position: fixed; inset: 0; z-index: 7000;
  background: var(--surface, #fff); flex-direction: column;
  overflow: hidden;
}
.mc-auth-screen.active { display: flex; }
.mc-auth-card { padding: 24px 20px; flex: 1; overflow-y: auto; }
.mc-auth-btn {
  width: 100%; min-height: 52px; border-radius: 14px;
  font-size: 16px; font-weight: 700; border: none; cursor: pointer;
  background: var(--or, #FF5A1F); color: #fff;
  font-family: inherit; transition: opacity .15s;
}
.mc-auth-btn:active { opacity: .85; }
.mc-auth-error {
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3);
  border-radius: 10px; padding: 10px 14px; font-size: 13px;
  color: var(--red, #EF4444); margin-top: 8px; display: none;
}
.mc-auth-error.show { display: block; }
.mc-auth-title  { font-size: 24px; font-weight: 900; color: var(--tx, #111827); margin-bottom: 6px; }
.mc-auth-subtitle { font-size: 14px; color: var(--tx3, #6B7280); margin-bottom: 24px; }
.mc-otp-code-input {
  text-align: center !important; font-size: 30px !important;
  font-weight: 800 !important; letter-spacing: 10px !important;
  caret-color: var(--or, #FF5A1F);
}
.mc-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px 20px; background: #fff; color: #3c4043;
  border: 1.5px solid #dadce0; border-radius: 14px;
  font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: box-shadow .15s;
}
.mc-google-btn:active { box-shadow: 0 2px 12px rgba(0,0,0,.18); }

/* Misc utility */
.section { padding: 16px 16px 0; }
.section-title {
  font-size: 13px; font-weight: 700; color: var(--tx3, #6B7280);
  letter-spacing: .3px; display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 12px; text-transform: uppercase;
}
.typing-dot {
  width: 7px; height: 7px; background: var(--tx4, #9CA3AF);
  border-radius: 50%; animation: typing-bounce 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: .2s; }
.typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes typing-bounce {
  0%,60%,100% { transform: translateY(0); }
  30%          { transform: translateY(-6px); }
}
.skeleton {
  background: var(--bd, #E5E7EB); border-radius: var(--r, 14px);
  overflow: hidden; position: relative;
}
.skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
  animation: shimmer 1.4s ease infinite; background-size: 200% 100%;
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton-card { height: 110px; margin: 0 16px 10px; }


.btn-ja-interessado {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  /* Sem border-radius — fica colado no rodapé do card (overflow:hidden faz o arredondamento) */
  padding: 10px 16px !important;
  margin: 0 !important;
  background: #F0FDF4 !important;
  color: #15803D !important;
  font-size: 14px;
  font-weight: 700;
  border: none !important;
  border-top: 1px solid #D1FAE5 !important;
  border-radius: 0 !important;
  letter-spacing: -0.1px;
  width: 100%;
  box-sizing: border-box;
}


/* ════════════════════════════════════════════════════════════════
   PATCH 3 — Critical missing classes from audit
   ════════════════════════════════════════════════════════════════ */

/* ── pcc-* buttons ─────────────────────────────────────────────── */
.pcc-btn {
  flex: 1; min-width: 100px; padding: 11px 14px;
  border-radius: var(--r-sm, 10px); font-size: 13px; font-weight: 700;
  border: none; cursor: pointer; font-family: inherit;
  transition: opacity .15s, transform .1s; text-align: center;
}
.pcc-btn:active { transform: scale(.97); opacity: .85; }

.pcc-btn-primary  { background: var(--or, #FF5A1F); color: #fff; box-shadow: 0 4px 12px rgba(255,90,31,.22); }
.pcc-btn-success  { background: var(--green, #10B981); color: #fff; }
.pcc-btn-pagar    { background: var(--green, #10B981); color: #fff; }
.pcc-btn-cancelar { background: var(--red-lt, #FEF2F2); color: var(--red-dk, #DC2626); border: 1.5px solid #FECACA; }
.pcc-btn-ghost    { background: var(--bg, #F4F5F7); color: var(--tx2, #374151); }
.pcc-btn-info     { background: var(--blue-lt, #EFF6FF); color: var(--blue-dk, #2563EB); border: 1.5px solid #BFDBFE; }
.pcc-btn-star     { background: var(--amber-lt, #FFFBEB); color: var(--amber-dk, #D97706); border: 1.5px solid #FDE68A; }
.pcc-btn-danger   { background: var(--red-lt, #FEF2F2); color: var(--red, #EF4444); border: 1.5px solid #FECACA; }
.pcc-btn-aceitar  { background: var(--or, #FF5A1F); color: #fff; }
.pcc-btn-disputa  { background: #FFF8F6; color: #FF5A1F; border: 1.5px solid #FF5A1F; }
.pcc-btn-disputa:hover { background: #FFF0EB; }
.pcc-disputa-badge {
  display: flex; align-items: center; gap: 6px;
  margin: 8px 0 0; padding: 8px 12px;
  background: #FFFBEB; color: #D97706;
  border: 1px solid #FDE68A; border-radius: 10px;
  font-size: 12px; font-weight: 600; line-height: 1.4;
}

/* ── pcc-emoji ─────────────────────────────────────────────────── */
.pcc-emoji {
  font-size: 22px; flex-shrink: 0; width: 36px;
  display: flex; align-items: center; justify-content: center;
}

/* ── pcc-footer ────────────────────────────────────────────────── */
.pcc-footer {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 0 16px 14px;
}

/* ── pcc-prestador-box ─────────────────────────────────────────── */
.pcc-prestador-box {
  background: var(--bg, #F4F5F7); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px;
}
.pcc-prest-label { font-size: 11px; font-weight: 600; color: var(--tx3, #6B7280); margin-bottom: 3px; }
.pcc-prest-nome  { font-size: 14px; font-weight: 700; color: var(--tx, #111827); }
.pcc-prest-name  { font-size: 14px; font-weight: 700; color: var(--tx, #111827); }

/* ── pcc-avaliado-badge ────────────────────────────────────────── */
.pcc-avaliado-badge {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; background: var(--amber-lt, #FFFBEB);
  border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--amber-dk, #D97706); border: 1px solid #FDE68A;
}

/* ── sp-cancelado ──────────────────────────────────────────────── */
.sp-cancelado {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  margin: 10px 0 4px;
  background: #FFF1F2;
  border: 1px solid #FECDD3;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--red, #DC2626);
}
.sp-cancelado svg {
  width: 16px;
  height: 16px;
  stroke: var(--red, #DC2626);
  stroke-width: 2.5;
  stroke-linecap: round;
  fill: none;
  flex-shrink: 0;
}

/* ── rv-star (review star button) ──────────────────────────────── */
.rv-star {
  font-size: 32px; background: none; border: none;
  cursor: pointer; opacity: .35; transition: opacity .15s, color .15s;
  color: var(--amber, #F59E0B); line-height: 1;
  padding: 0 2px;
}
.rv-star.active { opacity: 1; }

/* ── av-card (old review system fallback) ──────────────────────── */
.av-card {
  background: var(--bg, #F4F5F7); border-radius: 12px;
  padding: 14px; margin-bottom: 8px;
}
.av-card-header  { display: flex; justify-content: space-between; margin-bottom: 6px; }
.av-card-nome    { font-size: 13px; font-weight: 700; color: var(--tx, #111827); }
.av-card-estrelas{ color: var(--amber, #F59E0B); }
.av-card-comentario { font-size: 13px; color: var(--tx2, #374151); font-style: italic; margin-bottom: 4px; }
.av-card-data    { font-size: 11px; color: var(--tx4, #9CA3AF); }
.av-section-title{ font-size: 13px; font-weight: 700; color: var(--tx, #111827); margin-bottom: 8px; }

/* ── btn-avaliado / btn-contratar ──────────────────────────────── */
.btn-avaliado {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  background: var(--green-lt, #ECFDF5); color: var(--green-dk, #059669);
  border-radius: 8px; font-size: 13px; font-weight: 600;
  border: 1px solid #A7F3D0;
}
.btn-contratar {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px; background: var(--or, #FF5A1F); color: #fff;
  border: none; border-radius: 10px; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: opacity .15s;
}
.btn-contratar:hover { opacity: .88; }
.btn-contratar svg { flex-shrink: 0; }

/* pcv3 layout — ver bloco unificado acima */

/* ── chat classes ──────────────────────────────────────────────── */
.chat-attach-btn {
  width: 36px; height: 36px; border-radius: 50%; background: var(--bg, #F4F5F7);
  border: none; display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--tx3, #6B7280); cursor: pointer; flex-shrink: 0;
}
.chat-blocked-bar {
  background: var(--red-lt, #FEF2F2); color: var(--red, #EF4444);
  font-size: 13px; font-weight: 600; padding: 10px 16px;
  text-align: center; border-top: 1px solid #FECACA;
}
.chat-img {
  max-width: 200px; border-radius: 12px; display: block;
  cursor: pointer; pointer-events: auto;
}
.chat-load-more {
  display: block; margin: 8px auto; padding: 8px 16px;
  background: var(--bg, #F4F5F7); border: 1.5px solid var(--bd, #E5E7EB);
  border-radius: 99px; font-size: 12px; font-weight: 600;
  color: var(--tx3, #6B7280); cursor: pointer; font-family: inherit;
}
.chat-msg-tick  { font-size: 11px; opacity: .6; }
.chat-msg-time  { font-size: 10px; color: var(--tx4, #9CA3AF); }
.chat-link      { color: var(--or, #FF5A1F); text-decoration: underline; }
.chat-retry-btn { background: none; border: none; color: var(--red, #EF4444); cursor: pointer; font-size: 12px; }
.chat-send-btn  { width: 40px; height: 40px; border-radius: 50%; background: var(--or, #FF5A1F); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chat-textarea  { flex: 1; min-height: 40px; max-height: 120px; border: 1.5px solid var(--bd, #E5E7EB); border-radius: 20px; padding: 10px 14px; font-size: 14px; font-family: inherit; outline: none; resize: none; background: var(--bg, #F4F5F7); }
.chat-textarea:focus { border-color: var(--or, #FF5A1F); }
.chat-input-wrap { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; background: var(--surface, #fff); border-top: 1px solid var(--bd, #E5E7EB); }

/* ── agendamento classes ────────────────────────────────────────── */
.agd-dia-btn {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 8px; border-radius: 10px;
  border: 1.5px solid var(--bd, #E5E7EB); background: var(--surface, #fff);
  cursor: pointer; min-width: 52px; font-family: inherit;
  transition: all .15s;
}
.agd-dia-btn.active, .agd-dia-btn.selected {
  border-color: var(--or, #FF5A1F); background: var(--or-lt, #FFF0EB);
}
.agd-dia-nome { font-size: 10px; font-weight: 700; color: var(--tx3, #6B7280); text-transform: uppercase; }
.agd-dia-num  { font-size: 18px; font-weight: 800; color: var(--tx, #111827); }
.agd-hora-btn {
  padding: 8px 14px; border-radius: 8px;
  border: 1.5px solid var(--bd, #E5E7EB); background: var(--surface, #fff);
  cursor: pointer; font-size: 14px; font-weight: 600; font-family: inherit;
}
.agd-hora-btn.active, .agd-hora-btn.selected {
  border-color: var(--or, #FF5A1F); background: var(--or-lt, #FFF0EB);
  color: var(--or, #FF5A1F);
}
.agd-penalidade-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: 99px; font-size: 12px; font-weight: 600;
  background: var(--amber-lt, #FFFBEB); color: var(--amber-dk, #D97706);
}
.agd-sem-horario { font-size: 13px; color: var(--tx3, #6B7280); padding: 12px 0; text-align: center; }

/* ── Admin panel classes ────────────────────────────────────────── */
.admin-metrics { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 12px; }
.admin-metrics-fin { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 12px; }
.admin-prazos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
.ap-group { background: var(--surface, #fff); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
.ap-titulo { font-size: 13px; font-weight: 700; color: var(--tx, #111827); margin-bottom: 10px; }
.ap-row    { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ap-label  { font-size: 13px; color: var(--tx2, #374151); }
.ap-input  { width: 64px; height: 36px; border: 1.5px solid var(--bd, #E5E7EB); border-radius: 8px; text-align: center; font-size: 14px; font-weight: 700; font-family: inherit; }
.ap-unit   { font-size: 12px; color: var(--tx4, #9CA3AF); }
.ap-ctrl   { display: flex; align-items: center; gap: 6px; }
.ap-exemplo { background: var(--bg, #F4F5F7); border-radius: 8px; padding: 10px; margin-top: 8px; }
.ap-ex-titulo { font-size: 11px; font-weight: 700; color: var(--tx3, #6B7280); margin-bottom: 6px; text-transform: uppercase; }
.ap-ex-row { font-size: 13px; color: var(--tx, #111827); padding: 2px 0; }

/* ── Misc ───────────────────────────────────────────────────────── */
.aviso {
  background: var(--amber-lt, #FFFBEB); border-radius: 10px;
  padding: 10px 14px; font-size: 13px; color: #92400E;
  display: flex; gap: 8px; align-items: flex-start;
  border: 1px solid #FDE68A; margin-bottom: 10px;
}
.ativo { color: var(--green, #10B981); font-weight: 700; }
.btn-ver-reviews {
  background: none; border: none; color: var(--or, #FF5A1F);
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  text-decoration: underline; padding: 4px 0;
}
.pedido-chat-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; background: var(--or-lt, #FFF0EB);
  color: var(--or, #FF5A1F); border: none; border-radius: 10px;
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.pedido-chat-unread {
  min-width: 18px; height: 18px; background: var(--red, #EF4444);
  color: #fff; font-size: 10px; font-weight: 900; border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* ════ Checkout Transparente v2 (ck2-*) ════ */
/* ═══════════════════════════════════════════════════════
   Checkout Transparente MãoCerta v2 — Mobile First
══════════════════════════════════════════════════════ */

#ck2-container {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.ck2-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 2001;
  animation: ck2-fade-in 0.2s ease;
}

.ck2-modal {
  position: relative;
  z-index: 2002;
  background: var(--surface, #fff);
  width: 100%;
  max-width: 480px;
  max-height: 92dvh;
  border-radius: 24px 24px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ck2-slide-up 0.3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
}

@keyframes ck2-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes ck2-fade-in {
  from { opacity: 0; } to { opacity: 1; }
}

/* ── Header ── */
.ck2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border, #eee);
  flex-shrink: 0;
}

.ck2-titulo {
  font-size: 17px;
  font-weight: 700;
  color: var(--text, #1a1a2e);
  margin: 0;
}

.ck2-close {
  background: var(--bg, #f5f6fa);
  border: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  color: var(--text-soft, #666);
  display: flex; align-items: center; justify-content: center;
}

/* ── Body ── */
.ck2-body {
  overflow-y: auto;
  padding: 20px;
  flex: 1;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ck2-body::-webkit-scrollbar { display: none; }

/* ── Resumo ── */
.ck2-resumo {
  background: var(--bg, #f5f6fa);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 20px;
}

.ck2-servico-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.ck2-servico-icone {
  font-size: 28px;
  width: 48px; height: 48px;
  background: var(--or-lt, #FFF0EB);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.ck2-servico-nome {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #1a1a2e);
}

.ck2-prestador-nome {
  font-size: 13px;
  color: var(--text-soft, #666);
  margin-top: 2px;
}

.ck2-valores {
  border-top: 1px solid var(--border, #e5e7eb);
  padding-top: 12px;
}

.ck2-valor-linha {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-soft, #666);
  margin-bottom: 6px;
}

.ck2-valor-linha.ck2-total {
  font-size: 17px;
  font-weight: 700;
  color: var(--text, #1a1a2e);
  margin-top: 4px;
}

.ck2-divisor {
  height: 1px;
  background: var(--border, #e5e7eb);
  margin: 8px 0;
}

/* ── Métodos ── */
.ck2-metodos {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.ck2-metodo {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 2px solid var(--border, #e5e7eb);
  border-radius: 14px;
  background: var(--surface, #fff);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.ck2-metodo-ativo {
  border-color: var(--or, #FF5A1F);
  background: var(--or-lt, #FFF0EB);
}

.ck2-metodo-icone { font-size: 22px; flex-shrink: 0; }
.ck2-metodo-nome  { font-size: 13px; font-weight: 700; color: var(--text, #1a1a2e); }
.ck2-metodo-desc  { font-size: 11px; color: var(--text-soft, #666); }

.ck2-metodo-check {
  margin-left: auto;
  color: var(--or, #FF5A1F);
  font-weight: 700;
  font-size: 16px;
}

/* ── Pix Info ── */
.ck2-pix-info { margin-bottom: 4px; }

.ck2-pix-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ck2-pix-step {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--text, #1a1a2e);
}

.ck2-step-num {
  width: 26px; height: 26px;
  background: var(--or, #FF5A1F);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Pix QR ── */
.ck2-pix-qr-wrap {
  display: flex;
  justify-content: center;
  margin: 8px 0 16px;
}

.ck2-qr-img {
  width: 200px;
  height: 200px;
  border-radius: 12px;
  border: 3px solid var(--or, #FF5A1F);
  padding: 8px;
  background: #fff;
}

.ck2-pix-timer {
  text-align: center;
  font-size: 13px;
  color: var(--text-soft, #666);
  margin-bottom: 16px;
}

.ck2-pix-ou {
  font-size: 13px;
  color: var(--text-soft, #666);
  text-align: center;
  margin-bottom: 8px;
}

.ck2-pix-codigo {
  background: var(--bg, #f5f6fa);
  border-radius: 10px;
  padding: 12px;
  font-size: 11px;
  word-break: break-all;
  color: var(--text, #1a1a2e);
  margin-bottom: 10px;
  max-height: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ck2-btn-copiar {
  width: 100%;
  padding: 12px;
  background: var(--bg, #f5f6fa);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text, #1a1a2e);
  margin-bottom: 16px;
}

/* ── Aguardando ── */
.ck2-aguardando {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-soft, #666);
  margin-bottom: 16px;
}

.ck2-spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border, #e5e7eb);
  border-top-color: var(--or, #FF5A1F);
  border-radius: 50%;
  animation: ck2-spin 0.8s linear infinite;
}
@keyframes ck2-spin { to { transform: rotate(360deg); } }

/* ── Cartão Form ── */
.ck2-cartao-form { margin-bottom: 4px; }

.ck2-field {
  margin-bottom: 14px;
  position: relative;
}

.ck2-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft, #666);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ck2-field input,
.ck2-field select {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 10px;
  font-size: 15px;
  background: var(--surface, #fff);
  color: var(--text, #1a1a2e);
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
  -webkit-appearance: none;
}

.ck2-field input:focus {
  border-color: var(--or, #FF5A1F);
}

.ck2-card-brand {
  position: absolute;
  right: 12px;
  top: 36px;
  font-size: 13px;
  color: var(--text-soft, #666);
}

.ck2-row {
  display: flex;
  gap: 10px;
}
.ck2-row .ck2-field { flex: 1; }

/* ── Botão Pagar ── */
.ck2-btn-pagar {
  width: 100%;
  padding: 16px;
  background: var(--or, #FF5A1F);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
  margin-bottom: 8px;
  transition: opacity 0.2s, transform 0.1s;
}
.ck2-btn-pagar:active  { transform: scale(0.98); }
.ck2-btn-pagar:disabled { opacity: 0.6; cursor: not-allowed; }

.ck2-btn-voltar {
  width: 100%;
  padding: 12px;
  background: none;
  border: none;
  color: var(--text-soft, #666);
  font-size: 14px;
  cursor: pointer;
  margin-top: 4px;
}

.ck2-seguro {
  text-align: center;
  font-size: 12px;
  color: var(--text-soft, #999);
  margin-top: 4px;
}

/* ── Sucesso ── */
.ck2-sucesso-body {
  text-align: center;
  padding: 48px 24px !important;
}

.ck2-sucesso-icone {
  font-size: 64px;
  margin-bottom: 20px;
  animation: ck2-bounce 0.5s cubic-bezier(.36,.07,.19,.97);
}
@keyframes ck2-bounce {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.3); }
}

.ck2-sucesso-titulo {
  font-size: 22px;
  font-weight: 700;
  color: var(--text, #1a1a2e);
  margin-bottom: 12px;
}

.ck2-sucesso-msg {
  font-size: 15px;
  color: var(--text-soft, #666);
  margin-bottom: 32px;
  line-height: 1.5;
}

/* ── Loading ── */
.ck2-loading {
  padding: 60px;
  text-align: center;
  font-size: 16px;
  color: var(--text-soft, #666);
}


/* ════ Modal cancelamento (mcc-*) ════ */
.mcc-box { padding: 20px; }
.mcc-icone { font-size: 40px; text-align: center; margin-bottom: 12px; }
.mcc-titulo { font-size: 18px; font-weight: 800; text-align: center; margin-bottom: 6px; color: var(--tx, #111827); }
.mcc-nome { font-size: 14px; color: var(--tx3, #6B7280); text-align: center; margin-bottom: 16px; }
.mcc-aviso { background: var(--red-lt, #FEF2F2); border-radius: 10px; padding: 12px; margin-bottom: 16px; font-size: 13px; color: var(--red, #EF4444); line-height: 1.5; }
.mcc-acoes { display: flex; gap: 10px; }
.mcc-btn-confirmar { flex: 1; padding: 14px; border: none; border-radius: 12px; background: var(--or, #FF5A1F); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; }
.mcc-btn-cancelar  { flex: 1; padding: 14px; border: none; border-radius: 12px; background: var(--bg, #F4F5F7); color: var(--tx2, #374151); font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; }

/* ════ Modal interessados (mi-*) — estilos base; o JS inline tem prioridade ════ */
.mi-box { padding: 0; }
.mi-subtitle { font-size: 13px; color: var(--tx3, #6B7280); margin: 0 0 12px; padding: 0 16px; }
.mi-nome { font-size: 15px; font-weight: 700; color: var(--tx, #111827); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-rating { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.mi-stars { color: var(--amber, #F59E0B); font-size: 13px; letter-spacing: 1px; }
.mi-media { font-size: 13px; font-weight: 700; }
.mi-total { font-size: 12px; color: var(--tx3, #6B7280); }

/* ════ Penalidade cancelamento (cpen-*) ════ */
.cpen-header { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.cpen-icon { font-size: 36px; flex-shrink: 0; }
.cpen-info { flex: 1; }
.cpen-forte { font-size: 17px; font-weight: 800; color: var(--tx, #111827); margin-bottom: 4px; }
.cpen-leve { font-size: 14px; color: var(--tx3, #6B7280); }
.cpen-summary { background: var(--bg, #F4F5F7); border-radius: 10px; padding: 14px; margin-bottom: 14px; }
.cpen-details { font-size: 13px; color: var(--tx3, #6B7280); line-height: 1.6; }
.cpen-regras { margin-bottom: 12px; }
.cpen-regra { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font-size: 13px; color: var(--tx, #111827); border-bottom: 1px solid var(--bd, #E5E7EB); }
.cpen-ok { color: var(--green, #10B981); }
.cpen-nota { font-size: 12px; color: var(--tx4, #9CA3AF); margin-bottom: 12px; line-height: 1.5; }

/* ════ Pré-visualização financeira (prev-*) ════ */
.prev-intro { font-size: 13px; color: var(--tx3, #6B7280); margin-bottom: 10px; }
.prev-lista { margin-bottom: 12px; }
.prev-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--bd, #E5E7EB); font-size: 14px; }
.prev-valor { font-weight: 600; color: var(--tx, #111827); }
.prev-metodo { background: var(--blue-lt, #EFF6FF); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--blue, #3B82F6); margin-bottom: 10px; }
.prev-data { font-size: 12px; color: var(--tx4, #9CA3AF); margin-bottom: 8px; }
.prev-aviso { background: var(--amber-lt, #FFFBEB); border-radius: 8px; padding: 10px 12px; font-size: 12px; color: #92400E; }

/* ════ pap-* (aguardando pagamento no card prestador) ════ */
.pcc-aguardando-pag { display: flex; gap: 12px; align-items: center; padding: 12px 16px; background: var(--or-lt, #FFF0EB); border-bottom: 1px solid var(--or-lt2, #FFE4D6); }
.pap-icon  { font-size: 24px; flex-shrink: 0; }
.pap-texto { flex: 1; }
.pap-titulo{ font-size: 14px; font-weight: 700; color: var(--or, #FF5A1F); }
.pap-sub   { font-size: 12px; color: var(--tx3, #6B7280); margin-top: 2px; }

/* ════ pcc-aviso-confirmar ════ */
.pcc-aviso-confirmar { background: var(--green-lt, #ECFDF5); border-radius: 10px; padding: 12px; margin-bottom: 10px; font-size: 13px; color: var(--green-dk, #059669); display: flex; align-items: center; gap: 8px; border: 1px solid #A7F3D0; }

/* ════ pcc-aviso-pag ════ */
.pcc-aviso-pag { background: var(--amber-lt, #FFFBEB); border-radius: 10px; padding: 12px; margin-bottom: 10px; font-size: 13px; color: #92400E; display: flex; gap: 8px; align-items: flex-start; }

/* ════ pcc-reagend-aviso / pcc-reagend-limite ════ */
.pcc-reagend-aviso { background: var(--blue-lt, #EFF6FF); border-radius: 10px; padding: 12px; margin-bottom: 10px; font-size: 13px; color: var(--blue-dk, #2563EB); }
.pcc-reagend-limite { font-size: 13px; color: var(--red, #EF4444); padding: 8px 0; }
.pcc-reagend-prest-aviso { background: var(--amber-lt, #FFFBEB); border-radius: 10px; padding: 12px; margin: 0 16px 12px; border: 1px solid #FDE68A; }

/* ════ prp-* (reagendamento prestador) ════ */
.prp-titulo { font-size: 14px; font-weight: 700; color: #92400E; margin-bottom: 6px; }
.prp-data   { font-size: 13px; color: var(--tx2, #374151); margin-bottom: 10px; }
.prp-acoes  { display: flex; gap: 8px; }
.prp-btn    { flex: 1; padding: 10px; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; }
.prp-aceitar{ background: var(--green, #10B981); color: #fff; }
.prp-recusar{ background: var(--red-lt, #FEF2F2); color: var(--red, #EF4444); border: 1px solid #FECACA; }

/* ════ nc-* (new card / notif card) ════ */
.nc-icone  { font-size: 36px; margin-bottom: 12px; }
.nc-titulo { font-size: 18px; font-weight: 800; color: var(--tx, #111827); margin-bottom: 6px; }
.nc-sub    { font-size: 14px; color: var(--tx3, #6B7280); margin-bottom: 8px; }
.nc-texto  { font-size: 13px; color: var(--tx2, #374151); line-height: 1.6; margin-bottom: 10px; }
.nc-dica   { font-size: 12px; color: var(--tx4, #9CA3AF); background: var(--bg, #F4F5F7); border-radius: 8px; padding: 10px; }
.nc-fechar { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 22px; color: var(--tx3, #6B7280); cursor: pointer; }

/* ════ rv-rank / rv-box ════ */
.rv-box { background: var(--bg, #F4F5F7); border-radius: var(--r, 14px); padding: 16px; margin: 0 16px 12px; }
.rv-rank-card { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--bd, #E5E7EB); }
.rv-rank-card:last-child { border-bottom: none; }
.rv-rank-pos   { font-size: 18px; font-weight: 900; color: var(--tx3, #6B7280); min-width: 28px; }
.rv-rank-info  { flex: 1; min-width: 0; }
.rv-rank-nome  { font-size: 14px; font-weight: 700; color: var(--tx, #111827); }
.rv-rank-tipo  { font-size: 12px; color: var(--tx3, #6B7280); }
.rv-rank-preco { font-size: 13px; color: var(--tx2, #374151); }
.rv-rank-rating{ font-size: 13px; font-weight: 700; color: var(--amber, #F59E0B); }
.rv-rank-avg   { font-size: 20px; font-weight: 900; color: var(--tx, #111827); }
.rv-rank-cnt   { font-size: 12px; color: var(--tx4, #9CA3AF); }
.rv-rank-stars { color: var(--amber, #F59E0B); }
.rv-anonimo-notice { font-size: 12px; color: var(--tx4, #9CA3AF); font-style: italic; margin-top: 6px; }
.rv-modal-box { background: var(--surface, #fff); border-radius: 20px 20px 0 0; padding: 20px; }

/* ════ KPI metrics (kpi-*) ════ */
.kpi-mini { background: var(--surface, #fff); border-radius: 10px; padding: 12px; flex: 1; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.kpi-n { font-size: 20px; font-weight: 800; color: var(--tx, #111827); }
.kpi-l { font-size: 10px; font-weight: 600; color: var(--tx3, #6B7280); text-transform: uppercase; margin-top: 2px; }

/* ════ wb-* (wallet box) ════ */
.wb-titulo { font-size: 15px; font-weight: 700; color: var(--tx, #111827); margin-bottom: 4px; }
.wb-label  { font-size: 12px; color: var(--tx3, #6B7280); margin-bottom: 4px; }
.wb-valor  { font-size: 24px; font-weight: 900; color: var(--tx, #111827); }
.wb-ver-detalhe { font-size: 12px; color: var(--or, #FF5A1F); font-weight: 700; text-decoration: underline; cursor: pointer; background: none; border: none; font-family: inherit; }

/* ════ chat image viewer ════ */
.chat-img-wrap { position: relative; display: inline-block; }
.chat-img-error { font-size: 13px; color: var(--tx4, #9CA3AF); font-style: italic; }
.chat-img-overlay-close { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.5); color: #fff; border: none; border-radius: 50%; width: 24px; height: 24px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chat-tick { font-size: 11px; opacity: .6; margin-left: 4px; }
.conv-tick { font-size: 11px; color: var(--tx4, #9CA3AF); }
.conversa-top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.conversa-bottom-row { display: flex; align-items: center; justify-content: space-between; }
.lido { color: var(--blue, #3B82F6); }

/* ════ mc-chat-loading ════ */
.mc-chat-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; gap: 12px; }
.mc-chat-loading-text { font-size: 14px; color: var(--tx3, #6B7280); }
.mc-typing-dots { display: flex; gap: 5px; }

/* ════ typing-dot-header ════ */
.typing-dot-header { width: 6px; height: 6px; background: rgba(255,255,255,.6); border-radius: 50%; animation: mc-pulse 1.2s ease-in-out infinite; }

/* ════ msucc-agd-icon ════ */
.msucc-agd-icon { font-size: 16px; margin-right: 4px; }

/* ════ fin-row-frete / fin-frete ════ */
.fin-frete { font-size: 13px; color: var(--tx3, #6B7280); }
.fin-row-frete { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; color: var(--tx3, #6B7280); }
.fin-fallback  { font-size: 13px; color: var(--tx3, #6B7280); }
.fin-frete-gratis { color: var(--green-dk, #059669); font-weight: 600; }

/* ════ lista-avaliacoes ════ */
.lista-avaliacoes { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; }

/* ════ pedido-chat-btn / unread ════ */
.pedido-chat-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--or-lt, #FFF0EB); color: var(--or, #FF5A1F); border: none; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.pedido-chat-unread { min-width: 18px; height: 18px; background: var(--red, #EF4444); color: #fff; font-size: 10px; font-weight: 900; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }

/* ════ Misc final ════ */
.modal-close { background: var(--bg, #F4F5F7); border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 18px; color: var(--tx3, #6B7280); display: flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; }
.modal-close::after { content: '✕'; }
.modal-close:hover { background: var(--bg2, #E5E7EB); }
.emoji { font-size: 22px; line-height: 1; }

/* ════ Checkout v1 inline (ck-*) ════ */
.ck-box { background: var(--surface, #fff); border-radius: var(--r, 14px); overflow: hidden; margin: 0 16px 12px; box-shadow: var(--shadow-sm, 0 2px 10px rgba(0,0,0,.08)); }
.ck-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; font-size: 14px; border-bottom: 1px solid var(--bd, #E5E7EB); }
.ck-row:last-child { border-bottom: none; }
.ck-label { color: var(--tx3, #6B7280); }
.ck-val { font-weight: 600; color: var(--tx, #111827); }
.ck-total-row { background: var(--or-lt, #FFF0EB); }
.ck-total { font-size: 18px; font-weight: 900; color: var(--or, #FF5A1F); }
.ck-resumo { padding: 4px 0; }
.ck-divider { height: 1px; background: var(--bd, #E5E7EB); margin: 4px 0; }
.ck-servico-nome { font-size: 15px; font-weight: 700; color: var(--tx, #111827); padding: 12px 16px 4px; }
.ck-prestador { font-size: 13px; color: var(--tx3, #6B7280); padding: 0 16px 10px; }
.ck-frete-gratis .ck-val { color: var(--green-dk, #059669); font-weight: 700; }
.ck-seguranca { font-size: 11px; color: var(--tx4, #9CA3AF); text-align: center; padding: 8px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.ck-btn-pagar { display: block; width: calc(100% - 32px); margin: 0 16px 14px; padding: 15px; background: var(--or, #FF5A1F); color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit; text-align: center; }
.ck-cancelar-reserva { display: block; width: calc(100% - 32px); margin: 0 16px 12px; padding: 12px; background: none; border: 1.5px solid var(--bd2, #D1D5DB); border-radius: 10px; font-size: 14px; color: var(--tx3, #6B7280); cursor: pointer; font-family: inherit; text-align: center; }
.ck-arrependimento { font-size: 12px; color: var(--tx4, #9CA3AF); text-align: center; padding: 0 16px 16px; line-height: 1.5; }
.ck-pix-aviso { background: var(--green-lt, #ECFDF5); border-radius: 10px; padding: 12px; margin: 0 16px 12px; font-size: 13px; color: var(--green-dk, #059669); display: flex; gap: 8px; align-items: flex-start; }
.ck-reserva-wrap { display: flex; gap: 10px; align-items: center; padding: 12px 16px; background: var(--or-lt, #FFF0EB); }
.ck-reserva-icon { font-size: 24px; flex-shrink: 0; }
.ck-reserva-txt { font-size: 13px; color: #9A3412; line-height: 1.4; }
.btn-link { background: none; border: none; color: var(--or, #FF5A1F); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; text-decoration: underline; padding: 0; }

/* ════ Remaining micro-classes ════ */
.mcancel-box { padding: 20px; }
.pcc-aguard-box { display: flex; gap: 10px; padding: 12px 16px; background: var(--or-lt, #FFF0EB); border-bottom: 1px solid var(--or-lt2, #FFE4D6); align-items: center; }
.rv-card-anon { opacity: .7; font-style: italic; }
.ck2-pix-codigo-wrap { background: var(--bg, #F4F5F7); border-radius: 10px; padding: 12px; margin: 8px 0; display: flex; gap: 8px; align-items: center; }
.ck2-qr-placeholder { width: 160px; height: 160px; background: var(--bd, #E5E7EB); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--tx4, #9CA3AF); }

/* ════════════════════════════════════════════════════════════════
   Auth OTP — redesign completo alinhado ao design system MãoCerta
   Paleta: laranja #FF5A1F (marca), fundo escuro azul-marinho,
   card branco com bottom-sheet. Fonte: Plus Jakarta Sans (herda).
   ════════════════════════════════════════════════════════════════ */

/* ── Tela base ─────────────────────────────────────────────────── */
.mc-auth-screen {
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #0F172A;
  position: relative;
  overflow: hidden;
  font-family: inherit;
  animation: mc-auth-in 0.3s ease both;
}

@keyframes mc-auth-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes mc-auth-in-back {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Background: degradê laranja → azul-marinho ─────────────────── */
.mc-auth-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    #FF5A1F 0%,
    #E04510 28%,
    #1E293B 60%,
    #0F172A 100%
  );
  z-index: 0;
}

/* Partículas decorativas (círculos de luz) */
.mc-auth-bg::before {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(255, 90, 31, 0.22);
  filter: blur(60px);
  top: -60px;
  right: -60px;
  animation: mc-glow 6s ease-in-out infinite alternate;
}

.mc-auth-bg::after {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 90, 31, 0.12);
  filter: blur(40px);
  bottom: 30%;
  left: -40px;
  animation: mc-glow 8s ease-in-out infinite alternate-reverse;
}

@keyframes mc-glow {
  from { transform: scale(1) translate(0, 0); opacity: .7; }
  to   { transform: scale(1.18) translate(10px, 12px); opacity: 1; }
}

/* Sem imagem de fundo — só gradiente */
.mc-auth-gradient { display: none; }

/* ── Topo: botão voltar + logo + marca ─────────────────────────── */
.mc-auth-top {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 20px 24px;
  gap: 8px;
  animation: mc-top-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both;
}

@keyframes mc-top-in {
  from { opacity: 0; transform: translateY(-16px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Botão voltar */
.mc-auth-back {
  position: absolute;
  left: 16px;
  top: 48px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  backdrop-filter: blur(4px);
}
.mc-auth-back:active { background: rgba(255, 255, 255, 0.25); }

/* Logo: quadrado laranja com sombra */
.mc-auth-logo-wrap {
  width: 68px;
  height: 68px;
  background: #fff;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}

.mc-auth-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Nome da marca */
.mc-auth-brand {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.8px;
  line-height: 1;
  margin-top: 2px;
}

.mc-auth-brand-mao   { color: #ffffff; }
.mc-auth-brand-certa { color: #0F0F12; }

/* ── Card branco (bottom sheet) ─────────────────────────────────── */
.mc-auth-card {
  position: relative;
  z-index: 2;
  flex: 1;
  background: #fff;
  border-radius: 28px 28px 0 0;
  padding: 8px 24px 32px;
  overflow-y: auto;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.3);
  animation: mc-card-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

@keyframes mc-card-up {
  from { transform: translateY(50px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Handle */
.mc-auth-card::before {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  background: #E5E7EB;
  border-radius: 2px;
  margin: 12px auto 24px;
}

/* ── Título e subtítulo ─────────────────────────────────────────── */
.mc-auth-title {
  font-size: 24px;
  font-weight: 900;
  color: #0F172A;
  margin-bottom: 4px;
  letter-spacing: -0.4px;
  line-height: 1.15;
}

.mc-auth-subtitle {
  font-size: 14px;
  color: #64748B;
  margin-bottom: 24px;
  font-weight: 500;
  line-height: 1.5;
}

/* ── Campos de formulário ───────────────────────────────────────── */
.mc-field {
  margin-bottom: 16px;
}

.mc-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 7px;
}

.mc-input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #0F172A;
  background: #F8FAFC;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
  box-sizing: border-box;
}

.mc-input:focus {
  border-color: #FF5A1F;
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.12);
  background: #fff;
}

.mc-input::placeholder { color: #CBD5E1; font-weight: 400; }
select.mc-input { cursor: pointer; }
textarea.mc-input { height: auto; min-height: 88px; padding: 14px 16px; resize: none; }

/* ── Botão primário ─────────────────────────────────────────────── */
.mc-auth-btn {
  width: 100%;
  height: 54px;
  border-radius: 14px;
  background: #FF5A1F;
  color: #fff;
  border: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(255, 90, 31, 0.35);
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
  margin-top: 4px;
  letter-spacing: -0.1px;
}

.mc-auth-btn:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(255, 90, 31, 0.2);
  background: #E04510;
}

.mc-auth-btn:disabled {
  background: #F1F5F9;
  color: #94A3B8;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.mc-auth-btn.loading {
  opacity: 0.85;
  pointer-events: none;
}

/* Spinner dentro do botão */
.mc-btn-spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: mc-spin 0.65s linear infinite;
  display: none;
  flex-shrink: 0;
}

.mc-auth-btn.loading .mc-btn-spinner { display: block; }
.mc-auth-btn.loading .mc-btn-label   { display: none; }

@keyframes mc-spin { to { transform: rotate(360deg); } }

/* ── Google button ─────────────────────────────────────────────── */
.mc-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  padding: 0 20px;
  background: #fff;
  color: #1E293B;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  margin-top: 4px;
}

.mc-google-btn:active {
  background: #F8FAFC;
  border-color: #CBD5E1;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

.mc-google-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ── Divider "ou" ───────────────────────────────────────────────── */
.mc-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  font-size: 13px;
  color: #94A3B8;
  font-weight: 500;
}

.mc-auth-divider::before,
.mc-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #E2E8F0;
}

/* ── Erro ───────────────────────────────────────────────────────── */
.mc-auth-error {
  background: #FEF2F2;
  border: 1.5px solid #FECACA;
  color: #DC2626;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
  display: none;
  line-height: 1.5;
  animation: mc-shake 0.3s ease;
}
.mc-auth-error.show { display: block; }

@keyframes mc-shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

/* ── Termos ─────────────────────────────────────────────────────── */
.otp-termos-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 4px;
  padding: 14px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  cursor: pointer;
}
.otp-termos-cb {
  width: 20px;
  height: 20px;
  min-width: 20px;
  accent-color: #FF5A1F;
  margin-top: 1px;
  cursor: pointer;
}
.otp-termos-txt {
  font-size: 13px;
  color: #64748B;
  line-height: 1.55;
  user-select: none;
}
.otp-termos-txt a { color: #FF5A1F; text-decoration: underline; }
.otp-termos-txt strong { color: #1E293B; font-weight: 700; }

/* ── OTP code input ─────────────────────────────────────────────── */
.mc-otp-code-input {
  text-align: center;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 12px;
  caret-color: #FF5A1F;
}

/* ── Notas e hints ──────────────────────────────────────────────── */
.mc-auth-sms-note {
  text-align: center;
  color: #94A3B8;
  font-size: 13px;
  margin-top: 14px;
  line-height: 1.5;
}

.otp-resend-wrap {
  text-align: center;
  margin-top: 18px;
  min-height: 32px;
}
.otp-timer-text { color: #94A3B8; font-size: 14px; }
.otp-resend-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #FF5A1F;
  cursor: pointer;
  padding: 6px 12px;
  text-decoration: underline;
}
.otp-resend-btn:disabled { color: #94A3B8; text-decoration: none; cursor: default; }

/* ── Sucesso ────────────────────────────────────────────────────── */
.mc-auth-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 0 0;
}
.mc-auth-success-icon {
  font-size: 56px;
  margin-bottom: 12px;
  animation: mc-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes mc-pop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ── Links ──────────────────────────────────────────────────────── */
.mc-auth-link {
  color: #FF5A1F;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* ── Ajustes responsivos ────────────────────────────────────────── */
@media (max-height: 680px) {
  .mc-auth-top {
    padding: 24px 20px 16px;
  }
  .mc-auth-logo-wrap {
    width: 52px;
    height: 52px;
  }
  .mc-auth-brand { font-size: 22px; }
  .mc-auth-card {
    padding: 6px 20px 20px;
  }
  .mc-auth-card::before { margin: 8px auto 16px; }
  .mc-auth-title { font-size: 20px; }
}

/* ── OTP errors no tema escuro da tela ──────────────────────────── */
#page-otp-email .mc-auth-error,
#page-otp-code .mc-auth-error,
#page-otp-perfil-cliente .mc-auth-error,
#page-otp-perfil-prestador .mc-auth-error {
  background: rgba(239, 68, 68, .18);
  border-color: rgba(239, 68, 68, .4);
  color: #FCA5A5;
}

/* ── Pendente sair btn ──────────────────────────────────────────── */
.otp-pendente-sair-btn {
  background: #334155 !important;
  margin-top: 24px;
}

/* ══════════════════════════════════════════════════════════════════
   MODAL DE AGENDAMENTO — adicionado para corrigir TypeError agendamento.js
   ══════════════════════════════════════════════════════════════════ */

/* Overlay */
.agd-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

/* Caixa do modal (bottom-sheet em mobile) */
.agd-modal-box {
  background: var(--bg, #fff);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 520px;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -4px 32px rgba(0,0,0,.18);
}

/* Cabeçalho */
.agd-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  flex-shrink: 0;
}
.agd-header-emoji { font-size: 28px; line-height: 1; display:flex; align-items:center; color: var(--or, #FF5A1F); }
.agd-header-info  { flex: 1; }
.agd-header-titulo{ font-size: 16px; font-weight: 700; color: var(--tx, #111827); }
.agd-header-preco { font-size: 14px; color: var(--or, #FF5A1F); font-weight: 600; margin-top: 2px; }
.agd-modal-close  {
  background: none; border: none; font-size: 18px; cursor: pointer;
  color: var(--tx3, #6b7280); padding: 4px 8px; border-radius: 8px;
  line-height: 1;
}
.agd-modal-close:hover { background: var(--bg2, #f3f4f6); }

/* Corpo rolável */
.agd-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}
.agd-section-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--tx3, #6b7280);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 10px;
}

/* Cards imediato / agendado */
.agd-tipo-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
.agd-tipo-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 2px solid var(--border, #e5e7eb);
  border-radius: 14px;
  cursor: pointer;
  background: var(--bg, #fff);
  transition: border-color .15s, background .15s;
  user-select: none;
}
.agd-tipo-card.selected,
.agd-tipo-card:has(input:checked) {
  border-color: var(--or, #FF5A1F);
  background: #fff7ed;
}
.agd-tipo-icon { font-size: 24px; line-height: 1; display:flex; align-items:center; color: var(--or, #FF5A1F); }
.agd-tipo-nome { font-size: 14px; font-weight: 700; color: var(--tx, #111827); }
.agd-tipo-sub  { font-size: 11px; color: var(--tx3, #6b7280); margin-top: 2px; }

/* Lista de dias */
.agd-dias-lista {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 18px;
  scrollbar-width: none;
}
.agd-dias-lista::-webkit-scrollbar { display: none; }
.agd-dia-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  border: 2px solid var(--border, #e5e7eb);
  border-radius: 12px;
  background: var(--bg, #fff);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s, background .15s;
}
.agd-dia-btn.selected {
  border-color: var(--or, #FF5A1F);
  background: #fff7ed;
}
.agd-dia-nome { font-size: 10px; font-weight: 700; color: var(--tx3, #6b7280); text-transform: uppercase; }
.agd-dia-num  { font-size: 18px; font-weight: 800; color: var(--tx, #111827); }

/* Grid de horários */
.agd-horarios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.agd-hora-btn {
  padding: 10px 6px;
  border: 2px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--bg, #fff);
  font-size: 14px;
  font-weight: 600;
  color: var(--tx, #111827);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.agd-hora-btn.selected {
  border-color: var(--or, #FF5A1F);
  background: #fff7ed;
  color: var(--or, #FF5A1F);
}
.agd-sem-horario { font-size: 13px; color: var(--tx3, #6b7280); padding: 12px 0; text-align: center; }

/* Resumo */
.agd-resumo-box {
  background: var(--bg2, #f3f4f6);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 8px;
}
.agd-resumo-servico { font-size: 14px; font-weight: 700; color: var(--tx, #111827); margin-bottom: 4px; }
.agd-resumo-quando  { font-size: 13px; color: var(--tx2, #374151); margin-bottom: 4px; }
.agd-resumo-preco   { font-size: 18px; font-weight: 800; color: var(--or, #FF5A1F); font-weight: 800; }

/* ─── CORREÇÕES DE SOBREPOSIÇÃO DE BOTÕES ──────────────────────────────
   Unificadas aqui para não criar arquivo extra.
─────────────────────────────────────────────────────────────────────── */

/* 1. #btn-enviar-pedido — ficava atrás da tabbar
   .section tem padding-bottom:0; o step-detalhes não compensava --tabbar-h */
#step-detalhes .section:last-child,
#step-detalhes > .section {
  padding-bottom: calc(var(--tabbar-h, 60px) + var(--safe-bottom, 16px) + 16px);
}
#btn-enviar-pedido {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 8px;
}

/* 2. .mcc-btn-confirmar — dois estilos conflitantes (app-compat linha 2725
   + JS inline app_patch.js linha 2251). JS usava display:flex, CSS não. */
.mcc-btn-confirmar {
  flex: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 16px;
  border: none;
  border-radius: 12px;
  background: var(--or, #FF5A1F);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  transition: background 0.15s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.mcc-btn-confirmar:active   { background: var(--or-dk, #d94e18); }
.mcc-btn-confirmar:disabled { opacity: 0.6; cursor: not-allowed; }
.mcc-btn-confirmar svg      { flex-shrink: 0; }

/* 3. .agd-modal-footer — não tinha CSS algum definido */
.agd-modal-footer {
  flex-shrink: 0;
  padding: 12px 16px calc(12px + var(--safe-bottom, 16px));
  border-top: 1px solid var(--border, #e5e7eb);
  background: var(--bg, #fff);
}

/* 4. .agd-btn-confirmar — só tinha estilo inline no HTML, sem classe CSS */
.agd-btn-confirmar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 14px;
  background: var(--or, #FF5A1F);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 16px rgba(255, 90, 31, 0.28);
  transition: background 0.15s, box-shadow 0.15s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.agd-btn-confirmar:active   { background: var(--or-dk, #d94e18); box-shadow: none; }
.agd-btn-confirmar:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

/* safe-area no modal-box para iPhone com notch */
.agd-modal-box {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 5. .ep-btn-confirmar — garante display:flex (escolher-prestador.css já define
   a maioria, mas reset externo pode herdar inline) */
.ep-btn-confirmar {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
/* ── Badge de agendamento nos cards de pedido ─────────────────── */
/* Exibido em pedidos agendados: data e hora do serviço           */
.agd-card-badge,
.agd-pcv3-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  margin: 6px 0 4px;
  background: #FFF7ED;
  border: 1px solid #FDBA74;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #C2410C;
  line-height: 1.3;
}

/* quando reagendamento está pendente — destaque azul */
.agd-card-badge.agd-reagend-pendente,
.agd-pcv3-badge.agd-reagend-pendente {
  background: #EFF6FF;
  border-color: #93C5FD;
  color: #1D4ED8;
}

/* linha secundária: data atual (riscada) abaixo da nova data pedida */
.agd-card-badge .agd-data-atual {
  font-size: 11px;
  font-weight: 500;
  color: #9CA3AF;
  text-decoration: line-through;
  margin-top: 2px;
  display: block;
}

/* ── Campo de endereço com GPS no pedido ──────────────────────── */
.p-end-gps-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  background: var(--or);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.p-end-gps-btn:active { background: var(--or-dk); }
.p-end-gps-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* estado: localização confirmada — fica verde */
.p-end-gps-btn.gps-ok {
  background: var(--green);
}
.p-end-gps-btn.gps-ok:active { background: var(--green-dk); }

.p-end-gps-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
}
.p-end-gps-status.ok  { background: var(--green-lt); color: var(--green-dk); border: 1px solid #A7F3D0; }
.p-end-gps-status.err { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }
.p-end-gps-status.loading { background: var(--or-lt); color: var(--or-dk); border: 1px solid var(--or-lt2); }

.p-end-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 10px;
  color: var(--tx4);
  font-size: 12px;
  font-weight: 500;
}
.p-end-divider::before,
.p-end-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bd);
}

/* ── Descrição do serviço no step 2 do pedido ─────────────────── */
.wsd-box {
  background: var(--or-lt, #FFF0EB);
  border: 1px solid var(--or-lt2, #FFE4D6);
  border-left: 3px solid var(--or, #FF5A1F);
  border-radius: var(--r-sm, 10px);
  padding: 10px 14px;
  margin-bottom: 14px;
}
.wsd-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--or, #FF5A1F);
  margin-bottom: 5px;
}
.wsd-texto {
  font-size: 13px;
  color: var(--tx2, #374151);
  line-height: 1.55;
}

/* ── Descrição do catálogo no card de pedido disponível (prestador) */
.pcv3-svc-desc {
  font-size: 12px;
  color: var(--tx3, #6B7280);
  line-height: 1.5;
  padding: 7px 10px;
  background: var(--surface2, #F9FAFB);
  border-radius: var(--r-xs, 6px);
  margin-bottom: 8px;
}
.pcv3-svc-desc-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tx4, #9CA3AF);
  margin-bottom: 3px;
}

/* ── Aviso "Material por conta do cliente" ────────────────────── */
/* Versão cliente: no step 2 do pedido (amarelo/âmbar) */
.wmat-aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-left: 3px solid #F59E0B;
  border-radius: var(--r-sm, 10px);
  font-size: 13px;
  color: #92400E;
  line-height: 1.5;
}
.wmat-aviso svg {
  flex-shrink: 0;
  margin-top: 1px;
  stroke: #F59E0B;
}

/* Versão prestador: nos cards de pedido disponível e meus serviços */
.pcv3-material-aviso {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  margin-bottom: 8px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: var(--r-xs, 6px);
  font-size: 12px;
  color: #92400E;
  line-height: 1.4;
}
.pcv3-material-aviso svg { flex-shrink: 0; stroke: #F59E0B; }

/* ── Bloco de informações no checkout ─────────────────────────── */
.ck2-info-bloco {
  margin: 10px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ck2-info-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 12px;
  border-radius: var(--r-sm, 10px);
  font-size: 13px;
  line-height: 1.5;
}
.ck2-info-row .ck2-icon {
  flex-shrink: 0;
  margin-top: 1px;
  width: 15px;
  height: 15px;
  stroke-width: 2;
  fill: none;
  stroke: currentColor;
}
/* Agendamento — azul */
.ck2-info-agendado {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1E40AF;
}
.ck2-info-agendado .ck2-icon { stroke: #3B82F6; }

/* Descrição do serviço — cinza neutro */
.ck2-info-desc {
  background: var(--surface2, #F9FAFB);
  border: 1px solid var(--bd, #E5E7EB);
  color: var(--tx2, #374151);
}
.ck2-info-desc .ck2-icon { stroke: var(--tx3, #6B7280); }

/* Material por conta do cliente — âmbar */
.ck2-info-material {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-left: 3px solid #F59E0B;
  color: #92400E;
}
.ck2-info-material .ck2-icon { stroke: #F59E0B; }

/* ── [v4] Foto do prestador no card de pedido contratado (cliente) */
.pcc-prest-row { display: flex; align-items: center; gap: 10px; }
.pcc-prest-foto {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--bd, #E5E7EB); flex-shrink: 0;
}
.pcc-prest-foto-init {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #FF5A1F, #CC3D00);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #fff;
}
.pcc-prest-info { flex: 1; min-width: 0; }

/* ── Botão "Estou a caminho" ──────────────────────────────────── */
.pcc-btn-acaminho {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 10px 14px;
  background: #EFF6FF; border: 1.5px solid #BFDBFE;
  border-radius: var(--r-sm, 10px);
  font-size: 13px; font-weight: 700; color: #1D4ED8;
  cursor: pointer; font-family: inherit;
  transition: background 0.15s;
  margin-bottom: 8px;
}
.pcc-btn-acaminho:hover { background: #DBEAFE; }
.pcc-btn-acaminho:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Modal de perfil público do prestador ────────────────────── */
.pp-box { max-height: 85vh; overflow-y: auto; }
.pp-topo { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0 12px; }
.pp-foto { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bd); flex-shrink: 0; }
.pp-foto-init {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #FF5A1F, #CC3D00);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #fff;
}
.pp-nome { font-size: 17px; font-weight: 800; color: var(--tx); margin-bottom: 3px; }
.pp-loc { font-size: 12px; color: var(--tx3); display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.pp-nota { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.pp-nct { font-size: 11px; color: var(--tx3); }
.pp-stats {
  display: flex; gap: 0; border: 1px solid var(--bd);
  border-radius: var(--r-sm); overflow: hidden; margin: 12px 0;
}
.pp-stat { flex: 1; text-align: center; padding: 10px 6px; }
.pp-stat + .pp-stat { border-left: 1px solid var(--bd); }
.pp-stat-n { font-size: 16px; font-weight: 800; color: var(--tx); }
.pp-stat-l { font-size: 10px; color: var(--tx3); margin-top: 2px; }
.pp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pp-tag {
  padding: 4px 10px; background: var(--or-lt, #FFF0EB);
  border: 1px solid var(--or-lt2, #FFE4D6); border-radius: 99px;
  font-size: 12px; font-weight: 600; color: var(--or, #FF5A1F);
}
.pp-svc { font-size: 13px; color: var(--tx2); line-height: 1.5; margin-bottom: 12px; padding: 10px 12px; background: var(--surface2); border-radius: var(--r-sm); }
.pp-avs-titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tx3); margin-bottom: 8px; }
.pp-avs { display: flex; flex-direction: column; gap: 8px; }
.pp-av { padding: 10px 12px; background: var(--surface2); border-radius: var(--r-sm); }
.pp-av-stars { margin-bottom: 4px; }
.pp-av-txt { font-size: 13px; color: var(--tx2); line-height: 1.4; }
.pp-av-resp { font-size: 12px; color: var(--tx3); margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--or); font-style: italic; }

/* ── Dashboard de ganhos ──────────────────────────────────────── */
.dg-box { max-height: 85vh; overflow-y: auto; }
.dg-cards { display: flex; gap: 10px; margin: 12px 0 16px; }
.dg-card {
  flex: 1; padding: 14px 12px; background: var(--surface2);
  border: 1px solid var(--bd); border-radius: var(--r-sm); text-align: center;
}
.dg-card-dest { background: var(--or-lt, #FFF0EB); border-color: var(--or-lt2, #FFE4D6); }
.dg-card-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tx3); margin-bottom: 6px; }
.dg-card-val { font-size: 20px; font-weight: 800; color: var(--tx); }
.dg-card-dest .dg-card-val { color: var(--or, #FF5A1F); }
.dg-card-sub { font-size: 11px; color: var(--tx3); margin-top: 4px; }
.dg-tx-titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tx3); margin-bottom: 8px; }
.dg-txs { display: flex; flex-direction: column; gap: 6px; }
.dg-tx { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: var(--surface2); border-radius: var(--r-sm); font-size: 13px; }
.dg-tx-desc { color: var(--tx2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 10px; }
.dg-tx-val { font-weight: 700; flex-shrink: 0; }

/* ── Carteira 3 colunas (disponivel / reserva / este-mes) ─────── */
.wallet-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.wallet-sub {
  min-width: 0;
}
.wallet-sub-label {
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  font-size: 9px;
}
.wallet-sub-val {
  font-size: 14px;
}
/* Reserva em cor mais suave — não é dinheiro disponível ainda */
#prest-wallet-reserva {
  color: rgba(255,255,255,0.55) !important;
}