/*
 * S2B_SHIP2BUY_LOGIN_UI_20260904
 *
 * Loaded only by the Drupal user login form.
 */

/* Standard Drupal page chrome that is redundant on this page. */
.page-title,
.block-page-title-block,
.tabs-wrapper,
.block-local-tasks-block {
  display: none !important;
}

/* Keep login content compact and centred. */
.s2b-login-shell {
  width: min(100%, 720px);
  margin: 28px auto 48px;
  padding: 0;
  color: #172536;
}


/* ============================================================
 * HERO
 * ============================================================ */

.s2b-login-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 18px;
  padding: 30px 32px 32px;
  border: 1px solid rgba(216, 173, 69, .24);
  border-radius: 28px;
  background:
    radial-gradient(
      circle at 88% 0%,
      rgba(216, 173, 69, .13),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #10283c 0%,
      #1e3b54 100%
    );
  box-shadow:
    0 15px 34px rgba(16, 40, 60, .13);
  color: #fff;
}

.s2b-login-hero::after {
  position: absolute;
  right: -55px;
  bottom: -75px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(216, 173, 69, .16);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.s2b-login-eyebrow {
  margin: 0 0 12px;
  color: #e1b743;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: .16em;
}

.s2b-login-hero h1 {
  margin: 0 0 12px;
  color: #fff;
  font-size: clamp(34px, 6vw, 48px);
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -.025em;
}

.s2b-login-hero p {
  max-width: 560px;
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: 18px;
  line-height: 1.55;
}


/* ============================================================
 * FORM CARD
 * ============================================================ */

.s2b-login-card {
  padding: 30px 32px 32px;
  border: 1px solid #dce2e8;
  border-radius: 24px;
  background: #f8fafc;
  box-shadow:
    0 10px 28px rgba(20, 39, 57, .08);
}

.s2b-login-card__heading {
  margin: 0 0 24px;
}

.s2b-login-card__heading h2 {
  margin: 0 0 5px;
  color: #172536;
  font-size: 29px;
  font-weight: 850;
  line-height: 1.15;
}

.s2b-login-card__heading p {
  margin: 0;
  color: #687887;
  font-size: 16px;
  line-height: 1.5;
}


/* ============================================================
 * FIELDS
 * ============================================================ */

.s2b-login-form .form-item {
  margin-bottom: 21px;
}

.s2b-login-form label {
  display: block;
  margin: 0 0 8px;
  color: #1b2b3b;
  font-size: 17px;
  font-weight: 750;
}

.s2b-login-form
input[type="text"],
.s2b-login-form
input[type="password"],
.s2b-login-form
input[type="email"] {
  width: 100%;
  min-height: 54px;
  padding: 12px 15px;
  border: 1px solid #bfc9d3;
  border-radius: 12px;
  background: #fff;
  color: #172536;
  font-size: 17px;
  box-shadow: none;
  transition:
    border-color .16s ease,
    box-shadow .16s ease;
}

.s2b-login-form
input[type="text"]:focus,
.s2b-login-form
input[type="password"]:focus,
.s2b-login-form
input[type="email"]:focus {
  border-color: #d8ad45;
  outline: 0;
  box-shadow:
    0 0 0 3px rgba(216, 173, 69, .16);
}


/* Browser/autofill can otherwise produce the bright yellow box. */
.s2b-login-form
input:-webkit-autofill,
.s2b-login-form
input:-webkit-autofill:hover,
.s2b-login-form
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #172536;
  -webkit-box-shadow:
    0 0 0 1000px #fff inset;
  transition:
    background-color 9999s ease-out;
}


/* ============================================================
 * CAPTCHA / TURNSTILE
 * ============================================================ */

.s2b-login-form .captcha {
  margin: 6px 0 23px;
  padding: 16px;
  border: 1px solid #dce2e8;
  border-radius: 14px;
  background: #fff;
}

.s2b-login-form .captcha > legend,
.s2b-login-form .captcha .fieldset-legend {
  color: #1b2b3b;
  font-weight: 800;
}

/*
 * Drupal CAPTCHA's generic English explanatory text adds little
 * once Turnstile itself is visible. Keep the widget untouched.
 */
.s2b-login-form .captcha .description,
.s2b-login-form .captcha .form-text {
  display: none;
}


/* ============================================================
 * BUTTON
 * ============================================================ */

.s2b-login-form .form-actions {
  margin: 25px 0 0;
}

.s2b-login-form .s2b-login-submit,
.s2b-login-form
.form-actions
input[type="submit"] {
  display: inline-flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  border: 0 !important;
  border-radius: 12px !important;
  background: #ddb23f !important;
  color: #172536 !important;
  font-size: 18px;
  font-weight: 850;
  line-height: 1.1;
  box-shadow:
    0 7px 16px rgba(128, 94, 15, .17);
  text-decoration: none;
}

.s2b-login-form .s2b-login-submit:hover,
.s2b-login-form
.form-actions
input[type="submit"]:hover {
  background: #e7bd4b !important;
  color: #172536 !important;
  transform: translateY(-1px);
}


/* ============================================================
 * ERRORS
 * ============================================================ */

.s2b-login-form .form-item--error-message {
  margin-top: 7px;
  color: #b42318;
  font-size: 14px;
  font-weight: 700;
}

.s2b-login-form
input.error,
.s2b-login-form
input[aria-invalid="true"] {
  border-color: #d94343;
}


/* ============================================================
 * MOBILE
 * ============================================================ */

@media (max-width: 700px) {
  .s2b-login-shell {
    margin: 12px auto 30px;
  }

  .s2b-login-hero {
    padding: 25px 22px 27px;
    border-radius: 22px;
  }

  .s2b-login-hero h1 {
    font-size: 37px;
  }

  .s2b-login-hero p {
    font-size: 16px;
  }

  .s2b-login-card {
    padding: 24px 20px 25px;
    border-radius: 20px;
  }

  .s2b-login-card__heading h2 {
    font-size: 26px;
  }

  .s2b-login-form
  input[type="text"],
  .s2b-login-form
  input[type="password"],
  .s2b-login-form
  input[type="email"] {
    min-height: 52px;
    font-size: 16px;
  }
}


/* S2B_LOGIN_ACCOUNT_LINKS_UI_20260904 */

.s2b-login-account-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 15px;
}

.s2b-login-account-link {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  border: 1px solid #cfd7df;
  border-radius: 12px;
  background: #fff;
  color: #1b344b !important;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  text-decoration: none !important;
  transition:
    border-color .16s ease,
    background .16s ease,
    transform .16s ease;
}

.s2b-login-account-link:hover {
  border-color: #d8ad45;
  background: #fffaf0;
  color: #172536 !important;
  transform: translateY(-1px);
}

.s2b-login-account-link--register {
  border-color: rgba(216, 173, 69, .65);
}

@media (max-width: 520px) {
  .s2b-login-account-links {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .s2b-login-account-link {
    min-height: 47px;
  }
}