/*
 * Ponte entre o design system do site novo (rm.css, gerado) e este site Symfony.
 * Tudo que é específico daqui fica neste arquivo — rm.css é regenerado por bin/rm-sync-css.
 */

/* ── Utilitários que no site novo vêm de Tailwind @apply (removidos do rm.css) ── */
.container-page {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 20px;
}
@media (min-width: 640px) {
  .container-page { padding-left: 32px; padding-right: 32px; }
}
.rm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.btn-destaque {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  background: var(--color-accent);
  padding: 12px 20px;
  font-weight: 700;
  color: #fff;
  transition: background var(--transition-fast);
}
.btn-destaque:hover { background: var(--color-accent-hover); color: #fff; }
.btn-destaque:disabled { cursor: not-allowed; opacity: .6; }

/* Acessibilidade: some visualmente, mas o leitor de tela lê. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Convivência com o legado ───────────────────────────────────────────── */

/* O <main> cresce para empurrar o rodapé para baixo (body é flex column no rm.css). */
.rm-main { flex: 1 0 auto; }

/* Conteúdo das páginas ainda no layout antigo: devolve a tipografia que elas
   esperavam (o rm.css mudou o body para Inter 16px/1.6). */
.legado {
  font-family: 'Roboto', 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
}

/* Header: estado "cadastro pendente" do arrematante (só existe neste site). */
.header__user--pendente { color: var(--color-accent); }

/* Rodapé: selos de confiança herdados do site atual. */
.footer__selos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}
.footer__selos img { height: 44px; width: auto; display: block; }
.footer__selos #ra-verified-seal { min-height: 44px; }

/* O rm.css dá display a alguns elementos que o JS esconde com [hidden]. */
.rm [hidden] { display: none !important; }

/* ── Home ──────────────────────────────────────────────────────────────── */

/* Hero: slide inativo não pode capturar o clique do ativo (todos são absolute). */
.hero__bg:not(.hero__bg--active) { pointer-events: none; }
.hero__dot:not(.hero__dot--active) .hero__dot-progress { display: none; }

/* Leilão: textos de destaque do ERP (descricaoDestaque / descricaoDestaque2). */
.auction-event__destaque {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-light);
  line-height: 1.35;
}
/* Leilão sem lotes publicados mas com arte de destaque (fotoDestaque). */
.auction-event__banner { display: block; padding: 0 24px 24px; }
.auction-event__banner img { width: 100%; max-height: 320px; object-fit: contain; border-radius: var(--radius-md); }

/* Logos dos comitentes (o site atual tem imagem, não nome). */
.comitente-chip--logos { display: inline-flex; align-items: center; gap: 10px; background: #fff; }
.comitente-chip--logos img { height: 28px; width: auto; max-width: 96px; object-fit: contain; }

/* Imagem do card: some o skeleton quando carrega (rm.js marca --loaded). */
.vlot-card__image-wrapper.img-skeleton:has(.vlot-card__image--loaded) { animation: none; background: var(--color-bg); }

/* Popup do ERP. */
.rm-popup {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(17, 24, 39, .7);
}
/* Como no site atual: imagem no tamanho natural (até 979px), mas sempre inteira na tela. */
.rm-popup__conteudo { position: relative; width: auto; max-width: min(979px, 100%); }
.rm-popup__conteudo img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: calc(100dvh - 48px);
  border-radius: var(--radius-md); box-shadow: var(--shadow-xl);
}
.rm-popup__conteudo--video { width: 80vw; height: 80vh; max-width: none; }
.rm-popup__conteudo--video iframe { width: 100%; height: 100%; border-radius: var(--radius-md); }
.rm-popup__fechar {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--color-text-heading); box-shadow: var(--shadow-lg);
}

/* Aviso de cookies (mesmo cookie CONSENT do site atual). */
.rm-consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999;
  max-width: 760px; margin: 0 auto; padding: 16px 20px;
  display: flex; align-items: center; gap: 16px;
  background: var(--color-primary); color: #fff;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
  font-size: 14px; line-height: 1.5;
}
.rm-consent a { color: #fff; text-decoration: underline; }
.rm-consent__acoes { display: flex; align-items: center; gap: 8px; flex: none; }
.rm-consent__fechar { color: rgba(255,255,255,.7); padding: 6px; }
.rm-consent__fechar:hover { color: #fff; }
@media (max-width: 600px) {
  .rm-consent { flex-direction: column; align-items: stretch; text-align: center; }
  .rm-consent__acoes { justify-content: center; }
}

/* ── Listagem de leilões ───────────────────────────────────────────────── */
.leilao-card__capa-logo { background: #fff; }
.leilao-card__capa-logo img { max-width: 60%; max-height: 60%; object-fit: contain; }
button.chip { font-family: inherit; cursor: pointer; }

/* Estado vazio genérico (equivalente ao <Vazio> do site novo). */
.estado-vazio {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 56px 24px; text-align: center;
  background: var(--color-surface); border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg); color: var(--color-text-light);
}
.estado-vazio h2 { font-size: 20px; }
.estado-vazio .header__btn { margin-top: 8px; }

/* Título do leilão + textos do ERP empilhados (o título ganha a largura toda). */
.auction-event__titulo-bloco { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.auction-event__titulo-bloco .auction-event__title { flex: none; }
.auction-event__banner img { max-height: 180px; }
/* As artes de leilão deste ERP são logos/GIFs pequenos: inteiros e centrados, sem esticar. */
.leilao-card__capa > img { object-fit: contain; padding: 28px 32px; background: #fff; }

/* O menu daqui tem 6 itens (o do site novo, 4): aperta o espaçamento dos links em qualquer
   largura (senão os botões passam da borda do container) e mais ainda antes do hambúrguer
   (1024px), para caber logo + menu + busca + 2 botões (logado: nome/pendente + "Sair"). */
@media (min-width: 1025px) {
  .rm-header .header__nav-link { padding: 8px 10px; }
}
@media (min-width: 1025px) and (max-width: 1360px) { .rm-header .header__nav-link { padding: 8px 8px; } }
@media (min-width: 1025px) and (max-width: 1200px) {
  .rm-header .header__nav-link { padding: 8px 7px; font-size: 13.5px; }
  .rm-header .header__btn { padding: 8px 13px; font-size: 13.5px; }
}
.rm-popup__conteudo > img { cursor: pointer; }

/* Título + textos do ERP (bloco próprio daqui) seguem a regra do design para o título:
   linha inteira a partir de 1024px, e status/praça embaixo. */
@media (max-width: 1024px) {
  .auction-event__titulo-bloco { flex: 1 0 100%; width: 100%; }
}
@media (max-width: 768px) {
  .auction-event__titulo-bloco { align-items: center; text-align: center; }
}

/* A barra antiga de favoritos (#history-bar, ~20px fixa no rodapé) cobria metade do WhatsApp
   e do "voltar ao topo": sobe os dois quando a barra existe. */
body:has(#history-bar) .whatsapp-btn { bottom: 44px; }
body:has(#history-bar) .back-to-top { bottom: 116px; }
@media (max-width: 768px) {
  body:has(#history-bar) .whatsapp-btn { bottom: 36px; }
  body:has(#history-bar) .back-to-top { bottom: 104px; }
}