/* CraftForms Form Validation & UI Styles */

/* Hide form before custom element is defined */
craftforms-form:not(:defined) {
    visibility: hidden;
}

/* Hide form while initializing */
craftforms-form[data-craftforms-pending] {
    visibility: hidden;
}

/* Override theme layout classes that win over UA [hidden] rule */
craftforms-form [hidden] {
    display: none !important;
}

/* ========================================
   CSS Variables
   ======================================== */

:root {
    --cf-color-valid: #51a88a;
    --cf-color-invalid: #c16464;
}

/* ========================================
   Form Field Validation States
   ======================================== */

/* Valid field styling - green border */
.wp-block-craftforms-form {
    input.wp-block-craftforms-text-input:user-valid,
    textarea.wp-block-craftforms-textarea:user-valid,
    select.wp-block-craftforms-select:user-valid {
        border-color: var(--cf-color-valid);
        border-width: 1px;
        outline: none;
    }

    /* Focus state for valid fields */
    input.wp-block-craftforms-text-input:user-valid:focus,
    textarea.wp-block-craftforms-textarea:user-valid:focus,
    select.wp-block-craftforms-select:user-valid:focus {
        border-color: var(--cf-color-valid);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-color-valid) 10%, transparent);
    }

    /* Valid radio and checkbox styling - green outline */
   /* .wp-block-craftforms-radio-field input[type="radio"]:user-valid,
    .wp-block-craftforms-checkboxes-field input[type="checkbox"]:user-valid {
        outline: 2px solid var(--cf-color-valid);
        outline-offset: 2px;
    }*/

    /* Focus state for valid radio/checkbox */
    /*.wp-block-craftforms-radio-field input[type="radio"]:user-valid:focus,
    .wp-block-craftforms-checkboxes-field input[type="checkbox"]:user-valid:focus {
        outline: 2px solid var(--cf-color-valid);
        outline-offset: 2px;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-color-valid) 10%, transparent);
    }*/
}

/* Invalid field styling - red border */
.wp-block-craftforms-form {
    input.wp-block-craftforms-text-input:user-invalid,
    textarea.wp-block-craftforms-textarea:user-invalid,
    select.wp-block-craftforms-select:user-invalid {
        border-color: var(--cf-color-invalid);
        border-width: 1px;
        outline: none;
    }

    /* Also apply to fields with .invalid class (for backward compatibility) */
    input.wp-block-craftforms-text-input.invalid,
    textarea.wp-block-craftforms-textarea.invalid,
    select.wp-block-craftforms-select.invalid {
        border-color: var(--cf-color-invalid);
        border-width: 1px;
        outline: none;
    }

    /* Focus state for invalid fields */
    input.wp-block-craftforms-text-input:user-invalid:focus,
    textarea.wp-block-craftforms-textarea:user-invalid:focus,
    select.wp-block-craftforms-select:user-invalid:focus,
    input.wp-block-craftforms-text-input.invalid:focus,
    textarea.wp-block-craftforms-textarea.invalid:focus,
    select.wp-block-craftforms-select.invalid:focus {
        border-color: var(--cf-color-invalid);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-color-invalid) 10%, transparent);
    }

    /* Invalid radio and checkbox styling - red outline */
    .wp-block-craftforms-radio-field input[type="radio"]:user-invalid,
    .wp-block-craftforms-checkboxes-field input[type="checkbox"]:user-invalid,
    .wp-block-craftforms-radio-field input[type="radio"].invalid,
    .wp-block-craftforms-checkboxes-field input[type="checkbox"].invalid {
        outline: 2px solid var(--cf-color-invalid);
        outline-offset: 2px;
    }

    /* Focus state for invalid radio/checkbox */
    .wp-block-craftforms-radio-field input[type="radio"]:user-invalid:focus,
    .wp-block-craftforms-checkboxes-field input[type="checkbox"]:user-invalid:focus,
    .wp-block-craftforms-radio-field input[type="radio"].invalid:focus,
    .wp-block-craftforms-checkboxes-field input[type="checkbox"].invalid:focus {
        outline: 2px solid var(--cf-color-invalid);
        outline-offset: 2px;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-color-invalid) 10%, transparent);
    }
}

