/* ALCANCE Sign Up — final visual corrections v3, 2026-09-30. */

/*
 * Keep the registration surface clean. Decorative travel artwork lives only
 * around the 1140px experience, never behind controls, progress steps or text.
 */
body.mp-signup-page .mp-client-signup-shell,
body.mp-signup-page .mp-prof-signup-shell,
body.mp-signup-page .mp-client-signup-shell.is-elementor-component,
body.mp-signup-page .mp-prof-signup-shell.is-elementor-component {
    position: relative !important;
    isolation: isolate !important;
    background-color: #F4F9FD !important;
    background-image:
        /* small plane in the outer top-right atmosphere */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 150'%3E%3Cpath fill='%2349B5E7' opacity='.22' d='M37 74l45 12 88-43 12 8-68 54 31 31-12 7-42-25-29 16-10-8 17-28-45-14z'/%3E%3C/svg%3E"),
        /* mountains bottom-left */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 260'%3E%3Cg fill='none' stroke='%2349B5E7' stroke-width='3' opacity='.18'%3E%3Cpath d='M-20 235 95 122l82 70 92-105 132 148'/%3E%3Cpath opacity='.62' d='M12 250 118 168l78 48 86-68 108 95'/%3E%3C/g%3E%3C/svg%3E"),
        /* softer mountains bottom-right */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 270'%3E%3Cg fill='none' stroke='%2382BD41' stroke-width='3' opacity='.10'%3E%3Cpath d='M70 245 170 138l86 72 96-118 139 153'/%3E%3Cpath opacity='.6' d='M118 257 210 185l76 49 88-73 110 96'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(145deg, #F8FBFF 0%, #EEF6FB 100%) !important;
    background-size: 230px 145px, 440px 220px, 470px 225px, cover !important;
    background-position:
        right 34px top 20px,
        left -70px bottom 4px,
        right -95px bottom 10px,
        center center !important;
    background-repeat: no-repeat !important;
}

/* Remove the old oversized plane/palm layer completely. */
body.mp-signup-page .mp-client-signup-shell::before,
body.mp-signup-page .mp-prof-signup-shell::before,
body.mp-signup-page .mp-client-signup-shell.is-elementor-component::before,
body.mp-signup-page .mp-prof-signup-shell.is-elementor-component::before,
body.mp-signup-page .mp-client-signup-shell::after,
body.mp-signup-page .mp-prof-signup-shell::after,
body.mp-signup-page .mp-client-signup-shell.is-elementor-component::after,
body.mp-signup-page .mp-prof-signup-shell.is-elementor-component::after {
    display: none !important;
    content: none !important;
}

/* The approved right column remains transparent, but nothing decorative is
   allowed to run through the user input area. */
