/*==================================================
    Sarzamin Danayi
    Register Page FINAL FIX
    Premium Glass UI
    Theme Token Compatible
==================================================*/


/*==================================================
    Page
==================================================*/

.register-page{

    min-height:100vh;

    position:relative;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:

    linear-gradient(
        135deg,
        rgba(108,99,255,.12),
        rgba(0,200,255,.10)
    ),

    url('/assets/images/auth/register-bg.webp');

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}



.register-page::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        180deg,
        rgba(245,247,255,.25),
        rgba(245,247,255,.8)
    );

    backdrop-filter:blur(2px);

    z-index:0;

}



/*==================================================
    Topbar
==================================================*/


.register-topbar{

    width:92%;

    margin:auto;

    padding:25px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    position:relative;

    z-index:2;

}



.register-home-btn,
.register-help-btn{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

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

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

    transition:.3s;

    backdrop-filter:blur(12px);

}


.register-home-btn:hover,
.register-help-btn:hover {
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}


.register-home-btn img,
.register-help-btn img{

    width:100%;
    border-radius:50%;
    height:100%;

}



/*==================================================
    Container
==================================================*/


.register-container{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    position:relative;

    z-index:2;

}



/*==================================================
    Card
==================================================*/


.register-card{

    width:100%;

    max-width:500px;

    box-sizing:border-box;

    padding:42px 45px;

    border-radius:35px;

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

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

    box-shadow:
    0 30px 80px rgba(54,67,120,.18);

    backdrop-filter:blur(20px);

}



/*==================================================
 Header
==================================================*/


.register-header{

    text-align:center;

    margin-bottom:28px;

}


.register-logo{

    width:90px;

    height:90px;

    object-fit:contain;

    margin-bottom:18px;

}



.register-title{

    margin:0;

    color:var(--text);

    font-size:1.9rem;

    font-weight:950;

}



.register-description{

    margin-top:12px;

    color:var(--text-light);

    line-height:2;

}



/*==================================================
 Steps
==================================================*/


.register-steps{

    display:flex;

    justify-content:center;

    gap:14px;

    margin-bottom:28px;

}


.register-step{

    width:13px;

    height:13px;

    border-radius:50%;

    background:var(--border);

}



.register-step.active{

    background:var(--primary);

}



/*==================================================
 Form
==================================================*/


.register-form{

    display:flex;

    flex-direction:column;

    gap:20px;

}



.register-group{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:9px;

}



.register-group label{

    font-weight:800;

    color:var(--text);

}



/*==================================================
 Inputs FIX
==================================================*/


.register-input{

    width:100%;

    max-width:100%;

    height:58px;

    box-sizing:border-box;

    padding:0 20px;

    border-radius:18px;

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

    background:

    rgba(245,247,255,.8);

    color:var(--text);

    font-size:1rem;

    outline:none;

}




.register-input:focus{

    background:#fff;

    border-color:var(--primary);

    box-shadow:

    0 0 0 5px

    color-mix(
        in srgb,
        var(--primary) 15%,
        transparent
    );

}




/*==================================================
 Mobile Input FIX
==================================================*/


.mobile-input-wrapper{

    position:relative;

    width:100%;

}



.mobile-input-wrapper .register-input{


    direction:ltr;

    text-align:left;


    padding-left:70px;

}



.mobile-prefix{


    position:absolute;

    left:20px;

    top:50%;

    transform:translateY(-50%);

    color:var(--text-light);

    font-weight:900;

    pointer-events:none;

}





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


.otp-box{

    width:100%;

    display:flex;

    justify-content:center;

    gap:8px;

    direction:ltr;

}



.otp-input{


    width:52px;

    height:58px;

    box-sizing:border-box;

    border-radius:18px;

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

    background:

    rgba(245,247,255,.8);

    text-align:center;

    font-size:1.3rem;

    font-weight:900;

}





.otp-timer{

    text-align:center;

    margin:10px 0;

    color:var(--text-light);

}




.otp-resend{

    width:100%;

    height:55px;

    border-radius:var(--radius-full);
  
    border:none;

    background:var(--secondary);

    color:white;

    font-weight:900;

}

