/* 2.2 Login page (601-5625, mobile 601-5836). Site header stays; the page below it is the
   design's gradient texture with a white card (451×490, r60) and the intro on the other side.
   Form field styles are shared with the wizard (onboarding.css → .ssp-onb__armform). */

.ssp-login, .ssp-login *, .ssp-login *::before, .ssp-login *::after { box-sizing: border-box; }

body.ssp-login-page #content.site-content { padding: 0 !important; margin: 0 !important; }
body.ssp-login-page .auth-page_wrapper, body.ssp-login-page .auth-page_content { display: block; padding: 0; margin: 0; max-width: none; }
body.ssp-login-page .auth_image, body.ssp-login-page .auth-page_title, body.ssp-login-page .auth-page_subtitle { display: none; }

.ssp-login {
  position: relative; min-height: calc(100vh - 121px);          /* header height on desktop */
  padding: clamp(24px, 6vh, 64px) clamp(16px, 4vw, 64px);
  font-family: "Assistant", sans-serif; color: #363636;
  background: #eadcf0;
}
.ssp-login::before { content: ""; position: absolute; inset: 0; background: var(--ssp-onb-panel) center / cover no-repeat; }
.ssp-login__inner {
  position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(32px, 12vw, 250px);   /* card + intro centred as a group (601-5625) */
  width: min(1160px, 100%); margin: 0 auto; min-height: calc(100vh - 121px - clamp(48px, 12vh, 128px));
}

