/*
 * register.css — Register page overlay (com_users view-registration)
 * Injected via addCustomTag in html/com_users/registration/default.php
 * All rules scoped to body.view-registration so zero cross-page risk.
 * NO shared scss touched. php -l clean.
 *
 * Fixes:
 *   REG1  Masthead eyebrow: --color-muted → --color-text-dim
 *   REG2  Auth-foot text: --color-muted → --color-text-dim
 *   REG3  AuthCard border dark: #262945 ($border) → #1C1E38 ($border-soft)
 *   REG4  Strength <meter> inside .auth-card: hide it
 *   REG5  "I do not agree" radios (value=0): hide them
 *   REG6  Mobile eyebrow: 12.5px/1.4px → 11.5px/1.5px
 *   REG7  Mobile H1: 32px → 28px
 *   REG8  Mobile card: background/border/padding/gap stuck at desktop due to !important
 */

/* REG10 — Username field: the .pen SaaS signup (q16Lp) has NO username field
   (Full name / Work email / Password / Confirm password only). Joomla still needs
   a unique username, so the control-group is HIDDEN and auto-filled from the Work
   email by the override's inline script. Hidden (not removed) so the field still
   submits. */
body.view-registration .auth-card #jform_username,
body.view-registration .auth-card .control-group:has(#jform_username) {
  display: none !important;
}

/* REG11 — hide the required `.star` asterisk on field labels (.pen labels carry
   none). Field stays required via the input's own attribute. */
body.view-registration .auth-card .control-label .star,
body.view-registration .auth-card label .star {
  display: none !important;
}

/* REG12 — placeholder colour = .pen field hint #6B7196 dark / #888EA6 light
   ($text-dim), matching login.css L4. */
body.view-registration .auth-card input.form-control::placeholder {
  color: var(--color-text-dim) !important;
  opacity: 1 !important;
}

/* REG13 — Terms row (.pen ojDq6): compact single checkbox + label with links.
   18×18 rounded box (accent-color drops border/radius on native, so redraw it,
   mirroring login.css L7). Label Inter 13 / #A2A8C0 dark / muted light, lh 1.4;
   links = accent. gap 9, top-aligned so the box sits on the first text line. */
body.view-registration .auth-terms {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
}
body.view-registration .auth-terms input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  margin: 1px 0 0 0 !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 5px !important;
  background: var(--color-surface) !important;
  cursor: pointer;
  position: relative;
}
body.view-registration .auth-terms input[type="checkbox"]:checked {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
body.view-registration .auth-terms input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 2px;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
body.view-registration .auth-terms input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(var(--color-primary-rgb) / .25) !important;
}
body.view-registration .auth-terms label {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-muted);
  cursor: pointer;
}
body.view-registration .auth-terms label a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}
body.view-registration .auth-terms label a:hover { text-decoration: underline; }

/* REG16 — WhyNexora band top hairline: .pen Najyh has strokeWidth{top:1}
   (#1C1E38 dark / #ECEEF5 light = border-soft). The shared band scss sets no
   border-top, so the 1px separator between FormSection and the band is missing.
   Add it token-driven (auto dark-flip). Scoped to the register band. */
body.view-registration .sec-feature-grid {
  border-top: 1px solid var(--color-border-soft) !important;
}

/* REG15 — Field ORDER: Joomla's registration fieldset renders name, username,
   password1, password2, email1. The .pen (q16Lp) order is Full name → Work email
   → Password → Confirm password. The fieldset is display:flex column, so re-order
   with `order` (Work email up to position 2). Also HIDE the empty field-spacer
   pseudo-field that adds a stray leading gap. */
