/* ============ Executive Concierge - Premium Auth (Signup) ============ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --white: #ffffff;
  --light: #f1f1f1;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #ddd; /* for border */
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #6c757d;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  --black: #101010;
  --primary: #0a6ed4;
  --secondary: #004182;
  --green: #26b170; /*dark*/
  --blue: #0a66c2;
  --red: #da0400;
  --yellow: #fcbd01;
  --light-blue: #3cb2ff;
  --title-blue: #004AAB;
  --yellow-light: rgb(255, 188, 107); /* specially for rating star*/
  --rating-yellow: rgb(255, 188, 107);
  --gray-border: #ddd;
  --applied-color:#41BBBB;
  --shortlisted-color:#FF8159;
  --interview-color :#BB41AF;
  --offered-color :#4289BD;
  --rejected-color :#FF596D;
  --skipped-color: #CCB347;
  --gradient-golden: linear-gradient(90deg, #d08841, #debd82);
}

body {
  font-family: 'Manrope', sans-serif !important; 
  background-color: #fff !important;
  color: #101010 !important;
}
button, html, input, select, textarea,
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-family: 'Manrope', sans-serif !important;
}

.ec-auth-page {
  --ec-bg-primary: #05060A;
  --ec-bg-card: #11141D;
  --ec-bg-field: #14161F;
  --ec-border: rgba(212, 175, 55, 0.18);
  --ec-border-soft: rgba(255, 255, 255, 0.1);
  --ec-gold: #D4AF37;
  --ec-text-muted: #a1a8b8;
  --ec-text-faint: #5c6170;
  font-family: 'Manrope', 'Lexend', sans-serif !important;
  min-height: 100vh;
  width: 100%;
  background: var(--ec-bg-primary) !important;
  color: #fff;
  padding-bottom: 60px;
}
.ec-auth-page *,
.ec-auth-page *::before,
.ec-auth-page *::after {
  box-sizing: border-box;
}

/* Topbar */
.ec-topbar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ec-topbar-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ec-logo img {
  height: 30px;
  width: auto;
  display: block;
}
.ec-btn-outline {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border: 1px solid rgba(212, 175, 55, .4);
  border-radius: 999px;
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  background: transparent;
  transition: background .25s ease, color .25s ease;
}
.ec-btn-outline:hover,
.ec-btn-outline:focus {
  background: var(--ec-gold);
  color: var(--ec-bg-primary) !important;
}
/* Same pill as an anchor, but the logout control is a real button. */
button.ec-btn-outline {
  font-family: inherit;
  line-height: normal;
  cursor: pointer;
}
button.ec-btn-outline[disabled] {
  opacity: .6;
  cursor: default;
}
button.ec-btn-outline[disabled]:hover {
  background: transparent;
  color: #fff !important;
}

/* Main / Card */
.ec-auth-main {
  display: flex;
  justify-content: center;
  padding: 50px 20px;
}
.ec-auth-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: var(--ec-bg-card);
  border: 1px solid var(--ec-border);
  border-radius: 22px;
  padding: 30px 50px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.ec-auth-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--ec-gold), transparent);
}

.ec-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.ec-back-link {
  font-size: 14px;
  color: var(--ec-text-muted) !important;
  text-decoration: none !important;
}
.ec-back-link:hover {
  color: #fff !important;
}
.ec-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ec-gold);
  white-space: nowrap;
}

.ec-title {
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 15px;
  line-height: 1.2;
}
.ec-subtitle {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ec-text-muted);
  margin: 0 0 30px;
}

/* Form fields */
.ec-auth-page .form-group {
  margin-bottom: 30px;
}
.ec-auth-page .form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #cfd3dc;
  margin-bottom: 8px;
}
.ec-auth-page .form-control.custom-input {
  background: var(--ec-bg-field) !important;
  border: 1px solid var(--ec-border-soft) !important;
  border-radius: 10px !important;
  color: #fff !important;
  width: 100%;
  height: 46px;
  font-size: 15px;
  padding: 10px 18px;
  box-shadow: none !important;
}
.ec-auth-page .form-control.custom-input::placeholder {
  color: var(--ec-text-faint) !important;
  opacity: 1;
}
.ec-auth-page .form-control.custom-input:focus,
.ec-auth-page .form-control.custom-input:hover,
.ec-auth-page .form-control.custom-input:active {
  border-color: var(--ec-gold) !important;
  background: var(--ec-bg-field) !important;
  outline: none;
}
.ec-auth-page .form-control.custom-input.border-error-red {
  border-color: #e05a5a !important;
}
.ec-auth-page .help-block-error {
  color: #ef7b7b;
  font-size: 12px;
  margin-top: 6px;
  display: inline-block;
}
.ec-auth-page .email-error-box {
  display: block;
  color: #ef7b7b;
  font-size: 12px;
  margin-top: 6px;
}
.ec-auth-page .email-error-box a {
  color: var(--ec-gold);
}
/* Inline "checking…" spinner, parked on the right edge inside the field. The
   shared .loader-line sits under the input and reads as a stray rule on the
   dark card, so these fields use a circle instead. */
