/* ============================================================================
   ja_voyara — Auth pages (Login + Register) overlay
   .pen: Login VU0Hy / igLZ4 / o0SuhY · Register ax3mr / o4IjIa / F2TkLv
   Loaded via the com_users override's WebAssetManager (NOT index.php) —
   per [RACE-FREE-OVERLAY-LOAD]. Per-page bundles load BEFORE template.css in the
   T4 optimize pass (P69) → same-spec overrides use !important.
   var-driven so dark auto-remaps; explicit html.t4-dark rules only where a
   base/BS rule must be beaten (P36 fields, P44 .btn-secondary, P52 selects).
   ========================================================================= */

/* ---- Auth split section ------------------------------------------------- */
.voy-auth { background: var(--voy-bg, #FAF6F0); }
.voy-auth__row {
  display: flex;
  align-items: stretch;
  min-height: 760px;
}
.voy-auth__form-side {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 48px;
}
.voy-auth--register .voy-auth__form-side { padding: 64px 48px; }

.voy-auth__image-side {
  flex: 0 0 620px;
  width: 620px;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  min-height: 760px;
}
/* Register row + image-side: .pen height = 820 (taller card, more fields).
   The live card is taller than .pen spec due to Joomla field heights — the
   image-side stretches to fill the flex-row anyway (align-items:stretch), so
   min-height just ensures it doesn't look short if the card is somehow shorter. */
.voy-auth--register .voy-auth__row { min-height: 820px; }
.voy-auth--register .voy-auth__image-side { min-height: 820px; }

/* ---- VW full-bleed escape for Login + Register pages (P29 trick) --------
   .voy-auth and .voy-auth-benefits sit inside .t4-col.col-md which constrains
   them to ~1108px. The .pen shows them at full 1440px viewport width. Escape
   using the same negative-margin vw trick used in auth-recover.css for Reset/Remind.
   Body classes: view-login (item-260) · view-registration (item-261). */
body.view-login .voy-auth,
body.view-registration .voy-auth,
body.view-login .voy-auth-benefits,
body.view-registration .voy-auth-benefits {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
}

/* Remove sticky-header padding-top gap when masthead is hidden (P58) */
body.view-login .t4-main-body,
body.view-registration .t4-main-body {
  padding-top: 0 !important;
}
.voy-auth__image-scrim {
  position: absolute; inset: 0;
  background: #16100B99;
}
.voy-auth__image-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 16px;
  padding: 48px;
}
.voy-auth__quote {
  color: #FFFFFF;
  font-family: var(--voy-font-head, "Playfair Display"), serif;
  font-size: 28px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
}
.voy-auth__quote-by {
  color: #FFFFFFCC;
  font-family: var(--voy-font-body, "Inter"), sans-serif;
  font-size: 14px;
  margin: 0;
}

/* ---- Form card ---------------------------------------------------------- */
.voy-auth__card {
  width: 100% !important;
  max-width: 420px !important;   /* beat base .login-wrap / .com-users-login width (~400px) */
  background: var(--voy-surface, #FFFFFF);
  border: 1px solid var(--voy-border, #E5DCD0);
  border-radius: 22px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0 auto;
}
.voy-auth--register .voy-auth__card { max-width: 440px !important; gap: 20px; }

/* hide T4 masthead + breadcrumb + page heading on auth pages (.pen card head is the title) */
body.view-login #t4-masthead,
body.view-registration #t4-masthead,
body.view-login .t4-masthead,
body.view-registration .t4-masthead,
body.view-login .t4-breadcrumbs,
body.view-registration .t4-breadcrumbs,
body.view-login .page-header,
body.view-registration .page-header { display: none !important; }

.voy-auth__head { display: flex; flex-direction: column; gap: 8px; }
.voy-auth__eyebrow {
  color: var(--voy-primary, #C2562F);
  font-family: var(--voy-font-mono, "Geist Mono"), monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
}
.voy-auth__title {
  color: var(--voy-heading, #1A1512);
  font-family: var(--voy-font-head, "Playfair Display"), serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}
.voy-auth__sub {
  color: var(--voy-muted, #8A7E72);
  font-family: var(--voy-font-body, "Inter"), sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

/* ---- Fields ------------------------------------------------------------- */
/* [FIELD-WIDTH-COLLAPSE] (P36): force the field/control-group/controls full-width
   so the label+controls never collapse to a horizontal split (controls→~40px on
   mobile). Stack label over controls; controls fills the card. */
.voy-auth__card .control-group,
.voy-auth__card .voy-auth__field { margin-bottom: 0; }
.voy-auth__field {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 7px;
  width: 100% !important;
  margin-bottom: 0;
}
.voy-auth__field > .controls,
.voy-auth__card .controls {
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 100% !important;
  margin: 0 !important;
}
.voy-auth__field > label,
.voy-auth__field > .control-label { width: 100% !important; flex: 0 0 auto !important; }

/* labels (Joomla wraps the real <label> inside .control-label div — do NOT add another) */
.voy-auth__card .control-label,
.voy-auth__card .control-label label,
.voy-auth__field > label {
  display: block;
  color: var(--voy-text, #2B2420);
  font-family: var(--voy-font-body, "Inter"), sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  margin: 0 0 7px 0 !important;
  padding: 0 !important;
}
.voy-auth__card .controls { margin: 0; }

/* required asterisk — design has none */
.voy-auth__card .star,
.voy-auth__card label .required { display: none !important; }

/* inputs — full width, beat P36 .form-control{max-width:240px} */
.voy-auth__card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.voy-auth__card select,
.voy-auth__card textarea {
  width: 100% !important;
  max-width: none !important;
  display: block;
  background: var(--voy-bg, #FAF6F0) !important;
  border: 1px solid var(--voy-border, #E5DCD0) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  color: var(--voy-text, #2B2420) !important;
  font-family: var(--voy-font-body, "Inter"), sans-serif !important;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.4;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.voy-auth__card input::placeholder,
.voy-auth__card textarea::placeholder {
  color: var(--voy-muted, #8A7E72);
  opacity: 1;
}

/* focus ring — beat BS .form-control:focus (+is-valid / was-validated valid).
   P69: auth.css bundles BEFORE template.css → !important alone ties on source
   order and loses; the .voy-auth section scope raises specificity to win. */
.voy-auth .voy-auth__card input.form-control:focus,
.voy-auth .voy-auth__card input:focus,
.voy-auth .voy-auth__card select:focus,
.voy-auth .voy-auth__card textarea:focus,
.voy-auth .voy-auth__card .form-control.is-valid:focus,
.voy-auth .voy-auth__card .was-validated .form-control:valid:focus,
.voy-auth .voy-auth__card .form-control:valid:focus {
  border-color: var(--voy-primary, #C2562F) !important;
  box-shadow: 0 0 0 3px rgba(194, 86, 47, 0.18) !important;
  outline: 0 !important;
}

/* ---- Options row (remember + forgot) ------------------------------------ */
.voy-auth__options {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.voy-auth__remember {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  color: var(--voy-text, #2B2420);
  font-family: var(--voy-font-body, "Inter"), sans-serif;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
}
/* native-checkbox redraw: accent-color drops border/radius, so appearance:none + redraw */
.voy-auth__remember input[type="checkbox"],
.voy-auth__card .form-check-input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex: 0 0 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: var(--voy-bg, #FAF6F0);
  border: 1px solid var(--voy-border, #E5DCD0) !important;
  border-radius: 4px !important;
  cursor: pointer;
  position: relative;
  transition: background .12s ease, border-color .12s ease;
}
.voy-auth__remember input[type="checkbox"]:checked,
.voy-auth__card .form-check-input[type="checkbox"]:checked {
  background: var(--voy-primary, #C2562F);
  border-color: var(--voy-primary, #C2562F) !important;
}
.voy-auth__remember input[type="checkbox"]:checked::after,
.voy-auth__card .form-check-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);
}
.voy-auth__remember input[type="checkbox"]:focus-visible,
.voy-auth__card .form-check-input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(194, 86, 47, 0.18);
  outline: 0;
}
.voy-auth__forgot {
  color: var(--voy-primary, #C2562F);
  font-family: var(--voy-font-body, "Inter"), sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.voy-auth__forgot:hover { text-decoration: underline; }

/* ---- Terms row (register) ---------------------------------------------- */
.voy-auth__terms {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
}
.voy-auth__terms label,
.voy-auth__terms .voy-auth__terms-text {
  color: var(--voy-muted, #8A7E72) !important;
  font-family: var(--voy-font-body, "Inter"), sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  cursor: pointer;
}
.voy-auth__terms a { color: var(--voy-primary, #C2562F); text-decoration: none; }
.voy-auth__terms a:hover { text-decoration: underline; }

/* ---- Submit button (jtXPw primary) ------------------------------------- */
.voy-auth__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Breathing room above the primary CTA — the options/terms row above it
     otherwise sits flush against the button (0px gap) and reads as cramped.
     Slightly larger than the 18px field rhythm to set the CTA apart. */
  margin-top: 24px;
  border: 0;
  border-radius: 9999px;
  background: var(--voy-primary, #C2562F) !important;
  color: #FFFFFF !important;
  font-family: var(--voy-font-body, "Inter"), sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease;
}
.voy-auth__submit:hover { background: var(--voy-primary-hover, #A6451F) !important; }

/* ---- Divider ----------------------------------------------------------- */
.voy-auth__divider {
  display: flex;
  align-items: center;
  gap: 12px;
}
.voy-auth__divider::before,
.voy-auth__divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--voy-border, #E5DCD0);
}
.voy-auth__divider span {
  color: var(--voy-muted, #8A7E72);
  font-family: var(--voy-font-body, "Inter"), sans-serif;
  font-size: 12px;
  font-weight: 400;
}

/* ---- Social stubs ------------------------------------------------------ */
.voy-auth__social { display: flex; gap: 12px; }
.voy-auth__social-btn {
  flex: 1 1 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--voy-bg, #FAF6F0);
  border: 1px solid var(--voy-border, #E5DCD0);
  border-radius: 9999px;
  padding: 12px;
  color: var(--voy-text, #2B2420);
  font-family: var(--voy-font-body, "Inter"), sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.voy-auth__social-btn:hover { border-color: var(--voy-muted, #8A7E72); }
.voy-auth__social-btn svg { width: 17px; height: 17px; stroke: currentColor; }

/* ---- Switch link (register/login) -------------------------------------- */
.voy-auth__switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: var(--voy-font-body, "Inter"), sans-serif;
  font-size: 14px;
}
.voy-auth__switch-q { color: var(--voy-muted, #8A7E72); }
.voy-auth__switch a { color: var(--voy-primary, #C2562F); font-weight: 600; text-decoration: none; }
.voy-auth__switch a:hover { text-decoration: underline; }

/* hide stock cancel button + other-links list (replaced by designed switch/forgot) */
.voy-auth__card .com-users-registration__cancel,
.voy-auth__card .login-submit + .login-submit { display: none; }

/* ---- Benefits band (k8rcn / DehZr) ------------------------------------- */
.voy-auth-benefits {
  background: var(--voy-elevated, #F2EBE1);
  padding: 72px 48px;
}
.voy-auth-benefits__inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}
.voy-auth-benefits__head {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 620px; text-align: center;
}
.voy-auth-benefits__eyebrow {
  color: var(--voy-primary, #C2562F);
  font-family: var(--voy-font-mono, "Geist Mono"), monospace;
  font-size: 12px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase;
  margin: 0;
}
.voy-auth-benefits__title {
  color: var(--voy-heading, #1A1512);
  font-family: var(--voy-font-head, "Playfair Display"), serif;
  font-size: 34px; font-weight: 700; line-height: 1.15; text-align: center;
  margin: 0;
}
.voy-auth-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}
.voy-auth-benefit {
  background: var(--voy-surface, #FFFFFF);
  border: 1px solid var(--voy-border, #E5DCD0);
  border-radius: 22px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.voy-auth-benefit__ico {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(194, 86, 47, 0.10);
  color: var(--voy-primary, #C2562F);
}
.voy-auth-benefit__ico svg { width: 22px; height: 22px; stroke: currentColor; }
.voy-auth-benefit__title {
  color: var(--voy-heading, #1A1512);
  font-family: var(--voy-font-head, "Playfair Display"), serif;
  font-size: 20px; font-weight: 700; margin: 0;
}
.voy-auth-benefit__desc {
  color: var(--voy-muted, #8A7E72);
  font-family: var(--voy-font-body, "Inter"), sans-serif;
  font-size: 14px; line-height: 1.6; margin: 0;
}

/* ---- Dark explicit (where base/BS/vendor must be beaten) ----------------
   All --voy-* tokens flip in darkmode.css (primary #D86A3F, text #E8DFD4,
   muted #9C9085, bg #15110E, surface #211B16, border #352C24), so the
   token-driven rules above auto-remap. We need explicit dark scope where
   a base/BS !important rule must be re-beaten. */
html.t4-dark .voy-auth .voy-auth__card input:focus,
html.t4-dark .voy-auth .voy-auth__card select:focus,
html.t4-dark .voy-auth .voy-auth__card textarea:focus,
html.t4-dark .voy-auth .voy-auth__card .form-control.is-valid:focus {
  border-color: var(--voy-primary) !important;       /* #D86A3F in dark */
  box-shadow: 0 0 0 3px rgba(216, 106, 63, 0.22) !important;
}

/* DARK — submit button: .pen dark fill #D86A3F (token --voy-primary flips in darkmode.css
   but auth.css loads BEFORE template.css in optimize pass so !important on background here
   wins over darkmode.css which uses var(--voy-primary) without !important on .voy-auth__submit) */
html.t4-dark .voy-auth .voy-auth__submit {
  background: #D86A3F !important;
}
html.t4-dark .voy-auth .voy-auth__submit:hover {
  background: #C2562F !important;
}

/* DARK — social buttons: .pen dark fill #15110E, stroke #352C24, text #E8DFD4
   (token-driven .voy-bg / .voy-border / .voy-text do NOT auto-remap because the social btn
   has explicit light fallbacks in its base rule that beat the var() in dark; need explicit scope) */
html.t4-dark .voy-auth .voy-auth__social-btn {
  background: #15110E !important;
  border-color: #352C24 !important;
  color: #E8DFD4 !important;
}
html.t4-dark .voy-auth .voy-auth__social-btn:hover {
  border-color: #9C9085 !important;
}

/* DARK — all auth card checkboxes idle state (unchecked): bg #15110E, border #352C24
   Covers: remember-me (.voy-auth__remember) AND terms/ToS (.voy-auth__terms).
   Scope to :not(:checked) so the !important idle bg does NOT clobber the
   checked-state primary fill below (else checked box stays dark-empty in dark). */
html.t4-dark .voy-auth .voy-auth__remember input[type="checkbox"]:not(:checked),
html.t4-dark .voy-auth .voy-auth__terms input[type="checkbox"]:not(:checked),
html.t4-dark .voy-auth .voy-auth__card .form-check-input[type="checkbox"]:not(:checked) {
  background: #15110E !important;
  border-color: #352C24 !important;
}
/* DARK — checked state: primary fill #D86A3F (matches dark --voy-primary), white tick.
   Needs !important + the same triple scope to beat the idle rule's specificity chain. */
html.t4-dark .voy-auth .voy-auth__remember input[type="checkbox"]:checked,
html.t4-dark .voy-auth .voy-auth__terms input[type="checkbox"]:checked,
html.t4-dark .voy-auth .voy-auth__card .form-check-input[type="checkbox"]:checked {
  background: #D86A3F !important;
  border-color: #D86A3F !important;
}

/* P36.8 / P44: weld + neutralise the com_users password-toggle (icomoon eye in a
   bare BS .btn-secondary). The .pen shows a clean password field; we keep
   Joomla's functional toggle but weld it INTO the input and strip the BS grey. */
.voy-auth__card .password-group .input-group { display: flex; align-items: stretch; flex-wrap: nowrap; }
.voy-auth__card .password-group .input-group > input {
  flex: 1 1 auto;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: 0 !important;
}
.voy-auth__card .input-password-toggle,
.voy-auth__card .password-group .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  width: 46px;
  min-width: 46px;
  padding: 0 !important;
  background: var(--voy-bg, #FAF6F0) !important;
  border: 1px solid var(--voy-border, #E5DCD0) !important;
  border-left: 0 !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  color: var(--voy-muted, #8A7E72) !important;
  box-shadow: none !important;
}
html.t4-dark .voy-auth__card .input-password-toggle,
html.t4-dark .voy-auth__card .password-group .btn-secondary {
  background: var(--voy-bg, #15110E) !important;
  border-color: var(--voy-border, #352C24) !important;
  color: var(--voy-muted, #9C9085) !important;
}

/* Joomla client validation injects <span.form-control-feedback> INSIDE the label
   ("Please fill in this field") unstyled → it glues to the label text. Render it as
   a proper small danger message on its own line BELOW the label, in terracotta,
   so it never concatenates. The .invalid label keeps its normal color.
   (Generalized to match auth-recover.css per the orchestrator OPEN item.) */
.voy-auth__card .control-label .form-control-feedback,
.voy-auth__field label .form-control-feedback {
  display: block !important;
  margin-top: 6px !important;
  font-family: var(--voy-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: #C2562F !important;            /* danger = primary terracotta */
}
.voy-auth__card label.invalid,
.voy-auth__card .control-label.invalid label,
.voy-auth__field label.invalid { color: inherit !important; }
html.t4-dark .voy-auth__card .control-label .form-control-feedback,
html.t4-dark .voy-auth__field label .form-control-feedback {
  color: #D86A3F !important;            /* dark primary terracotta */
}

/* Hide password "Minimum Requirements" hint + strength meter/bar + output element.
   The .pen register card shows NO hint text and NO strength bar below the password input.
   Joomla's plg_user_password injects a <meter>, <output>, and hint <div> — suppress all. */
.voy-auth__card .password-group .small,
.voy-auth__card .controls .small.text-muted,
.voy-auth__card [id$="-rules"],
.voy-auth__card .password-counter,
.voy-auth__card .registration-rules,
.voy-auth__card small.form-text,
.voy-auth__card progress,
.voy-auth__card meter,
.voy-auth__card output,
.voy-auth__card .password-strength-bar,
.voy-auth__card [class*="password-strength"],
.voy-auth__card .controls progress { display: none !important; }

/* Force password input always visible — Joomla's js-password-strength JS toggles
   display on it; we beat the inline style with !important so it stays shown.
   The eye-toggle still works (it hides/shows the text input variant), but since the
   .pen shows a plain password field we keep type=password always visible. */
.voy-auth__card .password-group input[type="password"],
.voy-auth__card .password-group input[type="text"] {
  display: block !important;
  flex: 1 1 auto !important;
}

/* ---- Mobile (≤991 stack image below; ≤767 single-col benefits) ---------
   .pen mobile frame o0SuhY (Login) / F2TkLv (Register):
   Form Side padding [40,20,56,20] (top:40 right:20 bottom:56 left:20)
   Card padding: 24, gap: 20
   Benefits (A4mbdL): padding [56,20] */
@media (max-width: 991.98px) {
  .voy-auth__row { flex-direction: column; min-height: 0; }
  /* .pen form-side padding top:40, right:20, bottom:56, left:20 */
  .voy-auth__form-side { padding: 40px 20px 56px; flex-basis: auto; }
  .voy-auth--register .voy-auth__form-side { padding: 36px 20px 40px; }
  /* .pen mobile (o0SuhY / F2TkLv) drops the testimonial image panel entirely */
  .voy-auth__image-side { display: none; }
}
@media (max-width: 767.98px) {
  /* .pen mobile card: padding 24, gap 20 */
  .voy-auth__card { padding: 24px; max-width: none; gap: 20px; }
  .voy-auth--register .voy-auth__card { padding: 24px; gap: 20px; }
  .voy-auth__title { font-size: 28px; }
  /* .pen mobile benefits: padding [56,20] */
  .voy-auth-benefits { padding: 56px 20px; }
  .voy-auth-benefits__grid { grid-template-columns: 1fr; gap: 16px; }
  .voy-auth-benefits__title { font-size: 28px; }
}