.register-page {
min-height: 100vh;
background: #f8fbff;
}

.register-section {
position: relative;
overflow: hidden;
padding: 90px 0 100px;
background:
linear-gradient(
135deg,
#f8fbff 0%,
#eef7ff 55%,
#e7f3ff 100%
);
}

.register-section::before {
content: "";
position: absolute;
width: 450px;
height: 450px;
top: -250px;
right: -150px;
border-radius: 50%;
background: rgba(59, 130, 246, 0.07);
}

.register-section::after {
content: "";
position: absolute;
width: 320px;
height: 320px;
bottom: -210px;
left: -150px;
border-radius: 50%;
background: rgba(147, 197, 253, 0.10);
}

.register-section .container {
width: min(calc(100% - 40px), 1180px);
margin: 0 auto;
}

.register-container {
position: relative;
z-index: 2;

display: grid;


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


align-items: center;


gap: 90px;

}

/* =========================================================
REGISTER INTRO
========================================================= */

.register-intro {
max-width: 600px;
}

.register-intro h1 {
margin: 15px 0 20px;

color: #0f172a;


font-size:
    clamp(
        42px,
        5vw,
        62px
    );


line-height: 1.04;


font-weight: 800;


letter-spacing: -2.7px;

}

.register-intro h1 span {
display: block;
color: #3b82f6;
}

.register-intro > p {
max-width: 540px;

margin: 0;


color: #64748b;


font-size: 16px;


line-height: 1.8;

}

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

.register-benefits {
display: flex;
flex-direction: column;
gap: 17px;

margin-top: 40px;

}

.register-benefit {
display: flex;
align-items: center;

gap: 14px;

}

.register-benefit-icon {
width: 48px;
height: 48px;

flex-shrink: 0;


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


border: 1px solid #dbeafe;


border-radius: 13px;


background: #eff6ff;


color: #3b82f6;


font-size: 18px;

}

.register-benefit > div:last-child {
display: flex;
flex-direction: column;
gap: 4px;
}

.register-benefit strong {
color: #334155;

font-size: 13px;


font-weight: 800;

}

.register-benefit span {
color: #94a3b8;

font-size: 11px;


line-height: 1.5;

}

/* =========================================================
REGISTER CARD
========================================================= */

.register-card {
width: 100%;
box-sizing: border-box;

padding: 34px;


border: 1px solid #dbeafe;


border-radius: 25px;


background: #ffffff;


box-shadow:
    0 25px 65px
    rgba(
        37,
        99,
        235,
        0.09
    );

}

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

.register-card-header {
text-align: center;

margin-bottom: 25px;

}

.register-card-icon {
width: 52px;
height: 52px;

margin: 0 auto 15px;


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


border-radius: 14px;


background: #eff6ff;


color: #3b82f6;


font-size: 21px;

}

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

color: #0f172a;


font-size: 26px;


line-height: 1.2;


font-weight: 800;


letter-spacing: -0.7px;

}

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

color: #64748b;


font-size: 12px;


line-height: 1.6;

}

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

.register-alert {
display: flex;
align-items: center;

gap: 10px;


margin-bottom: 20px;


padding: 12px 13px;


border-radius: 10px;


font-size: 11px;


line-height: 1.5;


transition:
    opacity 0.3s ease,
    transform 0.3s ease;

}

.register-alert i {
flex-shrink: 0;
font-size: 15px;
}

.register-alert-error {
border: 1px solid #fecaca;

background: #fef2f2;


color: #b91c1c;

}

.register-alert-success {
border: 1px solid #bfdbfe;

background: #eff6ff;


color: #2563eb;

}

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

.register-form {
display: flex;
flex-direction: column;

gap: 16px;

}

.register-form-row {
display: grid;

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


gap: 12px;

}

.register-form-group {
display: flex;
flex-direction: column;

gap: 7px;

}

.register-form-group label {
color: #334155;

font-size: 11px;


font-weight: 700;

}

.register-form-group small {
color: #94a3b8;

font-size: 9px;


line-height: 1.5;

}

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

.register-input {
position: relative;

width: 100%;

}

.register-input > i:first-child {
position: absolute;

top: 50%;
left: 13px;


z-index: 2;


transform: translateY(-50%);


color: #94a3b8;


font-size: 14px;


pointer-events: none;

}

.register-input input {
width: 100%;
height: 45px;

box-sizing: border-box;


padding:
    0 42px 0 38px;


border: 1px solid #dbe3ee;


border-radius: 10px;


outline: none;


background: #f8fafc;


color: #0f172a;


font-family: inherit;


font-size: 12px;


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

}

.register-input input::placeholder {
color: #94a3b8;
}

.register-input input:focus {
border-color: #60a5fa;

background: #ffffff;


box-shadow:
    0 0 0 3px
    rgba(
        59,
        130,
        246,
        0.08
    );

}

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

