/* ============================================================================
   TwilightRun UN Engine — Style Recovery Lock 1.1.13
   Purpose: restore Visualin-like component/module styling after the CSS fidelity
   pass, without weakening the supplied TwilightRun CSS stack.
   ============================================================================ */

/* Keep global page structure stable while allowing cinematic full-width bands. */
html body.un-template-twilightrun,
html body.un-template-twilightrun .body-wrapper,
html body.un-template-twilightrun .body-innerwrapper {
  background: #000 !important;
  color: var(--base-text, #e0e0e0) !important;
  min-height: 100vh !important;
}

html body.un-template-twilightrun .body-wrapper {
  display: block !important;
}

html body.un-template-twilightrun #sp-main-body {
  width: 100% !important;
  min-height: 40vh !important;
  color: var(--base-text, #e0e0e0) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(210,176,85,.08), rgba(0,0,0,0) 42%),
    #000 !important;
}

html body.un-template-twilightrun #sp-main-body > .container,
html body.un-template-twilightrun #sp-main-body > .container > .container-inner {
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body.un-template-twilightrun #sp-main-body > .container > .container-inner > .row.sp-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: clamp(20px, 3vw, 40px) !important;
  margin: 0 auto !important;
  padding: clamp(28px, 4vw, 56px) clamp(16px, 3vw, 32px) !important;
  width: 100% !important;
  --bs-gutter-x: 0 !important;
  --bs-gutter-y: 0 !important;
}

html body.un-template-twilightrun #sp-component {
  min-width: 0 !important;
  float: none !important;
  color: var(--base-text, #e0e0e0) !important;
}

html body.un-template-twilightrun #sp-component.col-lg-12,
html body.un-template-twilightrun #sp-component:not([class*="col-lg-"]) {
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Side columns: never allow unstyled white boxes to appear over dark TRU pages. */
html body.un-template-twilightrun #sp-left,
html body.un-template-twilightrun #sp-right {
  min-width: 0 !important;
}

html body.un-template-twilightrun #sp-left .sp-module,
html body.un-template-twilightrun #sp-right .sp-module {
  color: var(--base-text, #e0e0e0) !important;
  background: rgba(8, 10, 16, .68) !important;
  border: 1px solid rgba(0,234,255,.18) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 0 18px rgba(0,0,0,.45), 0 0 18px rgba(0,234,255,.08) !important;
}

html body.un-template-twilightrun #sp-left .sp-module:empty,
html body.un-template-twilightrun #sp-right .sp-module:empty,
html body.un-template-twilightrun #sp-left .sp-module .sp-module-content:empty,
html body.un-template-twilightrun #sp-right .sp-module .sp-module-content:empty {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Joomla Users / Login / Profile recovery. */
html body.un-template-twilightrun.com_users #sp-main-body,
html body.un-template-twilightrun[class*="com_users"] #sp-main-body {
  padding-top: 0 !important;
}

html body.un-template-twilightrun.com_users #sp-left,
html body.un-template-twilightrun.com_users #sp-right,
html body.un-template-twilightrun[class*="com_users"] #sp-left,
html body.un-template-twilightrun[class*="com_users"] #sp-right {
  display: none !important;
}

html body.un-template-twilightrun.com_users #sp-component,
html body.un-template-twilightrun[class*="com_users"] #sp-component {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
}

html body.un-template-twilightrun.com_users #sp-component .com-users-login.login,
html body.un-template-twilightrun.com_users #sp-component .login,
html body.un-template-twilightrun.com_users #sp-component .profile,
html body.un-template-twilightrun.com_users #sp-component .profile-edit,
html body.un-template-twilightrun[class*="com_users"] #sp-component .com-users-login.login,
html body.un-template-twilightrun[class*="com_users"] #sp-component .login,
html body.un-template-twilightrun[class*="com_users"] #sp-component .profile,
html body.un-template-twilightrun[class*="com_users"] #sp-component .profile-edit {
  position: relative !important;
  max-width: 980px !important;
  margin: clamp(28px, 5vw, 70px) auto !important;
  padding: clamp(24px, 4vw, 54px) !important;
  background: linear-gradient(145deg, rgba(40,42,48,.86), rgba(12,14,20,.92)) !important;
  border-left: 4px solid rgba(210,176,85,.65) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 0 24px rgba(0,0,0,.7), 0 0 24px rgba(0,234,255,.10) !important;
  color: #e8ecf1 !important;
  overflow: visible !important;
}

