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

/* Orientation, wrap, justification, grid columns and gap come from WordPress'
   per-block layout style (.wp-container-*) generated from the Layout panel.
   That style never sets `display` — core supplies it via its base layout
   stylesheet (:where(.is-layout-flex){display:flex} etc.), which a classic theme
   may not load on the front end. We replicate that base here, scoped to our block
   and at ZERO specificity (:where), so flex AND grid get their `display` everywhere
   while the .wp-container-* declarations (flex-direction, align-items, columns…)
   still override ours. */
:where(.craftforms-options-group.is-layout-flex) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
:where(.craftforms-options-group.is-layout-grid) {
    display: grid;
}

/* Fill the field width so cards distribute across the row. The parent field
   is a flex column with align-items:flex-start, which otherwise shrinks the group
   to content width. */
.craftforms-options-group {
    width: 100%;
    box-sizing: border-box;
}

/* Options-group orientation. Unlike normal blocks, this <div> is hand-built in PHP
 * by the parent field's render method (e.g. radio-field-block.php), so it never
 * passes through WordPress' layout block support and never receives the per-block
 * .wp-container-*-is-layout-* style that carries flex-direction. The :where() base
 * above only sets display + align-items, so on the front end is-vertical had no CSS
 * backing it and fell back to a flex row. Supply the orientation explicitly here,
 * mirroring the field-wrapper fallback. The double-class specificity (0,2,0) beats
 * the :where() base while still letting the editor's .wp-container-* style win. */
.craftforms-options-group.is-layout-flex.is-vertical {
    flex-direction: column;
    align-items: flex-start;
}
.craftforms-options-group.is-layout-flex.is-horizontal {
    flex-direction: row;
    align-items: center;
}

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

/* "Show annotation inside swatch": the annotation is nested inside .cf-swatch-visual,
   so it sits within the styled pill and inherits the pill's text color — including the
   selected-state color flip — instead of the grey sibling treatment above. */
.cf-is-swatch-text.cf-annotation-inside .cf-swatch-visual {
    gap: 0.35em;
}
.cf-is-swatch-text.cf-annotation-inside .cf-swatch-visual .cf-option-annotation {
    color: inherit;
    margin-left: 0;
    opacity: 0.85;
}

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


/* ========================================
   Card Options (optionStyle: "card")
   Data-driven product card: image + title + description + price.
   Scoped to the field via .cf-field-card so it applies in the editor
   iframe and on the frontend without any per-form custom CSS.
   ======================================== */

/* Layout (flex/grid) follows the Layout panel via WordPress' layout support.
   Only provide a default gap (valid for both flex and grid); an explicit blockGap
   set in the editor produces a higher-priority .wp-container-* rule that wins. */
.cf-field-card .craftforms-options-group {
    gap: var(--cf-card-gap, 12px);
}