/* intro (right side in Hebrew, left in English — flex order follows the reading direction) */
.ssp-login__intro { flex: 0 1 auto; text-align: start; order: 1; }          /* intro at the reading start, card at the end: Hebrew card left, English card right */
.ssp-login__badge { display: block; width: 82px; height: auto; margin: 0 0 clamp(16px, 3vh, 32px); }
.ssp-login__title { margin: 0 0 .4em; font: 400 clamp(32px, 5.4vh, 48px)/1 Assistant, sans-serif; color: #363636; max-width: 12em; }
.ssp-login__sub { margin: 0; font: 400 clamp(18px, 2.7vh, 24px)/1.3 Assistant, sans-serif; color: #363636; max-width: 20em; }   /* plain wrap: the first line stays full; card.php glues the last two words, so none is left alone */
.ssp-login__no-account { margin: clamp(24px, 5vh, 56px) 0 0; font: 600 16px/1.3 Assistant, sans-serif; color: #363636; }
.ssp-login__no-account a { color: inherit; font-weight: 700; text-decoration: underline; }
.ssp-login__no-account--mobile { display: none; text-align: center; }

/* card */
.ssp-login__card {
  flex: 0 0 auto; width: min(451px, 100%); order: 2;
  padding: clamp(40px, 6.2vh, 56px) clamp(24px, 3.3vw, 47px) clamp(36px, 5.9vh, 53px);   /* 601-5625: 56 / 47 / 53 */
  background: #fff; border-radius: clamp(32px, 6vh, 60px);
}
/* vertical rhythm from the Figma tree: buttons 54 → 30 → divider 21 → 9 → field 52 → 20 → field 52 → 38 → button 54 → 30 → link 21 → 53 */
.ssp-login__card .ssp-onb__social { gap: 13px; }
.ssp-login__card .ssp-onb__social-btn { min-height: 54px; height: 54px; font-size: 16px; }
.ssp-login__card .ssp-onb__or { margin: clamp(20px, 3.3vh, 30px) 0 3px; font-size: 16px; line-height: 21px; height: 21px; }   /* 9 in the design; the ARMember group adds 6 */
.ssp-login__form .arm-df__form-group_text { width: 100%; }               /* email is a "text" group like the wizard's first/last name — full width here */
.ssp-login__form .arm-df__form-group { margin: 0 0 18px !important; }   /* 20 in the design; the group adds 2 */
.ssp-login__form .arm-df__form-control, .ssp-login__form input.arm-df__form-control { height: 36px !important; padding: 8px 0 0 !important; line-height: 18px !important; font-size: 18px !important; }   /* wrap padding 16 + 36 = 52 */
.ssp-login__form .arm-df__fc-icon { top: auto; bottom: 8px; transform: none; }
.ssp-login__form .arm-df__form-group_rememberme { display: none !important; }   /* "remember me": hidden, kept on (auth-login.js) */
.ssp-login__form .arm-df__form-group_forgot_link, .ssp-login__form .arm_login_links_wrapper, .ssp-login__form .arm_registration_link, .ssp-login__form .arm_socialicons_bottom { display: none !important; }   /* our own forgot / start links */
.ssp-login__form .arm-df__form-group_submit { margin: 38px 0 0 !important; }   /* adjacent margins collapse → 38 */
.ssp-login__form .arm-df__form-control-submit-btn { height: 54px !important; }
.ssp-login__form p, .ssp-login__form .arm-form-container, .ssp-login__form .arm_form, .ssp-login__form .arm-df-wrapper, .ssp-login__form .arm-df__fields-wrapper, .ssp-login__form .armclear { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.ssp-login__forgot { margin: 30px 0 0; padding: 0; text-align: center; font: 600 16px/21px Assistant, sans-serif; }
.ssp-login p, .ssp-login h1 { padding: 0; }                                     /* the theme pads every p / h1 */   /* button → link ≈ 30px */
.ssp-login__forgot a { color: #363636; text-decoration: underline; }

@media (max-width: 767.98px) {
  .ssp-login { min-height: 0; padding: 32px 16px 40px; }
  .ssp-login__inner { flex-direction: column; align-items: stretch; min-height: 0; gap: 28px; }
  .ssp-login__intro { order: 1; text-align: center; }
  .ssp-login__card { order: 2; }
  .ssp-login__badge { margin-inline: auto; }
  .ssp-login__title, .ssp-login__sub { max-width: none; }
  .ssp-login__title { font-size: clamp(35px, 9.5vw, 40px); font-weight: 600; max-width: 7.5em; margin-inline: auto; }   /* QA3 #36 — Figma 601-5836: 35 semi-bold in a 262px box (two lines), sub 22 */
  .ssp-login__sub { font-size: clamp(20px, 5.6vw, 22px); }
  .ssp-login__intro .ssp-login__no-account { display: none; }
  .ssp-login__no-account--mobile { display: block; order: 3; margin-top: 8px; }
  .ssp-login__card { width: 100%; border-radius: 40px; padding: 40px 20px 32px; }
  .ssp-login__card .ssp-onb__social { flex-direction: column; }
  .ssp-login__card .ssp-onb__social-btn { flex: none; }
}

/* ==== forgot / reset password: one centred card (Forms States 601-6040) ==== */
.ssp-login--single .ssp-login__inner { justify-content: center; }
.ssp-login__card--forgot { width: min(451px, 100%); padding: clamp(36px, 5.5vh, 50px) clamp(24px, 3.3vw, 47px) clamp(36px, 5.9vh, 53px); text-align: center; }
.ssp-login__card-title { margin: 0 0 .5em; padding: 0; font: 700 clamp(22px, 2.9vh, 26px)/1.2 Assistant, sans-serif; color: #363636; }
.ssp-login__card-sub { margin: 0 0 clamp(24px, 4.4vh, 40px); padding: 0; font: 400 clamp(15px, 2vh, 18px)/1.4 Assistant, sans-serif; color: #363636; }
.ssp-login__form--forgot .arm-df__form-group { margin: 0 0 20px !important; }
.ssp-login__form--forgot .arm-df__form-group_submit { margin: 38px 0 0 !important; }
/* the button is grey until the field holds a valid value (auth-login.js toggles [disabled]) */
.ssp-login__form--forgot .arm-df__form-control-submit-btn[disabled],
.ssp-login__form--forgot .arm-df__form-control-submit-btn.is-waiting { background: #c9c9c9 !important; background-color: #c9c9c9 !important; color: #fff !important; cursor: default; transform: none !important; }
/* ARMember result messages restyled: error red (+ our resend link), success green (+ "nothing arrived? send again") */
.ssp-login__form--forgot .arm_form_message, .ssp-login__form--forgot .arm_error_msg, .ssp-login__form--forgot .arm_success_msg, .ssp-login__form--forgot .arm_form_success_msg, .ssp-login__form--forgot .arm_form_error_msg {
  margin: clamp(12px, 2.2vh, 20px) 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important;
  font: 600 clamp(14px, 1.8vh, 16px)/1.4 Assistant, sans-serif !important; color: #e5484d !important; text-align: center;
}
.ssp-login__form--forgot .arm_success_msg, .ssp-login__form--forgot .arm_form_success_msg, .ssp-login__form--forgot .arm_form_message.arm_success { color: #1f8a3b !important; }
.ssp-login__result { margin: clamp(12px, 2.2vh, 20px) 0 0; padding: 0; font: 600 clamp(14px, 1.8vh, 16px)/1.5 Assistant, sans-serif; text-align: center; }
.ssp-login__result[hidden] { display: none; }
.ssp-login__result--error { color: #e5484d; }
.ssp-login__result--success { color: #1f8a3b; }
.ssp-login__result a, .ssp-login__result button { color: #363636; background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }
.ssp-login__result small { display: block; margin-top: .4em; font: 600 clamp(14px, 1.8vh, 16px)/1.5 Assistant, sans-serif; color: #363636; }