/* ============================================================================
 * auth.css — Login modal hardening + branded auth (warp) pages
 * Token-based (tokens.css). Loaded on every view via theme.config.php
 * AFTER template.css, so rules here win on equal specificity.
 *
 * Scope note: the login modal and the registration/reset HTML-override pages
 * already carry styling in template.css (high specificity: `#nav-modal-login …`,
 * `.register-form .default-register …`). This file therefore only:
 *   1. adds the NEW modal elements (error / password toggle / caps / remember),
 *      scoped under #nav-modal-login so they coexist with the existing rules;
 *   2. brands the genuinely-bare warp pages (/login, reset confirm/complete,
 *      registration complete) via the .cm-auth card.
 * The dated register/reset page refresh is intentionally deferred to Đợt 2
 * (where login+register also merge into a single tabbed modal).
 * ==========================================================================*/

/* ---- shared helper ------------------------------------------------------ */
.cm-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ============================================================================
 * 1. LOGIN MODAL — new elements only (scoped to #nav-modal-login)
 * ==========================================================================*/
#nav-modal-login .cm-login__title {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-900);
  text-align: left;
}
#nav-modal-login .cm-login__sub {
  margin: 0 0 var(--sp-20);
  font-size: var(--fs-14);
  color: var(--c-ink-500);
  text-align: left;
}

/* visible "or" separator (the real social module stays display:none) */
#nav-modal-login .cm-or {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  margin: var(--sp-16) 0;
  color: var(--c-ink-300);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: .04em;
}
#nav-modal-login .cm-or::before,
#nav-modal-login .cm-or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--c-line);
}

/* inline error banner */
.cm-login__error {
  display: none;
  margin: 0 0 var(--sp-16);
  padding: var(--sp-10) var(--sp-12);
  border: 1px solid var(--c-danger-border);
  border-radius: var(--r-8);
  background: var(--c-danger-bg);
  color: var(--c-danger);
  font-size: var(--fs-14);
  text-align: left;
}
.cm-login__error.is-visible { display: block; }

/* password show / hide toggle (sits inside the existing pill input) */
.cm-pass-wrap { position: relative; }
.cm-pass-wrap input { padding-right: 42px !important; }
.cm-pass-toggle {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0; background: none;
  color: var(--c-ink-500);
  cursor: pointer;
}
.cm-pass-toggle:hover { color: var(--c-brand-600); }
.cm-pass-toggle svg { display: block; }
.cm-pass-toggle .icon-eye-off { display: none; }
.cm-pass-toggle.is-on .icon-eye { display: none; }
.cm-pass-toggle.is-on .icon-eye-off { display: block; }

/* caps-lock hint */
.cm-caps-hint {
  display: none;
  margin: 0 0 var(--sp-12);
  font-size: var(--fs-12);
  color: var(--c-warning);
  text-align: left;
}
.cm-caps-hint.is-visible { display: block; }

/* remember-me + forgot row */
#nav-modal-login .cm-login__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  margin: 0 0 var(--sp-16);
}
#nav-modal-login .cm-remember {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  margin: 0;
  font-size: 13px;
  color: var(--c-ink-500);
  cursor: pointer;
}
#nav-modal-login .cm-remember input { width: auto; height: auto; margin: 0; }
#nav-modal-login .cm-login__row .nav-reset-pass {
  margin: 0;
  font-size: 13px;
  color: var(--c-brand-600);
}
#nav-modal-login .cm-login__row .nav-reset-pass:hover { text-decoration: underline; }

/* loading state on submit */
#nav-modal-login .nav-login-form .button.is-loading {
  opacity: .65;
  pointer-events: none;
}

/* header "Sign in" affordance label (desktop toolbar, guest only) */
.login-regis .cm-signin-label {
  margin-left: var(--sp-8);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-700);
  vertical-align: middle;
}

/* ============================================================================
 * 2. BRANDED AUTH PAGES (.cm-auth) — warp /login, reset confirm/complete,
 *    registration complete. These views were otherwise bare (#system form).
 * ==========================================================================*/
