/* Sign-in and sign-up pages (application/views/enduser/login.php, register.php), every portal.
   One look for both: a plain white page, the portal's logo, a heading, one card with the form,
   a full-width button in the portal colour and links in the portal colour. Only styles: the
   forms, field names and scripts are untouched. Colours: var(--site_color_g) /
   var(--site_font_color_g). Minimum font size 14px. */

/* White page: the backend kit paints body and .page-wrapper grey (!important). */
body:has(.qme-auth), body:has(.qme-auth) .page-wrapper, .qme-auth { background: #fff !important; }
body:has(.qme-auth) .page-content, body:has(.qme-auth) .container, body:has(.qme-auth) .container-fluid { background: #fff !important; box-shadow: none !important; }

.qme-auth { min-height: 100vh; padding: 40px 16px 40px; color: var(--site_font_color_g, #0f172a); }

/* Logo and heading: the logo leads (the page's own CSS capped it at 250px wide). */
.qme-auth .auth-logo { display: flex; justify-content: center; margin: 0 0 18px !important; }
.qme-auth .auth-logo .img-logooo, .qme-auth .auth-logo img { width: auto !important; height: auto !important; max-width: min(360px, 82vw) !important; max-height: 84px !important; }
.qme-auth h4.text-center, .qme-auth h5.text-center { margin: 0 0 6px; font-size: 20px !important; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--site_font_color_g, #0f172a); }
.qme-auth h5.text-center + h5.text-center { margin-top: 4px; font-size: 16px; font-weight: 500; color: #64748b; }
.qme-auth h4.text-center + br, .qme-auth h5.text-center + br { display: none; }
.qme-auth .auth-page { margin-top: 20px !important; }
/* The heading sits close under the logo; the card a little lower. */
.qme-auth h4.text-center, .qme-auth h5.text-center { margin-top: 0 !important; }

/* One card, centred: narrow for sign-in, wider for sign-up (two columns of fields). */
.qme-auth .auth-page > [class*="col-"] { flex: 0 0 100% !important; width: 100% !important; max-width: 440px !important; margin: 0 auto !important; padding: 0 !important; }
.qme-auth--register .auth-page > [class*="col-"] { max-width: 680px !important; }
.qme-auth .card { border: 1px solid #e8ebf0 !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -12px rgba(15, 23, 42, .12) !important; }
.qme-auth .auth-form-wrapper { padding: 32px !important; }

/* Fields */
.qme-auth .form-group { margin-bottom: 18px; }
.qme-auth label:not(.form-check-label):not(.cb-container) { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--site_font_color_g, #0f172a); }
.qme-auth .form-control { height: 48px; padding: 0 14px; font-size: 15px; color: var(--site_font_color_g, #0f172a); background: #fff !important; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; box-shadow: none !important; transition: border-color .15s, box-shadow .15s; }
.qme-auth .form-control::placeholder { color: #94a3b8; }
.qme-auth .form-control:focus { border-color: var(--site_color_g) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--site_color_g) 14%, transparent) !important; outline: 0; }
.qme-auth .field-icon, .qme-auth .toggle-password { color: #64748b; }
.qme-auth .field-icon:hover, .qme-auth .toggle-password:hover { color: var(--site_color_g); }

/* Remember me / forgot password row, terms checkbox */
.qme-auth .form-check-label, .qme-auth .cb-container { font-size: 14px; color: #475569; }
.qme-auth .d-flex.justify-content-between { align-items: center; gap: 12px; margin-bottom: 8px; }
.qme-auth .d-flex.justify-content-between p { margin: 0; }
.qme-auth .cb-container { gap: 10px; line-height: 1.55; }

/* Links: the portal colour (the "Register here" link was red). */
.qme-auth a, .qme-auth .regiser_link { color: var(--site_color_g) !important; font-weight: 600; text-decoration: none; }
.qme-auth a:hover { text-decoration: underline; }
.qme-auth .regiser_link, .qme-auth a[href$="/login"].d-block { display: block; margin-top: 18px !important; font-size: 15px; text-align: center; }

/* Button */
.qme-auth .btn-primary { height: 48px; font-size: 16px; font-weight: 700; color: #fff !important; background: var(--site_color_g) !important; border: 0 !important; border-radius: 10px !important; box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--site_color_g) 90%, transparent) !important; }
.qme-auth .btn-primary:hover { filter: brightness(.95); }
.qme-auth .btn-primary:focus-visible { outline: 3px solid color-mix(in srgb, var(--site_color_g) 35%, transparent); outline-offset: 2px; }

/* One even 18px rhythm between every block of the form (fields, remember row, captcha, button,
   link); the pages' own margins, <br>s and the captcha's fixed height made the gaps uneven. */
.qme-auth form > .form-group, .qme-auth form > .row, .qme-auth form > .d-flex,
.qme-auth form > .mt-3, .qme-auth form > div { margin-top: 0 !important; margin-bottom: 18px !important; }
.qme-auth form > *:last-child { margin-bottom: 0 !important; }
.qme-auth form .row > [class*="col-"] .form-group { margin-bottom: 18px !important; }
.qme-auth form .form-check, .qme-auth form .d-flex.justify-content-between p { margin: 0 !important; }
.qme-auth form br, .qme-auth .auth-form-wrapper > br { display: none; }
.qme-auth .g-recaptcha { margin: 0 !important; }
.qme-auth .regiser_link, .qme-auth a[href$="/login"].d-block { margin-top: 18px !important; margin-bottom: 0 !important; }

/* Messages */
.qme-auth .alert { border-radius: 10px; font-size: 14px; }

/* reCAPTCHA: no fixed 100px gap under it */
.qme-auth .g-recaptcha { height: auto !important; margin: 4px 0 4px; }

/* Powered by: quiet, under the card */
.qme-auth .powered, .qme-auth [class*="powered"] { margin-top: 24px; font-size: 14px; color: #64748b; text-align: center; opacity: .85; }
.qme-auth [class*="powered"] img { max-height: 36px; width: auto; }

@media (max-width: 575px) {
  .qme-auth { padding: 28px 12px 32px; }
  .qme-auth .auth-form-wrapper { padding: 22px 18px !important; }
  .qme-auth h4.text-center, .qme-auth h5.text-center { font-size: 18px !important; }
}

/* Fine-tuning after a look: logo close to the heading, the captcha row on the same 18px
   rhythm (its row/column padding ignored the rule above), and the "Powered by" logo at a
   readable size. */
.qme-auth .auth-logo { margin-bottom: 6px !important; }
.qme-auth .auth-logo + br, .qme-auth .auth-logo ~ br { display: none; }
.qme-auth form .row:has(.g-recaptcha) { margin: 0 0 18px !important; }
.qme-auth form .row:has(.g-recaptcha) > [class*="col-"] { padding: 0 !important; }
.qme-auth form .d-flex.justify-content-between { margin-bottom: 14px !important; }
.qme-auth .qme-powered { margin-top: 24px !important; }
.qme-auth .qme-powered img, .qme-auth .img-logooo2 { max-height: none !important; width: 180px !important; max-width: 60vw !important; height: auto !important; }
/* Rows own the 18px gap; a field inside a two-column row adds none (that doubled the gap on
   sign-up). The captcha keeps its full 78px so the button is not pulled up against it. */
.qme-auth form .row > [class*="col-"] > .form-group:last-child, .qme-auth form .row > [class*="col-"] > .form-group { margin-bottom: 0 !important; }
.qme-auth form .row { margin-bottom: 18px !important; }
.qme-auth .g-recaptcha { min-height: 78px; }
.qme-auth h4.text-center, .qme-auth h5.text-center { margin-top: -8px !important; }
/* The captcha's own gap (login's markup leaves the button inside the captcha row, so the row
   rule cannot space them), and no extra margin under the terms checkbox. */
.qme-auth .g-recaptcha { margin-bottom: 18px !important; }
.qme-auth .row:has(.g-recaptcha) { margin-bottom: 0 !important; }
.qme-auth .row:has(.g-recaptcha) .mt-3 { margin-top: 0 !important; }
.qme-auth .cb-container { margin-bottom: 0 !important; }