/* Suppress invalid cue when label is present — label color change is sufficient */
.wp-block-craftforms-form {
    .wp-block-craftforms-label {
        word-break: normal;
    }
    /* Text / textarea / select: reset border when field has a label */
    .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: revert;
        box-shadow: none;
    }

    .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: revert;
        box-shadow: none;
        outline: revert; /* restore browser focus ring (original user-invalid rule sets outline:none) */
    }

    /* Radio / checkbox: suppress per-input outline when group has a label */
    .wp-block-craftforms-radio-field:has(.wp-block-craftforms-label) input[type="radio"]:user-invalid,
    .wp-block-craftforms-checkboxes-field:has(.wp-block-craftforms-label) input[type="checkbox"]:user-invalid,
    .wp-block-craftforms-radio-field:has(.wp-block-craftforms-label) input[type="radio"].invalid,
    .wp-block-craftforms-checkboxes-field:has(.wp-block-craftforms-label) input[type="checkbox"].invalid {
        outline: none;
        box-shadow: none;
    }

    .wp-block-craftforms-radio-field:has(.wp-block-craftforms-label) input[type="radio"]:user-invalid:focus,
    .wp-block-craftforms-checkboxes-field:has(.wp-block-craftforms-label) input[type="checkbox"]:user-invalid:focus,
    .wp-block-craftforms-radio-field:has(.wp-block-craftforms-label) input[type="radio"].invalid:focus,
    .wp-block-craftforms-checkboxes-field:has(.wp-block-craftforms-label) input[type="checkbox"].invalid:focus {
        outline: revert; /* restore browser focus ring */
        box-shadow: none;
    }
}


/* ========================================
   Label Validation State Styling
   ======================================== */

/* Green label for valid fields */
.wp-block-craftforms-form {
    .wp-block-craftforms-label:has(+ input.wp-block-craftforms-text-input:user-valid),
    .wp-block-craftforms-label:has(+ textarea.wp-block-craftforms-textarea:user-valid),
    .wp-block-craftforms-label:has(+ select.wp-block-craftforms-select:user-valid) {
        color: var(--cf-color-valid);
    }

    /* Green label for valid radio/checkbox groups */
    .wp-block-craftforms-radio-field:has(input[type="radio"]:user-valid) .wp-block-craftforms-label,
    .wp-block-craftforms-checkboxes-field:has(input[type="checkbox"]:user-valid) .wp-block-craftforms-label {
        color: var(--cf-color-valid);
    }
}

/* Red label for invalid fields */
.wp-block-craftforms-form {
    .wp-block-craftforms-label:has(+ input.wp-block-craftforms-text-input:user-invalid),
    .wp-block-craftforms-label:has(+ textarea.wp-block-craftforms-textarea:user-invalid),
    .wp-block-craftforms-label:has(+ select.wp-block-craftforms-select:user-invalid),
    .wp-block-craftforms-label:has(+ input.wp-block-craftforms-text-input.invalid),
    .wp-block-craftforms-label:has(+ textarea.wp-block-craftforms-textarea.invalid),
    .wp-block-craftforms-label:has(+ select.wp-block-craftforms-select.invalid) {
        color: var(--cf-color-invalid);
    }

    /* Red label for invalid radio/checkbox groups */
    .wp-block-craftforms-radio-field:has(input[type="radio"]:user-invalid) .wp-block-craftforms-label,
    .wp-block-craftforms-checkboxes-field:has(input[type="checkbox"]:user-invalid) .wp-block-craftforms-label,
    .wp-block-craftforms-radio-field:has(input[type="radio"].invalid) .wp-block-craftforms-label,
    .wp-block-craftforms-checkboxes-field:has(input[type="checkbox"].invalid) .wp-block-craftforms-label {
        color: var(--cf-color-invalid);
    }

    /* Red label for invalid file/datepicker fields (invalid class on wrapper via data-attach-error-class) */
    .wp-block-craftforms-file-field.invalid .wp-block-craftforms-label,
    .wp-block-craftforms-booking-datepicker-field.invalid .wp-block-craftforms-label {
        color: var(--cf-color-invalid);
    }
}


/* ========================================
   Form Layout Styles
   ======================================== */

