/* =====================================================================
   DESIGN SYSTEM — Pediu Serviço
   Fonte da verdade: buscar.php (tela inicial). Todo componente novo ou
   refeito deve usar essas variáveis em vez de cores/medidas soltas.
   Não é um redesign — é a extração do que a capa já faz certo, pra
   reaplicar no resto do app.
   ===================================================================== */

:root {
  /* ---------- Cores ---------- */
  --ps-bg:            #f1f4f9;  /* fundo geral do app (claro, nunca escuro) */
  --ps-bg-tinted:     #c9ddf5;  /* fundo azul ~20% (não branco, não escuro) — usado em
                                    telas específicas onde botões claros precisam de mais
                                    contraste: tela inicial, categoria, descrever pedido,
                                    mapa, painel do prestador/consumidor */
  --ps-surface:       #ffffff;  /* cards, header, inputs */
  --ps-text:          #1a2b4a;  /* texto principal */
  --ps-text-heading:  #14315c;  /* títulos (h1, h2) */
  --ps-text-muted:    #55627a;  /* texto secundário */
  --ps-text-faint:    #9aa6b6;  /* placeholder, texto terciário */

  --ps-primary:       #1c50b5;  /* azul principal (ícones, links, texto de ação) */
  --ps-primary-light: #2f6bff;  /* azul mais vivo (gradientes, hover) */
  --ps-primary-dark:  #123a86;  /* azul mais escuro (gradientes) */
  --ps-gradient-cta:  linear-gradient(135deg, #1f57bd 0%, #123a86 100%); /* banners de destaque */
  --ps-gradient-nav:  linear-gradient(180deg, #1f57bd 0%, #153f95 100%); /* rodapé */
  --ps-gradient-avatar: linear-gradient(145deg, #2f6bff, #1c50b5);

  --ps-accent:        #ffd24d;  /* dourado — destaque de estado ativo, nunca fundo grande */
  --ps-danger:        #e63946;  /* badges de alerta/contagem */
  --ps-danger-bg:      #fdecec;
  --ps-success:       #10b981;
  --ps-warning:       #f59e0b;

  --ps-border:        #e7ecf3;  /* borda padrão de header/cards */
  --ps-border-soft:   #eaeef4;  /* borda de cards */
  --ps-border-input:  #e2eaf6;  /* borda de inputs/search */
  --ps-divider:       #f2f5f9;  /* divisórias dentro de listas/menus */
  --ps-chip-bg:       #f3f6fc;  /* fundo de pill/chip (user chip) */

  /* ---------- Tipografia ---------- */
  --ps-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
  --ps-fs-h1:     23px;  /* título hero de tela */
  --ps-fs-h2:     19px;  /* título de seção */
  --ps-fs-body:   15px;  /* texto padrão, inputs */
  --ps-fs-label:  13px;  /* rótulos de card, botões pequenos */
  --ps-fs-small:  12.5px;
  --ps-weight-heading: 800;
  --ps-weight-strong:  700;
  --ps-weight-body:    500;

  /* ---------- Espaçamento (escala base 4px) ---------- */
  --ps-space-1: 4px;
  --ps-space-2: 8px;
  --ps-space-3: 12px;
  --ps-space-4: 16px;
  --ps-space-5: 20px;
  --ps-space-6: 24px;
  --ps-page-padding: 14px;      /* padding lateral padrão do conteúdo */
  --ps-page-max-width: 640px;   /* largura máxima do conteúdo central */

  /* ---------- Raios ---------- */
  --ps-radius-sm:  10px;  /* inputs pequenos, chips */
  --ps-radius-md:  14px;  /* botões, search bar, nav items */
  --ps-radius-lg:  16px;  /* CTAs, banners */
  --ps-radius-xl:  18px;  /* hero, cards grandes */
  --ps-radius-full: 999px; /* pills, avatares */

  /* ---------- Sombras (sempre com tom azul-marinho, nunca preto puro) ---------- */
  --ps-shadow-header: 0 1px 6px rgba(18,49,92,.05);
  --ps-shadow-card:   0 3px 10px rgba(20,49,92,.05);
  --ps-shadow-card-hover: 0 6px 16px rgba(20,49,92,.12);
  --ps-shadow-raised: 0 6px 16px rgba(20,49,92,.10);
  --ps-shadow-dropdown: 0 10px 26px rgba(20,49,92,.18);
  --ps-shadow-cta:    0 8px 20px rgba(18,58,134,.28);
  --ps-shadow-nav:    0 -4px 18px rgba(18,49,92,.25);

  /* ---------- Transições ---------- */
  --ps-transition-fast: .15s ease;
}

/* ---------- Reset leve ---------- */
.ps-root, .ps-root * { box-sizing: border-box; }
.ps-root {
  font-family: var(--ps-font);
  color: var(--ps-text);
  background: var(--ps-bg);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Layout de página padrão ---------- */
.ps-content {
  max-width: var(--ps-page-max-width);
  margin: 0 auto;
  padding: var(--ps-space-3) var(--ps-page-padding) var(--ps-space-2);
}

/* ---------- Tipografia ---------- */
.ps-h1 { font-size: var(--ps-fs-h1); font-weight: var(--ps-weight-heading); color: var(--ps-text-heading); letter-spacing: -.3px; line-height: 1.18; }
.ps-h2 { font-size: var(--ps-fs-h2); font-weight: var(--ps-weight-heading); color: var(--ps-text-heading); letter-spacing: -.2px; }
.ps-text-muted { color: var(--ps-text-muted); }
.ps-text-faint { color: var(--ps-text-faint); }

/* ---------- Botões ---------- */
.ps-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ps-font); font-size: var(--ps-fs-body); font-weight: var(--ps-weight-strong);
  border-radius: var(--ps-radius-md); padding: 13px 20px; border: none; cursor: pointer;
  text-decoration: none; transition: transform var(--ps-transition-fast), box-shadow var(--ps-transition-fast), opacity var(--ps-transition-fast);
}
.ps-btn-primary { background: var(--ps-gradient-cta); color: #fff; box-shadow: var(--ps-shadow-cta); }
.ps-btn-primary:hover { transform: translateY(-1px); }
.ps-btn-primary:active { transform: scale(.98); }
.ps-btn-primary:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.ps-btn-secondary { background: var(--ps-surface); color: var(--ps-primary); border: 1.5px solid var(--ps-border-input); }
.ps-btn-secondary:active { background: var(--ps-chip-bg); }
.ps-btn-ghost { background: transparent; color: var(--ps-primary); font-weight: var(--ps-weight-strong); padding: 8px 10px; }

/* ---------- Cards ---------- */
.ps-card {
  background: var(--ps-surface); border: 1px solid var(--ps-border-soft);
  border-radius: var(--ps-radius-xl); box-shadow: var(--ps-shadow-card);
  padding: var(--ps-space-4);
}
a.ps-card { display: block; text-decoration: none; color: inherit; transition: transform var(--ps-transition-fast), box-shadow var(--ps-transition-fast); }
a.ps-card:active { transform: scale(.98); box-shadow: var(--ps-shadow-card-hover); }

/* ---------- Campo de busca / formulário ---------- */
.ps-search-wrap, .ps-input-wrap {
  display: flex; align-items: center; gap: 10px;
  background: var(--ps-surface); border: 1px solid var(--ps-border-input);
  border-radius: var(--ps-radius-md); padding: 13px 15px; box-shadow: var(--ps-shadow-raised);
}
.ps-search-wrap svg, .ps-input-wrap svg { color: var(--ps-text-faint); flex-shrink: 0; }
.ps-input, .ps-search-input {
  border: none; outline: none; width: 100%; font-size: var(--ps-fs-body);
  font-family: var(--ps-font); color: var(--ps-text); background: transparent;
}
.ps-input::placeholder, .ps-search-input::placeholder { color: var(--ps-text-faint); }
.ps-field-label { display: block; font-size: var(--ps-fs-label); font-weight: var(--ps-weight-strong); color: var(--ps-text); margin-bottom: 6px; }

/* ---------- Cabeçalho padrão ---------- */
.ps-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px var(--ps-page-padding); min-height: 56px;
  background: var(--ps-surface); border-bottom: 1px solid var(--ps-border);
  box-shadow: var(--ps-shadow-header);
}

/* ---------- Rodapé de navegação ---------- */
.ps-bottom-nav {
  display: flex; gap: 9px; padding: 9px 12px;
  background: var(--ps-gradient-nav); box-shadow: var(--ps-shadow-nav);
}
.ps-bottom-nav .ps-nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; background: var(--ps-surface); border-radius: var(--ps-radius-md); padding: 9px 6px;
  text-decoration: none; color: var(--ps-text-heading); font-size: 11.5px; font-weight: var(--ps-weight-strong);
  box-shadow: 0 2px 6px rgba(0,0,0,.14); position: relative;
}
.ps-bottom-nav .ps-nav-item svg { color: var(--ps-primary); }
.ps-bottom-nav .ps-nav-item.active { box-shadow: 0 0 0 2px var(--ps-accent), 0 2px 8px rgba(0,0,0,.2); }
.ps-bottom-nav .ps-nav-item:active { transform: translateY(1px); }

/* ---------- Badge/contador ---------- */
.ps-badge {
  position: absolute; top: 3px; right: 50%; transform: translateX(20px);
  background: var(--ps-danger); color: #fff; font-size: 10px; font-weight: 800;
  min-width: 17px; height: 17px; line-height: 17px; border-radius: 9px;
  text-align: center; padding: 0 4px; box-shadow: 0 0 0 2px #fff;
}

/* ---------- Estados de foco (acessibilidade) ---------- */
.ps-btn:focus-visible, .ps-input:focus-visible, a.ps-card:focus-visible {
  outline: 2px solid var(--ps-primary-light); outline-offset: 2px;
}