:root{

    /* DARK MODE DEFAULT */
    
    --bg-page:#1f2432;
    --bg-card:#2a3142;
    --bg-input:#31384c;
    --bg-soft:#252b3b;
    
    --text-primary:#f1f3f9;
    --text-secondary:#9aa4bf;
    
    --border:#3b4256;
    
    --accent:#6840f0;
    --accent-hover:#5568d3;
    
    --input-border:#6b7280;
}

body.light-mode{
    --bg-page:#ffffff;
    --bg-card:#ffffff;
    --bg-input:#ffffff;
    --bg-soft:#f5f6fa;
    
    --text-primary:#333;
    --text-secondary:#72767b;
    
    --border:#f0f0f0;
    
    --input-border:#8a8d90;

}
 
body{
    margin:0;
    padding:0;
    overflow:hidden;
    font-family:"Poppins", sans-serif;
    
    background:var(--bg-page);
    color:var(--text-primary);
}

.container-main{
    background-repeat:no-repeat;
    background-size:cover;
    height:100vh;
    width:100%;
    
    background: linear-gradient(
    to top,
    rgba(104,64,240,0.25) 0%,
    rgba(104,63,238,0.0) 40%,
    var(--bg-page) 100%
    );
}

 /* Scrollable form container */
 .register-container {
     border-radius: 0px;
     background:var(--bg-card);
    box-shadow:0 10px 40px rgba(0,0,0,0.35);
    border-top:4px solid var(--accent);
     max-width: 550px;
     width: 100%;
     padding: 30px 40px;
     height: max-content;
     /* very important */
     position: relative;
     z-index: 1;
 }

 .banner-container {
     width: 100%;
     max-width: 550px;
     margin: 0 auto 1rem;
     display: flex;
     justify-content: center;
 }

 .banner-container .banner-image {
     width: 100%;
     height: auto;
     max-height: 165px;
     object-fit: contain;
 }


 .logo-container {
     text-align: center;
     margin-bottom: 40px;
 }

 .header-logo {
     width: 178px;
 }

 .register-title {
     text-align: center;
     color:var(--text-primary);
     font-size: 24px;
     font-weight: 300;
     margin-bottom: 25px;
     padding-bottom: 15px;
 }

 .language-selector {
     text-align: right;
     margin-bottom: 15px;
 }

 .language-selector select {
     border: none;
     padding: 6px 12px;
     border-radius: 4px;
     font-size: 13px;
     color:var(--text-primary);
        background: var(--bg-input);
     cursor: pointer;
 }

 .form-label {
     color:var(--text-secondary);
     font-size: 13px;
     margin-bottom: 6px;
     font-weight: 300;
 }

 .form-control,
 .form-select {
     background:var(--bg-input);
    color:var(--text-primary);
    border:1px solid var(--border);
    border-bottom:1px solid var(--input-border);
     border-radius: 0px;
     padding: 7px 12px;
     font-size: 14px;
 }

 .form-control:hover,
 .select2-container--default:hover,
 .form-select:hover {
     border-bottom: 1px solid #667eea;
 }

 .form-control:focus,
 .form-select:focus {
     background: var(--bg-input) !important;
    color: var(--text-primary) !important;
     border: 2px solid var(--custom-primary);
     box-shadow: 0 0 0 0.15rem rgba(102, 126, 234, 0.15);
 }
 .form-control::placeholder{
    color: var(--text-secondary);
    opacity: 1;
}

body.dark-mode .form-control::placeholder{
    color:#8f9bb3;
}
 .select2-container .select2-selection--single {
     cursor: pointer;
     height: 40px !important;
 }

 .select2-container--default .select2-selection--single {
     background:var(--bg-input);
    border:1px solid var(--border);
    border-bottom:1px solid var(--input-border);
     border-radius: 0px;
 }
 
 .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-secondary);
  line-height: 38px;
}

 .phone-input-group {
     display: flex;
     gap: 8px;
 }

 .country-code {
    min-width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 8px 8px;
}

 .flag-icon {
     width: 22px;
     height: 16px;
     margin-right: 6px;
     border-radius: 2px;
 }

 .password-toggle {
     position: absolute;
     padding: 12px;
     right: 0px;
     top: 50%;
     transform: translateY(-50%);
     cursor: pointer;
     color: var(--text-secondary);
     border-left: 1px solid var(--border);
 }

 .password-toggle:hover {
     color: #667eea;
 }

 .password-wrapper {
     position: relative;
 }

 .agreement-section {
     margin: 18px 0;
     display: flex;
     justify-content: center;
 }

 /* Make country dropdown text black */
 #countrySelect {
     color: var(--text-secondary);
     font-size: 14px;
 }

 /* Make phone code text black */
 #dialCode {
     color: var(--text-secondary);
     font-weight: 500;
 }

 .form-check {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .captcha-box {
     background:var(--bg-soft);
    border:1px solid var(--border);
     border-radius: 4px;
     padding: 12px 15px;
     background: #fafafa;
     display: flex;
     justify-content: space-between;
     margin-bottom: 20px;
 }

 .btn-register {
     background:var(--accent);
    color:white;
     border: none;
     padding: 12px;
     border-radius: 4px;
     font-size: 15px;
     font-weight: 600;
     width: 100%;
     cursor: pointer;
     transition: all 0.3s;
     box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
 }

 .btn-register:hover {
     background:var(--accent-hover);
     transform: translateY(-1px);
 }

 .signin-link {
     position: absolute;
     color:var(--text-secondary);
    /* background-color:rgba(104,64,240,0.12); */
     font-size: 14px;
     left: 0px;
     bottom: 0px;
     width: 100%;
     padding: 14px 0px;
 }

 .form-check-label {
     font-size: 13px;
     color: var(--text-secondary);
 }

 .cloud-link {
     font-size: 10px;
     color: var(--text-secondary);
     text-decoration: underline;
     text-align: end;
 }

 .error-msg {
     color: red;
 }


 /* Tablets (≤ 768px) */
 @media (max-width: 768px) {
     .banner-container {
         max-width: 100%;
         padding: 0 10px;
     }

     .banner-container .banner-image {
         max-height: 140px;
     }
 }

 @media (max-width: 576px) {
     .register-container {
         padding: 25px 20px;
         border-top: 0px;
         border-radius: 0px;
     }

     .register-title {
         font-size: 22px;
     }

     .container-fluid {
         padding-left: 0px !important;
         padding-right: 0px !important;
     }

     .logo-container {
         width: 100%;
         background-color: var(--bg-page);
         padding: 20px 10px;
         margin-bottom: 0px;
         display: flex;
         justify-content: flex-start;
     }

     .header-logo {
         width: 178px;
     }

     .signin-link {
         background-color: transparent;
     }

     .banner-container {
         padding: 0 10px;
         max-width: 100%;
     }

     .banner-container .banner-image {
         max-height: 120px;
     }
 }