/* Little Moo Hosting logged-in forms. Authoritative layer 4/7. */
body:is(.lmh-client-shell, .lmh-public-page) :where(form, fieldset) { min-width: 0; }
body:is(.lmh-client-shell, .lmh-public-page) fieldset { padding: 0; border: 0; }

body:is(.lmh-client-shell, .lmh-public-page) .lmh-form-card {
  display: grid;
  gap: 16px;
  padding: clamp(16px, 2vw, 22px);
}

body:is(.lmh-client-shell, .lmh-public-page) .lmh-form-card > h2 {
  margin: 0;
  color: var(--lmh-client-text);
  font: 700 1.05rem/1.25 Syne, Inter, "Segoe UI", sans-serif;
}

body:is(.lmh-client-shell, .lmh-public-page) .lmh-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

body:is(.lmh-client-shell, .lmh-public-page) .lmh-form-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

body:is(.lmh-client-shell, .lmh-public-page) .lmh-form-field > label,
body:is(.lmh-client-shell, .lmh-public-page) .lmh-form-field > .field-icon,
body:is(.lmh-client-shell, .lmh-public-page) .lmh-form-field > .col-form-label {
  color: var(--lmh-client-text);
  font-weight: 650;
}

body:is(.lmh-client-shell, .lmh-public-page) .lmh-form-help {
  margin: 0;
  color: var(--lmh-client-subtle);
}

body:is(.lmh-client-shell, .lmh-public-page) :where(label, legend, .col-form-label) {
  color: var(--lmh-client-text);
  font-weight: 650;
}

body:is(.lmh-client-shell, .lmh-public-page) :where(.form-group, .lmh-form-group) { margin-bottom: 16px; }

body:is(.lmh-client-shell, .lmh-public-page) :where(.form-control, .custom-select, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], select, textarea) {
  min-height: 44px;
  max-width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--lmh-client-border-strong);
  border-radius: var(--lmh-client-radius-sm);
  background-color: var(--lmh-client-bg-raised);
  color: var(--lmh-client-text);
  font: 500 0.94rem/1.4 Inter, sans-serif;
  box-shadow: none;
}

body:is(.lmh-client-shell, .lmh-public-page) textarea { min-height: 120px; resize: vertical; }

body:is(.lmh-client-shell, .lmh-public-page) :where(.form-control, .custom-select, input, select, textarea)::placeholder {
  color: var(--lmh-client-subtle);
  opacity: 1;
}

body:is(.lmh-client-shell, .lmh-public-page) :where(.form-control, .custom-select, input, select, textarea):focus {
  border-color: var(--lmh-client-focus);
  background-color: var(--lmh-client-surface);
  color: var(--lmh-client-text);
  box-shadow: 0 0 0 3px rgba(200, 186, 255, 0.16);
}

body:is(.lmh-client-shell, .lmh-public-page) :where(.form-control, input, select, textarea):disabled {
  cursor: not-allowed;
  border-color: #332a3e;
  background: #0a0c10;
  color: #8f849a;
  opacity: 0.75;
}

body:is(.lmh-client-shell, .lmh-public-page) select,
body:is(.lmh-client-shell, .lmh-public-page) select.form-control,
body:is(.lmh-client-shell, .lmh-public-page) select.custom-select {
  color-scheme: dark;
}

body:is(.lmh-client-shell, .lmh-public-page) :where(select option, select optgroup) {
  background: var(--lmh-client-surface-2);
  color: var(--lmh-client-text);
}

body:is(.lmh-client-shell, .lmh-public-page) :where(input[type="checkbox"], input[type="radio"], .form-check-input) {
  position: static;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
  padding: 0;
  border: 2px solid #8b7a9e;
  background: var(--lmh-client-bg-raised);
  opacity: 1;
  accent-color: var(--lmh-client-purple);
  appearance: auto;
  visibility: visible;
  vertical-align: middle;
}

body:is(.lmh-client-shell, .lmh-public-page) :where(.form-check, .radio, .checkbox, .lmh-choice-row, .lmh-check-row) {
  display: flex;
  min-height: 44px;
  padding: 8px 0;
  align-items: flex-start;
  gap: 10px;
}

body:is(.lmh-client-shell, .lmh-public-page) :where(.form-check, .radio, .checkbox) label,
body:is(.lmh-client-shell, .lmh-public-page) .lmh-check-row {
  margin: 0;
  color: var(--lmh-client-muted);
  font-weight: 500;
}

body:is(.lmh-client-shell, .lmh-public-page) :where(.help-block, .form-text, .lmh-form-help) {
  display: block;
  margin-top: 6px;
  color: var(--lmh-client-subtle);
  font-size: 0.82rem;
}

