/*
 * =========================================================
 * BESTB4 – PARTNER AUTHENTICATION
 * Version: 1.0
 *
 * Login
 * Registration
 *
 * Dependencies:
 * - bb4-framework.css
 *
 * =========================================================
 */


/*
 * =========================================================
 * 1. PAGE
 * =========================================================
 */

.bb4-partner-auth {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 100vh; 
    min-height: 100dvh;

    padding: 55px 20px;

    background: var(--bb4f-white);
}


/*
 * =========================================================
 * 2. CONTAINER
 * =========================================================
 */

.bb4-partner-auth__shell {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    width: 100%;
    max-width: 440px;

    margin-inline: auto;
}

.bb4-partner-auth__shell--register {
    max-width: 480px;
}


/*
 * =========================================================
 * 3. BRAND
 * =========================================================
 */

.bb4-partner-auth__brand {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 35px;
}

.bb4-partner-auth__logo {
    display: block;

    width: 205px;
    height: auto;
}


/*
 * =========================================================
 * 4. HEADER
 * =========================================================
 */

.bb4-partner-auth__header {
    margin-bottom: 28px;
}

.bb4-partner-auth__title {
    margin: 0 0 9px;

    color: var(--bb4f-text);

    font-size: clamp(1.5rem, 3vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.2;
}

.bb4-partner-auth__description {
    margin: 0;

    color: var(--bb4f-text-muted);

    font-size: 0.875rem;
    line-height: 1.7;
}


/*
 * =========================================================
 * 5. FORM
 * =========================================================
 */

.bb4-partner-auth__form {
    display: flex;
    flex-direction: column;

    gap: 19px;
}

.bb4-partner-auth__field {
    display: flex;
    flex-direction: column;

    gap: 8px;
    min-width: 0;
}

.bb4-partner-auth__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    flex-wrap: wrap;
    gap: 8px;
}

.bb4-partner-auth__label {
    color: var(--bb4f-text);

    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.5;
}


/*
 * =========================================================
 * 6. INPUTS
 * =========================================================
 */

.bb4-partner-auth__input {
    display: block;

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

    padding: 12px 15px;

    border: 1px solid #E0E0E0;
    border-radius: 12px;

    outline: none;

    background: #FFFFFF;
    color: var(--bb4f-text);

    font: inherit;
    font-size: 0.9rem;

    transition:
        border-color var(--bb4f-transition),
        box-shadow var(--bb4f-transition);
}

.bb4-partner-auth__input:hover {
    border-color: #C5C5C5;
}

.bb4-partner-auth__input:focus {
    border-color: var(--bb4f-black);

    box-shadow:
        0 0 0 3px rgb(245 235 41 / 25%);
}

.bb4-partner-auth__input.is-invalid {
    border-color: var(--bb4f-danger);
}


/*
 * =========================================================
 * 7. PASSWORD
 * =========================================================
 */

.bb4-partner-auth__password {
    position: relative;
}

.bb4-partner-auth__password .bb4-partner-auth__input {
    padding-right: 55px;
}

.bb4-partner-auth__password-toggle {
    position: absolute;

    top: 50%;
    right: 6px;

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

    width: 40px;
    height: 40px;

    padding: 10px;

    transform: translateY(-50%);

    border: 0;
    border-radius: 10px;

    background: transparent;
    color: #777777;

    cursor: pointer;
}

.bb4-partner-auth__password-toggle:hover {
    background: #F5F5F5;
}

.bb4-partner-auth__password-toggle img {
    display: block;

    width: 20px;
    height: 20px;
}


/*
 * =========================================================
 * 8. LINKS
 * =========================================================
 */

.bb4-partner-auth__link {
    color: var(--bb4f-text);

    font-size: 0.8rem;
    font-weight: 600;

    text-decoration: underline;
    text-underline-offset: 3px;
}

.bb4-partner-auth__link:hover {
    color: #777777;
}


/*
 * =========================================================
 * 9. CHECKBOX
 * =========================================================
 */

.bb4-partner-auth__checkbox {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    cursor: pointer;
}

.bb4-partner-auth__checkbox-input {
    appearance: none;
    -webkit-appearance: none;

    position: relative;

    flex: 0 0 20px;

    width: 20px;
    height: 20px;

    margin: 1px 0 0;

    border: 1.5px solid #C9C9C9;
    border-radius: 6px;

    background: #FFFFFF;

    cursor: pointer;
}

.bb4-partner-auth__checkbox-input:checked {
    border-color: var(--bb4f-yellow);
    background: var(--bb4f-yellow);
}

.bb4-partner-auth__checkbox-input:checked::after {
    content: "";

    position: absolute;

    top: 3px;
    left: 6px;

    width: 5px;
    height: 9px;

    border: solid #171717;
    border-width: 0 2px 2px 0;

    transform: rotate(45deg);
}

.bb4-partner-auth__checkbox-text {
    color: #666666;

    font-size: 0.78rem;
    line-height: 1.6;
}


/*
 * =========================================================
 * 10. BUTTON
 * =========================================================
 */

.bb4-partner-auth__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

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

    padding: 12px 20px;

    border: 1px solid transparent;
    border-radius: 12px;

    background: var(--bb4f-black);
    color: var(--bb4f-white);

    font: inherit;
    font-size: 0.875rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        background var(--bb4f-transition),
        opacity var(--bb4f-transition);
}

.bb4-partner-auth__submit:hover:not(:disabled) {
    background: #3A3B40;
}

.bb4-partner-auth__submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.bb4-partner-auth__submit.is-loading {
    cursor: progress;
}

.bb4-partner-auth__submit svg {
    width: 19px;
    height: 19px;
}


/*
 * =========================================================
 * 11. MESSAGE
 * =========================================================
 */

.bb4-partner-auth__message {
    margin-top: 18px;
    padding: 13px 15px;

    border: 1px solid #EAEAEA;
    border-radius: 11px;

    background: #F8F8F8;
    color: #555555;

    font-size: 0.82rem;
    line-height: 1.6;
    text-align: center;
}

.bb4-partner-auth__message.is-error {
    border-color: #F0D6D6;
    background: #FFF5F5;
    color: #BB3636;
}

.bb4-partner-auth__message.is-success {
    border-color: #DCEBDD;
    background: #F1FAF2;
    color: #27683C;
}


/*
 * =========================================================
 * 12. FIELD ERRORS
 * =========================================================
 */

.bb4-partner-auth__field-error {
    margin: 0;

    color: #BB3636;

    font-size: 0.76rem;
    line-height: 1.5;
}


/*
 * =========================================================
 * 13. FOOTER
 * =========================================================
 */

.bb4-partner-auth__footer {
    margin-top: 30px;

    color: #777777;

    font-size: 0.83rem;
    line-height: 1.6;

    text-align: center;
}


/*
 * =========================================================
 * 14. GRID
 * =========================================================
 */

.bb4-partner-auth__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 15px;
}


/*
 * =========================================================
 * 15. FOCUS
 * =========================================================
 */

.bb4-partner-auth :is(
    a,
    button,
    input
):focus-visible {
    outline: 3px solid var(--bb4f-yellow);
    outline-offset: 3px;
}

.bb4-partner-auth__input:focus-visible {
    outline: none;
}


/*
 * =========================================================
 * 16. RESPONSIVE
 * =========================================================
 */

@media (max-width: 600px) {

    .bb4-partner-auth {
        align-items: flex-start;

        padding: 55px 20px 75px;
    }

    .bb4-partner-auth__logo {
        width: 185px;
    }

    .bb4-partner-auth__brand {
        margin-bottom: 35px;
    }

    .bb4-partner-auth__title {
        font-size: 1.5rem;
    }

    .bb4-partner-auth__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .bb4-partner-auth__input {
        font-size: 16px;
    }

}


/*
 * =========================================================
 * 17. REDUCED MOTION
 * =========================================================
 */

@media (prefers-reduced-motion: reduce) {

    .bb4-partner-auth *,
    .bb4-partner-auth *::before,
    .bb4-partner-auth *::after {
        transition: none !important;
    }

}

/*
 * =========================================================
 * BESTB4 – PARTNER SIGNUP
 * Version: 1.1
 *
 * Split-screen registration
 *
 * Dependencies:
 * - bb4-framework.css
 * - partner-auth.css
 *
 * =========================================================
 */


