/* Motor de pedidos (filme/série) - 2026-09-26. Reaproveita .guia-busca,
   .recomendacao-sinopse/.recomendacao-expandir (style.css) e .revista-voltar
   já existentes - só o que é específico dessa página fica aqui. */

.catalogo-pedido-intro { color: #ccc; font-size: 0.9rem; margin: 6px 0 16px; }
body[data-template="clean-claro"] .catalogo-pedido-intro { color: #555; }

.catalogo-aviso {
  position: relative;
  background: rgba(52,152,219,0.12);
  border: 1px solid rgba(52,152,219,0.35);
  border-radius: 10px;
  padding: 12px 40px 12px 14px;
  margin-bottom: 16px;
  font-size: 0.85rem;
}
.catalogo-aviso p { margin: 0; }
.catalogo-aviso-fechar {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: inherit;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0.7;
}
.catalogo-aviso-fechar:hover { opacity: 1; }

.catalogo-autocomplete-wrap { position: relative; }
.catalogo-sugestoes {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  background: #1a1a1e;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  margin-top: 4px;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.catalogo-sugestao-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
}
.catalogo-sugestao-item:hover { background: rgba(255,255,255,0.08); }
.catalogo-sugestao-item img { width: 32px; height: 48px; object-fit: cover; border-radius: 4px; flex-shrink: 0; background: #333; }
.catalogo-sugestao-item div { display: flex; flex-direction: column; overflow: hidden; }
.catalogo-sugestao-item strong { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catalogo-sugestao-item span { font-size: 0.72rem; color: #999; }
body[data-template="clean-claro"] .catalogo-sugestoes { background: #fff; border-color: #e0e0e6; }
body[data-template="clean-claro"] .catalogo-sugestao-item:hover { background: #f2f2f5; }
body[data-template="clean-claro"] .catalogo-sugestao-item strong { color: #222; }

.catalogo-pedido-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.catalogo-pedido-form .catalogo-autocomplete-wrap { flex: 1 1 260px; }
.catalogo-pedido-form input[type="text"] { width: 100%; }
.catalogo-pedido-form input[type="text"] {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 0.95rem;
}
/* seletor direto (> button) - o filtro de tipo do pedido também tem
   <button>, mas fica dentro de #filtroTipoPedido, não como filho direto
   do form, então não deve herdar o estilo do botão de "Verificar e pedir" */
.catalogo-pedido-form > button {
  padding: 12px 20px;
  border-radius: 10px;
  border: none;
  background: var(--cor-secundaria);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.catalogo-pedido-form > button:disabled { opacity: 0.6; cursor: not-allowed; }
body[data-template="clean-claro"] .catalogo-pedido-form input {
  background: #fff; border-color: #e0e0e6; color: #333;
}

.catalogo-resultado {
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 0.92rem;
}
.catalogo-resultado.ok { background: rgba(46,204,113,0.12); border: 1px solid rgba(46,204,113,0.35); }
.catalogo-resultado.faltando { background: rgba(231,76,60,0.12); border: 1px solid rgba(231,76,60,0.35); }
.catalogo-resultado.aviso { background: rgba(241,196,15,0.12); border: 1px solid rgba(241,196,15,0.35); }
.catalogo-resultado-card { max-width: 220px; margin-top: 12px; }

.catalogo-abas { display: flex; gap: 10px; margin: 20px 0 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
.catalogo-aba-btn {
  padding: 10px 18px;
  border: none;
  background: transparent;
  color: #999;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.catalogo-aba-btn.ativa { color: #fff; border-bottom-color: var(--cor-secundaria); }
body[data-template="clean-claro"] .catalogo-aba-btn { color: #777; }
body[data-template="clean-claro"] .catalogo-aba-btn.ativa { color: #222; }

.catalogo-filtro-tipo { display: flex; gap: 8px; margin: 14px 0; }
.catalogo-filtro-btn {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: #ccc;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.catalogo-filtro-btn.ativo { background: var(--cor-secundaria); border-color: var(--cor-secundaria); color: #fff; }
body[data-template="clean-claro"] .catalogo-filtro-btn { color: #555; border-color: #ddd; }

.catalogo-grid {
  /* flex + wrap (não grid) - mesmo achado real 2026-09-27 do guia.css: com
     grid, colunas de linhas incompletas não colapsam se outras linhas
     acima usam essas colunas (auto-fit só resolve quando a grade inteira
     cabe numa linha só). Flexbox centraliza cada linha independente. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: 16px;
}
.catalogo-card {
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1 1 160px;
  max-width: 210px;
}
.catalogo-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; background: #222; }
.catalogo-card-info { padding: 10px 12px 14px; }
.catalogo-card-info h3 { font-size: 0.92rem; margin: 0 0 4px; line-height: 1.3; }
.catalogo-card-meta { font-size: 0.75rem; color: #999; margin: 0 0 6px; }
.catalogo-card-trailer {
  display: inline-block;
  margin: 4px 0 10px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  background: var(--cor-secundaria);
  text-decoration: none;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--cor-secundaria) 45%, transparent);
}
.catalogo-card-trailer:hover { filter: brightness(1.1); }
body[data-template="clean-claro"] .catalogo-card { background: #f5f5f7; }
body[data-template="clean-claro"] .catalogo-card-meta { color: #777; }

.catalogo-card-sem-imagem {
  width: 100%;
  aspect-ratio: 2/3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  background: color-mix(in srgb, var(--cor-secundaria) 18%, #1a1a1e);
}
.catalogo-card-status-generico { font-size: 0.75rem; color: #2ecc71; font-weight: 600; margin: 4px 0 0; }
body[data-template="clean-claro"] .catalogo-card-sem-imagem { background: color-mix(in srgb, var(--cor-secundaria) 15%, #ececef); }