/* ============================================================
   forms.css — Shared form components
   Form controls, toggle, radio, divider, label hints,
   readonly inputs, textarea wrap.
   ============================================================ */


/* ============================================================
   5) FORM CONTROLS
   Overrides Bootstrap .form-control, .form-select, .form-label
   ============================================================ */

/* Label */
.wd-form-label,
.wd-split__form .form-label {
  font-family: var(--wd-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--wd-text-primary);
  margin-bottom: var(--wd-space-3);
}

/* Required hint appended to label */
.wd-form-label .wd-required {
  font-size: 12px;
  font-weight: 400;
  color: var(--wd-text-muted);
  margin-left: 4px;
}

/* Text input (50px) */
.wd-form-input,
.wd-split__form .form-control {
  height: var(--wd-input-h);
  background: var(--wd-glass-10);
  border: 0;
  border-radius: var(--wd-radius-sm);
  padding: 0 10px;
  font-family: var(--wd-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--wd-text-primary);
  width: 100%;
}

.wd-form-input::placeholder,
.wd-split__form .form-control::placeholder {
  color: var(--wd-text-muted);
}

.wd-form-input:focus,
.wd-split__form .form-control:focus {
  background: var(--wd-glass-10);
  color: var(--wd-text-primary);
  box-shadow: 0 0 0 1px var(--wd-glass-30);
  outline: none;
}

/* Select input (50px) */
.wd-form-select,
.wd-split__form .form-select {
  height: var(--wd-input-h-lg);
  background-color: var(--wd-glass-10);
  border: 0;
  border-radius: var(--wd-radius-sm);
  padding: 0 10px;
  font-family: var(--wd-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--wd-text-primary);
  width: 100%;
  appearance: none;
}

.wd-form-select:focus,
.wd-split__form .form-select:focus {
  background-color: var(--wd-glass-10);
  color: var(--wd-text-primary);
  box-shadow: 0 0 0 1px var(--wd-glass-30);
  outline: none;
}

.wd-form-select option,
.wd-split__form .form-select option {
  background-color: #1a1a1a;
  color: var(--wd-text-primary);
}

/* Textarea */
.wd-form-textarea,
.wd-split__form textarea.form-control {
  height: 250px;
  background: var(--wd-glass-10);
  border: 0;
  border-radius: var(--wd-radius-sm);
  padding: 10px;
  font-family: var(--wd-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--wd-text-primary);
  width: 100%;
  resize: vertical;
}

.wd-form-textarea::placeholder,
.wd-split__form textarea.form-control::placeholder {
  color: var(--wd-text-muted);
}

.wd-form-textarea:focus,
.wd-split__form textarea.form-control:focus {
  background: var(--wd-glass-10);
  color: var(--wd-text-primary);
  box-shadow: 0 0 0 1px var(--wd-glass-30);
  outline: none;
}

/* Input group (prefix + input) */
.wd-input-group {
  display: flex;
  align-items: stretch;
  height: var(--wd-input-h);
  background: var(--wd-glass-10);
  border-radius: var(--wd-radius-sm);
  overflow: hidden;
}
.wd-input-group__text {
  display: flex;
  align-items: center;
  min-width: 160px;
  padding: 0 10px;
  font-family: var(--wd-font);
  font-size: 14px;
  font-weight: 400;
  color: var(--wd-text-muted);
  white-space: nowrap;
  border-right: 1px solid var(--wd-glass-20);
}
.wd-input-group__input {
  flex: 1;
  height: 100%;
  background: transparent;
  border: 0;
  padding: 0 10px;
  font-family: var(--wd-font);
  font-size: 16px;
  font-weight: 400;
  color: var(--wd-text-primary);
  outline: none;
}
.wd-input-group__input::placeholder { color: var(--wd-text-muted); }

/* Error state borders */
.wd-form-input--error  { border: 1px solid var(--wd-red-danger) !important; }
.wd-form-select--error { border: 1px solid var(--wd-red-danger) !important; }
.wd-form-textarea--error { border: 1px solid var(--wd-red-danger) !important; }
.wd-input-group--error { border: 1px solid var(--wd-red-danger) !important; }

/* Character counter (inside textarea) */
.wd-char-count {
  font-size: 12px;
  line-height: 1.4;
  color: var(--wd-text-muted);
  text-align: right;
}

/* Helper text below input */
.wd-form-help,
.wd-split__form .form-text {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--wd-text-primary);
  margin-top: var(--wd-space-3);
}

/* Phone number input group */
.wd-phone-group {
  display: flex;
  gap: var(--wd-space-1);
  height: var(--wd-input-h-lg);
}

.wd-phone-group__code {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  background: var(--wd-glass-10);
  border-radius: var(--wd-radius-sm);
  flex-shrink: 0;
}