html body.un-template-twilightrun.com_users #sp-component .control-group,
html body.un-template-twilightrun.com_users #sp-component .form-group,
html body.un-template-twilightrun.com_users #sp-component .mb-3,
html body.un-template-twilightrun[class*="com_users"] #sp-component .control-group,
html body.un-template-twilightrun[class*="com_users"] #sp-component .form-group,
html body.un-template-twilightrun[class*="com_users"] #sp-component .mb-3 {
  display: block !important;
  width: 100% !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  clear: both !important;
}

html body.un-template-twilightrun.com_users #sp-component .control-label,
html body.un-template-twilightrun.com_users #sp-component .controls,
html body.un-template-twilightrun[class*="com_users"] #sp-component .control-label,
html body.un-template-twilightrun[class*="com_users"] #sp-component .controls {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  display: block !important;
}

html body.un-template-twilightrun.com_users #sp-component label,
html body.un-template-twilightrun[class*="com_users"] #sp-component label {
  display: block !important;
  color: #d9e3ea !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  margin: 0 0 7px !important;
  opacity: .95 !important;
}

html body.un-template-twilightrun.com_users #sp-component input[type="text"],
html body.un-template-twilightrun.com_users #sp-component input[type="email"],
html body.un-template-twilightrun.com_users #sp-component input[type="password"],
html body.un-template-twilightrun.com_users #sp-component input[type="search"],
html body.un-template-twilightrun.com_users #sp-component select,
html body.un-template-twilightrun.com_users #sp-component textarea,
html body.un-template-twilightrun[class*="com_users"] #sp-component input[type="text"],
html body.un-template-twilightrun[class*="com_users"] #sp-component input[type="email"],
html body.un-template-twilightrun[class*="com_users"] #sp-component input[type="password"],
html body.un-template-twilightrun[class*="com_users"] #sp-component input[type="search"],
html body.un-template-twilightrun[class*="com_users"] #sp-component select,
html body.un-template-twilightrun[class*="com_users"] #sp-component textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 46px !important;
  background: rgba(12,14,20,.96) !important;
  color: #e8ecf1 !important;
  border: 1px solid rgba(0,234,255,.35) !important;
  border-radius: 6px !important;
  box-shadow: inset 0 0 12px rgba(0,0,0,.48) !important;
  outline: none !important;
}

html body.un-template-twilightrun.com_users #sp-component .password-group,
html body.un-template-twilightrun.com_users #sp-component .password-group > .input-group,
html body.un-template-twilightrun[class*="com_users"] #sp-component .password-group,
html body.un-template-twilightrun[class*="com_users"] #sp-component .password-group > .input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  gap: 0 !important;
}

html body.un-template-twilightrun.com_users #sp-component .password-group input,
html body.un-template-twilightrun[class*="com_users"] #sp-component .password-group input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  border-radius: 6px 0 0 6px !important;
}

html body.un-template-twilightrun.com_users #sp-component .input-password-toggle,
html body.un-template-twilightrun[class*="com_users"] #sp-component .input-password-toggle {
  flex: 0 0 46px !important;
  width: 46px !important;
  height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(0,234,255,.35) !important;
  border-left: 0 !important;
  border-radius: 0 6px 6px 0 !important;
  background: rgba(18,18,25,.96) !important;
  color: #00eaff !important;
}

html body.un-template-twilightrun.com_users #sp-component .btn,
html body.un-template-twilightrun[class*="com_users"] #sp-component .btn {
  min-height: 46px !important;
  border-radius: 7px !important;
  font-family: 'Orbitron', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
}

html body.un-template-twilightrun.com_users #sp-component .btn-primary,
html body.un-template-twilightrun[class*="com_users"] #sp-component .btn-primary {
  background: linear-gradient(180deg, #ffd65c, #a98225) !important;
  border: 1px solid rgba(255,214,92,.62) !important;
  color: #06080c !important;
  box-shadow: 0 0 16px rgba(255,214,92,.28) !important;
}

html body.un-template-twilightrun.com_users #sp-component .plg_system_webauthn_login_button,
html body.un-template-twilightrun[class*="com_users"] #sp-component .plg_system_webauthn_login_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 85% !important;
  min-height: 52px !important;
  margin: 18px auto !important;
  padding: 0 24px !important;
  background: linear-gradient(180deg, rgba(210,176,85,.25), rgba(120,90,25,.35)) !important;
  border: 1px solid rgba(210,176,85,.38) !important;
  border-radius: 8px !important;
  color: #d2b055 !important;
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  box-shadow: inset 0 0 14px rgba(0,0,0,.5), 0 0 18px rgba(210,176,85,.12) !important;
}

