/* ═══════════════════════════════════════════════════════════════════════
   Freedom — freedom.css  v2.0
   CSS PRINCIPAL UNIFICADO
   Substitui: style.css, mc-theme-2025.css, freedom-brand.css,
   freedom-redesign-2025.css, freedom-ux-nova.css, freedom-v2.css,
   freedom-status-flow.css
   ZERO !important em código novo.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 1. RESET & BASE ─────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tx);
  background: var(--bg);
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Impede pull-to-refresh nativo do Chrome/WebView */
  touch-action: pan-x pan-y;
}

img {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

img.clickable,
img.avatar-img {
  pointer-events: auto;
}

/* iOS: evita zoom em inputs */
input,
select,
textarea {
  font-size: 16px;
  font-family: var(--font);
}

button,
[role="button"],
.btn {
  touch-action: manipulation;
  cursor: pointer;
}

/* ─── 2. SCROLLBAR GLOBAL — INVISÍVEL (app nativo) ───────────────────── */

*,
*::before,
*::after {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge */
}

*::-webkit-scrollbar {
  display: none;                  /* Chrome/Safari/WebView */
}

/* ─── 3. LAYOUT PRINCIPAL ────────────────────────────────────────────── */

#app-wrapper {
  position: fixed;
  inset: 0;
  background: var(--bg);
  overflow: hidden;
  /* Desktop: center the app in a phone-like container */
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: #1a1a2e;  /* dark bg behind the app on desktop */
}

/* Phone-width wrapper on desktop */
@media (min-width: 520px) {
  #app-wrapper {
    background: #111;
  }
  .page {
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 0 0 60px rgba(0,0,0,.5);
    position: relative;
  }
}

/* ─── 4. PÁGINAS ─────────────────────────────────────────────────────── */

.page {
  display: none;
  flex-direction: column;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: var(--bg);
}

.page.active {
  display: flex;
}

/* ─── 5. SCROLL CONTAINER ────────────────────────────────────────────── */

.page-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  /* padding-bottom garante espaço acima da tabbar */
  padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom));
}

/* Variante sem tabbar (login, splash, modals) */
.page-content.no-tab {
  padding-bottom: var(--safe-bottom);
}

/* ─── 6. TOPBAR ──────────────────────────────────────────────────────── */

.topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-5);
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--bd);
  position: relative;
  z-index: 10;
}

.topbar-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--tx);
  letter-spacing: -0.3px;
}

.topbar-sub {
  font-size: 12px;
  color: var(--tx3);
  margin-top: 1px;
  font-weight: 500;
}

.topbar.orange {
  background: var(--pr);
  border-bottom: none;
}

.topbar.orange .topbar-title {
  color: #fff;
}

.topbar.orange .topbar-sub {
  color: rgba(255, 255, 255, 0.75);
}

/* ─── 7. TABBAR ──────────────────────────────────────────────────────── */

.tabbar {
  flex-shrink: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--surface);
  border-top: 1px solid var(--bd);
  display: flex;
  align-items: stretch;
  z-index: 200;
}

.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  padding: 8px 4px;
  position: relative;
  transition: opacity var(--dur-fast) var(--ease);
}

.tab-btn:active {
  opacity: 0.7;
}

.tab-btn .tab-icon {
  font-size: 22px;
  color: var(--tx4);
  line-height: 1;
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--spring);
}

.tab-btn .tab-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--tx4);
  transition: color var(--dur-fast) var(--ease);
}

.tab-btn.active .tab-icon {
  color: var(--pr);
  transform: translateY(-1px);
}

.tab-btn.active .tab-label {
  color: var(--pr);
}

/* Indicador ativo — barra acima do ícone */
.tab-btn.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  background: var(--pr);
  border-radius: 0 0 var(--r-pill) var(--r-pill);
  animation: tab-bar-in var(--dur) var(--spring) both;
}

@keyframes tab-bar-in {
  from { opacity: 0; transform: translateX(-50%) scaleX(0); }
  to   { opacity: 1; transform: translateX(-50%) scaleX(1); }
}

/* Badge de notificação */
.tab-badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 18px);
  min-width: 16px;
  height: 16px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid var(--surface);
}

.tab-badge:empty {
  display: none;
}

/* ─── 8. HERO / HEADER LARANJA ───────────────────────────────────────── */

.hero {
  flex-shrink: 0;
  background: linear-gradient(160deg, #0D1B2A 0%, #0A1628 60%, #061020 100%);
  padding: var(--sp-5);
  padding-top: calc(var(--sp-5) + var(--safe-top));
}

.hero-greeting {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
  margin-bottom: 2px;
}

.hero-name {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
  margin-bottom: var(--sp-4);
}

/* Barra de busca no hero */
.search-bar {
  background: #1A1A1A;
  border: 1.5px solid rgba(255,255,255,.08);
  border-radius: var(--r-sm);
  height: 48px;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
  box-shadow: none;
  transition: border-color .15s;
}
.search-bar:focus-within {
  border-color: rgba(0,201,184,.4);
}

.search-bar i {
  color: var(--tx3);
  font-size: 18px;
  flex-shrink: 0;
}

.search-bar input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  color: var(--tx);
  outline: none;
}

.search-bar input::placeholder {
  color: #666;
}

/* ─── 9. SECTION & CHIPS ─────────────────────────────────────────────── */

.section {
  padding: var(--sp-4) var(--sp-4) 0;
}

.section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--tx3);
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
  text-transform: uppercase;
}



