/* =============================================================================
   forms.css — public-site form controls in Amazon light style.
   ============================================================================= */

.ft-form { display: flex; flex-direction: column; gap: var(--space-md); }
.ft-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.ft-form-group { display: flex; flex-direction: column; gap: var(--space-xs); }
.ft-form-group label,
.ft-label {
  font-weight: 700;
  font-size: 13px;
  color: var(--clr-text-primary);
}
.ft-form-help {
  font-size: 12px;
  color: var(--clr-text-secondary);
  margin-top: 2px;
  line-height: 1.4;
}
.ft-form-error {
  font-size: 12px;
  color: var(--clr-error);
  margin-top: 2px;
}

.ft-input,
.ft-select,
.ft-textarea {
  width: 100%;
  padding: 7px var(--space-md);
  border: 1px solid #888C8C;
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: linear-gradient(to bottom, #F7F8FA, #FFFFFF);
  line-height: 1.4;
  color: var(--clr-text-primary);
  box-shadow: 0 1px 0 rgba(0,0,0,0.07) inset;
}
.ft-input::placeholder,
.ft-textarea::placeholder { color: var(--clr-text-muted); }

.ft-input:focus,
.ft-select:focus,
.ft-textarea:focus {
  outline: none;
  border-color: #E47911;
  box-shadow: var(--shadow-amazon-focus);
  background: #fff;
}

.ft-input.has-error,
.ft-select.has-error,
.ft-textarea.has-error {
  border-color: var(--clr-error);
}
.ft-input.has-error:focus,
.ft-select.has-error:focus,
.ft-textarea.has-error:focus {
  box-shadow: 0 0 0 3px rgba(204, 12, 57, 0.20);
}

.ft-textarea {
  min-height: 140px;
  font-family: inherit;
  resize: vertical;
  line-height: 1.5;
  background: #fff;
}

.ft-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}
.ft-checkbox-row input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #E47911;
}

/* ----- Card-style form wrapper (login, claim, etc.) Amazon sign-in panel */
.ft-card-form {
  max-width: 350px;
  margin: var(--space-2xl) auto;
  background: #fff;
  border: 1px solid #D5D9D9;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  padding: 20px 26px;
}
.ft-card-form h1 {
  font-size: 28px;
  font-weight: 400;
  margin-bottom: var(--space-md);
}

/* ----- Inline pill chip ------------------------------------------------ */
.ft-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--clr-border-strong);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--clr-text-primary);
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
}
.ft-chip:hover {
  background: #F0F2F2;
  color: var(--clr-text-primary);
  text-decoration: none;
}
.ft-chip-active,
.ft-chip[aria-pressed="true"] {
  background: var(--clr-text-primary);
  color: #fff;
  border-color: var(--clr-text-primary);
}
.ft-chip-count {
  font-size: 11px;
  color: var(--clr-text-muted);
  font-weight: 400;
}
.ft-chip-active .ft-chip-count { color: rgba(255, 255, 255, 0.7); }

@media (max-width: 560px) {
  .ft-form-row { grid-template-columns: 1fr; }
  .ft-card-form { padding: var(--space-lg); margin: var(--space-lg) auto; }
}