/*
 * KAD Leilões — Componentes customizados
 *
 * Paleta de marca:
 *   --kad-orange:   #F16E22   (laranja primário — CTAs, preço, destaque)
 *   --kad-orange-lt:#F3945C   (laranja claro — hover, badges secundários)
 *   --kad-black:    #010101   (quase preto — texto principal)
 *   --kad-gray:     #EEEEEE   (cinza claro — fundos, separadores)
 *
 * Para gerar o CSS de produção (sem CDN):
 *   tailwindcss -i input.css -o static/css/styles.css --minify
 */

:root {
  --kad-orange:    #F16E22;
  --kad-orange-lt: #F3945C;
  --kad-black:     #010101;
  --kad-gray:      #EEEEEE;
}

/* ── Reset mínimo ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; font-family: system-ui, sans-serif; }
body { margin: 0; background: #f9fafb; color: var(--kad-black); }
img, svg, video { display: block; max-width: 100%; }

/* ── Card ─────────────────────────────────────────────────────────────────── */
.card {
  background-color: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
.card:hover {
  box-shadow: 0 6px 20px 0 rgb(241 110 34 / 0.15);
  transform: translateY(-2px);
}

/* ── Botões ───────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 1.25rem;
  background-color: var(--kad-orange);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s;
  white-space: nowrap;
}
.btn-primary:hover  { background-color: var(--kad-orange-lt); }
.btn-primary:active { background-color: #d45a16; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 1.25rem;
  background-color: #ffffff;
  color: var(--kad-black);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  border: 1px solid #d1d5db;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.btn-secondary:hover { background-color: var(--kad-gray); border-color: #9ca3af; }

/* ── Inputs ───────────────────────────────────────────────────────────────── */
.input-field {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--kad-black);
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
  -webkit-appearance: none;
}
.input-field:focus {
  border-color: var(--kad-orange);
  box-shadow: 0 0 0 3px rgb(241 110 34 / 0.15);
}
.input-field::placeholder { color: #9ca3af; }

/* ── Badges genéricos ─────────────────────────────────────────────────────── */
.badge-success {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  background-color: #dcfce7;
  color: #166534;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 9999px;
  letter-spacing: 0.02em;
}
.badge-warning {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  background-color: #fef9c3;
  color: #854d0e;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 9999px;
}
.badge-info {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  background-color: #dbeafe;
  color: #1e40af;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 9999px;
}
.badge-danger {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  background-color: #fee2e2;
  color: #991b1b;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 9999px;
}

/* ── Badges KAD ───────────────────────────────────────────────────────────── */

/* Desconto — flutuante sobre a foto do card */
.badge-discount {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  background-color: var(--kad-orange);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: 9999px;
  letter-spacing: 0.03em;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.25);
}

/* Rodada do leilão — 1º / 2º / 3º */
.badge-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 0.375rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}
.badge-round-1 {
  background-color: var(--kad-orange);
  color: #ffffff;
}
.badge-round-2 {
  background-color: var(--kad-orange-lt);
  color: #ffffff;
}
.badge-round-3 {
  background-color: var(--kad-gray);
  color: var(--kad-black);
}

/* ── Feature pill (quartos, banheiros, vagas, metragem) ──────────────────── */
.feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  background-color: var(--kad-gray);
  color: #374151;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 9999px;
}

/* ── Animação de entrada dos cards (HTMX swap + carga inicial) ───────────── */
@keyframes cardFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── HTMX loading indicator ──────────────────────────────────────────────── */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-block; }

/* ── Line clamp ───────────────────────────────────────────────────────────── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}