/*
 * =========================================================
 * 1. PAGE LAYOUT
 * =========================================================
 */

.bb4-partner-signup {
    display: grid;

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

    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    background: #FFFFFF;
}


/*
 * =========================================================
 * 2. LEFT PANEL
 * =========================================================
 */

.bb4-partner-signup__left {
    display: flex;
    flex-direction: column;

    position: relative;

    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;

    background: #FFFFFF;
}


/*
 * =========================================================
 * 3. BRAND
 * =========================================================
 */

.bb4-partner-signup__brand {
    display: flex;
    align-items: center;

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

    padding: 24px 30px;
}

.bb4-partner-signup__brand-link {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    text-decoration: none;
}

.bb4-partner-signup__logo {
    display: block;

    width: 170px;
    height: auto;
}


/*
 * =========================================================
 * 4. FORM CONTENT
 * =========================================================
 */

.bb4-partner-signup__content {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 1 0 auto;

    width: 100%;

    padding: 45px 30px 65px;
}

.bb4-partner-signup__content
.bb4-partner-auth__shell {
    width: 100%;
    max-width: 430px;

    margin: 0;
}

.bb4-partner-signup__content
.bb4-partner-auth__header {
    margin-bottom: 27px;
}


/*
 * =========================================================
 * 5. HONEYPOT
 * =========================================================
 */

.bb4-partner-signup__honeypot {
    position: absolute;

    left: -10000px;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}


/*
 * =========================================================
 * 6. FOOTER
 * =========================================================
 */

.bb4-partner-signup__footer {
    width: 100%;

    padding: 20px 30px 26px;

    color: #777777;

    font-size: 0.83rem;
    line-height: 1.6;
}


/*
 * =========================================================
 * 7. RIGHT VISUAL
 * =========================================================
 */

.bb4-partner-signup__visual {
    display: flex;
    align-items: flex-end;

    position: relative;

    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;

    overflow: hidden;

    /*
     * Replace this URL with the original
     * dashboard-signup-item-right image.
     */

    background-image:
        url('/assets/imgs/partner-signup.jpg');

    background-color: #252525;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


/*
 * =========================================================
 * 8. VISUAL OVERLAY
 * =========================================================
 */

.bb4-partner-signup__visual-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.03) 0%,
        rgba(0, 0, 0, 0.10) 35%,
        rgba(0, 0, 0, 0.55) 70%,
        rgba(0, 0, 0, 0.78) 100%
    );

    pointer-events: none;
}


/*
 * =========================================================
 * 9. VISUAL CONTENT
 * =========================================================
 */

.bb4-partner-signup__visual-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    position: relative;
    z-index: 1;

    width: 100%;

    padding: 45px 45px 60px;
}


/*
 * =========================================================
 * 10. EYEBROW
 * =========================================================
 */

.bb4-partner-signup__visual-eyebrow {
    margin: 0 0 18px;

    color: #F5EB29;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    line-height: 1.5;
}


/*
 * =========================================================
 * 11. VISUAL TITLE
 * =========================================================
 */

.bb4-partner-signup__visual-title {
    margin: 0 0 19px;

    color: #FFFFFF;

    font-size: clamp(
        2.1rem,
        3vw,
        3.1rem
    );

    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 1.06;
}


/*
 * =========================================================
 * 12. VISUAL DESCRIPTION
 * =========================================================
 */

.bb4-partner-signup__visual-description {
    max-width: 340px;

    margin: 0;

    color: rgba(255, 255, 255, 0.92);

    font-size: clamp(
        1rem,
        1.3vw,
        1.15rem
    );

    font-weight: 500;
    line-height: 1.6;
}


/*
 * =========================================================
 * 13. ACCENT
 * =========================================================
 */

.bb4-partner-signup__visual-accent {
    display: block;

    width: 55px;
    height: 4px;

    margin-top: 28px;

    border-radius: 999px;

    background: #F5EB29;
}


/*
 * =========================================================
 * 14. LAPTOP
 * =========================================================
 */

@media (max-width: 1200px) {

    .bb4-partner-signup {
        grid-template-columns:
            minmax(0, 1.65fr)
            minmax(320px, 1fr);
    }

    .bb4-partner-signup__visual-content {
        padding: 35px 30px 45px;
    }

    .bb4-partner-signup__visual-title {
        font-size: 2.2rem;
    }

}


/*
 * =========================================================
 * 15. TABLET / MOBILE
 * =========================================================
 */

@media (max-width: 900px) {

    .bb4-partner-signup {
        display: block;
    }

    .bb4-partner-signup__visual {
        display: none;
    }

    .bb4-partner-signup__left {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .bb4-partner-signup__brand {
        justify-content: center;

        min-height: 0;

        padding: 35px 20px 0;
    }

    .bb4-partner-signup__logo {
        width: 185px;
    }

    .bb4-partner-signup__content {
        align-items: flex-start;

        padding: 55px 20px 35px;
    }

    .bb4-partner-signup__content
    .bb4-partner-auth__shell {
        max-width: 480px;

        margin-inline: auto;
    }

    .bb4-partner-signup__footer {
        padding: 20px 20px 35px;

        text-align: center;
    }

}


/*
 * =========================================================
 * 16. SMALL MOBILE
 * =========================================================
 */

@media (max-width: 480px) {

    .bb4-partner-signup__brand {
        padding-top: 30px;
    }

    .bb4-partner-signup__content {
        padding: 42px 20px 30px;
    }

    .bb4-partner-signup__content
    .bb4-partner-auth__title {
        font-size: 1.5rem;
    }

    .bb4-partner-signup__footer {
        font-size: 0.8rem;
    }

}


/*
 * =========================================================
 * 17. ACCESSIBILITY
 * =========================================================
 */

.bb4-partner-signup__brand-link:focus-visible {
    outline: 3px solid #F5EB29;
    outline-offset: 5px;
    border-radius: 4px;
}

/*
 * =========================================================
 * BESTB4 – PARTNER REGISTRATION SUCCESS
 * Version: 1.1
 *
 * Dependencies:
 * - bb4-framework.css
 * - partner-auth.css
 * =========================================================
 */


/*
 * =========================================================
 * 1. PAGE
 * =========================================================
 */

body:has(.bb4-partner-auth--success) {
    margin: 0;

    background: #FFFFFF;

    font-family:
        "Google Sans",
        Arial,
        sans-serif;
}

.bb4-partner-auth--success {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 100vh;
    min-height: 100dvh;

    padding: 50px 20px;

    background: #FFFFFF;

    font-family:
        "Google Sans",
        Arial,
        sans-serif;
}

.bb4-partner-auth--success,
.bb4-partner-auth--success * {
    box-sizing: border-box;
    font-family: inherit;
}


/*
 * =========================================================
 * 2. SHELL
 * =========================================================
 */

.bb4-partner-auth--success
.bb4-partner-auth__shell {
    width: 100%;
    max-width: 440px;
}

.bb4-partner-auth--success
.bb4-partner-auth__brand {
    margin-bottom: 30px;
}


/*
 * =========================================================
 * 3. CONTENT
 * =========================================================
 */

.bb4-partner-auth__success {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;

    text-align: center;
}


/*
 * =========================================================
 * 4. SUCCESS ICON
 * =========================================================
 */

.bb4-partner-auth__success-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 74px;
    height: 74px;

    margin-bottom: 24px;

    border-radius: 50%;

    background: #FFFDE4;
}

.bb4-partner-auth__success-icon svg {
    display: block;

    width: 60px;
    height: 60px;
}


/*
 * =========================================================
 * 5. TITLE
 * =========================================================
 */

.bb4-partner-auth__success-title {
    margin: 0 0 13px;

    color: #222326;

    font-size: clamp(
        1.6rem,
        3vw,
        1.9rem
    );

    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.25;
}


/*
 * =========================================================
 * 6. DESCRIPTION
 * =========================================================
 */

.bb4-partner-auth__success-description {
    max-width: 390px;

    margin: 0;

    color: #85868A;

    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.7;
}


/*
 * =========================================================
 * 7. EMAIL
 * =========================================================
 */

.bb4-partner-auth__success-email {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    width: 100%;

    margin-top: 23px;
    padding: 16px 18px;

    border: 1px solid #EAEAEA;
    border-radius: 12px;

    background: #F9F9F9;
    color: #222326;
}

