/* ============================================================
   MEDICHPLUS — REGISTER CONTENT
   ============================================================
   CONTENT ONLY
   Based on the actual registration.php markup.
   DOES NOT STYLE THE GLOBAL NAVBAR.
   ============================================================ */


/* ------------------------------------------------------------
   REGISTRATION WRAPPER
   ------------------------------------------------------------ */
.mplus-registration-wrapper {

    --reg-navy: #0d2140;
    --reg-navy-2: #14315c;

    --reg-green: #3ea24a;
    --reg-green-dark: #2f8f3b;

    --reg-teal: #2596a3;
    --reg-teal-dark: #1e7f8c;

    --reg-bg: #f5f7f9;
    --reg-card: #ffffff;

    --reg-text: #132133;
    --reg-muted: #5d6875;

    --reg-border: #dfe6eb;

    max-width: 880px;

    margin: 35px auto 70px;

    padding: 0 24px;

    color: var(--reg-text);

    font-family: 'Inter', sans-serif;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
}


/* ------------------------------------------------------------
   BOX SIZING
   ------------------------------------------------------------ */

.mplus-registration-wrapper *,
.mplus-registration-wrapper *::before,
.mplus-registration-wrapper *::after {

    box-sizing: border-box;
}


/* ------------------------------------------------------------
   BACK LINK
   ------------------------------------------------------------ */

.mplus-registration-wrapper .mplus-back-link {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-bottom: 16px;

    color: var(--reg-teal-dark);

    font-size: 13px;

    font-weight: 750;

    text-decoration: none;

    transition:
        color .2s ease,
        transform .2s ease;
}

.mplus-registration-wrapper .mplus-back-link:hover {

    color: var(--reg-green-dark);

    transform: translateX(-4px);
}


/* ------------------------------------------------------------
   REGISTRATION HEADER
   ------------------------------------------------------------ */

.mplus-registration-header {

    position: relative;

    overflow: hidden;

    padding: 42px 38px;

    margin-bottom: 24px;

    border-radius: 22px;

    background:
        radial-gradient(
            100% 150% at 5% 0%,
            #1c477d 0%,
            var(--reg-navy) 56%,
            #09182e 100%
        );

    color: #fff;

    text-align: center;

    box-shadow:
        0 28px 60px -28px
        rgba(13,33,64,.58);

    animation:
        mplus-register-rise
        .65s
        cubic-bezier(.2,.7,.2,1)
        both;
}


/* Decorative glow */

.mplus-registration-header::before {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -100px;
    top: -160px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(62,162,74,.32),
            transparent 70%
        );

    animation:
        mplus-register-float
        8s
        ease-in-out
        infinite;
}

.mplus-registration-header::after {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    left: -100px;
    bottom: -120px;

    border-radius: 50%;

    background:
        rgba(37,150,163,.14);
}


/* ------------------------------------------------------------
   REGISTER LOGO
   ------------------------------------------------------------ */

.mplus-registration-header .mplus-login-logo {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 68px;
    height: 68px;

    margin: 0 auto 16px;

    border:
        1px solid
        rgba(255,255,255,.18);

    border-radius: 20px;

    background:
        rgba(255,255,255,.10);

    box-shadow:
        0 15px 30px -18px
        rgba(0,0,0,.5);

    font-size: 31px;

    backdrop-filter: blur(10px);

    animation:
        mplus-register-logo
        .7s
        .15s
        cubic-bezier(.2,.7,.2,1)
        both;
}


/* ------------------------------------------------------------
   HEADER TITLE
   ------------------------------------------------------------ */

.mplus-registration-header h2 {

    position: relative;

    z-index: 2;

    margin: 0 0 7px;

    color: #fff;

    font-family: 'Manrope', sans-serif;

    font-size:
        clamp(25px, 4vw, 34px);

    font-weight: 800;

    letter-spacing: -.025em;
}


/* ------------------------------------------------------------
   HEADER DESCRIPTION
   ------------------------------------------------------------ */

.mplus-registration-header p {

    position: relative;

    z-index: 2;

    margin: 0;

    color:
        rgba(255,255,255,.78);

    font-size: 14px;
}


