@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

 * {
     box-sizing: border-box;
 }

 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
     margin: 0;
     padding: 0;
     background: #172f41 !important;
     height: 100vh;

     overflow-x: hidden;
 }

 /* Floating Cockpit Container containing both wings */
 .login-cockpit {
     position: relative;
     z-index: 10;
     width: 100%;
     height: 100%;

     display: flex;
     background: #111827;



     overflow: hidden;

 }

 /* Left Wing: Solid Crimson Benefit Showcase */
 .wing-showcase {
     width: 65%;
     padding: 4.5rem 4rem;
     display: flex;
     flex-direction: column;
     justify-content: center;


     border-right: 1px solid rgba(232, 175, 78, 0.2);
     position: relative;
 }

 .wing-showcase::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgb(0 0 0 / 60%);
     z-index: 1;
 }

 /* Right Wing: Solid Charcoal Login Panel */
 .wing-login {
     width: 35%;
     padding: 4.5rem 4rem;
     background: #fff;
     display: flex;
     flex-direction: column;
     justify-content: center;
     border-left: 1px solid rgba(232, 175, 78, 0.25);
 }

 .brand-logo-container {
     margin-bottom: 1.8rem;
     text-align: left;
 }

 .brand-logo-container img {
     max-height: 100px;
     width: auto;
     object-fit: contain;
 }

 .university-title {
     font-size: 20px;
     font-weight: 700;
     color: #92210f;
     margin-top: 0.5rem;
     margin-bottom: 15px;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     opacity: 0.9;
     border-bottom: 1px solid #92210f;
     padding-bottom: 0.75rem;
 }

 .login-heading {
     font-size: 18px;
     font-weight: 600;
     color: #323232;
     margin-bottom: 2.2rem;
     line-height: 24px;
     letter-spacing: -0.015em;
 }

 .form-group-custom {
     margin-bottom: 1.5rem;
     position: relative;
 }

 .right-content {
     z-index: 2;
 }

 .form-group-custom label {
     display: block;
     font-size: 0.75rem;
     font-weight: 600;
     color: #666;
     margin-bottom: 0.5rem;
     text-transform: uppercase;
     letter-spacing: 0.08em;
 }

 .input-container-custom {
     position: relative;
     display: flex;
     align-items: center;
 }

 .input-container-custom i {
     position: absolute;
     left: 1.25rem;
     color: #475569;
     font-size: 1.25rem;
     transition: color 0.3s;
     /* pointer-events: none; */
 }

 .input-custom {
     width: 100%;
     /* background: #1f2937 !important; */
     border: 1.5px solid #b7b7b7 !important;
     border-radius: 5px !important;
     padding: 1rem 1rem 1rem 3.2rem !important;
     font-size: 14px !important;
     color: #323232 !important;
     outline: none !important;
     height: 40px !important;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
     font-family: "Inter";
 }

 .input-custom::placeholder {
     color: #475569 !important;
 }

 .input-custom:focus {
     /* border-color: #e8af4e !important;
      background: #111827 !important; */
     box-shadow: none !important;
 }

 .input-custom:focus+i {
     color: #323232;
 }

 .forgot-link-container {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     margin-top: 0.85rem;
     margin-bottom: 2.2rem;
 }

 .forgot-link {
     font-size: 14px;
     color: #92210f;
     text-decoration: none;
     font-weight: 500;
     transition: color 0.2s;
 }

 .forgot-link:hover {
     color: #f3c677;
     text-decoration: underline;
 }

 .btn-submit-custom {
     width: 100%;
     background: #92210f;
     color: #ffffff;
     border: none;
     border-radius: 4px;
     padding: 10px 10px !important;
     font-size: 14px;
     font-weight: 600;
     letter-spacing: 0.06em;
     cursor: pointer;
     height: auto;
     transition: all 0.2s ease;
 }

 .btn-submit-custom:hover {
     background: #e8af4e;
     color: #150301;
 }

 .btn-submit-custom:active {
     background: #d99f3d;
 }

 /* Left side visual styling */
 .headline-custom {
     font-size: 36px;
     font-weight: 800;
     line-height: 1.2;
     color: #ffffff;
     margin-bottom: 2.2rem;
     letter-spacing: -0.025em;
     text-transform: uppercase;
 }

 .store-heading {
     font-size: 20px;
     font-weight: 700;
     margin-bottom: 1.5rem;
     color: #e8af4e;
     letter-spacing: 0.03em;
     text-transform: uppercase;
 }

 .bullets-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .bullets-list li {
     display: flex;
     align-items: flex-start;
     margin-bottom: 10px;
     font-size: 15px;
     line-height: 1.5;
     color: #f1f5f9;
 }

 .bullets-list li:last-child {
     margin-bottom: 0;
 }

 .bullets-list li i {
     color: #e8af4e;
     font-size: 1.3rem;
     margin-right: 0.85rem;
     margin-top: 0.1rem;
 }

 /* Integrated elegant alert style */
 .alert-container-custom {
     margin-bottom: 1.5rem;
     animation: fadeInDown 0.4s ease-out;
 }

 .alert {
     border-radius: 10px !important;
     padding: 1rem 1.25rem !important;
     border: none !important;
     font-size: 0.9rem !important;
     font-weight: 500 !important;
     display: flex;
     align-items: center;
 }

 .alert-success {
   background-color: #11554373 !important;
    color: #323232 !important;
    /* border-left: 0px solid #e8af4e !important; */
    gap: 10px;
    flex-direction: column;
 }

