/*
Theme Name: Astra Anime Child Jikan
Theme URI: https://kurika.net/
Description: Tema hijo de Astra con catálogo de anime usando la API de Jikan (shortcode [anime_catalog]).
Author: Kurika.net
Template: astra
Version: 1.1.0
*/

/* ===== Base ===== */
:root{
  --primary:#6c5ce7;
  --primary-600:#5848df;
  --bg:#0d0d0f;
  --card:#121218;
  --muted:#9aa3b2;
  --chip:#1b1b25;
  --success:#00d1b2;
}
body{ background:#0d0d0f; color:#e8e8ee; }
a{ color:var(--primary); text-decoration:none; }
a:hover{ color:#a29bfe; }

/* ===== Cabecera simple opcional ===== */
.header-anime{ text-align:center; padding:16px 12px; }
.header-anime h1{ margin:0; font-size:clamp(22px,3vw,32px); font-weight:800; letter-spacing:.3px; }

/* ===== Contenedor catálogo ===== */
.anime-wrap{ max-width:1200px; margin:0 auto; padding:16px; }
.anime-toolbar{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:10px 0 16px;
}
.anime-search{
  display:flex; gap:8px; justify-content:center; margin:8px 0 16px;
}
.anime-search input{
  width:min(520px,92vw); padding:10px 12px; border-radius:10px; border:1px solid #30303a;
  background:#0f0f15; color:#fff; outline:none;
}
.anime-chip{
  border:1px solid #30303a; background:var(--chip); color:#eaeafd; padding:8px 12px;
  border-radius:999px; font-size:14px; cursor:pointer; transition:.2s transform,.2s background;
}
.anime-chip:hover{ transform:translateY(-1px); background:#1f1f2a; }
.anime-chip.active{ background:var(--primary); border-color:var(--primary); }

/* ===== Grid ===== */
.anime-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.anime-card{
  background:var(--card); border:1px solid #1f1f2a; border-radius:14px; overflow:hidden; cursor:pointer;
  box-shadow:0 6px 24px rgba(0,0,0,.35); transition:.25s transform,.25s box-shadow,.25s filter;
  display:flex; flex-direction:column; min-height:280px;
}
.anime-card:hover{ transform:translateY(-4px); filter:saturate(1.05); box-shadow:0 12px 38px rgba(0,0,0,.45); }
.anime-card .poster{ width:100%; aspect-ratio:2/3; object-fit:cover; background:#0c0c10; }
.anime-card .meta{ padding:10px 12px; display:flex; flex-direction:column; gap:6px; }
.anime-title{ font-size:15px; font-weight:700; line-height:1.25; margin:0; }
.anime-sub{ font-size:12px; color:var(--muted); }

/* ===== Spinner ===== */
.spinner{ width:44px; height:44px; border:4px solid #2b2b35; border-top:4px solid var(--primary);
  border-radius:50%; margin:26px auto; animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }
.loading-box{ text-align:center; padding:24px 8px; color:#b8b8c8; }

/* ===== Modal ===== */
.modal-anime{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; padding:18px; z-index:9999; }
.modal-card{
  background:#0f0f15; border:1px solid #282838; border-radius:16px; width:min(920px,96vw);
  max-height:92vh; overflow:auto; box-shadow:0 12px 50px rgba(0,0,0,.55); position:relative;
}
.modal-close{ position:sticky; top:0; display:flex; justify-content:flex-end; }
.modal-close button{ margin:8px; padding:6px 10px; border-radius:10px; border:1px solid #2a2a38; background:#161621; color:#fff; cursor:pointer; }
.modal-body{ display:grid; grid-template-columns:200px 1fr; gap:16px; padding:12px 16px 20px; }
.modal-body img{ width:100%; border-radius:10px; object-fit:cover; }
.modal-body h2{ margin:.2rem 0 .4rem; font-size:20px; }
.modal-body p{ color:#c7c7d4; font-size:14px; }
.modal-player iframe{ width:100%; height:320px; border:0; border-radius:10px; background:#000; }
.episodes{ margin-top:14px; display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; }
.ep-btn{ background:#1a1a26; color:#fff; border:1px solid #2a2a39; padding:8px; border-radius:10px; font-size:12px; text-align:center; }
.ep-btn:hover{ background:#212133; }
@media (max-width:720px){
  .modal-body{ grid-template-columns:1fr; }
}

/* ===== util ===== */
.badge{ display:inline-block; padding:2px 8px; border-radius:999px; background:#1e1e2a; border:1px solid #2c2c3a; font-size:11px; color:#bfc6ff; }