* {
   margin: 0;
   padding: 0;
 }

 :root {
   --dynamic-color: #24b96b;
   --dynamic-text: #24b96b;
 }

 .newupdateloginmainpage {
   background: url(../images/loginbg.jpg) no-repeat center center;
   background-size: cover;
   width: 100%;
   height: 100dvh;display: grid;place-items: center;
 }

 /* .mainloginform {
   margin: auto;
   margin-top: 100px;
 } */

 .mainlogo {
   text-align: center;
 }

 .otp-container {
   background: #fff;
   padding: 30px;
   border-radius: 10px;
   box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15);
   width: 350px;
   margin: auto;

 }

 .otp-container h2 {
   margin-bottom: 10px;
   font-size: 20px;
   font-weight: 600;
   text-align: center;
 }

 .otp-container p {
   font-size: 13px;
   color: #969696;
   margin-bottom: 20px;
   text-align: center;
   font-weight: 500;
 }

 .otp-inputs {
   display: flex;
   justify-content: center;gap: 8px;
   margin-bottom: 15px;
 }

 .otp-inputs input {
   width: 45px;
   height: 50px;
   font-size: 24px;
   text-align: center;
   border: none;
   border-radius: 6px;
   outline: none;
   transition: border-color 0.2s;
   background: #f2f2f2;
 }

 .otp-inputs input:focus {
   border-color: var(--dynamic-color);
   box-shadow: 0 0 4px var(--dynamic-color);
 }

 .progress-bar_otp {
   width: 100%;
   height: 10px;
   border-radius: 5px;
   background: #ddd;
   margin: 15px 0;
   position: relative;
 }

 .progress-fill {
   width: 0%;
   height: 100%;
   background: var(--dynamic-color);
   border-radius: 5px;
   transition: width 0.3s ease;
   position: relative;
 }

 .progress-fill::after {
   content: "";
   width: 20px;
   height: 20px;
   position: absolute;
   background: #24b96b;
   right: -10px;
   /* keeps the dot at the end */
   top: -5px;
   border-radius: 50%;
   border: 3px solid #dcffed;
   display: none;
   /* hidden by default */
 }

 .progress-fill.active::after {
   display: block;
   /* show only when progress starts */
 }


 .resend {
   font-size: 13px;
   color: #333;
   margin-top: 10px;
 }

 .resend button {
   margin: 8px 5px 0;
   border: 1px solid #ccc;
   padding: 8px 12px;
   border-radius: 6px;
   background: #fff;
   cursor: pointer;
   font-size: 13px;
 }

 .resend button:hover {
   background: #f3f3f3;
 }

 .whatsapp {
   color: #25d366;
   border-color: #25d366;
 }

 .sms {
   color: var(--dynamic-color);
   border-color: var(--dynamic-color);
 }

 .otpmianbtn {
   border: none;
   background: #24b96b;
   color: #fff;
   padding: 5px 10px;
   border-radius: 5px;
 }

 .bottompara {
   font-size: 22px;
   text-align: center;
 }

 .login-loading-section {
   width: 100%;
   height: 100dvh;
   display: grid;
   place-items: center;
 }

 .login-loading-inner {
   text-align: center;
   color: #fff;
 }

 .login-loading-inner p {
   margin-top: 18px;
   font-size: 16px;
   font-weight: 500;
 }

 .login-spinner {
   width: 48px;
   height: 48px;
   margin: 0 auto;
   border: 4px solid rgba(255, 255, 255, 0.35);
   border-top-color: #fff;
   border-radius: 50%;
   animation: login-spin 0.8s linear infinite;
 }

 @keyframes login-spin {
   to {
     transform: rotate(360deg);
   }
 }

 .otp-section {
   width: 100%;
 }

 .login-field .form-label {
   font-size: 13px;
   font-weight: 600;
   color: #333;
   margin-bottom: 6px;
 }

 .login-input {
   height: 44px;
   border: 1px solid #e5e5e5;
   border-radius: 6px;
   background: #f2f2f2;
   font-size: 14px;
   box-shadow: none !important;
 }

 .login-input:focus {
   border-color: var(--dynamic-color);
   background: #fff;
 }

 .otp-container .otpmianbtn {
   width: 100%;
   padding: 10px 14px;
   font-size: 15px;
   font-weight: 600;
 }

 .pending-approval-box {
   text-align: center;
 }

 .pending-approval-icon {
   width: 52px;
   height: 52px;
   margin: 0 auto 14px;
   border-radius: 50%;
   background: #fff6e8;
   color: #d97706;
   border: 2px solid #f59e0b;
   display: grid;
   place-items: center;
   font-size: 28px;
   font-weight: 700;
   line-height: 1;
 }

 .pending-approval-msg {
   color: #555 !important;
   margin-bottom: 18px !important;
 }

 .pending-approval-details {
   background: #f8f8f8;
   border-radius: 8px;
   padding: 12px 14px;
   text-align: left;
   margin-bottom: 14px;
 }

 .pending-approval-details div {
   display: flex;
   justify-content: space-between;
   gap: 12px;
   padding: 6px 0;
   border-bottom: 1px solid #ececec;
   font-size: 13px;
 }

 .pending-approval-details div:last-child {
   border-bottom: none;
 }

 .pending-approval-details span {
   color: #888;
   font-weight: 500;
 }

 .pending-approval-details strong {
   color: #222;
   font-weight: 600;
   text-align: right;
 }

 .pending-status-text {
   color: #d97706 !important;
 }

 .pending-approval-note {
   margin-bottom: 0 !important;
   color: #666 !important;
 }