.password-toggle {
position: absolute;

top: 50%;
right: 8px;


width: 31px;
height: 31px;


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


transform: translateY(-50%);


padding: 0;


border: 0;


border-radius: 7px;


background: transparent;


color: #94a3b8;


cursor: pointer;


transition:
    background 0.2s ease,
    color 0.2s ease;

}

.password-toggle:hover {
background: #eff6ff;

color: #2563eb;

}

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

.register-terms {
display: flex;

align-items: flex-start;


gap: 9px;


margin-top: 2px;


color: #64748b;


font-size: 10px;


line-height: 1.6;


cursor: pointer;

}

.register-terms input {
width: 15px;
height: 15px;

flex-shrink: 0;


margin: 1px 0 0;


accent-color: #3b82f6;


cursor: pointer;

}

.register-terms a {
color: #2563eb;

font-weight: 700;


text-decoration: none;

}

.register-terms a:hover {
text-decoration: underline;
}

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

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

display: flex;


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


gap: 8px;


margin-top: 2px;


border: 1px solid #3b82f6;


border-radius: 10px;


background: #3b82f6;


color: #ffffff;


font-family: inherit;


font-size: 13px;


font-weight: 700;


cursor: pointer;


box-shadow:
    0 12px 25px
    rgba(
        59,
        130,
        246,
        0.15
    );


transition:
    all 0.25s ease;

}

.register-submit:hover {
border-color: #2563eb;

background: #2563eb;


transform: translateY(-2px);


box-shadow:
    0 15px 30px
    rgba(
        59,
        130,
        246,
        0.20
    );

}

.register-submit:active {
transform: translateY(0);
}

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

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

padding-top: 20px;


border-top: 1px solid #edf2f7;


text-align: center;


color: #94a3b8;


font-size: 11px;

}

.register-login a {
margin-left: 4px;

color: #2563eb;


font-weight: 800;


text-decoration: none;

}

.register-login a:hover {
text-decoration: underline;
}

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

@media (max-width: 1000px) {

.register-container {
    grid-template-columns:
        1fr;


    gap: 55px;


    max-width: 720px;
}


.register-intro {
    max-width: 700px;


    text-align: center;
}


.register-intro > p {
    margin-left: auto;
    margin-right: auto;
}


.register-benefits {
    display: grid;


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


    text-align: left;
}


.register-card {
    max-width: 620px;


    margin: 0 auto;
}

}

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

@media (max-width: 600px) {

.register-section {
    padding:
        65px 0 70px;
}


.register-section .container {
    width:
        calc(
            100% - 30px
        );
}


.register-container {
    gap: 40px;
}


.register-intro {
    text-align: left;
}


.register-intro h1 {
    font-size: 40px;


    letter-spacing:
        -1.9px;
}


.register-intro > p {
    font-size: 14px;
}


.register-benefits {
    display: flex;


    margin-top: 30px;
}


.register-benefit {
    align-items: flex-start;
}


.register-benefit-icon {
    width: 43px;
    height: 43px;


    font-size: 16px;
}


.register-benefit span {
    font-size: 10px;
}


.register-card {
    padding:
        25px 20px;


    border-radius:
        20px;
}


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


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


.register-form {
    gap: 15px;
}

}

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

@media (max-width: 380px) {

.register-section .container {
    width:
        calc(
            100% - 24px
        );
}


.register-section {
    padding-top: 55px;
}


.register-intro h1 {
    font-size: 35px;


    letter-spacing:
        -1.5px;
}


.register-card {
    padding:
        22px 17px;
}


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


.register-input input {
    height: 43px;


    padding-left: 36px;
}


.register-submit {
    min-height: 46px;
}

}
/* =========================================================
   PROFILE PHOTO UPLOAD
========================================================= */

.register-photo-upload {
    display: flex;
    align-items: center;

    gap: 15px;

    padding: 14px;

    border: 1px solid #dbe3ee;

    border-radius: 12px;

    background: #f8fafc;
}


.register-photo-preview {
    width: 64px;
    height: 64px;

    flex-shrink: 0;

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

    overflow: hidden;

    border: 2px solid #dbeafe;

    border-radius: 50%;

    background: #eff6ff;

    color: #3b82f6;

    font-size: 23px;
}


.register-photo-preview img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.register-photo-content {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 6px;
}


.register-photo-button {
    min-height: 36px;

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

    gap: 7px;

    padding: 0 13px;

    border: 1px solid #bfdbfe;

    border-radius: 8px;

    background: #ffffff;

    color: #2563eb;

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

    cursor: pointer;

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


.register-photo-button:hover {
    border-color: #3b82f6;

    background: #eff6ff;

    color: #1d4ed8;
}


.register-photo-content span {
    color: #94a3b8;

    font-size: 9px;

    line-height: 1.4;
}


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

@media (max-width: 600px) {

    .register-photo-upload {
        padding: 12px;
    }


    .register-photo-preview {
        width: 58px;
        height: 58px;
    }

}


@media (max-width: 380px) {

    .register-photo-upload {
        align-items: flex-start;
    }


    .register-photo-preview {
        width: 52px;
        height: 52px;
    }

}