/* Base Reset */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #121212, #1a1a1a); color:#eee; }

/* Navbar */
.navbar {
  position: sticky;
  top:0;
  background:#1f1f1f;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 2rem;
  box-shadow:0 4px 12px rgba(0,0,0,0.5);
  z-index:100;
}
.navbar .logo {
  font-size:1.8rem;
  font-weight:bold;
  color:#ffd700;
  text-shadow: 0 0 4px #00000055;
}
.navbar .nav-links { list-style:none; display:flex; gap:1.5rem; }
.navbar .nav-links li a { text-decoration:none; color:#eee; font-weight:500; transition:0.3s; }
.navbar .nav-links li a:hover, .navbar .nav-links li a.active { color:#ffd700; }

/* Page Title & Description */
.page-title { text-align:center; margin:2rem 0 0.5rem; font-size:2.5rem; color:#ffd700; }
.page-desc { text-align:center; margin-bottom:1rem; font-size:1.1rem; color:#bbb; }

/* ===== Controls row: left controls & right filter ===== */
.pokedex-controls {
  display:flex;
  align-items:center;
  gap:1rem;
  padding: 0 2rem;
  max-width:1400px;
  margin: 0 auto 1.25rem;
}

/* Left side controls (search, random) */
/* Center left controls and match color scheme with filter button */
.left-controls {
  display: flex;
  justify-content: center; /* horizontally center all elements */
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;
}

/* Style buttons and input same as filter dropdown */
.left-controls button,
.left-controls input[type="text"] {
  border-radius: 999px;
  border: 1px solid rgba(255,215,0,0.2);
  background: linear-gradient(180deg, #171717, #222222);
  color: gold;
  font-weight: 600;
  padding: 0.55rem 1rem;
  cursor: pointer;
  transition: 0.15s;
}

/* Hover/focus effects */
.left-controls button:hover,
.left-controls input[type="text"]:focus {
  border-color: #ffd700;
  box-shadow: 0 0 0 4px rgba(255,215,0,0.06);
  outline: none;
}

/* Placeholder text */
.left-controls input[type="text"]::placeholder {
  color: #bbb;
}

/* Right side controls (filter) */
.right-controls {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex: 0 0 auto;
}

/* Buttons */
.pokedex-controls button {
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: none;
  background: #ffd700;
  color: #222;
  font-weight: bold;
  cursor: pointer;
  transition:0.15s;
}
.pokedex-controls button:hover { background:#ffea70; }

/* Search input */
.pokedex-controls input[type="text"] {
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  border: 1px solid #555;
  width: 220px;
  outline: none;
  background: #1f1f1f;
  color: #eee;
}

/* --------- FILTER SELECT (polished) ---------- */
#typeFilter {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0.45rem 2.2rem 0.45rem 0.9rem; /* room for arrow */
  border-radius: 999px;
  border: 1px solid rgba(255,215,0,0.2);
  background: linear-gradient(180deg, #171717, #222222);
  color: Gold;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  min-width: 160px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
#typeFilter option {
  background: #222;
  color: #eee;
}
/* custom arrow using svg data url */
#typeFilter {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.15)),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 24 24"><path fill="%23ffd700" d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 10px;
}

/* hover/focus states */
#typeFilter:hover { border-color: #ffd700; }
#typeFilter:focus { outline: none; box-shadow: 0 0 0 4px rgba(255,215,0,0.06); }

/* Pokédex Grid */
#pokemon-container {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  gap:1.5rem;
  padding:2rem;
  max-width:1400px;
  margin:auto;
}

/* Pokémon Card */
.pokemon-card {
  background:#222;
  border-radius:20px;
  padding:1rem;
  text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,0.5);
  transition: transform 0.3s, box-shadow 0.3s;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.pokemon-card:hover { transform: translateY(-5px); }
.pokemon-card img { width:120px; height:120px; margin:auto; display:block; }
.pokemon-card h2 { margin:0.5rem 0; text-transform:capitalize; font-size:1.1rem; }
.pokemon-card p { margin:0.3rem 0; font-size:0.85rem; }

/* Card Glow by Type via CSS variable --type-color */
.pokemon-card::after {
  content:'';
  position:absolute;
  top:0; left:0; width:100%; height:100%;
  border-radius:20px;
  box-shadow: 0 0 15px rgba(255,255,255,0);
  transition: box-shadow 0.3s;
  pointer-events:none;
}
.pokemon-card:hover::after {
  box-shadow:0 0 20px var(--type-color, #ffd700aa);
}

/* Type Chips */
.type-chips { margin-bottom:0.5rem; display:flex; justify-content:center; flex-wrap:wrap; gap:0.3rem; }
.type-chip {
  display:inline-block;
  padding:0.3rem 0.7rem;
  border-radius:12px;
  font-size:0.75rem;
  margin:0.2rem 0.1rem;
  text-transform:capitalize;
  font-weight:bold;
  border:1px solid rgba(0,0,0,0.5);
  color: #fff;
}

/* Type Colors + CSS var for card glow (keeps previous palette) */
.type-fire { --type-color:#fd7d24; background-color:#fd7d24; color:#fff; }
.type-water { --type-color:#4592c4; background-color:#4592c4; color:#fff; }
.type-grass { --type-color:#9bcc50; background-color:#9bcc50; color:#000; }
.type-electric { --type-color:#eed535; background-color:#eed535; color:#000; }
.type-ice { --type-color:#51c4e7; background-color:#51c4e7; color:#000; }
.type-fighting { --type-color:#d56723; background-color:#d56723; color:#fff; }
.type-poison { --type-color:#b97fc9; background-color:#b97fc9; color:#fff; }
.type-ground { --type-color:#f7de3f; background-color:#f7de3f; color:#000; }
.type-flying { --type-color:#3dc7ef; background-color:#3dc7ef; color:#000; }
.type-psychic { --type-color:#f366b9; background-color:#f366b9; color:#fff; }
.type-bug { --type-color:#729f3f; background-color:#729f3f; color:#fff; }
.type-rock { --type-color:#a38c21; background-color:#a38c21; color:#fff; }
.type-ghost { --type-color:#7b62a3; background-color:#7b62a3; color:#fff; }
.type-dark { --type-color:#707070; background-color:#707070; color:#fff; }
.type-dragon { --type-color:#53a4cf; background-color:#53a4cf; color:#fff; }
.type-steel { --type-color:#9eb7b8; background-color:#9eb7b8; color:#000; }
.type-fairy { --type-color:#fdb9e9; background-color:#fdb9e9; color:#000; }
.type-normal { --type-color:#a4acaf; background-color:#a4acaf; color:#000; }

/* Pagination */
.pagination {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1rem;
  padding:1rem;
}
.pagination button {
  padding:0.6rem 1.2rem;
  border-radius:25px;
  border:none;
  background:#ffd700;
  color:#222;
  font-weight:bold;
  cursor:pointer;
  transition:0.2s;
}
.pagination button:hover { background:#ffea70; }

/* Loader */
.loader {
  text-align:center;
  font-size:1.2rem;
  padding:1rem;
  color:#bbb;
  display:none;
}
.loader::after {
  content:"";
  display:inline-block;
  width:20px;
  height:20px;
  margin-left:10px;
  border:3px solid #555;
  border-top-color:#ffd700;
  border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Footer */
footer {
  background:#1f1f1f;
  color:#bbb;
  text-align:center;
  padding:2rem 1rem;
  font-weight:500;
}

/* Notification Popup */
.notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: #111;
  color: #ffd700;
  padding: 1rem 1.5rem;
  border: 2px solid #ffd700;
  border-radius: 12px;
  font-weight: bold;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s, transform 0.5s;
}
.notification.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Accessibility: hide label but keep for screen readers */
.sr-only { position:absolute !important; clip:rect(1px,1px,1px,1px); padding:0 !important; border:0 !important; height:1px !important; width:1px !important; overflow:hidden; white-space:nowrap; }