/* ------------------------------------------------------------
   FORM
   ------------------------------------------------------------ */

.mplus-registration-wrapper form {

    position: relative;

    padding: 32px;

    border:
        1px solid
        var(--reg-border);

    border-radius: 20px;

    background: var(--reg-card);

    box-shadow:
        0 22px 50px -30px
        rgba(13,33,64,.44);

    animation:
        mplus-register-rise
        .65s
        .08s
        cubic-bezier(.2,.7,.2,1)
        both;
}


/* Left accent */

.mplus-registration-wrapper form::before {

    content: "";

    position: absolute;

    left: 0;

    top: 28px;

    bottom: 28px;

    width: 4px;

    border-radius:
        0 5px 5px 0;

    background:
        linear-gradient(
            180deg,
            var(--reg-green),
            var(--reg-teal)
        );
}


/* ------------------------------------------------------------
   FORM SECTION HEADINGS
   ------------------------------------------------------------ */

.mplus-registration-wrapper form h3 {

    position: relative;

    margin: 8px 0 21px;

    padding-bottom: 11px;

    color: var(--reg-navy);

    font-family: 'Manrope', sans-serif;

    font-size: 19px;

    font-weight: 800;

    letter-spacing: -.015em;

    border-bottom:
        1px solid
        var(--reg-border);
}


/* Section heading accent */

.mplus-registration-wrapper form h3::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -1px;

    width: 46px;

    height: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--reg-green),
            var(--reg-teal)
        );
}


/* First heading */

.mplus-registration-wrapper form h3:first-of-type {

    margin-top: 0;
}


/* ------------------------------------------------------------
   FORM FIELD PARAGRAPHS
   ------------------------------------------------------------ */

.mplus-registration-wrapper form > p {

    margin: 0 0 18px;

    padding: 0;
}


/* ------------------------------------------------------------
   LABELS
   ------------------------------------------------------------ */

.mplus-registration-wrapper form label {

    display: block;

    margin-bottom: 7px;

    color: var(--reg-navy);

    font-size: 13px;

    font-weight: 750;
}


/* ------------------------------------------------------------
   INPUTS / SELECT / TEXTAREA
   ------------------------------------------------------------ */

.mplus-registration-wrapper form input[type="text"],
.mplus-registration-wrapper form input[type="email"],
.mplus-registration-wrapper form input[type="password"],
.mplus-registration-wrapper form input[type="tel"],
.mplus-registration-wrapper form input[type="number"],
.mplus-registration-wrapper form input[type="url"],
.mplus-registration-wrapper form input[type="date"],
.mplus-registration-wrapper form select,
.mplus-registration-wrapper form textarea {

    display: block;

    width: 100%;

    min-height: 46px;

    padding: 11px 13px;

    border:
        1px solid
        var(--reg-border);

    border-radius: 11px;

    background: #fff;

    color: var(--reg-text);

    font-family: 'Inter', sans-serif;

    font-size: 14px;

    outline: none;

    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease,
        background .22s ease;
}


/* ------------------------------------------------------------
   TEXTAREA
   ------------------------------------------------------------ */

.mplus-registration-wrapper form textarea {

    min-height: 115px;

    resize: vertical;
}


/* ------------------------------------------------------------
   FILE UPLOAD
   ------------------------------------------------------------ */

.mplus-registration-wrapper form input[type="file"] {

    display: block;

    width: 100%;

    min-height: 48px;

    padding: 10px;

    border:
        1px dashed
        #cbd7de;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #fafcfc,
            #f5f8f9
        );

    color: var(--reg-muted);

    font-family: 'Inter', sans-serif;

    font-size: 13px;

    cursor: pointer;

    transition:
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

.mplus-registration-wrapper form input[type="file"]:hover {

    border-color:
        var(--reg-teal);

    background:
        #f5fbfa;

    box-shadow:
        0 8px 20px -16px
        rgba(37,150,163,.45);
}


/* ------------------------------------------------------------
   FILE BUTTON
   ------------------------------------------------------------ */

