/* =====================================
   GOOGLE FONT
===================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{

    background:#ffffff;
    color:#222;
}

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

.auth-container{

    width:100%;
    max-width:480px;
    margin:auto;
    min-height:100vh;
    background:#fff;
    overflow:hidden;
}

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

.auth-page{

    display:none;
    padding:25px;
    animation:fade .35s ease;
}

.auth-page.active{

    display:block;
}

@keyframes fade{

    from{

        opacity:0;
        transform:translateX(20px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

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

.page-title{

    text-align:center;
    font-size:20px;
    font-weight:600;
    margin-bottom:25px;
}

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

.back-btn{

    width:52px;
    height:52px;

    background:#f5f5f5;

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    margin-bottom:15px;

    font-size:20px;
}

/* =====================================
   IMAGE
===================================== */

.auth-image{

    text-align:center;
    margin-bottom:20px;
}

.auth-image img{

    width:90%;
    max-width:280px;
}

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

.auth-page h1{

    text-align:center;
    font-size:46px;
    font-weight:600;
    margin-bottom:8px;
}

/* =====================================
   SUBTITLE
===================================== */

.subtitle{

    text-align:center;
    color:#888;
    font-size:20px;
    margin-bottom:30px;
    line-height:1.5;
}

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

form{

    display:flex;
    flex-direction:column;
    gap:18px;
}

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

input{

    width:100%;

    height:62px;

    border:none;

    background:#f4f4f4;

    border-radius:12px;

    padding:0 20px;

    font-size:18px;

    outline:none;
}

input::placeholder{

    color:#999;
}

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

.input-group{

    display:flex;

    align-items:center;

    background:#f4f4f4;

    border-radius:12px;

    overflow:hidden;
}

.country{

    width:90px;

    height:62px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    font-size:20px;

    font-weight:600;

    border-right:1px solid #ddd;
}

.input-group input{

    background:none;

    flex:1;

    border:none;
}

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

.primary-btn{

    height:62px;

    border:none;

    border-radius:12px;

    background:linear-gradient(90deg,#71d6c7,#00bcd4);

    color:#fff;

    font-size:24px;

    letter-spacing:2px;

    cursor:pointer;

    transition:.3s;
    margin-bottom: 10px;
}

.primary-btn:hover{

    opacity:.9;
    transform:translateY(-2px);
}

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

.secondary-btn{

    height:62px;

    border:2px solid #bdbdbd;

    background:#fff;

    color:#666;

    font-size:22px;

    border-radius:12px;

    cursor:pointer;

    transition:.3s;
}

.secondary-btn:hover{

    background:#f8f8f8;
}


/* =====================================
   OTP SECTION
===================================== */

.otp-boxes{

    display:flex;
    justify-content:center;
    gap:12px;
    margin:30px 0;

}

.otp-boxes input{

    width:55px;
    height:60px;

    text-align:center;

    font-size:26px;
    font-weight:600;

    border:2px solid #ddd;
    border-radius:12px;

    background:#fff;

    transition:.3s;
    padding: 0px !important;

}

.otp-boxes input:focus{

    border-color:#00bcd4;
    box-shadow:0 0 10px rgba(0,188,212,.25);

}

.otp-error{

    text-align:center;

    color:#ff3b30;

    font-size:15px;

    margin-bottom:25px;

    display:none;

}

/* =====================================
   BOTTOM TEXT
===================================== */

.bottom-text{

    margin-top:25px;

    text-align:center;

    color:#777;

    font-size:16px;

}

.bottom-text span{

    color:#00bcd4;

    font-weight:600;

    cursor:pointer;

}

.bottom-text span:hover{

    text-decoration:underline;

}

/* =====================================
   CALL US
===================================== */

.call{

    margin-top:35px;

    text-align:center;

    color:#777;

    font-size:15px;

}

.call a{

    color:#00bcd4;

    font-weight:600;

    text-decoration:none;

}

/* =====================================
   LINKS
===================================== */

a{

    transition:.3s;

}

a:hover{

    opacity:.8;

}

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

button{

    transition:.3s;

}

button:active{

    transform:scale(.97);

}

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

input:focus{

    border:2px solid #00bcd4;

}

/* =====================================
   SCROLLBAR
===================================== */

::-webkit-scrollbar{

    width:7px;

}

::-webkit-scrollbar-thumb{

    background:#00bcd4;

    border-radius:20px;

}

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

@media(max-width:768px){

.auth-page{

    padding:20px;

}

.page-title{

    font-size:18px;

}

.auth-page h1{

    font-size:34px;

}

.subtitle{

    font-size:16px;

}

.auth-image img{

    width:80%;

}

input{

    height:56px;

    font-size:16px;

}

.country{

    height:56px;

    font-size:17px;

}

.primary-btn,
.secondary-btn{

    height:56px;

    font-size:18px;

}

.otp-boxes{

    gap:8px;

}

.otp-boxes input{

    width:48px;
    height:54px;
    font-size:22px;

}

}

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

@media(max-width:480px){

.auth-container{

    max-width:100%;

}

.auth-page{

    padding:18px;

}

.page-title{

    font-size:16px;

}

.back-btn{

    width:42px;
    height:42px;
    font-size:18px;

}

.auth-image{

    margin-bottom:15px;

}

.auth-image img{

    width:90%;
    max-width:220px;

}

.auth-page h1{

    font-size:28px;

}

.subtitle{

    font-size:14px;
    margin-bottom:25px;

}

input{

    height:52px;

    font-size:15px;

    border-radius:10px;

}

.country{

    width:75px;
    height:52px;
    font-size:16px;

}

.primary-btn{

    height:52px;
    font-size:17px;

}

.secondary-btn{

    height:52px;
    font-size:16px;

}

.bottom-text{

    font-size:14px;

}

.call{

    font-size:13px;

}

.otp-boxes{

    justify-content:space-between;
    gap:6px;

}

.otp-boxes input{

    width:42px;
    height:50px;
    font-size:20px;

}

}

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

@media(min-width:992px){

.auth-container{

    margin:40px auto;

    border-radius:25px;

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

}

}

/* =====================================
   SMOOTH PAGE TRANSITION
===================================== */

.auth-page{

    transition:all .35s ease;

}

/* =====================================
   GRADIENT BACKGROUND FOR BUTTONS
===================================== */

.primary-btn{

    background-size:200% auto;

}

.primary-btn:hover{

    background-position:right center;

}

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