/* ============================================================
   Global Search — /search
   Modern glassmorphism, mobile-first, consistent with site tokens
   ============================================================ */

.gsearch-page{min-height:70vh}

/* ── Hero ── */
.gsearch-hero{
  position:relative;
  padding:calc(var(--navbar-height, 84px) + 48px) 0 40px;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(255,62,62,0.14), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 10%, rgba(59,130,246,0.10), transparent 60%),
    var(--bg-primary);
  overflow:hidden;
  text-align:center;
}
.gsearch-eyebrow{
  display:inline-block;font-size:0.72rem;font-weight:700;letter-spacing:0.14em;
  text-transform:uppercase;color:#ff5252;margin-bottom:10px;
}
.gsearch-title{
  font-size:2.4rem;font-weight:800;letter-spacing:-0.02em;margin:0 0 10px;
  background:linear-gradient(135deg,#fff,#c9c9d4);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.gsearch-sub{color:var(--text-secondary);font-size:0.98rem;margin:0 auto 28px;max-width:480px}

.gsearch-bar{
  position:relative;display:flex;align-items:center;gap:10px;
  max-width:640px;margin:0 auto;
  background:rgba(255,255,255,0.06);
  border:1.5px solid rgba(255,255,255,0.14);
  border-radius:20px;
  padding:8px 10px 8px 52px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 10px 40px rgba(0,0,0,0.4);
  transition:border-color 0.25s ease,box-shadow 0.25s ease,background 0.25s ease;
}
.gsearch-bar:focus-within{
  border-color:rgba(255,62,62,0.55);background:rgba(255,255,255,0.09);
  box-shadow:0 10px 50px rgba(255,62,62,0.2),0 0 0 4px rgba(255,62,62,0.1);
}
.gsearch-bar-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,0.5);pointer-events:none}
.gsearch-bar:focus-within .gsearch-bar-icon{color:#ff5252}
.gsearch-bar input{
  flex:1;min-width:0;background:transparent;border:none;outline:none;
  color:#fff;font-size:1.08rem;font-family:inherit;padding:13px 0;
}
.gsearch-bar input::placeholder{color:rgba(255,255,255,0.42)}
.gsearch-clear{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,0.08);border:none;color:var(--text-secondary);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background 0.15s ease,color 0.15s ease;
}
.gsearch-clear:hover{background:rgba(255,255,255,0.16);color:#fff}
.gsearch-spinner{
  flex-shrink:0;width:20px;height:20px;margin-right:8px;
  border:2.5px solid rgba(255,255,255,0.15);border-top-color:#ff5252;border-radius:50%;
  animation:gsearchSpin 0.7s linear infinite;
}
@keyframes gsearchSpin{to{transform:rotate(360deg)}}

@media (max-width:640px){
  .gsearch-hero{padding:calc(var(--navbar-height, 72px) + 28px) 0 28px}
  .gsearch-title{font-size:1.7rem}
  .gsearch-sub{font-size:0.86rem;margin-bottom:20px}
  .gsearch-bar{padding-left:46px;border-radius:16px}
  .gsearch-bar-icon{left:15px}
  .gsearch-bar input{font-size:0.95rem;padding:11px 0}
}

/* ── Body / sections ── */
.gsearch-body{padding:32px 0 80px}

.gsearch-block{margin-bottom:36px}
.gsearch-block-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.gsearch-block-header h2{font-size:1.05rem;font-weight:700;margin:0}
.gsearch-clear-all{
  background:transparent;border:1px solid var(--border-color);border-radius:999px;
  color:var(--text-muted);font-size:0.75rem;font-weight:600;padding:5px 14px;cursor:pointer;
  transition:all 0.2s ease;
}
.gsearch-clear-all:hover{color:#ff5252;border-color:rgba(255,62,62,0.35);background:rgba(255,62,62,0.06)}

/* ── Chips (recent / trending) ── */
.gsearch-chip-row{display:flex;flex-wrap:wrap;gap:9px}
.gsearch-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;background:rgba(255,255,255,0.04);border:1px solid var(--border-color);
  border-radius:999px;color:var(--text-secondary);font-size:0.85rem;font-weight:600;
  cursor:pointer;text-decoration:none;transition:all 0.18s ease;
  animation:gsearchFadeUp 0.35s ease both;
}
.gsearch-chip:hover{background:rgba(255,62,62,0.08);border-color:rgba(255,62,62,0.3);color:#fff;transform:translateY(-2px)}
.gsearch-chip svg{opacity:0.55;flex-shrink:0}
.gsearch-chip-trending::before{content:'🔥';font-size:0.85em}
.gsearch-chip-remove{
  display:flex;align-items:center;justify-content:center;width:16px;height:16px;
  border-radius:50%;background:rgba(255,255,255,0.1);margin-left:2px;flex-shrink:0;
}
.gsearch-chip-remove:hover{background:rgba(255,62,62,0.4)}
.gsearch-chip-skel{width:96px;height:36px;border-radius:999px;background:linear-gradient(110deg,rgba(255,255,255,0.03) 8%,rgba(255,255,255,0.08) 18%,rgba(255,255,255,0.03) 33%);background-size:200% 100%;animation:gsearchShimmer 1.4s ease-in-out infinite}

/* ── Result sections ── */
.gsearch-section{margin-bottom:40px;animation:gsearchFadeUp 0.4s ease both}
.gsearch-section-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.gsearch-section-icon{
  display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:10px;background:rgba(255,62,62,0.12);color:#ff5252;flex-shrink:0;
}
.gsearch-section-title{font-size:1.05rem;font-weight:700;margin:0;flex-shrink:0}
.gsearch-section-count{
  font-size:0.72rem;font-weight:700;color:var(--text-muted);background:rgba(255,255,255,0.06);
  padding:2px 9px;border-radius:999px;flex-shrink:0;
}
.gsearch-section-more{
  margin-left:auto;background:transparent;border:1px solid var(--border-color);border-radius:999px;
  color:var(--text-secondary);font-size:0.78rem;font-weight:600;padding:6px 14px;cursor:pointer;
  white-space:nowrap;transition:all 0.2s ease;
}
.gsearch-section-more:hover{background:rgba(255,62,62,0.08);border-color:rgba(255,62,62,0.3);color:#fff}
.gsearch-section-more[disabled]{opacity:0.4;pointer-events:none}

.gsearch-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;
}
@media (max-width:480px){.gsearch-grid{grid-template-columns:repeat(2,1fr);gap:10px}}

.gsearch-card{
  display:block;text-decoration:none;color:inherit;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--bg-surface);border:1px solid var(--border-color);
  transition:transform 0.25s cubic-bezier(0.22,1,0.36,1),border-color 0.25s ease,box-shadow 0.25s ease;
  animation:gsearchFadeUp 0.35s ease both;
}
.gsearch-card:hover{
  transform:translateY(-5px) scale(1.015);border-color:rgba(255,62,62,0.35);
  box-shadow:0 16px 36px rgba(0,0,0,0.5),0 0 0 1px rgba(255,62,62,0.15);
}
.gsearch-card-poster{position:relative;aspect-ratio:2/3;overflow:hidden;background:var(--bg-secondary)}
.gsearch-card-poster img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease}
.gsearch-card:hover .gsearch-card-poster img{transform:scale(1.08)}
.gsearch-card-overlay{
  position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.85) 0%,transparent 45%);
  opacity:0;transition:opacity 0.25s ease;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;
}
.gsearch-card:hover .gsearch-card-overlay{opacity:1}
.gsearch-card-play{
  width:36px;height:36px;border-radius:50%;background:rgba(255,62,62,0.9);
  display:flex;align-items:center;justify-content:center;color:#fff;
  transform:scale(0.7);transition:transform 0.25s ease;
}
.gsearch-card:hover .gsearch-card-play{transform:scale(1)}
.gsearch-badge{
  position:absolute;top:7px;left:7px;z-index:2;font-size:0.6rem;font-weight:800;letter-spacing:0.02em;
  padding:3px 8px;border-radius:6px;color:#fff;text-transform:uppercase;
  background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,0.12);
}
.gsearch-badge--anime-en{background:rgba(59,130,246,0.85)}
.gsearch-badge--anime-id{background:rgba(255,62,62,0.85)}
.gsearch-badge--manga-en{background:rgba(168,85,247,0.85)}
.gsearch-badge--manga-id{background:rgba(245,158,11,0.85)}
.gsearch-badge--wallpaper{background:rgba(34,197,94,0.85)}
.gsearch-badge-adult{position:absolute;top:7px;right:7px;z-index:2;font-size:0.6rem;font-weight:800;padding:3px 7px;border-radius:6px;background:rgba(220,38,38,0.9);color:#fff}
.gsearch-card-rating{
  position:absolute;bottom:7px;right:7px;z-index:2;display:flex;align-items:center;gap:3px;
  font-size:0.68rem;font-weight:700;color:#fff;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);
  padding:2px 7px;border-radius:6px;
}
.gsearch-card-rating svg{color:#f59e0b;width:10px;height:10px}

.gsearch-card-info{padding:9px 10px}
.gsearch-card-title{
  font-size:0.82rem;font-weight:600;line-height:1.3;margin:0 0 4px;color:var(--text-primary);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.gsearch-card-meta{font-size:0.7rem;color:var(--text-muted);display:flex;align-items:center;gap:5px}
.gsearch-card-meta .dot{opacity:0.5}

/* ── Skeleton loading ── */
.gsearch-skeleton{animation:gsearchFadeIn 0.2s ease}
.gsearch-skel-section{margin-bottom:36px}
.gsearch-skel-heading{width:180px;height:22px;border-radius:6px;margin-bottom:16px;background:linear-gradient(110deg,rgba(255,255,255,0.03) 8%,rgba(255,255,255,0.08) 18%,rgba(255,255,255,0.03) 33%);background-size:200% 100%;animation:gsearchShimmer 1.4s ease-in-out infinite}
.gsearch-skel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
@media (max-width:480px){.gsearch-skel-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
.gsearch-skel-card{border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-surface);border:1px solid var(--border-color)}
.gsearch-skel-poster{aspect-ratio:2/3;background:linear-gradient(110deg,rgba(255,255,255,0.03) 8%,rgba(255,255,255,0.08) 18%,rgba(255,255,255,0.03) 33%);background-size:200% 100%;animation:gsearchShimmer 1.4s ease-in-out infinite}
.gsearch-skel-line{height:9px;margin:9px 10px;border-radius:4px;background:linear-gradient(110deg,rgba(255,255,255,0.03) 8%,rgba(255,255,255,0.08) 18%,rgba(255,255,255,0.03) 33%);background-size:200% 100%;animation:gsearchShimmer 1.4s ease-in-out infinite}
.gsearch-skel-line.short{width:55%}
@keyframes gsearchShimmer{to{background-position-x:-200%}}

/* ── Empty state ── */
.gsearch-empty{text-align:center;padding:60px 20px;animation:gsearchFadeIn 0.3s ease}
.gsearch-empty svg{color:var(--text-muted);opacity:0.4;margin-bottom:18px}
.gsearch-empty h3{font-size:1.15rem;font-weight:700;margin:0 0 8px;word-break:break-word}
.gsearch-empty p{color:var(--text-muted);font-size:0.88rem;margin:0 0 8px}
.gsearch-empty .gsearch-chip-row{justify-content:center}
.gsearch-empty .gsearch-block-header{justify-content:center}

/* ── Animations ── */
@keyframes gsearchFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes gsearchFadeIn{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .gsearch-card,.gsearch-chip,.gsearch-section{animation:none;transition:none}
}