/* =========================================================
   CLIENT PAGE
========================================================= */

body {
    margin: 0;
    min-height: 100vh;

    font-family:
        "Segoe UI Historic",
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    background:
        linear-gradient(
            135deg,
            #f4fbf3 0%,
            #ffffff 48%,
            #eef8ea 100%
        );

    color: #1d1d1f;
}


/* =========================================================
   FORCE CLIENT PAGE TO USE SAME FONT
========================================================= */

.client-registration-page,
.client-registration-page input,
.client-registration-page select,
.client-registration-page button,
.client-registration-page textarea,
.client-registration-page label {
    font-family:
        "Segoe UI Historic",
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
}


/* =========================================================
   MAIN TWO COLUMN PAGE
========================================================= */

.client-registration-page {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(440px, 0.85fr);

    width: min(1500px, 100%);
    min-height: 100vh;

    margin: 0 auto;

    background: #f7fbf5;
}


/* =========================================================
   LEFT PROMO
========================================================= */

.client-promo {
    position: relative;

    min-height: 850px;

    padding:
        48px
        45px
        50px;

    overflow: hidden;

    box-sizing: border-box;

    background:
        linear-gradient(
            135deg,
            #f6faef,
            #ffffff 55%,
            #edf8e9
        );
}


.client-promo-content {
    width: 100%;
    max-width: 760px;

    margin: 0 auto;
}


/* =========================================================
   MAIN PROMO HEADING
========================================================= */

.client-promo-copy {
    text-align: center;
}


.client-promo-copy h1 {
    margin:
        0
        0
        12px;

    color: #111827;

    font-family:
        "Segoe UI Historic",
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        clamp(
            40px,
            4vw,
            64px
        );

    line-height: 0.98;

    font-weight: 900;

    letter-spacing: -2px;
}


.client-promo-copy h1 span {
    display: block;

    color: #08752f;
}


.client-promo-copy p {
    margin:
        0
        auto
        22px;

    color: #252d27;

    font-size: 18px;

    line-height: 1.4;

    font-weight: 500;
}


/* =========================================================
   SERVICE NOTE
========================================================= */

.client-service-note {
    width: fit-content;

    margin:
        0
        auto
        18px;

    padding:
        7px
        14px;

    border-radius: 30px;

    background: #edf8ee;

    color: #08752f;

    font-size: 14px;

    font-weight: 700;

    text-align: center;
}


/* =========================================================
   GIFT PANEL
========================================================= */

.client-gift-box {
    padding: 18px;

    border:
        1px solid
        #f4e5a6;

    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            #fffce4,
            #fff4c6
        );

    box-shadow:
        0
        10px
        30px
        rgba(
            94,
            85,
            27,
            0.08
        );
}


.client-gift-heading {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    color: #172319;

    text-align: center;
}


.client-gift-icon {
    font-size: 34px;
}


.client-gift-heading > strong {
    font-size: 28px;

    font-weight: 900;

    line-height: 1.1;
}


.client-gift-heading strong span {
    color: #e21e17;
}


/* =========================================================
   GIFT DESCRIPTION
========================================================= */

.client-gift-description {
    max-width: 620px;

    margin:
        7px
        auto
        15px;

    color: #444c46;

    font-size: 12px;

    line-height: 1.4;

    text-align: center;
}


/* =========================================================
   GIFT ITEMS
========================================================= */

.client-gift-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 10px;
}


.client-gift-item {
    padding:
        12px
        8px;

    border-radius: 14px;

    background: #ffffff;

    text-align: center;
}


.client-gift-item img {
    width: 100%;
    height: 110px;

    margin-bottom: 8px;

    object-fit: contain;
}


.client-gift-item strong {
    display: block;

    color: #151b16;

    font-size: 14px;

    line-height: 1.2;

    font-weight: 800;
}


.client-gift-item span {
    display: block;

    margin-top: 4px;

    color: #555d56;

    font-size: 11px;

    line-height: 1.3;
}


/* =========================================================
   BONUS
========================================================= */

.client-bonus {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 12px;

    padding:
        11px
        14px;

    border-radius: 10px;

    background:
        rgba(
            255,
            255,
            255,
            0.72
        );

    color: #172319;

    text-align: center;

    font-size: 14px;
}


.client-bonus strong {
    font-weight: 800;
}


.client-bonus strong span {
    color: #d90000;
}


.client-bonus-icon {
    font-size: 22px;
}


/* =========================================================
   BENEFITS
========================================================= */

.client-benefits {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;

    margin-top: 25px;
}


.client-benefit {
    text-align: center;
}


.client-benefit-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin:
        0
        auto
        8px;

    border-radius: 50%;

    background: #dff3dd;

    font-size: 27px;
}