/* ─── 10. CARDS ──────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border-radius: var(--r);
  padding: var(--sp-4);
  margin: 0 var(--sp-4) var(--sp-3);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.card:active {
  transform: scale(0.985);
  box-shadow: var(--shadow-xs);
}

.card-sm {
  background: var(--surface);
  border-radius: var(--r);
  padding: var(--sp-3) var(--sp-4);
  margin: 0 var(--sp-4) var(--sp-2);
  box-shadow: var(--shadow-xs);
}

/* Block sem margem lateral — para blocos full-width */
.block {
  background: var(--surface);
  border-radius: var(--r);
  padding: var(--sp-4);
  margin: 0 var(--sp-4) var(--sp-3);
  box-shadow: var(--shadow-xs);
}

.block-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: var(--sp-3);
}

/* ─── 11. GRID DE SERVIÇOS ───────────────────────────────────────────── */

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  padding: var(--sp-4);
}

.svc-card {
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: var(--sp-4) var(--sp-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-fast) var(--spring);
  min-width: 0;
  width: 100%;
  border: 1.5px solid transparent;
}

.svc-card:active {
  transform: scale(0.93);
  border-color: var(--pr);
  background: var(--pr-lt);
}

/* Lista de serviços do prestador — override do .svc-card do catálogo */
#lista-aceitos .svc-card,
#lista-meus-servicos .svc-card,
.lista-servicos-prest .svc-card {
  display: block;
  align-items: unset;
  padding: 16px;
  background: #1A1A1A;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
  margin: 0 0 12px;
  width: auto;
  gap: unset;
}
#lista-aceitos .svc-card:active,
#lista-meus-servicos .svc-card:active,
.lista-servicos-prest .svc-card:active {
  transform: scale(.985);
  border-color: rgba(255,255,255,.12);
  background: #1A1A1A;
}

.svc-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  background: var(--pr-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.svc-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--tx);
  text-align: center;
  line-height: 1.3;
  word-break: break-word;
  overflow-wrap: break-word;
  width: 100%;
}

/* ─── 12. BADGES / TAGS ──────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.badge-orange  { background: var(--pr-lt);   color: var(--pr);      }
.badge-green   { background: var(--green-lt); color: var(--green-dk); }
.badge-amber   { background: var(--amber-lt); color: var(--amber-dk); }
.badge-red     { background: var(--red-lt);   color: var(--red-dk);  }
.badge-blue    { background: var(--blue-lt);  color: var(--blue-dk); }
.badge-gray    { background: var(--bg);       color: var(--tx3);     }

/* ─── 13. BOTÕES ─────────────────────────────────────────────────────── */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  height: 52px;
  border-radius: var(--r);
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font);
  border: none;
  letter-spacing: -0.2px;
  transition: all var(--dur-fast) var(--ease);
  position: relative;
  overflow: hidden;
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Ripple effect */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background var(--dur-fast);
}

.btn:active::after {
  background: rgba(255, 255, 255, 0.12);
}

/* Variantes */
.btn-primary {
  background: var(--pr);
  color: #fff;
  box-shadow: var(--pr-shadow);
}

.btn-primary:active {
  background: var(--pr-dk);
  box-shadow: none;
}

.btn-outline {
  background: transparent;
  color: var(--pr);
  border: 2px solid var(--pr);
}

.btn-outline:active {
  background: var(--pr-lt);
}

.btn-ghost {
  background: var(--bg);
  color: var(--tx2);
  font-size: 15px;
  height: 48px;
}

.btn-ghost:active {
  background: var(--bd);
}

.btn-danger {
  background: var(--red-lt);
  color: var(--red);
  border: 1.5px solid #FECACA;
  height: 46px;
  font-size: 14px;
}

.btn-success {
  background: var(--green);
  color: #fff;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.28);
}

/* Tamanhos */
.btn-sm {
  height: 38px;
  font-size: 13px;
  border-radius: var(--r-sm);
}

.btn-lg {
  height: 58px;
  font-size: 17px;
  border-radius: var(--r-lg);
}

/* Estado loading */
.btn.loading {
  pointer-events: none;
  opacity: 0.85;
}

.btn.loading::before {
  content: '';
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

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

/* Ícone button */
.btn-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--bg);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--tx3);
  flex-shrink: 0;
  transition: all var(--dur-fast) var(--ease);
}

.btn-icon:active {
  background: var(--bd);
  transform: scale(0.92);
}

.btn-icon.orange {
  background: var(--pr);
  color: #fff;
}

/* ─── 14. FORMULÁRIOS ────────────────────────────────────────────────── */

.form-group {
  margin-bottom: var(--sp-4);
}

.form-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--tx3);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.form-control {
  width: 100%;
  height: 48px;
  background: var(--surface2);
  border: 1.5px solid var(--bd);
  border-radius: var(--r-sm);
  padding: 0 var(--sp-4);
  font-size: 15px;
  font-family: var(--font);
  color: var(--tx);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast);
}

.form-control:focus {
  border-color: var(--pr);
  box-shadow: 0 0 0 3px var(--pr-glow);
  background: var(--surface);
}

.form-control::placeholder {
  color: var(--tx4);
}

.form-control.error {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

textarea.form-control {
  height: auto;
  min-height: 88px;
  padding: var(--sp-3) var(--sp-4);
  resize: none;
  line-height: 1.5;
}

/* Input com ícone */
.input-icon-wrap {
  position: relative;
}

.input-icon-wrap .input-icon {
  position: absolute;
  left: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--tx3);
  font-size: 18px;
  pointer-events: none;
}

