/* =============================================================================
 * Widget CF7 Two Column — base styles
 * BEM root: .gtea-cf7-two-col
 * ============================================================================= */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */

.gtea-cf7-two-col {
    box-sizing: border-box;
    width: 100%;
}

/* ── Columns row ─────────────────────────────────────────────────────────── */

.gtea-cf7-two-col__columns {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

/* ── Column base ─────────────────────────────────────────────────────────── */

.gtea-cf7-two-col__col {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
}

/* ── Form wrap ───────────────────────────────────────────────────────────── */

.gtea-cf7-two-col__form-wrap {
    width: 100%;
    box-sizing: border-box;
}

/* Reset CF7 defaults so our controls take over */
.gtea-cf7-two-col__form-wrap .wpcf7-form-control-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.gtea-cf7-two-col__form-wrap .wpcf7-form-control {
    width: 100%;
    min-width: initial;
}

/* ── Hide label modifier ─────────────────────────────────────────────────── */

.gtea-cf7-two-col--hide-label .wpcf7-form label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Restore labels inside checkbox / radio / acceptance even when hide-label is on */
.gtea-cf7-two-col--hide-label .wpcf7-form .wpcf7-form-control.wpcf7-acceptance label,
.gtea-cf7-two-col--hide-label .wpcf7-form .wpcf7-form-control.wpcf7-checkbox label,
.gtea-cf7-two-col--hide-label .wpcf7-form .wpcf7-form-control.wpcf7-radio label {
    position: initial;
    width: initial;
    height: initial;
    padding: initial;
    margin: initial;
    overflow: initial;
    clip: initial;
    white-space: initial;
    border: initial;
}

/* ── Field groups — reset browser / theme paragraph margins ──────────────── */
/*
 * CF7 wraps each field in a <p> or <div>. Browser defaults and many themes
 * add margin-bottom (commonly 1em–1.5em) to every <p>, so multiple fields
 * produce an unexpected cumulative gap that looks like a hardcoded padding.
 * Reset here; the "Field group spacing" Elementor control is the single
 * source of truth for this spacing.
 */
.gtea-cf7-two-col__form-wrap .wpcf7-form > p,
.gtea-cf7-two-col__form-wrap .wpcf7-form > div:not(.wpcf7-response-output) {
    margin-top: 0;
    margin-bottom: 0;
}

/* ── Inline mode ─────────────────────────────────────────────────────────── */
/*
 * Makes the form a flex-row container so all fields + submit
 * line up horizontally. flex-wrap keeps things safe on narrow viewports.
 *
 * CF7 wraps each field group in <p> or <div>; those become flex items.
 * The response output stays below the row and takes full width.
 *
 * NOTE: :has() is intentionally avoided (Firefox < 121 does not support it).
 * JS adds .gtea-cf7-two-col__inline-submit-wrap to the <p>/<div> that
 * wraps the submit button so we can target it without :has().
 */

/*
 * Target only the real CF7 form (.wpcf7 .wpcf7-form), not the editor preview
 * (.gtea-cf7-two-col__submit-editor-preview .wpcf7-form). Both match
 * ".form-wrap .wpcf7-form" so we narrow the selector to include .wpcf7 which
 * is the CF7 plugin's outer wrapper — absent from the editor preview div.
 */
.gtea-cf7-two-col--inline .gtea-cf7-two-col__form-wrap .wpcf7 .wpcf7-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
}

/* Each direct child block (CF7 uses <p> or <div>) becomes a flex item.
 * Use !important on margin to override CF7's default p { margin: 0 0 1.5em }
 * and any theme paragraph margins that would break the inline layout. */
.gtea-cf7-two-col--inline .gtea-cf7-two-col__form-wrap .wpcf7 .wpcf7-form > p,
.gtea-cf7-two-col--inline .gtea-cf7-two-col__form-wrap .wpcf7 .wpcf7-form > div:not(.wpcf7-response-output) {
    flex: 1 1 auto;
    min-width: 120px;
    margin: 0 !important;
    padding: 0;
}

/* Let fields fill their flex item naturally */
.gtea-cf7-two-col--inline .gtea-cf7-two-col__form-wrap .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.gtea-cf7-two-col--inline .gtea-cf7-two-col__form-wrap .wpcf7-form-control:not(.wpcf7-radio):not(.wpcf7-checkbox):not(.wpcf7-acceptance):not(.wpcf7-submit) {
    width: 100%;
    box-sizing: border-box;
}