.ec-auth-page .ec-field-wrap {
  position: relative;
}
.ec-auth-page .ec-input-spinner {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--ec-gold);
  border-radius: 50%;
  animation: ecInputSpin 0.7s linear infinite;
  pointer-events: none;
  z-index: 2;
}
/* Keep the value clear of the spinner while it is showing. */
.ec-auth-page .ec-field-wrap .form-control.custom-input,
.ec-auth-page .mobile-custom-input .form-control.custom-input {
  padding-right: 38px;
}
@keyframes ecInputSpin {
  to { transform: rotate(360deg); }
}

/* Mobile / intl-tel-input */
.ec-auth-page .mobile-custom-input {
  background: var(--ec-bg-field);
  border: 1px solid var(--ec-border-soft);
  border-radius: 10px;
  height: 46px;
  display: flex;
  align-items: center;
  position: relative;
}
.ec-auth-page .mobile-custom-input .form-control.custom-input {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  height: 46px;
}
.ec-auth-page .iti {
  display: block;
  width: 100%;
  height: 100%;
  --iti-dropdown-bg: #181b26;
  --iti-border-color: var(--ec-border-soft);
  --iti-dialcode-color: #ffffff;
  --iti-arrow-color: var(--ec-text-muted);
  --iti-hover-color: rgba(212, 175, 55, .12);
}
.ec-auth-page .iti input.iti__tel-input {
  height: 46px;
  color: #fff;
}
.ec-auth-page .iti__selected-country-primary {
  border-right: 1px solid var(--ec-border-soft);
  margin-right: 10px;
}
.ec-auth-page .iti__dropdown-content {
  z-index: 20;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  border: 1px solid var(--ec-border-soft);
}
.ec-auth-page .iti__country-list {
  color: #fff;
  background: #181b26;
}
.ec-auth-page .iti__search-input {
  background: #14161f !important;
  color: #fff !important;
  border: none !important;
  border-bottom: 1px solid var(--ec-border-soft) !important;
  padding: 10px 12px !important;
}
.ec-auth-page .iti__search-input::placeholder {
  color: var(--ec-text-faint);
}
.ec-auth-page .iti__country.iti__highlight {
  background: rgba(212, 175, 55, .12);
}
.ec-auth-page .iti__dial-code {
  color: var(--ec-text-muted);
}

/* Consent checkbox */
.ec-consent-sec {
  margin: 4px 0 26px;
}
.ec-auth-page .custom-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  margin: 0;
  padding: 0;
}
.ec-auth-page .custom-checkbox > span:first-child {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 1px;
}
.ec-auth-page .custom-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}
.ec-auth-page .custom-checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  background: var(--ec-bg-field);
  border: 1px solid var(--ec-border-soft);
  border-radius: 5px;
}
.ec-auth-page .custom-checkbox .checkmark.border-error-red {
  border-color: #e05a5a;
}
.ec-auth-page .custom-checkbox input:checked ~ .checkmark {
  background: var(--ec-gold);
  border-color: var(--ec-gold);
}
.ec-auth-page .custom-checkbox input:checked ~ .checkmark::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--ec-bg-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ec-auth-page .custom-checkbox > span:last-child {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ec-text-muted);
}
.ec-auth-page .custom-checkbox a {
  color: var(--ec-gold) !important;
  text-decoration: none;
}
.ec-auth-page .custom-checkbox a:hover {
  text-decoration: underline;
}

/* Primary button */
.ec-auth-page .ec-btn-gold {
  width: 100%;
  height: 46px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #F5E7A8 0%, #D4AF37 45%, #B8891F 100%) !important;
  color: var(--ec-bg-primary) !important;
  font-weight: 600;
  font-size: 16px;
  box-shadow: 0 12px 30px rgba(212, 175, 55, .25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ec-auth-page .ec-btn-gold:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(212, 175, 55, .35);
}
.ec-auth-page .ec-btn-gold.disable,
.ec-auth-page .ec-btn-gold:disabled {
  opacity: .6;
  box-shadow: none;
  transform: none;
}

.ec-auth-page .terms_description {
  color: var(--ec-text-muted);
  font-size: 14.5px;
  margin-top: 18px;
}
.ec-auth-page .terms_description a {
  color: var(--ec-gold) !important;
  font-weight: 700;
  text-decoration: none;
}
.ec-auth-page .terms_description a:hover {
  text-decoration: underline;
}

/* OTP screen */
.ec-auth-page .verification-otp-sec h2 {
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 25px;
}
.ec-auth-page .otp-info-text {
  color: var(--ec-text-muted);
  font-size: 14px;
  line-height: 1.5;
  padding-top: 10px;
  font-weight: 400;
}
.ec-auth-page .added-mobile-show span.fw-500 {
  color: #fff;
  font-weight: 600;
}
.ec-auth-page .update-txt img {
  filter: invert(1) brightness(2);
  width: 16px;
  margin-left: 5px;
}
.ec-auth-page #divOuter,
.ec-auth-page #divInner,
.ec-auth-page #otpOuter,
.ec-auth-page #otpInner {
  display: flex;
  justify-content: center;
  max-width: 100%;
  width: 100%;
}
/* The "incorrect code" message is a sibling of the input wrapper inside
   #divOuter. As a flex row whose first child is width:100% there is nothing
   left for the message, so it gets squeezed to a sliver and pushed out past the
   card — stack the two instead. */
