.search-results { font-family: Arial, sans-serif; padding: 20px; background-color: #f9f9f9; color: #333; }
h1 { color: #1e90ff; margin-bottom: 20px; font-size: 1.8rem; }
.result-card { border-bottom: 1px solid #ccc; padding: 10px 0; }
.result-card a { color: #1e90ff; font-weight: bold; text-decoration: none; font-size: 1.1rem; }
.result-card a:hover { text-decoration: underline; }
.result-card p { margin: 5px 0; font-size: 0.95rem; color: #555; }
.no-results { color: #ff4500; font-weight: bold; }

@media (max-width: 768px) {
.search-results { padding: 10px; }
h1 { font-size: 1.5rem; }
.result-card a { font-size: 1rem; }
.result-card p { font-size: 0.9rem; }
}

.suggest-item.recent-search { font-style: italic; color: #555; }

#search-suggest { position: absolute; background: #fff; width: 100%; max-width: 600px; box-shadow: 0 8px 30px rgba(0,0,0,.15); border-radius: 6px; margin-top: 5px; z-index: 9999; display: none; }
.suggest-title { font-weight: bold; padding: 6px 10px; background: #f5f5f5; }
.suggest-item { padding: 8px 10px; cursor: pointer; font-size: 14px; }
.suggest-item:hover { background: #1e90ff; color: #fff; }
.suggest-item.active { background: #eef4ff; }

.suggest-box { position: absolute; background: #fff; width: 100%; top: 100%; left: 0; border: 1px solid #ddd; box-shadow: 0 4px 10px rgba(0,0,0,.1); z-index: 999; }

.suggestions { margin-top: 20px; background-color: #eef6ff; padding: 15px; border-radius: 6px; }
.suggestion-category { margin-bottom: 15px; }
.suggestion-category strong { color: #1e90ff; display: block; margin-bottom: 5px; font-size: 1rem; }
.suggestion-category ul { list-style: disc inside; margin: 0; padding: 0; }
.suggestion-category ul li { margin: 3px 0; }
.suggestion-category ul li a { color: #1e90ff; text-decoration: none; }
.suggestion-category ul li a:hover { text-decoration: underline; }

/* =========================
   Responsive Grid for Test Series Cards
========================= */
.test-cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* space between cards */
}

.test-cards-grid .test-card {
    flex: 1 1 250px; /* natural width */
    max-width: 300px; /* prevent card from stretching too wide */
}

/* Desktop: 4 per row */
@media (min-width: 1200px) {
    .test-cards-grid .test-card { flex: 1 1 22%; max-width: 22%; }
}

/* Large tablets / small desktops: 3 per row */
@media (min-width: 992px) and (max-width: 1199px) {
    .test-cards-grid .test-card { flex: 1 1 30%; max-width: 30%; }
}

/* Tablets: 2 per row */
@media (min-width: 769px) and (max-width: 991px) {
    .test-cards-grid .test-card { flex: 1 1 45%; max-width: 45%; }
}

/* Mobile: 1 per row */
@media (max-width: 768px) {
    .test-cards-grid .test-card { flex: 1 1 100%; max-width: 100%; }
}

@media (max-width: 480px) {
.search-results { padding: 10px; }
h1 { font-size: 1.3rem; text-align: center; }
.result-card a { font-size: 1rem; }
.result-card p { font-size: 0.85rem; }
#search-suggest { max-width: 100%; }
}

@media (min-width: 481px) and (max-width: 600px) {
h1 { font-size: 1.4rem; }
.result-card a { font-size: 1.05rem; }
}

@media (min-width: 601px) and (max-width: 768px) {
.search-results { padding: 15px; }
h1 { font-size: 1.5rem; }
}

@media (min-width: 769px) and (max-width: 991px) {
.search-results { max-width: 90%; }
h1 { font-size: 1.6rem; }
}

@media (min-width: 992px) and (max-width: 1199px) {
.search-results { max-width: 1000px; }
}

@media (min-width: 1200px) {
.search-results { max-width: 1200px; }
h1 { font-size: 1.8rem; }
}