.cm-auth {
  max-width: 480px;
  margin: var(--sp-48) auto var(--sp-80);
  padding: 0 var(--sp-16);
}
.cm-auth__card {
  background: var(--c-surface-0);
  border: 1px solid var(--c-line);
  border-radius: var(--r-12);
  box-shadow: var(--shadow-2);
  padding: var(--sp-32) var(--sp-32) var(--sp-24);
}
.cm-auth__title {
  margin: 0 0 var(--sp-8);
  font-size: var(--fs-24);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-900);
}
.cm-auth__sub {
  margin: 0 0 var(--sp-24);
  font-size: var(--fs-14);
  line-height: var(--lh-body, 1.6);
  color: var(--c-ink-500);
}
.cm-auth__benefits { list-style: none; margin: 0 0 var(--sp-24); padding: 0; }
.cm-auth__benefits li {
  position: relative;
  padding-left: var(--sp-24);
  margin: 0 0 var(--sp-8);
  font-size: var(--fs-14);
  color: var(--c-ink-700);
}
.cm-auth__benefits li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--c-success, #16a34a);
  font-weight: var(--fw-bold);
}

.cm-auth__card form { margin: 0; }
.cm-auth__card fieldset { border: 0; margin: 0; padding: 0; }
.cm-auth__card fieldset > p {
  margin: 0 0 var(--sp-16);
  font-size: var(--fs-14);
  color: var(--c-ink-500);
}
.cm-auth__card fieldset > div,
.cm-auth__card form > div { margin: 0 0 var(--sp-16); }
.cm-auth__card label {
  display: block;
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-900);
}
.cm-auth__card input[type="text"],
.cm-auth__card input[type="email"],
.cm-auth__card input[type="password"],
.cm-auth__card input[type="tel"],
.cm-auth__card select,
.cm-auth__card textarea {
  width: 100%;
  min-height: var(--input-min-h);
  padding: var(--input-pad-y) var(--input-pad-x);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  background: var(--input-bg);
  font-size: var(--fs-14);
  color: var(--c-ink-900);
  transition: border-color var(--dur-fast, .15s) ease, box-shadow var(--dur-fast, .15s) ease;
}
.cm-auth__card input:focus,
.cm-auth__card select:focus,
.cm-auth__card textarea:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px rgba(249,115,22,.18);
}
.cm-auth__card button[type="submit"],
.cm-auth__card .button {
  width: 100%;
  min-height: var(--input-min-h);
  margin-top: var(--sp-8);
  border: 0;
  border-radius: var(--btn-radius);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--dur-fast, .15s) ease;
}
.cm-auth__card button[type="submit"]:hover,
.cm-auth__card .button:hover { background: var(--btn-primary-bg-hover); color: var(--btn-primary-text); }

/* /login full page: remember row + secondary links */
.cm-auth__remember {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin: 0 0 var(--sp-16);
}
.cm-auth__remember input { width: auto !important; min-height: 0 !important; margin: 0; }
.cm-auth__remember label { display: inline; margin: 0; font-weight: var(--fw-normal); color: var(--c-ink-500); }
.cm-auth__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-16);
  justify-content: center;
  list-style: none;
  margin: var(--sp-16) 0 0;
  padding: 0;
}
.cm-auth__links li { margin: 0; }
.cm-auth__links a { font-size: var(--fs-14); color: var(--c-brand-600); }
.cm-auth__links a:hover { text-decoration: underline; }

.cm-auth__foot {
  margin-top: var(--sp-24);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-14);
  color: var(--c-ink-500);
  text-align: center;
}
.cm-auth__foot a { color: var(--c-brand-600); font-weight: var(--fw-semibold); }
.cm-auth__foot a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .cm-auth { margin: var(--sp-24) auto var(--sp-48); }
  .cm-auth__card { padding: var(--sp-24) var(--sp-20); }
}

/* ============================================================================
 * 1c. MODAL viewport fit (Đợt 3) — keep the whole card on screen; the body
 *     scrolls internally so the footer/switch links are never clipped.
 * ==========================================================================*/
