@import "../../global.css";

/***** Login page start here *****/
section.main-login {
  overflow: hidden;
  background: linear-gradient(180deg, #00867E 0%, #00201E 100%);
  height: 100%;
  width: 100%;
}

section.main-login .left-content {
  padding-left: 50px;
  padding-bottom: 50px;
}

section.main-login .right-col {
  padding: 12px;
}

.right {
  border-radius: 16px;
  padding: 80px;
  background-color: var(--white);
}
.iti {
  width: 100%;
}
.iti input {
  width: 100%;
}
.iti__flag-container {
  left: 15px;
}
.top-logo img{
  max-height: 400px;
}
.login-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 32px 0;
  color: #ADADAD;
  font-size: 14px;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #E5E5E5;
}

.login-divider span {
  padding: 0 15px;
  font-weight: 500;
}

.google-signup {
  border: 1px solid var(--border-color);
}

.back-btn {
  position: absolute;
  top: 32px;
  left: 32px;
}
.theme-toggle {
  display: flex;
  align-items: center;
}

#themeSwitch {
  display: none;
}

.toggle-label {
  width: 60px;
  height: 30px;
  background: #ccc;
  border-radius: 50px;
  position: absolute;
  top: 32px;
  right: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  transition: background 0.3s ease;
}

/* Icons */
.toggle-label .icon {
  font-size: 14px;
  z-index: 2;
}

.toggle-label .ball {
  width: 22px;
  height: 22px;
  background: #fff;
  position: absolute;
  left: 4px;
  top: 4px;
  border-radius: 50%;
  transition: transform 0.3s ease;
  z-index: 3;
}

#themeSwitch:checked + .toggle-label {
  background: #2E2E2E;
}

#themeSwitch:checked + .toggle-label .ball {
  transform: translateX(30px);
}
.verify-email-wrap,
.otp-wrap,
.otp-container,
.register-conatiner,
.register-wrap,.finance-title ,.document-title,
#step-1 , #step-2 , #signinForm , #resetPasswordForm{
  width: 50%;
}
.role-card input[type="radio"] {
  display: none;
}

.role-card {
  cursor: pointer;
  margin-bottom: 16px;
  width: 100%;
}

.card-content {
  display: flex;
  align-items: center;
  padding: 24px;
  border: 1px solid #E5E5E5;
  border-radius: 16px;
  background: #fff;
  transition: all 0.3s ease;
  position: relative;
}

.role-card input[type="radio"]:checked+.card-content {
  border-color: var(--Primary-Green);
}

.role-card input[type="radio"]:checked + .card-content .icon-box {
  color: #006661;
}

.icon-box {
  color: #888888;
  margin-right: 20px;
}
.icon-box svg {
  transition: color 0.3s ease;
}
.check-icon {
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.role-card input[type="radio"]:checked+.card-content .check-icon {
  opacity: 1;
}

.role-card input[type="radio"]:checked+.card-content .text-box .title {
  color: var(--Primary-Green) !important;
}

.progress-container {
  width: 50%;
  height: 6px;
  background-color: var(--border-color);
  border-radius: 6px;
  overflow: hidden;
}

.progress-filler {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #D6FFD6 0%, #008000 100%);
  transition: width 0.4s ease;
  /* Smooth movement */
}
.dark-theme .progress-filler{
background: linear-gradient(90deg, #004300 0%, #008000 100%);
}
.document-wrap {
  border-bottom: 1px solid var(--border-color);
}
@media(max-width: 1700px){
  .top-logo img{
  max-height: 350px;
}
}
@media(max-width: 1440px){
  .top-logo img{
  max-height: 250px;
}
.bottom-logo{
  max-width: 150px !important;
}
.left{
  display: flex;
  justify-content: space-between;
  align-items: stretch !important;
}
.main-row .left-col{
  height: auto !important;
}
.main-row .right-col{
  height: auto !important;
}
}
@media (max-width: 767.98px) {
section.main-login {
  height: auto;
  width: 100vw;
  min-height: 100vh;
}
section.main-login .left-content {
  padding-left: 0px;
  padding-bottom: 0px;
}
section.main-login .right-col {
  padding: 0px;
  width: 100%;
  min-height: 100vh;
}

.right {
  margin-right: 0px;
  border-radius: 0px;
  padding: 50px 16px ;
}

.login-divider {
  margin: 24px 0;
  color: #ADADAD;
  font-size: 14px;
}
.back-btn {
  position: absolute;
  top: 16px;
  left: 16px;
}
.verify-email-wrap,
.otp-wrap,
.otp-container,
.register-conatiner,
.register-wrap,.finance-title , .document-title,
#step-1 , #step-2 , #signinForm , #resetPasswordForm{
  width: 100%;
}
.card-content {
  display: flex;
  align-items: center;
  padding: 24px;
  border: 1px solid #E5E5E5;
  border-radius: 16px;
  background: #fff;
  transition: all 0.3s ease;
  position: relative;
}

.role-card input[type="radio"]:checked+.card-content {
  border-color: var(--Primary-Green);
  background-color: #F0F9F8;
  /* Optional light tint */
}

.role-card input[type="radio"]:checked+.card-content .icon-box img {
  filter: invert(24%) sepia(21%) saturate(2955%) hue-rotate(136deg) brightness(95%) contrast(101%);
}

.icon-box {
  width: 48px;
  margin-right: 20px;
}

.check-icon {
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.role-card input[type="radio"]:checked+.card-content .check-icon {
  opacity: 1;
}

.role-card input[type="radio"]:checked+.card-content .text-box .title {
  color: var(--Primary-Green);
}

.progress-container {
  width: 50%;
  height: 6px;
  background-color: #E5E5E5;
  border-radius: 6px;
  overflow: hidden;
}

.progress-filler {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #D6FFD6 0%, #008000 100%);
  transition: width 0.4s ease;
  /* Smooth movement */
}

.document-wrap {
  border-bottom: 1px solid #e5e5e5;
}

}
/***** Login page end here *****/