/* ===== Container ===== */
.fp-film-poll{max-width:1100px;margin:0 auto}
.fp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:16px;
  align-items:stretch;
}

/* ===== Card ===== */
.fp-card{
  display:flex;
  flex-direction:column;
  border:1px solid #e5e5e5;
  background:#fff;
  cursor:pointer;
  outline:0;
  border-radius:0;
  position:relative;
  height:100%;
}
.fp-card.is-selected{box-shadow:0 0 0 2px #2271b1 inset}
.fp-card:focus-visible{box-shadow:0 0 0 2px #2271b1 inset,0 0 0 3px rgba(34,113,177,.25)}
.fp-hidden-check{position:absolute;left:-9999px}

/* ===== Thumb ===== */
.fp-thumb{
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#f2f2f2;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.fp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.fp-thumb--ph{font-size:13px;color:#666;padding:18px;text-align:center;width:100%}

/* escurecer ~20% ao selecionar */
.fp-thumb::after{
  content:"";
  position:absolute;inset:0;
  background:transparent;
  transition:background .2s ease;
}
.fp-card.is-selected .fp-thumb::after{ background:rgba(0,0,0,.20); }

/* Overlay (ícones centrais) */
.fp-overlay{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:40px;opacity:.95;display:none;pointer-events:none
}
.fp-card.is-selected .fp-overlay{display:block}

/* ===== Info: TÍTULO em cima; META embaixo (horário • bandeira • sinopse) ===== */
.fp-info{
  padding:10px 12px;
  display:grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "title title title"
    "time flag sinopse";
  row-gap:6px;
  align-items:center;
}
.fp-title{
  grid-area:title;
  text-transform:uppercase;
  font-weight:600;
  margin:0;
}
.fp-time{ grid-area:time; font-size:12px; opacity:.8 }
.fp-flag{ grid-area:flag; font-size:16px; line-height:1 }
.fp-sinopse{
  grid-area:sinopse;
  text-decoration:none;
  border:none; box-shadow:none; background:none;
  padding:0; line-height:1; font-size:16px;
}
.fp-sinopse:hover{ text-decoration:underline }

/* Ícone “claquete” no passo 1 (fica no centro da thumb quando selecionado) */
.fp-step-watched .fp-card .fp-overlay .fp-icon::before{content:"🎬"}

/* ===== Grid de favoritos ===== */
/* ===== Coração do favorito: maior e vermelho ===== */
#fp_fav_grid .fp-card .fp-overlay .fp-icon::before{
  content: "♥";       /* usa símbolo (aceita color) */
  color: #e02424;     /* vermelho */
  font-size: 56px;    /* tamanho base do coração */
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(0,0,0,.25),
    0 2px 4px rgba(0,0,0,.15);
  transform-origin: 50% 50%;
  display: inline-block; /* necessário p/ animar */
}

/* Em telas médias+, deixa ainda maior */
@media (min-width: 768px){
  #fp_fav_grid .fp-card .fp-overlay .fp-icon::before{
    font-size: 68px;
  }
}

/* Só UM coração: central via overlay quando selecionado */
#fp_fav_grid .fp-card::after{ content:none !important; display:none !important; }
#fp_fav_grid .fp-card .fp-overlay{ display:none; }
#fp_fav_grid .fp-card.is-selected .fp-overlay{ display:block; }

/* ===== Animação: zoom + fade-in ao selecionar ===== */
@keyframes favPopIn {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

/* dispara a animação quando o card entra em estado selecionado */
#fp_fav_grid .fp-card.is-selected .fp-overlay .fp-icon{
  animation: favPopIn 300ms ease-out both;
  will-change: transform, opacity;
}

/* Acessibilidade: respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce){
  #fp_fav_grid .fp-card.is-selected .fp-overlay .fp-icon{
    animation: none;
  }
}


/* ===== Submit ===== */
.fp-submit-wrap{display:flex}
#fp_submit_btn{width:100%;padding:.9rem 1.2rem;font-size:16px}
/* Mais respiro entre as seções e o botão */
.fp-step{ margin-bottom:24px; }

.fp-submit-wrap{
  display:flex;
  margin-top:24px;        /* afasta do grid de favoritos */
  margin-bottom:32px;     /* afasta do rodapé */
}

#fp_submit_btn{
  width:100%;
  padding:1rem 1.25rem;   /* botão mais "clicável" */
  font-size:18px;
}

/* ===== Loading overlay ===== */
.fp-loading-overlay{
  position:fixed; inset:0; background:rgba(255,255,255,.7);
  display:flex; align-items:center; justify-content:center; z-index:9999
}

/* ===== Mobile ajustes ===== */
@media (max-width:640px){
  .fp-grid{grid-template-columns:repeat(2,1fr)}
  .fp-info{row-gap:4px}
}

/* ===== Gate (agradecimento) ===== */
.ef-thanks{text-align:center;padding:24px}
.ef-thanks img{display:block;margin:0 auto 12px;max-width:240px;height:auto}

/* Ocultar título depois do obrigado (se necessário) */
.fp-film-poll.fp-voted .fp-poll-title{display:none !important;}
.fp-film-poll:has(.ef-thanks) .fp-poll-title{display:none !important;}

/* Legendas dos passos mais legíveis */
.fp-film-poll .fp-step legend strong{
  font-size:1.15rem;
  line-height:1.35;
}

/* Parágrafos de instrução */
.fp-film-poll .fp-step p,
.fp-film-poll .fp-help{
  font-size:1.05rem;
  line-height:1.55;
  margin:6px 0 12px;
}

/* Um pouco mais de respiro entre linhas de meta (hora/ícones) */
.fp-info{ row-gap:8px; }

/* Em telas médias+ aumentar um pouco mais */
@media (min-width:768px){
  .fp-film-poll .fp-step legend strong{ font-size:1.25rem; }
  .fp-film-poll .fp-step p, .fp-film-poll .fp-help{ font-size:1.1rem; }
}