/* SparkleMode CF7 Elementor Widget v1.1.1 */

.smcf7-card{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;
    border:1px solid #e5e7ef;
}

.smcf7-form .wpcf7{
    width:100%;
}

.smcf7-form .wpcf7-form{
    --smcf7-row-gap:16px;
    --smcf7-column-gap:16px;
}

.smcf7-form .wpcf7-form p{
    margin:0 0 var(--smcf7-row-gap);
}

.smcf7-form label{
    display:block;
    font-weight:600;
}

.smcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.smcf7-form select,
.smcf7-form textarea{
    width:100%;
    box-sizing:border-box;
    border:1px solid #d9dce5;
    transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.smcf7-form select{
    appearance:auto;
}

.smcf7-form textarea{
    resize:vertical;
}

.smcf7-form .wpcf7-form-control-wrap{
    display:block;
    width:100%;
}

.smcf7-form input[type="checkbox"],
.smcf7-form input[type="radio"]{
    vertical-align:middle;
    margin-right:7px;
}

.smcf7-form .wpcf7-list-item{
    margin:0 14px 6px 0;
}

.smcf7-form input[type="submit"],
.smcf7-form button[type="submit"]{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    border:0;
    transition:all .18s ease;
}

.smcf7-button-full input[type="submit"],
.smcf7-button-full button[type="submit"]{
    width:100%;
}

.smcf7-button-auto input[type="submit"],
.smcf7-button-auto button[type="submit"]{
    width:auto;
}

.smcf7-form .wpcf7-not-valid-tip{
    display:block;
    margin-top:6px;
    font-size:12px;
    line-height:1.45;
}

.smcf7-form .wpcf7-response-output{
    margin:16px 0 0 !important;
    padding:13px 15px !important;
    border:1px solid !important;
}

.smcf7-form .wpcf7-spinner{
    margin:8px 0 0 12px;
}

/* Smart two-column mode.
   JS classifies each top-level CF7 paragraph as half/full.
   Full: textarea, submit, acceptance, file upload, quizzes and grouped checkboxes/radios.
*/
.smcf7-layout-two .wpcf7-form,
.smcf7-layout-two .wpcf7-form > .smcf7-grid-host,
.smcf7-layout-two .wpcf7-form > .sm-contact-form{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:var(--smcf7-column-gap);
    row-gap:var(--smcf7-row-gap);
}

/* If the CF7 form has a single wrapper DIV, let that wrapper own the grid.
   This avoids an outer grid with only one item. */
.smcf7-layout-two .wpcf7-form:has(> .smcf7-grid-host),
.smcf7-layout-two .wpcf7-form:has(> .sm-contact-form){
    display:block;
}

.smcf7-layout-two .wpcf7-form > p,
.smcf7-layout-two .wpcf7-form > .smcf7-grid-host > p,
.smcf7-layout-two .wpcf7-form > .sm-contact-form > p{
    margin:0;
    min-width:0;
}

.smcf7-layout-two .smcf7-half{
    grid-column:auto;
}

.smcf7-layout-two .smcf7-full{
    grid-column:1 / -1;
}

.smcf7-editor-note{
    padding:16px;
    border:1px dashed #cfd3df;
    border-radius:10px;
    background:#f8f9fb;
    color:#555766;
}

@media(max-width:767px){
    .smcf7-layout-two .wpcf7-form,
    .smcf7-layout-two .wpcf7-form > .smcf7-grid-host,
    .smcf7-layout-two .wpcf7-form > .sm-contact-form{
        grid-template-columns:1fr;
    }
    .smcf7-layout-two .smcf7-half,
    .smcf7-layout-two .smcf7-full{
        grid-column:1;
    }
}


/* JS fallback for inner-wrapper forms and older browser behavior. */
.smcf7-layout-two.smcf7-has-inner-grid .wpcf7-form{
    display:block;
}
.smcf7-layout-two.smcf7-has-inner-grid .smcf7-grid-host{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:var(--smcf7-column-gap);
    row-gap:var(--smcf7-row-gap);
}
@media(max-width:767px){
    .smcf7-layout-two.smcf7-has-inner-grid .smcf7-grid-host{
        grid-template-columns:1fr;
    }
}


/* v1.1.1 — textarea height control fix */
.smcf7-form textarea.wpcf7-textarea,
.smcf7-form textarea{
    height:150px;
    min-height:150px;
    box-sizing:border-box;
    resize:vertical;
}


/* ==========================================================
   v1.1.2 — SparkleMode Contact form forced two-column fix
   ========================================================== */

/*
 * Exact importer markup:
 * .sm-contact-first-name | .sm-contact-last-name
 * .sm-contact-email      | .sm-contact-phone
 * full width afterwards.
 *
 * !important is intentional here because Contact Form 7 / Elementor /
 * theme paragraph styles can otherwise override the grid.
 */
.smcf7-layout-two .wpcf7-form > .sm-contact-form,
.smcf7-layout-two .wpcf7-form .sm-contact-form.smcf7-grid-host{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:var(--smcf7-column-gap,16px)!important;
    row-gap:var(--smcf7-row-gap,16px)!important;
    width:100%!important;
    align-items:start!important;
}

/* Outer CF7 form must not become a competing two-column grid when the
   imported .sm-contact-form wrapper exists. */
.smcf7-layout-two.smcf7-has-inner-grid .wpcf7-form{
    display:block!important;
}

/* Reset CF7/theme spacing; the grid gap owns spacing. */
.smcf7-layout-two .sm-contact-form > p{
    margin:0!important;
    padding:0!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
}

/* Explicit desktop placements. */
.smcf7-layout-two .sm-contact-form > .sm-contact-first-name,
.smcf7-layout-two .sm-contact-form > .sm-contact-last-name,
.smcf7-layout-two .sm-contact-form > .sm-contact-email,
.smcf7-layout-two .sm-contact-form > .sm-contact-phone{
    grid-column:auto!important;
}

.smcf7-layout-two .sm-contact-form > .sm-contact-subject,
.smcf7-layout-two .sm-contact-form > .sm-contact-message,
.smcf7-layout-two .sm-contact-form > .sm-contact-consent,
.smcf7-layout-two .sm-contact-form > .sm-contact-submit{
    grid-column:1 / -1!important;
}

/* Generic JS classes remain supported. */
.smcf7-layout-two .sm-contact-form > .smcf7-half{
    grid-column:auto!important;
}
.smcf7-layout-two .sm-contact-form > .smcf7-full{
    grid-column:1 / -1!important;
}

/* Inputs must fill their grid cell, not inherit old fixed widths. */
.smcf7-layout-two .sm-contact-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.smcf7-layout-two .sm-contact-form select,
.smcf7-layout-two .sm-contact-form textarea,
.smcf7-layout-two .sm-contact-form .wpcf7-form-control-wrap{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
}

/* CF7 sometimes inserts <br> between formatted rows; don't let those
   become unwanted grid items. */
.smcf7-layout-two .sm-contact-form > br{
    display:none!important;
}

@media(max-width:767px){
    .smcf7-layout-two .wpcf7-form > .sm-contact-form,
    .smcf7-layout-two .wpcf7-form .sm-contact-form.smcf7-grid-host{
        grid-template-columns:minmax(0,1fr)!important;
    }

    .smcf7-layout-two .sm-contact-form > .sm-contact-first-name,
    .smcf7-layout-two .sm-contact-form > .sm-contact-last-name,
    .smcf7-layout-two .sm-contact-form > .sm-contact-email,
    .smcf7-layout-two .sm-contact-form > .sm-contact-phone,
    .smcf7-layout-two .sm-contact-form > .sm-contact-subject,
    .smcf7-layout-two .sm-contact-form > .sm-contact-message,
    .smcf7-layout-two .sm-contact-form > .sm-contact-consent,
    .smcf7-layout-two .sm-contact-form > .sm-contact-submit,
    .smcf7-layout-two .sm-contact-form > .smcf7-half,
    .smcf7-layout-two .sm-contact-form > .smcf7-full{
        grid-column:1!important;
    }
}
