/* =========================================================
   PAGE BACKGROUND
========================================================= */

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;
}


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

.login-container {

    width: min(
        94%,
        720px
    );

    margin:
        50px
        auto;

    padding:
        34px
        38px
        30px;

    background: #ffffff;

    border:
        1px solid
        #e4e7e4;

    border-radius:
        20px;

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

    box-sizing:
        border-box;
}


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

.login-container h2 {

    margin:
        0
        0
        8px;

    font-size:
        30px;

    line-height:
        1.2;

    font-weight:
        800;

    color:
        #0a331d;
}


.login-container h2::before {

    content:
        "🤝";

    display:
        inline-block;

    margin-right:
        10px;

    font-size:
        27px;
}


.login-container .description {

    margin:
        0
        0
        28px;

    max-width:
        600px;

    font-size:
        15px;

    line-height:
        1.5;

    color:
        #555f58;
}


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

#registerForm h4 {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin:
        28px
        0
        18px;

    font-size:
        19px;

    line-height:
        1.2;

    font-weight:
        800;

    color:
        #172319;
}


#registerForm h4:first-of-type {

    margin-top:
        4px;
}


#registerForm h4::before {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        35px;

    height:
        35px;

    flex:
        0 0
        35px;

    border-radius:
        50%;

    background:
        #08752f;

    color:
        #ffffff;

    font-size:
        18px;

    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,
.form-group > label {

    display:
        block;

    margin:
        0
        0
        7px;

    font-size:
        14px;

    line-height:
        1.3;

    font-weight:
        700;

    color:
        #1d261f;
}


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

#registerForm input[type="text"],
#registerForm input[type="email"],
#registerForm input[type="password"],
#registerForm input[type="tel"],
#registerForm input[type="file"],
#registerForm select {

    width:
        100%;

    min-height:
        48px;

    margin:
        0
        0
        18px;

    padding:
        12px
        14px;

    border:
        1px solid
        #cfd5d0;

    border-radius:
        9px;

    box-sizing:
        border-box;

    background:
        #ffffff;

    color:
        #202420;

    font-family:
        inherit;

    font-size:
        14px;

    outline:
        none;

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


#registerForm input::placeholder {

    color:
        #999f9a;
}


#registerForm input:focus,
#registerForm select:focus {

    border-color:
        #0b8738;

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

    background:
        #ffffff;
}


/* =========================================================
   FILE INPUT
========================================================= */

#registerForm input[type="file"] {

    padding:
        8px
        10px;

    background:
        #fafbfa;
}


#registerForm input[type="file"]::file-selector-button {

    margin-right:
        12px;

    padding:
        8px
        12px;

    border:
        0;

    border-radius:
        6px;

    background:
        #edf3ee;

    color:
        #1b3122;

    font-weight:
        700;

    cursor:
        pointer;
}


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

.mobile-group {

    display:
        grid;

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

    gap:
        10px;

    width:
        100%;
}


.mobile-group select,
.mobile-group input {

    margin-bottom:
        18px !important;
}


.mobile-group select {

    width:
        100%;
}


/* =========================================================
   HELP TEXT
========================================================= */

.help-text {

    margin:
        -11px
        0
        14px;

    font-size:
        12px;

    line-height:
        1.45;

    color:
        #7b827d;
}


/* =========================================================
   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;

    transition:
        opacity
        0.18s ease;
}


.info-icon:hover .tooltip {

    visibility:
        visible;

    opacity:
        1;
}


/* =========================================================
   SUBCATEGORY SECTION
========================================================= */

#subcategory-section {

    margin:
        -2px
        0
        18px;

    padding:
        15px;

    border:
        1px solid
        #dce4dc;

    border-radius:
        10px;

    background:
        #f8fbf8;
}


#subcategory-section > label {

    margin-bottom:
        5px;
}


#subcategory-section .help-text {

    margin:
        0
        0
        10px;
}


.subcategory-list {

    display:
        grid;

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

    gap:
        8px
        12px;

    padding:
        0;

    margin:
        0;

    border:
        0;

    background:
        transparent;
}


.subcategory-item {

    display:
        flex;

    align-items:
        center;

    min-height:
        40px;

    padding:
        8px
        10px;

    border:
        1px solid
        #e1e8e2;

    border-radius:
        8px;

    background:
        #ffffff;

    font-size:
        13px;

    line-height:
        1.35;

    cursor:
        pointer;

    transition:
        border-color
        0.15s ease,
        background
        0.15s ease;
}


.subcategory-item:hover {

    border-color:
        #98cbaa;

    background:
        #f2faf4;
}


