/* =========================================================
   ALAQ REGISTER
========================================================= */

:root {
    --alaq-deep: #041e1d;
    --alaq-dark: #06302e;
    --alaq-green: #0b4a47;
    --alaq-green-soft: #145d58;

    --alaq-ivory: #f4f0e7;
    --alaq-cream: #e8e1d5;
    --alaq-white: #fffdf8;

    --alaq-text: #123230;
    --alaq-muted: #708481;

    --alaq-border:
        rgba(
            6,
            48,
            46,
            0.14
        );

    --alaq-danger:
        #a63d38;

    --alaq-danger-bg:
        #fff3f1;

    --alaq-success-bg:
        #edf6f4;
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;

    min-height: 100%;
}


body {
    min-height: 100vh;

    font-family:
        "Poppins",
        Arial,
        Helvetica,
        sans-serif;

    color:
        var(--alaq-text);

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


a {
    color: inherit;

    text-decoration: none;
}


button,
input {
    font: inherit;
}


button {
    cursor: pointer;
}


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

.register-page {
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        minmax(
            0,
            1.08fr
        )
        minmax(
            430px,
            0.92fr
        );
}


/* =========================================================
   LEFT SIDE
========================================================= */

.register-visual {
    position: relative;

    min-height: 100vh;

    overflow: hidden;

    padding: 48px;

    display: flex;

    flex-direction: column;

    justify-content:
        space-between;

    background:
        linear-gradient(
            145deg,
            var(--alaq-green),
            var(--alaq-deep)
        );

    color:
        var(--alaq-ivory);
}


.register-visual::before {
    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    top: -260px;

    right: -220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                244,
                240,
                231,
                0.13
            ),
            transparent
            68%
        );

    pointer-events: none;
}


.register-visual::after {
    content: "";

    position: absolute;

    width: 460px;

    height: 460px;

    left: -180px;

    bottom: -180px;

    border-radius: 50%;

    border:
        1px solid
        rgba(
            244,
            240,
            231,
            0.10
        );

    pointer-events: none;
}


/* =========================================================
   BRAND
========================================================= */

.register-brand {
    position: relative;

    z-index: 2;

    width: 112px;

    display:
        inline-flex;
}