:is(.craftforms-options-group.is-layout-flex) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}
:is(.craftforms-options-group.is-vertical) {
    flex-direction: column;
    align-items: flex-start;
}

/* Inputs fill parent flex container cross-axis */
.wp-block-craftforms-text-input,
.wp-block-craftforms-textarea,
.wp-block-craftforms-select {
    min-width: 0;
    box-sizing: border-box;
    width: 100%;
}

/* Datepicker fills parent */
.craftforms-datepicker-wrapper {
    width: 100%;
    box-sizing: border-box;
}
.craftforms-datepicker-wrapper craftforms-booking-datepicker {
    display: block;
    width: 100%;
}
.craftforms-datepicker-wrapper .craftforms-datepicker-inputs {
    width: 100%;
}
.craftforms-datepicker-wrapper .craftforms-datepicker-input {
    width: 100%;
    box-sizing: border-box;
}

/* Field wrapper blocks fill parent container width */
.wp-block-craftforms-text-input-field,
.wp-block-craftforms-textarea-field,
.wp-block-craftforms-booking-datepicker-field,
.wp-block-craftforms-select-field,
.wp-block-craftforms-radio-field,
.wp-block-craftforms-checkboxes-field,
.wp-block-craftforms-file-field,
.wp-block-craftforms-range-slider-field,
.wp-block-craftforms-color-picker-field,
.wp-block-craftforms-repeater-field {
    min-width: 0;
    box-sizing: border-box;
    width: 100%;
}

/* Field container border — only visible when .has-field-border is set via the
 * "Field Container Border" panel. The baseline border:none !important overrides
 * any legacy inline border-* properties that get_block_wrapper_attributes() may
 * have injected from previously-stored __experimentalBorder attributes. The
 * .has-field-border rule has higher specificity (2 classes) so its !important
 * wins over the baseline !important. */
.wp-block-craftforms-radio-field,
.wp-block-craftforms-checkboxes-field {
    border: none !important;
    outline: none !important;
}
.wp-block-craftforms-radio-field.has-field-border,
.wp-block-craftforms-checkboxes-field.has-field-border {
    border-style: var(--cf-field-border-style, solid) !important;
    border-width: var(--cf-field-border-width, 1px) !important;
    border-color: var(--cf-field-border-color, currentColor) !important;
    border-radius: var(--cf-field-border-radius, 0) !important;
}

/* Field wrapper flex direction — column by default; row when user sets is-horizontal.
 * WordPress only injects flex-direction via a wp-container-* class when the layout
 * attribute is explicitly saved to the DB, so we supply the rules here as a reliable
 * fallback that works regardless of what WordPress generates. */
.wp-block-craftforms-text-input-field,
.wp-block-craftforms-textarea-field,
.wp-block-craftforms-booking-datepicker-field,
.wp-block-craftforms-select-field,
.wp-block-craftforms-radio-field,
.wp-block-craftforms-checkboxes-field,
.wp-block-craftforms-file-field,
.wp-block-craftforms-range-slider-field,
.wp-block-craftforms-color-picker-field,
.wp-block-craftforms-repeater-field {
    flex-direction: column;
    align-items: flex-start;
    /* --cf-field-gap is set via style="" when the user sets a custom gap in the editor.
     * This picks it up so the value works even when WP's inline <style> tag is stripped. */
    gap: var(--cf-field-gap, normal);
}

/* Vertical field wrappers: override .is-layout-flex { align-items: center }.
 * Double-class specificity (0,2,0) beats single-class WordPress global. */
.wp-block-craftforms-text-input-field.is-vertical,
.wp-block-craftforms-textarea-field.is-vertical,
.wp-block-craftforms-booking-datepicker-field.is-vertical,
.wp-block-craftforms-select-field.is-vertical,
.wp-block-craftforms-radio-field.is-vertical,
.wp-block-craftforms-checkboxes-field.is-vertical,
.wp-block-craftforms-file-field.is-vertical,
.wp-block-craftforms-range-slider-field.is-vertical,
.wp-block-craftforms-color-picker-field.is-vertical,
.wp-block-craftforms-repeater-field.is-vertical {
    align-items: flex-start;
}

