/* ===========================================
   PARLIAMENT INFORMATION SYSTEM
   Global Stylesheet
=========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --primary:#0B6E4F;
    --primary-dark:#084C39;
    --gold:#D4AF37;
    --light:#F4F7F8;
    --white:#ffffff;
    --text:#1E293B;
    --border:#d8dee4;
    --danger:#d93025;
    --success:#198754;
    --shadow:0 12px 35px rgba(0,0,0,.12);

}

body{

    font-family:'Poppins',sans-serif;
    background:var(--light);
    color:var(--text);

}

/* ============================= */

.signup-container{

    display:flex;
    min-height:100vh;

}

/* ============================= */

.left-panel{

    flex:1;
    background:
    linear-gradient(
            rgba(11,110,79,.90),
            rgba(8,76,57,.95)
    ),
    url("../images/parliament-bg.jpg");

    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;

}

/* ============================= */

.overlay{

    width:80%;
    text-align:center;

}

.overlay h1{

    font-size:42px;
    margin-bottom:20px;
    font-weight:700;

}

.overlay p{

    font-size:18px;
    line-height:1.8;
    opacity:.95;

}

.hero-image{

    width:85%;
    margin-top:40px;
    max-width:480px;

}

/* ============================= */

.right-panel{

    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:60px;

}

/* ============================= */

.form-card{

    width:100%;
    max-width:620px;

    background:#fff;

    border-radius:18px;

    padding:45px;

    box-shadow:var(--shadow);

}

.form-card h2{

    text-align:center;

    color:var(--primary);

    margin-bottom:30px;

    font-size:30px;

}

/* ============================= */

.grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

/* ============================= */

input,
select{

    width:100%;

    padding:15px 18px;

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

    border-radius:10px;

    outline:none;

    transition:.3s;

    font-size:15px;

}

input:focus,
select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(11,110,79,.15);

}

/* ============================= */

.btn{

    width:100%;

    margin-top:25px;

    border:none;

    padding:16px;

    border-radius:10px;

    background:var(--primary);

    color:#fff;

    cursor:pointer;

    font-size:17px;

    font-weight:600;

    transition:.35s;

}

.btn:hover{

    background:var(--gold);

    color:#222;

    transform:translateY(-2px);

}

/* ============================= */

.login-link{

    text-align:center;

    margin-top:25px;

    font-size:15px;

}

.login-link a{

    color:var(--primary);

    font-weight:600;

    text-decoration:none;

}

.login-link a:hover{

    color:var(--gold);

}

/* ============================= */

.alert{

    padding:15px;

    margin-bottom:20px;

    border-radius:10px;

    font-size:14px;

}

.success{

    background:#d9f6e5;

    color:var(--success);

}

.error{

    background:#ffe2e2;

    color:var(--danger);

}

/* ============================= */

@media(max-width:1000px){

    .signup-container{

        flex-direction:column;

    }

    .left-panel{

        min-height:300px;

    }

    .overlay{

        width:90%;

        padding:40px 0;

    }

    .overlay h1{

        font-size:34px;

    }

    .hero-image{

        width:70%;

    }

    .right-panel{

        padding:30px 20px;

    }

}

/* ============================= */

@media(max-width:700px){

    .grid{

        grid-template-columns:1fr;

    }

    .form-card{

        padding:30px;

    }

    .overlay h1{

        font-size:28px;

    }

    .overlay p{

        font-size:15px;

    }

    .hero-image{

        display:none;

    }

}
/* Password Wrapper */

.password-wrapper{

    position:relative;

}

.toggle-password{

    position:absolute;

    right:15px;

    top:50%;

    transform:translateY(-50%);

    cursor:pointer;

    user-select:none;

    font-size:18px;

}

.password-strength{

    margin-top:8px;

    font-size:13px;

    font-weight:600;

}

.confirm-note{

    display:block;

    margin-top:8px;

    font-size:13px;

    font-weight:600;

}