/*
================================
PAGE FORGOT PASSWORD NUME-PRONO
================================
*/

body{
margin:0;
font-family: Arial, Helvetica, sans-serif;
background:#081b56;
color:#ffffff;
}

.forgot-hero{
position:relative;
min-height:calc(100vh - 88px);
background:
linear-gradient(rgba(6,20,70,0.58), rgba(6,20,70,0.76)),
url("stadium-login-bg.png") center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
padding:40px 20px 60px;
box-sizing:border-box;
}

.forgot-overlay{
position:absolute;
inset:0;
pointer-events:none;
}

.forgot-panel{
position:relative;
z-index:2;
width:100%;
max-width:1180px;
display:grid;
grid-template-columns:1fr 460px;
gap:40px;
align-items:center;
}

.forgot-visual{
display:flex;
justify-content:center;
align-items:center;
}

.forgot-visual img{
width:100%;
max-width:620px;
height:auto;
display:block;
filter:drop-shadow(0 14px 30px rgba(0,0,0,0.25));
}

.forgot-form-card{
background:rgba(7, 25, 78, 0.48);
border:1px solid rgba(255,255,255,0.12);
border-radius:28px;
backdrop-filter:blur(8px);
box-shadow:0 20px 50px rgba(0,0,0,0.28);
padding:34px 30px 30px;
box-sizing:border-box;
}

.forgot-kicker{
text-align:center;
font-size:18px;
letter-spacing:3px;
margin-bottom:8px;
color:#dfe8ff;
}

.forgot-form-card h1{
text-align:center;
font-size:46px;
line-height:1.05;
margin:0 0 18px;
font-weight:800;
color:#ffffff;
}

.forgot-intro{
text-align:center;
font-size:17px;
line-height:1.6;
color:#dfe8ff;
margin:0 0 22px;
}

.forgot-error{
background:#ffe1e1;
color:#8b1e1e;
border-radius:12px;
padding:12px 14px;
margin-bottom:16px;
font-size:15px;
line-height:1.5;
}

.forgot-success{
background:#e4f7e4;
color:#1d6a29;
border-radius:12px;
padding:12px 14px;
margin-bottom:16px;
font-size:15px;
line-height:1.5;
}

.forgot-field{
margin-bottom:18px;
}

.forgot-field input{
width:100%;
height:72px;
border:none;
border-radius:18px;
padding:0 22px;
font-size:19px;
color:#23365e;
background:#f3f5f8;
box-sizing:border-box;
outline:none;
}

.forgot-field input::placeholder{
color:#7a879f;
}

.forgot-field input:focus{
box-shadow:0 0 0 3px rgba(255,255,255,0.15);
}

.forgot-submit-btn{
width:100%;
height:74px;
border:none;
border-radius:18px;
background:linear-gradient(180deg,#5fa24c,#3d7f34);
color:#ffffff;
font-size:22px;
font-weight:800;
cursor:pointer;
box-shadow:0 10px 24px rgba(0,0,0,0.22);
margin-top:4px;
transition:transform 0.15s ease, box-shadow 0.15s ease;
}

.forgot-submit-btn:hover{
transform:translateY(-1px);
box-shadow:0 14px 28px rgba(0,0,0,0.24);
}

.forgot-links{
margin-top:22px;
display:flex;
flex-direction:column;
gap:14px;
text-align:center;
}

.forgot-links a{
color:#ffffff;
text-decoration:none;
font-size:17px;
}

.forgot-links a:hover{
text-decoration:underline;
}

.register-link{
font-weight:700;
}

/*
================================
PASSWORD TOGGLE
================================
*/

.password-field{
position:relative;
}

.password-field input{
padding-right:62px;
}

.toggle-password{
position:absolute;
top:50%;
right:18px;
transform:translateY(-50%);
background:none;
border:none;
cursor:pointer;
font-size:22px;
color:#5d6c8f;
padding:0;
line-height:1;
}

.toggle-password:hover{
color:#23365e;
}

/*
================================
PASSWORD STRENGTH
================================
*/

.password-strength{
width:100%;
height:10px;
background:rgba(255,255,255,0.15);
border-radius:999px;
overflow:hidden;
margin-top:-6px;
margin-bottom:10px;
}

.password-strength-bar{
height:100%;
width:0;
transition:width 0.25s ease;
border-radius:999px;
background:#d9534f;
}

.password-strength-text{
font-size:14px;
color:#dfe8ff;
margin-bottom:14px;
}

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

@media (max-width: 980px){
.forgot-panel{
grid-template-columns:1fr;
gap:24px;
max-width:680px;
}

.forgot-visual img{
max-width:420px;
}

.forgot-form-card h1{
font-size:38px;
}
}

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

@media (max-width: 700px){

.topbar{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:14px;
padding:18px 18px 16px;
}

.site-brand{
width:100%;
}

.site-name{
display:block;
font-size:26px;
font-weight:800;
line-height:1.05;
letter-spacing:0.5px;
}

.menu{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
}

.menu a{
margin:0 !important;
font-size:18px;
font-weight:700;
}

.forgot-hero{
min-height:auto;
padding:24px 14px 40px;
}

.forgot-panel{
gap:18px;
}

.forgot-visual img{
max-width:320px;
}

.forgot-form-card{
padding:24px 18px 22px;
border-radius:22px;
}

.forgot-kicker{
font-size:16px;
letter-spacing:2px;
}

.forgot-form-card h1{
font-size:30px;
margin-bottom:14px;
}

.forgot-intro{
font-size:16px;
margin-bottom:18px;
}

.forgot-field{
margin-bottom:14px;
}

.forgot-field input{
height:64px;
font-size:18px;
border-radius:16px;
padding:0 18px;
}

.password-field input{
padding-right:56px;
}

.toggle-password{
right:16px;
font-size:21px;
}

.forgot-submit-btn{
height:66px;
font-size:20px;
border-radius:16px;
}

.forgot-links{
gap:12px;
}

.forgot-links a{
font-size:16px;
line-height:1.4;
}
}