/**
 * CF7 Enhanced — Front-end form styles.
 *
 * All visual properties are driven by CSS custom properties set inline
 * by the plugin (from the "Form Styles" admin page). This file provides
 * sensible defaults and maps those variables to the appropriate selectors.
 *
 * @package CF7_Enhanced
 */

/* === Defaults (overridden by inline <style> from plugin settings) === */

.wpcf7-form {
    --cf7e-form-bg: #ffffff;
    --cf7e-form-padding: 32px;
    --cf7e-form-radius: 12px;

    --cf7e-input-bg: #f9fafb;
    --cf7e-input-color: #1e2939;
    --cf7e-input-border: #d1d5dc;
    --cf7e-input-radius: 8px;
    --cf7e-input-py: 10px;
    --cf7e-input-px: 14px;
    --cf7e-input-font: 15px;
    --cf7e-input-focus: #ff6d00;

    --cf7e-label-color: #364153;
    --cf7e-label-font: 14px;
    --cf7e-label-weight: 600;

    --cf7e-btn-bg: #ff6d00;
    --cf7e-btn-color: #ffffff;
    --cf7e-btn-radius: 8px;
    --cf7e-btn-py: 12px;
    --cf7e-btn-px: 28px;
    --cf7e-btn-font: 15px;
    --cf7e-btn-hover: #d73700;

    --cf7e-success: #09b00e;
    --cf7e-error: #cf4f33;

    --cf7e-gap: 20px;
}

/* === Form container === */

.wpcf7-form {
    background: var(--cf7e-form-bg);
    padding: var(--cf7e-form-padding);
    border-radius: var(--cf7e-form-radius);
    display: flex;
    flex-direction: column;
    gap: var(--cf7e-gap);
    box-sizing: border-box;
}

/* === Row / column grid layout === */

.cf7e-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--cf7e-gap);
}

.cf7e-col--full       { grid-column: span 12; }
.cf7e-col--half       { grid-column: span 6; }
.cf7e-col--third      { grid-column: span 4; }
.cf7e-col--two-thirds { grid-column: span 8; }

@media (max-width: 640px) {
    .cf7e-col--half,
    .cf7e-col--third,
    .cf7e-col--two-thirds {
        grid-column: span 12;
    }
}

/* === Field wrapper === */

.cf7e-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* === Labels === */

.cf7e-field > label,
.wpcf7-form label {
    color: var(--cf7e-label-color);
    font-size: var(--cf7e-label-font);
    font-weight: var(--cf7e-label-weight);
    line-height: 1.4;
}

/* === Text inputs, textareas, selects === */

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="file"],
.wpcf7-form textarea,
.wpcf7-form select,
.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-checkbox):not(.wpcf7-radio) {
    background: var(--cf7e-input-bg);
    color: var(--cf7e-input-color);
    border: 1px solid var(--cf7e-input-border);
    border-radius: var(--cf7e-input-radius);
    padding: var(--cf7e-input-py) var(--cf7e-input-px);
    font-size: var(--cf7e-input-font);
    line-height: 1.5;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    font-family: inherit;
}

/* Exclude radio/checkbox — they have their own :checked/:focus-visible states. */
.wpcf7-form input:not([type="radio"]):not([type="checkbox"]):focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
    border-color: var(--cf7e-input-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf7e-input-focus) 20%, transparent);
}

.wpcf7-form textarea {
    resize: vertical;
    min-height: 100px;
}

/* === Submit button === */

