/*------------------------------------------*/
/*  EMAIL OTP VERIFICATION
/*  Driven by the .sk-otp block in js/email-otp.js
/*------------------------------------------*/

.sk-otp {
  margin: -6px 0 20px;
}

.sk-otp .btn .fa-regular,
.sk-otp .btn .fa-solid {
  margin-right: 6px;
}

/* Keep the label on one line, even in the half-width Partner column. */
.sk-otp .btn.sk-otp-send {
  white-space: nowrap;
  font-size: 0.8125rem;
  padding: 0.55rem 1rem;
}

.sk-otp .btn.sk-otp-verify {
  white-space: nowrap;
  font-size: 0.8125rem;
  padding: 0.6rem 1.2rem;
}

.sk-otp-verified {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--green);
}

.sk-otp-verified[hidden],
.sk-otp-step[hidden],
.sk-otp .btn[hidden] {
  display: none;
}

.sk-otp-link {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--blue);
  text-decoration: underline;
  cursor: pointer;
}

.sk-otp-link:disabled {
  margin-left: 0;
  color: var(--dark-grey);
  text-decoration: none;
  cursor: default;
}

.sk-otp-step label {
  display: block;
  margin-bottom: 4px;
}

.sk-otp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.ContJoinUs .sk-otp-row .sk-otp-code {
  flex: 0 1 170px;
  margin-bottom: 0;
  font-size: 1.05rem;
  letter-spacing: 6px;
  font-family: Consolas, Menlo, monospace;
}

.sk-otp-status {
  margin: 6px 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #666;
}

.sk-otp-status:empty {
  display: none;
}

.sk-otp-status.is-ok {
  color: var(--green);
}

.sk-otp-status.is-error {
  color: #e74c3c;
}

.ContJoinUs .form-control.is-locked {
  background-color: #eefaf2;
  border-color: var(--green);
}

/* Tablet widths: the half-width column is at its narrowest here. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .sk-otp .btn.sk-otp-send {
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
  }
}

/* 768–991px: the column is ~170px, so drop the icon and the word "Email". */
@media (min-width: 768px) and (max-width: 991.98px) {
  .sk-otp .btn.sk-otp-send {
    font-size: 0.6875rem;
    padding: 0.5rem 0.5rem;
  }

  .sk-otp .btn.sk-otp-send .fa-regular,
  .sk-otp .btn.sk-otp-send .sk-otp-word {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .sk-otp-row .sk-otp-code {
    flex: 1 1 auto;
  }
}