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



/* ========================================
   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;
}
:is(.craftforms-options-group.is-vertical) {
    flex-direction: column;
    align-items: 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 {
    min-width: 0;
    box-sizing: border-box;
    width: 100%;
}

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

/* ========================================
   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-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: currentColor;
    box-shadow: 0 0 0 2px currentColor;
}

/* Focus-visible state for keyboard navigation */
.cf-swatch-visual:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Tooltip via Popover API */
.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: 9999;
}

/* 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 2px var(--cf-color-invalid, #c16464);
}