/* =========================================================
   Account Recovery Pages
   File: account-recovery.css

   Pages covered:
   - /password-reset
   - /password-reset?layout=confirm
   - /password-reset?layout=complete
   - /username-reminder-request
   - /username-reminder-request?view=login

   Joomla pages:
   - Password Reset: body.itemid-2128
   - Username Reminder: body.itemid-2127
   ========================================================= */


/* =========================================================
   1. Shared page positioning / stop vertical shifting
   ========================================================= */

body.itemid-2128 #sp-main-body,
body.itemid-2127 #sp-main-body,
body.itemid-2128 #sp-main-body .container,
body.itemid-2127 #sp-main-body .container,
body.itemid-2128 #sp-main-body .container-inner,
body.itemid-2127 #sp-main-body .container-inner {
  align-items: flex-start !important;
  align-content: flex-start !important;
  padding-top: 0 !important;
  padding-bottom: 56px !important;
}

/* Keep main rows aligned to the top when sidebar/menu is active */
body.itemid-2128 #sp-main-body > .row,
body.itemid-2127 #sp-main-body > .row,
body.itemid-2128 #sp-main-body .row,
body.itemid-2127 #sp-main-body .row,
body.itemid-2128 #sp-main-body .sp-row,
body.itemid-2127 #sp-main-body .sp-row {
  align-items: flex-start !important;
  align-content: flex-start !important;
}

/* Component positioning */
body.itemid-2128 #sp-component,
body.itemid-2127 #sp-component {
  align-self: flex-start !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

/* Sidebar/menu/component column alignment */
body.itemid-2128 #sp-component > .sp-column,
body.itemid-2127 #sp-component > .sp-column,
body.itemid-2128 #sp-menu,
body.itemid-2127 #sp-menu,
body.itemid-2128 #sp-left,
body.itemid-2127 #sp-left,
body.itemid-2128 #sp-right,
body.itemid-2127 #sp-right,
body.itemid-2128 #sp-menu > .sp-column,
body.itemid-2127 #sp-menu > .sp-column,
body.itemid-2128 #sp-left > .sp-column,
body.itemid-2127 #sp-left > .sp-column,
body.itemid-2128 #sp-right > .sp-column,
body.itemid-2127 #sp-right > .sp-column {
  align-self: flex-start !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Reset Joomla/Bootstrap row spacing for these forms */
body.itemid-2128 #sp-component .row.justify-content-center,
body.itemid-2127 #sp-component .row.justify-content-center {
  align-items: flex-start !important;
  align-content: flex-start !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* =========================================================
   2. Password Reset Request
   URL: /password-reset
   Page: itemid-2128
   Form: form#user-registration[action*="task=reset.request"]
   ========================================================= */

/* Widen and centre narrow Bootstrap column */
body.itemid-2128 #sp-component .col-sm-4:has(.reset form#user-registration[action*="task=reset.request"]) {
  width: 100% !important;
  max-width: 680px !important;
  flex: 0 0 680px !important;
  float: none !important;
  align-self: flex-start !important;
  margin-top: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Remove Bootstrap offset */
body.itemid-2128 #sp-component .col-sm-offset-4:has(.reset form#user-registration[action*="task=reset.request"]) {
  margin-left: auto !important;
}

/* Main card */
body.itemid-2128 #sp-component .reset:has(form#user-registration[action*="task=reset.request"]) {
  width: 100% !important;
  max-width: 680px !important;
  margin: 18px auto 55px !important;
  padding: 34px 38px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 20px rgba(17, 24, 39, 0.08) !important;
  box-sizing: border-box !important;
}

/* Title */
body.itemid-2128 #sp-component .reset:has(form#user-registration[action*="task=reset.request"]) h1 {
  margin: 0 0 16px !important;
  color: #1f2937 !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

/* Intro text */
body.itemid-2128 #sp-component .reset:has(form#user-registration[action*="task=reset.request"]) p {
  margin: 0 0 22px !important;
  color: #4b5563 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Form rows */
body.itemid-2128 #sp-component form#user-registration[action*="task=reset.request"] .form-group {
  margin-bottom: 18px !important;
}

/* Labels */
body.itemid-2128 #sp-component form#user-registration[action*="task=reset.request"] label {
  display: block !important;
  margin-bottom: 7px !important;
  color: #1f2937 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* Hide default Joomla Captcha label only - does not hide Turnstile */