.subcategory-item input {

    width:
        16px !important;

    height:
        16px !important;

    min-height:
        auto !important;

    margin:
        0 !important;

    padding:
        0 !important;

    accent-color:
        #08752f;
}


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

#registerForm hr {

    height:
        1px;

    margin:
        8px
        0
        22px;

    border:
        0;

    background:
        #eaeeeb;
}


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

.terms-section {

    margin-top:
        4px;
}


.terms-section h4 {

    margin-bottom:
        14px;
}


.terms-box {

    max-height:
        160px;

    overflow-y:
        auto;

    padding:
        14px
        16px;

    border:
        1px solid
        #dfe5df;

    border-radius:
        9px;

    background:
        #f7f9f7;

    color:
        #5e655f;

    font-size:
        12px;

    line-height:
        1.55;

    scrollbar-width:
        thin;
}


.terms-box p {

    margin:
        0
        0
        10px;
}


.terms-box p:last-child {

    margin-bottom:
        0;
}


.terms-links {

    text-align:
        center;
}


.terms-links a {

    color:
        #1268c4;

    text-decoration:
        none;

    font-weight:
        700;
}


.terms-links a:hover {

    text-decoration:
        underline;
}


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

.terms-checkbox {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    margin:
        14px
        2px
        6px;

    color:
        #343a35;

    font-size:
        12.5px;

    line-height:
        1.45;

    cursor:
        pointer;
}


.terms-checkbox input {

    width:
        18px !important;

    height:
        18px !important;

    min-height:
        auto !important;

    flex:
        0
        0
        18px;

    margin:
        1px
        0
        0 !important;

    padding:
        0 !important;

    accent-color:
        #08752f;
}


/* =========================================================
   ERROR MESSAGE
========================================================= */

.error-message {

    margin:
        0
        0
        20px;

    padding:
        12px
        14px;

    border:
        1px solid
        #f1c3c3;

    border-radius:
        8px;

    background:
        #fff1f1;

    color:
        #a52121;

    font-size:
        13px;

    line-height:
        1.45;
}


/* =========================================================
   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;

    /* BUTTON FONT */
    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;
}


/* =========================================================
   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);
}


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

    transform:
        translateY(
            -1px
        );

    box-shadow:
        0
        10px
        24px
        rgba(
            8,
            122,
            49,
            0.25
        );

    filter:
        brightness(
            1.03
        );
}

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

    font-size: 12px;

    font-weight: 700;

    text-align: center;
}

/* =========================================================
   BOTTOM LOGIN
========================================================= */

.bottom-text {

    margin:
        17px
        0
        0;

    text-align:
        center;

    color:
        #555d57;

    font-size:
        13px;
}


.bottom-text a {

    color:
        #08752f;

    font-weight:
        700;

    text-decoration:
        none;
}


.bottom-text a:hover {

    text-decoration:
        underline;
}


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

@media (
    max-width:
    768px
) {

    .login-container {

        width:
            calc(
                100%
                -
                30px
            );

        margin:
            28px
            auto;

        padding:
            28px
            24px;
    }


    .login-container h2 {

        font-size:
            26px;
    }

}


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

@media (
    max-width:
    600px
) {

    body {

        background:
            #f6f8f6;
    }


    .login-container {

        width:
            100%;

        margin:
            0;

        padding:
            24px
            18px
            28px;

        border:
            0;

        border-radius:
            0;

        box-shadow:
            none;
    }


    .login-container h2 {

        font-size:
            24px;
    }


    .login-container .description {

        margin-bottom:
            23px;

        font-size:
            14px;
    }


    #registerForm h4 {

        margin-top:
            24px;

        font-size:
            18px;
    }


    #registerForm input[type="text"],
    #registerForm input[type="email"],
    #registerForm input[type="password"],
    #registerForm input[type="tel"],
    #registerForm input[type="file"],
    #registerForm select {

        min-height:
            54px;

        font-size:
            16px;
    }


    .mobile-group {

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

        gap:
            8px;
    }


    .subcategory-list {

        grid-template-columns:
            1fr;
    }


    .terms-box {

        max-height:
            140px;
    }

}

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

.vendor-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
========================================================= */

