/* ============== Todo dentro de #custom-search-box ============== */
#custom-search-box {
  max-width: 900px;
  margin: 0 auto;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  color: #111827;
  box-sizing: border-box;
}

/* --- Categorías --- */
#custom-search-box #search-categories {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
#custom-search-box .cat-btn {
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid #e5e7eb;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  color: #111827;
  transition: all .15s ease;
  outline: none;
}
#custom-search-box .cat-btn:hover {
  background: #f3f4f6;
  transform: translateY(-1px);
}
#custom-search-box .cat-btn.active {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  box-shadow: 0 6px 18px rgba(37,99,235,0.12);
  font-weight: 600;
}

/* --- Fila de búsqueda --- */
#custom-search-box .search-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
#custom-search-box .search-row-inner {
  display: flex;
  width: 100%;
  max-width: 600px;
  border: 1px solid #d1d5db;
  border-radius: 30px;
  overflow: hidden;
  background: #fff;
}
#custom-search-box input#my-search {
  flex: 1;
  padding: 12px 16px;
  font-size: 16px;
  border: none;
  outline: none;
  min-width: 0;
}
#custom-search-box button#my-search-btn {
  padding: 12px 20px;
  font-size: 16px;
  border: none;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
  transition: background .18s;
  flex-shrink: 0;
}
#custom-search-box button#my-search-btn:hover {
  background: #1e40af;
}

/* --- Resultados --- */
#custom-search-box #my-results > div {
  margin: 4px auto;
  max-width: 800px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}
#custom-search-box #my-results > div:last-child {
  border-bottom: none;
}
#custom-search-box #my-results a {
  /* display: block; */
  color: #1e40af;
  text-decoration: none;
  font-size: 19px;
}
#custom-search-box #my-results a:hover {
  text-decoration: underline;
}
#custom-search-box #my-results small {
  color: #4b5563;
}

/* --- Paginación --- */
#custom-search-box #pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 16px auto 0;
  flex-wrap: nowrap !important;
  white-space: nowrap;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 6px;
  text-align: center;
}
#custom-search-box #pagination::-webkit-scrollbar {
  display: none;
}
#custom-search-box #pagination button {
  min-width: 34px;
  padding: 6px 12px;
  border-radius: 9999px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: all .18s ease;
  color: #374151;
  flex: 0 0 auto;
}
#custom-search-box #pagination button:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: #cbd5e1;
  transform: translateY(-1px);
}
#custom-search-box #pagination button:disabled {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  font-weight: 600;
  cursor: default;
}
#custom-search-box #pagination span {
  color: #9ca3af;
  padding: 0 4px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
}

/* --- Responsive --- */
@media (max-width: 640px) {
  #custom-search-box .search-row-inner { max-width: 100%; border-radius: 20px; }
  #custom-search-box input#my-search { font-size: 15px; padding: 10px 12px; }
  #custom-search-box button#my-search-btn { padding: 10px 16px; font-size: 15px; }
  #custom-search-box #my-results a { font-size: 19px; }
}


.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  color: #444;
  font-size: 14px;
  font-family: sans-serif;
}

.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #ddd;
  border-top: 3px solid #444;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}