/* ==========================================================================
   SEN DARAL — REGISTER / BUYER
   FULL WIDTH PREMIUM
   ========================================================================== */

.buyer-register-page {
    position: relative;
    padding-bottom: 70px;
    min-height: calc(100vh - 80px);
    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(215, 169, 61, .10),
            transparent 25%
        ),
        radial-gradient(
            circle at 92% 88%,
            rgba(13, 79, 69, .12),
            transparent 28%
        ),
        #f5f7f5;
}


/* ==========================================================================
   BACKGROUND ORBS
   ========================================================================== */

.buyer-register-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(1px);
}

.buyer-register-orb-1 {
    width: 520px;
    height: 520px;
    top: -300px;
    right: -190px;
    border: 1px solid rgba(13, 79, 69, .08);
}

.buyer-register-orb-2 {
    width: 620px;
    height: 620px;
    bottom: -400px;
    left: -350px;
    border: 1px solid rgba(215, 169, 61, .12);
}


/* ==========================================================================
   CONTAINER — LARGEUR ÉCRAN
   ========================================================================== */

.buyer-register-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    padding: 0 40px;
}


/* ==========================================================================
   MAIN LAYOUT
   ========================================================================== */

.buyer-register-layout {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);

    width: 100%;
    max-width: 100%;

    min-height: calc(100vh - 160px);

    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(10, 55, 48, .08);
    border-radius: 30px;

    box-shadow:
        0 30px 80px rgba(8, 58, 52, .12),
        0 8px 30px rgba(8, 58, 52, .06);
}


/* ==========================================================================
   VISUAL PANEL
   ========================================================================== */

.buyer-register-visual {
    position: relative;
    display: block;
    min-height: 700px;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(
            145deg,
            rgba(5, 55, 48, .96),
            rgba(11, 91, 78, .88)
        ),
        url("../../img/home/hero.png")
            center / cover no-repeat;
}

.buyer-register-visual-content {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 72px 60px 60px;
}


/* ==========================================================================
   VISUAL TITLE
   ========================================================================== */

.buyer-register-visual h1 {
    max-width: 560px;
    margin: 0;
    color: #f5f8f6;
    font-size: clamp(2.5rem, 4vw, 4.4rem);
    line-height: 1.02;
    letter-spacing: -2.5px;
    font-weight: 800;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .12);
}

.buyer-register-visual h1 span {
    display: block;
    color: #f1ca67;
}

.buyer-register-visual > .buyer-register-visual-content > p {
    max-width: 530px;
    margin: 20px 0 30px;
    color: rgba(255,255,255,.76);
    font-size: 1rem;
    line-height: 1.7;
}

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