.wpcf7-form input[type="submit"],
.wpcf7-form .wpcf7-submit,
.cf7e-field--submit button {
    background: var(--cf7e-btn-bg);
    color: var(--cf7e-btn-color);
    border: none;
    border-radius: var(--cf7e-btn-radius);
    padding: var(--cf7e-btn-py) var(--cf7e-btn-px);
    font-size: var(--cf7e-btn-font);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    line-height: 1.4;
    font-family: inherit;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form .wpcf7-submit:hover,
.cf7e-field--submit button:hover {
    background: var(--cf7e-btn-hover);
}

/* === Validation messages === */

.wpcf7-form .wpcf7-response-output {
    border-radius: var(--cf7e-input-radius);
    padding: var(--cf7e-input-py) var(--cf7e-input-px);
    font-size: var(--cf7e-input-font);
    margin: 0;
}

/* Success UX: after a sent event we collapse controls and spotlight the message. */
.wpcf7.cf7e-sent-collapsed .wpcf7-form > :not(.wpcf7-response-output) {
    display: none !important;
}

.wpcf7.cf7e-sent-collapsed .wpcf7-form .wpcf7-response-output {
    display: block;
    margin-top: 0;
    border: 2px solid var(--cf7e-success);
    background: color-mix(in srgb, var(--cf7e-success) 10%, #ffffff);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

.wpcf7-form.sent .wpcf7-response-output {
    border-color: var(--cf7e-success);
    color: var(--cf7e-success);
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
    border-color: var(--cf7e-error);
    color: var(--cf7e-error);
}

.wpcf7-form .wpcf7-not-valid-tip {
    color: var(--cf7e-error);
    font-size: 13px;
    margin-top: 4px;
}

/* === Checkboxes & radios ===
 *
 * Fully custom appearance to guarantee correct rendering regardless
 * of the theme's CSS framework (Tailwind preflight, Bootstrap reboot, etc.).
 * We reset `appearance` ourselves and provide all visual states.
 */

.wpcf7-form .wpcf7-checkbox,
.wpcf7-form .wpcf7-radio {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wpcf7-form .wpcf7-checkbox .wpcf7-list-item,
.wpcf7-form .wpcf7-radio .wpcf7-list-item {
    display: flex;
    align-items: center;
    font-size: var(--cf7e-input-font);
    color: var(--cf7e-input-color);
}

/* Make the inner label fully clickable with proper layout. */
.wpcf7-form .wpcf7-radio .wpcf7-list-item label,
.wpcf7-form .wpcf7-checkbox .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: normal;
}

/* --- Radio button --- */

.wpcf7-form input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--cf7e-input-border);
    border-radius: 50%;
    background: var(--cf7e-input-bg);
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    position: relative;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.wpcf7-form input[type="radio"]:hover {
    border-color: var(--cf7e-input-focus);
}

.wpcf7-form input[type="radio"]:checked {
    border-color: var(--cf7e-btn-bg);
    background: var(--cf7e-btn-bg);
}

.wpcf7-form input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
}

.wpcf7-form input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf7e-input-focus) 20%, transparent);
}

/* --- Checkbox --- */

.wpcf7-form input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--cf7e-input-border);
    border-radius: 4px;
    background: var(--cf7e-input-bg);
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    position: relative;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.wpcf7-form input[type="checkbox"]:hover {
    border-color: var(--cf7e-input-focus);
}

.wpcf7-form input[type="checkbox"]:checked {
    border-color: var(--cf7e-btn-bg);
    background: var(--cf7e-btn-bg);
}

.wpcf7-form input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    margin-top: -1px;
}

.wpcf7-form input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf7e-input-focus) 20%, transparent);
}

/* === Acceptance ===
 *
 * Renders like a regular checkbox field. CF7 acceptance is always
 * required by default (omitting the `optional` attribute = mandatory).
 */

/* Hide the <br> that CF7 autop inserts between <label> and the control. */
.cf7e-field--acceptance p > label + br {
    display: none;
}

/* Always show a required asterisk — acceptance is mandatory in CF7. */
.cf7e-field--acceptance > label:not(:has(.cf7e-required))::after,
.cf7e-field--acceptance > p > label:not(:has(.cf7e-required))::after {
    content: " *";
    color: var(--cf7e-error);
    font-weight: 700;
    margin-left: 2px;
}

.cf7e-field--acceptance .wpcf7-acceptance {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--cf7e-input-font);
    line-height: 1.5;
    color: var(--cf7e-input-color);
}

/* === Hidden submit (for custom trigger buttons) ===
 *
 * Visually hidden but remains in the DOM so CF7's JS can find the
 * [submit] tag. Use window.cf7eSubmit() from any custom element to
 * programmatically click this hidden button.
 */