/* Submit wrapper: don't grow — class is added by JS so we avoid :has() */
.gtea-cf7-two-col--inline .gtea-cf7-two-col__form-wrap .gtea-cf7-two-col__inline-submit-wrap {
    flex: 0 0 auto;
    min-width: 0;
}

/* Response output takes its own full row */
.gtea-cf7-two-col--inline .gtea-cf7-two-col__form-wrap .wpcf7-response-output {
    flex: 1 1 100%;
    margin-top: 0 !important;
}

/* ── Submit button (after JS icon injection) ─────────────────────────────── */
/*
 * The <button> element that JS creates to replace CF7's <input type="submit">
 * must be a flex container so icon + label sit side by side.
 * !important on display prevents theme CSS resets from breaking the layout.
 * Elementor controls (background, color, padding, border, typography…) target
 * this selector directly and override the resets below.
 */

.gtea-cf7-two-col .wpcf7-form button[type="submit"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
    max-width: 100%;
    /* Clip overflowing label text when the button has a fixed width */
    overflow: hidden;
    /* Reset browser / theme button defaults; Elementor controls take over */
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    /* Inherit form typography so Elementor typography controls apply cleanly */
    font: inherit;
    color: inherit;
    line-height: inherit;
    text-decoration: none;
    vertical-align: middle;
}

/* ── Submit label ────────────────────────────────────────────────────────── */
/*
 * Allow the label text to be truncated when the button has a fixed width.
 * flex-shrink: 1 lets the label shrink in favour of the icon.
 * min-width: 0 is required so a flex item can shrink below its content size.
 */

.gtea-cf7-two-col .gtea-cf7-two-col__submit-label {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
}

/* ── Submit icon wrap ────────────────────────────────────────────────────── */
/*
 * Base dimensions guarantee the icon is always visible even without
 * explicit Elementor control values. Elementor controls override these.
 * 12px is the minimum required (per spec).
 */

.gtea-cf7-two-col .gtea-cf7-two-col__submit-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Minimum visible size */
    min-width: 12px;
    min-height: 12px;
    width: 16px;
    height: 16px;
    line-height: 1;
    box-sizing: border-box;
}

/* SVG icons: fill the wrap, never collapse */
.gtea-cf7-two-col .gtea-cf7-two-col__submit-icon-wrap svg {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 12px;
    min-height: 12px;
    /* Prevent the SVG from being squished by flex layout */
    flex-shrink: 0;
}

/* Font icons (<i>) and explicit icon spans: match wrap dimensions */
.gtea-cf7-two-col .gtea-cf7-two-col__submit-icon-wrap i,
.gtea-cf7-two-col .gtea-cf7-two-col__submit-icon-wrap span.gtea-cf7-two-col__submit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Use the wrap's computed size, not the button's inherited font-size */
    width: 100%;
    height: 100%;
    min-width: 12px;
    min-height: 12px;
    font-size: inherit; /* overridden by Elementor width/height controls via font-size on wrap */
    line-height: 1;
}

/* ── Editor placeholder ──────────────────────────────────────────────────── */

.gtea-cf7-two-col__placeholder {
    padding: 16px;
    border: 2px dashed currentColor;
    opacity: 0.5;
    font-size: 14px;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
}

/* ── Editor submit preview ───────────────────────────────────────────────── */
/*
 * A PHP-rendered button preview shown in the Elementor editor so that all
 * submit style controls (colour, padding, border, icon, hover…) are visible
 * without depending on JS. The --editor-mode modifier hides CF7's original
 * <input type="submit"> so only the preview button is visible in the editor.
 *
 * The preview .wpcf7-form wrapper is a <div>, not a <form>, so clicking it
 * does nothing. tabindex="-1" on the button prevents accidental keyboard focus.
 */

/* Hide the original CF7 submit input when the editor preview is active */
.gtea-cf7-two-col--editor-mode .wpcf7 input[type="submit"].wpcf7-submit {
    display: none !important;
}

/* Strip CF7 form-level resets from the preview wrapper (it's a <div>).
 * Specificity (0,2,0): enough for the non-inline editor case.
 * In the inline editor case, a higher-specificity rule below takes over. */
.gtea-cf7-two-col__submit-editor-preview .wpcf7-form {
    display: block;
    padding: 0;
    margin: 0;
}

