/**
 * Widget: Modal de Busca
 *
 * Valores conforme o Figma:
 *  - Desktop (node 3308:2735): card 450px, botão de fechar (X) ao LADO do
 *    card (mesma linha) — o conjunto [card, botão] fica centralizado na
 *    tela (overlay inteiro em flex).
 *  - Mobile (node 3361:13175, breakpoint <=767px): card 350px, botão de
 *    fechar ACIMA do card, não ao lado — por isso o painel troca de `row`
 *    (desktop) pra `column-reverse` (mobile): a ordem no DOM é sempre
 *    [card, botão], e `column-reverse` inverte só a ordem VISUAL, sem
 *    mexer no DOM (mesmo truque de cabecalho-busca.css pro mobile).
 *  - Cores: --branco, --preto, --roxo (#3e0f8a), --lilás-pastel (#f1e4ff),
 *    --cinza-médio (#7b7879) — mesmas variáveis globais (com fallback) já
 *    usadas em busca.css/cabecalho-busca.css.
 *  - Entrada: fade + slide de baixo pra cima ("Move in" / direção "up"),
 *    300ms, easing "Slow" (aproximado aqui por `ease-out`, já que a
 *    animação é CSS próprio — não o motor de popup do Elementor) —
 *    parâmetros iguais aos do widget nativo Popup do Elementor Pro, pra
 *    consistência com o resto do site. Overlay a 90% de opacidade preto.
 *    Controlado pela classe `.is-open` (assets/js/modal-busca.js aplica um
 *    frame depois de tirar o `hidden`, senão o browser pinta direto no
 *    estado final e não anima).
 */

/* ---------- Overlay + posicionamento ---------- */