.input-icon-wrap .form-control {
  padding-left: 42px;
}

/* Contador de caracteres */
.char-count {
  text-align: right;
  font-size: 11px;
  color: var(--tx4);
  margin-top: 4px;
}

/* Quick chips de descrição */
.quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.quick-chip {
  padding: 5px 10px;
  background: var(--bg);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--tx3);
  border: 1px solid var(--bd);
  transition: all var(--dur-fast);
}

.quick-chip:active,
.quick-chip.active {
  background: var(--pr-lt);
  border-color: var(--pr);
  color: var(--pr);
}

/* Mensagem de erro de formulário */
.form-error {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--red-lt);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  font-size: 13px;
  color: var(--red-dk);
  margin-top: var(--sp-2);
}

/* ─── 15. AVATAR ─────────────────────────────────────────────────────── */

.avatar {
  border-radius: 50%;
  background: var(--pr-lt);
  color: var(--pr);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
  position: relative;
}

.avatar-sm  { width: 32px; height: 32px; font-size: 12px; }
.avatar-md  { width: 44px; height: 44px; font-size: 16px; }
.avatar-lg  { width: 56px; height: 56px; font-size: 20px; }
.avatar-xl  { width: 72px; height: 72px; font-size: 26px; }

/* Indicador de status */
.avatar-status {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--surface);
}

.avatar-status.online  { background: var(--green); }
.avatar-status.offline { background: var(--tx4); }
.avatar-status.busy    { background: var(--amber); }

/* ─── 16. PILL TABS ──────────────────────────────────────────────────── */

/* ── Wrapper que cria o fade nas bordas (técnica iFood) ───────── */
.pill-tabs-wrap {
  position: relative;
  flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--bd);
}

/* ── Fade nas bordas (sólido → transparente) ─────────────────── */
.pill-tabs-wrap::before,
.pill-tabs-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 1px;
  width: 56px;            /* largo o suficiente para cortar a tab do lado */
  pointer-events: none;
  z-index: 3;
  transition: opacity .15s ease;
}
.pill-tabs-wrap::before {
  left: 0;
  background: linear-gradient(to right,
    var(--surface) 0%,
    var(--surface) 40%,
    transparent 100%);
  opacity: 0;
}
.pill-tabs-wrap::after {
  right: 0;
  background: linear-gradient(to left,
    var(--surface) 0%,
    var(--surface) 40%,
    transparent 100%);
  opacity: 1;
}
.pill-tabs-wrap.scroll-end::after    { opacity: 0; }
.pill-tabs-wrap.scroll-start::before { opacity: 0; }
.pill-tabs-wrap.scroll-mid::before   { opacity: 1; }

/* ── Seta pulsante — indicador explícito de mais conteúdo ─────── */
.pill-tabs-arrow {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pr, #1A9EFF);
  box-shadow: 0 2px 8px rgba(26,158,255,.5);
  animation: pill-arrow-pulse 1.6s ease-in-out infinite;
  transition: opacity .15s ease;
}
.pill-tabs-arrow.hidden { opacity: 0; pointer-events: none; }
.pill-tabs-arrow svg {
  width: 13px;
  height: 13px;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  /* Deslocamento leve para compensar optical center da seta */
  margin-left: 1px;
}

/* ── Seta esquerda (aparece quando há conteúdo oculto à esquerda) */
.pill-tabs-arrow-left {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--bd);
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
  transition: opacity .15s ease;
  opacity: 0;
}
.pill-tabs-arrow-left.visible { opacity: 1; }
.pill-tabs-arrow-left svg {
  width: 13px;
  height: 13px;
  stroke: var(--tx3, #6B7280);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  margin-right: 1px;
}

@keyframes pill-arrow-pulse {
  0%, 100% {
    transform: translateY(-50%) scale(1);
    box-shadow: 0 2px 8px rgba(26,158,255,.45);
  }
  45% {
    transform: translateY(-50%) scale(1.18) translateX(-2px);
    box-shadow: 0 3px 14px rgba(26,158,255,.65);
  }
}

.pill-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Sem background aqui — fica no wrapper */
  background: transparent;
  border-bottom: none;
  flex-shrink: 0;
}
.pill-tabs::-webkit-scrollbar { display: none; }

.pill-tab {
  flex-shrink: 0;
  white-space: nowrap;
  cursor: pointer;
  padding: 7px 16px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
  border: 1.5px solid transparent;
}

.pill-tab.active {
  background: var(--pr);
  color: #fff;
  border-color: var(--pr);
  box-shadow: 0 2px 8px rgba(26,158,255,.28);
}

.pill-tab.inactive {
  background: transparent;
  color: var(--tx3);
  border-color: var(--bd);
}

.pill-tab.inactive:active {
  background: rgba(255,255,255,0.06);
  border-color: var(--pr);
  color: var(--pr);
  transform: scale(0.96);
}

/* ─── 17. DIVIDER ────────────────────────────────────────────────────── */

.divider {
  height: 1px;
  background: var(--bd);
  margin: 0;
}

.divider-text {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
  margin: var(--sp-4) 0;
}

.divider-text::before,
.divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bd);
}

.divider-text span {
  font-size: 12px;
  color: var(--tx4);
  white-space: nowrap;
}

/* ─── 18. PROGRESS BAR ───────────────────────────────────────────────── */