body:is(.lmh-client-shell, .lmh-public-page) :where(.has-error, .is-invalid) :where(.form-control, input, select, textarea),
body:is(.lmh-client-shell, .lmh-public-page) :where(.form-control, input, select, textarea).is-invalid {
  border-color: var(--lmh-client-danger);
}

body:is(.lmh-client-shell, .lmh-public-page) :where(.invalid-feedback, .field-error, .has-error .help-block) {
  color: #ffadb4;
}

body:is(.lmh-client-shell, .lmh-public-page) .input-group-text {
  border-color: var(--lmh-client-border-strong);
  background: var(--lmh-client-surface-2);
  color: var(--lmh-client-muted);
}

body:is(.lmh-client-shell, .lmh-public-page) .custom-file-label {
  min-height: 44px;
  border-color: var(--lmh-client-border-strong);
  background: var(--lmh-client-bg-raised);
  color: var(--lmh-client-muted);
}

body:is(.lmh-client-shell, .lmh-public-page) .custom-file-label::after {
  min-height: 42px;
  border-color: var(--lmh-client-border-strong);
  background: transparent;
  color: var(--lmh-client-text);
}

body:is(.lmh-client-shell, .lmh-public-page) .lmh-newsletter-card { max-width: 760px; margin-inline: auto; }
body:is(.lmh-client-shell, .lmh-public-page) .lmh-newsletter-message-card { padding: clamp(18px, 3vw, 28px); }
body:is(.lmh-client-shell, .lmh-public-page) .lmh-newsletter-success-icon {
  display: flex;
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(104, 211, 145, 0.5);
  border-radius: 50%;
  background: rgba(104, 211, 145, 0.1);
  color: var(--lmh-client-success);
}

body:is(.lmh-client-shell, .lmh-public-page) .lmh-email-preferences-card > .lmh-form-help {
  max-width: 68ch;
  margin: -4px 0 16px;
}

body:is(.lmh-client-shell, .lmh-public-page) .lmh-email-preferences-list {
  display: grid;
  gap: 10px;
}

body:is(.lmh-client-shell, .lmh-public-page) .lmh-email-preference-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  min-height: 64px;
  padding: 12px 14px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--lmh-client-border);
  border-radius: var(--lmh-client-radius-sm);
  background: transparent;
  cursor: pointer;
}

body:is(.lmh-client-shell, .lmh-public-page) .lmh-email-preference-row:hover {
  border-color: var(--lmh-client-border-strong);
  background: var(--lmh-client-surface-3);
}

body:is(.lmh-client-shell, .lmh-public-page) .lmh-email-preference-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

body:is(.lmh-client-shell, .lmh-public-page) .lmh-email-preference-copy strong {
  color: var(--lmh-client-text);
  font-size: 0.92rem;
}

body:is(.lmh-client-shell, .lmh-public-page) .lmh-email-preference-copy small {
  color: var(--lmh-client-subtle);
  font-size: 0.8rem;
  line-height: 1.45;
}

