/*
 * KPT Production — Form Foundation
 * Comfortable on mobile. Errors never signaled by color alone.
 */

.kpt-form-group {
    margin-bottom: var(--kpt-space-md);
}
.kpt-form-label {
    display: block;
    font-size: var(--kpt-text-sm);
    font-weight: var(--kpt-weight-medium);
    color: var(--kpt-text-secondary);
    margin-bottom: var(--kpt-space-xs);
}
.kpt-form-label .required { color: var(--kpt-gold); margin-left: 2px; }

.kpt-input,
.kpt-textarea,
.kpt-select {
    width: 100%;
    min-height: var(--kpt-touch-min);
    padding: var(--kpt-space-sm) var(--kpt-space-md);
    background: var(--kpt-surface);
    border: 1px solid var(--kpt-border-mid);
    border-radius: var(--kpt-radius-sm);
    color: var(--kpt-text-primary);
    font-size: var(--kpt-text-md);
    transition: border-color var(--kpt-transition-fast), box-shadow var(--kpt-transition-fast);
}
.kpt-textarea { min-height: 120px; resize: vertical; }

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

.kpt-input:focus,
.kpt-textarea:focus,
.kpt-select:focus {
    outline: none;
    border-color: var(--kpt-gold);
    box-shadow: 0 0 0 3px rgba(201,168,76,0.15);
}

/* ── STATES ───────────────────────────────────────────────── */
.kpt-form-group.has-error .kpt-input,
.kpt-form-group.has-error .kpt-textarea {
    border-color: #e53e3e;
    box-shadow: 0 0 0 3px rgba(229,62,62,0.12);
}
.kpt-form-error {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--kpt-text-xs);
    color: #f87171;
    margin-top: var(--kpt-space-2xs);
}
.kpt-form-error::before { content: '⚠'; }

.kpt-form-group.has-success .kpt-input {
    border-color: #48bb78;
}
.kpt-form-success {
    font-size: var(--kpt-text-xs);
    color: #68d391;
    margin-top: var(--kpt-space-2xs);
}

.kpt-form-hint {
    font-size: var(--kpt-text-xs);
    color: var(--kpt-text-muted);
    margin-top: var(--kpt-space-2xs);
}

/* ── CHECKBOX / RADIO ─────────────────────────────────────── */
.kpt-checkbox,
.kpt-radio {
    display: flex;
    align-items: center;
    gap: var(--kpt-space-xs);
    min-height: var(--kpt-touch-min);
    font-size: var(--kpt-text-sm);
    color: var(--kpt-text-secondary);
    cursor: pointer;
}
.kpt-checkbox input,
.kpt-radio input {
    width: 18px;
    height: 18px;
    accent-color: var(--kpt-gold);
}