/* Vertical + explicit justification overrides (0,3,0) */
.wp-block-craftforms-text-input-field.is-vertical.is-content-justification-center,
.wp-block-craftforms-textarea-field.is-vertical.is-content-justification-center,
.wp-block-craftforms-booking-datepicker-field.is-vertical.is-content-justification-center,
.wp-block-craftforms-select-field.is-vertical.is-content-justification-center,
.wp-block-craftforms-radio-field.is-vertical.is-content-justification-center,
.wp-block-craftforms-checkboxes-field.is-vertical.is-content-justification-center,
.wp-block-craftforms-file-field.is-vertical.is-content-justification-center,
.wp-block-craftforms-range-slider-field.is-vertical.is-content-justification-center,
.wp-block-craftforms-color-picker-field.is-vertical.is-content-justification-center,
.wp-block-craftforms-repeater-field.is-vertical.is-content-justification-center {
    align-items: center;
}

.wp-block-craftforms-text-input-field.is-vertical.is-content-justification-right,
.wp-block-craftforms-textarea-field.is-vertical.is-content-justification-right,
.wp-block-craftforms-booking-datepicker-field.is-vertical.is-content-justification-right,
.wp-block-craftforms-select-field.is-vertical.is-content-justification-right,
.wp-block-craftforms-radio-field.is-vertical.is-content-justification-right,
.wp-block-craftforms-checkboxes-field.is-vertical.is-content-justification-right,
.wp-block-craftforms-file-field.is-vertical.is-content-justification-right,
.wp-block-craftforms-range-slider-field.is-vertical.is-content-justification-right,
.wp-block-craftforms-color-picker-field.is-vertical.is-content-justification-right,
.wp-block-craftforms-repeater-field.is-vertical.is-content-justification-right {
    align-items: flex-end;
}

.wp-block-craftforms-text-input-field.is-vertical.is-content-justification-stretch,
.wp-block-craftforms-textarea-field.is-vertical.is-content-justification-stretch,
.wp-block-craftforms-booking-datepicker-field.is-vertical.is-content-justification-stretch,
.wp-block-craftforms-select-field.is-vertical.is-content-justification-stretch,
.wp-block-craftforms-radio-field.is-vertical.is-content-justification-stretch,
.wp-block-craftforms-checkboxes-field.is-vertical.is-content-justification-stretch,
.wp-block-craftforms-file-field.is-vertical.is-content-justification-stretch,
.wp-block-craftforms-range-slider-field.is-vertical.is-content-justification-stretch,
.wp-block-craftforms-color-picker-field.is-vertical.is-content-justification-stretch,
.wp-block-craftforms-repeater-field.is-vertical.is-content-justification-stretch {
    align-items: stretch;
}

.wp-block-craftforms-text-input-field.is-horizontal,
.wp-block-craftforms-textarea-field.is-horizontal,
.wp-block-craftforms-booking-datepicker-field.is-horizontal,
.wp-block-craftforms-select-field.is-horizontal,
.wp-block-craftforms-radio-field.is-horizontal,
.wp-block-craftforms-checkboxes-field.is-horizontal,
.wp-block-craftforms-file-field.is-horizontal,
.wp-block-craftforms-range-slider-field.is-horizontal,
.wp-block-craftforms-color-picker-field.is-horizontal,
.wp-block-craftforms-repeater-field.is-horizontal {
    flex-direction: row;
    align-items: center;
}

/* Prevent grid cells from stretching field wrapper height */
.wp-block-craftforms-radio-field,
.wp-block-craftforms-checkboxes-field {
    align-self: start;
}

/* InfoBlock: prevent padding from adding to block width */
.wp-block-craftforms-infoblock {
    box-sizing: border-box;
}

/* InfoBlock: restore missing Gutenberg flow-layout first-child margin reset */
:root :where(.is-layout-flow) > :not(template):first-of-type {
    margin-block-start: 0;
}

/* Form flow layout: replace Gutenberg margin-based spacing with flex gap */
.wp-block-craftforms-form.is-layout-flow {
    display: flex;
    flex-direction: column;
    gap: var(--cf-form-gap, 2rem);
}

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

/* ========================================
   Submit Button Processing State
   ======================================== */

