/* WCL look for the shared retail auth pages (/auth/login, /auth/otp, /auth/forgot).
   Same class names as css/LL/auth.css, WCL colours and fonts. */
.wcl-auth {
  --wcl-blue: #1d4f91;
  --wcl-blue-dark: #163e72;
  --wcl-ink: #2d2926;
  --wcl-muted: #595d62;
  --wcl-line: #e2e2e2;
}

.loginSection {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 220px);
  background: #fafaf8;
  padding: 48px 0;
}
.loginContainer {
  width: 100%;
  max-width: 540px;
  padding: 0 16px;
}
.loginCard {
  background: #ffffff;
  border: 1px solid #dedad4;
  border-radius: 20px;
  box-shadow: 0 18px 48px -12px rgba(33, 30, 28, 0.07);
  padding: 44px 48px 40px;
  text-align: center;
}
.loginTitle {
  font-family: "Bebas Neue", sans-serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
  color: #000000;
  margin-bottom: 1.5rem;
}
.loginSubtitle {
  font-size: 13.5px;
  color: var(--wcl-muted);
}
.formGroup {
  text-align: left;
}
.formLabel {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wcl-ink);
}
.formInput {
  width: 100%;
  height: 42px;
  padding: 0 46px 0 16px;
  border-radius: 8px;
  border: 1px solid var(--wcl-line);
  background: #ffffff;
  font-size: 14px;
  color: var(--wcl-ink);
}
.formInput:focus {
  border-color: var(--wcl-blue);
  outline: none;
}
.passwordWrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.eyeIcon {
  position: absolute;
  right: 16px;
  top: 34px;
  cursor: pointer;
  color: var(--wcl-ink);
}
.passwordWrapper .eyeIcon {
  top: 50%;
  transform: translateY(-50%);
}
.errorText {
  color: #c0392b;
  font-size: 13px;
  margin-top: 4px;
  text-align: left;
}

/* buttons: retail names, WCL pill style */
.wcl-auth .redButton {
  height: 56px;
  border-radius: 28px;
  border: none;
  background-color: var(--wcl-blue);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(29, 79, 145, 0.2);
  transition: background 0.2s ease;
}
.wcl-auth .redButton:hover {
  background-color: var(--wcl-blue-dark);
}
.wcl-auth .redButton:disabled {
  opacity: 0.7;
}
.wcl-auth .outlineBtn {
  height: 50px;
  padding: 0 28px;
  border-radius: 25px;
  border: 1.5px solid var(--wcl-blue);
  background: #ffffff;
  color: var(--wcl-blue);
  font-size: 15px;
  font-weight: 600;
}
.wcl-auth .red {
  color: var(--wcl-blue);
  font-weight: 500;
}
.wcl-auth .fs14 {
  font-size: 13px;
}
.wcl-auth .cursor-pointer {
  cursor: pointer;
}

/* OTP boxes */
.otpContainer {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 20px 0;
}
.otpInput {
  width: 48px !important;
  height: 48px;
  border: 1px solid var(--wcl-line);
  border-radius: 8px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  color: var(--wcl-ink);
}
.otpInput:focus {
  border: 1.5px solid var(--wcl-blue);
  outline: none;
}

/* password rules tooltip */
.passwordTooltip {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-width: 280px;
  margin-top: 6px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  font-size: 13px;
  z-index: 10;
}
.passwordTooltip.active {
  display: block;
  text-align: left;
}
.passwordRules li {
  white-space: nowrap;
}

@media (max-width: 575px) {
  .loginCard {
    padding: 32px 20px;
  }
  .loginTitle {
    font-size: 24px;
  }
  .otpInput {
    width: 40px !important;
    height: 40px;
  }
}