/* =====================================================
   HEADER TEXT
===================================================== */

.search-table h3 {
  margin-bottom: var(--space-xs);
  color: var(--accent-primary);
}

.search-table p {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}


/* =====================================================
   ERROR MESSAGE
===================================================== */

.hide-message {
  display: none;
}

.alert-error {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error);
  color: var(--color-error);

  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  margin: var(--space-sm) 0;
}


/* =====================================================
   FORM CONTAINER
===================================================== */

.sort-form__search {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);

  padding: var(--space-md);
  margin-top: var(--space-md);

  box-shadow: var(--shadow-sm);

  display: grid;
  gap: var(--space-sm);
}


/* GRID */

@media (min-width: 700px) {
  .sort-form__search {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .sort-form__search {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* =====================================================
   LABEL + INPUT
===================================================== */

.search-form__label {
  display: flex;
  flex-direction: column;
}

.search-form__input {
  width: 100%;
}

.search-unit {
  grid-column: 1 / -1;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}


/* =====================================================
   SELECT
===================================================== */

.search-form__input select,
select.search-form__input {
  appearance: none;
  cursor: pointer;
}


/* =====================================================
   BUTTON ROW
===================================================== */

.sort-form__submit {
  grid-column: 1 / -1;

  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;

  margin-top: var(--space-sm);
}

@media (max-width: 600px) {
  .sort-form__submit {
    flex-direction: column;
  }

  .sort-form__submit .page-button {
    width: 100%;
  }
}


/* =====================================================
   RESULTS
===================================================== */

#search-results {
  margin-top: var(--space-lg);
}

.section-area__title h4 {
  color: var(--accent-primary);
  margin-bottom: var(--space-sm);
}

.search-results__container {
  padding: var(--space-sm);

  max-height: 500px;
  overflow-y: auto;

  box-shadow: var(--shadow-sm);
}

.sort-group__title {
  font-size: 1.2rem;
display: block;
margin-bottom: 10px;
}


/* =====================================================
   NO RESULTS
===================================================== */

.no-result {
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-md) var(--space-sm);
  font-size: var(--font-size-sm);
}


/* =====================================================
   SCROLLBAR
===================================================== */

.search-results__container::-webkit-scrollbar {
  width: 8px;
}

.search-results__container::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-xs);
}

.search-results__container::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
}


/* =====================================================
   PAINT OPTIONS
===================================================== */

.paint-option__add,
.paint-option__remove {
  text-decoration: none;
  margin: var(--space-md);
  color: var(--color-info) !important;
  cursor: pointer;
}

.paint-option__add:hover,
.paint-option__remove:hover {
  color: var(--accent-secondary) !important;
}


/* =====================================================
   PROGRESS BAR
===================================================== */

.progress {
  background: linear-gradient(
    145deg,
    var(--surface-2),
    var(--bg-surface)
  );

  border: 1px solid var(--border-subtle);
  border-radius: 999px;

  overflow: hidden;

  box-shadow:
    inset 0 0 8px rgba(0,0,0,0.6),
    var(--shadow-sm);
}


/* BAR */

.progress-bar {
  background: linear-gradient(
    90deg,
    var(--color-success),
    #4ade80
  ) !important;

  border-radius: 999px;

  box-shadow:
    inset 0 0 6px rgba(0,0,0,0.6),
    0 0 8px var(--color-success-bg);

  transition: width var(--transition);
}


/* TEXT */

#progressText {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

#progressText .prog-steps {
  color: var(--color-info);
  font-weight: var(--font-weight-medium);
}


/* =====================================================
   HIDDEN STEP
===================================================== */

.progress-step--hidden {
  display: none;
}