/**
 * Bridge between CF7's markup and the theme's existing contact-form CSS.
 *
 * Deliberately minimal. The theme already styles this form in full - the grid, the
 * pill inputs, the #som-checkboxes panel with its checkbox sprites, the error text -
 * all keyed off the legacy DOM. The form body now reproduces that DOM (same fieldset
 * count and order, submit outside the fieldsets), so almost nothing is needed here.
 *
 * Only the things CF7 adds that the legacy markup never had are neutralised. Nothing
 * below restyles the form; anything that looks like styling belongs in the theme.
 */

/* CF7 wraps every control in this span. display:contents removes it from the box
   tree, so the theme's `fieldset > input` and sibling rules still match. */
.vari-cf7-form .wpcf7-form-control-wrap,
/* The second selector exists purely to win a specificity fight: the theme's
   `.privacy-and-submit-wrapper span { ... }`
   (0,2,1) also matches CF7's wrapper span and outranks the plain rule above (0,2,0).
   That turned the wrapper into an 80%-wide inline-block, so the consent text inside got
   80% of THAT and wrapped onto three lines. This selector is (0,3,1). */
.vari-cf7-form .privacy-and-submit-wrapper span.wpcf7-form-control-wrap {
    display: contents;
}

/* CF7's own state inputs. Re-tagged from fieldset to div in PHP so they do not shift
   the theme's fieldset:nth-of-type() numbering; hidden here so they take no space. */
.wpcf7-form .hidden-fields-container {
    display: none;
}

/* CF7's inline validation message. The theme styles .vari-error (13px, red, block)
   and knows nothing about this class, so match it rather than leave CF7's default
   block - which rendered as white text on a dark bar. */
.vari-cf7-form .wpcf7-not-valid-tip {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: red;
    background: none;
    border: 0;
    padding: 0;
    width: auto;
}

/* Hold the sending state through the redirect.
   CF7 resets the form as soon as the mail is sent, so the fields empty while the
   browser is still fetching the thank-you page - leaving a blank form on screen for
   as long as that navigation takes. Keeping the spinner up and the form inert until
   the page actually changes makes that read as "still working" rather than as
   something having gone wrong. */
/* Holding state during the redirect: the button keeps the theme's sending look,
   since CF7's spinner is not used at all here. cf7-forms.js leaves .is-sending on
   the button when a redirect is pending rather than clearing it on submit. */
form.vari-redirecting input[type="submit"] {
    pointer-events: none;
}

form.vari-redirecting .vari-cf7-form,
.vari-cf7-form.vari-redirecting {
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 150ms ease;
}

/* Keyboard focus must be visible - the picker is built from divs and would otherwise
   give no indication of where focus is. */
.vari-cf7-form .multi-checkbox:focus,
.vari-cf7-form .multi-checkbox:focus-visible {
    outline: 2px solid #ff5f46;
    outline-offset: -2px;
}

/* The consent checkbox must escape the theme's generic
   `.vari-contact-form input { width:100%; height:50px; border-radius:30px }` rule,
   which otherwise renders it as a full-width pill. */
.vari-cf7-form input[type="checkbox"] {
    /* 18px matches the platform-picker checkboxes the theme draws
       (#som-checkboxes .multi-checkbox:before), so the two read as one design. */
    width: 18px !important;
    height: 18px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 8px 0 0;
    border-radius: 2px !important;
    vertical-align: middle;
    flex: 0 0 auto;
}

/* The closed-state control for the platform picker. The panel itself, its checkbox
   sprites and its open/closed behaviour are all the theme's - see #som-checkboxes in
   style.css - so only the click target is defined here. */
.vari-cf7-form .vari-som-display {
    pointer-events: none;
}

.vari-cf7-form fieldset.som-multiselect {
    position: relative;
}

.vari-cf7-form fieldset.som-multiselect .overSelect {
    position: absolute;
    inset: 0;
    cursor: pointer;
    z-index: 3;
}