.bb4-partner-auth__success-email svg {
    flex: 0 0 20px;

    width: 20px;
    height: 20px;

    color: #777777;
}

.bb4-partner-auth__success-email strong {
    min-width: 0;

    font-size: 0.9rem;
    font-weight: 700;

    overflow-wrap: anywhere;
}


/*
 * =========================================================
 * 8. HELP
 * =========================================================
 */

.bb4-partner-auth__success-help {
    max-width: 370px;

    margin: 20px 0 0;

    color: #95969A;

    font-size: 0.78rem;
    line-height: 1.7;
}


/*
 * =========================================================
 * 9. ACTIONS
 * =========================================================
 */

.bb4-partner-auth__success-actions {
    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 12px;

    width: 100%;

    margin-top: 27px;
}


/*
 * =========================================================
 * 10. PRIMARY BUTTON
 * =========================================================
 */

.bb4-partner-auth--success
.bb4-partner-auth__success-actions
.bb4-partner-auth__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

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

    padding: 12px 20px;

    border: 1px solid #222326;
    border-radius: 11px;

    background: #222326;
    color: #FFFFFF;

    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.bb4-partner-auth--success
.bb4-partner-auth__success-actions
.bb4-partner-auth__submit:hover,
.bb4-partner-auth--success
.bb4-partner-auth__success-actions
.bb4-partner-auth__submit:focus-visible {
    background: #111111;
    color: #FFFFFF;

    transform: translateY(-1px);
}

.bb4-partner-auth__success-actions
.bb4-partner-auth__submit svg {
    width: 17px;
    height: 17px;
}


/*
 * =========================================================
 * 11. SECONDARY BUTTON
 * =========================================================
 */

.bb4-partner-auth--success
.bb4-partner-auth__success-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

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

    padding: 11px 18px;

    border: 1px solid #E8E8E8;
    border-radius: 11px;

    background: #FFFFFF;
    color: #222326;

    font-family: inherit;
    font-size: 0.83rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease;
}

.bb4-partner-auth--success
.bb4-partner-auth__success-secondary:hover {
    border-color: #D5D5D5;

    background: #F8F8F8;
    color: #222326;
}


/*
 * =========================================================
 * 12. FOOTER
 * =========================================================
 */

.bb4-partner-auth--success
.bb4-partner-auth__footer {
    margin-top: 32px;

    color: #A0A0A0;

    font-size: 0.72rem;
    line-height: 1.6;
}


/*
 * =========================================================
 * 13. MOBILE
 * =========================================================
 */

@media (max-width: 600px) {

    .bb4-partner-auth--success {
        align-items: center;

        padding: 35px 20px 45px;
    }

    .bb4-partner-auth--success
    .bb4-partner-auth__brand {
        margin-bottom: 25px;
    }

    .bb4-partner-auth__success-icon {
        width: 66px;
        height: 66px;

        margin-bottom: 20px;
    }

    .bb4-partner-auth__success-icon svg {
        width: 54px;
        height: 54px;
    }

    .bb4-partner-auth__success-title {
        font-size: 1.6rem;
    }

}

/*
 * =========================================================
 * BESTB4 PARTNER
 * AUTH RESULT PAGES
 *
 * Version: 1.0
 *
 * Email verification
 * Registration cancellation
 *
 * Dependencies:
 * - bb4-framework.css
 * - partner-auth.css
 *
 * =========================================================
 */


/*
 * =========================================================
 * 1. PAGE
 * =========================================================
 */

body:has(.bb4-partner-auth--result) {
    margin: 0;

    background: #FFFFFF;

    font-family:
        "Google Sans",
        Arial,
        sans-serif;
}

.bb4-partner-auth--result {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 100vh;
    min-height: 100dvh;

    padding: 50px 20px;

    background: #FFFFFF;

    font-family:
        "Google Sans",
        Arial,
        sans-serif;
}

.bb4-partner-auth--result,
.bb4-partner-auth--result *,
.bb4-partner-auth--result *::before,
.bb4-partner-auth--result *::after {
    box-sizing: border-box;
}

.bb4-partner-auth--result * {
    font-family: inherit;
}


/*
 * =========================================================
 * 2. SHELL
 * =========================================================
 */

.bb4-partner-auth--result
.bb4-partner-auth__shell {
    width: 100%;
    max-width: 440px;
}

.bb4-partner-auth--result
.bb4-partner-auth__brand {
    margin-bottom: 30px;
}


/*
 * =========================================================
 * 3. RESULT
 * =========================================================
 */

.bb4-partner-auth__result {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;

    text-align: center;
}


/*
 * =========================================================
 * 4. ICON
 * =========================================================
 */

.bb4-partner-auth__result-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 74px;
    height: 74px;

    margin-bottom: 24px;

    border-radius: 50%;

    background: #FFFDE4;
}

.bb4-partner-auth__result.is-error
.bb4-partner-auth__result-icon {
    background: #FFF3F3;
}

.bb4-partner-auth__result-icon svg {
    display: block;

    width: 60px;
    height: 60px;
}


/*
 * =========================================================
 * 5. EYEBROW
 * =========================================================
 */

.bb4-partner-auth__result-eyebrow {
    display: block;

    margin-bottom: 11px;

    color: #8D8327;

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.1em;
    line-height: 1.5;
}

.bb4-partner-auth__result.is-error
.bb4-partner-auth__result-eyebrow {
    color: #B94A4A;
}


/*
 * =========================================================
 * 6. TITLE
 * =========================================================
 */

.bb4-partner-auth__result-title {
    margin: 0 0 13px;

    color: #222326;

    font-size: clamp(
        1.6rem,
        3vw,
        1.9rem
    );

    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.25;
}


/*
 * =========================================================
 * 7. DESCRIPTION
 * =========================================================
 */

.bb4-partner-auth__result-description {
    max-width: 390px;

    margin: 0;

    color: #85868A;

    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.7;
}


/*
 * =========================================================
 * 8. BACKEND MESSAGE
 * =========================================================
 */

.bb4-partner-auth__result-message {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    gap: 12px;

    width: 100%;

    margin-top: 25px;
    padding: 17px 18px;

    border: 1px solid #EAEAEA;
    border-radius: 12px;

    background: #FAFAFA;
    color: #55565A;

    text-align: left;
}

.bb4-partner-auth__result.is-success
.bb4-partner-auth__result-message {
    border-color: #E5EBD5;

    background: #F8FAF2;
}

.bb4-partner-auth__result.is-error
.bb4-partner-auth__result-message {
    border-color: #F0DDDD;

    background: #FFF8F8;
    color: #A54B4B;
}

.bb4-partner-auth__result-message svg {
    flex: 0 0 20px;

    width: 20px;
    height: 20px;

    margin-top: 1px;

    color: #777777;
}

.bb4-partner-auth__result.is-success
.bb4-partner-auth__result-message svg {
    color: #65825A;
}

.bb4-partner-auth__result.is-error
.bb4-partner-auth__result-message svg {
    color: #C05252;
}

.bb4-partner-auth__result-message p {
    flex: 1;

    margin: 0;

    font-size: 0.82rem;
    line-height: 1.7;

    overflow-wrap: anywhere;
}


/*
 * =========================================================
 * 9. ACTIONS
 * =========================================================
 */

.bb4-partner-auth__result-actions {
    display: flex;
    flex-direction: column;

    gap: 12px;

    width: 100%;

    margin-top: 25px;
}


/*
 * =========================================================
 * 10. BUTTON
 * =========================================================
 */

.bb4-partner-auth--result
.bb4-partner-auth__result-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

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

    padding: 12px 20px;

    border: 1px solid #222326;
    border-radius: 11px;

    background: #222326;
    color: #FFFFFF;

    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    transition:
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.bb4-partner-auth--result
.bb4-partner-auth__result-button:hover,
.bb4-partner-auth--result
.bb4-partner-auth__result-button:focus-visible {
    background: #111111;
    color: #FFFFFF;

    transform: translateY(-1px);
}

.bb4-partner-auth__result-button span {
    color: inherit;
}

.bb4-partner-auth__result-button svg {
    flex-shrink: 0;

    width: 17px;
    height: 17px;

    color: inherit;
}