.progress-bar {
  height: 4px;
  background: var(--bd);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--pr);
  border-radius: var(--r-pill);
  transition: width var(--dur-slow) var(--ease);
}

/* ─── 19. STEP INDICATOR ─────────────────────────────────────────────── */

.steps {
  display: flex;
  align-items: center;
  padding: var(--sp-4) var(--sp-5) var(--sp-2);
  gap: 0;
}

.step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all var(--dur) var(--spring);
}

.step-dot.done    { background: var(--pr);    color: #fff; }
.step-dot.current { background: var(--pr);    color: #fff; box-shadow: 0 0 0 4px var(--pr-lt); }
.step-dot.next    { background: var(--bd);    color: var(--tx4); }

.step-line {
  flex: 1;
  height: 2px;
  background: var(--bd);
  transition: background var(--dur) var(--ease);
}

.step-line.done { background: var(--pr); }

.steps-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 var(--sp-5) var(--sp-3);
  font-size: 11px;
  font-weight: 600;
  color: var(--tx4);
}

.steps-labels .current-label { color: var(--pr); }

/* ─── 20. STATUS TIMELINE ────────────────────────────────────────────── */

.status-track { display: flex; flex-direction: column; }

.status-node {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}

.status-line-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.status-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  transition: all var(--dur) var(--spring);
}

.status-circle.done    { background: var(--green);  color: #fff; }
.status-circle.current { background: var(--pr);     color: #fff; }
.status-circle.next    { background: var(--bd);     border: 2px solid var(--bd2); }

.status-vline {
  width: 2px;
  flex: 1;
  min-height: 20px;
  margin: 2px 0;
}

.status-vline.done    { background: var(--green); }
.status-vline.current { background: linear-gradient(to bottom, var(--pr), var(--bd)); }
.status-vline.next    { background: var(--bd); }

.status-info {
  padding: 0 0 var(--sp-4) var(--sp-3);
  flex: 1;
}

.status-info-title { font-size: 13px; font-weight: 600; color: var(--tx); }
.status-info-sub   { font-size: 11px; color: var(--tx4); margin-top: 2px; }

/* ─── 21. PRICE ROW ──────────────────────────────────────────────────── */

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  font-size: 14px;
  color: var(--tx3);
  border-bottom: 1px solid var(--bd);
}

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

.price-row.total {
  font-size: 17px;
  font-weight: 800;
  color: var(--tx);
  padding-top: var(--sp-3);
}

/* ─── 22. PROVIDER CARD ──────────────────────────────────────────────── */

.provider-card {
  background: var(--surface);
  border-radius: var(--r);
  padding: var(--sp-4);
  margin: 0 var(--sp-4) var(--sp-3);
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}

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

.provider-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.provider-sub {
  font-size: 12px;
  color: var(--tx3);
  margin-top: 2px;
}

/* Stars rating */
.stars { display: flex; gap: 2px; color: var(--amber); font-size: 14px; }

/* ─── 23. CARTEIRA ───────────────────────────────────────────────────── */

.wallet-card {
  background: var(--surface, #1A1A1A);
  border: 1px solid rgba(0,201,184,0.15);
  box-shadow: 0 0 0 1px rgba(0,201,184,0.06), 0 4px 24px rgba(0,0,0,.4);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin: 0 var(--sp-4) var(--sp-3);
  color: #fff;
}

.wallet-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
  font-weight: 500;
}

.wallet-value {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1.1;
}

.wallet-row {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.wallet-sub {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
}

.wallet-sub-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 3px;
  font-weight: 500;
}

.wallet-sub-val {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}

/* ─── 24. CHAT ───────────────────────────────────────────────────────── */

.chat-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: var(--sp-3) 0 80px;
}

.msg-row {
  display: flex;
  gap: var(--sp-2);
  margin: 0 var(--sp-4) var(--sp-3);
  animation: msg-in var(--dur) var(--ease) both;
}

@keyframes msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.msg-row.sent { flex-direction: row-reverse; }

.msg-bubble {
  max-width: 72%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.5;
}

.msg-bubble.recv {
  background: var(--surface);
  color: var(--tx);
  border-bottom-left-radius: 4px;
  box-shadow: var(--shadow-xs);
}

.msg-bubble.sent {
  background: var(--pr);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.msg-time {
  font-size: 10px;
  color: var(--tx4);
  align-self: flex-end;
  flex-shrink: 0;
  padding-bottom: 2px;
}

.msg-time.sent { color: rgba(255, 255, 255, 0.7); }

.chat-input-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--bd);
  padding: var(--sp-3) var(--sp-3);
  padding-bottom: calc(var(--sp-3) + var(--safe-bottom));
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  z-index: 10;
}

.chat-input {
  flex: 1;
  height: 40px;
  border-radius: 20px;
  border: 1.5px solid var(--bd);
  background: var(--bg);
  padding: 0 var(--sp-4);
  font-size: 14px;
  font-family: var(--font);
  color: var(--tx);
  outline: none;
  transition: border-color var(--dur-fast);
}

.chat-input:focus { border-color: var(--pr); }

.chat-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pr);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--spring), background var(--dur-fast);
}

.chat-send-btn:active {
  transform: scale(0.88);
  background: var(--pr-dk);
}

/* ─── 25. SKELETON LOADING ───────────────────────────────────────────── */

.skeleton {
  background: var(--bd);
  border-radius: var(--r);
  overflow: hidden;
  position: relative;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.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 var(--sp-4) var(--sp-3);
}