.otp-resend:hover {
  
  transform:translateY(-2px);
  box-shadow:var(--shadow);
  
}




/*==================================================
 Button
==================================================*/


.register-btn { 
  width:100%;
  height:58px;
  border-radius:var(--radius-full);
  background:var(--primary);
  color:#fff;
  font-size:1rem;
  font-weight:900;
             
}

.register-btn:hover {
  
  background:var(--primary-dark);
  transform:translateY(-3px);
  box-shadow:var(--shadow);

}



/*==================================================
 Message
==================================================*/


.register-message{

    min-height:0;

    margin-top:22px;

    padding:15px;

    border-radius:18px;

    text-align:center;

    font-weight:800;

    display:none;

}



.register-message.success{

    display:block;

    background:

    color-mix(
        in srgb,
        var(--success) 15%,
        transparent
    );

    color:var(--success);

}



.register-message.error{

    display:block;

    background:

    color-mix(
        in srgb,
        var(--danger) 15%,
        transparent
    );

    color:var(--danger);

}


/*==================================================
    Responsive
    Tablet Landscape / Small Desktop
    769px - 1024px
==================================================*/


@media (min-width:769px) and (max-width:1024px){



/*==================================================
    Page
==================================================*/


.register-page{

    background-position:center;

}





/*==================================================
    Topbar
==================================================*/


.register-topbar{

    width:88%;

    padding:22px 0;

}



.register-home-btn,
.register-help-btn{

    width:48px;

    height:48px;

}





/*==================================================
    Container
==================================================*/


.register-container{

    padding:25px;

}







/*==================================================
    Card
==================================================*/


.register-card{


    max-width:460px;


    padding:

    38px 38px;


    border-radius:30px;


}







/*==================================================
    Header
==================================================*/


.register-logo{


    width:80px;


    height:80px;


}



.register-title{


    font-size:1.7rem;


}



.register-description{


    font-size:.9rem;


}







/*==================================================
    Steps
==================================================*/


.register-steps{


    margin-bottom:24px;


}







/*==================================================
    Form
==================================================*/


.register-form{


    gap:18px;


}



.register-group{


    gap:8px;


}







/*==================================================
    Inputs
==================================================*/


.register-input{


    height:55px;


    border-radius:16px;


    font-size:.95rem;


}







/*==================================================
    Mobile Input
==================================================*/


.mobile-input-wrapper .register-input{


    padding-left:65px;


}



.mobile-prefix{


    left:18px;


}







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


.otp-box{


    gap:8px;


}



.otp-input{


    width:48px;


    height:54px;


    border-radius:16px;


    font-size:1.2rem;


}







/*==================================================
    Buttons
==================================================*/


.register-btn{


    height:56px;


}



.otp-resend{


    height:52px;


}







/*==================================================
    Message
==================================================*/


.register-message{


    margin-top:18px;


    padding:14px;


    font-size:.9rem;


}



}


/*==================================================
    Responsive
    Tablet / Large Mobile
    487px - 768px
==================================================*/