/*
 * =========================================================
 * 11. FOOTER
 * =========================================================
 */

.bb4-partner-auth--result
.bb4-partner-auth__footer {
    margin-top: 32px;

    color: #A0A0A0;

    font-size: 0.72rem;
    line-height: 1.6;
}


/*
 * =========================================================
 * 12. MOBILE
 * =========================================================
 */

@media (max-width: 600px) {

    .bb4-partner-auth--result {
        align-items: center;

        padding: 35px 20px 45px;
    }

    .bb4-partner-auth--result
    .bb4-partner-auth__brand {
        margin-bottom: 25px;
    }

    .bb4-partner-auth__result-icon {
        width: 66px;
        height: 66px;

        margin-bottom: 20px;
    }

    .bb4-partner-auth__result-icon svg {
        width: 54px;
        height: 54px;
    }

    .bb4-partner-auth__result-title {
        font-size: 1.6rem;
    }

    .bb4-partner-auth__result-message {
        padding: 15px;
    }

}


/*
 * =========================================================
 * 13. REDUCED MOTION
 * =========================================================
 */

@media (prefers-reduced-motion: reduce) {

    .bb4-partner-auth--result *,
    .bb4-partner-auth--result *::before,
    .bb4-partner-auth--result *::after {
        transition: none !important;
    }

}

/*
 * =========================================================
 * BESTB4 PARTNER
 * PROFILE SETUP / ONBOARDING
 *
 * Version: 2.0
 *
 * Dependencies:
 * - bb4-framework.css
 * - partner-auth.css
 * =========================================================
 */


/*
 * =========================================================
 * 1. PAGE
 * =========================================================
 */

body:has(.bb4-partner-setup) {
    margin: 0;

    background: #F8F8F8;

    font-family:
        "Google Sans",
        Arial,
        sans-serif;
}

.bb4-partner-setup {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    padding: 45px 20px 50px;

    background: #F8F8F8;

    font-family:
        "Google Sans",
        Arial,
        sans-serif;
}

.bb4-partner-setup *,
.bb4-partner-setup *::before,
.bb4-partner-setup *::after {
    box-sizing: border-box;
}

.bb4-partner-setup * {
    font-family: inherit;
}

.bb4-partner-setup .is-hidden {
    display: none !important;
}


/*
 * =========================================================
 * 2. SHELL
 * =========================================================
 */

.bb4-partner-setup__shell {
    width: 100%;
    max-width: 760px;

    margin-inline: auto;
}


/*
 * =========================================================
 * 3. BRAND
 * =========================================================
 */

.bb4-partner-setup__brand {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 32px;
}

.bb4-partner-setup__brand img {
    display: block;

    width: 205px;
    height: auto;
}


/*
 * =========================================================
 * 4. CARD
 * =========================================================
 */

.bb4-partner-setup__card {
    width: 100%;

    padding: 40px;

    border: 1px solid #ECECEC;
    border-radius: 20px;

    background: #FFFFFF;

    box-shadow:
        0 12px 45px rgba(0, 0, 0, .035);
}


/*
 * =========================================================
 * 5. PROGRESS
 * =========================================================
 */

.bb4-partner-setup__progress {
    margin-bottom: 25px;
}

.bb4-partner-setup__progress-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 12px;

    color: #77787B;

    font-size: 0.78rem;
}

.bb4-partner-setup__progress-top strong {
    color: #222326;

    font-weight: 800;
}

.bb4-partner-setup__progress-bar {
    height: 7px;

    overflow: hidden;

    border-radius: 999px;

    background: #E9E9E9;
}

.bb4-partner-setup__progress-bar span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background: #F5EB29;
}

.bb4-partner-setup__progress-labels {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-top: 12px;
}

.bb4-partner-setup__progress-labels span {
    color: #A0A0A0;

    font-size: 0.68rem;
    font-weight: 600;
}

.bb4-partner-setup__progress-labels span.is-current {
    color: #222326;

    font-weight: 800;
}

.bb4-partner-setup__progress-labels span.is-completed {
    color: #6F7073;
}


/*
 * =========================================================
 * 6. STEP
 * =========================================================
 */

.bb4-partner-setup__step {
    width: 100%;
}

.bb4-partner-setup__step-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    margin-bottom: 24px;

    border-radius: 13px;

    background: #F5EB29;
    color: #222326;

    font-size: 1.25rem;
    font-weight: 800;
}


/*
 * =========================================================
 * 7. EYEBROW
 * =========================================================
 */

.bb4-partner-setup__eyebrow {
    display: block;

    margin-bottom: 10px;

    color: #8B8128;

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: .1em;
}


/*
 * =========================================================
 * 8. TITLE
 * =========================================================
 */

.bb4-partner-setup__title {
    margin: 0 0 13px;

    color: #222326;

    font-size: clamp(
        1.55rem,
        3vw,
        1.95rem
    );

    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.2;
}

.bb4-partner-setup__description {
    margin: 0 0 28px;

    color: #85868A;

    font-size: 0.875rem;
    line-height: 1.75;
}


/*
 * =========================================================
 * 9. FORM
 * =========================================================
 */

.bb4-partner-setup__form {
    display: flex;
    flex-direction: column;

    gap: 23px;
}

.bb4-partner-setup__field {
    display: flex;
    flex-direction: column;

    gap: 9px;
    min-width: 0;
}

.bb4-partner-setup__field label {
    color: #222326;

    font-size: 0.83rem;
    font-weight: 700;
}

.bb4-partner-setup__required {
    color: #C83F3F;
}

.bb4-partner-setup__field input:not([type="file"]),
.bb4-partner-setup__field select {
    display: block;

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

    padding: 11px 15px;

    border: 1px solid #E0E0E0;
    border-radius: 11px;

    outline: none;

    background: #FFFFFF;
    color: #222326;

    font-size: 0.875rem;

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

.bb4-partner-setup__field input:focus,
.bb4-partner-setup__field select:focus {
    border-color: #222326;

    box-shadow:
        0 0 0 3px rgba(245, 235, 41, .25);
}

.bb4-partner-setup__field input::placeholder {
    color: #B1B1B1;
}

.bb4-partner-setup__help {
    margin: 0;

    color: #999A9D;

    font-size: 0.75rem;
    line-height: 1.6;
}


/*
 * =========================================================
 * 10. GRID
 * =========================================================
 */

.bb4-partner-setup__grid {
    display: grid;

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

    gap: 18px;
}

.bb4-partner-setup__grid--address {
    grid-template-columns:
        minmax(120px, 1fr)
        minmax(0, 2.5fr);
}

.bb4-partner-setup__grid--street {
    grid-template-columns:
        minmax(0, 2fr)
        minmax(120px, 1fr);
}


/*
 * =========================================================
 * 11. INFO BOX
 * =========================================================
 */

.bb4-partner-setup__info {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin: 22px 0;
    padding: 17px 19px;

    border: 1px solid #E6E9EE;
    border-radius: 12px;

    background: #F8FAFC;
    color: #56616C;
}

.bb4-partner-setup__info > svg {
    flex: 0 0 21px;

    width: 21px;
    height: 21px;

    color: #65717E;
}

.bb4-partner-setup__info strong {
    display: block;

    margin-bottom: 5px;

    color: #293440;

    font-size: 0.8rem;
    font-weight: 800;
}

.bb4-partner-setup__info p {
    margin: 0;

    font-size: 0.79rem;
    line-height: 1.7;
}

.bb4-partner-setup__info--warning {
    border-color: #F0E5AE;

    background: #FFFCEF;
    color: #74672A;
}

.bb4-partner-setup__info--warning strong {
    color: #66571E;
}

.bb4-partner-setup__inline-email {
    margin-top: 8px;

    overflow-wrap: anywhere;
}


/*
 * =========================================================
 * 12. BUTTONS
 * =========================================================
 */

.bb4-partner-setup__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 11px;

    margin-top: 30px;
}

.bb4-partner-setup__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 46px;

    padding: 11px 19px;

    border: 1px solid transparent;
    border-radius: 11px;

    font-size: 0.83rem;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease;
}

.bb4-partner-setup__button--primary {
    background: #222326;
    color: #FFFFFF;
}

.bb4-partner-setup__button--primary:hover {
    background: #111111;
    color: #FFFFFF;
}