.alert-danger {
    background-color: #92210f6e !important;
    color: #323232 !important;
    gap: 10px;
    flex-direction: column;
    /* border-left: 4px solid #92210f !important; */
}

 /* Errors placement from jQuery validation */
 .invalid-feedback {
     display: block;
     color: #f87171;
     font-size: 0.82rem;
     margin-top: 0.45rem;
     font-weight: 500;
     animation: fadeInUp 0.2s ease-out;
 }

 .is-invalid {
     border-color: #f87171 !important;
     box-shadow: none !important;
 }

  .wing-showcase {
    background: url('../../images/campus.jpg');
	background-size: cover;
     background-position: center;
 }
 
  /* ── Stats Row ── */
  .stats-row {
    display: flex;
    gap: 1.5rem;
    margin-top: 3rem;
    z-index: 2;
    position: relative;
	display: none;
  }
  .stat-card {
    flex: 1;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(232,175,78,0.25);
    border-radius: 10px;
    padding: 1.1rem 0.8rem;
    text-align: center;
    backdrop-filter: blur(6px);
    transition: transform 0.25s;
  }
  .stat-card:hover { transform: translateY(-4px); }
  .stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: #e8af4e;
    line-height: 1;
    display: block;
  }
  .stat-label {
    font-size: 0.72rem;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-top: 0.3rem;
    display: block;
  }

  /* ── Showcase tagline strip ── */
.tagline-strip {
    z-index: 2;
    position: relative;
    margin-top: 2.5rem;
    padding: 1rem 1.5rem;
    background: rgb(255 255 255 / 61%);
    border-left: 4px solid #92210f;
    border-radius: 6px;
    color: #1e1e1e;
    font-size: 0.92rem;
    line-height: 1.6;
    font-style: italic;
}
  .tagline-strip span {
    display: block;
    font-size: 0.75rem;
    color: #92210f;
    font-style: normal;
    font-weight: 600;
    margin-top: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

   

  /* ── Password toggle ── */
  .pwd-toggle {
    position: absolute;
        right: 55px;
    top: 9px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
    font-size: 1.15rem;
    z-index: 3;
    transition: color 0.2s;
    pointer-events: all;
  }
  .pwd-toggle:hover { color: #92210f; }

  

  

  /* ── Login footer ── */
  .login-footer {
    margin-top: 2rem;
    text-align: center;
    font-size: 15px;
    color: #666;
    line-height: 1.6;
  }
  .login-footer a {
    color: #92210f;
    text-decoration: none;
    font-weight: 600;
  }
  .login-footer a:hover { text-decoration: underline; }

  /* ── Counter animation ── */
  @keyframes countUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .stat-number { animation: countUp 0.8s ease forwards; }

 /* Animations */
 @keyframes scaleIn {
     from {
         opacity: 0;
         transform: scale(0.96);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 @keyframes fadeInRight {
     from {
         opacity: 0;
         transform: translateX(20px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 @keyframes fadeInDown {
     from {
         opacity: 0;
         transform: translateY(-10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(5px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Responsive scaling */
 @media (max-width: 991px) {
     .login-cockpit {
         max-width: 500px;
         flex-direction: column;
         border-radius: 16px;
         margin: 1.5rem;
     }

     .wing-showcase {
         display: none;
         /* Hide benefit showcase to save vertical space on mobiles */
     }

     .wing-login {
         width: 100%;
         padding: 3.5rem 2.5rem;
         border-left: none;
     }
 }