/* ==========================================================================
   ACF Group & Flexible Content Fields – WPUF Frontend Styles
   ALL selectors scoped under form.wpuf-form-add to prevent CSS leakage
   into the site header, footer, or any non-form elements.
   ========================================================================== */

/* --- ACF Group Field Header --- */
form.wpuf-form-add .wpuf-acf-group-container {
    padding: 0;
}

/* --- ACF Flexible Content Header (dropdown mode) --- */
form.wpuf-form-add .wpuf-acf-fc-container {
    padding: 0;
}

/* Layout Selector Dropdown */
form.wpuf-form-add .wpuf-acf-fc-layout-selector {
    margin-bottom: 15px;
    padding: 10px 15px;
    background: #f0f2f5;
    border: 1px solid #dcdfe4;
    border-radius: 6px;
}

form.wpuf-form-add .wpuf-acf-fc-layout-selector label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 13px;
    color: #1e1e1e;
}

form.wpuf-form-add .wpuf-acf-fc-layout-selector select {
    width: 100%;
    max-width: 400px;
    padding: 8px 12px;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    color: #2c3338;
    cursor: pointer;
    appearance: auto;
}

form.wpuf-form-add .wpuf-acf-fc-layout-selector select:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: none;
}

/* --- ACF Flexible Content Single Layout Header --- */
form.wpuf-form-add .wpuf-acf-fc-single-container {
    padding: 0;
}

/* Ensure no +/- repeat controls appear inside ACF containers */
form.wpuf-form-add .wpuf-acf-group-container .wpuf-repeat-controls,
form.wpuf-form-add .wpuf-acf-fc-container .wpuf-repeat-controls,
form.wpuf-form-add .wpuf-acf-fc-single-container .wpuf-repeat-controls {
    display: none !important;
}

/* ==========================================================================
   Per-field ACF Validation Error Notices
   ========================================================================== */

/* Error notice container */
form.wpuf-form-add .wpuf-acf-field-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-left: 3px solid #ef4444;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.4;
    color: #991b1b;
    animation: wpuf-acf-error-in 0.3s ease-out;
}

/* Error icon */
form.wpuf-form-add .wpuf-acf-field-error .wpuf-acf-error-icon {
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1.4;
}

/* Error text */
form.wpuf-form-add .wpuf-acf-field-error .wpuf-acf-error-text {
    flex: 1;
}

/* Field highlight when it has an error */
form.wpuf-form-add li.wpuf-el.wpuf-acf-has-error {
    border-left: 3px solid #ef4444;
    padding-left: 12px;
    transition: border-color 0.3s ease, padding-left 0.3s ease;
}

/* Subtle slide-in animation */
@keyframes wpuf-acf-error-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ==========================================================================
   WYSIWYG / Rich-Textarea – c1ffb4 link colour
   Covers every context where a wp_editor() or ACF WYSIWYG field appears
   inside a WPUF form (standalone, inside a Group, inside Flex Content).
   ========================================================================== */

/*
 * 1. Static / rendered output areas
 *    (ACF output helpers + WPUF native tab wrappers)
 */
.acf-wysiwyg-value a:not(.btn),
.acf-field-value a:not(.btn),
.wpuf-native-tab-content a:not(.btn),
.wpuf-acf-tab-content a:not(.btn) {
    color: #c1ffb4 !important;
    text-decoration: underline;
}

.acf-wysiwyg-value a:not(.btn):hover,
.acf-field-value a:not(.btn):hover,
.wpuf-native-tab-content a:not(.btn):hover,
.wpuf-acf-tab-content a:not(.btn):hover {
    color: #a3f791 !important;
}

/*
 * 2. WPUF form – label & help-text links
 */
form.wpuf-form-add .wpuf-help a,
form.wpuf-form-add .wpuf-label a {
    color: #c1ffb4 !important;
    text-decoration: underline;
}

form.wpuf-form-add .wpuf-help a:hover,
form.wpuf-form-add .wpuf-label a:hover {
    color: #a3f791 !important;
}

/*
 * 3. WPUF-rendered wp_editor() instances
 *    wp_editor wraps the textarea in a  div.acf-editor-wrap / div#wp-{id}-wrap
 *    The live TinyMCE toolbar and editor area sit inside these wrappers.
 *
 *    Selectors cover:
 *      a) Standalone ACF wysiwyg field mapped to textarea_field
 *      b) ACF wysiwyg inside a Group field  (.wpuf-acf-group-container)
 *      c) ACF wysiwyg inside a Flex Content (.wpuf-acf-fc-container)
 */

/* Toolbar buttons that contain links (e.g. the "link" button popover) */
form.wpuf-form-add .wp-editor-wrap a:not(.button):not(.btn),
form.wpuf-form-add .acf-editor-wrap a:not(.button):not(.btn),
form.wpuf-form-add .wpuf-acf-group-container .wp-editor-wrap a:not(.button):not(.btn),
form.wpuf-form-add .wpuf-acf-fc-container .wp-editor-wrap a:not(.button):not(.btn),
form.wpuf-form-add .wpuf-acf-fc-single-container .wp-editor-wrap a:not(.button):not(.btn),
form.wpuf-form-add .wpuf-fields .wp-editor-wrap a:not(.button):not(.btn) {
    color: #c1ffb4 !important;
    text-decoration: underline;
}

form.wpuf-form-add .wp-editor-wrap a:not(.button):not(.btn):hover,
form.wpuf-form-add .acf-editor-wrap a:not(.button):not(.btn):hover,
form.wpuf-form-add .wpuf-acf-group-container .wp-editor-wrap a:not(.button):not(.btn):hover,
form.wpuf-form-add .wpuf-acf-fc-container .wp-editor-wrap a:not(.button):not(.btn):hover,
form.wpuf-form-add .wpuf-acf-fc-single-container .wp-editor-wrap a:not(.button):not(.btn):hover,
form.wpuf-form-add .wpuf-fields .wp-editor-wrap a:not(.button):not(.btn):hover {
    color: #a3f791 !important;
}

/*
 * 4. TinyMCE toolbar "Insert/edit link" dialog preview text
 *    (rendered inside the iframe – this rule is ignored by the browser for
 *    the iframe itself, but covers the link-preview span in the dialog overlay)
 */
.mce-floatpanel a,
.mce-tooltip a {
    color: #c1ffb4 !important;
}

/*
 * 5. Bulletproof Fallback and Toolbar Visibility (WP-Hide & Cache Compatible)
 */
.wp-editor-container:not(:has(iframe)) .wp-editor-area {
    visibility: visible !important;
    display: block !important;
}

html body .wp-editor-wrap .mce-tinymce,
html body .mce-tinymce.mce-container.mce-panel {
    visibility: visible !important;
    display: block !important;
    opacity: 1 !important;
}

html body .wp-editor-wrap .mce-toolbar-grp,
html body .wp-editor-wrap .mce-toolbar,
html body .wp-editor-wrap .mce-btn-group,
html body .wp-editor-wrap .mce-btn {
    visibility: visible !important;
    opacity: 1 !important;
}

html body .wp-editor-wrap .mce-toolbar-grp {
    display: block !important;
}

html body .wp-editor-wrap .mce-btn-group {
    display: inline-block !important;
}