/* CraftForms — Modern Form Skin */

.wp-block-craftforms-form.is-style-modern {

    /* ========================================
       Skin Variables
       ======================================== */

    --cf-color-invalid: #c44d4d;
    --cf-color-valid: #51a88a;
    --cf-color-error-text: var(--cf-color-invalid);
    --cf-input-padding: var(--wp--preset--spacing--20, 0.5rem);
    --cf-field-gap: var(--wp--preset--spacing--20, 0.5rem);
    --cf-options-gap: var(--wp--preset--spacing--20, 0.5rem);

    --cf-modern-input-bg: #f9fafb;
    --cf-modern-input-color: #20242f;
    --cf-modern-input-border-color: #c0c4c9;
    --cf-modern-input-border-radius: 0.25rem;
    --cf-modern-focus-color: #3b4ce2;
    --cf-modern-placeholder-color: #929292;

    /* ========================================
       Field Wrapper Gap (label / input / error)
       ======================================== */

    .wp-block-craftforms-text-input-field,
    .wp-block-craftforms-textarea-field,
    .wp-block-craftforms-select-field,
    .wp-block-craftforms-radio-field,
    .wp-block-craftforms-checkboxes-field,
    .wp-block-craftforms-booking-datepicker-field,
    .wp-block-craftforms-file-field {
        gap: var(--cf-field-gap);
    }

    /* ========================================
       Input / Select / Textarea
       ======================================== */

    .wp-block-craftforms-text-input,
    .wp-block-craftforms-textarea,
    .wp-block-craftforms-select {
        background: var(--cf-modern-input-bg);
        border: 1px solid var(--cf-modern-input-border-color);
        border-bottom-width: 2px;
        border-radius: var(--cf-modern-input-border-radius);
        color: var(--cf-modern-input-color);
        padding: var(--cf-input-padding);
        margin: 0;
        font-size: inherit;
        transition: border-color 0.15s ease-out;

        &::placeholder {
            color: var(--cf-modern-placeholder-color);
        }

        &:focus {
            outline: none;
            border-color: var(--cf-modern-focus-color);
        }
    }

    /* ========================================
       Select — chevron icon
       ======================================== */

    .wp-block-craftforms-select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%236B7280%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%276 9 12 15 18 9%27/%3E%3C/svg%3E");
        background-position: right 0.75rem center;
        background-repeat: no-repeat;
        background-size: 1rem;
        padding-right: 2.25rem;
    }

    /* ========================================
       Datepicker Input
       ======================================== */

    .craftforms-datepicker-input {
        padding: var(--cf-input-padding);
    }

    /* ========================================
       Options Group Gap
       ======================================== */

    .craftforms-options-group {
        gap: var(--cf-options-gap);
    }

    /* ========================================
       InfoBlock — reset constrained layout margin
       ======================================== */

    .wp-block-craftforms-infoblock.is-layout-constrained > * {
        margin-block-start: 0;
    }

    /* ========================================
       Form Error Color
       ======================================== */

    .wp-block-craftforms-form-error {
        color: var(--cf-color-error-text);
        font-size: 0.8em;
    }
}