body.view-registration .com-users-registration__form fieldset {
  display: flex;
  flex-direction: column;
}
body.view-registration .com-users-registration__form fieldset > .field-spacer {
  display: none !important;
}
body.view-registration .control-group:has(#jform_name)      { order: 1; }
body.view-registration .control-group:has(#jform_email1)    { order: 2; }
body.view-registration .control-group:has(#jform_password1) { order: 3; }
body.view-registration .control-group:has(#jform_password2) { order: 4; }
body.view-registration .control-group:has(#jform_username)  { order: 0; } /* hidden anyway */

/* REG14 — Primary submit button: shared _nexora.scss .btn-primary paints a
   GRADIENT + hover translateY(-1px). .pen Button/Primary (Cfh6P) is a FLAT fill
   (Geist 15/600) with no hover shift. Scoped to the auth card (sitewide gradient
   preserved for marketing CTAs). Mirrors login.css L8. */
body.view-registration .auth-card .btn.btn-primary,
body.view-registration .auth-card button[type="submit"].btn-primary {
  background: var(--color-primary) !important;
  background-image: none !important;
  border-color: var(--color-primary) !important;
  font-family: var(--font-heading) !important;
  box-shadow: none !important;
  transform: none !important;
}
body.view-registration .auth-card .btn.btn-primary:hover,
body.view-registration .auth-card button[type="submit"].btn-primary:hover {
  background: var(--color-primary-hover) !important;
  background-image: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* REG1 — Masthead eyebrow: var(--color-muted) → var(--color-text-dim)
   .pen dark osFQE.ZT4xF fill=#6B7196 / light vHlLz.Bb2hD fill=#888EA6 = $text-dim */
body.view-registration .masthead-eyebrow {
  color: var(--color-text-dim) !important;
}

/* REG2 — Auth-foot "Already have an account?" text: muted → text-dim
   .pen dark pJRMR.Da1Ij fill=#6B7196 / light EmZQ3 fill=#888EA6 = $text-dim */
body.view-registration .auth-foot {
  color: var(--color-text-dim) !important;
}

/* REG3 — AuthCard border dark mode: #262945 ($border) → #1C1E38 ($border-soft)
   .pen osFQE.q16Lp stroke=#1C1E38 (border-soft). Light vHlLz.YL5HL stroke=#ECEEF5 (border-soft) → already correct.
   The base rule uses var(--color-border-soft) which IS correct for light, but
   _nexora.scss auth-card sets border: 1px solid var(--color-border-soft) — let me re-check.
   Actually the base sets --color-border-soft which is ECEEF5 light / 1C1E38 dark.
   But measured dark = #262945 ($border, not border-soft). The base auth-card rule is:
   border: 1px solid var(--color-border-soft)  → should give #1C1E38 dark.
   But measured is #262945 = $border. Possible override from .card BS rule.
   Use explicit token rebind: */
html[data-bs-theme="dark"] body.view-registration .auth-card,
html[data-bs-theme="dark"] body.view-registration .auth-card.card {
  border-color: var(--color-border-soft) !important; /* #1C1E38 dark */
}

/* REG4 — Password strength <meter> visible inside .auth-card
   The existing SCSS hides .password-strength and meter in .edit-card but NOT in .auth-card.
   Joomla renders: <div class="password-group"><input>...<meter id="progress-0"></meter></div> */
body.view-registration .auth-card meter,
body.view-registration .auth-card .password-group meter,
body.view-registration .auth-card #progress-0 {
  display: none !important;
}

/* REG5 — "I do not agree" radio (value=0) should be hidden.
   .pen shows a single compact agree row (no disagree option shown).
   Joomla privacyconsent + terms both render agree(0)/disagree(1) radio pairs.
   The disagree radio is also pre-checked by default which is wrong UX — hide it. */
body.view-registration .auth-card .radio:has(input[value="0"]),
body.view-registration .auth-card input[type="radio"][value="0"],
body.view-registration .auth-card input[id$="privacy1"] ~ *,
body.view-registration .auth-card input[id$="terms1"] ~ * {
  display: none !important;
}
/* Target the radio wrapper directly by value attribute */
body.view-registration .auth-card .radio input[type="radio"][value="0"],
body.view-registration .auth-card .radio input[type="radio"][value="0"] + * {
  display: none !important;
}

/* REG6 — Mobile masthead eyebrow size/tracking
   .pen o0VFML.ERUNe: fontSize=11.5px, letterSpacing=1.5px
   Base mobile block sets 12.5px/1.4px (inherits desktop) */
@media (max-width: 767.98px) {
  body.view-registration .masthead-eyebrow {
    /* .pen o0VFML.ERUNe fill=#3B82F6 → mobile eyebrow is ACCENT (not the muted
       desktop grey), matching login.css L2. */
    color: var(--color-primary) !important;
    font-size: 11.5px !important;
    letter-spacing: 1.5px !important;
  }
}

/* REG7 — Mobile H1 size
   .pen o0VFML.pGY2D: fontSize=28px, letterSpacing=-1px
   Base mobile block sets 32px */
@media (max-width: 767.98px) {
  body.view-registration .t4-masthead-title {
    font-size: 28px !important;
    letter-spacing: -1px !important;
  }
}

/* REG8 — Mobile card: desktop rule uses background: var(--color-card-2) !important
   which blocks the mobile override. Force mobile card to $bg-card ($color-surface)
   with $border and correct padding/gap per .pen o0VFML.jxscR:
   fill=#13142A(dark)/#FFFFFF(light), stroke=#262945(dark)/#E2E6F0(light), pad=24, gap=16 */
@media (max-width: 767.98px) {
  /* LIGHT mobile: keep the ELEVATED grey surface (--color-surface-2 #EEF1F8) so the
     card stays visible on the white page bg (--color-surface=#FFF would vanish). Mirrors login.css L5. */
  body.view-registration .auth-card,
  body.view-registration .auth-card.card {
    background: var(--color-surface-2) !important;
    border-color: var(--color-border) !important;
    padding: 24px !important;
    gap: 16px !important;
  }
  /* DARK mobile: .pen o0VFML fill = #13142A (bg-card = --color-surface). */
  html[data-bs-theme="dark"] body.view-registration .auth-card,
  html[data-bs-theme="dark"] body.view-registration .auth-card.card {
    background: var(--color-surface) !important;
  }
  /* Mobile inputs: .pen o0VFML ENtfH/bvriJ/polDq fill=#101023 ($bg-elev) */
  body.view-registration .auth-card input.form-control,
  body.view-registration .auth-card .auth-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]) {
    background: var(--color-bg-alt) !important; /* --color-bg-alt = $bg-elev = #101023 dark / #F5F6FB light */
    padding: 13px 14px !important;
  }
}

/* REG9 — [FIELD-WIDTH-COLLAPSE] desktop un-cap. The platform default
   .form-control{max-width:240px} caps every input at 240px inside the 460px
   auth-card, so fields don't fill the card (.pen vHlLz FormSection inputs are
   fill_container). register.css only had a mobile bg/padding rule, never a
   width un-cap. Mirror the working pattern in profile.css (PE-W ~L89-111):
   width:100% + max-width:none on the form, card, control-group/controls, and
   every input/select/textarea. Scoped to body.view-registration .auth-card so
   zero cross-page risk. Applies in both themes and all viewports (the 240px cap
   is wrong everywhere). */
body.view-registration .auth-card .auth-form,
body.view-registration .auth-card form.auth-form,
body.view-registration .auth-card .com-users-registration__form {
  width: 100% !important;
  max-width: none !important;
}
body.view-registration .auth-card .control-group,
body.view-registration .auth-card .controls,
body.view-registration .auth-card fieldset {
  width: 100% !important;
  max-width: none !important;
}
body.view-registration .auth-card input.form-control,
body.view-registration .auth-card .auth-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]),
body.view-registration .auth-card select,
body.view-registration .auth-card select.form-select,
body.view-registration .auth-card textarea,
body.view-registration .auth-card textarea.form-control {
  width: 100% !important;
  max-width: none !important;
}