/* ==================================================
   Varinkio Form Components
================================================== */

.pf-form-grid {
    display: grid;
    gap: 18px;
}

.pf-form-field {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 7px;
}

.pf-form-label {
    color: var(--pf-text);

    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.pf-input,
.pf-select,
.pf-textarea {
    width: 100%;
    max-width: 100%;

    box-sizing: border-box;

    border: 1px solid var(--pf-border-strong);
    border-radius: 11px;

    background: var(--pf-surface);
    color: var(--pf-text);

    font: inherit;
    font-size: 14px;

    box-shadow: none;

    transition:
        border-color var(--pf-transition),
        box-shadow var(--pf-transition);
}

.pf-input,
.pf-select {
    min-height: 48px;
    padding: 0 14px;
}

.pf-textarea {
    min-height: 120px;
    padding: 12px 14px;
    resize: vertical;
}

.pf-input:focus,
.pf-select:focus,
.pf-textarea:focus {
    border-color: var(--pf-primary);
    outline: none;

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--pf-primary) 14%,
            transparent
        );
}

.pf-form-help {
    margin: 0;

    color: var(--pf-text-muted);

    font-size: 12px;
    line-height: 1.5;
}

.pf-input:disabled,
.pf-select:disabled,
.pf-textarea:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}