@media (min-width:487px) and (max-width:768px){



/*==================================================
    Page
==================================================*/


.register-page{

    min-height:100vh;

    background-position:center;

}







/*==================================================
    Topbar
==================================================*/


.register-topbar{

    width:90%;

    padding:18px 0;

}



.register-home-btn,
.register-help-btn{


    width:46px;

    height:46px;


}






/*==================================================
    Container
==================================================*/


.register-container{


    padding:

    15px;


    align-items:flex-start;


    padding-top:25px;


}








/*==================================================
    Card
==================================================*/


.register-card{


    max-width:430px;


    padding:

    32px 28px;


    border-radius:28px;


    backdrop-filter:blur(16px);


}








/*==================================================
    Header
==================================================*/


.register-header{


    margin-bottom:22px;


}




.register-logo{


    width:75px;


    height:75px;


    margin-bottom:14px;


}




.register-title{


    font-size:1.5rem;


}



.register-description{


    margin-top:8px;


    font-size:.88rem;


    line-height:1.8;


}








/*==================================================
    Steps
==================================================*/


.register-steps{


    gap:12px;


    margin-bottom:22px;


}



.register-step{


    width:12px;


    height:12px;


}







/*==================================================
    Form
==================================================*/


.register-form{


    gap:17px;


}





.register-group{


    gap:7px;


}



.register-group label{


    font-size:.85rem;


}








/*==================================================
    Inputs
==================================================*/


.register-input{


    height:54px;


    padding:

    0 16px;


    border-radius:15px;


    font-size:.95rem;


}








/*==================================================
    Mobile Input
==================================================*/


.mobile-input-wrapper{


    width:100%;


}



.mobile-input-wrapper .register-input{


    padding-left:62px;


}




.mobile-prefix{


    left:17px;


    font-size:.9rem;


}








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


.otp-box{


    gap:7px;


}



.otp-input{


    width:44px;


    height:52px;


    border-radius:14px;


    font-size:1.15rem;


}








/*==================================================
    Timer
==================================================*/


.otp-timer{


    font-size:.85rem;


}








/*==================================================
    Buttons
==================================================*/


.register-btn{


    height:54px;


    font-size:.95rem;


}



.otp-resend{


    height:50px;


}








/*==================================================
    Message
==================================================*/


.register-message{


    margin-top:16px;


    padding:13px;


    border-radius:15px;


    font-size:.85rem;


}

/* حذف هایلایت پیشفرض موبایل */
        * {
            -webkit-tap-highlight-color: transparent;
        }
    
        /* فوکوس حرفه‌ای */
        a,
        button,
        input,
        select,
        textarea {
            transition: all 0.2s ease;
            border-radius: 12px;
        }
    
        /* افکت لمس موبایل */
        a:active,
        button:active {
            transform: scale(0.95);
        }



}

/*==================================================
    Responsive
    Mobile Version
    361px - 486px
==================================================*/


@media (max-width:486px){



/*==================================================
    Page Mobile Background
==================================================*/


.register-page{


    background:


    linear-gradient(

        180deg,

        rgba(108,99,255,.18),

        rgba(0,200,255,.15)

    ),

    url('/assets/images/auth/register-bg-mobile.webp');


    background-size:cover;


    background-position:center;


    background-repeat:no-repeat;


}






.register-page::before{


    background:


    linear-gradient(

        180deg,

        rgba(245,247,255,.35),

        rgba(245,247,255,.85)

    );


    backdrop-filter:blur(1px);


}







/*==================================================
    Topbar
==================================================*/


.register-topbar{


    width:90%;


    padding:18px 0;


}



.register-home-btn,
.register-help-btn{


    width:44px;


    height:44px;


}




/*==================================================
    Container
==================================================*/


.register-container{


    width:100%;


    padding:15px;


    box-sizing:border-box;


}








/*==================================================
    Card
==================================================*/


.register-card{


    width:100%;


    max-width:430px;


    margin:0 auto;


    padding:

    30px 20px;


    border-radius:28px;


    box-sizing:border-box;


}







/*==================================================
    Header
==================================================*/


.register-logo{


    width:70px;


    height:70px;


}



.register-title{


    font-size:1.45rem;


}



.register-description{


    font-size:.85rem;


    line-height:1.8;


}







/*==================================================
    Steps
==================================================*/


.register-steps{


    margin-bottom:22px;


}



.register-step{


    width:11px;


    height:11px;


}








/*==================================================
    Form
==================================================*/


.register-form{


    gap:16px;


}



.register-group{


    gap:7px;


}



.register-group label{


    font-size:.85rem;


}








/*==================================================
    Inputs
==================================================*/


.register-input{


    height:52px;


    padding:0 15px;


    border-radius:15px;


    font-size:.9rem;


}








/*==================================================
    Mobile Number
==================================================*/


.mobile-input-wrapper{


    width:100%;


}



.mobile-input-wrapper .register-input{


    padding-left:55px;


    padding-right:10px;


}



.mobile-prefix{


    left:15px;


    font-size:.85rem;


}








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


.otp-box{


    gap:5px;


}



.otp-input{


    width:44px;


    height:50px;


    border-radius:14px;


    font-size:1.1rem;


}








/*==================================================
    Buttons
==================================================*/


.register-btn{


    height:52px;


    font-size:.9rem;


}



.otp-resend{


    height:50px;


}








/*==================================================
    Message
==================================================*/


.register-message{


    margin-top:16px;


    padding:12px;


    border-radius:15px;


    font-size:.85rem;


    line-height:1.8;


}

/* حذف هایلایت پیشفرض موبایل */
        * {
            -webkit-tap-highlight-color: transparent;
        }
    
        /* فوکوس حرفه‌ای */
        a,
        button,
        input,
        select,
        textarea {
            transition: all 0.2s ease;
            border-radius: 12px;
        }
    
        /* افکت لمس موبایل */
        a:active,
        button:active {
            transform: scale(0.95);
        }



}