.pucpr-modal-busca {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.pucpr-modal-busca[hidden] {
  display: none !important;
}

.pucpr-modal-busca__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.pucpr-modal-busca.is-open .pucpr-modal-busca__overlay {
  opacity: 1;
}

body.pucpr-modal-busca-open {
  overflow: hidden;
}

.pucpr-modal-busca__painel {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  max-width: 100%;
  opacity: 0;
  /* 100vh (não um deslocamento pequeno em px) — parte de fora da tela por
     baixo, garantido em qualquer altura de viewport, já que o painel está
     centralizado verticalmente (+100vh a partir do centro sempre cai
     abaixo da borda inferior). */
  transform: translateY(100vh);
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
}

.pucpr-modal-busca.is-open .pucpr-modal-busca__painel {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Botão de fechar ---------- */

.pucpr-modal-busca__fechar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  color: var(--branco, #fff);
  opacity: 1;
}

.pucpr-modal-busca__fechar:hover,
.pucpr-modal-busca__fechar:focus {
  opacity: 0.7;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.pucpr-modal-busca__fechar-icone {
  width: 22px;
  height: 22px;
}

/* ---------- Card ---------- */

.pucpr-modal-busca__card {
  width: 450px;
  max-width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  /* Respiro de baixo (19px medido no Figma, node 3308:2736: 335px de
     altura - 316px até o fim de "Ver todos os resultados") — fica no card
     e não numa seção específica porque a última seção visível varia (só
     Sugestões, sem termo digitado; ou + Resultados, com termo). */
  padding-bottom: 19px;
  background: var(--branco, #fff);
  border-radius: 20px;
  box-shadow: 10px 10px 60px 0 rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}

/* ---------- Campo de busca ---------- */

.pucpr-modal-busca__form {
  margin: 0;
  border-bottom: 1px solid rgba(92, 92, 92, 0.2);
}

.pucpr-modal-busca__campo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
}

.pucpr-modal-busca__campo-icone {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  pointer-events: none;
  color: var(--preto, #000);
  opacity: 0.6;
}

/* Lupa some / X de limpar aparece quando o campo tem texto — mesmo padrão
   de busca.css / cabecalho-busca.css. */
.pucpr-modal-busca__campo.is-filled .pucpr-modal-busca__campo-icone {
  display: none;
}

.pucpr-modal-busca__campo-limpar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  /* !important — mesmo motivo do .__ver-todos acima: algum reset global
     de botão (tema/Elementor) sobrescreve a cor sem isso, deixando o
     ícone branco em vez de acompanhar a cor da lupa. */
  color: var(--preto, #000) !important;
  opacity: 0.6;
  /* Esse mesmo reset global também aplica `transition: 0.3s` em todo
     <button> — sem zerar isso o X "cresce"/aparece suavemente ao trocar
     com a lupa (que não é button, não tem essa transição), em vez de
     trocar instantâneo como ela. */
  transition: none !important;
}

.pucpr-modal-busca__campo-limpar:hover,
.pucpr-modal-busca__campo-limpar:focus {
  opacity: 1;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.pucpr-modal-busca__campo-limpar[hidden] {
  display: none !important;
}

.pucpr-modal-busca__campo-limpar-icone {
  width: 16px;
  height: 16px;
}

.pucpr-modal-busca__input,
.pucpr-modal-busca__input:focus,
.pucpr-modal-busca__input:active {
  flex: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  appearance: none;
  -webkit-appearance: none;
  font-family: "Source Sans Pro", sans-serif !important;
  font-size: 16px !important;
  /* Trava a altura de linha do input no tamanho do ícone (18px) — sem
     isso, a line-height "normal" do browser pra input type=search rende
     bem mais alta que os 18px da lupa, e a fileira toda do campo (padding
     20px do Figma + esse conteúdo) fica maior que os 58px do node
     3308:2737 (HorizontalBorder). */
  line-height: 18px !important;
  color: var(--preto, #000) !important;
}

.pucpr-modal-busca__input::placeholder {
  color: var(--cinza-médio, #7b7879) !important;
  opacity: 1;
}

.pucpr-modal-busca__input::-webkit-search-cancel-button,
.pucpr-modal-busca__input::-webkit-search-decoration {
  display: none;
  -webkit-appearance: none;
}

/* ---------- Seções (Sugestões / Resultados) ---------- */

/* Padding só no topo — o espaço ANTES de cada bloco fica por conta de quem
   vem depois dele (próprio padding-top), nunca duplicado com o
   padding-bottom de quem vem antes. Valores medidos 1:1 contra as caixas
   do Figma (node 3308:2736, metadata em px): 11px da borda do campo até
   "Sugestões", 10px do último item até o separador. */
.pucpr-modal-busca__secao {
  padding: 11px 12px 0;
}

.pucpr-modal-busca__secao--resultados[hidden] {
  display: none !important;
}

/* 4px (não os 11px padrão) — o último item de Sugestões já contribui 6px
   de padding-bottom próprio (.__item abaixo); somados dá os 10px medidos
   no Figma entre "Entre em contato" e o separador. */
.pucpr-modal-busca__secao--resultados {
  padding-top: 4px;
}

.pucpr-modal-busca__titulo-secao {
  margin: 0 8px 4px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--preto, #000);
}

/* No Figma o título "Resultados de busca" fica só 6px acima da 1ª linha
   (bem mais colado que os 10px de "Sugestões" → "Nossos cursos", que tem
   o respiro extra do padding do pill) — sem o próprio padding-top do
   .__item (6px) sobraria, então aqui o título não soma margem nenhuma. */
.pucpr-modal-busca__secao--resultados .pucpr-modal-busca__titulo-secao {
  margin-bottom: 0;
}

/* Margem lateral negativa = padding horizontal da seção (12px, ver
   .__secao) — cancela o inset e estica o traço até a borda do card dos
   dois lados, igual ao Figma (que até vaza 3px pra fora do card, node
   3308:2748 "Separator": left:-3px width:456 num card de 450px). */
.pucpr-modal-busca__separador {
  margin: 0 -12px 12px !important;
  border: none;
  border-top: 1px solid rgba(92, 92, 92, 0.2);
}

/* Altura reservada pro número fixo de linhas que a busca devolve
   (MODAL_BUSCA_LIMITE_RESULTADOS = 3, includes/rest-busca.php) — sem isso,
   o card "pula" de tamanho entre o spinner (uma linha) e a lista cheia (3
   linhas). 96px = 3 × 32px por item (padding vertical do .__item, 6+6, +
   line-height 20). `justify-content: flex-start` alinha lista/"sem
   resultados" no topo (mesma posição que a 1ª linha ocuparia); o spinner é
   quem foge da regra — centralizado via margem vertical `auto` própria
   (ver .__spinner), já que "carregando" não tem uma linha de referência
   pra alinhar contra. */
.pucpr-modal-busca__resultados-corpo {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 96px;
}

.pucpr-modal-busca__lista {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pucpr-modal-busca__lista[hidden] {
  display: none !important;
}

.pucpr-modal-busca__item {
  display: block;
  padding: 6px 14px;
  border-radius: 4px;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  line-height: 20px;
  color: var(--cinza-médio, #7b7879);
  text-decoration: none;
}

.pucpr-modal-busca__item:hover,
.pucpr-modal-busca__item:focus-visible {
  background: var(--lilás-pastel, #f1e4ff);
  color: var(--roxo, #3e0f8a);
  text-decoration: underline;
  outline: none;
}

.pucpr-modal-busca__vazio {
  margin: 0;
  padding: 6px 14px;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  line-height: 20px;
  color: var(--cinza-médio, #7b7879);
}

.pucpr-modal-busca__vazio[hidden] {
  display: none !important;
}

/* padding (não margin) nas laterais, igual ao .__item — alinha o texto de
   "Ver todos" com o texto dos itens de resultado, que também usam padding
   horizontal de 14px em vez de margin. */
.pucpr-modal-busca__ver-todos {
  display: inline-block;
  margin: 6px 0 0;
  padding: 0 14px;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--preto, #000) !important;
  text-decoration: underline !important;
}

.pucpr-modal-busca__ver-todos:hover,
.pucpr-modal-busca__ver-todos:focus-visible {
  color: var(--roxo, #3e0f8a) !important;
  outline: none;
}

.pucpr-modal-busca__ver-todos[hidden] {
  display: none !important;
}

/* ---------- Spinner de carregamento (ícone "spinner" do Font Awesome) ---------- */

.pucpr-modal-busca__spinner {
  display: flex;
  justify-content: center;
  /* Vertical `auto` centraliza SÓ o spinner dentro do `.resultados-corpo`
     (que agora alinha o resto no topo via justify-content: flex-start) —
     margem auto no eixo principal de um flex item vence o justify-content
     do container, então isso não depende de mexer em mais nada. */
  margin: auto 0;
}

.pucpr-modal-busca__spinner[hidden] {
  display: none !important;
}

.pucpr-modal-busca__spinner-icone {
  width: 22px;
  height: 22px;
  color: var(--cinza-médio, #7b7879);
  animation: pucpr-modal-busca-girar 0.8s linear infinite;
}

@keyframes pucpr-modal-busca-girar {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Mobile (<=767px) ---------- */
/* Card com largura fixa (350px, valor do node 3361:13175) ficava "flutuando"
   solto no meio da tela em viewports mais largos que isso. Troca pra
   `width: auto` + margem de 20px: `.painel` precisa de `width: 100%`
   explícito (senão, sendo item de um flex que centraliza por padrão, ele
   encolhe pro tamanho do conteúdo em vez de esticar) pra herdar a largura
   da viewport menos o padding do `.pucpr-modal-busca` (20px cada lado);
   `.card` daí só segue esse width em vez de ter o próprio fixo.
   `align-items: flex-end` (não `center`) alinha o X à direita, acima do
   canto direito do card — mesmo lado que o desktop (lá o X fica à direita
   só pela ordem no DOM, já que o layout é `row`; aqui em `column-reverse`
   o alinhamento tem que ser explícito no eixo cruzado). */
@media (max-width: 767px) {
  .pucpr-modal-busca {
    padding: 20px;
  }

  .pucpr-modal-busca__painel {
    width: 100%;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 12px;
  }

  .pucpr-modal-busca__card {
    width: 100%;
  }
}