.register-brand img {
    width: 100%;

    max-height: 85px;

    object-fit: contain;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.register-visual-content {
    position: relative;

    z-index: 2;

    max-width: 610px;
}


.register-badge {
    display:
        inline-block;

    margin-bottom: 23px;

    padding:
        8px
        13px;

    border:
        1px solid
        rgba(
            244,
            240,
            231,
            0.20
        );

    background:
        rgba(
            244,
            240,
            231,
            0.06
        );

    color:
        var(--alaq-cream);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.register-visual-content h1 {
    max-width: 620px;

    margin:
        0
        0
        22px;

    color:
        var(--alaq-ivory);

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size:
        clamp(
            44px,
            5vw,
            72px
        );

    font-weight: 500;

    line-height: 1;

    letter-spacing: -2.5px;
}


.register-visual-content p {
    max-width: 500px;

    margin: 0;

    color:
        rgba(
            244,
            240,
            231,
            0.68
        );

    font-size: 14px;

    line-height: 1.9;
}


/* =========================================================
   LEFT FOOTER
========================================================= */

.register-visual-footer {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;

    color:
        rgba(
            244,
            240,
            231,
            0.46
        );

    font-size: 11px;
}


.register-visual-footer a {
    color:
        var(--alaq-cream);
}


/* =========================================================
   RIGHT PANEL
========================================================= */

.register-panel {
    min-height: 100vh;

    padding:
        50px;

    display: flex;

    align-items: center;

    justify-content: center;

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


.register-card {
    width: 100%;

    max-width: 450px;
}


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

.register-mobile-logo {
    display: none;

    margin-bottom: 25px;
}


.register-mobile-logo img {
    width: 90px;

    max-height: 68px;

    object-fit: contain;
}


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

.register-card-header {
    margin-bottom: 30px;
}


.register-eyebrow {
    display: block;

    margin-bottom: 11px;

    color:
        var(--alaq-green-soft);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}


.register-card-header h2 {
    margin:
        0
        0
        12px;

    color:
        var(--alaq-deep);

    font-size: 38px;

    font-weight: 500;

    line-height: 1.05;

    letter-spacing: -1.5px;
}


.register-card-header p {
    margin: 0;

    color:
        var(--alaq-muted);

    font-size: 12px;

    line-height: 1.8;
}


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

.form-group {
    margin-bottom: 18px;
}


.form-group label {
    display: block;

    margin-bottom: 8px;

    color:
        var(--alaq-deep);

    font-size: 12px;

    font-weight: 600;
}


.form-group input {
    width: 100%;

    height: 51px;

    padding:
        0
        14px;

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

    border-radius: 0;

    outline: none;

    background:
        var(--alaq-white);

    color:
        var(--alaq-text);

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


.form-group input::placeholder {
    color:
        #a8b2b0;
}


.form-group input:focus {
    border-color:
        var(--alaq-green);

    box-shadow:
        0 0 0 3px
        rgba(
            11,
            74,
            71,
            0.07
        );
}


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

.password-wrapper {
    position: relative;
}


.password-wrapper input {
    padding-right: 76px;
}


.password-toggle {
    position: absolute;

    top: 50%;

    right: 12px;

    transform:
        translateY(-50%);

    border: 0;

    background:
        transparent;

    color:
        var(--alaq-green);

    font-size: 11px;

    font-weight: 700;
}


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

.register-button {
    width: 100%;

    min-height: 52px;

    margin-top: 5px;

    border:
        1px solid
        var(--alaq-green);

    background:
        var(--alaq-green);

    color:
        var(--alaq-white);

    font-size: 12px;

    font-weight: 700;

    transition:
        background
        0.2s ease,
        transform
        0.15s ease,
        opacity
        0.15s ease;
}


.register-button:hover {
    transform:
        translateY(-1px);

    background:
        var(--alaq-deep);
}


.register-button:disabled {
    opacity: 0.55;

    cursor: not-allowed;

    transform: none;
}


/* =========================================================
   ALERTS
========================================================= */

.register-alert {
    display: none;

    margin-bottom: 18px;

    padding:
        12px
        14px;

    font-size: 11px;

    line-height: 1.7;
}


.register-alert.show {
    display: block;
}


.register-alert.error {
    border:
        1px solid
        rgba(
            166,
            61,
            56,
            0.22
        );

    background:
        var(--alaq-danger-bg);

    color:
        var(--alaq-danger);
}


.register-alert.success {
    border:
        1px solid
        rgba(
            11,
            74,
            71,
            0.18
        );

    background:
        var(--alaq-success-bg);

    color:
        var(--alaq-green);
}


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

.register-divider {
    margin:
        27px
        0;

    display: flex;

    align-items: center;

    gap: 14px;

    color:
        #99a6a3;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1px;
}


.register-divider::before,
.register-divider::after {
    content: "";

    flex: 1;

    height: 1px;

    background:
        var(--alaq-border);
}


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

.register-login {
    text-align: center;

    color:
        var(--alaq-muted);

    font-size: 11px;
}


.register-login a {
    color:
        var(--alaq-green);

    font-weight: 700;
}


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

.register-note {
    margin-top: 22px;

    color:
        #9ba8a5;

    text-align: center;

    font-size: 9px;

    line-height: 1.7;
}


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

@media (
    max-width: 820px
) {

    .register-page {
        display: block;
    }


    .register-visual {
        display: none;
    }


    .register-panel {
        min-height: 100vh;

        padding:
            35px
            22px;
    }


    .register-mobile-logo {
        display: block;
    }

}


@media (
    max-width: 450px
) {

    .register-panel {
        padding:
            26px
            18px;
    }


    .register-card-header h2 {
        font-size: 32px;
    }


    .form-group input,
    .register-button {
        height: 50px;
    }

}