body.mp-signup-page .mp-client-signup-shell .mp-cs-main,
body.mp-signup-page .mp-prof-signup-shell .mp-ps-main {
    position: relative !important;
    background: transparent !important;
    border: 1px solid rgba(137, 166, 195, .30) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.mp-signup-page .mp-client-signup-shell .mp-cs-main::before,
body.mp-signup-page .mp-prof-signup-shell .mp-ps-main::before,
body.mp-signup-page .mp-client-signup-shell .mp-cs-main::after,
body.mp-signup-page .mp-prof-signup-shell .mp-ps-main::after {
    display: none !important;
    content: none !important;
}

/* Fields stay calm and readable even on the transparent panel. */
body.mp-signup-page .mp-cs-field input,
body.mp-signup-page .mp-cs-field select,
body.mp-signup-page .mp-cs-code input,
body.mp-signup-page .mp-ps-field input,
body.mp-signup-page .mp-ps-field select,
body.mp-signup-page .mp-ps-field textarea,
body.mp-signup-page .mp-ps-code input {
    background: rgba(255,255,255,.94) !important;
}

/* The left image column may allow the account picker to escape without
   clipping the menu. */
body.mp-signup-page .mp-cs-intro,
body.mp-signup-page .mp-ps-intro {
    position: relative !important;
    overflow: visible !important;
    z-index: 20 !important;
}
body.mp-signup-page .mp-cs-intro::after,
body.mp-signup-page .mp-ps-intro::after {
    border-radius: inherit !important;
}

body.mp-signup-page .mp-client-signup,
body.mp-signup-page .mp-prof-signup,
body.mp-signup-page .mp-client-signup-shell,
body.mp-signup-page .mp-prof-signup-shell {
    overflow: visible !important;
}

/* Account selector always paints above the three benefit cards. */
body.mp-signup-page .mp-cs-professional,
body.mp-signup-page .mp-ps-switch {
    position: relative !important;
    z-index: 10000 !important;
    isolation: isolate !important;
}
body.mp-signup-page .mp-account-picker {
    position: relative !important;
    z-index: 10001 !important;
}
body.mp-signup-page .mp-account-picker-menu {
    z-index: 2147483000 !important;
    top: calc(100% + 6px) !important;
    bottom: auto !important;
    background: #FFFFFF !important;
    opacity: 1 !important;
    box-shadow: 0 18px 42px rgba(8,25,43,.24) !important;
}
body.mp-signup-page .mp-cs-benefits,
body.mp-signup-page .mp-ps-benefits,
body.mp-signup-page .mp-cs-benefits > div,
body.mp-signup-page .mp-ps-benefits > div {
    position: relative !important;
    z-index: 1 !important;
}

/* Canonical Client brand. Only the current ALCANCE identity is visible. */
body.mp-signup-page .mp-cs-brand {
    min-height: 74px !important;
    display: flex !important;
    align-items: center !important;
    background: none !important;
}
body.mp-signup-page .mp-cs-brand .mp-cs-identity-logo {
    display: inline-flex !important;
    align-items: center !important;
    width: 240px !important;
    max-width: 72% !important;
    height: 80px !important;
    background: none !important;
    text-decoration: none !important;
}
body.mp-signup-page .mp-cs-brand .mp-cs-identity-logo img {
    display: block !important;
    width: 100% !important;
    max-width: 240px !important;
    max-height: 80px !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
    opacity: 1 !important;
    visibility: visible !important;
}
body.mp-signup-page .mp-cs-brand .custom-logo-link,
body.mp-signup-page .mp-cs-brand .custom-logo,
body.mp-signup-page .mp-cs-brand > strong,
body.mp-signup-page .mp-cs-brand > small {
    display: none !important;
}

/* On narrower screens there is no safe outer gutter for decoration, so keep
   the form experience clean and reduce the artwork substantially. */
@media (max-width: 1320px) {
    body.mp-signup-page .mp-client-signup-shell,
    body.mp-signup-page .mp-prof-signup-shell,
    body.mp-signup-page .mp-client-signup-shell.is-elementor-component,
    body.mp-signup-page .mp-prof-signup-shell.is-elementor-component {
        background-size: 155px 98px, 300px 150px, 300px 145px, cover !important;
        background-position: right 12px top 12px, left -105px bottom 0, right -125px bottom 0, center center !important;
    }
}

@media (max-width: 960px) {
    body.mp-signup-page .mp-client-signup-shell,
    body.mp-signup-page .mp-prof-signup-shell,
    body.mp-signup-page .mp-client-signup-shell.is-elementor-component,
    body.mp-signup-page .mp-prof-signup-shell.is-elementor-component {
        background-image: linear-gradient(145deg, #F8FBFF 0%, #EEF6FB 100%) !important;
        background-size: cover !important;
        background-position: center !important;
    }
}

@media (max-width: 680px) {
    body.mp-signup-page .mp-cs-brand .mp-cs-identity-logo {
        width: 210px !important;
        height: 70px !important;
    }

    body.mp-signup-page .mp-client-signup-shell .mp-cs-main,
    body.mp-signup-page .mp-prof-signup-shell .mp-ps-main {
        background: transparent !important;
    }
}