/* ── Custom Select ────────────────────────────────── */
.select-wrap {
  position: relative;
  width: 100%;
}

.field-select {
  width: 100%;
  padding: clamp(10px, 1.8vh, 16px) clamp(40px, 5vw, 48px) clamp(10px, 1.8vh, 16px) clamp(14px, 1.8vw, 20px);
  font-size: var(--font-input);
  font-family: var(--font-family);
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background   var(--transition-fast);
}

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

.field-select option {
  background: #0d0b1e;
  color: var(--color-text);
}

.select-wrap::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-muted);
  border-bottom: 2px solid var(--color-muted);
  rotate: 45deg;
  pointer-events: none;
  transition: border-color var(--transition-fast);
  margin-top: -3px;
}

.select-wrap:focus-within::after {
  border-color: var(--color-primary);
}

.field-item.has-error .field-select {
  border-color: var(--color-error);
}

/* ── Tel / DDI ─────────────────────────────────────── */
.tel-wrap {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.ddi-select {
  flex-shrink: 0;
  padding: clamp(10px, 1.8vh, 16px) 8px;
  font-size: clamp(0.8rem, 1.2vw, 0.925rem);
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  min-width: 80px;
  text-align: center;
  transition: border-color var(--transition-fast);
}

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

.ddi-select option {
  background: #0d0b1e;
  color: var(--color-text);
}

.tel-wrap .field-input {
  flex: 1;
}

.field-item.has-error .ddi-select {
  border-color: var(--color-error);
}

/* ── Multi-select (checkbox) ──────────────────────── */
.multi-hint {
  font-size: var(--font-sm);
  color: var(--color-muted);
  margin-bottom: -4px;
}

.choice-grid.multi-select .choice-option.selected .choice-key::after {
  content: '✓';
  font-size: 10px;
}

.choice-grid.multi-select .choice-option.selected .choice-key {
  font-size: 0;
}

/* ── Field hint (sublabel) ────────────────────────── */
.field-hint {
  font-size: var(--font-sm);
  color: var(--color-muted);
  margin-top: -8px;
}