/* =========================================================
   CONTACT BLOCK — BEM
   Full-width dark bg image | frosted form LEFT | content RIGHT
   ========================================================= */

.smartfix-contact {
    position: relative;
    background-color: var(--sf-bg-dark-1);
    background-size: auto 100%;
    background-position: left center;
    background-repeat: no-repeat;
    padding: var(--sf-padding-section) 80px;
}

/* Overlay only on the image portion (left side) */
.smartfix-contact__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        transparent 0%,
        transparent 26.5%,
        rgba(10, 18, 20, 1.0) 26.5%
    );
    z-index: 0;
    pointer-events: none;
}

/* ── Inner grid ── */
.smartfix-contact__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* =========================================================
   LEFT — FROSTED FORM CARD
   ========================================================= */

.smartfix-contact__form-wrap {
    border: 1px solid rgba(0, 180, 160, 0.35);
    padding: 28px 24px;
    background: rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.smartfix-contact__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Without this, Safari/Firefox pick their native form-control theme
       from the OS colour scheme rather than this dark card, and can render
       typed text and the select's own widget chrome dark-on-dark. */
    color-scheme: dark;
}

.smartfix-contact__row {
    display: flex;
    flex-direction: column;
}

.smartfix-contact__row--2col {
    flex-direction: row;
    gap: 12px;
}

/* Every field shares one look — inputs and the textarea alike.
   Element-qualified so these beat GeneratePress's `input[type="text"]`
   rules (type + attribute = higher specificity than a bare class,
   which is why the text inputs were rendering as unstyled square
   boxes while the textarea picked our styling up fine). */
input.smartfix-contact__input,
select.smartfix-contact__input,
textarea.smartfix-contact__textarea {
    width: 100%;
    padding: 18px 22px;
    border-radius: 18px;
    border: none;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.9);
    /* Set unconditionally (not just inside a :-webkit-autofill rule) and
       !important: Chromium's own "autofill preview" state — the grey
       inline suggestion shown WHILE typing, before any value is actually
       committed from a saved profile — forces this property from its
       internal UA style and does NOT match the `:-webkit-autofill`
       pseudo-class at all, so nesting the override inside that pseudo-class
       alone (below) still left live/focused typing dark for <input>s
       specifically (never affected <textarea>/<select>, which don't have
       this Chromium preview behavior). Only `!important` here reliably
       wins against that internal UA style in every state. */
    -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
    caret-color: rgba(255, 255, 255, 0.9);
    font-family: var(--sf-font-body);
    font-size: 15px;
    line-height: 1.4;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

input.smartfix-contact__input::placeholder,
textarea.smartfix-contact__textarea::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

input.smartfix-contact__input:focus,
select.smartfix-contact__input:focus,
textarea.smartfix-contact__textarea:focus {
    background: rgba(0, 0, 0, 0.65);
    outline: 1px solid var(--sf-color-primary);
}

/* Chrome/Edge/Safari also paint fully-autofilled fields (after a saved
   value is actually committed, not just previewed) with a forced light
   background highlight in addition to the text-colour override above.
   The 0 0 0 1000px inset box-shadow trick repaints that highlight back to
   our own dark background instead of removing it outright (which isn't
   reliably possible), and the huge transition delay stops Chrome's own
   yellow flash from appearing even for a moment. */
input.smartfix-contact__input:-webkit-autofill,
input.smartfix-contact__input:-webkit-autofill:hover,
input.smartfix-contact__input:-webkit-autofill:focus,
input.smartfix-contact__input:-webkit-autofill:active {
    -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.55) inset;
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.55) inset;
    caret-color: rgba(255, 255, 255, 0.9);
    transition: background-color 600000s ease-in-out 0s;
}

/* Textarea-only extras */
textarea.smartfix-contact__textarea {
    resize: none;
    min-height: 180px;
}

/* Submit button — full-width teal pill */
button.smartfix-contact__submit,
input.smartfix-contact__submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 32px;
    border-radius: 100px;
    border: none;
    background: var(--sf-color-primary);
    color: #fff;
    font-family: var(--sf-font-heading);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s ease;
    margin-top: 6px;
}