.vendor-promo {
    position: relative;

    min-height: 900px;

    padding:
        50px
        40px
        150px
        270px;

    overflow: hidden;

    box-sizing: border-box;

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


.vendor-promo-content {
    position: relative;
    z-index: 3;
}


.vendor-promo-copy h1 {
    margin: 0 0 15px;

    color: #07391d;

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

    line-height: 0.98;

    font-weight: 900;
}


.vendor-promo-copy p {
    max-width: 580px;

    margin: 0 0 30px;

    color: #29352d;

    font-size: 18px;

    line-height: 1.4;
}


/* =========================================================
   PERSON
========================================================= */

.vendor-person-image {
    position: absolute;

    z-index: 2;

    left: 0;
    bottom: 0;

    width: 400px;
    max-height: 100%;

    object-fit: contain;
    object-position: bottom left;

    pointer-events: none;
}


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

.vendor-benefits {
    display: grid;

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

    gap: 12px;

    margin-bottom: 25px;
}


.vendor-benefit {
    text-align: center;

    font-size: 13px;
}


.vendor-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: 29px;
}


.vendor-benefit strong {
    display: block;

    margin-bottom: 4px;

    color: #101d14;

    font-size: 14px;

    line-height: 1.1;
}


.vendor-benefit span {
    display: block;

    color: #455049;

    font-size: 11px;

    line-height: 1.25;
}


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

.vendor-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);
}


.vendor-gift-heading {
    display: flex;

    align-items: center;

    gap: 10px;

    color: #172319;

    font-size: 24px;
}


.vendor-gift-heading > strong {
    font-size: 26px;
}


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


.vendor-gift-box > p {
    margin:
        2px
        0
        15px
        48px;

    color: #323932;

    font-size: 13px;
}


/* =========================================================
   GIFTS
========================================================= */

.vendor-gift-grid {
    display: grid;

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

    gap: 10px;
}


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

    border-radius: 14px;

    background: #ffffff;

    text-align: center;
}


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

    object-fit: contain;

    margin-bottom: 8px;
}


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

    color: #151b16;

    font-size: 14px;

    line-height: 1.2;
}


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

    margin-top: 4px;

    color: #555d56;

    font-size: 11px;
}


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

.vendor-bonus {
    margin-top: 12px;

    padding: 11px 14px;

    border-radius: 10px;

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

    text-align: center;

    font-size: 14px;
}


.vendor-bonus span {
    color: #d90000;
}


/* =========================================================
   SKYLINE
========================================================= */

.vendor-skyline {
    position: absolute;

    z-index: 1;

    right: 0;
    bottom: 0;

    width: 78%;

    max-height: 145px;

    object-fit: contain;

    object-position: bottom center;

    opacity: 0.95;

    pointer-events: none;
}


/* =========================================================
   RIGHT FORM
========================================================= */

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

    width:
        calc(
            100%
            -
            36px
        );

    max-width: none;

    margin:
        28px
        18px
        28px
        0;
}


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

@media (max-width: 1100px) {

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


    .vendor-promo {
        min-height: auto;

        padding:
            40px
            30px
            150px
            230px;
    }


    .vendor-person-image {
        width: 270px;
    }


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

        margin:
            25px
            auto;
    }

}


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

@media (max-width: 700px) {

    .vendor-promo {
        padding:
            30px
            18px
            30px;

        text-align: center;
    }


    .vendor-person-image {
        position: relative;

        left: auto;
        bottom: auto;

        display: block;

        width: 220px;

        margin:
            15px
            auto
            0;
    }


    .vendor-skyline {
        display: none;
    }


    .vendor-promo-copy h1 {
        font-size: 36px;
    }


    .vendor-promo-copy p {
        margin:
            0
            auto
            24px;

        font-size: 15px;
    }


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


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


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


    .vendor-gift-box > p {
        margin:
            5px
            0
            14px;
    }


    .vendor-gift-heading {
        justify-content: center;
    }


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

}

/* =========================================================
   COMPACT DESKTOP REGISTRATION FORM
========================================================= */

