/* =====================================================================
   classificados.css — Procuro / Ofereço
   Mobile-first. Tokens locais (--cls-*) para não herdar --cc-ink claro
   do tema escuro sobre superfícies claras (regressão de contraste).
   ===================================================================== */
.classificados-page {
  --cls-accent: var(--cc-accent, #b04a24);
  --cls-accent-2: #d4a534;
  --cls-ok: #2e7d4f;
  --cls-bad: #b3261e;
  --cls-radius: 14px;
  /* Tema escuro (padrão do site) */
  --cls-ink: var(--cc-text, #e4e7eb);
  --cls-muted: var(--cc-muted, #9aa3ad);
  --cls-line: var(--cc-line, #3a414a);
  --cls-surface: var(--cc-panel, #22262c);
  --cls-bg-alt: var(--cc-panel-2, #2a2f36);
  --cls-field-bg: var(--cc-bg-elevated, #1c1f24);
  color: var(--cls-ink);
}

html[data-theme="light"] .classificados-page {
  --cls-ink: var(--cc-text, #3a322a);
  --cls-muted: var(--cc-muted, #6f6256);
  --cls-line: var(--cc-line, #ddd2c3);
  --cls-surface: var(--cc-panel, #fffcf7);
  --cls-bg-alt: var(--cc-panel-2, #f3ebe0);
  --cls-field-bg: var(--cc-bg-elevated, #fffcf7);
}

.cls-app {
  font-family: system-ui, -apple-system, sans-serif;
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem;
  color: var(--cls-ink);
}

.cls-app * { box-sizing: border-box; }

.classificados-page .cls-top { padding-top: 1rem; }
.classificados-page #cls-app { max-width: 720px; }

.cls-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cls-brand { font-weight: 800; letter-spacing: .3px; color: var(--cls-ink); }
.cls-top__actions { margin-left: auto; display: flex; gap: .5rem; }

.cls-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--cls-accent); color: #fff; border: 0; border-radius: 11px;
  padding: .6rem 1rem; font-weight: 700; cursor: pointer;
}
.cls-btn--ghost {
  background: transparent; color: var(--cls-ink); border: 1px solid var(--cls-line);
}
.cls-btn--ok { background: var(--cls-ok); color: #fff; }
.cls-btn--bad { background: transparent; color: var(--cls-bad); border: 1px solid var(--cls-bad); }
.cls-btn[disabled] { opacity: .45; cursor: not-allowed; }

.cls-filters { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0; }
.cls-filters__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.cls-chip {
  border: 1px solid var(--cls-line);
  background: var(--cls-field-bg);
  color: var(--cls-ink);
  border-radius: 999px;
  padding: .3rem .8rem;
  cursor: pointer;
  font-weight: 600;
}
.cls-chip.is-active {
  background: var(--cls-accent);
  color: #fff;
  border-color: var(--cls-accent);
}
.cls-select {
  border: 1px solid var(--cls-line);
  background: var(--cls-field-bg);
  border-radius: 11px;
  padding: .45rem .7rem;
  color: var(--cls-ink);
}

.cls-list { display: grid; gap: .75rem; }
.cls-card {
  display: block;
  background: var(--cls-surface);
  border: 1px solid var(--cls-line);
  border-radius: var(--cls-radius);
  padding: .9rem;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.cls-card__title { font-weight: 700; font-size: 1.02rem; color: var(--cls-ink); }
.cls-card__meta { color: var(--cls-muted); font-size: .82rem; margin-top: .2rem; }
.cls-card__price { font-weight: 700; color: var(--cls-ink); }
.cls-price { font-weight: 700; color: var(--cls-ink); }
.cls-price--hidden { color: var(--cls-muted); font-style: italic; }

.cls-field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .75rem; }
.cls-field label { font-weight: 600; font-size: .86rem; color: var(--cls-ink); }
.cls-input, .cls-textarea, .cls-select {
  border: 1px solid var(--cls-line);
  border-radius: 11px;
  padding: .55rem .7rem;
  background: var(--cls-field-bg);
  color: var(--cls-ink);
  font: inherit;
  width: 100%;
}
.cls-input::placeholder,
.cls-textarea::placeholder {
  color: var(--cls-muted);
  opacity: 1;
}
.cls-textarea { min-height: 96px; resize: vertical; }
.cls-seg { display: flex; gap: .4rem; }
.cls-seg button {
  flex: 1;
  border: 1px solid var(--cls-line);
  background: var(--cls-field-bg);
  color: var(--cls-ink);
  border-radius: 11px;
  padding: .6rem;
  font-weight: 700;
  cursor: pointer;
}
.cls-seg button.is-active {
  background: var(--cls-accent);
  color: #fff;
  border-color: var(--cls-accent);
}

.cls-detail img, .cls-card img {
  width: 100%; height: auto; border-radius: 10px; object-fit: cover; max-height: 320px;
}
.cls-detail { display: flex; flex-direction: column; gap: .8rem; }
.cls-detail__row { display: flex; justify-content: space-between; gap: .5rem; }
.cls-detail__row span:first-child { color: var(--cls-muted); }

.cls-state {
  border: 1px solid var(--cls-line);
  border-radius: 12px;
  background: var(--cls-bg-alt);
  color: var(--cls-ink);
  padding: .6rem .9rem;
  font-size: .85rem;
}
.cls-state--pending { border-color: var(--cls-accent-2); }
.cls-state--ok { border-color: var(--cls-ok); }
.cls-state--bad { border-color: var(--cls-bad); }

.cls-empty { text-align: center; color: var(--cls-muted); padding: 2rem 1rem; }
.cls-muted { color: var(--cls-muted); }
.cls-toast {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  background: var(--cls-ink); color: var(--cls-field-bg);
  padding: .65rem 1rem; border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0,0,0,.25); z-index: 60;
}
html[data-theme="dark"] .cls-toast,
:root:not([data-theme="light"]) .cls-toast {
  background: #eceff2;
  color: #121416;
}
html[data-theme="light"] .cls-toast {
  background: #2a2218;
  color: #fffcf7;
}
.cls-toast--bad { background: var(--cls-bad); color: #fff; }

.cls-auth {
  border: 1px solid var(--cls-line);
  border-radius: 12px;
  background: var(--cls-bg-alt);
  color: var(--cls-ink);
  padding: 1rem;
}
.cls-auth a:not(.cls-btn) {
  color: var(--cls-accent);
  font-weight: 700;
}
.cls-auth a.cls-btn,
.cls-auth .cls-btn {
  color: #fff;
}
.cls-mine { border: 1px dashed var(--cls-accent-2); border-radius: 12px; padding: .75rem; color: var(--cls-ink); }
.cls-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }

.cls-contact { word-break: break-all; }

@media (min-width: 600px) {
  .cls-filters__row { flex-direction: row; }
  .cls-list { grid-template-columns: repeat(2, 1fr); }
}