/*
 * Contact Form 7 — closing the gaps between CF7's markup and the prototype's.
 *
 * [submit] renders as <input type="submit">, and a replaced element renders neither child elements
 * nor ::before/::after. That costs `.button--primary` its hover gradient, which style.css:489 does
 * with a ::before overlay. Rebuilt below as a background, which inputs do support.
 *
 * The newsletter's Subscribe also carries a chevron *inside* the button —
 * `<i class="fa fa-angle-right">`, sat next to the label by the button's own flex `gap: 10px`
 * (style.css:446). No background can follow centred text like that, so instead of a [submit] tag
 * that form uses the prototype's literal <button> markup, which CF7 supports: its JS binds to the
 * form's submit event, not to the button (includes/js/index.js). `has-spinner` on the button is
 * what tells CF7 to inject its spinner after it. The quote, offer and contact forms are <input
 * type="submit"> in the prototype too, so those keep [submit].
 *
 * Scoped to CF7 so nothing else on the site is touched — the prototype stylesheets belong to the
 * UI team.
 */

input.wpcf7-submit.button--primary {
    transition: var(--transition-default);
}

input.wpcf7-submit.button--primary:hover {
    background: linear-gradient(105deg, var(--theme) 17.706%, var(--gold-light) 82.494%) !important;
}

/*
 * The injected spinner is a flex child of .footer-newsletter (column, gap 14px) and is only
 * visibility:hidden when idle, so left alone it reserves a 24px row under the button. Lifted out of
 * flow and centred over the button's right edge instead: the button is 18px padding + a ~19px line
 * (style.css:446), so (55 - 24) / 2 ≈ 16px up from the form's bottom edge.
 */
.footer-newsletter {
    position: relative;
}

.footer-newsletter .wpcf7-spinner {
       position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    margin:0;
}

/* The response line sits below the form rather than pushing the layout around. */
/*
.wpcf7 .wpcf7-response-output {
    margin: 12px 0 0;
    padding: 8px 12px;
    font-size: 14px;
}
*/

/*
 * Some forms are flex containers — .contact-card form is display:flex so its .form-group50 children
 * sit two-up (areas.css:260). CF7 appends the response output as a direct child of the <form>, so
 * once a submit reveals it, it would become a flex item and try to share a row. flex-basis pins it
 * to its own full-width line; it is inert in the forms that are not flex.
 */
/*
.wpcf7 form .wpcf7-response-output {
    flex-basis: 100%;
}
*/

/* CF7's wrapper span is display:inline by default, which collapses full-width fields. */
/*
.wpcf7 .wpcf7-form-control-wrap {
    display: block;
}
*/

/* Validation messages, styled to the theme rather than CF7's defaults. */
/*
.wpcf7 .wpcf7-not-valid-tip {
    margin-top: 4px;
    color: #d63638;
    font-size: 13px;
}
*/

/*
 * Quote form (CF7 210) — the product fields at its head. The form is shared by every Request a
 * Quote button, so they are hidden unless the popup was opened from a product's add-to-cart area,
 * where assets/js/product-extras.js fills them and sets `has-product` (and `has-options` when a
 * variation was chosen) on #enquiryform.
 */
.enquiryform:not(.has-product) .quote-product-field,
.enquiryform:not(.has-options) .quote-options-field {
    display: none;
}

/*
 * Options and Quantity share a row. With no options (a simple product, or no size chosen yet) Quantity
 * would sit alone in a half-width slot and pull Name up beside it, shifting every pair below by one.
 */
.enquiryform:not(.has-options) .form-group.form-group50.quote-product-field {
    width: 100%;
}

.enquiryform .quote-product-field input[readonly] {
    cursor: default;
}

/*
 * "Product:" and "Qty:" sit inside the box, in front of the value, so the value itself stays clean for
 * the email (and Qty stays a number field). The group draws the box — .form-control's border, radius
 * and 56px height (style.css) — and the input inside it goes borderless. The display:none rules above
 * outrank this one, so a hidden field stays hidden.
 */
.enquiryform .quote-field {
    display: flex;
    align-items: center;
    gap: 0.25em; /* one space, as in "Size: 50MM" */
    height: 56px;
    padding: 0 20px;
    background: var(--white);
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    transition: all 0.5s ease-in-out;
}

.enquiryform .quote-field:focus-within {
    border-color: var(--theme);
}

/* Set like the value beside it, so "Product: …" reads the same as the Options box's "Size: …". */
.enquiryform .quote-field label {
    margin: 0;
    white-space: nowrap;
    font-weight: normal;
    color: var(--text-color);
}

.enquiryform .quote-field .wpcf7-form-control-wrap {
    flex: 1;
    min-width: 0;
}

.enquiryform .quote-field .form-control {
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}