/* ==========================================================================
   Mexperience CF7 form restyle — 2026
   ADMIN-ONLY PREVIEW (mex_forms_live() returns manage_options). Loaded LAST and
   scoped to body.mex-forms-2026 so it beats mexperience.css / mobile-menus.css
   AND the Contact Form 7 plugin's own styles.css, and never leaks elsewhere.

   CSS ONLY. No form markup, field names, mail tags, Turnstile or CF7/MLM JS are
   touched — lead capture is unaffected.

   Direction (agreed with the client):
     - Whole form sits in a WHITE card (border + soft shadow), like mex-cards.
     - Fields are STONE-filled wells with a faint border and rounded corners.
     - Type is Open Sans throughout; section headings in Semibold (600).
     - Accent split: RED for focus rings / required marks / validation; GOLD is
       reserved for the submit button only.
     - The consent block (checkbox line) becomes a calm Stone panel with a red
       left edge.

   Palette tokens are inherited from mex-cards.css :root; hex fallbacks are given
   inline so the form still styles correctly if that sheet isn't present.
   ========================================================================== */

/* ── Card container ───────────────────────────────────────────────────────
   The .wpcf7 wrapper becomes the card. */
body.mex-forms-2026 .entry-content div.wpcf7 {
    max-width: 680px;
    margin: 24px 0 34px;
    padding: 32px 34px;
    background: #fff;
    border: 1px solid var(--mex-border, #e7e3df);
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    overflow: visible;
    font-family: 'Open Sans', Arial, sans-serif;
}

@media screen and (max-width: 600px) {
    body.mex-forms-2026 .entry-content div.wpcf7 {
        padding: 22px 18px;
        border-radius: 8px;
    }
}

/* ── Field rows & labels ──────────────────────────────────────────────────
   Labels are bare text nodes inside a <p> that also holds the control wrap
   (….wpcf7-form-control-wrap). Style THOSE paragraphs as label rows. */
body.mex-forms-2026 div.wpcf7 .wpcf7-form p {
    margin: 0 0 18px;
    padding: 0;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--mex-ink, #191919);
}

/* Label rows (a <p> that contains a control): the label text is semibold so
   each field reads clearly above its well. Easy one-line dial-back to 400. */
body.mex-forms-2026 div.wpcf7 .wpcf7-form p:has(> .wpcf7-form-control-wrap) {
    font-weight: 600;
    color: var(--mex-ink, #191919);
}

/* Prose paragraphs (confirmation copy etc.) are calm secondary body text —
   de-bolded from the theme default. */
body.mex-forms-2026 div.wpcf7 .wpcf7-form p:not(:has(.wpcf7-form-control-wrap)) {
    font-weight: 400;
    color: var(--mex-grey, #6f6f6f);
}

/* The <br> after a label gives the gap between label and control. */
body.mex-forms-2026 div.wpcf7 .wpcf7-form p > br:first-of-type {
    line-height: 2.2;
}

/* Turn a trailing "*" or "(required)" hint quietly grey; the asterisk that CF7
   authors type inline stays inline, but we tint the whole label subtly via the
   required marker below. */

/* ── Inputs, textarea, select (Stone wells) ───────────────────────────────*/
body.mex-forms-2026 div.wpcf7 .wpcf7-form input[type='text'],
body.mex-forms-2026 div.wpcf7 .wpcf7-form input[type='email'],
body.mex-forms-2026 div.wpcf7 .wpcf7-form input[type='tel'],
body.mex-forms-2026 div.wpcf7 .wpcf7-form input[type='url'],
body.mex-forms-2026 div.wpcf7 .wpcf7-form input[type='number'],
body.mex-forms-2026 div.wpcf7 .wpcf7-form input[type='date'],
body.mex-forms-2026 div.wpcf7 .wpcf7-form select,
body.mex-forms-2026 div.wpcf7 .wpcf7-form textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 6px 0 0;
    padding: 0 14px;
    height: 46px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--mex-ink, #191919);
    background: var(--mex-stone, #FAF9F7);
    border: 1px solid var(--mex-border, #e7e3df);
    border-radius: 7px;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

body.mex-forms-2026 div.wpcf7 .wpcf7-form textarea {
    height: auto;
    min-height: 150px;
    padding: 12px 14px;
    resize: vertical;
}

body.mex-forms-2026 div.wpcf7 .wpcf7-form ::placeholder {
    color: #a7a29c;
    opacity: 1;
}

/* Focus — the premium red ring (the single biggest "elevated" cue). */
body.mex-forms-2026 div.wpcf7 .wpcf7-form input:focus,
body.mex-forms-2026 div.wpcf7 .wpcf7-form select:focus,
body.mex-forms-2026 div.wpcf7 .wpcf7-form textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--mex-gold-dark, #C77400);
    box-shadow: 0 0 0 3px var(--mex-tint-sand, #FBF3E4);
}

/* Custom chevron for the native <select> so it stops looking like an OS widget. */
body.mex-forms-2026 div.wpcf7 .wpcf7-form select {
    padding-right: 42px;
    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='%236f6f6f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}

/* Tidy the native date control to match field height/colour. */
body.mex-forms-2026 div.wpcf7 .wpcf7-form input[type='date'] {
    cursor: text;
}
body.mex-forms-2026 div.wpcf7 .wpcf7-form input[type='date']::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
}
body.mex-forms-2026 div.wpcf7 .wpcf7-form input[type='date']:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

/* ── Section headings (Open Sans Semibold) ─────────────────────────────────*/
body.mex-forms-2026 div.wpcf7 .wpcf7-form h2,
body.mex-forms-2026 div.wpcf7 .wpcf7-form h3 {
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 600;
    color: var(--mex-ink, #191919);
    letter-spacing: -0.01em;
    margin: 30px 0 14px;
    padding: 22px 0 0;
    border-top: 1px solid var(--mex-border, #e7e3df);
}
body.mex-forms-2026 div.wpcf7 .wpcf7-form h2 { font-size: 21px; }
body.mex-forms-2026 div.wpcf7 .wpcf7-form h3 { font-size: 18px; }

/* ── "Request confirmation" card (wrapped by mex-forms.js when present) ─────
   A Stone panel grouping the heading + explanatory copy + consent checkbox.
   The Turnstile widget and submit button remain outside/below it. */
body.mex-forms-2026 div.wpcf7 .wpcf7-form .mex-confirm-card {
    background: var(--mex-stone, #FAF9F7);
    border: 1px solid var(--mex-border, #e7e3df);
    border-radius: 10px;
    padding: 4px 24px 24px;
    margin: 28px 0 22px;
}
body.mex-forms-2026 div.wpcf7 .wpcf7-form .mex-confirm-card > *:last-child {
    margin-bottom: 0;
}
/* Heading inside the card: drop the section divider it uses when standalone. */
body.mex-forms-2026 div.wpcf7 .wpcf7-form .mex-confirm-card h2,
body.mex-forms-2026 div.wpcf7 .wpcf7-form .mex-confirm-card h3 {
    border-top: 0;
    margin-top: 0;
    padding-top: 20px;
}

/* ── Consent block (checkbox line → calm Stone panel, red left edge) ───────*/
body.mex-forms-2026 div.wpcf7 .wpcf7-form p:has(.wpcf7-checkbox) {
    margin: 20px 0;
    padding: 16px 18px;
    background: var(--mex-stone, #FAF9F7);
    border: 1px solid var(--mex-border, #e7e3df);
    border-left: 3px solid var(--mex-green, #2e6b3b);
    border-radius: 8px;
    font-weight: 400;
}
/* Inside the Stone confirmation card, flip the consent panel to white so it
   still reads as a distinct element rather than blending into the card. */
body.mex-forms-2026 div.wpcf7 .wpcf7-form .mex-confirm-card p:has(.wpcf7-checkbox) {
    background: #fff;
}
body.mex-forms-2026 div.wpcf7 .wpcf7-form .wpcf7-checkbox .wpcf7-list-item {
    margin: 0;
}
body.mex-forms-2026 div.wpcf7 .wpcf7-form .wpcf7-checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    margin: 0;
}
body.mex-forms-2026 div.wpcf7 .wpcf7-form .wpcf7-checkbox .wpcf7-list-item-label {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--mex-ink, #191919);
}

/* Custom checkbox with a red tick when checked. */
body.mex-forms-2026 div.wpcf7 .wpcf7-form .wpcf7-checkbox input[type='checkbox'] {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    background: #fff;
    border: 1px solid #c7c0b8;
    border-radius: 5px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
body.mex-forms-2026 div.wpcf7 .wpcf7-form .wpcf7-checkbox input[type='checkbox']:hover {
    border-color: var(--mex-green, #2e6b3b);
}
body.mex-forms-2026 div.wpcf7 .wpcf7-form .wpcf7-checkbox input[type='checkbox']:checked {
    background: var(--mex-green, #2e6b3b);
    border-color: var(--mex-green, #2e6b3b);
    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-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
body.mex-forms-2026 div.wpcf7 .wpcf7-form .wpcf7-checkbox input[type='checkbox']:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(46, 107, 59, 0.20);
}

/* ── Submit button (GOLD — the one gold element) ───────────────────────────*/
body.mex-forms-2026 div.wpcf7 .wpcf7-form input.wpcf7-submit {
    display: inline-block;
    width: auto;
    margin: 8px 0 0;
    padding: 0 30px;
    height: 48px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: var(--mex-gold, #E88B00);
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
body.mex-forms-2026 div.wpcf7 .wpcf7-form input.wpcf7-submit:hover {
    background: var(--mex-gold-dark, #C77400);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(199, 116, 0, 0.28);
}
body.mex-forms-2026 div.wpcf7 .wpcf7-form input.wpcf7-submit:active {
    transform: translateY(0);
    box-shadow: none;
}
body.mex-forms-2026 div.wpcf7 .wpcf7-form input.wpcf7-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(199, 116, 0, 0.35);
}
body.mex-forms-2026 div.wpcf7 .wpcf7-form input.wpcf7-submit:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
    box-shadow: none;
}

/* Keep CF7's AJAX spinner tidy next to the button. */
body.mex-forms-2026 div.wpcf7 .wpcf7-spinner {
    margin: 0 0 0 14px;
    vertical-align: middle;
}

/* ── Validation & response feedback (cosmetic only) ────────────────────────*/
body.mex-forms-2026 div.wpcf7 .wpcf7-form .wpcf7-not-valid {
    border-color: var(--mex-red, #ce1126) !important;
    box-shadow: 0 0 0 3px var(--mex-tint-sand, #FBF3E4) !important;
}
body.mex-forms-2026 div.wpcf7 .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--mex-red, #ce1126);
}

body.mex-forms-2026 div.wpcf7 .wpcf7-response-output {
    margin: 18px 0 0;
    padding: 14px 16px 14px 18px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 8px;
    border: 1px solid var(--mex-border, #e7e3df);
    border-left: 3px solid var(--mex-grey, #6f6f6f); /* accent bar */
    background: var(--mex-stone, #FAF9F7);
    color: var(--mex-ink, #191919);                  /* body text black */
}
/* Success → green accent bar, calm green tint, black text. */
body.mex-forms-2026 div.wpcf7.wpcf7-mail-sent-ok .wpcf7-response-output,
body.mex-forms-2026 div.wpcf7 form.sent .wpcf7-response-output {
    background: #f1f8f2;
    border-color: #cfe6d4;
    border-left-color: var(--mex-green, #2e6b3b);
    color: var(--mex-ink, #191919);
}
/* Validation error → red accent bar, red tint, black text. */
body.mex-forms-2026 div.wpcf7.wpcf7-invalid .wpcf7-response-output,
body.mex-forms-2026 div.wpcf7 form.invalid .wpcf7-response-output {
    background: #fdf3f4;
    border-color: #f0d3d6;
    border-left-color: var(--mex-red, #ce1126);
    color: var(--mex-ink, #191919);
}
/* Unaccepted / spam / send-failed → amber accent bar, sand tint, black text. */
body.mex-forms-2026 div.wpcf7 form.unaccepted .wpcf7-response-output,
body.mex-forms-2026 div.wpcf7 form.spam .wpcf7-response-output,
body.mex-forms-2026 div.wpcf7 form.failed .wpcf7-response-output,
body.mex-forms-2026 div.wpcf7.wpcf7-spam-blocked .wpcf7-response-output,
body.mex-forms-2026 div.wpcf7.wpcf7-mail-sent-ng .wpcf7-response-output {
    background: var(--mex-tint-sand, #FBF3E4);
    border-color: #ecdcbd;
    border-left-color: var(--mex-gold-dark, #C77400);
    color: var(--mex-ink, #191919);
}

/* The client's custom "max 2 locations" helper (inserted by theme JS). */
body.mex-forms-2026 div.wpcf7 .form_error_max_3 {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--mex-red, #ce1126);
}

/* ── flatpickr calendar (brand-themed) ─────────────────────────────────────
   Scoped to .mex-flatpickr (added in mex-forms.js) so it can't affect any
   other date picker on the site. The calendar is appended to <body>, i.e.
   OUTSIDE body.mex-forms-2026's normal descendants, so these rules are NOT
   prefixed with that class — the .mex-flatpickr hook is our scope. */
.mex-flatpickr.flatpickr-calendar {
    font-family: 'Open Sans', Arial, sans-serif;
    border: 1px solid var(--mex-border, #e7e3df);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    background: #fff;
}
.mex-flatpickr.flatpickr-calendar.arrowTop:before,
.mex-flatpickr.flatpickr-calendar.arrowTop:after { border-bottom-color: #fff; }
.mex-flatpickr.flatpickr-calendar.arrowBottom:before,
.mex-flatpickr.flatpickr-calendar.arrowBottom:after { border-top-color: #fff; }

/* Header: month/year + nav arrows */
.mex-flatpickr .flatpickr-months { padding: 6px 4px 2px; }
.mex-flatpickr .flatpickr-current-month .cur-month,
.mex-flatpickr .flatpickr-current-month input.cur-year {
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 600;
    color: var(--mex-ink, #191919);
}
.mex-flatpickr .flatpickr-months .flatpickr-month { color: var(--mex-ink, #191919); }
.mex-flatpickr .flatpickr-months .flatpickr-prev-month svg,
.mex-flatpickr .flatpickr-months .flatpickr-next-month svg { fill: var(--mex-grey, #6f6f6f); }
.mex-flatpickr .flatpickr-months .flatpickr-prev-month:hover svg,
.mex-flatpickr .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--mex-red, #ce1126); }

/* Weekday labels */
.mex-flatpickr span.flatpickr-weekday {
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: var(--mex-grey, #6f6f6f);
}

/* Day cells */
.mex-flatpickr .flatpickr-day {
    font-size: 14px;
    color: var(--mex-ink, #191919);
    border-radius: 7px;
    border-color: transparent;
}
.mex-flatpickr .flatpickr-day:hover,
.mex-flatpickr .flatpickr-day:focus {
    background: var(--mex-stone, #FAF9F7);
    border-color: var(--mex-border, #e7e3df);
}
.mex-flatpickr .flatpickr-day.today {
    border-color: var(--mex-gold, #E88B00);
}
.mex-flatpickr .flatpickr-day.today:hover {
    background: var(--mex-gold, #E88B00);
    color: #fff;
    border-color: var(--mex-gold, #E88B00);
}
.mex-flatpickr .flatpickr-day.selected,
.mex-flatpickr .flatpickr-day.selected:hover,
.mex-flatpickr .flatpickr-day.selected:focus {
    background: var(--mex-tint-sand, #FBF3E4);
    border-color: var(--mex-gold-dark, #C77400);
    color: var(--mex-ink, #191919);
}
.mex-flatpickr .flatpickr-day.flatpickr-disabled,
.mex-flatpickr .flatpickr-day.prevMonthDay,
.mex-flatpickr .flatpickr-day.nextMonthDay {
    color: #c9c4bd;
}

/* Calendar icon inside the (flatpickr alt) date field, so it's clear the field
   opens a calendar. Icon persists through the white focus state. */
body.mex-forms-2026 div.wpcf7 .wpcf7-form input.mex-date-input {
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236f6f6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 18px 18px !important;
    cursor: pointer;
}
body.mex-forms-2026 div.wpcf7 .wpcf7-form input.mex-date-input:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23C77400' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
}

/* Year dropdown (this year → +5) replacing the numeric roller, AND flatpickr's
   built-in month dropdown — styled identically: no fill, regular weight, a
   shared chevron. */
.mex-flatpickr .flatpickr-current-month .mex-fp-year,
.mex-flatpickr .flatpickr-current-month .flatpickr-monthDropdown-months {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: inherit;
    font-weight: 400;
    color: var(--mex-ink, #191919);
    background: transparent;
    border: 0;
    outline: none;
    box-shadow: none;
    padding: 0 20px 0 6px;
    margin: 0 0 0 2px;
    height: auto;
    line-height: 1.5;      /* was clipping the "g" descender in e.g. "August" */
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236f6f6f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
}
.mex-flatpickr .flatpickr-current-month .mex-fp-year:hover,
.mex-flatpickr .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background-color: transparent;
}
.mex-flatpickr .flatpickr-current-month .mex-fp-year:focus,
.mex-flatpickr .flatpickr-current-month .flatpickr-monthDropdown-months:focus {
    outline: none;
}
/* Give the header room so tall glyphs / descenders aren't clipped. */
.mex-flatpickr .flatpickr-current-month {
    height: auto;
    line-height: 1.5;
    padding-top: 2px;
}
/* Tidy the option list font. The open dropdown's highlight colour (the browser
   default blue on the selected/hovered item) is drawn by the browser and can't
   be reliably recoloured with CSS across browsers — left native by design. */
.mex-flatpickr .flatpickr-monthDropdown-months option,
.mex-flatpickr .flatpickr-current-month .mex-fp-year option {
    font-family: 'Open Sans', Arial, sans-serif;
    color: var(--mex-ink, #191919);
}

/* Clear button footer */
.mex-flatpickr .mex-fp-footer {
    display: flex;
    justify-content: flex-start;
    padding: 8px 12px 12px;
    border-top: 1px solid var(--mex-border, #e7e3df);
    margin-top: 4px;
}
.mex-flatpickr .mex-fp-clear {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--mex-red, #ce1126);
    background: none;
    border: 1px solid var(--mex-border, #e7e3df);
    border-radius: 7px;
    padding: 5px 14px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.mex-flatpickr .mex-fp-clear:hover {
    color: var(--mex-red-dark, #a50e1f);
    border-color: var(--mex-red, #ce1126);
    background: var(--mex-stone, #FAF9F7);
}

/* ── Post-submit success view (built by mex-forms.js) ──────────────────────
   When .wpcf7 gains .mex-submitted, hide the whole form and show only the
   .mex-success panel (green confirmation + Sand "what happens next" + actions). */
body.mex-forms-2026 div.wpcf7.mex-submitted .wpcf7-form > *:not(.mex-success),
body.mex-forms-2026 div.wpcf7.mex-submitted .screen-reader-response {
    display: none !important;
}
body.mex-forms-2026 div.wpcf7 .mex-success {
    display: block;
}

/* Green confirmation box: Semibold headline + the CF7 per-form message. */
body.mex-forms-2026 div.wpcf7 .mex-success-msg {
    padding: 18px 20px;
    background: #f1f8f2;
    border: 1px solid #cfe6d4;
    border-left: 3px solid var(--mex-green, #2e6b3b);
    border-radius: 8px;
}
body.mex-forms-2026 div.wpcf7 .mex-success-msg h2.mex-success-title {
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: var(--mex-ink, #191919);
    margin: 0 0 8px;
    padding: 0;
    border-top: 0;
}
body.mex-forms-2026 div.wpcf7 .mex-success-msg .mex-success-text {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.3 !important; /* beat theme .entry-content p line-height */
    color: var(--mex-ink, #191919);
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 400;
}

/* Action buttons — both Stone, with a Sand hover. */
body.mex-forms-2026 div.wpcf7 .mex-success-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}
body.mex-forms-2026 div.wpcf7 .mex-btn,
body.mex-forms-2026 div.wpcf7 a.mex-btn {
    display: inline-block;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    padding: 14px 24px;
    border-radius: 7px;
    cursor: pointer;
    text-decoration: none;
    color: var(--mex-ink, #191919);
    background: var(--mex-stone, #FAF9F7);
    border: 1px solid var(--mex-border, #e7e3df);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.mex-forms-2026 div.wpcf7 .mex-btn:hover,
body.mex-forms-2026 div.wpcf7 a.mex-btn:hover {
    color: var(--mex-ink, #191919);
    background: var(--mex-tint-sand, #FBF3E4);
    border-color: #ecdcbd;
}