/* ==========================================================================
   GNC SG — Form Components
   ========================================================================== */

/* ---- Text inputs ---- */

.form-text,
.form-email,
.form-search,
.form-url {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-white);
  transition: border-color var(--transition-fast);
}

.form-text:focus,
.form-email:focus,
.form-search:focus,
.form-url:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(204, 0, 0, 0.15);
}

.form-text::placeholder {
  color: var(--color-grey-400);
}

/* ---- Select dropdown (sort by) ---- */

.form-select {
  appearance: none;
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23757575' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

.form-select:focus {
  border-color: var(--color-primary);
  outline: none;
}

/* ---- Checkbox (facet filters) ---- */

.form-type-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  cursor: pointer;
}

.form-type-checkbox input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 2px solid var(--color-border);
  border-radius: 3px;
  background-color: var(--color-white);
  cursor: pointer;
  margin-top: 2px;
  transition: border-color var(--transition-fast),
              background-color var(--transition-fast);
}

.form-type-checkbox input[type="checkbox"]:checked {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M1 5l3 3 7-7' stroke='%23fff' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.form-type-checkbox label {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  cursor: pointer;
  line-height: 1.4;
}

/* ---- Form item label ---- */

.form-item label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

/* Status messages are styled in components/messages.css, which loads after
   this file in the global library and overrode every declaration that used to
   be repeated here. */