.bb4-partner-setup__button--secondary {
    border-color: #E9E9E9;

    background: #F5F5F5;
    color: #222326;
}

.bb4-partner-setup__button--secondary:hover {
    border-color: #D5D5D5;

    background: #EDEDED;
    color: #222326;
}

.bb4-partner-setup__button--dark {
    background: #222326;
    color: #FFFFFF;
}

.bb4-partner-setup__button--dark:hover {
    background: #111111;
    color: #FFFFFF;
}

.bb4-partner-setup__button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.bb4-partner-setup__button.is-loading {
    opacity: .65;
    pointer-events: none;
}

.bb4-partner-setup__button svg {
    width: 18px;
    height: 18px;
}


/*
 * =========================================================
 * 13. WELCOME
 * =========================================================
 */

.bb4-partner-setup__welcome-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 65px;
    height: 65px;

    margin-bottom: 25px;

    border-radius: 17px;

    background: #F5EB29;
    color: #222326;
}

.bb4-partner-setup__welcome-icon svg {
    width: 35px;
    height: 35px;
}

.bb4-partner-setup__welcome-list {
    display: grid;

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

    gap: 12px;

    margin-top: 28px;
}

.bb4-partner-setup__welcome-list > div {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    padding: 17px;

    border: 1px solid #ECECEC;
    border-radius: 12px;

    background: #FFFFFF;
}

.bb4-partner-setup__welcome-list > div > span {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 28px;

    width: 28px;
    height: 28px;

    border-radius: 8px;

    background: #F5EB29;
    color: #222326;

    font-size: 0.75rem;
    font-weight: 800;
}

.bb4-partner-setup__welcome-list strong {
    display: block;

    color: #222326;

    font-size: 0.8rem;
}

.bb4-partner-setup__welcome-list p {
    margin: 5px 0 0;

    color: #929397;

    font-size: 0.74rem;
    line-height: 1.6;
}


/*
 * =========================================================
 * 14. DIVIDER
 * =========================================================
 */

.bb4-partner-setup__divider {
    height: 1px;

    margin: 15px 0;

    background: #ECECEC;
}


/*
 * =========================================================
 * 15. SUBHEADING
 * =========================================================
 */

.bb4-partner-setup__subheading {
    margin-bottom: 20px;
}

.bb4-partner-setup__subheading > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;
}

.bb4-partner-setup__subheading h2 {
    margin: 0;

    color: #222326;

    font-size: 1rem;
    font-weight: 800;
}

.bb4-partner-setup__subheading p {
    margin: 10px 0 0;

    color: #85868A;

    font-size: 0.8rem;
    line-height: 1.7;
}

.bb4-partner-setup__optional {
    padding: 5px 9px;

    border-radius: 7px;

    background: #F5F5F5;
    color: #777777;

    font-size: 0.68rem;
    font-weight: 700;
}

.bb4-partner-setup__text {
    margin: 17px 0;

    color: #85868A;

    font-size: 0.8rem;
    line-height: 1.7;
}


/*
 * =========================================================
 * 16. FILE INPUT
 * =========================================================
 */

.bb4-partner-setup__file {
    display: flex;
    flex-direction: column;

    gap: 10px;

    padding: 15px;

    border: 1px solid #E7E7E7;
    border-radius: 11px;

    background: #FAFAFA;
}

.bb4-partner-setup__file input {
    width: 100%;

    color: #555555;

    font-size: 0.78rem;
}

.bb4-partner-setup__file-name {
    color: #999999;

    font-size: 0.75rem;

    overflow-wrap: anywhere;
}


/*
 * =========================================================
 * 17. DOCUMENTS
 * =========================================================
 */

.bb4-partner-setup__documents {
    margin-top: 22px;
}

.bb4-partner-setup__documents .notification {
    padding: 17px;

    border-radius: 11px;

    background: #F7F7F7;
    color: #777777;

    font-size: 0.8rem;
}

.bb4-partner-setup__documents .box {
    max-width: 100%;

    overflow-x: auto;

    border: 1px solid #ECECEC;
    border-radius: 12px;
}

.bb4-partner-setup__documents table {
    width: 100%;

    border-collapse: collapse;

    font-size: 0.75rem;
}

.bb4-partner-setup__documents th,
.bb4-partner-setup__documents td {
    padding: 12px;

    border-bottom: 1px solid #ECECEC;

    text-align: left;
}

.bb4-partner-setup__documents th {
    color: #777777;

    font-weight: 700;
}

.bb4-partner-setup__documents td {
    color: #444444;
}

.bb4-partner-setup__documents .tag {
    display: inline-block;

    padding: 5px 8px;

    border-radius: 6px;

    background: #F4F4F4;
}

.bb4-partner-setup__documents .tag.is-success {
    background: #E9F6EC;
    color: #267542;
}

.bb4-partner-setup__documents .tag.is-danger {
    background: #FFF0F0;
    color: #B74444;
}

.bb4-partner-setup__documents .tag.is-warning {
    background: #FFF8DD;
    color: #957A20;
}

.bb4-partner-setup__documents .js-del-doc {
    padding: 7px 11px;

    border: 1px solid #E7E7E7;
    border-radius: 7px;

    background: #FFFFFF;
    color: #B74444;

    cursor: pointer;
}


/*
 * =========================================================
 * 18. LOGO UPLOAD
 * =========================================================
 */

.bb4-partner-setup__visually-hidden {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    clip-path: inset(50%);
    white-space: nowrap;
}

.bb4-partner-setup__droparea {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 235px;

    margin-top: 20px;
    padding: 35px 20px;

    border: 2px dashed #DADADA;
    border-radius: 15px;

    background: #FAFAFA;

    text-align: center;

    cursor: pointer;

    transition:
        border-color .18s ease,
        background .18s ease;
}

.bb4-partner-setup__droparea:hover,
.bb4-partner-setup__droparea.owner-dragover {
    border-color: #E1D320;

    background: #FFFEEE;
}

.bb4-partner-setup__droparea svg {
    width: 38px;
    height: 38px;

    margin-bottom: 15px;

    color: #555555;
}

.bb4-partner-setup__droparea strong {
    color: #222326;

    font-size: 0.9rem;
    font-weight: 800;
}

.bb4-partner-setup__droparea p {
    margin: 8px 0 12px;

    color: #777777;

    font-size: 0.8rem;
}

.bb4-partner-setup__droparea > span {
    color: #A0A0A0;

    font-size: 0.72rem;
}

.bb4-partner-setup__logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 20px;
}

.bb4-partner-setup__logo-preview img {
    display: block;

    max-width: 180px;
    max-height: 130px;

    object-fit: contain;
}


/*
 * =========================================================
 * 19. REVIEW
 * =========================================================
 */

.bb4-partner-setup__review {
    display: grid;

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

    gap: 12px;
}

.bb4-partner-setup__review-item {
    display: flex;
    flex-direction: column;

    gap: 9px;

    min-width: 0;
    min-height: 85px;

    padding: 17px;

    border: 1px solid #ECECEC;
    border-radius: 11px;

    background: #FAFAFA;
}

.bb4-partner-setup__review-item span {
    color: #96979B;

    font-size: 0.74rem;
}

.bb4-partner-setup__review-item strong {
    color: #222326;

    font-size: 0.83rem;
    font-weight: 700;

    overflow-wrap: anywhere;
}

.bb4-partner-setup__review-item img {
    max-width: 100px;
    max-height: 60px;

    object-fit: contain;
}


/*
 * =========================================================
 * 20. MODAL
 * =========================================================
 */

.bb4-partner-setup__modal {
    position: fixed;
    z-index: 1000;

    inset: 0;

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

    padding: 20px;
}

.bb4-partner-setup__modal.is-active {
    display: flex;
}

.bb4-partner-setup__modal .modal-background {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, .5);
}

.bb4-partner-setup__modal .modal-card {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 460px;
    max-height: calc(100dvh - 40px);

    overflow-y: auto;

    padding: 27px;

    border-radius: 16px;

    background: #FFFFFF;
}

.bb4-partner-setup__modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    margin-bottom: 18px;

    border-radius: 12px;

    background: #F5EB29;

    font-size: 1.3rem;
    font-weight: 800;
}