body.itemid-2128 #sp-component form#user-registration[action*="task=reset.request"] label[for="jform_captcha"],
body.itemid-2128 #sp-component form#user-registration[action*="task=reset.request"] #jform_captcha-lbl {
  display: none !important;
}

/* Inputs */
body.itemid-2128 #sp-component form#user-registration[action*="task=reset.request"] input[type="email"],
body.itemid-2128 #sp-component form#user-registration[action*="task=reset.request"] input[type="text"] {
  width: 100% !important;
  max-width: 100% !important;
  height: 44px !important;
  padding: 10px 12px !important;
  color: #1f2937 !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  box-sizing: border-box !important;
}

/* Input focus */
body.itemid-2128 #sp-component form#user-registration[action*="task=reset.request"] input:focus {
  border-color: #168acb !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(22, 138, 203, 0.12) !important;
}

/* Cloudflare Turnstile / captcha spacing */
body.itemid-2128 #sp-component form#user-registration[action*="task=reset.request"] .anyrecaptcha-wrap,
body.itemid-2128 #sp-component form#user-registration[action*="task=reset.request"] .cf-turnstile,
body.itemid-2128 #sp-component form#user-registration[action*="task=reset.request"] iframe {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 100% !important;
  margin: 22px 0 18px !important;
}

/* Submit button */
body.itemid-2128 #sp-component form#user-registration[action*="task=reset.request"] button,
body.itemid-2128 #sp-component form#user-registration[action*="task=reset.request"] .btn {
  min-width: 120px !important;
  height: 42px !important;
  padding: 0 22px !important;
  background: #168acb !important;
  border: 1px solid #168acb !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 40px !important;
}

body.itemid-2128 #sp-component form#user-registration[action*="task=reset.request"] button:hover,
body.itemid-2128 #sp-component form#user-registration[action*="task=reset.request"] .btn:hover {
  background: #0f78b3 !important;
  border-color: #0f78b3 !important;
  color: #ffffff !important;
}


/* =========================================================
   3. Username Reminder Request
   URL: /username-reminder-request
   Page: itemid-2127
   Form: form#user-registration[action*="task=remind.remind"]
   ========================================================= */

/* Widen and centre narrow Bootstrap column */
body.itemid-2127 #sp-component .col-sm-4:has(.remind form#user-registration[action*="task=remind.remind"]) {
  width: 100% !important;
  max-width: 680px !important;
  flex: 0 0 680px !important;
  float: none !important;
  align-self: flex-start !important;
  margin-top: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Remove Bootstrap offset */
body.itemid-2127 #sp-component .col-sm-offset-4:has(.remind form#user-registration[action*="task=remind.remind"]) {
  margin-left: auto !important;
}

/* Main card */
body.itemid-2127 #sp-component .remind:has(form#user-registration[action*="task=remind.remind"]) {
  width: 100% !important;
  max-width: 680px !important;
  margin: 18px auto 55px !important;
  padding: 34px 38px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 20px rgba(17, 24, 39, 0.08) !important;
  box-sizing: border-box !important;
}

/* Title */
body.itemid-2127 #sp-component .remind:has(form#user-registration[action*="task=remind.remind"]) h1 {
  margin: 0 0 16px !important;
  color: #1f2937 !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

/* Intro text */
body.itemid-2127 #sp-component .remind:has(form#user-registration[action*="task=remind.remind"]) p {
  margin: 0 0 22px !important;
  color: #4b5563 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Form rows */
body.itemid-2127 #sp-component form#user-registration[action*="task=remind.remind"] .form-group {
  margin-bottom: 18px !important;
}

/* Labels */
body.itemid-2127 #sp-component form#user-registration[action*="task=remind.remind"] label {
  display: block !important;
  margin-bottom: 7px !important;
  color: #1f2937 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* Hide default Joomla Captcha label only - does not hide Turnstile */
body.itemid-2127 #sp-component form#user-registration[action*="task=remind.remind"] label[for="jform_captcha"],
body.itemid-2127 #sp-component form#user-registration[action*="task=remind.remind"] #jform_captcha-lbl {
  display: none !important;
}

