/* ============================================================
   Forms

   One input style for the whole site.

   Inputs used to render dark (#2c2c2c with white text) from this
   file, while product search, the money-transfer calculator and
   the seller area each overrode them back to a light field. So
   the same control looked like two different controls depending
   on which page you were on, and the dark version sat on white
   cards everywhere else. Light is now the one style, sized for a
   thumb: 48px minimum, 16px text (below 16px, iOS zooms the page
   on focus, which is its own usability problem).
   ============================================================ */

input,
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background-color: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-base);
  transition: border-color var(--transition), box-shadow var(--transition);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--brand-gold-dark);
}

input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
  border-color: var(--brand-gold);
  box-shadow: var(--ring);
  outline: none;
}

input:disabled,
select:disabled,
textarea:disabled {
  background-color: var(--surface-alt);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Checkboxes and radios are not text fields — undo the sizing */
input[type="checkbox"],
input[type="radio"] {
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--brand-gold);
  vertical-align: middle;
}

input[type="file"] {
  padding: var(--space-2);
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23231f20' d='M6 9L.75 3.5 1.5 2.75 6 7.25 10.5 2.75l.75.75z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-6);
}

select option {
  background-color: var(--surface);
  color: var(--text);
}

/* Labels */
label {
  display: inline-block;
  margin-bottom: var(--space-2);
  color: var(--brand-black);
  font-weight: var(--fw-semibold);
}

/* A labelled field */
.form-group {
  width: 100%;
  margin-bottom: var(--space-4);
  text-align: left;
}

.form-group input[type="checkbox"] + label,
.form-group label + input[type="checkbox"] {
  margin-left: var(--space-2);
}

.form-control {
  width: 100%;
}

/* Password field with a reveal button */
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.password-wrapper .form-control {
  flex-grow: 1;
  padding-right: 48px;
}

.toggle-password {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
}

.toggle-password:hover,
.toggle-password:focus-visible {
  color: var(--brand-black);
  background: var(--surface-alt);
}

.toggle-password i {
  font-size: var(--fs-md);
}

/* Form layout helpers */
.form-centered { text-align: center; }

.actions-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}