/* Submit button with spinner during processing */
.wp-block-craftforms-submit-button.processing {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

/* Spinner using CSS-only animation */
.wp-block-craftforms-submit-button.processing::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    right: 12px;
    margin-top: -8px;
    border: 1px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: craftforms-spinner-rotate 0.6s linear infinite;
}

@keyframes craftforms-spinner-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Adjust button padding when processing to make room for spinner */
.wp-block-craftforms-submit-button.processing {
    padding-right: 40px;
}

/* ========================================
   Additional Field States
   ======================================== */

/* Disabled fields styling */
.wp-block-craftforms-form {
    input.wp-block-craftforms-text-input:disabled,
    textarea.wp-block-craftforms-textarea:disabled,
    select.wp-block-craftforms-select:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        background-color: #f3f4f6;
    }
}

/* Read-only fields styling */
.wp-block-craftforms-form {
    input.wp-block-craftforms-text-input:read-only,
    textarea.wp-block-craftforms-textarea:read-only {
        background-color: #f9fafb;
        cursor: default;
    }
}


/* ========================================
   Option Swatches (color / image modes)
   ======================================== */

/* Hide native input visually but keep it accessible */
.wp-block-craftforms-checkbox-option.cf-is-swatch-color input[type="checkbox"],
.wp-block-craftforms-checkbox-option.cf-is-swatch-image input[type="checkbox"],
.wp-block-craftforms-radio-option.cf-is-swatch-color input[type="radio"],
.wp-block-craftforms-radio-option.cf-is-swatch-image input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Swatch visual base */
.cf-swatch-visual {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cf-swatch-width, auto);
    height: var(--cf-swatch-height, auto);
    cursor: pointer;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

/* Square shape (default) */
.cf-swatch-shape-square .cf-swatch-visual {
    border-radius: 4px;
}

/* Circle shape */
.cf-swatch-shape-circle .cf-swatch-visual {
    border-radius: 50%;
}

/* Image swatch: fill the visual area */
.cf-is-swatch-image .cf-swatch-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Selected state: ring highlight */
.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-checkbox-option.cf-is-swatch-text 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,
.wp-block-craftforms-radio-option.cf-is-swatch-text input[type="radio"]:checked ~ .cf-swatch-visual{
    /*border-color: currentColor;*/
    box-shadow: 0 0 0 1px currentColor;
}

/* Focus ring: show on visual when sibling input is keyboard-focused */
.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-checkbox-option.cf-is-swatch-text 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,
.wp-block-craftforms-radio-option.cf-is-swatch-text input[type="radio"]:focus-visible ~ .cf-swatch-visual {
    outline: 2px solid var(--cf-focus-color, currentColor);
    outline-offset: 2px;
}

/* Suppress the 0×0 focus ring on the hidden input itself */
.wp-block-craftforms-checkbox-option.cf-is-swatch-color input[type="checkbox"]:focus,
.wp-block-craftforms-checkbox-option.cf-is-swatch-image input[type="checkbox"]:focus,
.wp-block-craftforms-checkbox-option.cf-is-swatch-text input[type="checkbox"]:focus,
.wp-block-craftforms-radio-option.cf-is-swatch-color input[type="radio"]:focus,
.wp-block-craftforms-radio-option.cf-is-swatch-image input[type="radio"]:focus,
.wp-block-craftforms-radio-option.cf-is-swatch-text input[type="radio"]:focus {
    outline: none;
}

/* Tooltip via Popover API */
.cf-option-annotation {
    font-size: 0.85em;
    color: #888;
    margin-left: 0.4em;
    flex-shrink: 0;
}

.cf-swatch-tooltip {
    position: absolute;
    inset: unset;
    border: none;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    pointer-events: none;
    margin: 0;
    max-width: 200px;
    white-space: normal;
    text-align: center;
    z-index: var(--cf-ui-z-index, 999);
}