.bb4-partner-setup__modal h2 {
    margin: 0 0 12px;

    color: #222326;

    font-size: 1.15rem;
    font-weight: 800;
}

.bb4-partner-setup__modal p {
    margin: 0;

    color: #777777;

    font-size: 0.82rem;
    line-height: 1.7;
}

html.is-clipped {
    overflow: hidden;
}


/*
 * =========================================================
 * 21. MESSAGE
 * =========================================================
 */

.bb4-partner-setup__message {
    margin-top: 25px;
    padding: 15px 18px;

    border: 1px solid #EAEAEA;
    border-radius: 11px;

    background: #F8F8F8;
    color: #555555;

    font-size: 0.82rem;
    line-height: 1.6;
}

.bb4-partner-setup__message.has-background-danger {
    border-color: #F0D6D6;

    background: #FFF5F5;
    color: #B74444;
}

.bb4-partner-setup__message.has-background-primary {
    border-color: #E8E5B7;

    background: #FFFDE9;
    color: #655D20;
}


/*
 * =========================================================
 * 22. FOOTER
 * =========================================================
 */

.bb4-partner-setup__footer {
    margin-top: 25px;

    color: #A0A0A0;

    font-size: 0.72rem;

    text-align: center;
}


/*
 * =========================================================
 * 23. FOCUS
 * =========================================================
 */

.bb4-partner-setup :is(
    a,
    button,
    input,
    select,
    [role="button"]
):focus-visible {
    outline: 3px solid #F5EB29;
    outline-offset: 3px;
}


/*
 * =========================================================
 * 24. TABLET
 * =========================================================
 */

@media (max-width: 800px) {

    .bb4-partner-setup {
        padding: 30px 18px 45px;
    }

    .bb4-partner-setup__card {
        padding: 30px;
    }

}


/*
 * =========================================================
 * 25. MOBILE
 * =========================================================
 */

@media (max-width: 600px) {

    .bb4-partner-setup {
        padding: 25px 15px 40px;
    }

    .bb4-partner-setup__brand img {
        width: 180px;
    }

    .bb4-partner-setup__card {
        padding: 24px 19px;

        border-radius: 15px;
    }

    .bb4-partner-setup__title {
        font-size: 1.55rem;
    }

    .bb4-partner-setup__grid,
    .bb4-partner-setup__grid--address,
    .bb4-partner-setup__grid--street,
    .bb4-partner-setup__welcome-list,
    .bb4-partner-setup__review {
        grid-template-columns: minmax(0, 1fr);
    }

    .bb4-partner-setup__progress-labels {
        gap: 5px;
    }

    .bb4-partner-setup__progress-labels span {
        font-size: 0.58rem;
    }

    .bb4-partner-setup__actions {
        align-items: stretch;
    }

    .bb4-partner-setup__actions > a,
    .bb4-partner-setup__actions > button,
    .bb4-partner-setup__actions > form {
        flex: 1 1 auto;
    }

    .bb4-partner-setup__actions > form button {
        width: 100%;
    }

}


/*
 * =========================================================
 * 26. REDUCED MOTION
 * =========================================================
 */

@media (prefers-reduced-motion: reduce) {

    .bb4-partner-setup *,
    .bb4-partner-setup *::before,
    .bb4-partner-setup *::after {
        transition: none !important;
    }

}

/*
 * =========================================================
 * SETUP MESSAGE STATES
 * =========================================================
 */

.bb4-partner-setup__message.is-success {
    border-color: #DCEBDD;

    background: #F1FAF2;
    color: #27683C;
}

.bb4-partner-setup__message.is-error {
    border-color: #F0D6D6;

    background: #FFF5F5;
    color: #BB3636;
}

/*
 * =========================================================
 * DOCUMENT TABLE FINISHING
 * =========================================================
 */

.bb4-partner-setup__documents thead {
    background: #F8F8F8;
}

.bb4-partner-setup__documents tbody tr:last-child td {
    border-bottom: 0;
}

.bb4-partner-setup__documents tbody tr:hover {
    background: #FCFCFC;
}

/*
 * =========================================================
 * BESTB4 PARTNER
 * PASSWORD RECOVERY
 *
 * Version: 2.0
 *
 * Forgot password
 * Reset password
 *
 * Dependencies:
 * - bb4-framework.css
 * - partner-auth.css
 * =========================================================
 */


/*
 * =========================================================
 * 1. PAGE
 * =========================================================
 */

body:has(.bb4-partner-auth--password) {
    margin: 0;

    background: #FFFFFF;

    font-family:
        "Google Sans",
        Arial,
        sans-serif;
}

.bb4-partner-auth--password {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 100vh;
    min-height: 100dvh;

    padding: 50px 20px;

    background: #FFFFFF;

    font-family:
        "Google Sans",
        Arial,
        sans-serif;
}

.bb4-partner-auth--password,
.bb4-partner-auth--password *,
.bb4-partner-auth--password *::before,
.bb4-partner-auth--password *::after {
    box-sizing: border-box;
}

.bb4-partner-auth--password * {
    font-family: inherit;
}

.bb4-partner-auth--password .is-hidden {
    display: none !important;
}


/*
 * =========================================================
 * 2. SHELL
 * =========================================================
 */

.bb4-partner-auth--password
.bb4-partner-auth__shell {
    width: 100%;
    max-width: 440px;
}

.bb4-partner-auth--password
.bb4-partner-auth__brand {
    margin-bottom: 30px;
}


/*
 * =========================================================
 * 3. CONTENT
 * =========================================================
 */

.bb4-partner-auth__password-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;

    text-align: center;
}


/*
 * =========================================================
 * 4. ICON
 * =========================================================
 */

.bb4-partner-auth__password-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 74px;
    height: 74px;

    margin-bottom: 24px;

    border-radius: 50%;

    background: #FFFDE4;
    color: #222326;
}

.bb4-partner-auth__password-icon svg {
    width: 36px;
    height: 36px;
}

.bb4-partner-auth__password-icon.is-error {
    background: #FFF1F1;
    color: #C44747;
}


/*
 * =========================================================
 * 5. EYEBROW
 * =========================================================
 */

.bb4-partner-auth__password-eyebrow {
    display: block;

    margin-bottom: 11px;

    color: #8D8327;

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.5;
}


/*
 * =========================================================
 * 6. TITLE
 * =========================================================
 */

.bb4-partner-auth__password-title {
    margin: 0 0 13px;

    color: #222326;

    font-size: clamp(
        1.6rem,
        3vw,
        1.9rem
    );

    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.25;
}


/*
 * =========================================================
 * 7. DESCRIPTION
 * =========================================================
 */

.bb4-partner-auth__password-description {
    max-width: 400px;

    margin: 0 0 28px;

    color: #85868A;

    font-size: 0.875rem;
    line-height: 1.75;
}


/*
 * =========================================================
 * 8. FORM
 * =========================================================
 */

.bb4-partner-auth--password
.bb4-partner-auth__form {
    width: 100%;

    gap: 20px;

    text-align: left;
}

.bb4-partner-auth--password
.bb4-partner-auth__field {
    gap: 8px;
}

.bb4-partner-auth--password
.bb4-partner-auth__label {
    color: #222326;

    font-size: 0.83rem;
    font-weight: 700;
}

.bb4-partner-auth--password
.bb4-partner-auth__input {
    width: 100%;

    min-height: 49px;

    padding: 12px 15px;

    border: 1px solid #E0E0E0;
    border-radius: 12px;

    outline: none;

    background: #FFFFFF;
    color: #222326;

    font-size: 0.875rem;
}

.bb4-partner-auth--password
.bb4-partner-auth__input:focus {
    border-color: #222326;

    box-shadow:
        0 0 0 3px rgba(245, 235, 41, .25);
}

.bb4-partner-auth__password-help {
    margin: 0;

    color: #999A9D;

    font-size: 0.75rem;
    line-height: 1.6;
}


/*
 * =========================================================
 * 9. PASSWORD VISIBILITY
 * =========================================================
 */

.bb4-partner-auth--password
.bb4-partner-auth__password {
    position: relative;

    width: 100%;
}

.bb4-partner-auth--password
.bb4-partner-auth__password
.bb4-partner-auth__input {
    padding-right: 55px;
}