/* Inputs */
body.itemid-2127 #sp-component form#user-registration[action*="task=remind.remind"] input[type="email"],
body.itemid-2127 #sp-component form#user-registration[action*="task=remind.remind"] input[type="text"] {
  width: 100% !important;
  max-width: 100% !important;
  height: 44px !important;
  padding: 10px 12px !important;
  color: #1f2937 !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  box-sizing: border-box !important;
}

/* Input focus */
body.itemid-2127 #sp-component form#user-registration[action*="task=remind.remind"] input:focus {
  border-color: #168acb !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(22, 138, 203, 0.12) !important;
}

/* Cloudflare Turnstile / captcha spacing */
body.itemid-2127 #sp-component form#user-registration[action*="task=remind.remind"] .anyrecaptcha-wrap,
body.itemid-2127 #sp-component form#user-registration[action*="task=remind.remind"] .cf-turnstile,
body.itemid-2127 #sp-component form#user-registration[action*="task=remind.remind"] iframe {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 100% !important;
  margin: 22px 0 18px !important;
}

/* Submit button */
body.itemid-2127 #sp-component form#user-registration[action*="task=remind.remind"] button,
body.itemid-2127 #sp-component form#user-registration[action*="task=remind.remind"] .btn {
  min-width: 120px !important;
  height: 42px !important;
  padding: 0 22px !important;
  background: #168acb !important;
  border: 1px solid #168acb !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 40px !important;
}

body.itemid-2127 #sp-component form#user-registration[action*="task=remind.remind"] button:hover,
body.itemid-2127 #sp-component form#user-registration[action*="task=remind.remind"] .btn:hover {
  background: #0f78b3 !important;
  border-color: #0f78b3 !important;
  color: #ffffff !important;
}


/* =========================================================
   4. Username Reminder Login View
   URL: /username-reminder-request?view=login
   Page: itemid-2127.view-login
   Form: form.form-validate[action*="task=user.login"]
   ========================================================= */

/* Login view card */
body.itemid-2127.view-login #sp-component .col-sm-4:has(form.form-validate[action*="task=user.login"]) {
  width: 100% !important;
  max-width: 680px !important;
  flex: 0 0 680px !important;
  float: none !important;
  align-self: flex-start !important;
  margin: 18px auto 55px !important;
  padding: 34px 38px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 20px rgba(17, 24, 39, 0.08) !important;
  box-sizing: border-box !important;
}

/* Hide incorrect inherited heading */
body.itemid-2127.view-login #sp-component .col-sm-4:has(form.form-validate[action*="task=user.login"]) h1 {
  display: none !important;
}

/* Add correct heading */
body.itemid-2127.view-login #sp-component .col-sm-4:has(form.form-validate[action*="task=user.login"])::before {
  content: "Log in";
  display: block !important;
  margin: 0 0 24px !important;
  color: #1f2937 !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

/* Centre login form inside card */
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] {
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 auto !important;
}

/* Form rows */
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] .form-group,
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] .control-group {
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 18px !important;
  box-sizing: border-box !important;
}

/* Control wrappers */
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] .controls,
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] .input-group,
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] .input-prepend,
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] .input-append {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Remove leftover "Show" text/icon without hiding password input */
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] .control-group:has(input[type="password"]) .controls,
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] .form-group:has(input[type="password"]) .controls,
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] .input-group:has(input[type="password"]),
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] .input-prepend:has(input[type="password"]),
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] .input-append:has(input[type="password"]) {
  font-size: 0 !important;
}

/* Hide show/hide password buttons and labels */
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] button[type="button"],
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] .btn-password-toggle,
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] .input-password-toggle,
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] .password-toggle,
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] .show-password,
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] .hide-password,
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] label[for*="show"],
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] label[for*="password-toggle"] {
  display: none !important;
}

/* Inputs */
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] input[type="text"],
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] input[type="password"],
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] input[type="email"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 44px !important;
  padding: 10px 12px !important;
  color: #1f2937 !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}

/* Input focus */
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] input:focus {
  border-color: #168acb !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(22, 138, 203, 0.12) !important;
}

/* Hide remember me row */
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] .form-check,
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] .control-group:has(input[type="checkbox"]),
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] .form-group:has(input[type="checkbox"]) {
  display: none !important;
}

/* Login button only */
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] button[type="submit"],
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] input[type="submit"],
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] .btn-primary {
  display: block !important;
  width: auto !important;
  min-width: 180px !important;
  max-width: 220px !important;
  height: 42px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  background: #168acb !important;
  border: 1px solid #168acb !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 40px !important;
  text-align: center !important;
}