html body.un-template-twilightrun.com_users #sp-component .plg_system_webauthn_login_button svg,
html body.un-template-twilightrun.com_users #sp-component .plg_system_webauthn_login_button img,
html body.un-template-twilightrun.com_users #sp-component .plg_system_webauthn_login_button i,
html body.un-template-twilightrun[class*="com_users"] #sp-component .plg_system_webauthn_login_button svg,
html body.un-template-twilightrun[class*="com_users"] #sp-component .plg_system_webauthn_login_button img,
html body.un-template-twilightrun[class*="com_users"] #sp-component .plg_system_webauthn_login_button i {
  display: none !important;
}

/* OSM/Membership recovery: center the component and restore plan/table styling. */
html body.un-template-twilightrun.com_osmembership #sp-main-body > .container > .container-inner > .row.sp-row,
html body.un-template-twilightrun[class*="com_osmembership"] #sp-main-body > .container > .container-inner > .row.sp-row {
  max-width: 1240px !important;
}

html body.un-template-twilightrun.com_osmembership #sp-component,
html body.un-template-twilightrun[class*="com_osmembership"] #sp-component {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body.un-template-twilightrun #sp-component .osm-container {
  padding: clamp(20px, 3vw, 32px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body.un-template-twilightrun #sp-component .osm-container table,
html body.un-template-twilightrun #sp-component .osm-container .table {
  width: 100% !important;
  color: #e8ecf1 !important;
  background: rgba(8,10,16,.74) !important;
  border-color: rgba(0,234,255,.24) !important;
}

html body.un-template-twilightrun #sp-component .osm-container th,
html body.un-template-twilightrun #sp-component .osm-container td {
  color: #e8ecf1 !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* Footer safety: keep footer content inside the footer grid instead of floating over content. */
html body.un-template-twilightrun #sp-footer,
html body.un-template-twilightrun #sp-bottom {
  clear: both !important;
  background: rgba(0,0,0,.84) !important;
  color: #cfcfcf !important;
}

html body.un-template-twilightrun #sp-footer > .container,
html body.un-template-twilightrun #sp-bottom > .container {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body.un-template-twilightrun #sp-footer ul.menu,
html body.un-template-twilightrun #sp-footer ul.nav,
html body.un-template-twilightrun #sp-bottom ul.menu,
html body.un-template-twilightrun #sp-bottom ul.nav {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 991.98px) {
  html body.un-template-twilightrun #sp-main-body > .container > .container-inner > .row.sp-row {
    display: block !important;
  }
  html body.un-template-twilightrun #sp-component,
  html body.un-template-twilightrun #sp-left,
  html body.un-template-twilightrun #sp-right {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}


/* ==========================================================================
   TwilightRun UN Engine — Header Placeholder Cleanup 1.1.14
   Purpose: remove empty icon/placeholder box before the login control while
   preserving the native login SVG and red/green status dot.
   ========================================================================== */

html body.un-template-twilightrun #sp-header .sp-sign-in::before,
html body.un-template-twilightrun #menu-right .sp-sign-in::before,
html body.un-template-twilightrun #sp-header .sp-user-trigger::before,
html body.un-template-twilightrun #menu-right .sp-user-trigger::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.un-template-twilightrun #menu-right .sp-sign-in > i:empty,
html body.un-template-twilightrun #menu-right .sp-sign-in > span:empty,
html body.un-template-twilightrun #menu-right .sp-sign-in > .sp-user-icon:empty,
html body.un-template-twilightrun #menu-right .sp-sign-in > .icon:empty,
html body.un-template-twilightrun #menu-right .sp-sign-in > .fa:empty,
html body.un-template-twilightrun #menu-right .sp-sign-in > .far:empty,
html body.un-template-twilightrun #menu-right .sp-sign-in > .fas:empty {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Preserve the real login graphic. */
html body.un-template-twilightrun #menu-right .sp-sign-in .sp-user-icon,
html body.un-template-twilightrun #menu-right .sp-sign-in .sp-user-icon svg,
html body.un-template-twilightrun #menu-right .sp-sign-in .tru-user-svg {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Keep dot after text/icon and do not let it look like a placeholder box. */
html body.un-template-twilightrun #menu-right .sp-sign-in .sp-login-status-dot {
  order: 99 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 999px !important;
  background-clip: padding-box !important;
}