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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html,
body{

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

    font-family:
        Inter,
        sans-serif;

    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #eef2ff 100%
        );

    color:#0f172a;

    overflow-x:hidden;

}

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

.km-register-page{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:32px 20px;

    position:relative;

    overflow:hidden;

}

/* =========================
   GLOW
========================= */

.km-register-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:.45;

}

.km-register-glow.one{

    width:360px;
    height:360px;

    background:
        rgba(37,99,235,.18);

    top:-120px;
    right:-120px;

}

.km-register-glow.two{

    width:320px;
    height:320px;

    background:
        rgba(16,185,129,.14);

    bottom:-120px;
    left:-120px;

}

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

.km-register-card{

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

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

    backdrop-filter:
        blur(18px);

    border:
        1px solid
        rgba(255,255,255,.7);

    border-radius:34px;

    padding:42px 34px;

    position:relative;

    z-index:5;

    box-shadow:
        0 30px 80px
        rgba(15,23,42,.08);

}

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

.km-register-logo{

    width:auto;
    height:72px;



    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 24px;

}

.km-register-logo img{

    width:auto;
    height:70px;

}

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

.km-register-heading{

    text-align:center;

    font-size:34px;

    font-weight:900;

    line-height:1.2;

    margin-bottom:12px;

    letter-spacing:-1px;

}

.km-register-subtitle{

    max-width:430px;

    margin:0 auto 34px;

    text-align:center;

    font-size:15px;

    line-height:1.8;

    color:#64748b;

}

/* =========================
   ALERT
========================= */

.km-register-error,
.km-register-success{

    border-radius:18px;

    padding:16px 18px;

    font-size:14px;

    margin-bottom:26px;

    text-align:center;

    line-height:1.7;

}

/* error */

.km-register-error{

    background:#fef2f2;

    border:
        1px solid #fecaca;

    color:#dc2626;

}

/* success */

.km-register-success{

    background:#ecfdf5;

    border:
        1px solid #bbf7d0;

    color:#166534;

}

.km-register-redirect{

    margin-top:8px;

    font-size:13px;

    opacity:.8;

}

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

.km-register-form{

    display:flex;

    flex-direction:column;

    gap:22px;

}

/* group */

.km-form-group{

    display:flex;

    flex-direction:column;

    gap:10px;

}

/* label */

.km-form-group label{

    font-size:14px;

    font-weight:700;

    color:#334155;

}

/* small */

.km-form-group small{

    font-size:12px;

    color:#64748b;

}

/* input */

.km-form-group input,
.km-form-group textarea{

    width:100%;

    border:
        1px solid #dbe2ea;

    background:#fff;

    border-radius:18px;

    padding:15px 18px;

    font-size:15px;

    color:#0f172a;

    outline:none;

    transition:.2s;

    resize:none;

}

/* focus */

.km-form-group input:focus,
.km-form-group textarea:focus{

    border-color:#2563eb;

    box-shadow:
        0 0 0 4px
        rgba(37,99,235,.10);

}

/* textarea */

.km-form-group textarea{

    min-height:110px;

    padding-top:16px;

}

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

.km-register-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:20px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    color:#fff;

    font-size:16px;

    font-weight:800;

    cursor:pointer;

    transition:.2s;

    margin-top:4px;

    box-shadow:
        0 18px 36px
        rgba(37,99,235,.24);

}

.km-register-btn:hover{

    transform:
        translateY(-2px);

}

.km-register-btn:active{

    transform:
        scale(.98);

}

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

.km-register-footer{

    margin-top:28px;

    text-align:center;

    font-size:14px;

    color:#64748b;

}

.km-register-footer a{

    color:#2563eb;

    text-decoration:none;

    font-weight:700;

}

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

@media(max-width:640px){

    .km-register-card{

        padding:34px 24px;

        border-radius:28px;

    }

    .km-register-heading{

        font-size:28px;

    }

}