.skeleton-text {
  height: 14px;
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-2);
}

.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }

/* ─── 26. NOTIFICAÇÕES ───────────────────────────────────────────────── */

.notif-item {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4);
  background: var(--surface);
  border-bottom: 1px solid var(--bd);
  transition: background var(--dur-fast);
}

.notif-item.unread { background: #FFFCFA; }

.notif-item:active { background: var(--bg); }

.notif-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.notif-icon.orange { background: var(--pr-lt); }
.notif-icon.green  { background: var(--green-lt); }
.notif-icon.blue   { background: var(--blue-lt); }

.notif-title { font-size: 14px; font-weight: 700; color: var(--tx); }
.notif-body  { font-size: 12px; color: var(--tx3); margin-top: 2px; line-height: 1.5; }
.notif-time  { font-size: 11px; color: var(--tx4); margin-top: 3px; }

/* Ponto de não-lido */
.notif-dot {
  width: 8px;
  height: 8px;
  background: var(--pr);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

/* ─── 27. TOGGLE SWITCH ──────────────────────────────────────────────── */

.toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-4);
  background: var(--surface);
  border-radius: var(--r);
  margin: 0 var(--sp-4) var(--sp-2);
  box-shadow: var(--shadow-xs);
}

.toggle {
  width: 50px;
  height: 28px;
  border-radius: 14px;
  background: var(--bd);
  display: flex;
  align-items: center;
  padding: 3px;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
  flex-shrink: 0;
}

.toggle.on { background: var(--green); }

.toggle-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:#1A1A1A;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: transform var(--dur) var(--spring);
}

.toggle.on .toggle-thumb { transform: translateX(22px); }

/* ─── 28. INFO BANNERS ───────────────────────────────────────────────── */

.banner {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  margin: 0 var(--sp-4) var(--sp-3);
  font-size: 13px;
  line-height: 1.5;
}

.banner i { flex-shrink: 0; margin-top: 1px; font-size: 16px; }

.banner-orange { background: var(--pr-lt);    color: #9A3412; }
.banner-orange i { color: var(--pr); }

.banner-green  { background: var(--green-lt); color: #065F46; }
.banner-green i { color: var(--green-dk); }

.banner-amber  { background: var(--amber-lt); color: #92400E; }
.banner-amber i { color: var(--amber); }

.banner-blue   { background: var(--blue-lt);  color: #1E40AF; }
.banner-blue i { color: var(--blue); }

.banner-red    { background: var(--red-lt);   color: #991B1B; }
.banner-red i { color: var(--red-dk); }

/* ─── 29. CHECKOUT / BOTTOM SHEET ────────────────────────────────────── */

.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 500;
  animation: overlay-in var(--dur) var(--ease) both;
}

@keyframes overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) + var(--safe-bottom));
  z-index: 600;
  max-height: 92dvh;
  overflow-y: auto;
  animation: sheet-up var(--dur) var(--ease) both;
}

@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--bd2);
  border-radius: var(--r-pill);
  margin: 0 auto var(--sp-4);
}

.sheet-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--tx);
  margin-bottom: var(--sp-4);
  letter-spacing: -0.3px;
}

/* ─── 30. SPLASH SCREEN ──────────────────────────────────────────────── */

#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--pr);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}

#splash.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#splash-logo {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  background:#1A1A1A;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-5);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  animation: splash-pop 0.55s var(--spring) both;
}

@keyframes splash-pop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

#splash-nome {
  font-family: var(--font);
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1px;
  margin-bottom: 4px;
  animation: splash-fade 0.5s var(--ease) 0.15s both;
}

#splash-tagline {
  font-family: var(--font);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  margin-bottom: var(--sp-10);
  animation: splash-fade 0.5s var(--ease) 0.2s both;
}

@keyframes splash-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

#splash-loader {
  width: 44px;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--r-pill);
  overflow: hidden;
}

#splash-loader::after {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  background:#1A1A1A;
  border-radius: var(--r-pill);
  animation: splash-bar 1.1s var(--ease) infinite;
}

@keyframes splash-bar {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ─── 31. HERO HOME (tela inicial) ──────────────────────────────────── */

.mc-screen {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: var(--bg);
  overflow: hidden;
}

.mc-hero {
  flex-shrink: 0;
  background: linear-gradient(180deg, #111111 0%, #000000 100%);
  border-bottom: 1px solid var(--bd);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4) var(--sp-6) var(--sp-4);
  text-align: center;
  gap: 0;
}

.mc-logo-wrap {
  width: 56px;
  height: 56px;
  background:#1A1A1A;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-3);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  flex-shrink: 0;
}

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

.mc-brand-name {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -1px;
  color: #fff;
  line-height: 1;
  margin-bottom: 2px;
}

.mc-slogan-line1 {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.mc-slogan-line2 {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 1px;
}

.mc-trust-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.mc-trust-pill {
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

.mc-services {
  background: var(--surface);
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.mc-services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  align-items: start;
}

.mc-bottom {
  background: var(--surface);
  padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) + var(--safe-bottom));
  border-top: 1px solid var(--bd);
  flex-shrink: 0;
}

.mc-cta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.mc-trust {
  display: flex;
  justify-content: space-around;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--bd);
}

.mc-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--tx3);
  text-align: center;
  line-height: 1.3;
  flex: 1;
}

.mc-trust-item svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ─── 32. HEADER LARANJA PRESTADOR ──────────────────────────────────── */