.mplus-registration-wrapper form
input[type="file"]::file-selector-button {

    margin-right: 10px;

    padding: 8px 13px;

    border: 0;

    border-radius: 8px;

    background:
        var(--reg-navy);

    color: #fff;

    font-family: 'Manrope', sans-serif;

    font-size: 12px;

    font-weight: 750;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}

.mplus-registration-wrapper form
input[type="file"]::file-selector-button:hover {

    background:
        var(--reg-teal-dark);

    transform:
        translateY(-1px);
}


/* ------------------------------------------------------------
   INPUT FOCUS
   ------------------------------------------------------------ */

.mplus-registration-wrapper form input:focus,
.mplus-registration-wrapper form select:focus,
.mplus-registration-wrapper form textarea:focus {

    border-color:
        var(--reg-teal);

    background: #fff;

    box-shadow:
        0 0 0 4px
        rgba(37,150,163,.10);

    transform:
        translateY(-1px);
}


/* ------------------------------------------------------------
   PLACEHOLDER
   ------------------------------------------------------------ */

.mplus-registration-wrapper form
input::placeholder,
.mplus-registration-wrapper form
textarea::placeholder {

    color: #9aa6b0;
}


/* ------------------------------------------------------------
   SELECT
   ------------------------------------------------------------ */

.mplus-registration-wrapper form select {

    cursor: pointer;
}


/* ------------------------------------------------------------
   SUBMIT AREA
   ------------------------------------------------------------ */

.mplus-registration-wrapper form > p:last-child {

    margin-top: 27px;

    padding-top: 23px;

    border-top:
        1px solid
        var(--reg-border);

    text-align: right;
}


/* ------------------------------------------------------------
   CREATE ACCOUNT BUTTON
   ------------------------------------------------------------ */

.mplus-registration-wrapper form button[type="submit"] {

    position: relative;

    overflow: hidden;

    min-height: 48px;

    padding: 12px 27px;

    border: 0;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            var(--reg-green),
            var(--reg-teal-dark)
        );

    color: #fff;

    font-family: 'Manrope', sans-serif;

    font-size: 13.5px;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 15px 30px -15px
        rgba(46,159,90,.65);

    transition:
        transform .24s ease,
        box-shadow .24s ease;
}


/* Button shine */

.mplus-registration-wrapper form
button[type="submit"]::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255,255,255,.28) 50%,
            transparent 80%
        );

    transform:
        translateX(-120%);

    transition:
        transform .65s ease;
}

.mplus-registration-wrapper form
button[type="submit"]:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 21px 36px -15px
        rgba(46,159,90,.78);
}

.mplus-registration-wrapper form
button[type="submit"]:hover::before {

    transform:
        translateX(120%);
}

.mplus-registration-wrapper form
button[type="submit"]:active {

    transform:
        translateY(-1px);
}


/* ============================================================
   REGISTRATION SUCCESS PAGE
   ============================================================ */

.mplus-registration-success {

    max-width: 900px;

    margin: 40px auto 70px;

    padding: 0 24px;

    font-family: 'Inter', sans-serif;

    color: var(--reg-text);
}


/* ------------------------------------------------------------
   SUCCESS CARD
   ------------------------------------------------------------ */

.mplus-registration-success
.mplus-success-card {

    position: relative;

    overflow: hidden;

    padding: 48px 42px;

    border:
        1px solid
        var(--reg-border);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fbfa
        );

    text-align: center;

    box-shadow:
        0 28px 60px -30px
        rgba(13,33,64,.45);

    animation:
        mplus-register-rise
        .7s
        cubic-bezier(.2,.7,.2,1)
        both;
}


/* Success decorative glow */

.mplus-registration-success
.mplus-success-card::before {

    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    left: -150px;
    top: -170px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(62,162,74,.14),
            transparent 70%
        );
}

.mplus-registration-success
.mplus-success-card::after {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -120px;
    bottom: -140px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(37,150,163,.13),
            transparent 70%
        );
}


/* ------------------------------------------------------------
   SUCCESS LOGO
   ------------------------------------------------------------ */