.cf7e-field--submit-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* === Conditional field visibility ===
 *
 * Columns with [data-cf7e-hidden] are hidden by the conditional
 * visibility engine in frontend-forms.js. A smooth transition
 * ensures the show/hide feels polished.
 */

.cf7e-col[data-cf7e-condition] {
    transition: opacity 0.2s ease, max-height 0.3s ease;
    overflow: hidden;
}

.cf7e-col[data-cf7e-hidden] {
    display: none !important;
}

/* === Spinner (CF7 loading indicator) === */

.wpcf7-form .wpcf7-spinner {
    position: absolute;
    margin-top: 8px;
}

/* === Required field indicator === */

/* Explicit asterisk injected into markup by the builder. */
.cf7e-required {
    color: var(--cf7e-error);
    margin-left: 2px;
    font-weight: 700;
}

/*
 * CSS fallback — auto-detect required fields via CF7's aria-required attribute.
 * Covers forms that were saved before the asterisk feature was added.
 * Two selectors handle both direct labels and CF7's <p>-wrapped labels.
 * Guards:
 *   :not(:has(.cf7e-required)) — prevents double asterisks on re-saved forms.
 */
.cf7e-field:has([aria-required="true"]) > label:not(:has(.cf7e-required))::after,
.cf7e-field:has([aria-required="true"]) > p > label:not(:has(.cf7e-required))::after {
    content: " *";
    color: var(--cf7e-error);
    font-weight: 700;
    margin-left: 2px;
}

/* =================================================================
 * Extended field types: Section Title, Yes/No, Measurement
 * ================================================================= */

/* --- Section heading --- */

.cf7e-field--heading {
    padding: 4px 0 0;
}

.cf7e-field--heading h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--cf7e-label-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    padding: 0 0 6px;
    border-bottom: 2px solid var(--cf7e-btn-bg);
}

/* --- Yes / No field (horizontal pill-style radios) --- */

.cf7e-field--yesno .wpcf7-radio {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.cf7e-field--yesno .wpcf7-radio .wpcf7-list-item {
    flex: 1;
    display: flex;
    padding: 0; /* Padding lives on the <label> for full-area click coverage. */
    background: var(--cf7e-input-bg);
    border: 1px solid var(--cf7e-input-border);
    border-radius: var(--cf7e-input-radius);
    font-size: var(--cf7e-input-font);
    color: var(--cf7e-input-color);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    overflow: hidden; /* Clip label to rounded corners. */
}

.cf7e-field--yesno .wpcf7-radio .wpcf7-list-item:hover {
    border-color: var(--cf7e-input-focus);
}

/* Label fills the entire pill so every pixel is a click target. */
.cf7e-field--yesno .wpcf7-radio .wpcf7-list-item label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: var(--cf7e-input-py) var(--cf7e-input-px);
    cursor: pointer;
}

/* --- Measurement field (number input + unit badge) ---
 *
 * Uses <span> (not <div>) so it stays valid inside CF7's auto-<p> wrapping.
 * The flex children are .wpcf7-form-control-wrap (from CF7) and
 * .cf7e-measurement-unit (from the builder), not the <input> directly.
 */

.cf7e-measurement-wrap {
    display: flex;
    align-items: stretch;
    position: relative;
}

/* CF7's wrapper span is the actual flex child — let it fill available space. */
.cf7e-measurement-wrap .wpcf7-form-control-wrap {
    flex: 1;
    min-width: 0;
}

/* Pull validation tip out of flex flow so it doesn't stretch the unit badge. */
.cf7e-measurement-wrap .wpcf7-not-valid-tip {
    position: absolute;
    top: 100%;
    left: 0;
}

/* Remove right border-radius from the input so it merges with the unit badge. */
.cf7e-measurement-wrap .wpcf7-form-control,
.cf7e-measurement-wrap input[type="number"] {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    width: 100%;
}

.cf7e-measurement-unit {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    background: #f3f4f6;
    border: 1px solid var(--cf7e-input-border);
    border-left: 0;
    border-radius: 0 var(--cf7e-input-radius) var(--cf7e-input-radius) 0;
    font-size: 13px;
    font-weight: 600;
    color: #6a7282;
    text-transform: uppercase;
    white-space: nowrap;
}