.prest-hero {
  flex-shrink: 0;
  background: linear-gradient(180deg, #111111 0%, #000000 100%);
  border-bottom: 1px solid var(--bd);
  padding: var(--sp-4) var(--sp-5);
  padding-top: calc(var(--sp-4) + var(--safe-top));
}

.prest-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: var(--sp-3);
}

.prest-stats {
  display: flex;
  gap: var(--sp-3);
}

.prest-stat {
  flex: 1;
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.prest-stat-val {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
}

.prest-stat-lbl {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
  margin-top: 2px;
}

/* ─── 33. ONLINE DOT ─────────────────────────────────────────────────── */

.online-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(0.85); }
}

/* ─── 34. STAT CARDS ─────────────────────────────────────────────────── */

.stat-row {
  display: flex;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  margin-bottom: var(--sp-3);
}

.stat-card {
  flex: 1;
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  text-align: center;
  box-shadow: var(--shadow-xs);
}

.stat-val { font-size: 20px; font-weight: 800; color: var(--tx); }
.stat-lbl { font-size: 10px; color: var(--tx3); margin-top: 2px; font-weight: 600; }

/* ─── 35. AUTH SCREEN ────────────────────────────────────────────────── */

.auth-screen {
  background: var(--surface);
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
}

.auth-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}

.auth-logo-icon {
  width: 48px;
  height: 48px;
  background: var(--pr-lt);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-title {
  font-size: 26px;
  font-weight: 900;
  color: var(--tx);
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}

.auth-sub {
  font-size: 15px;
  color: var(--tx3);
  margin-bottom: var(--sp-8);
  line-height: 1.5;
}

.auth-footer {
  margin-top: auto;
  padding-top: var(--sp-5);
  font-size: 11px;
  color: var(--tx4);
  text-align: center;
  line-height: 1.6;
}

.auth-footer a {
  color: var(--pr);
  font-weight: 600;
  text-decoration: none;
}

/* OTP code input */
.otp-digits {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  margin: var(--sp-6) 0;
}

.otp-digit {
  width: 52px;
  height: 60px;
  border-radius: var(--r-sm);
  border: 2px solid var(--bd);
  background: var(--surface2);
  font-size: 26px;
  font-weight: 900;
  color: var(--tx);
  text-align: center;
  outline: none;
  transition: border-color var(--dur-fast);
  caret-color: var(--pr);
}

.otp-digit:focus {
  border-color: var(--pr);
  box-shadow: 0 0 0 3px var(--pr-glow);
}

.otp-digit.filled {
  border-color: var(--pr);
  background: var(--pr-lt);
}

/* ─── 36. PROFILE SCREEN ─────────────────────────────────────────────── */

.profile-header {
  background: var(--surface);
  padding: var(--sp-5);
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  border-bottom: 1px solid var(--bd);
}

.profile-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--tx);
  letter-spacing: -0.3px;
}

.profile-email {
  font-size: 13px;
  color: var(--tx3);
  margin-top: 2px;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4);
  background: var(--surface);
  border-bottom: 1px solid var(--bd);
  transition: background var(--dur-fast);
  font-size: 15px;
  font-weight: 600;
  color: var(--tx);
}

.profile-menu-item:active { background: var(--bg); }

.profile-menu-item .menu-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.profile-menu-item .menu-arrow {
  margin-left: auto;
  color: var(--tx4);
  font-size: 16px;
}

/* ─── 37. UTILITÁRIOS ────────────────────────────────────────────────── */

/* Espaçamentos verticais rápidos */
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }

/* Flex helpers */
.row     { display: flex; align-items: center; }
.row-sb  { display: flex; align-items: center; justify-content: space-between; }
.col     { display: flex; flex-direction: column; }
.gap-2   { gap: var(--sp-2); }
.gap-3   { gap: var(--sp-3); }
.gap-4   { gap: var(--sp-4); }

/* Texto */
.text-orange { color: var(--pr); }
.text-green  { color: var(--green-dk); }
.text-muted  { color: var(--tx3); }
.text-soft   { color: var(--tx4); }
.text-bold   { font-weight: 700; }
.text-xs     { font-size: 11px; }
.text-sm     { font-size: 13px; }
.text-md     { font-size: 15px; }
.text-lg     { font-size: 17px; }
.text-xl     { font-size: 20px; }
.text-right  { text-align: right; }
.text-center { text-align: center; }

/* ─── 38. ANIMATIONS ─────────────────────────────────────────────────── */

/* Fade in de página */
.page.active {
  animation: page-in var(--dur) var(--ease) both;
}

@keyframes page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Slide up (modals, sheets) */
@keyframes slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* Bounce para novos itens */
@keyframes bounce-in {
  0%   { transform: scale(0.85); opacity: 0; }
  60%  { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); }
}

.animate-bounce-in { animation: bounce-in var(--dur) var(--spring) both; }

/* Card de novo pedido — atenção do prestador */
@keyframes pulse-border {
  0%, 100% { border-color: var(--pr); }
  50%       { border-color: var(--pr-lt); }
}

.card-novo-pedido {
  border: 2px solid var(--pr);
  animation: pulse-border 2s ease-in-out infinite;
}

/* Radar (prestador disponível) */
.radar-wrap {
  position: relative;
  width: 48px;
  height: 48px;
}

.radar-wrap::before,
.radar-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  animation: radar-pulse 2s ease-out infinite;
}

.radar-wrap::after {
  animation-delay: 0.8s;
}

