/* ==========================================================
   M Tek Investment Platform
   Register Page CSS
   FINAL VERSION
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

html{
    scroll-behavior:smooth;
}

body{

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

    background:
        linear-gradient(
            135deg,
            #08192F,
            #0E315F,
            #123E78
        );

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px 15px;
}


/* ==========================================================
   REGISTER CONTAINER
========================================================== */

.register-container{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;
}


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

.register-card{

    width:100%;

    max-width:560px;

    background:#263A59;

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

    border-radius:24px;

    padding:35px;

    box-shadow:
        0 15px 45px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.05);

    animation:fadeUp .6s ease;

    transition:.35s;
}

.register-card:hover{

    transform:translateY(-2px);

    box-shadow:
        0 20px 55px rgba(0,0,0,.55);
}


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

.register-logo{

    text-align:center;

    margin-bottom:18px;
}

.register-logo img{

    width:110px;

    height:110px;

    display:block;

    margin:auto;

    object-fit:contain;

    filter:
        drop-shadow(
            0 0 15px
            rgba(255,215,0,.45)
        );
}


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

.register-header{

    text-align:center;

    margin-bottom:28px;
}

.register-header h2{

    font-size:40px;

    font-weight:700;

    color:#FFD200;

    margin-bottom:10px;

    line-height:1.2;
}

.register-header p{

    color:#E6E6E6;

    font-size:15px;

    line-height:1.6;
}


/* ==========================================================
   SUCCESS / ERROR
========================================================== */

.success,
.error{

    padding:14px;

    border-radius:12px;

    margin-bottom:20px;

    text-align:center;

    font-weight:bold;

    line-height:1.5;
}

.success{

    background:#0D5D36;

    color:#ffffff;
}

.error{

    background:#8B1E1E;

    color:#ffffff;
}


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

.input-group{

    position:relative;

    width:100%;

    margin-bottom:16px;
}


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

.input-group > i{

    position:absolute;

    left:0;

    top:0;

    width:52px;

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#FFD200;

    background:#173354;

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

    border-right:none;

    border-radius:12px 0 0 12px;

    font-size:17px;

    z-index:2;
}


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

.input-group input{

    width:100%;

    height:60px;

    padding-left:68px;

    padding-right:18px;

    background:#F7F7F7;

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

    border-radius:12px;

    font-size:15px;

    color:#222;

    transition:.30s;
}

.input-group input::placeholder{

    color:#777;
}

.input-group input:focus{

    outline:none;

    border-color:#FFD200;

    background:#ffffff;

    box-shadow:
        0 0 12px
        rgba(255,210,0,.35);
}


/* ==========================================================
   COUNTRY SELECT
========================================================== */

.input-group select{

    width:100%;

    height:60px;

    padding-left:68px;

    padding-right:45px;

    background:#F7F7F7;

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

    border-radius:12px;

    font-size:15px;

    color:#222;

    cursor:pointer;

    transition:.30s;

    background-image:
        linear-gradient(45deg,transparent 50%,#555 50%),
        linear-gradient(135deg,#555 50%,transparent 50%);

    background-position:
        calc(100% - 22px) 25px,
        calc(100% - 16px) 25px;

    background-size:
        6px 6px,
        6px 6px;

    background-repeat:no-repeat;
}

.input-group select:focus{

    outline:none;

    border-color:#FFD200;

    background-color:#ffffff;

    box-shadow:
        0 0 12px
        rgba(255,210,0,.35);
}

.input-group select option{

    color:#222;

    background:#ffffff;
}


/* ==========================================================
   TIMEZONE DISPLAY
========================================================== */

#timezone_display{

    background:#E9EDF3;

    color:#333;

    font-weight:600;

    cursor:not-allowed;
}

#timezone_display:focus{

    border-color:rgba(255,255,255,.15);

    box-shadow:none;

    background:#E9EDF3;
}


/* ==========================================================
   PHONE
========================================================== */

.phone-group{

    width:100%;

    margin-bottom:16px;
}

.phone-group .iti{

    width:100% !important;
}

.phone-group .iti input{

    width:100% !important;

    height:60px;

    padding-left:95px !important;

    padding-right:18px;

    background:#F7F7F7;

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

    border-radius:12px;

    font-size:15px;

    color:#222;

    transition:.30s;
}

.phone-group .iti input:focus{

    outline:none;

    background:#ffffff;

    border-color:#FFD200;

    box-shadow:
        0 0 12px
        rgba(255,210,0,.35);
}


