/* RESET */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body{
    min-height:100vh;
    display:flex;
    flex-direction:column;

   
   min-height:100vh;

    background:

    linear-gradient(
        120deg,
        rgba(13,75,142,.03) 25%,
        transparent 25%
    ),

    linear-gradient(
        300deg,
        rgba(13,75,142,.03) 25%,
        transparent 25%
    ),

    linear-gradient(
        135deg,
        #f7f9fc 0%,
        #edf3fa 50%,
        #f8fbff 100%
    );

    background-size:
        300px 300px,
        300px 300px,
        100% 100%;


    background-size: cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

/* TOP HEADER */
.top-bar{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    background:rgba(0, 65, 130, 0.95);
    backdrop-filter:blur(10px);
    color:#fff;
    padding:15px 20px;
    box-shadow:0 2px 10px rgba(0,0,0,0.15);
}

.logo{
    width:120px;
    height:120px;
    object-fit:contain;
}

.university-title{
    text-align:left;
}

.uni-name{
    font-size:26px;
    font-weight:700;
}

.uni-sub{
    font-size:14px;
    opacity:0.9;
    margin-top:3px;
}

/* NEWS BAR */
.news-bar{
    background:#f59e0b;
    color:#fff;
    overflow:hidden;
    white-space:nowrap;
    padding:10px 0;
    font-weight:600;
}

.news-wrapper{
    width:100%;
    overflow:hidden;
}

.news-content{
    display:inline-block;
    color:#dc3545;
    font-weight:600;
    padding-left:100%;
    animation:scrollNews 32s linear infinite;
}
.news-content:hover{
    animation-play-state:paused;
}

@keyframes scrollNews{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-100%);
    }
}

/* MAIN CONTAINER */
.container{
    width:50%;
    max-width:480px;
    margin:50px auto;
    background:#fff;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,0.12);
    overflow:hidden;
}

/* LOGIN HEADER */
.header{
    background:#004182;
    color:#fff;
    text-align:center;
    padding:25px;
}

.portal-title{
    font-size:28px;
    font-weight:700;
    letter-spacing:1px;
}

.portal-sub{
    margin-top:6px;
    font-size:15px;
    opacity:0.9;
}

/* FORM */
form{
    padding:30px;
}

.input-group{
    margin-bottom:20px;
    position:relative;
}

.input-group label{
    display:block;
    margin-bottom:7px;
    font-weight:600;
    color:#333;
}

.input-group input{
    width:100%;
    padding:12px 14px;
    border:1px solid #d1d5db;
    border-radius:8px;
    font-size:15px;
    transition:0.3s;
}

.input-group input:focus{
    outline:none;
    border-color:#004182;
    box-shadow:0 0 0 3px rgba(0,65,130,0.15);
}

/* PASSWORD EYE */
.password-toggle{
	display:none;
    position:absolute;
    right:15px;
    top:42px;
    cursor:pointer;
    color:#666;
}

/* BUTTON */
.btn{
    width:100%;
    border:none;
    background:#004182;
    color:#fff;
    padding:13px;
    border-radius:8px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
}

.btn:hover{
    background:#0056b3;
}
#loginSpinner{
    color:#fff;
    font-weight:600;
}

#loginBtn:disabled{
    opacity:0.9;
    cursor:not-allowed;
}
/* LINKS */
.link-right{
    text-align:right;
    margin-bottom:20px;
}

.link-right a,
.text-center a{
    color:#004182;
    text-decoration:none;
    font-weight:600;
}

.link-right a:hover,
.text-center a:hover{
    text-decoration:underline;
}

.text-center{
    text-align:center;
    margin-top:15px;
    color:#555;
}

/* ALERTS */
.success{
    background:#d1fae5;
    color:#065f46;
    border-left:4px solid #10b981;
    padding:12px;
    margin-bottom:20px;
    border-radius:6px;
}

.error{
    background:#fee2e2;
    color:#991b1b;
    border-left:4px solid #ef4444;
    padding:12px;
    margin-bottom:20px;
    border-radius:6px;
}

.input-icon{
    position:absolute;
    left:15px;
    top:46px;
    color:#6b7280;
    z-index:2;
}

.input-group input{
    padding-left:45px;
}

/* FOOTER */
.footer{
    margin-top:auto;
    background:#002855;
    color:#fff;
    text-align:center;
    padding:15px;
    font-size:13px;
    line-height:1.7;
}