.ec-auth-page #divOuter,
.ec-auth-page #otpOuter {
  flex-direction: column;
  align-items: stretch;
}
/* common.css sets span.input-error to position:absolute. Out of flow it lands
   at whatever its static position happens to be and reserves no height, so it
   drifts right and collides with the resend row. Put it back in flow, directly
   under the input and left aligned with the lines below it. */
.ec-auth-page #divOuter > span,
.ec-auth-page .code-container span.input-error {
  position: static;
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: left;
  overflow-wrap: break-word;
}
.ec-auth-page #divOuter > span {
  margin-bottom: 6px;
}
.ec-auth-page .otp-input,
.ec-auth-page .show_otp,
.ec-auth-page .otp_count {
  /* width: 220px !important; */
  text-align: center;
  letter-spacing: 10px;
  font-size: 20px;
  margin: 14px auto;
}
.ec-auth-page .profile-block-error {
  color: #ef7b7b;
  font-size: 12px;
  margin-top: 6px;
  display: inline-block;
}
.ec-auth-page .btn-resend {
  color: var(--ec-gold) !important;
  font-weight: 700;
}
.ec-auth-page .otp-timer,
.ec-auth-page .attempt-left {
  color: var(--ec-text-muted);
  font-size: 12.5px;
  margin: 0;
}
.ec-auth-page .divider-line {
  border-color: var(--ec-border-soft);
  margin: 24px 0;
}
.ec-auth-page .input-error {
  color: #ef7b7b;
  font-size: 12px;
}
img.btn-load-img {
  width: 22px;
  margin: 0 auto;
}
/* This line carries either a phone number or an email address. 26px fits a
   number but runs a long address past the card edge, so it is sized for the
   wider of the two. */
h3.added-mobile-show {
  float: none;
  margin: 0 0 15px;
  font-size: 20px;
  font-weight: 600;
  max-width: 100%;
}
/* .flex-center makes the h3 a flex container, and its child keeps the default
   min-width:auto — so without this the child refuses to shrink below its own
   text and overflows instead of wrapping. */
h3.added-mobile-show > div {
  min-width: 0;
}
h3.added-mobile-show div,
h3.added-mobile-show span {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}
.code-container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: 30px 0;
  flex-flow: column;
}
#otpOuter {
  margin-bottom: 10px;
  border: 1px solid var(--gray-400);
  border-radius: 10px;
  padding: 0;
}

#otpInner {
  left: 0;
  position: sticky;
}
.form-control.custom-input#partitioned {
  background-color: var(--white);
  font-size: 22px;
  border-color: var(--gray-300);
  box-shadow: none;
  border-radius: 8px;
  transition: 0.5s ease all;
  color: #101010;
  height: 46px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 20px;
  margin: 0;
}
.resend-otp-action {
  text-align: left;
  margin-top: 15px;
}
.btn-wot-bg.btn-resend {
  margin: 0 5px 5px 0;
  text-decoration: underline;
  padding: 0;
  font-size: 18px;
  font-weight: 500;
}
p.otp-timer {
  display: flex;
  align-items: baseline;
  font-size: 18px;
  color: var(--gray-600);
  margin-bottom: 5px;
}
span#timer {
  font-size: 18px;
  color: var(--gray-600);
  display: block;
  font-weight: 500;
  margin: 0 5px;
}
.iti.iti--allow-dropdown .iti__selected-dial-code {
  margin-top: 2px;
}

@media (max-width: 576px) {
  .ec-auth-card {
    padding: 30px 22px 26px;
    border-radius: 16px;
  }
  .ec-title {
    font-size: 20px;
  }
  .ec-auth-main {
    padding: 20px 15px;
  }
  .ec-topbar-inner {
    padding: 16px;
  }
  .ec-subtitle {
    margin: 0 0 20px;
  }
  .ec-auth-page .form-group {
    margin-bottom: 15px;
  }
}