#nav-modal-login .modal-dialog {
  margin: var(--sp-20) auto;
  max-width: 420px;
}
#nav-modal-login .modal-content {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2 * var(--sp-20));
}
#nav-modal-login .modal-body.cm-authm {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================================
 * 3. REGISTER / RESET / REMIND page refresh (Đợt 3)
 *    Overrides the dated template.css rules (r-4 cards, 25px pill inputs,
 *    240px-wide reset field, grey input bg) with the current brand tokens.
 *    auth.css loads AFTER template.css, so equal-specificity selectors win.
 * ==========================================================================*/
.register-form .default-register,
.login-form .default-login {
  border-radius: var(--r-12);
  box-shadow: var(--shadow-2);
  padding: var(--sp-32) var(--sp-32) var(--sp-24);
  text-align: left;
  margin: var(--sp-40) auto;
  max-width: 480px;
}
.login-form h1,
.login-form h2,
.register-form h1,
.register-form h2,
.reset h1,
.reset h2 {
  font-size: var(--fs-24);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading, 1.2);
  color: var(--c-ink-900);
  margin-bottom: var(--sp-16);
}

/* inputs — register, reset, remind */
#member-registration select#jform_role,
.com_users main input[type=email],
.com_users main input[type=password],
.com_users main input[type=text],
.remind #user-registration input,
.reset #user-registration input {
  background: var(--input-bg);
  color: var(--c-ink-900);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  font-size: var(--fs-14);
  line-height: 1.4;
  min-height: var(--input-min-h);
  padding: var(--input-pad-y) var(--input-pad-x);
  width: 100%;
  transition: border-color var(--dur-fast, .15s) ease, box-shadow var(--dur-fast, .15s) ease;
}
#member-registration select#jform_role:focus,
.com_users main input[type=email]:focus,
.com_users main input[type=password]:focus,
.com_users main input[type=text]:focus,
.remind #user-registration input:focus,
.reset #user-registration input:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px rgba(249,115,22,.18);
}
/* reset/remind row was right-aligned + 370px wide */
.reset #user-registration > div,
.remind #user-registration > div {
  width: 100%;
  max-width: 100%;
  text-align: left;
  margin: 0;
}

/* primary buttons (fix the broken `border-radius:27.var(--r-8)` in template.css) */
.login .login-form .uk-button,
.registration .register-form .uk-button,
.reset .uk-button,
.remind .uk-button {
  border-radius: var(--btn-radius);
  min-height: var(--input-min-h);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-size: var(--fs-16);
  text-transform: none;
  font-weight: var(--fw-semibold);
}