button.smartfix-contact__submit:hover,
input.smartfix-contact__submit:hover {
    background: var(--sf-color-primary-dark, #0a9e8e);
}

.smartfix-contact__submit .sf-btn__icon {
    flex-shrink: 0;
}

/* =========================================================
   CONTACT FORM 7 BRIDGE
   CF7 renders its own <form> plus a .wpcf7-form-control-wrap <span>
   around every control, so the theme's row layout has to reach one
   level deeper than it does for the static fallback markup.
   ========================================================= */

.smartfix-contact__form .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

/* The two-up row: CF7's wrapper spans are the flex items, not the
   inputs themselves. min-width:0 stops long placeholders forcing
   the pair wider than the card. */
.smartfix-contact__row--2col > .wpcf7-form-control-wrap {
    flex: 1;
    min-width: 0;
}

/* CF7's submit is an <input>, which can't lay out an icon child —
   the pill styling still applies, just without the arrow. */
input.smartfix-contact__submit {
    display: block;
    -webkit-appearance: none;
    appearance: none;
}

/* Select uses the shared input styling; add back the dropdown arrow
   that `appearance: none` removes. */
select.smartfix-contact__input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 22px center;
    padding-right: 48px;
    cursor: pointer;
}

select.smartfix-contact__input option {
    background: #0a1214;
    color: #fff;
}

/* Validation + response messages, restyled for the dark card */
.smartfix-contact__form .wpcf7-not-valid-tip {
    margin-top: 6px;
    padding-left: 22px;
    font-family: var(--sf-font-body);
    font-size: 13px;
    color: #ff9a9a;
}

.smartfix-contact__form .wpcf7-form-control.wpcf7-not-valid {
    outline: 1px solid #ff9a9a;
}

.smartfix-contact__form .wpcf7-response-output {
    margin: 12px 0 0;
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-family: var(--sf-font-body);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

.smartfix-contact__form .wpcf7-form.sent .wpcf7-response-output {
    border-color: var(--sf-color-primary);
}

.smartfix-contact__form .wpcf7-spinner {
    margin: 0 auto;
    display: block;
}

/* =========================================================
   RIGHT — CONTENT
   ========================================================= */

.smartfix-contact__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.smartfix-contact__tag {
    font-size: 13px;
    letter-spacing: 0.12em;
}

.smartfix-contact__headline {
    font-family: var(--sf-font-heading);
    font-weight: 700;
    font-size: clamp(36px, 3.2vw, 52px);
    line-height: 1.1;
    color: var(--sf-text-white);
    margin: 0;
}

.smartfix-contact__headline .sf-highlight {
    color: var(--sf-color-primary);
}

.smartfix-contact__body {
    font-family: var(--sf-font-body);
    font-size: var(--sf-fs-body);
    line-height: var(--sf-lh-body);
    color: var(--sf-text-white-72);
    margin: 0;
}

.smartfix-contact__body p {
    margin: 0;
}

/* CTA row */
.smartfix-contact__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

/* Muted/gray secondary button */
.sf-btn--muted {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.18);
    color: var(--sf-text-white);
    font-family: var(--sf-font-heading);
    font-weight: 600;
    font-size: var(--sf-fs-body);
    text-decoration: none;
    transition: background 0.2s ease;
    border: none;
}

.sf-btn--muted:hover {
    background: rgba(255, 255, 255, 0.28);
    color: var(--sf-text-white);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {
    .smartfix-contact {
        padding: var(--sf-padding-section) 48px;
        /* Rows stack from here down, so the side-by-side backdrop no
           longer makes sense: let the photo cover the whole section
           instead of sitting in a left-hand band the stacked form
           would fall off the edge of. */
        background-size: cover;
        background-position: center;
    }

    /* ...and swap the hard-edged left/right split for an even scrim, so
       the form and copy both sit legibly in front of the image rather
       than half over it and half over flat colour. */
    .smartfix-contact__overlay {
        background: linear-gradient(
            to bottom,
            rgba(10, 18, 20, 0.86) 0%,
            rgba(10, 18, 20, 0.92) 100%
        );
    }

    .smartfix-contact__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 834px) {
    .smartfix-contact {
        padding: 48px 20px;
        background-position: center top;
    }

    .smartfix-contact__inner {
        gap: 32px;
    }

    .smartfix-contact__headline {
        font-size: clamp(24px, 6vw, 32px);
    }

    .smartfix-contact__row--2col {
        flex-direction: column;
        gap: 12px;
    }

    .smartfix-contact__ctas {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .smartfix-contact__ctas .sf-btn {
        width: 100%;
        justify-content: center;
    }

    .sf-btn--muted {
        justify-content: center;
    }
}

@media (max-width: 375px) {
    .smartfix-contact {
        padding: 40px 16px;
    }
}