@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
body{background:url(../images/bg_main.png) no-repeat; background-size:cover; background-position:left top;font-family: "Source Sans 3", sans-serif;}

.login-body{background:#fff; padding:60px; border-radius:20px; position:relative; z-index:2; box-shadow: 0 0 25px rgba(204, 218, 229, 0.16);}
.login-card {padding: 0 0 20px 20px; width: 620px; max-width: 100%;}
.login-card:before{border-radius:20px;content:""; position:absolute; left:0px; bottom:0px;background: linear-gradient(180deg, #CF122B 0%, #941D2D 100%);right: 0;top: 30px;}
.logo_{margin:100px 0}
.bg_right_image{position:absolute;right: 20px;bottom: 20px;top: 20px;width: 67%;height: calc(100% - 40px);}
.z-index{z-index:2}
.form-label{color: #141414;font-size: 16px;font-style: normal;font-weight: 400;line-height: 1; margin-bottom:10px}
.form-control{border-radius: 8px; font-size:16px; border: 1px solid #6783A0; box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.08);height: 50px; line-height:50px}
p.hint {margin: 10px 0;}
.btn-primary{border-radius: 15px;
  background: linear-gradient(90deg, #F34E3A 0%, #FAA240 100%);
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.08);
  font-size: 16px;
  padding: 12px 30px;
  width: 100%;
  color: #FFF;
  font-family: "Source Sans 3";
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.6px;
  border: 0;}
.btn-primary:hover{background: linear-gradient(90deg, #FAA240 0%, #F34E3A 100%);}
/* 11 feb 2026*/
.Shape_Box{border-radius: 100%;background: linear-gradient(180deg, #FA9E40 0%, #F4583B 100%);width: 240px;height: 240px; position:absolute}

:root {
    --primary-orange: #fd7e35;
    --secondary-orange: #fcae63;
    --text-dark: #1a1a1a;
    --text-grey: #8d8d8d;
    --border-light: #e0e0e0;
    --success-green: #2ecc71;
    --bg-gradient: linear-gradient(315deg, #F3543A 0%, #FA9940 75.03%);
    --font-family: 'Source Sans 3';
}
.login_container {width: 100%;height: 100%;display: flex;flex-direction: row; padding:15px}
/* Left Section */
.left-section {flex: 1;padding: 60px 80px;display: flex;flex-direction: column;justify-content: center;position: relative;background: #fff;z-index: 1; overflow:hidden; border-radius: 10px;}
.logo {/*position: absolute;top: 40px;left: 80px;*/display: flex;align-items: center;gap: 15px;}
.logo img{height:70px}
.logo-icon {width: 40px;height: 40px;display: flex;flex-direction: column;justify-content: space-between;}
.logo-icon span {display: block;height: 8px;background: #a52a2a; /* Brownish red */border-radius: 2px;}
.login_container .alert.alert-danger.mb-3 {
  border: 0;
  padding: 0;
  background: transparent;
  color: #d03f20;
}
.logo-icon span:nth-child(1) { width: 100%; transform: skewX(-20deg); }
.logo-icon span:nth-child(2) { width: 70%; transform: skewX(-20deg); }
.logo-icon span:nth-child(3) { width: 40%; transform: skewX(-20deg); }
.logo-text h1 {font-size: 24px;font-weight: 700;color: #8b3a3a; /* Dark Red */line-height: 1;}
.logo-text p {font-size: 14px;font-weight: 500;color: #d35400;letter-spacing: 2px;}
.content-wrapper {max-width: 450px;margin: auto;}
.text-block {margin-bottom: 40px;}
.text-block h2 {font-size: 28px;font-weight: 600;color: var(--text-dark);margin-bottom: 10px;}
.text-block .subtitle {font-size: 14px;color: var(--text-grey);}
.login-form {display: flex;flex-direction: column;gap: 20px;}
.input-group {display: flex;align-items: center;padding: 2px 15px;border: 1px solid var(--border-light);border-radius: 12px;transition: all 0.3s ease;}
.input-group:hover, .input-group:focus-within {border-color: var(--primary-orange);box-shadow: 0 4px 12px rgba(253, 126, 53, 0.1);}
.input-group .icon {color: var(--text-grey);margin-right: 15px;display: flex; padding-right:15px; border-right:1px solid #CECECE}
.input-wrapper label{padding: 12px 20px 12px 0;
color: #A7A7A7;
font-family: "Source Sans 3";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.6px;
}
.input-wrapper label::after{background-color:transparent !important;}
.input-wrapper {flex: 1;display: flex;flex-direction: column;}
.input-wrapper input {border: none;outline: none;font-family: var(--font-family);font-size: 14px;color: var(--text-dark);background: transparent;width: 100%;border: 0;box-shadow: none; min-height: auto !important;
  height: 50px !important;
  padding: 16px 0 4px 3px !important;
  line-height: 1 !important;}
.status-icon {color: var(--success-green);font-size: 20px;display: flex;}
.toggle-password {color: var(--text-dark);font-size: 20px;cursor: pointer;display: flex;}
.hint {font-size: 12px;color: var(--text-grey);margin-top: -10px;line-height: 1.5;}
.btn-signin {margin-top: 20px;padding: 15px;border: none;border-radius: 12px;background: var(--bg-gradient);color: #fff;font-size: 16px;font-weight: 600;cursor: pointer;transition: transform 0.2s ease, box-shadow 0.2s ease;}
.btn-signin:hover {transform: translateY(-2px);box-shadow: 0 10px 20px rgba(253, 126, 53, 0.3);}
.btn-signin:active {transform: translateY(0);}
.decorative-circle {position: absolute;bottom: -120px;left: -130px;width: 240px;height: 240px;background: var(--primary-orange);border-radius: 50%;z-index: -1;opacity: 0.9;}
/* Right Section */
.right-section {flex: 1;background: var(--bg-gradient);display: flex;justify-content: center;align-items: center;padding: 40px;position: relative;overflow: hidden; border-radius:10px}
.right-section:before{content:""; position:absolute; bottom:0; left:0; width:70%; height:70%; background:url(../images/decoration_right.png) no-repeat; background-size:cover; background-position: bottom left}
.glass-card {border-radius: 16px;border: 1px solid #FFFFFF5E;background: rgba(183, 233, 246, 0.25);backdrop-filter: blur(13px);padding: 40px;height: 100%;display: flex;flex-direction: column;align-items: center;text-align: center;color: #fff;box-shadow: 0 20px 50px rgba(0,0,0,0.1); width:100%}
.glass-card .content{height:100%}
.glass-card:before{content:""; background:url(../images/image_bg.png) no-repeat; display: block;
  position: absolute;
  right: 20%;
  width: 110%;
  height: 50%;
  top: 30%;
  background-size: cover;
  background-position: center;}
.glass-card h2 {color: #FFF;
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  margin-bottom: 20px;
  font-size: clamp(30px, 2vw, 20px);}
.image-container {flex: 1;display: flex;justify-content: center;align-items: center;width: 100%;position: relative; height:calc(100% - 90px)}
.image-container img {max-width: 100%;max-height: 100%; object-fit: contain;filter: drop-shadow(0 20px 30px rgba(0,0,0,0.3)); border-radius: 20px;}
.input-wrapper input.form-control:focus{box-shadow:none; border:0}
/* Responsive */
@media (max-width: 1024px) {
    .left-section {padding: 40px;}
    .logo {left: 40px;}
}
@media (max-width: 992px) {
    .login_container {flex-direction: column;overflow-y: auto;}
    .left-section, .right-section {flex: none;width: 100%;min-height: 100vh; padding: 40px 20px;}
    .right-section {display:none}
    .decorative-circle {width: 150px;height: 150px;bottom: -50px;left: -50px;}
}


@media only screen and (max-width: 1920px) {
    .logo_ {margin: 30px 0 50px;}
    .login-body{padding:30px}
	.form-control{height:50px; line-height:50px}
	.logo_ img{height: 60px;}
}

@media only screen and (max-width: 992px) {
.login-container .container-fluid{padding:0 30px}
    .bg_right_image{display:none}
    .login-card{margin:0 auto}
    .logo_ img{height: 50px;}
    .logo_ {margin: 30px 0 50px;}
    .login-body{padding:30px}
}
@media only screen and (max-width: 480px) {
    .login-container .container-fluid {padding: 0 15px;}
    .login-card {padding: 0 0 15px 15px;}
    .form-control{height:45px}
    .form-label{font-size:16px;}
    .btn-primary{font-size:16px}p.hint {margin: 10px 0;font-size: 14px;line-height: 1;}
}