/* social buttons — de-pill, align with the modal's card style */
.login-form .list-quick-social-register { display: flex; flex-direction: column; gap: var(--sp-12); }
.login-form .list-quick-social-register li,
.login-form .list-quick-social-register li.googleslogin,
.login-form .list-quick-social-register li.facebookslogin {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: var(--r-8);
  border: 1px solid var(--c-line);
  background: var(--c-surface-0);
}
.login-form .list-quick-social-register li a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-10);
  min-height: var(--input-min-h);
  padding: var(--sp-10) var(--sp-16);
  color: var(--c-ink-900);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.login-form .list-quick-social-register li.facebookslogin { background: #1877f2; border-color: #1877f2; }
.login-form .list-quick-social-register li.facebookslogin a { color: #fff; }
.login-form .list-quick-social-register li a i { font-size: var(--fs-18); line-height: 1; }

/* "or" separator on the register page */
.login-form .sperate-line { position: relative; margin: var(--sp-20) 0; text-align: center; }
.login-form .sperate-line hr { border: 0; border-top: 1px solid var(--c-line); margin: 0; }
.login-form .sperate-line p { display: inline-block; position: relative; top: -0.72em; margin: 0; padding: 0 var(--sp-12); background: var(--c-surface-0); color: var(--c-ink-300); font-size: var(--fs-12); width: auto; }

/* the top "Already have an account?" line on register */
.default-register .nav-get-pass { font-size: var(--fs-14); color: var(--c-ink-500); }
.default-register .nav-get-pass a { color: var(--c-brand-600); font-weight: var(--fw-semibold); }

/* ----------------------------------------------------------------------------
 * 3b. SIGN-UP password strength meter + live rule checklist (Đợt 4)
 *     Injected by cm-auth.js right after the first password field.
 * --------------------------------------------------------------------------*/
.cm-pw { margin: var(--sp-8) 0 var(--sp-16); }
.cm-pw__meter {
  height: 6px;
  border-radius: 999px;
  background: var(--c-surface-50);
  overflow: hidden;
}
.cm-pw__bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--c-line);
  transition: width var(--dur-fast, .15s) ease, background var(--dur-fast, .15s) ease;
}
.cm-pw--1 .cm-pw__bar { width: 25%;  background: var(--c-pw-weak); }
.cm-pw--2 .cm-pw__bar { width: 50%;  background: var(--c-pw-fair); }
.cm-pw--3 .cm-pw__bar { width: 75%;  background: var(--c-pw-good); }
.cm-pw--4 .cm-pw__bar { width: 100%; background: var(--c-pw-strong); }
.cm-pw__label { margin-top: var(--sp-4); font-size: var(--fs-12); color: var(--c-ink-500); }
.cm-pw__rules {
  list-style: none;
  margin: var(--sp-8) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4) var(--sp-12);
}
.cm-pw__rules li {
  position: relative;
  padding-left: 20px;
  font-size: var(--fs-12);
  line-height: 1.5;
  color: var(--c-ink-300);
}
.cm-pw__rules li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 10px;
  height: 10px;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.cm-pw__rules li.is-met { color: var(--c-success); }
.cm-pw__rules li.is-met::before {
  border-color: var(--c-success);
  background: var(--c-success);
}

/* ============================================================================
 * 1b. MODAL TABS + SOCIAL-FIRST  (Đợt 2)
 * ==========================================================================*/
#nav-modal-login .modal-body.cm-authm { padding-top: var(--sp-24); }

/* tabs */
#nav-modal-login .cm-authm__tabs {
  display: flex;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-20);
  border-bottom: 1px solid var(--c-line);
}
#nav-modal-login .cm-authm__tab {
  flex: 1 1 0;
  padding: var(--sp-12) var(--sp-8);
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-500);
  cursor: pointer;
  transition: color var(--dur-fast, .15s) ease, border-color var(--dur-fast, .15s) ease;
}
#nav-modal-login .cm-authm__tab:hover { color: var(--c-ink-900); }
#nav-modal-login .cm-authm__tab.is-active {
  color: var(--c-brand-600);
  border-bottom-color: var(--c-brand-500);
}

/* social-first buttons */
#nav-modal-login .cm-authm__social {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  margin: 0 0 var(--sp-4);
}
#nav-modal-login .cm-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-10);
  width: 100%;
  min-height: var(--input-min-h);
  padding: var(--sp-10) var(--sp-16);
  border: 1px solid var(--c-line);
  border-radius: var(--r-8);
  background: var(--c-surface-0);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-900);
  cursor: pointer;
  transition: background var(--dur-fast, .15s) ease, border-color var(--dur-fast, .15s) ease, box-shadow var(--dur-fast, .15s) ease;
}
#nav-modal-login .cm-social:hover {
  background: var(--c-surface-50);
  box-shadow: var(--shadow-1);
}
#nav-modal-login .cm-social__icon { flex: 0 0 auto; }
/* Facebook gets its brand fill so the white glyph reads */
#nav-modal-login .cm-social--facebook {
  background: #1877f2;
  border-color: #1877f2;
  color: #fff;
}
#nav-modal-login .cm-social--facebook:hover { background: #1466d0; border-color: #1466d0; }