.wd-phone-group__code img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.wd-phone-group__code span {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--wd-text-primary);
  white-space: nowrap;
}

.wd-phone-group__number {
  flex: 1 1 0;
  background: var(--wd-glass-10);
  border: 0;
  border-radius: var(--wd-radius-sm);
  padding: 0 10px;
  font-family: var(--wd-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--wd-text-primary);
}

.wd-phone-group__number::placeholder {
  color: var(--wd-text-muted);
}

.wd-phone-group__number:focus {
  background: var(--wd-glass-10);
  box-shadow: 0 0 0 1px var(--wd-glass-30);
  outline: none;
}

/* Prefix input (e.g. username, social URLs) */
.wd-prefix-input {
  height: var(--wd-input-h-lg);
  background: var(--wd-glass-05);
  border: 0;
  border-radius: var(--wd-radius-sm);
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: var(--wd-space-1);
  width: 100%;
  min-width: 250px;
}

.wd-prefix-input__prefix {
  font-family: var(--wd-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--wd-text-primary);
  white-space: nowrap;
  flex-shrink: 0;
}

.wd-prefix-input__value {
  flex: 1 1 0;
  background: transparent;
  border: 0;
  font-family: var(--wd-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--wd-text-primary);
  outline: none;
  min-width: 0;
}

.wd-prefix-input__value::placeholder {
  color: var(--wd-text-muted);
}

.wd-prefix-input__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Short textarea (bio — 120px) */
.wd-form-textarea--short {
  height: 120px;
  background: var(--wd-glass-05);
}

/* Form field group (label + input + help) — vertical stack */
.wd-field {
  display: flex;
  flex-direction: column;
  gap: var(--wd-space-3);
}

/* Form section (multiple fields stacked) */
.wd-fields {
  display: flex;
  flex-direction: column;
  gap: var(--wd-space-5);
}


/* ============================================================
   6) TOGGLE SWITCH
   ============================================================ */
.wd-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: var(--wd-toggle-w);
  height: var(--wd-toggle-h);
  background: var(--wd-glass-20);
  border-radius: 54px;
  padding: 2px;
  cursor: pointer;
  border: 0;
  transition: background 0.2s ease;
}

.wd-toggle__thumb {
  width: var(--wd-toggle-thumb);
  height: var(--wd-toggle-thumb);
  background: var(--wd-white);
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.wd-toggle.is-active {
  background: var(--wd-white);
}

.wd-toggle.is-active .wd-toggle__thumb {
  transform: translateX(calc(var(--wd-toggle-w) - var(--wd-toggle-thumb) - 4px));
  background: var(--wd-black);
}

/* Toggle row (label + toggle) */
.wd-toggle-row {
  display: flex;
  align-items: center;
  gap: var(--wd-space-4);
}

.wd-toggle-row__label {
  flex: 1 1 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--wd-text-primary);
}


/* ============================================================
   7) RADIO BUTTONS
   ============================================================ */
.wd-radio-group {
  display: flex;
  gap: var(--wd-space-3);
}

.wd-radio {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.wd-radio__input {
  width: 20px;
  height: 20px;
  border: 2px solid var(--wd-glass-50);
  border-radius: 50%;
  background: transparent;
  position: relative;
  flex-shrink: 0;
  appearance: none;
  cursor: pointer;
}

.wd-radio__input:checked {
  border-color: var(--wd-white);
}

.wd-radio__input:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: var(--wd-white);
  border-radius: 50%;
}

.wd-radio__label {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--wd-text-primary);
}


/* ============================================================
   9) DIVIDER
   ============================================================ */
.wd-divider {
  border: 0;
  border-top: 0.5px solid var(--wd-border-medium);
  margin: 0;
}

/* "or" divider (line — text — line) */
.wd-divider-text {
  display: flex;
  align-items: center;
  gap: var(--wd-space-5);
}

.wd-divider-text::before,
.wd-divider-text::after {
  content: "";
  flex: 1;
  height: 0;
  border-top: 0.5px solid var(--wd-border-medium);
}

.wd-divider-text span {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--wd-text-primary);
  white-space: nowrap;
}


/* ============================================================
   From S28: Shared form helpers
   ============================================================ */

/* Textarea with char counter wrapper */
.wd-textarea-wrap {
  display: flex;
  flex-direction: column;
}

.wd-textarea-wrap .wd-char-count {
  margin-top: 0;
  padding: 0 10px 10px;
}

/* Label hint for (required)/(optional) indicators */
.wd-label-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--wd-text-muted);
  margin-left: 4px;
}

/* Muted label (e.g. readonly fields) */
.wd-form-label--muted {
  color: var(--wd-text-muted);
}

/* Readonly input (e.g. confirmed email) */
.wd-form-input--readonly {
  background: var(--wd-glass-20);
  color: var(--wd-text-muted);
  cursor: not-allowed;
}