body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] button[type="submit"]:hover,
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] input[type="submit"]:hover,
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] .btn-primary:hover {
  background: #0f78b3 !important;
  border-color: #0f78b3 !important;
  color: #ffffff !important;
}

/* Login links */
body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] + ul,
body.itemid-2127.view-login #sp-component .list-unstyled {
  margin: 22px 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] + ul li,
body.itemid-2127.view-login #sp-component .list-unstyled li {
  list-style: none !important;
  margin: 8px 0 !important;
}

/* Hide broken "Don't have an account?" registration link on this page only */
body.itemid-2127.view-login #sp-component a[href*="registration"],
body.itemid-2127.view-login #sp-component a[href*="register"],
body.itemid-2127.view-login #sp-component a[href*="create-account"] {
  display: none !important;
}


/* =========================================================
   5. Password Reset Confirm Page
   URL: /password-reset?layout=confirm
   Page: itemid-2128.layout-confirm
   Wrapper: .reset-confirm
   Form: form.form-validate[action*="task=reset.confirm"]
   ========================================================= */

/* Widen and centre narrow Bootstrap column */
body.itemid-2128.layout-confirm #sp-component .col-sm-4:has(.reset-confirm form.form-validate[action*="task=reset.confirm"]) {
  width: 100% !important;
  max-width: 680px !important;
  flex: 0 0 680px !important;
  float: none !important;
  align-self: flex-start !important;
  margin-top: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Remove Bootstrap offset */
body.itemid-2128.layout-confirm #sp-component .col-sm-offset-4:has(.reset-confirm form.form-validate[action*="task=reset.confirm"]) {
  margin-left: auto !important;
}

/* Main card */
body.itemid-2128.layout-confirm #sp-component .reset-confirm:has(form.form-validate[action*="task=reset.confirm"]) {
  width: 100% !important;
  max-width: 680px !important;
  margin: 18px auto 55px !important;
  padding: 34px 38px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 20px rgba(17, 24, 39, 0.08) !important;
  box-sizing: border-box !important;
}

/* Title */
body.itemid-2128.layout-confirm #sp-component .reset-confirm:has(form.form-validate[action*="task=reset.confirm"]) h1 {
  margin: 0 0 16px !important;
  color: #1f2937 !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

/* Form rows */
body.itemid-2128.layout-confirm #sp-component form.form-validate[action*="task=reset.confirm"] .form-group,
body.itemid-2128.layout-confirm #sp-component form.form-validate[action*="task=reset.confirm"] .control-group {
  margin-bottom: 18px !important;
}

/* Labels */
body.itemid-2128.layout-confirm #sp-component form.form-validate[action*="task=reset.confirm"] label {
  display: block !important;
  margin-bottom: 7px !important;
  color: #1f2937 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* Inputs */
body.itemid-2128.layout-confirm #sp-component form.form-validate[action*="task=reset.confirm"] input[type="text"],
body.itemid-2128.layout-confirm #sp-component form.form-validate[action*="task=reset.confirm"] input[type="email"],
body.itemid-2128.layout-confirm #sp-component form.form-validate[action*="task=reset.confirm"] input[type="password"] {
  width: 100% !important;
  max-width: 100% !important;
  height: 44px !important;
  padding: 10px 12px !important;
  color: #1f2937 !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  box-sizing: border-box !important;
}

/* Input focus */
body.itemid-2128.layout-confirm #sp-component form.form-validate[action*="task=reset.confirm"] input:focus {
  border-color: #168acb !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(22, 138, 203, 0.12) !important;
}

/* Submit button */
body.itemid-2128.layout-confirm #sp-component form.form-validate[action*="task=reset.confirm"] button,
body.itemid-2128.layout-confirm #sp-component form.form-validate[action*="task=reset.confirm"] .btn {
  min-width: 120px !important;
  height: 42px !important;
  padding: 0 22px !important;
  background: #168acb !important;
  border: 1px solid #168acb !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 40px !important;
}

body.itemid-2128.layout-confirm #sp-component form.form-validate[action*="task=reset.confirm"] button:hover,
body.itemid-2128.layout-confirm #sp-component form.form-validate[action*="task=reset.confirm"] .btn:hover {
  background: #0f78b3 !important;
  border-color: #0f78b3 !important;
  color: #ffffff !important;
}