.mplus-success-logo {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 72px;
    height: 72px;

    margin: 0 auto 13px;

    border-radius: 21px;

    background:
        linear-gradient(
            135deg,
            var(--reg-navy),
            var(--reg-teal-dark)
        );

    color: #fff;

    font-size: 31px;

    box-shadow:
        0 18px 35px -19px
        rgba(13,33,64,.55);

    animation:
        mplus-register-logo
        .7s
        .15s
        cubic-bezier(.2,.7,.2,1)
        both;
}


/* ------------------------------------------------------------
   TAGLINE
   ------------------------------------------------------------ */

.mplus-success-tagline {

    position: relative;

    z-index: 2;

    margin-bottom: 18px;

    color:
        var(--reg-teal-dark);

    font-family: 'Manrope', sans-serif;

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .14em;
}


/* ------------------------------------------------------------
   SUCCESS CHECK
   ------------------------------------------------------------ */

.mplus-success-icon {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 66px;
    height: 66px;

    margin: 0 auto 20px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--reg-green),
            var(--reg-teal)
        );

    color: #fff;

    font-size: 30px;

    font-weight: 800;

    box-shadow:
        0 18px 35px -18px
        rgba(46,159,90,.65);

    animation:
        mplus-success-pop
        .65s
        .2s
        cubic-bezier(.2,1.5,.4,1)
        both;
}


/* ------------------------------------------------------------
   SUCCESS TITLE
   ------------------------------------------------------------ */

.mplus-success-card h1 {

    position: relative;

    z-index: 2;

    margin: 0 0 10px;

    color: var(--reg-navy);

    font-family: 'Manrope', sans-serif;

    font-size:
        clamp(26px, 4vw, 35px);

    font-weight: 800;

    letter-spacing: -.025em;
}


/* ------------------------------------------------------------
   SUCCESS TEXT
   ------------------------------------------------------------ */

.mplus-success-card > p {

    position: relative;

    z-index: 2;

    max-width: 680px;

    margin: 0 auto 15px;

    color: var(--reg-muted);

    font-size: 14px;

    line-height: 1.75;
}


/* ------------------------------------------------------------
   LEAD
   ------------------------------------------------------------ */

.mplus-success-card
.mplus-success-lead {

    color: var(--reg-navy);

    font-size: 16px;

    font-weight: 600;
}


/* ------------------------------------------------------------
   EMAIL BOX
   ------------------------------------------------------------ */

.mplus-success-email-box {

    position: relative;

    z-index: 2;

    max-width: 620px;

    margin: 27px auto;

    padding: 20px 22px;

    border:
        1px solid
        rgba(37,150,163,.18);

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #f3faf8,
            #f7fbfb
        );

    text-align: left;

    box-shadow:
        0 12px 27px -22px
        rgba(13,33,64,.35);
}

.mplus-success-email-box strong {

    display: block;

    margin-bottom: 6px;

    color:
        var(--reg-navy);

    font-family: 'Manrope', sans-serif;

    font-size: 13px;

    font-weight: 800;
}

.mplus-success-email-box p {

    margin: 0;

    color: var(--reg-muted);

    font-size: 12.5px;

    line-height: 1.6;
}


/* ------------------------------------------------------------
   THANK YOU
   ------------------------------------------------------------ */

.mplus-success-card
.mplus-success-thank-you {

    margin-top: 22px;

    color:
        var(--reg-navy);

    font-size: 13.5px;

    font-weight: 500;
}


/* ------------------------------------------------------------
   SUCCESS BUTTON AREA
   ------------------------------------------------------------ */

.mplus-success-actions {

    position: relative;

    z-index: 2;

    margin-top: 27px;
}


/* ------------------------------------------------------------
   SUCCESS BUTTON
   ------------------------------------------------------------ */

.mplus-success-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 47px;

    padding: 11px 25px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            var(--reg-green),
            var(--reg-teal-dark)
        );

    color: #fff !important;

    font-family: 'Manrope', sans-serif;

    font-size: 13px;

    font-weight: 800;

    text-decoration: none;

    box-shadow:
        0 15px 30px -15px
        rgba(46,159,90,.65);

    transition:
        transform .23s ease,
        box-shadow .23s ease;
}

.mplus-success-button:hover {

    transform:
        translateY(-3px);

    color: #fff !important;

    box-shadow:
        0 21px 37px -15px
        rgba(46,159,90,.75);
}


/*