/* The tick colour. The theme uses accent-color #FF5F46 on its own checkboxes
   (style.css ~1820, ~8532) but keys those rules off selectors this markup does not
   match, so ours were rendering in the browser default blue. */
.vari-cf7-form input[type="checkbox"] {
    accent-color: #FF5F46;
}

/* NOTE: no font-family override here, deliberately.
   The theme's .newsletter-form input[type=submit] block declares font-family TWICE -
   'Montserrat' and then 'Roboto' further down the SAME rule - so the button has always
   been Roboto, the later declaration winning. Overriding it to Montserrat changed the
   button away from its original design rather than restoring it. The theme's rule
   already reaches our button; leave it alone. */

/* Newsletter errors: ONE summary line, not one per field. The footer form is compact -
   per-field tips push the inputs apart and wrap the consent row - and the original
   showed a single line under the form instead. The summary itself is styled further
   down, where it also has to fight the theme's global !important hide. */
.vari-newsletter-form .wpcf7-not-valid-tip {
    display: none;
}

/* THE LOADER.
   The legacy forms never used a separate spinner element - the theme puts the loader
   INSIDE the button, as a background image, whenever it carries .is-sending:

     [type="submit"].is-sending {
         background: #00E492 url(custom/ajax-loader.gif) center right 10px no-repeat !important;
     }

   That is why it always looked attached to the button: it IS the button. CF7's own
   spinner is a separate element appended after the submit, which is why no amount of
   margin ever seated it correctly. So CF7's spinner is hidden and cf7-forms.js puts
   .is-sending on the button instead, letting the theme's existing rule do the work -
   no loader styling is defined here. */
.vari-cf7-form .wpcf7-spinner {
    display: none !important;
}

/* Newsletter errors: one summary line, which the theme otherwise suppresses.
   `.wpcf7-response-output { display: none !important }` hides CF7's summary for the
   whole site, so showing it back for this one form needs !important too.

   Shown for failure states ONLY, listed explicitly. An earlier version did the
   opposite - visible by default, hidden for init/submitting/sent - and that leaked:
   after a successful send CF7 resets the form and sets a `resetting` status
   (index.js: `d(t), n(t,"resetting")`), which the hide list did not name, so the
   "It has been sent." text flashed up in the error slot for a frame before being
   cleared. The full status set is init, validating, submitting, resetting, sent,
   failed, invalid, unaccepted, spam, aborted and payment-required, plus `custom-*`
   for anything a plugin invents - too many to keep a hide list honest against, and it
   would break again the next time CF7 adds one.

   Success is deliberately not announced here: the theme has its own inline
   confirmation, swapped in by adding .is-successful to .newsletter-form-wrapper.
   Two thank-you messages were showing because this one was never meant to be one.

   The outlined box around the message is CF7's own - its
   `.wpcf7 form .wpcf7-response-output` border and padding outrank anything this
   selector can say without !important, and the state colours it swaps in (amber while
   invalid) suit the footer, so it is left alone rather than fought. */
.vari-newsletter-form.invalid .wpcf7-response-output,
.vari-newsletter-form.unaccepted .wpcf7-response-output,
.vari-newsletter-form.spam .wpcf7-response-output,
.vari-newsletter-form.aborted .wpcf7-response-output,
.vari-newsletter-form.failed .wpcf7-response-output {
    display: block !important;
    margin: 10px 0 0;
    font-size: 16px;
    font-style: italic;
    color: #fff;
}

.vari-newsletter-form.invalid .wpcf7-response-output::before,
.vari-newsletter-form.unaccepted .wpcf7-response-output::before,
.vari-newsletter-form.spam .wpcf7-response-output::before,
.vari-newsletter-form.aborted .wpcf7-response-output::before,
.vari-newsletter-form.failed .wpcf7-response-output::before {
    content: "\26A0 \FE0E ";
    font-style: normal;
    color: #F8CE60;
    margin-right: 10px;
}