/* === LOGIN PAGE STYLES === */
 .custom-login-wrapper {padding: 50px 20px; background-color: #fff; max-width: 1200px; margin: 0 auto; } 
 .login-message {text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 40px; } 
 .login-message .highlight {color: #4CAF50; } 
 .login-container {display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; align-items: center; } 
 .login-left {flex: 1 1 400px; display: flex; flex-direction: column; gap: 40px; } 
 .login-image {width: 100%; background-size: cover; background-position: center; border-radius: 10px; aspect-ratio: 1.7; } 
 .account-register {display: flex; justify-content: space-between; align-items: center; gap: 10px; } 
 .register-text {font-size: 18px; font-weight: bold; margin: 0; } 
 .register-btn {background-color: #4CAF50; color: #fff; padding: 12px 24px; border-radius: 8px; font-size: 14px; text-decoration: none; font-weight: bold; white-space: nowrap; transition: background-color 0.3s ease; } 
 .register-btn:hover {background-color: #388e3c; } 
 .login-right {flex: 1 1 400px; } 
 .login-box {background-color: #f5f5f5; padding: 30px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; gap: 20px; } 
 .login-title {text-align: center; font-size: 26px; font-weight: bold; } 
 .form-group {width: 100%; font-size: 14px; } 
 .required {color: red; }
.input-wrapper {display: flex; align-items: center; gap: 10px; background: #fff; padding: 10px 15px; border: 1px solid #ddd; border-radius: 5px; margin-top: 8px; position: relative; }
.form-group label {font-size: 16px; }
.input-wrapper input {border: none !important; outline: none; width: 100%; font-size: 16px; background: transparent; }
.input-wrapper svg {width: 24px; height: 24px; cursor: pointer; fill: #00AE5B; }
.form-actions {display: flex; justify-content: space-between; align-items: center; }
.forgot-link {color: #333; font-size: 16px; text-decoration: none; }
.forgot-link:hover {text-decoration: underline; }
.login-btn {background-color: #4CAF50; color: #fff; padding: 12px 24px; border: none; border-radius: 8px; font-size: 14px; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease; }
.login-btn:hover {background-color: #388e3c; }
.alert {position: relative; padding: 0.75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.25rem; }
.alert-danger {color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }
.green-text { color: green; }

@media (max-width: 1024px) {
  .custom-login-wrapper {padding: 30px 15px; }
  .login-container {flex-direction: column; gap: 20px; }
  .login-left, .login-right {flex: 1 1 100%; width: 100%; gap: 40px; }
  .login-image {aspect-ratio: 1.2; }
}

@media (max-width: 768px) {
  .login-message {font-size: 18px; margin-bottom: 20px; }
  .login-container {flex-direction: column; gap: 20px; }
  .account-register, .form-actions {gap: 10px; display: flex; }
  .login-box {padding: 20px; }
  .login-title {font-size: 22px; }
  .input-wrapper input {font-size: 16px; }
  .register-btn, .login-btn {width: 100%; padding: 10px; font-size: 16px; }
  .register-text, .forgot-link {font-size: 16px; }
}

@media (max-width: 480px) {
  .login-message {font-size: 22px; }
  .login-container {gap: 50px; }
  .login-box {padding: 15px; }
  .login-title {font-size: 40px; }
  .input-wrapper input {font-size: 18px; }
  .register-btn, .login-btn {width: auto; padding: 12px; font-size: 16px; }
}

form input{height: 30px; }
/********Register Page*******/
.green {color: green !important; }
.red {color: red !important; }
.input-wrapper-main {width: 100%; }
form#registerForm .input-wrapper{width: 100%; }
.register-container{display: flex ; justify-content: center; gap: 40px; padding: 40px; flex-direction: row; flex-wrap: nowrap; align-content: center; align-items: center;max-width: 1200px; margin: 0 auto;}
.register-left{flex:1;display: flex; flex-direction: column; gap: 40px;}
.register-right{flex:1;background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);}
.register-form .form-row{display:flex;gap:20px;margin-bottom:15px;align-items:flex-start;}
.register-form input{flex:1;padding:10px;border:1px solid #ddd;border-radius:6px;margin: 0;}
.password-field{position:relative;flex:1;}
.password-field input{width:100%;padding-right:42px;}
.toggle-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;cursor:pointer;font-size:16px}
.btn-submit,.btn-login{background:#22c55e;color:#fff;padding:12px 25px;border:0;border-radius:6px;cursor:pointer;display:inline-block;text-decoration:none;}
.btn-submit:hover,.btn-login:hover{background:#16a34a;}
.error{color:#dc2626;margin: 10px 0px;}
.highlight{color:#22c55e;font-weight:600;}
.file-label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;}
.file-upload-box{position:relative;border:2px dashed #cfcfcf;border-radius:8px;padding:28px 18px;text-align:center;cursor:pointer;transition:border-color .2s ease;width:100%;max-width:280px;min-height:160px;background:#fff;}
.file-upload-box:hover{border-color:#22c55e;}
.mup-placeholder .upload-icon{font-size:36px;margin-bottom:8px;color:#6b7280;}
.mup-placeholder p{margin:0;font-size:14px;font-weight:500;color:#111;}
.mup-placeholder span{display:block;font-size:12px;color:#6b7280;margin-top:4px;}
#multiple-uploader input[type="file"]{display:none;}
.preview-img {border: 1px solid #ddd; max-height: 160px; object-fit: contain; width: 100%; border-radius: 6px; margin-top: 10px; }
.delete-icon {position: absolute; top: 6px; left: 6px; background: #dc2626; color: #fff; border-radius: 50%; width: 22px; height: 22px; font-size: 16px; line-height: 22px; text-align: center; cursor: pointer; display: none; z-index: 10; }
#formResponse.green {display: flex ; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; }
@media (max-width: 768px) {
.register-container{display: inline-grid;padding: 20px;}
.register-form .form-row {display: inline-grid;width: 100%;}
form#registerForm .input-wrapper {width: 100%; }

}