.buyer-register-benefits {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.buyer-benefit {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.buyer-benefit-icon {
    flex: 0 0 48px;

    width: 48px;
    height: 48px;

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

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 14px;

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

    color: #f1ca67;

    font-size: 1.05rem;

    backdrop-filter: blur(12px);
}

.buyer-benefit strong {
    display: block;

    margin-bottom: 4px;

    color: #fff;

    font-size: .94rem;
    font-weight: 800;
}

.buyer-benefit span {
    display: block;

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

    font-size: .79rem;
    line-height: 1.55;
}


/* ==========================================================================
   FORM PANEL
   ========================================================================== */

.buyer-register-form-panel {
    padding: 62px 72px 58px;

    background: #fff;
}


/* ==========================================================================
   FORM HEADER
   ========================================================================== */

.buyer-register-form-header {
    display: flex;
    align-items: center;
    gap: 17px;

    margin-bottom: 38px;
}

.buyer-register-logo span {
    width: 56px;
    height: 56px;

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            #0d5c50,
            #083a34
        );

    color: #f1ca67;

    box-shadow:
        0 12px 28px rgba(8,58,52,.18);
}

.buyer-register-form-kicker {
    display: block;

    margin-bottom: 4px;

    color: #0d5c50;

    font-size: .70rem;
    font-weight: 800;
    letter-spacing: .13em;
}

.buyer-register-form-header h2 {
    margin: 0;

    color: #123a35;

    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -.7px;
}

.buyer-register-form-header p {
    margin: 5px 0 0;

    color: #7b8986;

    font-size: .84rem;
}


/* ==========================================================================
   SECTIONS
   ========================================================================== */

.buyer-form-section {
    margin-bottom: 34px;
}

.buyer-form-section-title {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 20px;
}

.buyer-form-section-title > span {
    width: 32px;
    height: 32px;

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

    border-radius: 10px;

    background: #edf5f2;
    color: #0d5c50;

    font-size: .69rem;
    font-weight: 800;
}

.buyer-form-section-title strong {
    display: block;

    color: #173b36;

    font-size: .91rem;
    font-weight: 800;
}

.buyer-form-section-title small {
    display: block;

    margin-top: 2px;

    color: #8a9693;

    font-size: .71rem;
}


/* ==========================================================================
   CHAMPS
   ========================================================================== */

.buyer-form-field {
    position: relative;
}

.buyer-form-field > i {
    position: absolute;

    left: 16px;
    bottom: 15px;

    color: #78908b;

    pointer-events: none;

    z-index: 3;
}

.buyer-form-field .form-label {
    display: block;

    margin-bottom: 8px;

    color: #294640;

    font-size: .78rem;
    font-weight: 700;
}

.buyer-form-field .form-control {
    min-height: 52px;

    padding:
        13px
        45px
        13px
        45px;

    border: 1px solid #dce5e2;
    border-radius: 14px;

    background: #fbfcfc;

    color: #183b35;

    font-size: .86rem;

    box-shadow: none;

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

.buyer-form-field .form-control::placeholder {
    color: #a8b3b0;
}

.buyer-form-field .form-control:hover {
    border-color: #c7d8d3;
}

.buyer-form-field .form-control:focus {
    border-color: #0d6b5c;

    background: #fff;

    box-shadow:
        0 0 0 4px rgba(13,107,92,.08);
}


/* ==========================================================================
   PASSWORD
   ========================================================================== */

.buyer-password-field .form-control {
    padding-right: 52px;
}

.buyer-password-toggle {
    position: absolute;

    right: 9px;
    bottom: 8px;

    width: 36px;
    height: 36px;

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

    border: 0;
    border-radius: 9px;

    background: transparent;

    color: #83918e;

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

.buyer-password-toggle:hover {
    background: #edf5f2;
    color: #0d5c50;
}


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

.buyer-form-help {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-top: 7px;

    color: #899591;

    font-size: .68rem;
}

.buyer-form-help i {
    color: #0d6b5c;
}


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

.buyer-register-terms {
    margin: 4px 0 24px;
    padding: 15px 17px;

    border: 1px solid #e4ebe8;
    border-radius: 14px;

    background: #f8faf9;
}

.buyer-register-check {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.buyer-register-check input {
    flex: 0 0 auto;

    width: 17px;
    height: 17px;

    margin-top: 1px;

    accent-color: #0d5c50;
}

.buyer-register-check label {
    color: #687773;

    font-size: .73rem;
    line-height: 1.5;

    cursor: pointer;
}


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

.buyer-register-submit {
    width: 100%;
    min-height: 56px;

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

    gap: 12px;

    border: 0;
    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #0d6b5c,
            #083a34
        );

    color: #fff;

    font-size: .86rem;
    font-weight: 800;

    box-shadow:
        0 14px 32px rgba(8,58,52,.20);

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

.buyer-register-submit i {
    color: #f1ca67;

    transition:
        transform .2s ease;
}

.buyer-register-submit:hover {
    color: #fff;

    transform: translateY(-2px);

    box-shadow:
        0 18px 38px rgba(8,58,52,.26);

    filter: brightness(1.04);
}

.buyer-register-submit:hover i {
    transform: translateX(4px);
}


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

.buyer-register-login {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;
    gap: 5px;

    margin-top: 22px;

    color: #87938f;

    font-size: .75rem;
}

.buyer-register-login a {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    color: #0d5c50;

    font-weight: 800;
    text-decoration: none;
}

.buyer-register-login a:hover {
    color: #083a34;
}


/* ==========================================================================
   TABLETTE LARGE
   ========================================================================== */

@media (max-width: 1199.98px) {

    .buyer-register-container {
        width: calc(100% - 36px);
    }

    .buyer-register-layout {
        grid-template-columns:
            minmax(360px, .85fr)
            minmax(520px, 1.15fr);
    }

    .buyer-register-visual-content {
        padding: 55px 48px;
    }

    .buyer-register-form-panel {
        padding: 52px 50px;
    }

}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 991.98px) {

    .buyer-register-page {
        padding: 32px 0 55px;
    }

    .buyer-register-container {
        width: calc(100% - 30px);
        padding: 0 25px;
    }

    .buyer-register-layout {
        grid-template-columns: 1fr;

        min-height: auto;

        border-radius: 26px;
    }

    .buyer-register-visual {
        min-height: 430px;
    }

    .buyer-register-visual-content {
        padding: 52px;
    }

    .buyer-register-visual h1 {
        font-size: clamp(2.7rem, 7vw, 4rem);
    }

    .buyer-register-benefits {
        display: grid;
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 16px;
    }

    .buyer-benefit {
        flex-direction: column;
    }

    .buyer-register-form-panel {
        padding: 50px;
    }

}


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

@media (max-width: 767.98px) {

    .buyer-register-page {
        padding: 25px 0;
        padding-left: 0;
        padding-right: 0;
        overflow-x: hidden;
    }

    .buyer-register-container {
        width: 100%;
        max-width: 100%;
        padding-left: 11px;
        padding-right: 11px;
        margin: 0;
    }

    .buyer-register-layout {
        width: 100%;
        margin: 0;
    }

    .buyer-register-visual {
        min-height: auto;
    }

    .buyer-register-visual-content {
        padding: 38px 27px;
    }

    .buyer-register-eyebrow {
        margin-bottom: 20px;
        font-size: .64rem;
    }

    .buyer-register-visual h1 {
        font-size: 2.5rem;
        letter-spacing: -1.7px;
    }

    .buyer-register-visual > .buyer-register-visual-content > p {
        margin: 20px 0 30px;

        font-size: .88rem;
        line-height: 1.65;
    }

    .buyer-register-benefits {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .buyer-benefit {
        flex-direction: row;
    }

    .buyer-benefit-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .buyer-benefit strong {
        font-size: .80rem;
    }

    .buyer-benefit span {
        font-size: .68rem;
    }

    .buyer-register-form-panel {
        padding: 35px 24px;
    }

    .buyer-register-form-header {
        align-items: flex-start;
        margin-bottom: 30px;
    }

    .buyer-register-logo span {
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }

    .buyer-register-form-header h2 {
        font-size: 1.45rem;
    }

    .buyer-register-form-header p {
        font-size: .75rem;
    }

    .buyer-form-section {
        margin-bottom: 27px;
    }

}


/* ==========================================================================
   PETITS ÉCRANS
   ========================================================================== */

@media (max-width: 420px) {

    .buyer-register-container {
        width: calc(100% - 12px);
    }

    .buyer-register-visual-content {
        padding: 32px 20px;
    }

    .buyer-register-visual h1 {
        font-size: 2.15rem;
    }

    .buyer-register-form-panel {
        padding: 29px 18px;
    }

    .buyer-form-section-title small {
        display: none;
    }

    .buyer-register-submit {
        min-height: 52px;
    }

}



.buyer-register-logo span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    padding: 12px;

    border-radius: 16px;

    background: linear-gradient(
        145deg,
        #0d5c50,
        #083a34
    );

    color: #f1ca67;

    box-shadow:
        0 10px 25px rgba(8, 58, 52, .18);
}

.buyer-register-logo span i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border-radius: 9px;

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

    color: #f1ca67;

    font-size: 1rem;
    line-height: 1;
}

.sd-footer {
    margin-top: 0 !important;
}