/* --- SerchOceanGame: Search Page Styles --- */
.search-page-section {
  margin-top: var(--space-4);
  margin-bottom: var(--space-16);
}
.search-title {
  font-size: var(--font-size-2xl);
  color: var(--color-primary);
  text-align: center;
  margin-bottom: var(--space-4);
}
.search-intro {
  text-align: center;
  margin-bottom: var(--space-6);
}

.search-form {
  margin-bottom: var(--space-8);
}
.search-bar-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
#search-input {
  flex: 1 1 auto;
  min-width: 150px;
  font-size: var(--font-size-lg);
}
.search-submit {
  min-width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-4);
  font-size: var(--font-size-lg);
}
.search-filters-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.search-filter {
  display: flex;
  flex-direction: column;
  min-width: 136px;
}
.search-advanced-toggle {
  background: #fff;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  box-shadow: none;
  padding: var(--space-2) var(--space-4);
  transition: background-color var(--transition-base), color var(--transition-base);
}
.search-advanced-toggle:hover,
.search-advanced-toggle:focus-visible {
  background: var(--color-primary);
  color: #fff;
}
.advanced-search-fields {
  display: none;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-4) var(--space-1);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-xs);
}
.advanced-search-fields.open {
  display: block;
}
.advanced-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.advanced-search-row > div {
  flex: 1 1 140px;
  min-width: 140px;
}

.search-tips {
  background: #e6f7fa;
  border-left: 5px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}
.search-tips ul {
  margin-left: var(--space-4);
  list-style: disc outside;
}
.search-tips li {
  margin-bottom: var(--space-2);
}

.related-searches {
  margin-bottom: var(--space-8);
}
.related-searches ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-left: 0;
}
.related-search-link {
  background: #caf0f8;
  color: var(--color-primary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-4);
  transition: background var(--transition-base), color var(--transition-base);
  font-weight: 600;
}
.related-search-link:hover,
.related-search-link:focus-visible {
  background: var(--color-primary);
  color: #fff;
}

.search-main-content {
  display: flex;
  flex-direction: row;
  gap: var(--space-10);
  align-items: flex-start;
  margin-bottom: var(--space-4);
}
#search-results-section {
  flex: 3 3 340px;
}
#saved-searches-section {
  flex: 1 1 200px;
  max-width: 250px;
}
.saved-searches-list {
  margin-bottom: var(--space-4);
  padding-left: var(--space-2);
}
.saved-searches-list li {
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-base);
}
.saved-searches-list button {
  background: none;
  color: var(--color-danger);
  border: none;
  cursor: pointer;
  font-size: var(--font-size-xs);
  padding: 0 4px;
  margin-left: 6px;
  transition: color var(--transition-base);
}
.saved-searches-list button:hover,
.saved-searches-list button:focus-visible {
  color: #b82e4c;
}
.no-saved {
  color: var(--gray-400);
  font-style: italic;
}

.search-results-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 4em;
}
.search-placeholder {
  color: var(--gray-400);
  font-style: italic;
  font-size: var(--font-size-base);
}
.search-result-card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  display: flex;
  gap: var(--space-6);
  padding: var(--space-5);
  align-items: flex-start;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  position: relative;
}
.search-result-card:hover,
.search-result-card:focus-within {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px) scale(1.011);
}
.result-img-wrap {
  flex-shrink: 0;
  min-width: 60px;
  max-width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #e0f4fc;
  display: flex;
  align-items: center;
  justify-content: center;
}
.result-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.result-content {
  flex: 1;
}
.result-title {
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  text-decoration: none;
  font-family: var(--font-serif);
  font-weight: 700;
}
.result-title:hover,
.result-title:focus-visible {
  text-decoration: underline;
  color: #023e8a;
}
.result-meta {
  color: var(--gray-500);
  font-size: var(--font-size-xs);
  margin-bottom: var(--space-2);
  display: flex;
  gap: var(--space-4);
}
.result-desc {
  font-size: var(--font-size-base);
  color: var(--color-text);
}
.save-search-btn {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  background: none;
  color: var(--color-primary);
  border: none;
  cursor: pointer;
  font-size: 1.35em;
  padding: 0;
  transition: color var(--transition-base);
}
.save-search-btn.saved,
.save-search-btn[aria-pressed="true"] {
  color: #2b9348;
}
.save-search-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.search-feedback {
  margin-top: var(--space-8);
  background: #f1faff;
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-4);
  box-shadow: var(--shadow-xs);
  max-width: 650px;
}
#search-feedback-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
#feedback-text {
  resize: vertical;
  min-height: 66px;
}
.feedback-confirmation {
  color: var(--color-success);
  margin-top: var(--space-2);
  font-weight: 600;
}

/* -- Responsive -- */
@media (max-width: 950px) {
  .search-main-content {
    flex-direction: column-reverse;
    gap: var(--space-6);
  }
  #saved-searches-section,
  #search-results-section {
    max-width: 100%;
    flex: 1 1 100%;
  }
}
@media (max-width: 630px) {
  .search-bar-row, .search-filters-row, .advanced-search-row {
    flex-direction: column;
    gap: var(--space-2);
  }
  .search-title, .search-intro {
    text-align: left;
  }
}
@media (max-width: 520px) {
  .search-result-card {
    flex-direction: column;
    padding: var(--space-3);
    gap: var(--space-2);
  }
  .result-img-wrap {
    min-width: 100%;
    max-width: 100%;
    height: 40vw;
    max-height: 110px;
  }
  .search-tips, .search-feedback {
    padding: var(--space-3) var(--space-1);
  }
}