/* P_Login/Login.html */
/* =========================================================
REGISTER CARD
========================================================= */
body.page-p-login-login .register-card{
position:
relative;
overflow:
hidden;
width:
min(100%, 560px);
margin:
20px auto 0;
padding:
32px;
border-radius:
28px;
background:
linear-gradient(
145deg,
rgba(255,255,255,0.78),
rgba(127,255,212,0.30)
);
backdrop-filter:
blur(16px);
-webkit-backdrop-filter:
blur(16px);
border:
1.5px solid
rgba(255,255,255,0.72);
box-shadow:
0 14px 38px
rgba(0,0,0,0.13),
inset 0 1px 0
rgba(255,255,255,0.72);
opacity:
0;
animation:
fadeInUp
.8s ease-out
.08s forwards;
}
body.page-p-login-login .register-card::before{
content:
"";
position:
absolute;
top:
-70px;
right:
-50px;
width:
170px;
height:
170px;
border-radius:
50%;
background:
rgba(127,255,212,0.28);
filter:
blur(8px);
pointer-events:
none;
}
body.page-p-login-login .register-card::after{
content:
"";
position:
absolute;
bottom:
-75px;
left:
-55px;
width:
180px;
height:
180px;
border-radius:
50%;
background:
rgba(255,179,198,0.22);
filter:
blur(10px);
pointer-events:
none;
}
/* =========================================================
HEADER
========================================================= */
body.page-p-login-login .register-header{
position:
relative;
z-index:
1;
text-align:
center;
margin-bottom:
24px;
}
body.page-p-login-login .register-icon{
width:
68px;
height:
68px;
margin:
0 auto 12px;
display:
flex;
align-items:
center;
justify-content:
center;
border-radius:
20px;
background:
linear-gradient(
135deg,
rgba(127,255,212,0.75),
rgba(255,179,198,0.65)
);
border:
1px solid
rgba(255,255,255,0.70);
box-shadow:
0 7px 16px
rgba(0,0,0,0.10);
}
body.page-p-login-login .register-icon img{
width:
39px;
height:
39px;
display:
block;
object-fit:
contain;
}
body.page-p-login-login .register-header h1{
margin:
0 0 7px;
font-size:
1.75rem;
font-weight:
900;
color:
var(--text);
}
body.page-p-login-login .register-header p{
margin:
0;
color:
var(--text-soft);
font-size:
13px;
line-height:
1.8;
}
/* =========================================================
TABS
========================================================= */
body.page-p-login-login .tabs{
position:
relative;
z-index:
1;
display:
grid;
grid-template-columns:
1fr 1fr;
gap:
8px;
padding:
6px;
margin-bottom:
24px;
border-radius:
15px;
background:
rgba(255,255,255,0.45);
border:
1px solid
rgba(0,8,117,0.08);
}
body.page-p-login-login .tabs .tab{
min-height:
42px;
display:
flex;
align-items:
center;
justify-content:
center;
border-radius:
11px;
color:
rgba(0,8,117,0.65);
font-size:
14px;
font-weight:
700;
transition:
all .25s ease;
}
body.page-p-login-login .tabs .tab:hover{
color:
var(--text);
background:
rgba(255,255,255,0.60);
}
body.page-p-login-login .tabs .active-tab{
color:
var(--text);
background:
linear-gradient(
135deg,
var(--mint),
var(--mint-dark)
);
box-shadow:
0 4px 10px
rgba(0,0,0,0.09);
}
/* =========================================================
FORM
========================================================= */
body.page-p-login-login #registerForm{
position:
relative;
z-index:
1;
}
body.page-p-login-login .form-field{
margin-bottom:
17px;
}
body.page-p-login-login .form-label{
display:
block;
margin-bottom:
7px;
color:
var(--text);
font-size:
13px;
font-weight:
700;
}
body.page-p-login-login .form-control,
body.page-p-login-login .form-select{
min-height:
46px;
border:
1.5px solid
rgba(0,8,117,0.10);
border-radius:
13px;
background:
var(--input-bg);
color:
var(--text);
font-family:
"Vazirmatn",
Arial,
sans-serif;
font-size:
14px;
box-shadow:
0 2px 7px
rgba(0,0,0,0.04);
transition:
border-color .25s ease,
box-shadow .25s ease,
transform .25s ease;
}
body.page-p-login-login .form-control::placeholder{
color:
rgba(0,8,117,0.40);
}
body.page-p-login-login .form-control:focus,
body.page-p-login-login .form-select:focus{
border-color:
rgba(0,8,117,0.32);
background:
#fffaf9;
color:
var(--text);
outline:
none;
box-shadow:
0 0 0 3px
rgba(127,255,212,0.20),
0 5px 14px
rgba(0,0,0,0.06);
}
/* =========================================================
BIRTH DATE
========================================================= */
body.page-p-login-login .birth-row{
display:
grid;
grid-template-columns:
repeat(3,1fr);
gap:
8px;
}
/* =========================================================
GENDER
========================================================= */
body.page-p-login-login .gender-box{
display:
flex;
flex-wrap:
wrap;
gap:
18px;
padding:
8px 0 2px;
}
body.page-p-login-login .gender-item{
display:
inline-flex;
align-items:
center;
gap:
6px;
color:
var(--text);
font-size:
13px;
}
body.page-p-login-login .gender-item input{
width:
17px;
height:
17px;
accent-color:
#00c892;
}
/* =========================================================
LTR INPUTS
========================================================= */
body.page-p-login-login #username,
body.page-p-login-login #password,
body.page-p-login-login #phone{
direction:
ltr;
text-align:
left;
}
/* =========================================================
SUBMIT
========================================================= */
body.page-p-login-login .btn-submit{
width:
100%;
min-height:
48px;
margin-top:
5px;
border:
none;
border-radius:
14px;
background:
linear-gradient(
135deg,
var(--mint),
var(--mint-dark)
);
color:
var(--text);
font-family:
inherit;
font-size:
14px;
font-weight:
800;
box-shadow:
0 6px 16px
rgba(0,8,117,0.10);
transition:
all .25s ease;
}
body.page-p-login-login .btn-submit:hover{
background:
linear-gradient(
135deg,
#8fffe0,
#73ecca
);
transform:
translateY(-2px);
box-shadow:
0 9px 20px
rgba(0,8,117,0.14);
}
body.page-p-login-login .form-note{
position:
relative;
z-index:
1;
margin:
17px 0 0;
text-align:
center;
color:
rgba(0,8,117,0.52);
font-size:
11px;
line-height:
1.8;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 768px) {body.page-p-login-login .register-card{
margin-top:
12px;
padding:
26px 20px;
}
body.page-p-login-login .register-header h1{
font-size:
1.55rem;
}
body.page-p-login-login .birth-row{
grid-template-columns:
1fr;
}}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 576px) {body.page-p-login-login .register-card{
padding:
22px 15px;
}
body.page-p-login-login .register-header h1{
font-size:
1.4rem;
}
body.page-p-login-login .register-header p{
font-size:
11px;
}}
/* =========================================================
NEW FORM ICONS
فقط بخش فرمها — نوبار بدون تغییر
========================================================= */
body.page-p-login-login .form-title-icon-img{
width: 40px;
height: 40px;
object-fit: contain;
display: block;
}
body.page-p-login-login .form-label-with-icon{
display: inline-flex !important;
align-items: center;
gap: 7px;
}
body.page-p-login-login .form-label-icon{
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 18px;
}
body.page-p-login-login .form-label-icon img{
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}