/* ============================================================================
   Premium auth-modal skin (light + brand green) — layered ON TOP of
   css/loginModal-new.css. Everything here is scoped under .signUpModel so the
   standalone login page and any other consumers of the base styles are
   untouched. No form fields, IDs, or JS hooks are changed — this is purely a
   visual re-skin plus a decorative .modalHead (icon badge + eyebrow).
   ========================================================================== */

/* ---- Overlay ---- */
.signUpModel .signUpoverlay{
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

/* ---- Card ---- */
.signUpModel .loginForm,
.signUpModel .signUpForm{
  max-width:462px;
  min-height:auto;
  max-height:92vh;
  overflow-y:auto;
  overflow-x:hidden;
  padding:34px 34px 30px;
  border:1px solid #E9EDF1;
  border-radius:20px;
  box-shadow:0 30px 70px -22px rgba(15,23,42,.4),0 8px 20px -12px rgba(15,23,42,.2);
  scrollbar-width:thin;
  scrollbar-color:#24c7bd transparent;
}
.signUpModel .loginForm::-webkit-scrollbar,
.signUpModel .signUpForm::-webkit-scrollbar{width:8px;}
.signUpModel .loginForm::-webkit-scrollbar-track,
.signUpModel .signUpForm::-webkit-scrollbar-track{background:transparent;}
.signUpModel .loginForm::-webkit-scrollbar-thumb,
.signUpModel .signUpForm::-webkit-scrollbar-thumb{background:#bdeae6;border-radius:8px;}

/* register form sits normally in flow inside the card */
.signUpModel form#register_form{top:0;}

/* ---- Close button ---- */
.signUpModel .closeModal{
  right:14px;top:14px;
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border-radius:9px;
  transition:background .15s;
}
.signUpModel .closeModal:hover{background:#F1F5F9;}
.signUpModel .closeModal svg{width:20px;height:20px;}
.signUpModel .closeModal svg path{fill:#64748B;}
.signUpModel .closeModal:hover svg{opacity:1;}
.signUpModel .closeModal:hover svg path{fill:#0F172A;}

/* ---- Decorative header: icon badge + eyebrow ---- */
.signUpModel .modalHead{
  display:flex;flex-direction:column;align-items:flex-start;
  margin-bottom:16px;
}
.signUpModel .modalBadge{
  width:46px;height:46px;border-radius:13px;
  background:linear-gradient(155deg,#0abcb1,#05ADA3);
  display:grid;place-items:center;
  box-shadow:0 10px 22px -8px rgba(5,173,163,.7);
  margin-bottom:15px;
}
.signUpModel .modalBadge svg{width:24px;height:24px;display:block;}
.signUpModel .modalEyebrow{
  font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#05ADA3;
}

/* ---- Headings ---- */
.signUpModel .pageHead,
.signUpModel h2.pageHead{
  font-size:24px;font-weight:800;line-height:1.15;letter-spacing:-.02em;
  text-align:left;color:#0F172A;margin:6px 0 8px;
}
.signUpModel .pageSubHead{
  font-size:13.5px;line-height:1.5;text-align:left;color:#64748B;
  margin:0 0 22px;
}
.signUpModel .pageDes{
  font-size:13.5px;line-height:1.55;text-align:left;color:#64748B;
  max-width:none;margin:0 0 20px;
}
.signUpModel .termsHead{
  font-size:12px;line-height:1.5;color:#94A3B8;text-align:left;margin:2px 0 14px;
}

/* ---- Inputs ---- */
.signUpModel .inputGroup{margin-bottom:13px;}
.signUpModel .inputGroup input,
.signUpModel .inputGroup select,
.signUpModel .inputGroup textarea{
  padding:13px 14px;
  min-height:48px;max-height:none;
  border:1px solid #E2E8F0;border-radius:10px;
  background-color:#F8FAFC;color:#0F172A;
  font-size:14px;font-weight:500;line-height:1.2;
  transition:border-color .15s,background-color .15s,box-shadow .15s;
}
.signUpModel .inputGroup input::placeholder{color:#94A3B8;font-weight:400;}
.signUpModel .inputGroup input:hover,
.signUpModel .signin .inputGroup input:hover,
.signUpModel .signup .inputGroup input:hover{border:1px solid #CBD5E1;}
.signUpModel .inputGroup input:focus,
.signUpModel .signin .inputGroup input:focus,
.signUpModel .signup .inputGroup input:focus{
  border:1.5px solid #05ADA3;background-color:#fff;
  box-shadow:0 0 0 3px rgba(5,173,163,.16);
}
.signUpModel .inputGroup input.invalid{border:1.5px solid #e11d48;}
.signUpModel input:-webkit-autofill,
.signUpModel input:-webkit-autofill:hover,
.signUpModel input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 40px #F8FAFC inset !important;}

/* left icons inside inputs (decorative, no markup change) */
.signUpModel #r_name,
.signUpModel #r_email,
.signUpModel #user_id,
.signUpModel #recovery_email,
.signUpModel #password,
.signUpModel #account_password{
  background-repeat:no-repeat;background-position:left 14px center;background-size:18px 18px;
  padding-left:44px;
}
.signUpModel #r_name{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21c0-3.3-3.6-5-8-5s-8 1.7-8 5'/%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3C/svg%3E");}
.signUpModel #r_email,
.signUpModel #user_id,
.signUpModel #recovery_email{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");}
.signUpModel #password,
.signUpModel #account_password{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  padding-right:44px;
}

/* password eye toggle */
.signUpModel .showHidePassword{
  top:50%;transform:translateY(-50%);right:8px;
  background:transparent;padding:6px;border-radius:8px;
}
.signUpModel .showHidePassword:hover{opacity:1;background:#F1F5F9;}

/* ---- Phone (intl-tel-input) ---- */
.signUpModel input#r_phone{
  padding:13px 14px 13px 76px;border-radius:10px;
  background-color:#F8FAFC;
}
.signUpModel .iti__flag-container{width:64px;height:auto;top:1px;bottom:1px;background:transparent;}
.signUpModel .iti__selected-flag{
  justify-content:center;border-right:1px solid #E2E8F0;
  border-radius:10px 0 0 10px;
}
.signUpModel .phoneHelper{font-size:11px;color:#94A3B8;margin:6px 0 0;}

/* ---- Buttons ---- */
.signUpModel button.getStarted{
  min-height:50px;max-height:none;
  margin:18px 0 14px;padding:14px 18px;
  border-radius:12px;
  background:linear-gradient(180deg,#0abcb1,#05ADA3);
  color:#fff;font-size:15px;font-weight:700;letter-spacing:.01em;
  box-shadow:0 2px 4px rgba(5,173,163,.35),0 12px 24px -10px rgba(5,173,163,.7);
  transition:transform .15s,box-shadow .15s,background .15s,filter .15s;
}
.signUpModel button.getStarted:hover{
  background:linear-gradient(180deg,#05ADA3,#049185) !important;
  color:#fff !important;
  box-shadow:0 3px 6px rgba(5,173,163,.4),0 16px 30px -10px rgba(5,173,163,.8);
  transform:translateY(-1px);
}
.signUpModel button.getStarted:active{transform:translateY(0);}
.signUpModel button.getStarted.white{
  background:#fff !important;color:#05ADA3 !important;
  border:1.5px solid #CDEDEA;box-shadow:none;
  margin:0 0 12px;min-height:46px;
}
.signUpModel button.getStarted.white:hover{
  background:#F0FDF9 !important;color:#05ADA3 !important;
  border-color:#05ADA3;transform:none;box-shadow:none;
}
.signUpModel button#verify_OTP,
.signUpModel button#verify-otp-processingBtn{margin-top:28px;margin-bottom:10px;}
.signUpModel .getStarted img.btn-loader,
.signUpModel .getStarted .btnLoadingGif,
.signUpModel .getStarted img{width:34px;height:34px;transform:none;top:auto;left:auto;}
.signUpModel button.processBtn,
.signUpModel button#siGnUpProcessingBtn,
.signUpModel button#sendPasswordToEmailBtn {
    padding: 0 18px;
}

/* ---- Footer / links ---- */
.signUpModel p.loginRedirect{
  font-size:13px;line-height:1.5;text-align:center;color:#64748B;
  border-top:1px solid #EEF2F6;padding-top:16px;margin-top:16px;
}
.signUpModel p.loginRedirect a{color:#05ADA3;font-weight:700;}
.signUpModel p.loginRedirect a:hover,
.signUpModel .termBody p a:hover{text-decoration:underline;text-underline-offset:3px;}
.signUpModel #login_form span.forgotPass.loginModelButton{
  display:inline-block;text-align:right;font-size:13px;font-weight:600;color:#05ADA3;
}
.signUpModel .flexInput{justify-content:flex-end;column-gap:0;margin:-2px 0 2px;}
.signUpModel .showPassCheck{margin:0;}

/* ---- Trust badges (register footer) ---- */
.signUpModel .websiteFeaturesWrapper{gap:8px 7px;margin:22px 0 16px;}
.signUpModel .websiteFeaturesWrapper p{
  gap:5px;padding:5px 11px;border-radius:999px;
  background:#F0FDF9;border:1px solid #D6F3EF;color:#05ADA3;
  font-size:12.5px;font-weight:600;
}

/* ---- Rotating reviews ---- */
.signUpModel .sigupReviewsWrapper{
  border-top:1px solid #EEF2F6;padding-top:14px;min-height:38px;
}
.signUpModel .signupReview{font-size:13px;color:#334155;margin-bottom:6px;}
.signUpModel .signupReviewer{font-size:12.5px;color:#94A3B8;}
.signUpModel .signupReviewer em{color:#475569;font-style:normal;font-weight:600;}

/* ---- OTP (verify) ---- */
.signUpModel .codeSentWrapper{
  border-top:1px solid #EEF2F6;margin:22px 0;padding-top:20px;
}
.signUpModel .codeSentWrapper p{font-size:14px;color:#64748B;}
.signUpModel .codeSentWrapper p span{font-weight:600;color:#0F172A;}
.signUpModel .codeSentWrapper a{font-size:14px;font-weight:600;color:#05ADA3;}
.signUpModel .optWrapper{max-width:260px;}
.signUpModel .otpGroup{column-gap:12px;}
.signUpModel .otpGroup input{
  width:54px;height:56px;font-size:24px;font-weight:700;color:#0F172A;
  background:#F8FAFC;border:1.5px solid #E2E8F0;border-radius:12px;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.signUpModel .otpGroup input:focus{
  border-color:#05ADA3;background:#fff;box-shadow:0 0 0 3px rgba(5,173,163,.16);
}
.signUpModel .otpGroup input.invalid{border-color:#e11d48;}
.signUpModel .resendCodeWrapper p{font-size:13px;color:#94A3B8;}
.signUpModel .resendCodeWrapper p a{color:#05ADA3;font-weight:600;}
.signUpModel .passwordGroup{margin:26px 0 10px;}

/* ---- Terms row (verify) ---- */
.signUpModel .termBody{align-items:flex-start;column-gap:8px;}
.signUpModel .termBody p{font-size:13px;color:#64748B;line-height:1.5;}
.signUpModel .termBody p a{color:#05ADA3;font-weight:600;}
.signUpModel input[type=checkbox]{
  width:16px;height:16px;border-radius:4px;border:1.5px solid #CBD5E1;top:1px;
}
.signUpModel input[type=checkbox]:checked{background:#05ADA3;border-color:#05ADA3;}

/* ---- Secure footer chip (verify) ---- */
.signUpModel .secureText{
  gap:7px;padding:9px 12px;border-radius:10px;
  background:#F0FDF9;border:1px solid #D6F3EF;
  color:#0F766E;font-size:12px;margin-top:26px;
}

/* ---- Alerts ---- */
.signUpModel .custom-alert-danger,
.signUpModel .custom-alert-success{border-radius:10px;padding:12px 14px;font-size:13.5px;}

/* ---- Responsive ---- */
@media (max-width:520px){
  .signUpModel .loginForm,
  .signUpModel .signUpForm{max-width:calc(100% - 24px);padding:26px 20px 24px;border-radius:16px;}
  .signUpModel .pageHead,
  .signUpModel h2.pageHead{font-size:21px;}
  .signUpModel .modalBadge{width:42px;height:42px;border-radius:12px;margin-bottom:12px;}
  .signUpModel .otpGroup input{width:48px;height:50px;font-size:22px;}
  .signUpModel .otpGroup{column-gap:9px;}
}