/* CraftForms — Modern Form Skin */

.wp-block-craftforms-form.is-style-modern craftforms-range-slider {
    --cf-rs-track-fill-color:    #4361ee;
    --cf-rs-handle-border-color: #4361ee;
    --cf-rs-handle-shadow-focus: 0 0 0 3px rgba(67,97,238,0.2);
    --cf-rs-tooltip-bg:          #1e293b;
}

.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;

    /* Text swatch tokens — match input/select appearance */
    --cf-ts-font-size: 0.8em;
    --cf-option-font-size: 0.8em;
    --cf-ts-bg: var(--cf-modern-input-bg);
    --cf-ts-color: var(--cf-modern-input-color);
    --cf-ts-border-color: var(--cf-modern-input-border-color);
    --cf-ts-border-radius: var(--cf-modern-input-border-radius);
    --cf-ts-bg-checked: var(--cf-modern-focus-color);
    --cf-ts-color-checked: #fff;
    --cf-focus-color: var(--cf-modern-focus-color);

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

    .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 & Color Picker Input
       ======================================== */

    .craftforms-datepicker-input,
    .cf-cp-input {
        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);
        }
    }

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

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

    /* ========================================
       Radio & Checkbox Inputs
       ======================================== */

    input[type="radio"],
    input[type="checkbox"] {
        accent-color: var(--cf-modern-focus-color);
        width: 1rem;
        height: 1rem;
        cursor: pointer;
    }

    /* Labeled invalid inputs in modern skin: restore normal grey border (override base revert) */
    .wp-block-craftforms-text-input-field:has(.wp-block-craftforms-label) input.wp-block-craftforms-text-input:user-invalid,
    .wp-block-craftforms-textarea-field:has(.wp-block-craftforms-label) textarea.wp-block-craftforms-textarea:user-invalid,
    .wp-block-craftforms-select-field:has(.wp-block-craftforms-label) select.wp-block-craftforms-select:user-invalid,
    .wp-block-craftforms-text-input-field:has(.wp-block-craftforms-label) input.wp-block-craftforms-text-input.invalid,
    .wp-block-craftforms-textarea-field:has(.wp-block-craftforms-label) textarea.wp-block-craftforms-textarea.invalid,
    .wp-block-craftforms-select-field:has(.wp-block-craftforms-label) select.wp-block-craftforms-select.invalid {
        border-color: var(--cf-modern-input-border-color);
    }

    /* Labeled invalid inputs on focus: show blue focus border instead of grey or red */
    .wp-block-craftforms-text-input-field:has(.wp-block-craftforms-label) input.wp-block-craftforms-text-input:user-invalid:focus,
    .wp-block-craftforms-textarea-field:has(.wp-block-craftforms-label) textarea.wp-block-craftforms-textarea:user-invalid:focus,
    .wp-block-craftforms-select-field:has(.wp-block-craftforms-label) select.wp-block-craftforms-select:user-invalid:focus,
    .wp-block-craftforms-text-input-field:has(.wp-block-craftforms-label) input.wp-block-craftforms-text-input.invalid:focus,
    .wp-block-craftforms-textarea-field:has(.wp-block-craftforms-label) textarea.wp-block-craftforms-textarea.invalid:focus,
    .wp-block-craftforms-select-field:has(.wp-block-craftforms-label) select.wp-block-craftforms-select.invalid:focus {
        border-color: var(--cf-modern-focus-color);
        outline: none;
    }

    /* Non-swatch radio/checkbox: explicit blue focus ring (accent-color alone is browser-dependent) */
    .wp-block-craftforms-radio-option:not(.cf-is-swatch-color):not(.cf-is-swatch-image) input[type="radio"]:focus-visible,
    .wp-block-craftforms-checkbox-option:not(.cf-is-swatch-color):not(.cf-is-swatch-image) input[type="checkbox"]:focus-visible {
        outline: 2px solid var(--cf-modern-focus-color);
        outline-offset: 2px;
    }

    /* Swatch focus ring: use focus token color instead of currentColor */
    .wp-block-craftforms-checkbox-option.cf-is-swatch-color input[type="checkbox"]:focus-visible ~ .cf-swatch-visual,
    .wp-block-craftforms-checkbox-option.cf-is-swatch-image input[type="checkbox"]:focus-visible ~ .cf-swatch-visual,
    .wp-block-craftforms-radio-option.cf-is-swatch-color input[type="radio"]:focus-visible ~ .cf-swatch-visual,
    .wp-block-craftforms-radio-option.cf-is-swatch-image input[type="radio"]:focus-visible ~ .cf-swatch-visual {
        outline: 2px solid var(--cf-modern-focus-color);
        outline-offset: 2px;
    }
    .wp-block-craftforms-checkbox-option.cf-is-swatch-color input[type="checkbox"]:checked ~ .cf-swatch-visual,
    .wp-block-craftforms-checkbox-option.cf-is-swatch-image input[type="checkbox"]:checked ~ .cf-swatch-visual,
    .wp-block-craftforms-radio-option.cf-is-swatch-color input[type="radio"]:checked ~ .cf-swatch-visual,
    .wp-block-craftforms-radio-option.cf-is-swatch-image input[type="radio"]:checked ~ .cf-swatch-visual {
        border-color: var(--cf-modern-focus-color);
        box-shadow: 0 0 0 1px var(--cf-modern-focus-color);
    }

    /* ========================================
       Text Swatches — match input appearance
       ======================================== */

    .cf-is-swatch-text .cf-swatch-visual {
        border-bottom-width: 2px;
        transition: border-color 0.15s ease-out;
    }

    .wp-block-craftforms-checkbox-option.cf-is-swatch-text input[type="checkbox"]:checked ~ .cf-swatch-visual,
    .wp-block-craftforms-radio-option.cf-is-swatch-text input[type="radio"]:checked ~ .cf-swatch-visual {
        border-color: var(--cf-modern-focus-color);
    }

    .wp-block-craftforms-checkbox-option.cf-is-swatch-text input[type="checkbox"]:focus-visible ~ .cf-swatch-visual,
    .wp-block-craftforms-radio-option.cf-is-swatch-text input[type="radio"]:focus-visible ~ .cf-swatch-visual {
        outline: 2px solid var(--cf-modern-focus-color);
    }

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

    /* Modern popover-mode errors — styled like browser validation tooltips */
    .wp-block-craftforms-form-error[data-cf-error-popover] {
        background: #fff;
        color: var(--cf-color-error-text);
        border: 1px solid color-mix(in srgb, var(--cf-color-invalid, #c44d4d) 30%, transparent);
        border-radius: var(--cf-modern-input-border-radius, 0.25rem);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 0 1px color-mix(in srgb, var(--cf-color-invalid, #c44d4d) 15%, transparent);
        padding: 0.35em 0.6em;
        line-height: 1.4;
        width: auto;
    }

    button[type="submit"]:focus-visible {
        outline: 2px solid var(--cf-modern-focus-color);
        outline-offset: 2px;
    }

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

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

        &:hover:not(:disabled) {
            border-color: var(--cf-modern-focus-color);
        }

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

    .cf-repeater-remove {
        padding: 0.2em 0.6em;
        border: none;
        border-radius: var(--cf-modern-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;
        }
    }
}