.bb4-partner-auth--password
.bb4-partner-auth__password-toggle {
    position: absolute;

    top: 50%;
    right: 6px;

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

    width: 40px;
    height: 40px;

    padding: 9px;

    transform: translateY(-50%);

    border: 0;
    border-radius: 9px;

    background: transparent;
    color: #777777;

    cursor: pointer;
}

.bb4-partner-auth--password
.bb4-partner-auth__password-toggle:hover {
    background: #F5F5F5;
}

.bb4-partner-auth--password
.bb4-partner-auth__password-toggle svg {
    display: block;

    width: 20px;
    height: 20px;
}


/*
 * =========================================================
 * 10. SUBMIT
 * =========================================================
 */

.bb4-partner-auth--password
.bb4-partner-auth__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

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

    padding: 12px 20px;

    border: 1px solid #222326;
    border-radius: 12px;

    background: #222326;
    color: #FFFFFF;

    font-size: 0.875rem;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    transition:
        background .18s ease,
        color .18s ease,
        opacity .18s ease;
}

.bb4-partner-auth--password
.bb4-partner-auth__submit:hover:not(:disabled) {
    background: #111111;
    color: #FFFFFF;
}

.bb4-partner-auth--password
.bb4-partner-auth__submit:disabled {
    opacity: .45;

    cursor: not-allowed;
}

.bb4-partner-auth--password
.bb4-partner-auth__submit svg {
    width: 18px;
    height: 18px;

    color: inherit;
}

.bb4-partner-auth__password-primary {
    margin-top: 24px;
}


/*
 * =========================================================
 * 11. INFORMATION
 * =========================================================
 */

.bb4-partner-auth__password-info {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    width: 100%;

    margin-top: 25px;
    padding: 17px 18px;

    border: 1px solid #E6E9EE;
    border-radius: 12px;

    background: #F8FAFC;
    color: #56616C;

    text-align: left;
}

.bb4-partner-auth__password-info > svg {
    flex: 0 0 20px;

    width: 20px;
    height: 20px;

    margin-top: 2px;

    color: #65717E;
}

.bb4-partner-auth__password-info > div {
    flex: 1;
    min-width: 0;
}

.bb4-partner-auth__password-info strong {
    display: block;

    margin-bottom: 6px;

    color: #293440;

    font-size: 0.8rem;
    font-weight: 800;
}

.bb4-partner-auth__password-info p {
    margin: 0;

    color: #68727B;

    font-size: 0.79rem;
    line-height: 1.7;
}


/*
 * =========================================================
 * 12. RESPONSE MESSAGE
 * =========================================================
 */

.bb4-partner-auth__password-message {
    width: 100%;

    padding: 15px 17px;

    border: 1px solid #EAEAEA;
    border-radius: 11px;

    background: #F8F8F8;
    color: #555555;

    font-size: 0.8rem;
    line-height: 1.7;
    text-align: center;

    overflow-wrap: anywhere;
}

.bb4-partner-auth__password-message.is-success {
    border-color: #DCEBDD;

    background: #F1FAF2;
    color: #27683C;
}

.bb4-partner-auth__password-message.is-error {
    border-color: #F0D6D6;

    background: #FFF5F5;
    color: #BB3636;
}


/*
 * =========================================================
 * 13. COUNTDOWN
 * =========================================================
 */

.bb4-partner-auth__password-timer {
    width: 100%;

    margin-bottom: 28px;
    padding: 17px 19px;

    border: 1px solid #F0E5AE;
    border-radius: 12px;

    background: #FFFCEF;

    text-align: left;
}

.bb4-partner-auth__password-timer > div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}

.bb4-partner-auth__password-timer span {
    color: #74672A;

    font-size: 0.8rem;
    font-weight: 700;
}

.bb4-partner-auth__password-timer strong {
    color: #222326;

    font-size: 1.1rem;
    font-weight: 800;

    font-variant-numeric: tabular-nums;
}

.bb4-partner-auth__password-timer strong.is-expired {
    color: #C44747;
}

.bb4-partner-auth__password-timer p {
    margin: 8px 0 0;

    color: #958751;

    font-size: 0.73rem;
    line-height: 1.6;
}


/*
 * =========================================================
 * 14. BACK LINK
 * =========================================================
 */

.bb4-partner-auth--password
.bb4-partner-auth__password-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    margin-top: 28px;

    color: #55565A;

    font-size: 0.8rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        color .18s ease;
}

.bb4-partner-auth--password
.bb4-partner-auth__password-back:hover {
    color: #222326;
}

.bb4-partner-auth__password-back svg {
    width: 17px;
    height: 17px;
}


/*
 * =========================================================
 * 15. FOOTER
 * =========================================================
 */

.bb4-partner-auth--password
.bb4-partner-auth__footer {
    margin-top: 35px;

    color: #A0A0A0;

    font-size: 0.72rem;
}


/*
 * =========================================================
 * 16. MOBILE
 * =========================================================
 */

@media (max-width: 600px) {

    .bb4-partner-auth--password {
        align-items: flex-start;

        padding: 45px 20px 55px;
    }

    .bb4-partner-auth--password
    .bb4-partner-auth__brand {
        margin-bottom: 30px;
    }

    .bb4-partner-auth__password-icon {
        width: 68px;
        height: 68px;

        margin-bottom: 22px;
    }

    .bb4-partner-auth__password-icon svg {
        width: 33px;
        height: 33px;
    }

    .bb4-partner-auth__password-title {
        font-size: 1.65rem;
    }

    .bb4-partner-auth__password-timer {
        padding: 15px;
    }

}


/*
 * =========================================================
 * 17. REDUCED MOTION
 * =========================================================
 */

@media (prefers-reduced-motion: reduce) {

    .bb4-partner-auth--password *,
    .bb4-partner-auth--password *::before,
    .bb4-partner-auth--password *::after {
        transition: none !important;
    }

}

/*
 * =========================================================
 * BESTB4 PARTNER
 * TWO-STEP AUTHENTICATION
 *
 * Version: 2.0
 *
 * Dependencies:
 * - bb4-framework.css
 * - partner-auth.css
 * =========================================================
 */


/*
 * =========================================================
 * 1. PAGE
 * =========================================================
 */

body:has(.bb4-partner-auth--two-step) {
    margin: 0;

    background: #FFFFFF;

    font-family:
        "Google Sans",
        Arial,
        sans-serif;
}

.bb4-partner-auth--two-step {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 100vh;
    min-height: 100dvh;

    padding: 50px 20px;

    background: #FFFFFF;

    font-family:
        "Google Sans",
        Arial,
        sans-serif;
}

.bb4-partner-auth--two-step,
.bb4-partner-auth--two-step *,
.bb4-partner-auth--two-step *::before,
.bb4-partner-auth--two-step *::after {
    box-sizing: border-box;
}

.bb4-partner-auth--two-step * {
    font-family: inherit;
}

.bb4-partner-auth--two-step .is-hidden {
    display: none !important;
}


/*
 * =========================================================
 * 2. SHELL
 * =========================================================
 */

.bb4-partner-auth--two-step
.bb4-partner-auth__shell {
    width: 100%;
    max-width: 460px;
}

.bb4-partner-auth--two-step
.bb4-partner-auth__brand {
    margin-bottom: 30px;
}


/*
 * =========================================================
 * 3. CONTENT
 * =========================================================
 */

.bb4-partner-auth__two-step-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;

    text-align: center;
}


/*
 * =========================================================
 * 4. ICON
 * =========================================================
 */

.bb4-partner-auth__two-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 76px;
    height: 76px;

    margin-bottom: 24px;

    border-radius: 50%;

    background: #FFFDE4;
    color: #222326;
}

.bb4-partner-auth__two-step-icon svg {
    width: 39px;
    height: 39px;
}


/*
 * =========================================================
 * 5. EYEBROW
 * =========================================================
 */

.bb4-partner-auth__two-step-eyebrow {
    display: block;

    margin-bottom: 11px;

    color: #8D8327;

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.5;
}


/*
 * =========================================================
 * 6. TITLE
 * =========================================================
 */

.bb4-partner-auth__two-step-title {
    margin: 0 0 13px;

    color: #222326;

    font-size: clamp(
        1.65rem,
        3vw,
        1.95rem
    );

    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.25;
}