@keyframes radar-pulse {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ─── 39. PERFORMANCE / WEBVIEW ──────────────────────────────────────── */

.card,
.btn,
.tab-btn,
.provider-card,
.notif-item {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

/* Previne seleção de texto acidental */
.tabbar,
.topbar,
.hero,
.prest-hero,
.badge,
.btn {
  user-select: none;
  -webkit-user-select: none;
}

/* ─── HOME PAGE REFINEMENTS ──────────────────────────────────────── */

/* Desktop: center the app with phone-like appearance */
@media (min-width: 520px) {
  html, body { background: #1A1A1A; }

  #app-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: #1A1A1A;
  }

  .page {
    max-width: 480px;
    width: 100%;
    position: relative !important;
    box-shadow: 0 0 80px rgba(0,0,0,.6);
  }

  /* Tabbar is position:absolute inside .page — already contained correctly */
}

/* Service tiles in landing page hero grid */
.mc-services-grid .service-tile {
  padding: 10px 6px;
  border-radius: 12px;
  min-height: 90px;
  justify-content: flex-start;
}

.mc-services-grid .service-tile-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 18px;
  flex-shrink: 0;
}

.mc-services-grid .service-tile-name {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  width: 100%;
}

.mc-services-grid .home-cat-count {
  font-size: 9.5px;
}

/* mc-logo: contain the brand image properly */
.mc-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* mc-hero: tighter on small screens */
@media (max-height: 700px) {
  .mc-hero { padding: 16px 24px 14px; }
  .mc-logo-wrap { width: 60px; height: 60px; margin-bottom: 10px; }
  .mc-brand-name { font-size: 26px; }
}

/* btn-ghost on home — secondary CTA */
.mc-bottom .btn-ghost {
  height: 46px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tx2);
  background: var(--bg);
}

/* mc-trust icons */
.mc-trust svg { color: var(--pr); }


/* ─── HOME HERO: animação de entrada ───────────────────────────────── */

/* Elementos do hero: iniciam invisíveis, animam quando page-home está ativa */
#page-home.active .mc-logo-wrap {
  animation: hero-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both;
}

#page-home.active .mc-brand-name {
  animation: hero-rise 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.18s both;
}

#page-home.active .mc-slogan-line1 {
  animation: hero-rise 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.26s both;
}

#page-home.active .mc-slogan-line2 {
  animation: hero-rise 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.32s both;
}

#page-home.active .mc-trust-pills {
  animation: hero-rise 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
}

/* CTAs entram de baixo */
#page-home.active #mc-btn-contratar {
  animation: hero-rise 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

#page-home.active #mc-btn-trabalhar {
  animation: hero-rise 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.38s both;
}

#page-home.active .mc-trust {
  animation: hero-fade 0.5s ease 0.55s both;
}

@keyframes hero-pop {
  from { opacity: 0; transform: scale(0.65); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Online counter bar: slide in */
#page-home.active .mc-online-bar {
  animation: hero-rise 0.4s ease 0.5s both;
}


/* ─── Prestador: padding-bottom gerenciado pelo .prest-with-bar ────── */
/* NÃO sobrescrever com !important aqui — .prest-with-bar já aplica
   calc(64px + safe-area) para deixar espaço acima da bottom bar.      */
#page-prestador-home .page-content:not(.prest-with-bar) {
  padding-bottom: 24px;
}
/* ════════════════════════════════════════════════════════════════
   PRESTADOR — BOTTOM BAR (estilo Uber Driver)
   ════════════════════════════════════════════════════════════════ */

.prest-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: 64px;
  background:#1A1A1A;
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  z-index: 200;
  padding: 0 4px env(safe-area-inset-bottom, 0);
}

/* ── Conteúdo tem padding-bottom para não ficar atrás da bar ── */
.prest-with-bar {
  padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ── Tab padrão ─────────────────────────────────────────────── */
.ptab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 1px 4px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font);
  color: #9CA3AF;
  transition: color .15s ease;
  min-width: 0;
  /* Com 5 tabs + centro: tamanho mínimo para caber em 360px */
  min-width: 44px;
}
.ptab:active { opacity: .7; }

.ptab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ptab-icon svg {
  width: 21px;
  height: 21px;
  transition: stroke .15s ease;
}

.ptab-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1px;
  line-height: 1;
  transition: color .15s ease;
  white-space: nowrap;
}