body:is(.lmh-client-shell, .lmh-public-page) .lmh-email-preference-state {
  padding: 4px 8px;
  border: 1px solid var(--lmh-client-border-strong);
  border-radius: 999px;
  color: var(--lmh-client-subtle);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (max-width: 575px) {
  body:is(.lmh-client-shell, .lmh-public-page) .lmh-email-preference-row {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  body:is(.lmh-client-shell, .lmh-public-page) .lmh-email-preference-state {
    grid-column: 2;
    justify-self: start;
  }
}

body:is(.lmh-client-shell, .lmh-public-page) :where(.input-group, .input-group-prepend, .input-group-append) {
  min-width: 0;
}

body:is(.lmh-client-shell, .lmh-public-page) .input-group > :where(.form-control, .custom-select) {
  width: 1%;
  min-width: 0;
}

body:is(.lmh-client-shell, .lmh-public-page) :where(.input-group-prepend, .input-group-append) .btn {
  min-height: 44px;
  border-radius: 0 var(--lmh-client-radius-sm) var(--lmh-client-radius-sm) 0;
}

body:is(.lmh-client-shell, .lmh-public-page) :where(.password-strength-meter, .password-strength) {
  min-height: 8px;
  border-radius: 999px;
  background: var(--lmh-client-surface-3);
  overflow: hidden;
}

body:is(.lmh-client-shell, .lmh-public-page) :where(.recaptcha-container, .captcha-container) {
  max-width: 100%;
  overflow-x: auto;
}

body:is(.lmh-client-shell, .lmh-public-page) :where(.form-horizontal .control-label, .form-horizontal .col-form-label) {
  padding-top: 10px;
  text-align: left;
}

body:is(.lmh-client-shell, .lmh-public-page) :where(.btn-group, .btn-toolbar) {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 8px;
}

body:is(.lmh-client-shell, .lmh-public-page) :where(.btn-group, .btn-toolbar) > .btn {
  margin: 0;
  border-radius: var(--lmh-client-radius-sm);
}

@media (max-width: 768px) {
  body:is(.lmh-client-shell, .lmh-public-page) .lmh-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   CAPTCHA and the Remember-me control
   ==========================================================================
   Both shipped as stock WHMCS markup and looked it. On the login page - the
   first screen a customer ever sees - the CAPTCHA was a centred sentence, a
   raw white input and a default border sitting inside an otherwise dark,
   left-aligned, fully branded form. The Remember-me box was the browser's
   own grey square.

   Nothing here changes CAPTCHA behaviour: the image, the input, its name,
   maxlength and validation are untouched. This is presentation only.

   Everything is expressed in global tokens rather than the --lmh-auth-*
   set, because the same markup renders on register, contact and the domain
   checker, where the auth variables do not exist.
   ========================================================================== */

#default-captcha-domainchecker {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px 14px;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--lmh-border-strong, rgba(203, 196, 222, .18));
    border-radius: var(--lmh-radius-large, 16px);
    background: var(--lmh-surface-soft, rgba(255, 255, 255, .03));
    text-align: left;
}

/* The instruction spans both columns and stops being a centred banner. */
#default-captcha-domainchecker > p {
    grid-column: 1 / -1;
    margin: 0;
    font: 400 13px/1.5 var(--lmh-font-body, Inter, "Segoe UI", sans-serif);
    color: var(--lmh-text-muted, #B8B8C2);
    text-align: left;
}

/* Bootstrap's col-6 halves would leave the image and field each at 50%.
   The image is a fixed-size asset; the field should take what is left. */
#default-captcha-domainchecker .captchaimage,
#default-captcha-domainchecker > .col-6 {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
    margin: 0;
}

#default-captcha-domainchecker .captchaimage { grid-column: 1; }
#default-captcha-domainchecker > .col-6:not(.captchaimage) { grid-column: 2; }

#inputCaptchaImage {
    display: block;
    border-radius: var(--lmh-radius-small, 8px);
    /* The generated image is a light plate; a hairline stops it floating on
       a dark surface without altering the glyphs themselves. */
    border: 1px solid var(--lmh-border, rgba(203, 196, 222, .10));
}

/* Matches the auth fields: same height, radius, border, focus ring. */
#inputCaptcha {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    height: 48px;
    padding: 0 .9rem;
    border: 1px solid var(--lmh-border-strong, rgba(203, 196, 222, .18));
    border-radius: var(--lmh-radius-medium, 12px);
    background: var(--lmh-surface, rgba(13, 11, 25, .65));
    color: var(--lmh-text, #F4F2F6);
    font: 500 16px/1.4 var(--lmh-font-body, Inter, "Segoe UI", sans-serif);
    letter-spacing: .04em;
}

#inputCaptcha::placeholder { color: var(--lmh-text-soft, #8F929D); }

#inputCaptcha:focus {
    outline: none;
    border-color: var(--lmh-focus, #C8BAFF);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lmh-focus, #C8BAFF) 35%, transparent);
}

@media (max-width: 420px) {
    /* Stack rather than shrink the field below a usable width. */
    #default-captcha-domainchecker { grid-template-columns: minmax(0, 1fr); }
    #default-captcha-domainchecker .captchaimage,
    #default-captcha-domainchecker > .col-6:not(.captchaimage) { grid-column: 1; }
}

/* --------------------------------------------------------------------------
   Remember me
   --------------------------------------------------------------------------
   Styled with accent-color and a real focus ring rather than by replacing the
   control with a span. The input stays a native checkbox, so the keyboard
   behaviour, the space key, the label association and the accessibility tree
   are exactly what they were.
   -------------------------------------------------------------------------- */

.lmh-auth-form .form-check-input[type="checkbox"],
.lmh-form-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0 10px 0 0;
    accent-color: var(--lmh-brand, #6D4CDB);
    border-radius: 5px;
    cursor: pointer;
    flex: none;
}

.lmh-auth-form .form-check-input[type="checkbox"]:focus-visible,
.lmh-form-check input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--lmh-focus, #C8BAFF);
    outline-offset: 2px;
}