/* ===========================
   BESTECH CCC Portal v1.0
   =========================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{

background:#f5f5f5;

background-image:

linear-gradient(135deg,#800000,#b8860b);

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:20px;

}

.login-container{

width:100%;

max-width:500px;

}

.login-card{

background:#ffffff;

border-radius:18px;

padding:35px;

box-shadow:

0 15px 40px rgba(0,0,0,.25);

text-align:center;

}

.logo{

width:120px;

height:120px;

border-radius:50%;

margin:auto;

display:block;

margin-bottom:20px;

}

h1{

font-size:26px;

color:#800000;

font-weight:700;

}

h2{

font-size:20px;

color:#b8860b;

margin-top:5px;

font-weight:600;

}

.portal-title{

margin-top:15px;

font-size:18px;

font-weight:600;

color:#333;

}

.form-group{

margin-top:20px;

text-align:left;

}

.form-group label{

display:block;

margin-bottom:8px;

font-weight:600;

color:#444;

}

.form-group input,

.form-group select{

width:100%;

padding:14px;

font-size:16px;

border-radius:10px;

border:1px solid #ccc;

outline:none;

transition:.3s;

}

.form-group input:focus,

.form-group select:focus{

border-color:#800000;

box-shadow:0 0 8px rgba(128,0,0,.25);

}
button{

width:100%;

padding:15px;

margin-top:25px;

background:#800000;

color:#fff;

border:none;

border-radius:10px;

font-size:18px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

button:hover{

background:#a00000;

transform:translateY(-2px);

}

.instruction-box{

margin-top:20px;

padding:15px;

background:#fff8e6;

border:1px solid #e0c36c;

border-radius:10px;

text-align:left;

font-size:14px;

}

.checkbox{

display:flex;

align-items:flex-start;

gap:10px;

cursor:pointer;

}

.checkbox input{

margin-top:4px;

}

.loading-screen{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

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

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

z-index:9999;

}

.loader{

width:60px;

height:60px;

border:6px solid #ddd;

border-top:6px solid #800000;

border-radius:50%;

animation:spin 1s linear infinite;

margin-bottom:15px;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

.footer{

margin-top:25px;

text-align:center;

font-size:13px;

color:#ffffff;

}

@media(max-width:600px){

.login-card{

padding:20px;

}

h1{

font-size:22px;

}

h2{

font-size:18px;

}

.portal-title{

font-size:16px;

}

}
/* =========================================
   CCC PORTAL FOOTER - MOBILE FIX
========================================= */

.footer {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 22px 15px;
    background: #a94f00;
    color: #ffffff;
    position: relative;
}

.footer-brand {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 8px;
}

.footer-brand span {
    display: block;
    font-size: 13px;
    font-weight: 600;
}

.footer p {
    margin: 4px 0;
    font-size: 11px;
    line-height: 1.4;
}

@media (max-width: 650px) {

    .footer {
        width: 100%;
        padding: 20px 12px;
        text-align: center;
    }

    .footer-brand {
        font-size: 14px;
    }

    .footer-brand span {
        font-size: 12px;
    }

    .footer p {
        font-size: 10px;
    }
}
/* =========================================
   CCC PORTAL - FOOTER AT BOTTOM
========================================= */

html,
body {
    min-height: 100%;
}

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

.login-container {
    flex: 1;
}

.footer {
    width: 100%;
    margin-top: auto;
    flex-shrink: 0;
    text-align: center;
    box-sizing: border-box;
}