.cf-field-card .wp-block-craftforms-radio-option,
.cf-field-card .wp-block-craftforms-checkbox-option {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* Size the card to its image (no stretch): outer width = image width + the
       card's own padding + border, so the inner content box equals the image
       width exactly. Works in flex AND grid (justify-self stops grid-track stretch). */
    flex: 0 0 auto;
    width: calc(
        var(--cf-card-img-width, 300px)
        + (var(--cf-card-padding, 10px) + var(--cf-card-border-width, 2px)) * 2
    );
    max-width: 100%;
    justify-self: start;
    align-self: start;
    gap: 6px;
    margin: 0;
    padding: var(--cf-card-padding, 10px);
    border: var(--cf-card-border-width, 2px) solid var(--cf-card-border-color, #e4e4e7);
    border-radius: var(--cf-card-radius, 12px);
    background: var(--cf-card-bg, #fff);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.cf-field-card .wp-block-craftforms-radio-option:hover,
.cf-field-card .wp-block-craftforms-checkbox-option:hover {
    border-color: var(--cf-card-border-hover, #c7cbd1);
}

/* Native control: visually hidden but focusable (keyboard + screen reader). */
.cf-field-card .wp-block-craftforms-radio-option > input,
.cf-field-card .wp-block-craftforms-checkbox-option > input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

/* Selected state — distinguished by border weight + checkmark, not color alone. */
.cf-field-card .wp-block-craftforms-radio-option:has(> input:checked),
.cf-field-card .wp-block-craftforms-checkbox-option:has(> input:checked) {
    border-color: var(--cf-card-accent, #2563eb);
    box-shadow: 0 0 0 1px var(--cf-card-accent, #2563eb);
}

.cf-field-card .wp-block-craftforms-radio-option:has(> input:checked)::after,
.cf-field-card .wp-block-craftforms-checkbox-option:has(> input:checked)::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--cf-card-accent, #2563eb) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 13l4 4L19 7%27/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Visible focus ring (the native control itself is hidden). */
.cf-field-card .wp-block-craftforms-radio-option:has(> input:focus-visible),
.cf-field-card .wp-block-craftforms-checkbox-option:has(> input:focus-visible) {
    outline: 2px solid var(--cf-card-accent, #2563eb);
    outline-offset: 2px;
}

/* The figure carries the fixed image box; the <img> just fills it and is cropped
   with object-fit:cover, so it never stretches the card. Width 100% = the card's
   inner content box, which the rule above sized to --cf-card-img-width. */
.cf-field-card .cf-card-img {
    margin: 0;
    width: 100%;
    height: var(--cf-card-img-height, 110px);
    border-radius: var(--cf-card-img-radius, 8px);
    overflow: hidden;
}

.cf-field-card .cf-card-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Placeholder box for options with no image — keeps every card the same height. */
.cf-field-card .cf-card-img.is-empty {
    background: var(--cf-card-img-placeholder, #f1f1f1);
}

.cf-field-card .cf-card-title {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
}

.cf-field-card .cf-card-desc {
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--cf-card-desc-color, #6b7280);
}

.cf-field-card .cf-card-price {
    margin: 0;
    margin-left: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--cf-card-accent, #2563eb);
}


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

/* Text-swatch chips get consistent wrapping + spacing, but their flow direction
   MUST still follow the Layout panel (.is-vertical / .is-horizontal handled by the
   base rules above). Do NOT hard-force `flex-direction: row` here — that selector
   used to also name `.is-vertical` and silently overrode a user's vertical choice,
   which is why text-swatch groups kept reverting to horizontal. Only set the
   chip-specific wrap + default gap; orientation is owned by the base rules.
   Applies in editor and front end since this stylesheet is enqueued for both. */
.craftforms-options-group.is-layout-flex:has(.cf-is-swatch-text) {
    flex-wrap: wrap;
    gap: 8px;
}

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

/* ========================================
   Payment gateway chooser (radio cards)
   Structural layout lives here; skins provide
   the accent/radius/background via --cf-gw-* tokens.
   ======================================== */

craftforms-form .cf-gateway-chooser {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

craftforms-form .cf-gateway-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    flex: 1 1 160px;
    min-height: 62px;
    padding: 14px 16px;
    border: 2px solid var(--cf-gw-border, #d5d8dd);
    border-radius: var(--cf-gw-radius, 8px);
    background: var(--cf-gw-bg, #fff);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

craftforms-form .cf-gateway-card:hover {
    border-color: var(--cf-gw-accent, #635bff);
}

craftforms-form .cf-gateway-card__radio {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

craftforms-form .cf-gateway-card__logo {
    display: block;
    height: 22px;
}

craftforms-form .cf-gateway-card__logo .cf-gw-logo {
    height: 22px;
    width: auto;
}

craftforms-form .cf-gateway-card__label {
    font-size: 13px;
    line-height: 1.2;
    color: var(--cf-gw-label, #50575e);
}

craftforms-form .cf-gateway-card__check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--cf-gw-border, #d5d8dd);
    background: transparent;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

/* Selected card */
craftforms-form .cf-gateway-card:has(.cf-gateway-card__radio:checked) {
    border-color: var(--cf-gw-accent, #635bff);
    box-shadow: 0 0 0 1px var(--cf-gw-accent, #635bff);
    background: var(--cf-gw-bg-active, #fbfbff);
}

craftforms-form .cf-gateway-card:has(.cf-gateway-card__radio:checked) .cf-gateway-card__check {
    border-color: var(--cf-gw-accent, #635bff);
    background: var(--cf-gw-accent, #635bff);
    box-shadow: inset 0 0 0 3px var(--cf-gw-bg, #fff);
}

/* Keyboard focus ring */
craftforms-form .cf-gateway-card__radio:focus-visible + .cf-gateway-card__logo {
    outline: 2px solid var(--cf-gw-accent, #635bff);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Panes: only the active gateway's embedded component is shown */
craftforms-form .cf-gateway-pane {
    display: none;
}

craftforms-form [data-has="payment"][data-active-gateway="stripe"] .cf-gateway-pane[data-gateway="stripe"],
craftforms-form [data-has="payment"][data-active-gateway="paypal"] .cf-gateway-pane[data-gateway="paypal"] {
    display: block;
}

/* Embedded component error text + spacing */
craftforms-form .cf-stripe-error,
craftforms-form .cf-paypal-error {
    display: none;
    margin-top: 8px;
    color: var(--cf-color-invalid, #c44d4d);
    font-size: 0.85em;
}

craftforms-form .cf-paypal-buttons {
    margin-top: 8px;
}