/* panels */
#nav-modal-login .cm-authm__panel { margin-top: var(--sp-16); }
#nav-modal-login .cm-authm__panel.is-hidden,
#nav-modal-login .cm-authm__social.is-hidden,
#nav-modal-login .cm-authm__tabs.is-hidden { display: none; }

/* the "or" divider in the sign-in panel */
#nav-modal-login .cm-or {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  margin: var(--sp-16) 0;
  color: var(--c-ink-300);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center;
}
#nav-modal-login .cm-or::before,
#nav-modal-login .cm-or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--c-line);
}

/* signup panel copy */
#nav-modal-login .cm-authm__lead {
  margin: 0 0 var(--sp-16);
  font-size: var(--fs-14);
  color: var(--c-ink-500);
}
#nav-modal-login .cm-authm__email-opt {
  margin: var(--sp-16) 0 0;
  padding: var(--sp-12);
  border: 1px dashed var(--c-line);
  border-radius: var(--r-8);
  font-size: var(--fs-13, 13px);
  color: var(--c-ink-500);
  text-align: center;
}
#nav-modal-login .cm-authm__email-opt a { color: var(--c-brand-600); font-weight: var(--fw-semibold); }
#nav-modal-login .cm-authm__email-opt a:hover { text-decoration: underline; }

/* switch line (New here? Create account / Already have an account? Sign in) */
#nav-modal-login .cm-authm__switch {
  margin: var(--sp-20) 0 0;
  padding-top: var(--sp-16);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-14);
  color: var(--c-ink-500);
  text-align: center;
}
#nav-modal-login .cm-authm__switch-link {
  border: 0;
  background: none;
  padding: 0;
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--c-brand-600);
  cursor: pointer;
}
#nav-modal-login .cm-authm__switch-link:hover { text-decoration: underline; }

/* hidden social sources (Google nbsociallogin + Facebook Akeeba anchors) */
#nav-modal-login .cm-authm__sources {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ----------------------------------------------------------------------------
 * 1c. RESET-PASSWORD panel (Đợt 4) — inline reset request without leaving modal.
 *     Inputs/button mirror the pill styling of the sign-in form.
 * --------------------------------------------------------------------------*/
#nav-modal-login .cm-reset-form p { margin: 0 0 var(--sp-12); }
#nav-modal-login .cm-reset-form input[type="email"] {
  width: 100%;
  padding: var(--sp-4) var(--sp-15);
  font-size: var(--fs-12);
  line-height: var(--fs-20);
  border: none;
  border-radius: 30px;
  background: var(--c-surface-50);
  color: var(--c-ink-900);
}
#nav-modal-login .cm-reset-form input[type="email"]:focus {
  background: var(--c-surface-0);
  box-shadow: var(--shadow-1);
  outline: none;
}
#nav-modal-login .cm-reset-form input.button {
  width: 100%;
  margin-top: var(--sp-8);
  padding: var(--sp-8) var(--sp-10);
  border: none;
  border-radius: 30px;
  text-transform: uppercase;
  font-size: var(--fs-12);
  line-height: var(--fs-20);
  background: var(--c-brand-500);
  color: var(--c-surface-0);
  cursor: pointer;
  transition: all var(--dur-slow);
}
#nav-modal-login .cm-reset-form input.button:hover { opacity: .75; }
#nav-modal-login .cm-reset-form input.button:disabled { opacity: .6; cursor: default; }

/* inline reset feedback (aria-live) */
#nav-modal-login .cm-authm__msg {
  display: none;
  margin: 0 0 var(--sp-12);
  padding: var(--sp-10) var(--sp-12);
  border-radius: var(--r-8);
  border: 1px solid transparent;
  font-size: var(--fs-14);
  text-align: left;
}
#nav-modal-login .cm-authm__msg.is-visible { display: block; }
#nav-modal-login .cm-authm__msg.is-ok {
  background: var(--c-success-bg);
  border-color: var(--c-success-border);
  color: var(--c-success);
}
#nav-modal-login .cm-authm__msg.is-error {
  background: var(--c-danger-bg);
  border-color: var(--c-danger-border);
  color: var(--c-danger);
}