/**
 * LeanCMS v2 — Gravity Forms Field Styles
 *
 * Provides default form field styling when the active theme does not
 * include its own LCMS base stylesheet (base.css).  Loaded conditionally
 * by Style_Manager; themes can disable via:
 *
 *   add_filter( 'lcms_load_gform_styles', '__return_false' );
 *
 * Submit-button branding lives in lcms-core.css (always loaded).
 *
 * @package lcms
 */

/* ── Form wrapper ──────────────────────────────────────── */
.gform_wrapper {
    text-align: left;
}

/* ── Field layout ──────────────────────────────────────── */
.gform_wrapper .gform_fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gform_wrapper .gfield {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ── Labels ────────────────────────────────────────────── */
.gform_wrapper .gfield_label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary, #101010);
}

.gform_wrapper .gfield_required {
    color: oklch(0.637 0.237 25.331);
    margin-left: 0.25rem;
}

.gform_wrapper .gfield_required_text {
    font-size: 0.75rem;
    font-weight: 400;
}

/* ── Inputs / Textarea / Select ────────────────────────── */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper textarea,
.gform_wrapper select {
    display: flex;
    height: 3rem;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-primary, #101010);
    background-color: var(--color-bg-secondary, #f5f5f5);
    border: 1px solid oklch(0.8 0 0);
    border-radius: var(--radius-md, 0.5rem);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gform_wrapper textarea {
    height: auto;
    min-height: 6rem;
    resize: vertical;
}

/* ── Focus state ───────────────────────────────────────── */
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
    outline: 2px solid transparent;
    border-color: var(--color-brand-primary, oklch(0.6 0.2 250));
    box-shadow: 0 0 0 3px oklch(0.6 0.2 250 / 0.2);
}

/* ── Error state ───────────────────────────────────────── */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
    border-color: oklch(0.637 0.237 25.331);
}

.gform_wrapper .gfield_error input:focus,
.gform_wrapper .gfield_error textarea:focus,
.gform_wrapper .gfield_error select:focus {
    box-shadow: 0 0 0 3px oklch(0.637 0.237 25.331 / 0.2);
}

/* ── Validation messages ───────────────────────────────── */
.gform_wrapper .gfield_validation_message {
    font-size: 0.75rem;
    color: oklch(0.637 0.237 25.331);
    margin-top: 0.25rem;
}

/* ── Form-level validation errors ──────────────────────── */
.gform_wrapper .gform_validation_errors {
    background-color: oklch(0.637 0.237 25.331 / 0.1);
    border: 1px solid oklch(0.637 0.237 25.331);
    border-radius: var(--radius-md, 0.5rem);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.gform_wrapper .gform_submission_error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: oklch(0.637 0.237 25.331);
    margin: 0;
}

.gform_wrapper .gform-icon--close {
    width: 1.25rem;
    height: 1.25rem;
}

/* ── Description text ──────────────────────────────────── */
.gform_wrapper .gfield_description:not(.validation_message) {
    font-size: 0.75rem;
    color: var(--color-text-secondary, #6c757d);
}

/* ── Checkbox & radio ──────────────────────────────────── */
.gform_wrapper input[type="checkbox"],
.gform_wrapper input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--color-brand-primary, oklch(0.6 0.2 250));
}