/* ===================================
   REGISTER PAGE EXTRA STYLES
=================================== */

/* Password help text */
.input-group small{
    display:block;
    margin-top:5px;
    font-size:12px;
    color:#666;
    line-height:1.4;
}

/* OTP Section */
#otpSection{
    display:none;
    margin-top:15px;
    padding:15px;
    border:1px dashed #004182;
    border-radius:8px;
    background:#f8fbff;
}

#otp{
    text-align:center;
    font-size:18px;
    font-weight:600;
    letter-spacing:4px;
}

/* OTP success message */
#otpMessage{
    text-align:center;
    margin-top:10px;
}

#otpMessage div{
    background:#d1fae5;
    color:#065f46;
    border:1px solid #10b981;
    padding:10px;
    border-radius:6px;
    font-weight:600;
}

/* Complete registration button */
#completeRegisterBtn{
    width:100%;
    margin-top:15px;
}

/* Disabled button */
.btn:disabled{
    background:#94a3b8;
    cursor:not-allowed;
}

.btn:disabled:hover{
    background:#94a3b8;
}

/* Better spacing for registration form */
form .input-group{
    margin-bottom:18px;
}

/* Company name field */
input[name="company_name"]{
    text-transform:uppercase;
}

/* Mobile number field */
input[name="phone"]{
    letter-spacing:1px;
}

/* Registration card slightly wider */
.container{
    max-width:500px;
}

#registerBtn,
#resendOtpBtn{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
}

#registerBtn span,
#resendOtpBtn span{
    position:static;
    color:inherit;
}

#registerBtn{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
}

#registerSpinner{
    font-size:15px;
}

#resendOtpBtn{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
}
#verifyOtpBtn{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
}

.input-icon{
    position:absolute;
    left:15px;
    top:47px;
    color:#6b7280;
    z-index:2;
}

.input-group input{
    padding-left:45px;
}
/* =========================
   FORGOT PASSWORD
========================= */

.success{
    background:#d4edda;
    color:#155724;
    border:1px solid #c3e6cb;
    padding:12px;
    border-radius:6px;
    margin-bottom:15px;
    text-align:center;
    font-weight:600;
}

.error{
    background:#f8d7da;
    color:#721c24;
    border:1px solid #f5c6cb;
    padding:12px;
    border-radius:6px;
    margin-bottom:15px;
    text-align:center;
    font-weight:600;
}

#otpSection{
    margin-top:15px;
}

#passwordSection{
    margin-top:15px;
}

#otpTimer{
    text-align:center;
    margin-top:10px;
    font-weight:600;
    color:#dc3545;
}

#resendOtpBtn{
    margin-top:10px;
    width:100%;
}

#verifyOtpBtn,
#sendOtpBtn,
#resetPasswordBtn{
    width:100%;
}

.info-message{
    background:#e7f3ff;
    color:#0c5460;
    border:1px solid #bee5eb;
    padding:12px;
    border-radius:6px;
    margin-bottom:15px;
    text-align:center;
}

.otp-success{
    color:#28a745;
    font-weight:600;
    text-align:center;
    margin-top:10px;
}

/* OTP BUTTON LOADERS */

#sendOtpBtn,
#verifyOtpBtn,
#resetPasswordBtn,
#resendOtpBtn{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
}

/* Spinner Text */

#sendSpinner,
#verifySpinner,
#resetSpinner,
#resendSpinner{
    font-size:15px;
}

/* Disabled Buttons */

#sendOtpBtn:disabled,
#verifyOtpBtn:disabled,
#resetPasswordBtn:disabled,
#resendOtpBtn:disabled{
    opacity:0.8;
    cursor:not-allowed;
}

.input-group{
    position:relative;
}

.input-icon{
    position:absolute;
    left:15px;
    top:43px;
    color:#6b7280;
    z-index:2;
}

.input-group input{
    padding-left:45px;
}

.password-toggle{
	display:none;
    position:absolute;
    right:15px;
    top:50px;
    cursor:pointer;
    color:#666;
}

/* MOBILE */
@media(max-width:768px){

    .top-bar{
        flex-direction:column;
        text-align:center;
    }

    .university-title{
        text-align:center;
    }

    .uni-name{
        font-size:20px;
    }

    .container{
        margin:25px 15px;
    }

    .portal-title{
        font-size:24px;
    }
}