/* ── Estado ativo ────────────────────────────────────────────── */
.ptab.ptab-active {
  color: var(--pr, #1A9EFF);
}
.ptab.ptab-active .ptab-icon svg {
  stroke: var(--pr, #1A9EFF);
}

/* Linha indicadora no topo da tab ativa */
.ptab.ptab-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2.5px;
  border-radius: 0 0 3px 3px;
  background: var(--pr, #1A9EFF);
}

/* ── Badge de notificação ────────────────────────────────────── */
.ptab-badge {
  position: absolute;
  top: 5px;
  right: calc(50% - 18px);
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #EF4444;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  padding: 0 4px;
  border:2px solid #1A1A1A;
}

/* ════════════════════════════════════════════════════════════════
   BOTÃO CENTRAL — DISPONÍVEL (destaque Uber Driver)
   ════════════════════════════════════════════════════════════════ */
.ptab-center {
  flex: 0 0 72px;        /* fixo, maior que os outros */
  position: relative;
  top: -18px;            /* sobe acima da barra */
  gap: 4px;
  color: #374151;
}
.ptab-center::before { display: none; } /* sem linha indicadora */

/* Anel externo — círculo elevado */
.ptab-center-ring {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #22C55E;          /* verde = disponível */
  box-shadow:
    0 4px 14px rgba(34,197,94,.5),
    0 0 0 4px #fff,             /* anel branco (separa do bar) */
    0 0 0 5px rgba(34,197,94,.15);
  transition:
    background .3s ease,
    box-shadow .3s ease,
    transform .15s ease;
  position: relative;
}

/* Pulsação suave quando disponível */
.ptab-center-ring.disponivel {
  animation: ptab-pulse 2.2s ease-in-out infinite;
}
@keyframes ptab-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(34,197,94,.5), 0 0 0 4px #fff, 0 0 0 5px rgba(34,197,94,.15); }
  50%       { box-shadow: 0 4px 20px rgba(34,197,94,.7), 0 0 0 4px #fff, 0 0 0 8px rgba(34,197,94,.12); }
}

/* Estado PAUSADO — cinza, sem pulsação */
.ptab-center-ring.pausado {
  background: #9CA3AF;
  box-shadow: 0 4px 14px rgba(156,163,175,.4), 0 0 0 4px #fff, 0 0 0 5px rgba(156,163,175,.1);
  animation: none;
}

/* Feedback de toque */
.ptab-center:active .ptab-center-ring {
  transform: scale(.93);
}

/* Ícone dentro do botão central */
.ptab-center-icon {
  width: 26px;
  height: 26px;
  stroke: #fff;
  stroke-width: 2.5;
}

/* Label abaixo */
.ptab-center .ptab-label {
  font-size: 10px;
  font-weight: 700;
  color: #22C55E;
  transition: color .3s ease;
  margin-top: 2px;
}
.ptab-center.pausado .ptab-label {
  color: #9CA3AF;
}

/* ── Page hero: sem barra de cima (substituída pela bottom bar) ─ */
/* Remove o margin-bottom que compensava a pill-tabs-wrap */
#page-prestador-home .prest-hero {
  margin-bottom: 0;
}
/* ═══════════════════════════════════════════════════════════
   TABELA DE FRETE — wizard de criação de pedido
   ═══════════════════════════════════════════════════════════ */
.wpr-frete-box {
  margin-top: 14px;
  background: #1A1A1A;
  border-radius: 10px;
  padding: 12px 14px;
}
.wpr-frete-titulo {
  font-size: 12px;
  font-weight: 700;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 10px;
}
.wpr-frete-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #1F2937;
}
.wpr-frete-row:last-of-type { border-bottom: none; }
.wpr-frete-label {
  font-size: 13px;
  color: #D1D5DB;
}
.wpr-frete-val {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.wpr-frete-val--gratis {
  color: #10B981;
  font-weight: 700;
}
.wpr-frete-aviso {
  font-size: 11px;
  color: #6B7280;
  margin-top: 10px;
  line-height: 1.4;
}
/* ─── PIX CARD ──────────────────────────────────────────────────────── */
.pix-card {
  margin: 0 16px 12px;
  border-radius: 14px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .12s, box-shadow .12s;
  -webkit-tap-highlight-color: transparent;
}
.pix-card:active { transform: scale(.98); }

/* Estado vazio — chamativo, laranja pulsante */
.pix-card--vazio {
  background: var(--surface, #1A1A1A);
  border: 1.5px solid rgba(0,201,184,0.3);
  box-shadow: 0 4px 18px rgba(0,201,184,.12);
  animation: pixCardPulse 2.8s ease-in-out infinite;
}
@keyframes pixCardPulse {
  0%, 100% { box-shadow: 0 4px 18px rgba(0,201,184,.12); }
  50%       { box-shadow: 0 6px 28px rgba(0,201,184,.22); }
}

/* Anel pulsante decorativo */
.pix-card__pulse {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,.3);
  animation: pixRing 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pixRing {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%       { opacity: 0; transform: scale(1.04); }
}

/* Estado ok — sutil, escuro */
.pix-card--ok {
  background: var(--surface,#1A1A1A);
  border: 1.5px solid var(--border, rgba(255,255,255,0.08));
  box-shadow: var(--shadow-xs);
  animation: none;
}

/* Ícone */
.pix-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.22);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pix-card--ok .pix-card__icon {
  background: rgba(34,197,94,.12);
  color: #16a34a;
}
.pix-card__icon--ok {
  background: rgba(34,197,94,.12) !important;
  color: #16a34a !important;
}

/* Texto */
.pix-card__text { flex: 1; min-width: 0; }
.pix-card__title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
}
.pix-card__sub {
  font-size: 11px;
  color: rgba(255,255,255,.8);
}
.pix-card__label {
  font-size: 11px;
  color: var(--tx4, #9CA3AF);
  margin-bottom: 2px;
}
.pix-card__valor {
  font-size: 13px;
  font-weight: 700;
  color: var(--tx, #1A1A1A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CTA "Cadastrar →" */
.pix-card__cta {
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.2);
  border-radius: 99px;
  padding: 5px 11px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Botão Editar no estado ok */
.pix-card__edit {
  font-size: 11px;
  font-weight: 700;
  color: var(--pr, #1A9EFF);
  background: rgba(26,158,255,.08);
  border: 1px solid rgba(26,158,255,.2);
  border-radius: 99px;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s;
}
.pix-card__edit:hover { background: rgba(26,158,255,.15); }

/* estado ok: os dois filhos do card ficam lado a lado */
.pix-card--ok > #pix-card-salvo {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}