/**
 * midia-search.css — The Crab Games — TCG Premium 2025
 * Layout refinado — estética IGN + Superinteressante + TCG Premium
 * Inclui: Paginação Premium Circular
 */

/* =========================================================
   VARIÁVEIS GERAIS
   ========================================================= */
:root{
  --tcg-green:#006633;
  --tcg-green-dark:#004f29;
  --tcg-muted:#60666c;
  --tcg-border:#e4e7eb;
  --tcg-card:#ffffff;
  --tcg-radius:14px;

  --rating-excellent:#00c853;
  --rating-good:#fdd835;
  --rating-average:#ff9800;
  --rating-poor:#e53935;

  --shadow-sm:0 6px 16px rgba(0,0,0,.07);
  --shadow-md:0 10px 24px rgba(0,0,0,.10);
  --shadow-lg:0 18px 42px rgba(0,0,0,.14);
}

/* =========================================================
   CONTAINER BASE
   ========================================================= */
#midia-busca-page{
  background:#f6f7f9;
  color:#111;
  padding:40px 0 70px;
  font-family:"Montserrat","Open Sans",sans-serif;
}

.midia-busca-container{
  max-width:1220px;
  margin:0 auto;
  padding:0 20px;
}

/* =========================================================
   TÍTULOS
   ========================================================= */
.midia-page-title{
  margin:0 0 10px;
  font-size:clamp(26px,2.6vw,40px);
  font-weight:800;
  line-height:1.15;
  border-left:6px solid var(--tcg-green);
  padding-left:14px;
}

.midia-page-subtitle{
  color:var(--tcg-muted);
  margin:0 0 24px;
  font-size:1.1rem;
}

/* =========================================================
   FILTROS
   ========================================================= */
.midia-filters-section{
  background:#fff;
  border:1px solid var(--tcg-border);
  border-radius:var(--tcg-radius);
  box-shadow:var(--shadow-sm);
  padding:22px 22px 26px;
  margin-bottom:28px;
}

.midia-filters-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

.midia-filter-group{
  display:flex;
  flex-direction:column;
}

.midia-filter-group label{
  font-weight:700;
  font-size:.95rem;
  margin-bottom:6px;
}

.midia-filter-group input,
.midia-filter-group select{
  border:1px solid var(--tcg-border);
  border-radius:10px;
  padding:12px 14px;
  background:#fff;
  color:#111;
  font-size:.95rem;
  transition:border .15s ease, box-shadow .15s ease;
}

.midia-filter-group input:focus,
.midia-filter-group select:focus{
  border-color:var(--tcg-green);
  box-shadow:0 0 0 3px rgba(0,102,51,.15);
  outline:none;
}

/* =========================================================
   BOTÕES DE FILTRO
   ========================================================= */
.midia-filter-actions{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.midia-results-count{
  margin:0;
  color:var(--tcg-muted);
}

.midia-btn{
  border:none;
  border-radius:10px;
  padding:11px 18px;
  font-size:.95rem;
  font-weight:700;
  cursor:pointer;
  transition:.18s;
}

.midia-btn-primary{
  background:var(--tcg-green);
  color:#fff;
}
.midia-btn-primary:hover{
  background:var(--tcg-green-dark);
}

.midia-btn-secondary{
  background:#eef1f3;
  color:#222;
}
.midia-btn-secondary:hover{
  background:#e4e8eb;
}

/* =========================================================
   GRID DE RESULTADOS
   ========================================================= */
.midia-results-container{
  margin-top:12px;
}

.midia-games-grid{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}

/* =========================================================
   CARDS — LAYOUT C+
   ========================================================= */
.midia-game-card{
  background:var(--tcg-card);
  border:1px solid var(--tcg-border);
  border-radius:var(--tcg-radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:.22s ease;
}

.midia-game-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:var(--tcg-green);
}

.midia-card-link{
  display:block;
  text-decoration:none;
  color:inherit;
}

/* =========================================================
   IMAGEM DO CARD
   ========================================================= */
.midia-game-image{
  position:relative;
  padding-top:150%;
  background:#f1f3f5;
  overflow:hidden;
}

.midia-game-image img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}