/* =========================================================
   6. Password Reset Complete Page
   URL: /password-reset?layout=complete
   Page: itemid-2128.layout-complete
   Wrapper: .reset-complete
   Form: form.form-validate[action*="task=reset.complete"]
   ========================================================= */

/* Widen and centre narrow Bootstrap column */
body.itemid-2128.layout-complete #sp-component .col-sm-4:has(.reset-complete form.form-validate[action*="task=reset.complete"]) {
  width: 100% !important;
  max-width: 680px !important;
  flex: 0 0 680px !important;
  float: none !important;
  align-self: flex-start !important;
  margin-top: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Remove Bootstrap offset */
body.itemid-2128.layout-complete #sp-component .col-sm-offset-4:has(.reset-complete form.form-validate[action*="task=reset.complete"]) {
  margin-left: auto !important;
}

/* Main card */
body.itemid-2128.layout-complete #sp-component .reset-complete:has(form.form-validate[action*="task=reset.complete"]) {
  width: 100% !important;
  max-width: 680px !important;
  margin: 18px auto 55px !important;
  padding: 34px 38px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 20px rgba(17, 24, 39, 0.08) !important;
  box-sizing: border-box !important;
}

/* Title */
body.itemid-2128.layout-complete #sp-component .reset-complete h1 {
  margin: 0 0 16px !important;
  color: #1f2937 !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

/* Intro text */
body.itemid-2128.layout-complete #sp-component .reset-complete p {
  margin: 0 0 22px !important;
  color: #4b5563 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Hide duplicate instruction paragraph before confirm password */
body.itemid-2128.layout-complete #sp-component .reset-complete p:nth-of-type(2) {
  display: none !important;
}

/* Form rows */
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .form-group,
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .control-group {
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 18px !important;
  box-sizing: border-box !important;
}

/* Control wrappers */
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .controls,
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .input-group,
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .input-prepend,
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .input-append {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Labels */
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] label {
  display: block !important;
  margin-bottom: 7px !important;
  color: #1f2937 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* Hide show/hide password controls but keep password fields */
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] button[type="button"],
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .btn-password-toggle,
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .input-password-toggle,
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .password-toggle,
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .show-password,
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .hide-password,
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] label[for*="show"],
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] label[for*="password-toggle"] {
  display: none !important;
}

/* Remove leftover "Show" text from password control wrappers */
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .controls:has(input[type="password"]),
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .input-group:has(input[type="password"]),
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .input-prepend:has(input[type="password"]),
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .input-append:has(input[type="password"]) {
  font-size: 0 !important;
}

/* Inputs */
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] input[type="text"],
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] input[type="email"],
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] input[type="password"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 44px !important;
  padding: 10px 12px !important;
  color: #1f2937 !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}

/* Input focus */
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] input:focus {
  border-color: #168acb !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(22, 138, 203, 0.12) !important;
}

/* Keep password minimum requirements visible */
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .progress,
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .progress-bar,
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .password-strength,
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .password-strength-meter,
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .password-strength-message,
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .form-text,
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .help-block,
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] small {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* Minimum requirements spacing */
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .progress,
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .password-strength,
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .password-strength-meter {
  margin-top: 10px !important;
  margin-bottom: 8px !important;
}

/* Submit button */
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] button[type="submit"],
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] input[type="submit"],
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .btn-primary {
  min-width: 120px !important;
  height: 42px !important;
  padding: 0 22px !important;
  background: #168acb !important;
  border: 1px solid #168acb !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 40px !important;
  text-align: center !important;
}

body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] button[type="submit"]:hover,
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] input[type="submit"]:hover,
body.itemid-2128.layout-complete #sp-component form.form-validate[action*="task=reset.complete"] .btn-primary:hover {
  background: #0f78b3 !important;
  border-color: #0f78b3 !important;
  color: #ffffff !important;
}

/* Joomla alert/warning boxes on password reset complete page */
body.itemid-2128.layout-complete #system-message-container,
body.itemid-2128.layout-complete .alert,
body.itemid-2128.layout-complete .alert-warning,
body.itemid-2128.layout-complete .alert-danger,
body.itemid-2128.layout-complete .alert-error,
body.itemid-2128.layout-complete .alert-message {
  max-width: 680px !important;
  margin: 18px auto !important;
  box-sizing: border-box !important;
}

