/* ==============================
   STR BASE KIT — Components
   ============================== */

/* ===== HEADER ===== */
.header{
  background:var(--str-slate);
  color:#fff;
  padding:18px 16px 12px;
  text-align:center;
}

.header-title{
  font-family:"Tormenta";
  letter-spacing:1px;
  font-size:3.1rem;
  margin:0;
}

.header::after{
  content:"";
  display:block;
  height:4px;
  background:var(--str-accent);
  margin-top:12px;
}

/* Busca + filtros no header */
.search-container{
  max-width:1200px;
  margin:14px auto 0;
  padding:0 8px;
  display:grid;
  gap:12px;
}

#searchInput{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:2px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.08);
  color:#fff;
}

#searchInput::placeholder{ color:rgba(255,255,255,.78); }

/* ===== BOTÕES (pílulas do header) ===== */
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
}

.filter-btn{
  border:2px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:999px;
  padding:7px 12px;
  font-weight:800;
  cursor:pointer;
  transition:.15s;
}

.filter-btn:hover{ background:rgba(255,255,255,.14); }
.filter-btn.active{ background:var(--str-accent); }

.filter-btn.sm{
  padding:6px 10px;
  font-size:.85rem;
}

/* ===== SELECT (header escuro) ===== */
#classSelector{
  padding:10px 12px;
  border-radius:12px;
  border:2px solid rgba(255,255,255,.45);
  background:rgba(0,0,0,.25);
  color:#fff;
  font-weight:700;
}

#classSelector option{
  background:#111827;
  color:#fff;
}

/* ===== MODAL ===== */
.modal-overlay{
  display:none;             /* JS liga com display:flex */
  position:fixed;
  inset:0;
  background:rgba(10,15,25,.55);
  backdrop-filter:blur(2px);
  z-index:9999;
  align-items:center;
  justify-content:center;
  padding:16px;
}

.modal-content{
  width:min(720px, calc(100vw - 24px));
  max-height:86vh;
  overflow:auto;
  background:#fff;
  border:2px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.25);
  position:relative;
}

.close-btn{
  position:absolute;
  top:10px;
  right:12px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  border:2px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-size:22px;
  line-height:1;
}

.close-btn:hover{ background:#f6f7fb; }

/* ===== BOTÃO "TOPO" ===== */
#backToTopBtn{
  position:fixed;
  right:18px;
  bottom:18px;
  width:52px;
  height:52px;
  border-radius:999px;
  border:2px solid var(--border);
  background:var(--str-accent);
  color:#fff;
  font-size:22px;
  font-weight:900;
  cursor:pointer;
  display:none;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}

@media (max-width:720px){
  .header-title{ font-size:2.4rem; }
  .modal-content{
    width:calc(100vw - 20px);
    max-height:calc(100svh - 20px);
    padding:12px;
    -webkit-overflow-scrolling:touch;
  }
}