/* CraftForms — Default Form Skin */

.wp-block-craftforms-form:not([class*="is-style-"]),
.wp-block-craftforms-form.is-style-default {

    /* ========================================
       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);

    /* ========================================
       Shared Border Tokens
       ======================================== */

    --cf-input-border-color: #c0c4c9;
    --cf-input-border-radius: 4px;

    /* Text swatch defaults inherit the input tokens */
    --cf-ts-border-color: var(--cf-input-border-color);
    --cf-ts-font-size: 0.8em;
    --cf-option-font-size: 0.8em;
    --cf-focus-color: #1a1a1a;
    --cf-input-font-size: 1rem;

    /* ========================================
       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,
    .wp-block-craftforms-range-slider-field,
    .wp-block-craftforms-color-picker-field,
    .wp-block-craftforms-repeater-field {
        gap: var(--cf-field-gap);
    }

    /* ========================================
       Input / Select / Textarea — Border + Padding
       ======================================== */

    .wp-block-craftforms-text-input,
    .wp-block-craftforms-textarea,
    .wp-block-craftforms-select {
        padding: var(--cf-input-padding);
        margin: 0;
        border: 1px solid var(--cf-input-border-color);
        border-radius: var(--cf-input-border-radius);
        font-size: var(--cf-input-font-size);
    }

    /* ========================================
       Datepicker & Color Picker — Border + Padding
       ======================================== */

    .craftforms-datepicker-input,
    .cf-cp-input {
        padding: var(--cf-input-padding);
        border: 1px solid var(--cf-input-border-color);
        border-radius: var(--cf-input-border-radius);
    }

    /* ========================================
       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;
    }

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

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

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

    /* ========================================
       Repeater Buttons
       ======================================== */

    .cf-repeater-add {
        padding: 0.35em 0.9em;
        border: 1px solid var(--cf-input-border-color);
        border-radius: var(--cf-input-border-radius);
        background: transparent;
        color: inherit;
        font-size: 0.875em;
        line-height: 1.4;
        transition: background 0.15s, border-color 0.15s;

        &:hover:not(:disabled) {
            background: color-mix(in srgb, currentColor 6%, transparent);
        }

        &:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }
    }

    .cf-repeater-remove {
        padding: 0.2em 0.6em;
        border: 1px solid transparent;
        border-radius: var(--cf-input-border-radius);
        background: transparent;
        color: var(--cf-color-invalid);
        font-size: 0.8em;
        line-height: 1.4;
        align-self: flex-end;
        transition: background 0.15s;

        &:hover:not(:disabled) {
            background: color-mix(in srgb, var(--cf-color-invalid) 10%, transparent);
        }

        &:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }
    }
}