/* ==========================================================
   INTL PHONE SELECTOR
========================================================== */

.phone-group .iti{

    position:relative;

    display:block;

    width:100% !important;
}

.phone-group .iti__country-container{

    z-index:9999;
}

.phone-group .iti__selected-country{

    min-width:72px;

    height:100%;

    padding:0 9px;

    border-radius:11px 0 0 11px;

    transition:background .2s ease;
}

.phone-group .iti__selected-country:hover,
.phone-group .iti__selected-country:focus{

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

.phone-group .iti__selected-dial-code{

    color:#222;

    font-weight:600;
}

.phone-group .iti__flag{

    flex-shrink:0;
}

/* Full-width dropdown: removes the unused white area on the side. */
.phone-group .iti__country-list{

    left:0 !important;

    right:auto !important;

    width:100% !important;

    min-width:100% !important;

    max-width:none !important;

    max-height:280px;

    margin-top:4px;

    padding:4px 0;

    background:#ffffff;

    color:#222;

    border:1px solid rgba(23,51,84,.18);

    border-radius:10px;

    box-shadow:
        0 12px 28px rgba(0,0,0,.28);

    overflow-x:hidden;

    z-index:99999;
}

.phone-group .iti__country{

    min-height:40px;

    padding:8px 12px;

    font-size:14px;

    line-height:1.25;
}

.phone-group .iti__country:hover,
.phone-group .iti__country.iti__highlight{

    background:#f1f4f8;
}

.phone-group .iti__country-name{

    color:#333;
}

.phone-group .iti__dial-code{

    color:#8a8a8a;

    font-weight:600;
}

.phone-group .iti__search-input{

    width:100% !important;

    min-height:48px;

    padding:0 14px !important;

    margin:0 0 4px !important;

    border:1px solid #FFD200 !important;

    border-radius:10px !important;

    outline:none !important;

    font:inherit;

    font-size:14px !important;

    background:#fff !important;
}

.phone-group .iti__search-input:focus{

    box-shadow:0 0 8px rgba(255,210,0,.28) !important;
}


/* ==========================================================
   OTP ROW
========================================================== */

.otp-row{

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        120px
        95px;

    gap:10px;

    margin-bottom:12px;
}

.otp-row input{

    width:100%;

    height:58px;

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

    border-radius:12px;

    background:#F7F7F7;

    padding:0 15px;

    font-size:15px;

    color:#222;

    transition:.30s;
}

.otp-row input::placeholder{

    color:#777;
}

.otp-row input:focus{

    outline:none;

    background:#ffffff;

    border-color:#FFD200;

    box-shadow:
        0 0 12px
        rgba(255,210,0,.35);
}


/* ==========================================================
   SEND OTP
========================================================== */

.otp-btn{

    height:58px;

    border:none;

    border-radius:12px;

    background:#FFD200;

    color:#111;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

    transition:.30s;
}

.otp-btn:hover{

    background:#FFC400;

    transform:translateY(-2px);
}


/* ==========================================================
   VERIFY OTP
========================================================== */

.verify-btn{

    height:58px;

    border:none;

    border-radius:12px;

    background:#14B84A;

    color:#fff;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

    transition:.30s;
}

.verify-btn:hover{

    background:#11A141;

    transform:translateY(-2px);
}


/* ==========================================================
   OTP MESSAGE
========================================================== */

.otp-message{

    display:block;

    min-height:24px;

    margin-bottom:18px;

    color:#FFD200;

    font-size:14px;

    font-weight:bold;
}

.password-message{

    display:block;

    min-height:24px;

    margin-top:-6px;

    margin-bottom:16px;

    color:#FFD200;

    font-size:14px;

    font-weight:bold;
}


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

.terms-box{

    margin:20px 0;
}

.agree{

    display:flex;

    align-items:center;

    gap:12px;

    margin:18px 0 22px;

    color:#F2F2F2;

    font-size:14px;

    line-height:1.5;

    cursor:pointer;
}

.agree input{

    width:20px !important;

    height:20px !important;

    flex-shrink:0;

    accent-color:#FFD200;

    cursor:pointer;

    appearance:auto !important;

    -webkit-appearance:checkbox !important;
}

.agree span{

    line-height:1.6;
}

.agree a{

    color:#FFD200;

    font-weight:700;

    text-decoration:none;
}

.agree a:hover{

    text-decoration:underline;
}


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

.register-btn{

    width:100%;

    height:60px;

    border:none;

    border-radius:14px;

    background:
        linear-gradient(
            180deg,
            #FFD83D,
            #FFC800
        );

    color:#111;

    font-size:19px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

    box-shadow:
        0 8px 20px
        rgba(255,200,0,.35);
}

.register-btn i{

    margin-right:8px;
}

.register-btn:hover{

    transform:translateY(-2px);

    background:
        linear-gradient(
            180deg,
            #FFE45A,
            #FFD000
        );

    box-shadow:
        0 12px 28px
        rgba(255,210,0,.45);
}

button:disabled{

    opacity:.65;

    cursor:not-allowed;

    transform:none !important;
}


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

.login-link{

    text-align:center;

    margin-top:25px;

    color:#F2F2F2;

    font-size:15px;
}

.login-link a{

    color:#FFD200;

    font-weight:700;

    text-decoration:none;
}

.login-link a:hover{

    text-decoration:underline;
}


/* ==========================================================
   GLOBAL FORM ELEMENTS
========================================================== */

input,
button,
select{

    font-family:inherit;
}

button{

    cursor:pointer;
}

img{

    max-width:100%;

    height:auto;

    display:block;
}


/* ==========================================================
   ANIMATION
========================================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }
}


/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (min-width:1400px){

    .register-card{

        max-width:580px;
    }
}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width:1200px){

    .register-card{

        max-width:540px;
    }
}


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

@media (max-width:992px){

    body{

        padding:25px 15px;
    }

    .register-card{

        max-width:520px;

        padding:30px;
    }

    .register-header h2{

        font-size:36px;
    }
}


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

@media (max-width:768px){

    body{

        padding:12px 8px;

        align-items:flex-start;
    }

    .register-card{

        width:100%;

        padding:18px 14px;

        border-radius:18px;
    }

    .register-logo{

        margin-bottom:10px;
    }

    .register-logo img{

        width:78px;

        height:78px;
    }

    .register-header{

        margin-bottom:14px;
    }

    .register-header h2{

        font-size:27px;

        margin-bottom:5px;
    }

    .register-header p{

        font-size:11px;

        line-height:1.35;
    }

    .input-group{

        margin-bottom:9px;
    }

    .input-group input,
    .input-group select{

        height:48px;

        font-size:13px;

        border-radius:10px;
    }

    .input-group > i{

        width:43px;

        height:48px;

        border-radius:10px 0 0 10px;

        font-size:14px;
    }

    .input-group input{

        padding-left:56px;

        padding-right:12px;
    }

    .phone-group{

        margin-bottom:9px;
    }

    .phone-group .iti input{

        height:48px;

        padding-left:82px !important;

        padding-right:12px;

        font-size:13px;

        border-radius:10px;
    }

    .phone-group .iti__selected-country{

        min-width:66px;

        padding:0 7px;
    }

    .phone-group .iti__country-list{

        max-height:245px;

        border-radius:9px;
    }

    .phone-group .iti__country{

        min-height:36px;

        padding:7px 10px;

        font-size:13px;
    }

    .phone-group .iti__search-input{

        min-height:42px;

        font-size:13px !important;
    }

    .otp-row{

        grid-template-columns:minmax(0,1fr) 76px 64px;

        gap:6px;

        margin-bottom:6px;
    }

    .otp-row input,
    .otp-btn,
    .verify-btn{

        width:100%;

        height:48px;

        border-radius:10px;

        font-size:12px;
    }

    .otp-row input{

        padding:0 11px;
    }

    .otp-message{

        min-height:16px;

        margin-bottom:8px;

        font-size:11px;
    }

    .password-message{

        min-height:16px;

        margin-top:-3px;

        margin-bottom:8px;

        font-size:11px;
    }

    .agree{

        gap:7px;

        margin:10px 0 12px;

        font-size:11px;
    }

    .agree input{

        width:15px !important;

        height:15px !important;
    }

    .register-btn{

        height:49px;

        border-radius:11px;

        font-size:14px;
    }

    .login-link{

        margin-top:11px;

        font-size:11px;
    }
}


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

@media (max-width:480px){

    body{

        padding:8px 6px;
    }

    .register-card{

        padding:15px 11px;

        border-radius:16px;
    }

    .register-logo img{

        width:70px;

        height:70px;
    }

    .register-header h2{

        font-size:24px;
    }

    .register-header p{

        font-size:10px;
    }

    .phone-group .iti__country-list{

        max-height:230px;
    }

    .register-btn{

        font-size:13px;
    }
}


/* ==========================================================
   VERY SMALL DEVICE
========================================================== */

@media (max-width:360px){

    .register-card{

        padding:16px;
    }

    .register-header h2{

        font-size:22px;
    }

    .input-group input,
    .input-group select{

        font-size:13px;
    }

    .phone-group .iti input{

        font-size:13px;
    }
}


/* ==========================================================
   MOBILE PHONE COUNTRY LIST
========================================================== */

@media (max-width:480px){

    .phone-group .iti__country-list{

        width:100% !important;

        min-width:100% !important;

        max-width:none !important;

        left:0 !important;

        right:auto !important;
    }
}


/* ==========================================================
   ACCESSIBILITY / FOCUS
========================================================== */

button:focus-visible,
input:focus-visible,
select:focus-visible{

    outline:2px solid #FFD200;

    outline-offset:2px;
}


/* ==========================================================
   END
========================================================== */


/* ==========================================================
   MOBILE HARDENING
   Optimized for phones, small tablets and touch input
========================================================== */

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

.register-container{
    min-width:0;
}

.register-card{
    min-width:0;
    overflow:visible;
}

.input-group,
.phone-group,
.otp-row{
    min-width:0;
}

.otp-row input,
.otp-btn,
.verify-btn,
.register-btn{
    min-width:0;
}

@media (max-width:768px){

    body{
        min-height:100dvh;
        padding:
            max(10px, env(safe-area-inset-top))
            max(8px, env(safe-area-inset-right))
            max(10px, env(safe-area-inset-bottom))
            max(8px, env(safe-area-inset-left));
    }

    .register-container{
        width:100%;
    }

    .register-card{
        max-width:560px;
        padding:20px 14px;
        margin:0;
        border-radius:18px;
    }

    .register-header h2{
        font-size:clamp(24px, 7vw, 30px);
        overflow-wrap:anywhere;
    }

    .register-header p{
        max-width:100%;
        overflow-wrap:anywhere;
    }

    .input-group input,
    .input-group select,
    .phone-group .iti input{
        width:100%;
        min-width:0;
        font-size:16px;
    }

    .phone-group .iti{
        max-width:100%;
    }

    .phone-group .iti__selected-country{
        min-width:68px;
        padding:0 7px;
    }

    .phone-group .iti__country-list{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        max-height:min(55vh, 280px);
    }

    .otp-row{
        grid-template-columns:minmax(0,1fr) minmax(92px, 112px);
        gap:8px;
    }

    .otp-row input{
        grid-column:1 / -1;
        height:50px;
    }

    .otp-btn,
    .verify-btn{
        height:50px;
        width:100%;
        font-size:13px;
    }

    .agree{
        align-items:flex-start;
        gap:10px;
        font-size:13px;
        margin:15px 0 18px;
    }

    .agree input{
        margin-top:2px;
    }

    .register-btn{
        height:54px;
        font-size:16px;
        border-radius:12px;
    }

    .login-link{
        margin-top:18px;
        font-size:13px;
        line-height:1.5;
    }

    .success,
    .error{
        padding:11px 10px;
        font-size:13px;
    }

}

@media (max-width:480px){

    .register-card{
        padding:16px 11px;
        border-radius:16px;
    }

    .register-logo img{
        width:68px;
        height:68px;
    }

    .register-header{
        margin-bottom:12px;
    }

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

    .register-header p{
        font-size:11px;
    }

    .input-group{
        margin-bottom:8px;
    }

    .input-group input,
    .input-group select,
    .phone-group .iti input{
        height:48px;
    }

    .input-group > i{
        width:42px;
        height:48px;
    }

    .input-group input{
        padding-left:55px;
        padding-right:12px;
    }

    .phone-group .iti input{
        padding-left:82px !important;
        padding-right:12px;
    }

    .otp-row{
        grid-template-columns:minmax(0,1fr) minmax(88px, 100px);
        gap:7px;
    }

    .otp-btn,
    .verify-btn{
        font-size:12px;
        padding:0 7px;
    }

    .register-btn{
        font-size:15px;
    }

}

@media (max-width:360px){

    .register-card{
        padding:14px 9px;
    }

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

    .register-header p{
        font-size:10px;
    }

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

    .otp-row > *{
        width:100%;
    }

    .otp-btn,
    .verify-btn{
        grid-column:auto;
    }

}