/* ── Editor + inline mode ────────────────────────────────────────────────── */
/*
 * PROBLEM: In the Elementor editor the CF7 form and the submit preview live
 * in separate DOM containers and cannot share the same flex row.
 *
 *   .form-wrap (block)
 *     .wpcf7 → form.wpcf7-form (flex, has fields)
 *     .submit-editor-preview → div.wpcf7-form (has the preview button)
 *
 * The inline rule (specificity 0,3,0) overrides the editor-preview rule
 * (0,2,0) and also makes .submit-editor-preview .wpcf7-form a flex container,
 * so the preview button appears full-width on its own row — not inline.
 *
 * SOLUTION: promote .form-wrap to the flex row in editor+inline. The CF7
 * form block (.wpcf7) and the preview button (.submit-editor-preview) become
 * siblings at the same flex level:
 *
 *   .form-wrap (flex row)                   ← NEW: outer flex
 *     .wpcf7  (flex: 1 1 auto)              ← CF7 fields, also flex internally
 *     .submit-editor-preview (flex: 0 auto) ← preview button, align-self: end
 *
 * Additional fixes:
 * — The empty submit <p> in the CF7 form (input is already display:none via
 *   --editor-mode) still occupies a flex slot and adds an unwanted gap.
 *   We hide it entirely.
 * — The preview .wpcf7-form must stay display:block (not flex). The inline
 *   rule (0,3,0) would make it flex; we use (0,4,0) + !important to override.
 */

/* Outer flex row — makes CF7 fields and preview button siblings on one row */
.gtea-cf7-two-col--editor-mode.gtea-cf7-two-col--inline .gtea-cf7-two-col__form-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
}

/* CF7 outer wrapper: grows to fill available horizontal space */
.gtea-cf7-two-col--editor-mode.gtea-cf7-two-col--inline .gtea-cf7-two-col__form-wrap > .wpcf7 {
    flex: 1 1 auto;
    min-width: 0;
}

/*
 * The empty submit <p> in the CF7 form (its input is already hidden via
 * --editor-mode) still acts as a flex item and adds an 8px gap at the end
 * of the field row. Hide the <p> entirely so the field row is clean.
 */
.gtea-cf7-two-col--editor-mode.gtea-cf7-two-col--inline
.gtea-cf7-two-col__form-wrap .wpcf7 .gtea-cf7-two-col__inline-submit-wrap {
    display: none !important;
}

/* Preview button is a flex item alongside .wpcf7, pinned to the bottom */
.gtea-cf7-two-col--editor-mode.gtea-cf7-two-col--inline
.gtea-cf7-two-col__form-wrap .gtea-cf7-two-col__submit-editor-preview {
    flex: 0 0 auto;
    align-self: flex-end;
}

/*
 * Force the preview's inner .wpcf7-form to display:block.
 * The inline rule (.gtea-cf7-two-col--inline .form-wrap .wpcf7-form)
 * has specificity (0,3,0) and overrides the editor-preview rule (0,2,0),
 * making the div a flex container and stretching the button full-width.
 * This rule uses (0,4,0) + !important to win in all cases.
 */
.gtea-cf7-two-col--editor-mode.gtea-cf7-two-col--inline
.gtea-cf7-two-col__submit-editor-preview .wpcf7-form {
    display: block !important;
    flex-direction: unset;
    flex-wrap: unset;
    align-items: unset;
    gap: 0;
}

/* ── Single-column modes ─────────────────────────────────────────────────── */
/*
 * When only one column is rendered (the other is hidden via the switcher),
 * the remaining column must fill the full container width.
 *
 * Specificity: (0,3,0) — beats Elementor-generated selectors (0,2,0) such as
 * `.elementor-element-XXXX .gtea-cf7-two-col__col--left { flex: 0 0 40%; }`.
 * No !important needed: higher specificity is enough.
 *
 * NOTE: The right column already has `flex: 1 1 0` from the layout_left_width
 * control, so it expands naturally when the left sibling is absent. We still
 * declare the rule explicitly for clarity and edge-case safety.
 */

/* Right-only: only the form column is shown */
.gtea-cf7-two-col--right-only .gtea-cf7-two-col__columns .gtea-cf7-two-col__col--right {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
}

/* Left-only: only the content column is shown */
.gtea-cf7-two-col--left-only .gtea-cf7-two-col__columns .gtea-cf7-two-col__col--left {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
}