/* Validation error ring on invalid swatch inputs */
/*.wp-block-craftforms-checkbox-option.cf-is-swatch-color input[type="checkbox"]:user-invalid ~ .cf-swatch-visual,
.wp-block-craftforms-checkbox-option.cf-is-swatch-image input[type="checkbox"]:user-invalid ~ .cf-swatch-visual,
.wp-block-craftforms-radio-option.cf-is-swatch-color input[type="radio"]:user-invalid ~ .cf-swatch-visual,
.wp-block-craftforms-radio-option.cf-is-swatch-image input[type="radio"]:user-invalid ~ .cf-swatch-visual {
    border-color: var(--cf-color-invalid, #c16464);
    box-shadow: 0 0 0 1px var(--cf-color-invalid, #c16464);
}*/


/* ========================================
   Default Mode Options
   ======================================== */

.wp-block-craftforms-checkbox-option:not(.cf-is-swatch-text):not(.cf-is-swatch-color):not(.cf-is-swatch-image),
.wp-block-craftforms-radio-option:not(.cf-is-swatch-text):not(.cf-is-swatch-color):not(.cf-is-swatch-image) {
    font-size: var(--cf-option-font-size, inherit);
}

/* ========================================
   Text Swatches
   ======================================== */

/* Hide native input visually but keep it accessible */
.wp-block-craftforms-checkbox-option.cf-is-swatch-text input[type="checkbox"],
.wp-block-craftforms-radio-option.cf-is-swatch-text input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.cf-is-swatch-text .cf-swatch-visual {
    font-size:        var(--cf-ts-font-size,    inherit);
    font-weight:      var(--cf-ts-font-weight,  inherit);
    line-height:      var(--cf-ts-line-height,  inherit);
    color:            var(--cf-ts-color,        inherit);
    background-color: var(--cf-ts-bg,           transparent);
    border-style:     var(--cf-ts-border-style, solid);
    border-width:     var(--cf-ts-border-width, 1px);
    border-color:     var(--cf-ts-border-color, currentColor);
    border-radius:    var(--cf-ts-border-radius, 4px);
    padding:          var(--cf-ts-padding,      8px 16px);
    min-width:        var(--cf-swatch-width,    auto);
    min-height:       var(--cf-swatch-height,   auto);
    width:            auto;
    height:           auto;
    white-space:      nowrap;
    overflow:         visible;
}

.cf-is-swatch-text.cf-swatch-shape-circle .cf-swatch-visual {
    border-radius: var(--cf-ts-border-radius, 9999px);
}

/* Selected state */
.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 {
    color:            var(--cf-ts-color-checked, #fff);
    background-color: var(--cf-ts-bg-checked,    var(--cf-ts-color, #000));
    border-color:     var(--cf-ts-border-color,  var(--cf-ts-color, currentColor));
}

/* Focus ring */
.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-focus-color, currentColor);
    outline-offset: 2px;
}

/* Suppress the 0×0 focus ring on the hidden input itself */
.wp-block-craftforms-checkbox-option.cf-is-swatch-text input[type="checkbox"]:focus,
.wp-block-craftforms-radio-option.cf-is-swatch-text input[type="radio"]:focus {
    outline: none;
}

/* ========================================
   Repeater Group Layout
   ======================================== */

.craftforms-repeater-wrapper {
    display: block;
    width: 100%;
}

/* Inline SVG icons inside repeater add/remove buttons */
.cf-repeater-add svg.cf-repeater-icon,
.cf-repeater-remove svg.cf-repeater-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

.wp-block-craftforms-repeater-group {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.wp-block-craftforms-repeater-group.is-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Each repeated item: remove button stacks below the group fields */
.cf-repeater-item {
    display: flex;
    flex-direction: column;
    gap: var(--cf-field-gap, 0.5rem);
}

/* Any block dropped inside a repeater group fills the full width */
.wp-block-craftforms-repeater-group > * {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Shared layout reset for add/remove buttons */
.cf-repeater-add,
.cf-repeater-remove {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    cursor: pointer;
    font: inherit;
}

/* Z-index scale — controls layering of errors vs UI overlays (datepicker, tooltips, etc.) */
:root {
    --cf-error-z-index: 99;
    --cf-ui-z-index: 999;
}

/* Popover-mode error — positioned fixed by JS, hidden by default, z-index below UI overlays */
.wp-block-craftforms-form-error[data-cf-error-popover] {
    display: none;
    position: fixed;
    z-index: var(--cf-error-z-index, 99);
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    overflow: visible;
}