@media (min-width: 901px) {

    /*
    |----------------------------------------------------------
    | Registration card
    |----------------------------------------------------------
    */

    .vendor-registration-page .login-container {
        width: calc(100% - 32px);
        margin: 20px 16px 20px 0;

        padding: 24px 30px 22px;

        border-radius: 18px;
    }


    /*
    |----------------------------------------------------------
    | Main title
    |----------------------------------------------------------
    */

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

        font-size: 27px;
        line-height: 1.15;
    }


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

        font-size: 13px;
        line-height: 1.4;
    }


    /*
    |----------------------------------------------------------
    | Section headings
    |----------------------------------------------------------
    */

    #registerForm h4 {
        margin: 18px 0 12px;

        font-size: 17px;
    }


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


    #registerForm h4::before {
        width: 30px;
        height: 30px;

        flex: 0 0 30px;

        font-size: 15px;
    }


    /*
    |----------------------------------------------------------
    | Labels
    |----------------------------------------------------------
    */

    #registerForm > label,
    .form-group > label {
        margin-bottom: 4px;

        font-size: 12px;
    }


    /*
    |----------------------------------------------------------
    | Inputs / Select
    |----------------------------------------------------------
    */

    #registerForm input[type="text"],
    #registerForm input[type="email"],
    #registerForm input[type="password"],
    #registerForm input[type="tel"],
    #registerForm input[type="file"],
    #registerForm select {

        min-height: 40px;

        margin-bottom: 10px;

        padding: 8px 11px;

        border-radius: 7px;

        font-size: 13px;
    }


    /*
    |----------------------------------------------------------
    | File input
    |----------------------------------------------------------
    */

    #registerForm input[type="file"] {
        padding: 5px 7px;
    }


    #registerForm input[type="file"]::file-selector-button {
        padding: 6px 10px;

        font-size: 12px;
    }


    /*
    |----------------------------------------------------------
    | Help text
    |----------------------------------------------------------
    */

    .help-text {
        margin: -5px 0 9px;

        font-size: 10.5px;
        line-height: 1.35;
    }


    /*
    |----------------------------------------------------------
    | Mobile number
    |----------------------------------------------------------
    */

    .mobile-group {
        grid-template-columns: 100px minmax(0, 1fr);

        gap: 8px;
    }


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


    /*
    |----------------------------------------------------------
    | Subcategory area
    |----------------------------------------------------------
    */

    #subcategory-section {
        margin: 0 0 10px;

        padding: 10px;
    }


    #subcategory-section .help-text {
        margin-bottom: 7px;
    }


    .subcategory-list {
        gap: 6px 8px;
    }


    .subcategory-item {
        min-height: 32px;

        padding: 5px 8px;

        font-size: 11px;
    }


    /*
    |----------------------------------------------------------
    | Divider
    |----------------------------------------------------------
    */

    #registerForm hr {
        margin: 8px 0 14px;
    }


    /*
    |----------------------------------------------------------
    | Terms
    |----------------------------------------------------------
    */

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


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


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

        padding: 10px 12px;

        font-size: 10px;
        line-height: 1.4;
    }


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


    .terms-checkbox {
        margin: 9px 0 4px;

        gap: 7px;

        font-size: 10.5px;
        line-height: 1.35;
    }


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

        flex: 0 0 15px;
    }


    /*
    |----------------------------------------------------------
    | Login text
    |----------------------------------------------------------
    */

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

        font-size: 11px;
    }

}


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

@media (max-width: 700px) {

    /*
    | Completely hide the woman image
    */

    .vendor-person-image {
        display: none !important;
    }


    /*
    | Remove unnecessary space created for image
    */

    .vendor-promo {
        min-height: auto !important;

        padding:
            26px
            18px
            24px !important;
    }


    /*
    | Make promotional section tighter
    */

    .vendor-promo-copy h1 {
        font-size: 31px;
        line-height: 1;
    }


    .vendor-promo-copy p {
        margin-bottom: 20px;

        font-size: 14px;
    }


    /*
    | Registration form
    */

    .vendor-registration-page .login-container {
        width: 100%;

        margin: 0;

        padding:
            24px
            18px
            28px;

        border-radius: 0;
    }

}

/* =========================================================
   DESKTOP FORM ROWS
========================================================= */

@media (min-width: 901px) {

    .vendor-form-row {
        display: grid;

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

        gap: 14px;

        width: 100%;
    }


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


    .vendor-form-field > label {
        display: block;

        margin: 0 0 4px;

        font-size: 12px;
        font-weight: 700;

        color: #1d261f;
    }


    .vendor-form-field input,
    .vendor-form-field select {
        width: 100%;

        box-sizing: border-box;
    }


    /*
     * Remove excessive bottom gap from fields
     * inside a two-column row.
     */

    .vendor-form-row
    .vendor-form-field
    input,
    .vendor-form-row
    .vendor-form-field
    select {

        margin-bottom: 10px;
    }


    /*
     * Industry remains full width
     */

    .vendor-form-full {
        width: 100%;
    }

}


/* =========================================================
   MOBILE - STACK EVERYTHING
========================================================= */

@media (max-width: 900px) {

    .vendor-form-row {
        display: block;
    }


    .vendor-form-field {
        width: 100%;
    }

}


/* Hide vendor woman on mobile */
@media (max-width: 700px) {

    .vendor-person-image {
        display: none !important;
    }

}