/*
 * =========================================================
 * 7. DESCRIPTION
 * =========================================================
 */

.bb4-partner-auth__two-step-description {
    max-width: 410px;

    margin: 0 0 30px;

    color: #85868A;

    font-size: 0.875rem;
    line-height: 1.75;
}

.bb4-partner-auth__two-step-description strong {
    color: #55565A;

    font-weight: 700;
}


/*
 * =========================================================
 * 8. FORM
 * =========================================================
 */

.bb4-partner-auth__two-step-form {
    display: flex;
    flex-direction: column;

    width: 100%;

    text-align: left;
}


/*
 * =========================================================
 * 9. CODE LABEL
 * =========================================================
 */

.bb4-partner-auth__two-step-label {
    display: block;

    margin-bottom: 13px;

    color: #222326;

    font-size: 0.83rem;
    font-weight: 700;
    line-height: 1.5;

    text-align: center;
}


/*
 * =========================================================
 * 10. OTP CONTAINER
 * =========================================================
 */

.bb4-partner-auth__two-step-code {
    display: grid;

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

    gap: 10px;

    width: 100%;

    margin: 0;
}


/*
 * =========================================================
 * 11. OTP INPUTS
 * =========================================================
 */

.bb4-partner-auth__two-step-digit {
    display: block;

    width: 100%;
    min-width: 0;
    height: 62px;

    margin: 0;
    padding: 0;

    border: 1.5px solid #E0E0E0;
    border-radius: 12px;

    outline: none;

    background: #FAFAFA;
    color: #222326;

    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1;

    text-align: center;

    caret-color: #222326;

    font-variant-numeric: tabular-nums;

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

.bb4-partner-auth__two-step-digit:hover {
    border-color: #BEBEBE;

    background: #FFFFFF;
}

.bb4-partner-auth__two-step-digit.has-value {
    border-color: #77787C;

    background: #FFFFFF;
}

.bb4-partner-auth__two-step-digit:focus {
    border-color: #222326;

    background: #FFFEEE;

    box-shadow:
        0 0 0 3px rgba(245, 235, 41, .35);
}


/*
 * =========================================================
 * 12. CODE HELP
 * =========================================================
 */

.bb4-partner-auth__two-step-code-help {
    margin: 13px 0 0;

    color: #999A9D;

    font-size: 0.75rem;
    line-height: 1.6;

    text-align: center;
}


/*
 * =========================================================
 * 13. AUTOFILL
 * =========================================================
 */

.bb4-partner-auth__two-step-autofill {
    position: absolute;

    width: 1px;
    height: 1px;

    overflow: hidden;

    clip-path: inset(50%);

    white-space: nowrap;
}

.bb4-partner-auth__two-step-autofill input {
    width: 1px;
    height: 1px;

    padding: 0;

    border: 0;
}


/*
 * =========================================================
 * 14. SUBMIT
 * =========================================================
 */

.bb4-partner-auth--two-step
.bb4-partner-auth__two-step-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    width: 100%;

    min-height: 51px;

    margin-top: 26px;
    padding: 12px 20px;

    border: 1px solid #222326;
    border-radius: 12px;

    background: #222326;
    color: #FFFFFF;

    font-size: 0.875rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        background .18s ease,
        color .18s ease,
        opacity .18s ease;
}

.bb4-partner-auth--two-step
.bb4-partner-auth__two-step-submit:hover:not(:disabled) {
    background: #111111;
    color: #FFFFFF;
}

.bb4-partner-auth--two-step
.bb4-partner-auth__two-step-submit:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.bb4-partner-auth__two-step-submit svg {
    width: 19px;
    height: 19px;

    color: inherit;
}

.bb4-partner-auth__two-step-submit.is-loading {
    cursor: progress;
}


/*
 * =========================================================
 * 15. RESPONSE
 * =========================================================
 */

.bb4-partner-auth__two-step-message {
    width: 100%;

    margin-top: 18px;
    padding: 15px 17px;

    border: 1px solid #EAEAEA;
    border-radius: 11px;

    background: #F8F8F8;
    color: #555555;

    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.7;

    text-align: center;
}

.bb4-partner-auth__two-step-message.is-error {
    border-color: #F0D6D6;

    background: #FFF5F5;
    color: #BB3636;
}

.bb4-partner-auth__two-step-message.is-success {
    border-color: #DCEBDD;

    background: #F1FAF2;
    color: #27683C;
}


/*
 * =========================================================
 * 16. INFORMATION
 * =========================================================
 */

.bb4-partner-auth__two-step-info {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    width: 100%;

    margin-top: 27px;
    padding: 17px 18px;

    border: 1px solid #E6E9EE;
    border-radius: 12px;

    background: #F8FAFC;
    color: #56616C;

    text-align: left;
}

.bb4-partner-auth__two-step-info > svg {
    flex: 0 0 20px;

    width: 20px;
    height: 20px;

    margin-top: 2px;

    color: #65717E;
}

.bb4-partner-auth__two-step-info > div {
    flex: 1;
    min-width: 0;
}

.bb4-partner-auth__two-step-info strong {
    display: block;

    margin-bottom: 6px;

    color: #293440;

    font-size: 0.8rem;
    font-weight: 800;
}

.bb4-partner-auth__two-step-info p {
    margin: 0;

    color: #68727B;

    font-size: 0.79rem;
    line-height: 1.7;
}


/*
 * =========================================================
 * 17. BACK
 * =========================================================
 */

.bb4-partner-auth--two-step
.bb4-partner-auth__two-step-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    margin-top: 28px;

    color: #55565A;

    font-size: 0.8rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        color .18s ease;
}

.bb4-partner-auth--two-step
.bb4-partner-auth__two-step-back:hover {
    color: #222326;
}

.bb4-partner-auth__two-step-back svg {
    width: 17px;
    height: 17px;
}


/*
 * =========================================================
 * 18. FOOTER
 * =========================================================
 */

.bb4-partner-auth--two-step
.bb4-partner-auth__footer {
    margin-top: 35px;

    color: #A0A0A0;

    font-size: 0.72rem;

    text-align: center;
}


/*
 * =========================================================
 * 19. NOSCRIPT
 * =========================================================
 */

.bb4-partner-auth__two-step-noscript {
    position: fixed;

    right: 15px;
    bottom: 15px;
    left: 15px;

    z-index: 1000;

    padding: 15px;

    border: 1px solid #F0D6D6;
    border-radius: 11px;

    background: #FFF5F5;
    color: #BB3636;

    font-size: 0.85rem;
    font-weight: 700;

    text-align: center;
}


/*
 * =========================================================
 * 20. FOCUS
 * =========================================================
 */

.bb4-partner-auth--two-step :is(
    a,
    button
):focus-visible {
    outline: 3px solid #F5EB29;
    outline-offset: 3px;
}


/*
 * =========================================================
 * 21. MOBILE
 * =========================================================
 */

@media (max-width: 600px) {

    .bb4-partner-auth--two-step {
        align-items: flex-start;

        padding: 45px 20px 55px;
    }

    .bb4-partner-auth__two-step-icon {
        width: 68px;
        height: 68px;

        margin-bottom: 22px;
    }

    .bb4-partner-auth__two-step-icon svg {
        width: 35px;
        height: 35px;
    }

    .bb4-partner-auth__two-step-title {
        font-size: 1.65rem;
    }

    .bb4-partner-auth__two-step-code {
        gap: 7px;
    }

    .bb4-partner-auth__two-step-digit {
        height: 56px;

        border-radius: 10px;

        font-size: 1.4rem;
    }

}


/*
 * =========================================================
 * 22. SMALL MOBILE
 * =========================================================
 */

@media (max-width: 380px) {

    .bb4-partner-auth--two-step {
        padding-inline: 15px;
    }

    .bb4-partner-auth__two-step-code {
        gap: 5px;
    }

    .bb4-partner-auth__two-step-digit {
        height: 49px;

        border-radius: 9px;

        font-size: 1.2rem;
    }

}


/*
 * =========================================================
 * 23. REDUCED MOTION
 * =========================================================
 */

@media (prefers-reduced-motion: reduce) {

    .bb4-partner-auth--two-step *,
    .bb4-partner-auth--two-step *::before,
    .bb4-partner-auth--two-step *::after {
        transition: none !important;
    }

}