.client-benefit strong {
    display: block;

    margin-bottom: 4px;

    color: #101d14;

    font-size: 14px;

    line-height: 1.1;
}


.client-benefit span {
    display: block;

    color: #455049;

    font-size: 11px;

    line-height: 1.25;
}


/* =========================================================
   POST ENQUIRY CTA
========================================================= */

.client-promo-cta {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 18px;

    width: min(520px, 90%);

    min-height: 58px;

    margin:
        26px
        auto
        5px;

    padding:
        0
        25px;

    box-sizing: border-box;

    border-radius: 50px;

    background:
        linear-gradient(
            90deg,
            #ff5b16,
            #ff761a
        );

    color: #ffffff;

    font-size: 22px;

    font-weight: 900;

    box-shadow:
        0
        8px
        22px
        rgba(
            255,
            91,
            22,
            0.20
        );
}


.client-promo-cta span {
    font-size: 34px;

    line-height: 1;
}


.client-promo-cta-note {
    color: #272d29;

    font-size: 12px;

    font-weight: 700;

    text-align: center;
}


/* =========================================================
   REGISTRATION CARD
========================================================= */

.client-registration-page .login-container {
    align-self: start;

    width: calc(100% - 32px);

    max-width: none;

    margin:
        20px
        16px
        20px
        0;

    padding:
        24px
        30px
        22px;

    box-sizing: border-box;

    background: #ffffff;

    border:
        1px solid
        #e4e7e4;

    border-radius: 18px;

    box-shadow:
        0
        18px
        50px
        rgba(
            0,
            76,
            35,
            0.10
        );
}


/* =========================================================
   REGISTRATION HEADING
========================================================= */

.login-container h2 {
    margin:
        0
        0
        5px;

    color: #0a331d;

    font-family:
        "Segoe UI Historic",
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 27px;

    line-height: 1.15;

    font-weight: 800;
}


.login-container h2::before {
    content: "🙋";

    margin-right: 10px;

    font-size: 25px;
}


.login-container .description {
    margin:
        0
        0
        18px;

    color: #555f58;

    font-size: 13px;

    line-height: 1.4;
}


/* =========================================================
   FORM SECTION HEADINGS
========================================================= */

#registerForm h4 {
    display: flex;

    align-items: center;

    gap: 9px;

    margin:
        18px
        0
        12px;

    color: #172319;

    font-size: 17px;

    line-height: 1.2;

    font-weight: 800;
}


#registerForm h4:first-of-type {
    margin-top: 0;
}


#registerForm h4::before {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    border-radius: 50%;

    background: #08752f;

    color: #ffffff;

    font-size: 15px;

    font-weight: 800;
}


#registerForm h4:nth-of-type(1)::before {
    content: "1";
}


#registerForm h4:nth-of-type(2)::before {
    content: "2";
}


.terms-section h4::before {
    content: "3" !important;
}


/* =========================================================
   LABELS
========================================================= */

#registerForm > label,
.client-form-field > label {
    display: block;

    margin:
        0
        0
        4px;

    color: #1d261f;

    font-size: 12px;

    font-weight: 700;
}


/* =========================================================
   INPUTS
========================================================= */

#registerForm input[type="text"],
#registerForm input[type="email"],
#registerForm input[type="password"],
#registerForm input[type="tel"],
#registerForm select {
    width: 100%;

    min-height: 40px;

    margin:
        0
        0
        10px;

    padding:
        8px
        11px;

    box-sizing: border-box;

    border:
        1px solid
        #cfd5d0;

    border-radius: 7px;

    background: #ffffff;

    color: #202420;

    font-family: inherit;

    font-size: 13px;

    outline: none;
}


#registerForm input:focus,
#registerForm select:focus {
    border-color: #0b8738;

    box-shadow:
        0
        0
        0
        3px
        rgba(
            11,
            135,
            56,
            0.10
        );
}


/* =========================================================
   CLIENT FORM ROW
========================================================= */

.client-form-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 14px;

    width: 100%;
}


.client-form-field {
    min-width: 0;
}


/* =========================================================
   MOBILE NUMBER
========================================================= */

.mobile-row {
    display: grid;

    grid-template-columns:
        100px
        minmax(0, 1fr);

    gap: 8px;

    width: 100%;
}


.mobile-row select,
.mobile-row input {
    margin-bottom: 10px !important;
}


/* =========================================================
   INFO ICON
========================================================= */

.info-icon {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 17px;
    height: 17px;

    margin-left: 4px;

    border-radius: 50%;

    background: #758079;

    color: #ffffff;

    font-size: 11px;

    font-weight: 700;

    cursor: help;
}