.midia-game-card:hover .midia-game-image img{
  transform:scale(1.06);
}

/* =========================================================
   RATING (NOTA)
   ========================================================= */
.midia-game-rating{
  position:absolute;
  top:10px;
  right:10px;
  padding:6px 11px;
  border-radius:12px;
  font-size:.9rem;
  font-weight:800;
  color:#fff;
  z-index:2;
  box-shadow:0 4px 10px rgba(0,0,0,.17);
}

.midia-game-rating.rating-excellent{ background:var(--rating-excellent); }
.midia-game-rating.rating-good{ background:var(--rating-good); color:#111; }
.midia-game-rating.rating-average{ background:var(--rating-average); }
.midia-game-rating.rating-poor{ background:var(--rating-poor); }

/* =========================================================
   INFORMAÇÕES DO CARD
   ========================================================= */
.midia-card-info{
  padding:12px 14px 16px;
}

.midia-card-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:6px;
}

.midia-card-badge{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 10px;
  border-radius:999px;
  font-size:.7rem;
  text-transform:uppercase;
  font-weight:700;
  background:#e8f4ec;
  border:1px solid #bde4ca;
  color:#006633;
}

.midia-card-info h3{
  margin:6px 0 0;
  font-size:1.02rem;
  line-height:1.36;
  font-weight:600;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* =========================================================
   EMPTY (Nenhum resultado)
   ========================================================= */
.midia-no-results{
  padding:32px 14px;
  text-align:center;
  font-size:1.05rem;
  color:var(--tcg-muted);
}

/* =========================================================
   PAGINAÇÃO PREMIUM — ESTILO CÍRCULO
   ========================================================= */
.midia-pagination{
  margin:32px 0 10px;
  display:flex;
  justify-content:center;
}

.midia-pagination ul{
  display:flex;
  gap:10px;
  padding:0;
  margin:0;
}

.midia-pagination li{
  list-style:none;
}

.midia-pagination .page-numbers{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:42px;
  padding:0 14px;

  border-radius:50%;
  font-size:.95rem;
  font-weight:700;

  background:#ffffff;
  color:#222;
  border:1px solid var(--tcg-border);

  transition:.22s ease;
}

.midia-pagination .page-numbers:hover{
  background:#f1f3f4;
  border-color:var(--tcg-green);
  color:var(--tcg-green);
}

.midia-pagination .current{
  background:var(--tcg-green);
  border-color:var(--tcg-green);
  color:#fff;
  box-shadow:0 0 0 3px rgba(0,102,51,.18);
}

.midia-pagination .prev,
.midia-pagination .next{
  font-size:1rem;
  padding:0!important;
}

/* Desativado */
.midia-pagination .disabled{
  opacity:.35;
  cursor:not-allowed;
}

/* =========================================================
   DARK MODE
   ========================================================= */
[data-theme="dark"] #midia-busca-page{
  background:#0e1217;
  color:#e6e9ec;
}

[data-theme="dark"] .midia-filters-section,
[data-theme="dark"] .midia-game-card{
  background:#141a21;
  border-color:#222b36;
  box-shadow:none;
}

[data-theme="dark"] .midia-filter-group input,
[data-theme="dark"] .midia-filter-group select{
  background:#0f1419;
  border-color:#283040;
  color:#e8eaed;
}

[data-theme="dark"] .midia-card-badge{
  background:#0f2a1d;
  border-color:#1b4e37;
  color:#00c36f;
}

[data-theme="dark"] .midia-pagination .page-numbers{
  background:#1a232d;
  border-color:#29323d;
  color:#cbd3dc;
}

[data-theme="dark"] .midia-pagination .page-numbers:hover{
  background:#22303d;
  border-color:#00b36b;
  color:#00b36b;
}

[data-theme="dark"] .midia-pagination .current{
  background:#00b36b!important;
  border-color:#00b36b!important;
  color:#fff!important;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media(max-width:820px){
  .midia-games-grid{
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:16px;
  }
}

@media(max-width:640px){
  .midia-games-grid{
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  }
}