/* form-buttons — makes a Ninja Forms SUBMIT button look and behave like the
   site's Elementor buttons. Opt-in.

   Add the class in  Ninja Forms → the submit field → Custom CSS Classes,
   or on any ancestor container (both work):

       mp-submit

   SCOPING — do not remove `.submit-wrap` from these selectors:
   Ninja Forms puts .submit-wrap on the submit field's wrapper only. Without it
   the rules match .nf-field-element inside EVERY field, and every text input in
   the form picks up the pill radius and overflow clipping.
   The :is() covers both placements — class on the submit wrap itself
   (.mp-submit.submit-wrap) or on a container above it (.mp-submit .submit-wrap).

   Base values measured 2026-09-01 from the live "Chat with us" button on
   /new-2026-shopify-website-design-development-in-singapore/ — an OUTLINED
   pill: transparent background, 1px #E2E8F0 border, #0B1A33 Poppins 700.
   Elementor generates that per widget, so it can't be inherited; it's mirrored.

   WHY THE SWEEP IS ON .nf-field-element AND NOT THE INPUT:
   <input> is a replaced element and renders no ::before/::after, so the
   .elementor-button:before technique in components.css does nothing if applied
   directly. The band goes on the wrapper and sits over the input.
   Added 2026-09-01. */

.mp-submit{
    --mp-btn-bg:    transparent;
    --mp-btn-fg:    #0B1A33;
    --mp-btn-bd:    #E2E8F0;
    --mp-btn-r:     999px;
    --mp-btn-pad:   15px 30px;

    --mp-btn-h-bg:  rgba(48, 152, 243, .08);
    --mp-btn-h-fg:  #3098F3;
    --mp-btn-h-bd:  #3098F3;
}

:is(.mp-submit.submit-wrap, .mp-submit .submit-wrap) .nf-field-element{
    position: relative;
    display: inline-block;              /* hug the button; remove for full-width */
    overflow: hidden;                   /* clips the band when parked off-screen */
    border-radius: var(--mp-btn-r);     /* must match the button, or corners leak */
}

:is(.mp-submit.submit-wrap, .mp-submit .submit-wrap) .nf-field-element
:is(input[type="submit"], input[type="button"], button[type="submit"]){
    display: block;
    width: 100%;
    background: var(--mp-btn-bg) !important;
    color: var(--mp-btn-fg) !important;
    border: 1px solid var(--mp-btn-bd) !important;
    border-radius: var(--mp-btn-r) !important;
    padding: var(--mp-btn-pad) !important;
    height: auto !important;
    font-family: "Outfit", sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 15px !important;
    letter-spacing: normal !important;
    text-transform: capitalize;
    text-align: center;
    cursor: pointer;
    transition: background 300ms ease, border-color 300ms ease, color 300ms ease;
}

:is(.mp-submit.submit-wrap, .mp-submit .submit-wrap) .nf-field-element:hover
:is(input[type="submit"], input[type="button"], button[type="submit"]){
    background: var(--mp-btn-h-bg) !important;
    border-color: var(--mp-btn-h-bd) !important;
    color: var(--mp-btn-h-fg) !important;
}

/* ---- shine sweep, identical to components.css:54 ---- */

:is(.mp-submit.submit-wrap, .mp-submit .submit-wrap) .nf-field-element::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;               /* load-bearing: else the band eats the click */
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 30%,
                                rgba(255, 255, 255, .25) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

:is(.mp-submit.submit-wrap, .mp-submit .submit-wrap) .nf-field-element:hover::before{
    transform: translateX(100%);
}

@media (prefers-reduced-motion: reduce){
    :is(.mp-submit.submit-wrap, .mp-submit .submit-wrap) .nf-field-element::before{
        transition: none;
    }
}