/* =========================================================
   ReviewTurbo UX pack — CSS estável
   - Chips removíveis
   - Botão de filtros (mobile)
   - Feedback do "Carregar mais"
   - Ribbon "Mais clicado"
   - A11y: foco visível e redução de movimento
   ========================================================= */
   
/* HOTFIX de visibilidade */
.rtb-filter-panel{display:block}
#ofertas-grid{opacity:1; visibility:visible}  /* <- sem display */

/* ---------- Chips removíveis dos filtros ---------- */
.rtb-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .75rem 0 1rem;
}

.rtb-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: .35rem .7rem;
  font-size: .9rem;
  line-height: 1.2;
  color: #111;
}

.rtb-chip .x,
.rtb-chip button.x {
  cursor: pointer;
  font-weight: 700;
  opacity: .7;
  background: none;
  border: 0;
  padding: 0;
  line-height: 1;
}

.rtb-chip .x:hover,
.rtb-chip button.x:hover,
.rtb-chip .x:focus-visible,
.rtb-chip button.x:focus-visible {
  opacity: 1;
  outline: 2px solid #111;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Botão de filtros (mobile) ---------- */
.rtb-filters-fab {
  display: none; /* visível só no mobile via media query */
}

/* Botão e painel dos filtros */
@media (max-width: 768px) {
  .rtb-filters-fab {
    position: sticky;
    top: 0;
    z-index: 40;
    display:none !important;
    justify-content: flex-end;
    padding: .5rem 0 .25rem;
    background: linear-gradient(#fff, rgba(255,255,255,.6));
  }
  .rtb-filter-panel{ display:block !important; } /* ignora o "open" no mobile também */
  .rtb-filter-panel.open { display: block; animation: fadeIn .15s ease; }
}

/* estilo do botão */
.rtb-filters-fab .btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: .5rem 1rem;
  background: #2563eb;
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}

.rtb-filters-fab .btn:hover,
.rtb-filters-fab .btn:focus-visible { background: #1d4ed8; transform: translateY(-1px); }
.rtb-filters-fab .btn:active { background: #1e40af; transform: translateY(0); }



/* ---------- Feedback do "Carregar mais" ---------- */
#load-more-btn[aria-busy="true"] { opacity:.6; pointer-events:none; }
#load-more-btn .spinner { margin-left:.5rem; display:inline-block; width:16px; height:16px; border:2px solid #111; border-right-color:transparent; border-radius:50%; animation:spin .6s linear infinite; }


/* ---------- Ribbon "Mais clicado" no card ---------- */
.oferta-item .rtb-ribbon {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ef4444;
  color: #fff;
  font-weight: 700;
  font-size: .75rem;
  border-radius: 10px;
  padding: .25rem .5rem;
}

/* ---------- Animações (definidas no escopo global) ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Preferência do usuário: reduzir movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* === FIX DESKTOP: garante que os cards estejam visíveis (vence qualquer animação inicial) === */
@media (min-width: 769px){
  #ofertas-grid { opacity: 1 !important; visibility: visible !important; }
  #ofertas-grid .oferta-item{
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}