/*==================================================
    Responsive
    Small Mobile Version
    Max 360px
==================================================*/


@media (max-width:360px){



/*==================================================
    Page Background
==================================================*/


.register-page{


    background:


    linear-gradient(

        180deg,

        rgba(108,99,255,.22),

        rgba(0,200,255,.18)

    ),


}






.register-page::before{


    background:


    linear-gradient(

        180deg,

        rgba(245,247,255,.45),

        rgba(245,247,255,.9)

    );

}







/*==================================================
    Topbar
==================================================*/


.register-topbar{


    width:88%;


    padding:

    15px 0;


}



.register-home-btn,
.register-help-btn{


    width:40px;


    height:40px;


}




/*==================================================
    Container
==================================================*/


.register-container{


    width:100%;


    padding:


    10px;


    box-sizing:border-box;


    display:flex;


    justify-content:center;


    align-items:center;


}







/*==================================================
    Card Fix
==================================================*/


.register-card{


    width:100%;


    max-width:340px;


    margin:

    0 auto;


    padding:


    24px 14px;


    border-radius:

    24px;


    box-sizing:border-box;


    overflow:hidden;


}







/*==================================================
    Header
==================================================*/


.register-header{


    margin-bottom:20px;


}



.register-logo{


    width:60px;


    height:60px;


    margin-bottom:12px;


}



.register-title{


    font-size:

    1.25rem;


}



.register-description{


    font-size:.78rem;


    line-height:1.8;


    margin-top:8px;


}








/*==================================================
    Steps
==================================================*/


.register-steps{


    gap:10px;


    margin-bottom:20px;


}



.register-step{


    width:10px;


    height:10px;


}







/*==================================================
    Form
==================================================*/


.register-form{


    gap:14px;


}




.register-group{


    gap:6px;


}



.register-group label{


    font-size:.8rem;


}








/*==================================================
    Input
==================================================*/


.register-input{


    height:48px;


    padding:


    0 12px;


    border-radius:

    14px;


    font-size:.85rem;


}







/*==================================================
    Mobile Input
==================================================*/


.mobile-input-wrapper{


    width:100%;


    overflow:hidden;


}



.mobile-input-wrapper .register-input{


    width:100%;


    padding-left:

    48px;


    padding-right:

    8px;


}




.mobile-prefix{


    left:12px;


    font-size:.8rem;


}







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


.otp-box{


    width:100%;


    gap:4px;


}



.otp-input{


    flex:1;


    width:auto;


    max-width:38px;


    height:44px;


    border-radius:12px;


    font-size:1rem;


}








/*==================================================
    Timer
==================================================*/


.otp-timer{


    font-size:.78rem;


    margin:8px 0;


}







/*==================================================
    Buttons
==================================================*/


.register-btn{


    height:50px;


    font-size:.85rem;


}



.otp-resend{


    height:48px;


    font-size:.85rem;


}








/*==================================================
    Message
==================================================*/


.register-message{


    width:100%;


    box-sizing:border-box;


    margin-top:14px;


    padding:10px;


    border-radius:14px;


    font-size:.78rem;


    line-height:1.8;


}

/* حذف هایلایت پیشفرض موبایل */
        * {
            -webkit-tap-highlight-color: transparent;
        }
    
        /* فوکوس حرفه‌ای */
        a,
        button,
        input,
        select,
        textarea {
            transition: all 0.2s ease;
            border-radius: 12px;
        }
    
        /* افکت لمس موبایل */
        a:active,
        button:active {
            transform: scale(0.95);
        }



}