.info-icon .tooltip {
    visibility: hidden;

    opacity: 0;

    position: absolute;

    z-index: 30;

    bottom: calc(100% + 9px);

    left: 50%;

    width: 240px;

    padding: 10px;

    transform:
        translateX(-50%);

    border-radius: 8px;

    background: #172019;

    color: #ffffff;

    font-size: 12px;

    font-weight: 400;

    line-height: 1.45;
}


.info-icon:hover .tooltip {
    visibility: visible;

    opacity: 1;
}


/* =========================================================
   DIVIDER
========================================================= */

#registerForm hr {
    height: 1px;

    margin:
        8px
        0
        14px;

    border: 0;

    background: #eaeeeb;
}


/* =========================================================
   TERMS
========================================================= */

.terms-section {
    margin-top: 0;
}


.terms-section h4 {
    margin-bottom: 10px;
}


.terms-box {
    max-height: 105px;

    overflow-y: auto;

    padding:
        10px
        12px;

    border:
        1px solid
        #dfe5df;

    border-radius: 9px;

    background: #f7f9f7;

    color: #5e655f;

    font-size: 10px;

    line-height: 1.4;
}


.terms-box p {
    margin:
        0
        0
        7px;
}


.terms-links {
    text-align: center;
}


.terms-links a {
    color: #1268c4;

    text-decoration: none;

    font-weight: 700;
}


/* =========================================================
   TERMS CHECKBOX
========================================================= */

.terms-checkbox {
    display: flex;

    align-items: flex-start;

    gap: 7px;

    margin:
        9px
        0
        4px;

    color: #343a35;

    font-size: 10.5px;

    line-height: 1.35;

    cursor: pointer;
}


.terms-checkbox input {
    width: 15px !important;
    height: 15px !important;

    min-height: auto !important;

    flex: 0 0 15px;

    margin:
        1px
        0
        0 !important;

    padding: 0 !important;

    accent-color: #08752f;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

#registerForm button[type="submit"] {

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    width: 100%;
    min-height: 54px;

    margin: 22px 0 0;

    padding: 14px 20px;

    border: 0;
    border-radius: 9px;

    background:
        linear-gradient(
            90deg,
            #087a31,
            #078937
        );

    color: #ffffff;

    font-family:
        "Segoe UI Historic",
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 16px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 7px 18px
        rgba(8, 122, 49, 0.20);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease;
}


/* Hover */

#registerForm button[type="submit"]:hover {

    transform: translateY(-1px);

    filter: brightness(1.05);

    box-shadow:
        0 9px 22px
        rgba(8, 122, 49, 0.28);
}


/* Click */

#registerForm button[type="submit"]:active {

    transform: translateY(0);

    box-shadow:
        0 4px 10px
        rgba(8, 122, 49, 0.18);
}


/* Keyboard Focus */

#registerForm button[type="submit"]:focus-visible {

    outline:
        3px solid
        rgba(8, 122, 49, 0.20);

    outline-offset: 3px;
}


/* =========================================================
   BUTTON ARROW
========================================================= */

#registerForm button[type="submit"]::after {
    content: "";

    width: 7px;
    height: 7px;

    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;

    transform: rotate(45deg);

    margin-left: 2px;

    transition:
        transform 0.15s ease;
}


/* Hover arrow movement */

#registerForm button[type="submit"]:hover::after {
    transform:
        translateX(3px)
        rotate(45deg);
}



/* =========================================================
   LOGIN TEXT
========================================================= */

.bottom-text {
    margin:
        12px
        0
        0;

    color: #555d57;

    font-size: 11px;

    text-align: center;
}


.bottom-text a {
    color: #08752f;

    font-weight: 700;

    text-decoration: none;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .client-registration-page {
        grid-template-columns: 1fr;
    }


    .client-promo {
        min-height: auto;

        padding:
            35px
            25px;
    }


    .client-registration-page .login-container {
        width:
            calc(
                100%
                -
                40px
            );

        margin:
            25px
            auto;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .client-promo {
        padding:
            28px
            16px;
    }


    .client-promo-copy h1 {
        font-size: 34px;

        letter-spacing: -1px;
    }


    .client-promo-copy p {
        font-size: 14px;
    }


    .client-gift-heading > strong {
        font-size: 21px;
    }


    .client-gift-grid {
        grid-template-columns: 1fr;
    }


    .client-gift-item img {
        height: 125px;
    }


    .client-benefits {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .client-registration-page .login-container {
        width: 100%;
        margin: 0;
    
        padding:
            24px
            18px
            28px;
    
        border: none !important;
        border-radius: 0;
        box-shadow: none;
    }


    .client-form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }


    #registerForm input[type="text"],
    #registerForm input[type="email"],
    #registerForm input[type="password"],
    #registerForm input[type="tel"],
    #registerForm select {
        min-height: 47px;

        font-size: 16px;
    }

}