body.itemid-2128.layout-complete .alert,
body.itemid-2128.layout-complete .alert-warning,
body.itemid-2128.layout-complete .alert-danger,
body.itemid-2128.layout-complete .alert-error,
body.itemid-2128.layout-complete .alert-message {
  padding: 14px 18px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}


/* =========================================================
   7. Responsive styles
   ========================================================= */

@media (max-width: 767.98px) {
  body.itemid-2128 #sp-main-body,
  body.itemid-2127 #sp-main-body {
    padding-top: 0 !important;
    padding-bottom: 45px !important;
  }

  body.itemid-2128 #sp-component,
  body.itemid-2127 #sp-component {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Mobile columns */
  body.itemid-2128 #sp-component .col-sm-4:has(.reset form#user-registration[action*="task=reset.request"]),
  body.itemid-2127 #sp-component .col-sm-4:has(.remind form#user-registration[action*="task=remind.remind"]),
  body.itemid-2127.view-login #sp-component .col-sm-4:has(form.form-validate[action*="task=user.login"]),
  body.itemid-2128.layout-confirm #sp-component .col-sm-4:has(.reset-confirm form.form-validate[action*="task=reset.confirm"]),
  body.itemid-2128.layout-complete #sp-component .col-sm-4:has(.reset-complete form.form-validate[action*="task=reset.complete"]) {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Mobile cards */
  body.itemid-2128 #sp-component .reset:has(form#user-registration[action*="task=reset.request"]),
  body.itemid-2127 #sp-component .remind:has(form#user-registration[action*="task=remind.remind"]),
  body.itemid-2127.view-login #sp-component .col-sm-4:has(form.form-validate[action*="task=user.login"]),
  body.itemid-2128.layout-confirm #sp-component .reset-confirm:has(form.form-validate[action*="task=reset.confirm"]),
  body.itemid-2128.layout-complete #sp-component .reset-complete:has(form.form-validate[action*="task=reset.complete"]) {
    max-width: 100% !important;
    margin: 14px auto 42px !important;
    padding: 26px 22px !important;
    border-radius: 12px !important;
  }

  /* Mobile titles */
  body.itemid-2128 #sp-component .reset:has(form#user-registration[action*="task=reset.request"]) h1,
  body.itemid-2127 #sp-component .remind:has(form#user-registration[action*="task=remind.remind"]) h1,
  body.itemid-2127.view-login #sp-component .col-sm-4:has(form.form-validate[action*="task=user.login"])::before,
  body.itemid-2128.layout-confirm #sp-component .reset-confirm:has(form.form-validate[action*="task=reset.confirm"]) h1,
  body.itemid-2128.layout-complete #sp-component .reset-complete h1 {
    font-size: 24px !important;
  }

  /* Keep login button compact on mobile */
  body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] button[type="submit"],
  body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] input[type="submit"],
  body.itemid-2127.view-login #sp-component form.form-validate[action*="task=user.login"] .btn-primary {
    width: auto !important;
    min-width: 180px !important;
    max-width: 220px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Mobile alert/warning boxes */
  body.itemid-2128.layout-complete #system-message-container,
  body.itemid-2128.layout-complete .alert,
  body.itemid-2128.layout-complete .alert-warning,
  body.itemid-2128.layout-complete .alert-danger,
  body.itemid-2128.layout-complete .alert-error,
  body.itemid-2128.layout-complete .alert-message {
    max-width: 100% !important;
    margin: 14px auto !important;
  }
}

@media (max-width: 480px) {
  body.itemid-2128 #sp-component,
  body.itemid-2127 #sp-component {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body.itemid-2128 #sp-component .reset:has(form#user-registration[action*="task=reset.request"]),
  body.itemid-2127 #sp-component .remind:has(form#user-registration[action*="task=remind.remind"]),
  body.itemid-2127.view-login #sp-component .col-sm-4:has(form.form-validate[action*="task=user.login"]),
  body.itemid-2128.layout-confirm #sp-component .reset-confirm:has(form.form-validate[action*="task=reset.confirm"]),
  body.itemid-2128.layout-complete #sp-component .reset-complete:has(form.form-validate[action*="task=reset.complete"]) {
    padding: 24px 18px !important;
  }
}