/* =========================================================
   TRU — CLEAN CONSOLIDATED STYLES (no duplicates / conflicts)
   Keeps: Tech-Section panels, OSM 2-up plans, login/profile polish,
   timezone Fancy Select, FA icons, password-row alignment.
========================================================= */

/* ---------- 0) GLOBAL KNOBS ---------- */
:root{
  --tru-pass-h: 44px;
  --tru-pass-fs: 16px;
  --tru-cyan: #00eaff;
  --tru-gold: #d2b055;
  --tru-panel: rgba(15,15,22,0.95);
  --tru-cell: rgba(18,18,25,0.95);
  --tru-bdr: rgba(0,234,255,0.30);
  --tru-bdr-strong: rgba(0,234,255,0.40);
}

html, body { height: 100%; }
.body-wrapper { min-height: 100vh; display: flex; flex-direction: column; }
#sp-main-body { flex: 1 0 auto; }
body.com_users #sp-main-body,
body.com_osmembership #sp-main-body { padding-top: 40px !important; }

/* ---------- 1) TECH-SECTION PANELS (single source of truth) ---------- */
body.com_users #sp-component .logoutmembership-page,
body.com_users #sp-component .profile-page,
body.com_users #sp-component .registration-page,
body.com_users.view-profile #sp-component .profile,
body.com_users.view-profile #sp-component .profile-edit,
body.com_users.view-login .com-users-login.login,
body.com_osmembership #sp-component .osm-container,
body.com_osmembership #os_form,
body.com_osmembership #osm_login_form {
  position: relative !important;
  background: linear-gradient(145deg, rgba(40,42,48,.90), rgba(22,24,30,.88)) !important;
  border-left: 4px solid rgba(210,176,85,.65) !important;
  border-radius: 10px !important;
  color: #e0e0e0 !important;
  box-shadow: inset 0 0 20px rgba(0,0,0,.6), 0 0 20px rgba(210,176,85,.10) !important;
  background-clip: padding-box;
  overflow: visible !important;
}
body.com_users #sp-component .logoutmembership-page::before,
body.com_users #sp-component .profile-page::before,
body.com_users #sp-component .registration-page::before,
body.com_users.view-profile #sp-component .profile::before,
body.com_users.view-profile #sp-component .profile-edit::before,
body.com_users.view-login .com-users-login.login::before,
body.com_osmembership #sp-component .osm-container::before,
body.com_osmembership #os_form::before,
body.com_osmembership #osm_login_form::before {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: 4px; pointer-events: none;
  background: linear-gradient(to bottom, #d2b055, #8f7c35);
  opacity: .55; box-shadow: 0 0 14px rgba(210,176,85,.4);
}

/* ---------- 2) OSM CONTAINMENT (width) ---------- */
body.com_osmembership #sp-component { width: 100% !important; max-width: 1100px !important; margin: 0 auto !important; }
body.com_osmembership #sp-main-body .row { gap: 40px !important; }
body.com_osmembership #sp-right { max-width: 380px; }
body.com_osmembership #sp-component .osm-container,
body.com_osmembership #sp-component .osm-page,
body.com_osmembership #sp-component .osm-plans { max-width: 100%; margin-left: auto; margin-right: auto; }

/* ---------- 3) OSM PRICING: EXACTLY 2-UP (kept) ---------- */
body.com_osmembership #osm-plans-list-pricing-table-flat .osm-pricing-table-flat{
  display: grid !important;
  grid-template-columns: 1fr;
  gap: clamp(16px, 3vw, 28px) !important;
  margin: 0 !important;
}
@media (min-width: 768px){
  body.com_osmembership #osm-plans-list-pricing-table-flat .osm-pricing-table-flat{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}
/* neutralize BS columns inside grid */
body.com_osmembership #osm-plans-list-pricing-table-flat .osm-pricing-table-flat > [class*="col-"]{
  float: none !important; width: auto !important; max-width: none !important; padding: 0 !important; display: block !important;
}
body.com_osmembership #osm-plans-list-pricing-table-flat .osm-plan[style]{ background-color: transparent !important; }
body.com_osmembership #osm-plans-list-pricing-table-flat .osm-pricing-table-flat{ align-items: stretch !important; }
body.com_osmembership #osm-plans-list-pricing-table-flat .osm-pricing-table-flat > [class*="col-"]{
  display: flex !important; align-items: stretch !important;
}
body.com_osmembership #osm-plans-list-pricing-table-flat .osm-plan{
  width: 100% !important; height: 100% !important;
  background: rgba(20,22,28,0.96) !important; color: #e6e6e6 !important;
  border: 1px solid rgba(0,234,255,0.45) !important; border-radius: 12px !important;
  box-shadow: 0 0 0 2px rgba(0,234,255,0.15), 0 10px 26px rgba(0,0,0,0.7), inset 0 0 20px rgba(0,0,0,0.55) !important;
  padding: clamp(24px, 3.2vw, 36px) clamp(18px, 3vw, 28px) !important;
  display: flex !important; flex-direction: column !important; gap: 12px !important;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important;
}
body.com_osmembership #osm-plans-list-pricing-table-flat .osm-plan:hover{
  transform: translateY(-6px);
  border-color: rgba(0,234,255,0.75) !important;
  box-shadow: 0 0 0 2px rgba(0,234,255,0.25), 0 0 26px rgba(0,234,255,0.35), 0 18px 32px rgba(0,0,0,0.85), inset 0 0 24px rgba(0,0,0,0.65) !important;
}
body.com_osmembership #osm-plans-list-pricing-table-flat .osm-plan-title{
  font-family: "Orbitron", sans-serif !important; text-transform: uppercase !important;
  color: var(--tru-cyan) !important; text-shadow: 0 0 10px rgba(0,234,255,0.6) !important;
  margin: 2px 0 6px !important; letter-spacing: .6px !important;
}
body.com_osmembership #osm-plans-list-pricing-table-flat .osm-plan-price .price{
  color: #fff !important; font-weight: 700 !important; text-shadow: 0 0 8px rgba(255,255,255,0.25) !important;
}
body.com_osmembership #osm-plans-list-pricing-table-flat .osm-signup-container{
  display: flex !important; flex-wrap: wrap !important; gap: 10px !important;
  justify-content: center !important; margin-top: auto !important; padding-top: 8px !important;
}
body.com_osmembership #osm-plans-list-pricing-table-flat .osm-signup-container a.btn-signup{
  display: inline-flex !important; align-items: center; justify-content: center;
  min-height: 42px; padding: 10px 22px !important; border-radius: 6px !important;
  font-family: "Orbitron", sans-serif !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .6px !important;
  text-decoration: none !important; transition: transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}
body.com_osmembership #osm-plans-list-pricing-table-flat .osm-signup-container li:first-child a.btn-signup{
  background: linear-gradient(90deg, #ffde70, #c9a63e) !important; color: #111 !important; border: 0 !important;
  box-shadow: 0 0 14px rgba(255,224,100,0.45) !important;
}
body.com_osmembership #osm-plans-list-pricing-table-flat .osm-signup-container li:first-child a.btn-signup:hover{
  background: linear-gradient(90deg, #ffe891, #d8b756) !important; transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(255,224,100,0.65) !important;
}
body.com_osmembership #osm-plans-list-pricing-table-flat .osm-signup-container a.btn-signup.oms-btn-details{
  background: transparent !important; color: var(--tru-cyan) !important; border: 1px solid rgba(0,234,255,0.6) !important;
  box-shadow: 0 0 10px rgba(0,234,255,0.25) inset !important;
}
body.com_osmembership #osm-plans-list-pricing-table-flat .osm-signup-container a.btn-signup.oms-btn-details:hover{
  background: rgba(0,234,255,0.12) !important; color: #fff !important; transform: translateY(-2px);
  box-shadow: 0 0 16px rgba(0,234,255,0.4) inset, 0 0 12px rgba(0,234,255,0.25) !important;
}
body.com_osmembership #sp-component .osm-container.osm-pricingtable-container1{
  max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding: clamp(20px, 3vw, 30px) !important;
}

/* ---------- 4) LOGIN — button parity + panel padding ---------- */
body.com_users.view-login .com-users-login.login{ padding:56px 56px !important; }
body.com_users.view-login .com-users-login .btn-primary,
body.com_users.view-login .com-users-login .plg_system_webauthn_login_button{
  display:block !important; width:85% !important; min-height:52px !important; line-height:52px !important;
  margin:18px auto !important; border-radius:6px !important; text-align:center !important;
  font-family:"Orbitron",sans-serif !important; font-weight:700 !important; letter-spacing:1px !important; text-transform:uppercase !important;
}
body.com_users.view-login .com-users-login .btn-primary{
  background:linear-gradient(180deg,#00eaff,#007d99) !important; border:none !important; color:#000 !important;
  box-shadow:0 0 16px rgba(0,234,255,.25) !important;
}
body.com_users.view-login .com-users-login .btn-primary:hover{
  background:linear-gradient(180deg,#00d4e6,#006c84) !important; box-shadow:0 0 24px rgba(0,234,255,.40) !important;
}
/* passkey button shows “PASSKEY” only */
body.com_users.view-login .com-users-login .plg_system_webauthn_login_button{
  background:linear-gradient(180deg, rgba(210,176,85,.25), rgba(120,90,25,.35)) !important;
  border:1px solid rgba(210,176,85,.35) !important; color:var(--tru-gold) !important; font-size:0 !important; overflow:hidden !important;
}
body.com_users.view-login .com-users-login .plg_system_webauthn_login_button > *{ display:none !important; }
body.com_users.view-login .com-users-login .plg_system_webauthn_login_button::after{
  content:"PASSKEY"; font-size:.95rem; font-weight:700; letter-spacing:1px; color:currentColor;
}
body.com_users.view-login .com-users-login .plg_system_webauthn_login_button:hover{
  background:linear-gradient(180deg, rgba(210,176,85,.45), rgba(140,100,35,.55)) !important;
  color:#fff !important; box-shadow:0 0 22px rgba(210,176,85,.30); transform: translateY(-2px);
}

/* ---------- 5) PASSWORD ROWS (login + profile-edit) — SINGLE SET ---------- */
/* Show FA icons if the CSS is loaded */
i.fa, i.fas, i.fa-solid, .fa, .fas, .fa-solid, .svg-inline--fa{
  display:inline-block !important; line-height:1 !important; vertical-align:middle !important; visibility:visible !important;
}

/* A) Global password-group under Users component (covers registration/profile edit + login) */
body.com_users #sp-component .password-group,
body.com_users #sp-component .password-group .input-group{
  display:flex !important; align-items:stretch !important; width:100% !important; gap:0 !important; line-height:1 !important;
}
body.com_users #sp-component .password-group .input-group{ flex:1 1 auto !important; min-width:0 !important; }

/* left icon cell */
body.com_users #sp-component .password-group .input-group > .input-group-text{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:var(--tru-pass-h) !important; min-width:var(--tru-pass-h) !important; height:var(--tru-pass-h) !important;
  padding:0 !important; margin:0 !important; border-radius:6px 0 0 6px !important;
  background:var(--tru-cell) !important; border:1px solid var(--tru-bdr) !important; border-right:none !important;
  color:var(--tru-cyan) !important; box-sizing:border-box !important;
}
body.com_users #sp-component .password-group .input-group > .input-group-text .fa-key{ font-size:calc(var(--tru-pass-fs) + 2px) !important; font-weight:900 !important; }

/* input */
body.com_users #sp-component .password-group .input-group > input.form-control[type="password"],
body.com_users #sp-component .password-group .input-group > input.form-control[type="text"]{
  height:var(--tru-pass-h) !important; line-height:calc(var(--tru-pass-h) - 2px) !important;
  padding:0 12px !important; margin:0 !important; font-size:var(--tru-pass-fs) !important;
  color:#e0e0e0 !important; background:var(--tru-panel) !important;
  border-top:1px solid var(--tru-bdr) !important; border-bottom:1px solid var(--tru-bdr) !important;
  border-left:none !important; border-right:none !important; border-radius:0 !important; width:100% !important; min-width:0 !important; box-sizing:border-box !important;
}

/* right toggle */
body.com_users #sp-component .password-group .input-group > .input-password-toggle{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:var(--tru-pass-h) !important; height:var(--tru-pass-h) !important; padding:0 !important; margin:0 !important;
  border-radius:0 6px 6px 0 !important; background:var(--tru-cell) !important; border:1px solid var(--tru-bdr) !important; border-left:none !important;
  color:var(--tru-cyan) !important; cursor:pointer !important; box-sizing:border-box !important;
}
/* replace built-in eye with FA so it centers */
body.com_users #sp-component .password-group .input-password-toggle .icon-eye,
body.com_users #sp-component .password-group .input-password-toggle .icon-fw{ display:none !important; }
body.com_users #sp-component .password-group .input-password-toggle::before{
  content:"\f06e"; font-family:"Font Awesome 6 Free","Font Awesome 5 Free",system-ui,apple-color-emoji,Segoe UI Emoji;
  font-weight:900; font-size:calc(var(--tru-pass-fs) + 2px); line-height:1;
}
body.com_users #sp-component .password-group .input-password-toggle[aria-pressed="true"]::before{ content:"\f070"; }

/* ---------- 6) PROFILE VIEW (read-only) — glassy lists ---------- */
body.com_users.view-profile #sp-component .profile{
  position:relative !important; padding:32px 28px !important;
  background: linear-gradient(145deg, rgba(40,42,48,0.90), rgba(22,24,30,0.88)) !important;
  border-left: 4px solid rgba(210,176,85,0.65) !important; border-radius: 10px !important; color: #e0e0e0 !important;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.60), 0 0 20px rgba(210,176,85,0.10) !important;
  overflow: visible !important;
}
body.com_users.view-profile #sp-component .profile .list-group,
body.com_users.view-profile #sp-component .profile .list-group-item,
body.com_users.view-profile #sp-component .profile .card,
body.com_users.view-profile #sp-component .profile .card-body{
  background: rgba(235,235,245,0.10) !important;
  border: 1px solid rgba(255,255,255,0.18) !important; color:#e8e8e8 !important;
  backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; border-radius:8px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35) !important;
}
body.com_users.view-profile #sp-component .profile .list-group{ gap:10px !important; display:grid !important; }
body.com_users.view-profile #sp-component .profile .list-group-item{ margin:0 !important; padding:12px 14px !important; }
body.com_users.view-profile #sp-component .profile a{ color:var(--tru-cyan) !important; text-decoration:none !important; }
body.com_users.view-profile #sp-component .profile a:hover{ color:var(--tru-gold) !important; text-shadow:0 0 8px rgba(210,176,85,0.45); }

/* ---------- 7) PASSKEY MANAGEMENT (table + button) ---------- */
body.com_users #sp-component #plg_system_webauthn-management-interface .table{
  background: rgba(20,22,28,0.96) !important; color:#e0e0e0 !important; border:1px solid var(--tru-bdr) !important; border-radius:8px !important; overflow:hidden !important;
}
body.com_users #sp-component #plg_system_webauthn-management-interface thead.table-dark th{
  background: rgba(0,234,255,0.15) !important; color:#ffde70 !important; border-color: var(--tru-bdr) !important;
}
body.com_users #sp-component #plg_system_webauthn-management-interface tbody tr td{
  background: rgba(15,15,22,0.98) !important; border-color: rgba(255,255,255,0.06) !important;
}
body.com_users #sp-component #plg_system_webauthn-manage-add.btn{
  font-family:"Orbitron",sans-serif !important; text-transform:uppercase !important; font-weight:700 !important; letter-spacing:1px !important;
  border:1px solid rgba(210,176,85,0.35) !important; color:var(--tru-gold) !important;
  background:linear-gradient(180deg, rgba(210,176,85,.25), rgba(120,90,25,.35)) !important;
  box-shadow:0 0 16px rgba(210,176,85,.20) !important; border-radius:8px !important; padding:12px 18px !important;
}
body.com_users #sp-component #plg_system_webauthn-manage-add.btn:hover{
  background:linear-gradient(180deg, rgba(210,176,85,.45), rgba(140,100,35,.55)) !important; color:#fff !important;
  box-shadow:0 0 24px rgba(210,176,85,.30) !important; transform: translateY(-2px);
}

/* ---------- 8) BASIC SETTINGS — native selects + Fancy Select ---------- */
body.com_users #sp-component select.form-select{
  background: var(--tru-panel) !important; color:#e0e0e0 !important; border:1px solid var(--tru-bdr-strong) !important; border-radius:6px !important;
}
body.com_users #sp-component select.form-select option{ background: rgba(15,15,20,0.98) !important; color:#e0e0e0 !important; }

/* Choices.js inside <joomla-field-fancy-select> (timezone) */
body.com_users #sp-component joomla-field-fancy-select[id*="timezone"]{ position:relative !important; z-index:1001 !important; }
body.com_users #sp-component joomla-field-fancy-select[id*="timezone"] .choices__inner{
  background: var(--tru-panel) !important; color:#e0e0e0 !important; border:1px solid var(--tru-bdr-strong) !important;
  border-radius:6px !important; min-height: var(--tru-pass-h) !important; display:flex !important; align-items:center !important;
}
body.com_users #sp-component joomla-field-fancy-select[id*="timezone"] .choices__list--dropdown{
  background: rgba(15,15,20,0.98) !important; border:1px solid var(--tru-bdr) !important; box-shadow:0 10px 28px rgba(0,0,0,0.65) !important;
}
body.com_users #sp-component joomla-field-fancy-select[id*="timezone"] .choices__item--choice{ background:rgba(15,15,20,0.98) !important; color:#e0e0e0 !important; }
body.com_users #sp-component joomla-field-fancy-select[id*="timezone"] .choices__item--choice.is-highlighted,
body.com_users #sp-component joomla-field-fancy-select[id*="timezone"] .choices__item--choice[aria-selected="true"]{
  background: rgba(0,234,255,0.25) !important; color:#ffde70 !important;
}

/* ---------- 9) RESPONSIVE TWEAKS ---------- */
@media (max-width: 992px){
  body.com_osmembership #sp-component, body.com_osmembership #sp-right { max-width: 100%; }
  body.com_osmembership #sp-main-body .row { gap: 24px !important; }
}
@media (max-width: 768px){
  body.com_osmembership #osm-plans-list-pricing-table-flat .osm-plan{ padding: 30px 20px !important; }
  body.com_osmembership #osm-plans-list-pricing-table-flat .osm-plan-title{ font-size: 1.5rem !important; }
}
/* ===== PATCH 1: show FA key/eye even if inner spans fail ===== */
/* Login + Edit Profile: paint the key with a pseudo so it never disappears */
body.com_users #sp-component .password-group .input-group > .input-group-text::before {
  content: "\f084"; /* fa-key */
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free", system-ui, apple-color-emoji, "Segoe UI Emoji";
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  display: inline-block;
}
@supports not (font: 900 12px "Font Awesome 6 Free") {
  body.com_users #sp-component .password-group .input-group > .input-group-text::before { content: "🔑"; }
}

/* Keep any built-in key spans from double-rendering */
body.com_users #sp-component .password-group .input-group > .input-group-text .fas.fa-key,
body.com_users #sp-component .password-group .input-group > .input-group-text .fa-solid.fa-key { display: none !important; }

/* Eye icon is already handled by your ::before on .input-password-toggle */


/* ===== PATCH 2: Login “password recovery / options” white background ===== */
body.com_users.view-login .com-users-login__options {
  background: rgba(12,12,20,.96) !important;
  border: 1px solid rgba(0,234,255,.25) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 20px rgba(0,0,0,.6), 0 0 20px rgba(210,176,85,.1) !important;
  padding: 10px 14px !important;
  width: 85% !important;
  margin: 14px auto 0 !important;
}
body.com_users.view-login .com-users-login__options .list-group-item {
  background: transparent !important;
  border: 0 !important;
  padding: 10px 6px !important;
}
body.com_users.view-login .com-users-login__options a {
  color: var(--tru-cyan, #00eaff) !important;
  text-decoration: none !important;
}

/* ===== PATCH 3: Edit Profile password rows didn’t change — force the same rules here ===== */
body.com_users.view-profile #sp-component .profile-edit .password-group .input-group {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  min-width: 0 !important;
}
body.com_users.view-profile #sp-component .profile-edit .password-group .input-group > .input-group-text,
body.com_users.view-profile #sp-component .profile-edit .password-group .input-group > .input-password-toggle,
body.com_users.view-profile #sp-component .profile-edit #jform_password1,
body.com_users.view-profile #sp-component .profile-edit #jform_password2 {
  height: var(--tru-pass-h) !important;
  min-height: var(--tru-pass-h) !important;
  box-sizing: border-box !important;
}
body.com_users.view-profile #sp-component .profile-edit .password-group .input-group > .input-group-text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--tru-pass-h) !important;
  min-width: var(--tru-pass-h) !important;
  border-radius: 6px 0 0 6px !important;
  border-right: none !important;
}
/* Paint the key for Edit Profile too */
body.com_users.view-profile #sp-component .profile-edit .password-group .input-group > .input-group-text::before {
  content: "\f084"; /* fa-key */
  font-family: "Font Awesome 6 Free","Font Awesome 5 Free", system-ui, apple-color-emoji, "Segoe UI Emoji";
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  display: inline-block;
}
@supports not (font: 900 12px "Font Awesome 6 Free") {
  body.com_users.view-profile #sp-component .profile-edit .password-group .input-group > .input-group-text::before { content: "🔑"; }
}
body.com_users.view-profile #sp-component .profile-edit .password-group .input-group > input.form-control[type="password"] {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  line-height: normal !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  padding: 0 12px !important;
  margin: 0 !important;
}
body.com_users.view-profile #sp-component .profile-edit .password-group .input-group > .input-password-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--tru-pass-h) !important;
  min-width: var(--tru-pass-h) !important;
  border-left: none !important;
  border-radius: 0 6px 6px 0 !important;
  cursor: pointer !important;
}
/* Hide template eye span here too; we rely on ::before you already set */
body.com_users.view-profile #sp-component .profile-edit .password-group .input-password-toggle .icon-eye,
body.com_users.view-profile #sp-component .profile-edit .password-group .input-password-toggle .icon-fw { display: none !important; }

/* Match your Tech-Section colors on Edit Profile */
body.com_users.view-profile #sp-component .profile-edit .password-group .input-group > .input-group-text,
body.com_users.view-profile #sp-component .profile-edit .password-group .input-group > .input-password-toggle {
  background: var(--tru-cell, rgba(18,18,25,.95)) !important;
  border: 1px solid var(--tru-bdr, rgba(0,234,255,.30)) !important;
  color: var(--tru-cyan, #00eaff) !important;
}
body.com_users.view-profile #sp-component .profile-edit .password-group .input-group > input.form-control[type="password"] {
  background: var(--tru-panel, rgba(15,15,22,.95)) !important;
  color: #e0e0e0 !important;
  border-top: 1px solid var(--tru-bdr, rgba(0,234,255,.30)) !important;
  border-bottom: 1px solid var(--tru-bdr, rgba(0,234,255,.30)) !important;
}

/* ===== PATCH 4: Timezone Fancy Select — keep popup above & visible ===== */
/* Let ancestors allow overflow so the popup isn’t clipped */
body.com_users.view-profile #sp-main-body,
body.com_users.view-profile #sp-component,
body.com_users.view-profile #sp-component .sp-column,
body.com_users.view-profile #sp-component .profile-edit { overflow: visible !important; }

/* Fancy Select host: high z-index + dark theme */
body.com_users.view-profile #sp-component .profile-edit joomla-field-fancy-select[id*="timezone"] {
  position: relative !important;
  z-index: 1001 !important;
}
/* Web component parts (J4/J5): keep popup over everything */
body.com_users.view-profile #sp-component .profile-edit joomla-field-fancy-select[id*="timezone"]::part(container),
body.com_users.view-profile #sp-component .profile-edit joomla-field-fancy-select[id*="timezone"]::part(input),
body.com_users.view-profile #sp-component .profile-edit joomla-field-fancy-select[id*="timezone"]::part(button) {
  background: rgba(10,10,15,.98) !important;
  color: #e0e0e0 !important;
  border: 1px solid rgba(0,234,255,.40) !important;
  border-radius: 6px !important;
  min-height: var(--tru-pass-h) !important;
}
body.com_users.view-profile #sp-component .profile-edit joomla-field-fancy-select[id*="timezone"]::part(popup),
body.com_users.view-profile #sp-component .profile-edit joomla-field-fancy-select[id*="timezone"]::part(listbox) {
  position: absolute !important;
  z-index: 100000 !important;
  background: rgba(15,15,20,.98) !important;
  color: #e0e0e0 !important;
  border: 1px solid rgba(0,234,255,.35) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.65) !important;
}
/* Choices.js fallback (if Fancy Select degrades to choices markup) */
body.com_users.view-profile #sp-component .profile-edit joomla-field-fancy-select[id*="timezone"] .choices__inner {
  background: rgba(10,10,15,.98) !important;
  color: #e0e0e0 !important;
  border: 1px solid rgba(0,234,255,.40) !important;
  min-height: var(--tru-pass-h) !important;
}
body.com_users.view-profile #sp-component .profile-edit joomla-field-fancy-select[id*="timezone"] .choices__list--dropdown {
  background: rgba(15,15,20,.98) !important;
  border: 1px solid rgba(0,234,255,.35) !important;
  z-index: 100000 !important;
}

/* Native <select> fallback also dark */
body.com_users.view-profile #sp-component .profile-edit select[id*="timezone"],
body.com_users.view-profile #sp-component .profile-edit select.form-select[name="jform[params][timezone]"] {
  background-color: rgba(10,10,15,.98) !important;
  color: #e0e0e0 !important;
  border: 1px solid rgba(0,234,255,.40) !important;
  border-radius: 6px !important;
}
/* ===== HOTFIX A: LOGIN — keep the three cells perfectly level ===== */
body.com_users.view-login #sp-component .password-group .input-group{
  display:flex !important;
  align-items:stretch !important;  /* same height across the row */
  gap:0 !important;
  min-width:0 !important;
}

body.com_users.view-login #sp-component .password-group .input-group > .input-group-text,
body.com_users.view-login #sp-component .password-group .input-group > .input-password-toggle{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:var(--tru-pass-h) !important;
  min-height:var(--tru-pass-h) !important;
  padding:0 !important;
  line-height:1 !important;
  box-sizing:border-box !important;
  border-top-width:1px !important;
  border-bottom-width:1px !important;
}

body.com_users.view-login #sp-component .password-group .input-group > input.form-control[type="password"]{
  flex:1 1 auto !important;        /* fills space between icon boxes */
  width:auto !important;
  min-width:0 !important;
  height:var(--tru-pass-h) !important;
  min-height:var(--tru-pass-h) !important;
  line-height:normal !important;    /* caret baseline */
  padding:0 12px !important;
  margin:0 !important;
  border-left:none !important;
  border-right:none !important;
  border-radius:0 !important;
  box-sizing:border-box !important;
}

/* ===== HOTFIX B: EDIT PROFILE — prevent “short / shrinking” rows ===== */
body.com_users.view-profile #sp-component .profile-edit .password-group .input-group{
  display:flex !important;
  align-items:stretch !important;
  gap:0 !important;
  min-width:0 !important;
}

body.com_users.view-profile #sp-component .profile-edit .password-group .input-group > .input-group-text,
body.com_users.view-profile #sp-component .profile-edit .password-group .input-group > .input-password-toggle{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:var(--tru-pass-h) !important;
  min-width:var(--tru-pass-h) !important;
  height:var(--tru-pass-h) !important;
  min-height:var(--tru-pass-h) !important;
  padding:0 !important;
  line-height:1 !important;
  box-sizing:border-box !important;
  border-top-width:1px !important;
  border-bottom-width:1px !important;
}

body.com_users.view-profile #sp-component .profile-edit .password-group .input-group > input.form-control[type="password"],
body.com_users.view-profile #sp-component .profile-edit #jform_password1,
body.com_users.view-profile #sp-component .profile-edit #jform_password2{
  flex:1 1 auto !important;
  width:auto !important;
  min-width:0 !important;
  height:var(--tru-pass-h) !important;
  min-height:var(--tru-pass-h) !important;
  line-height:normal !important;
  padding:0 12px !important;
  margin:0 !important;
  border-left:none !important;
  border-right:none !important;
  border-radius:0 !important;
  box-sizing:border-box !important;
}

/* Keep FA icons present without affecting layout */
body.com_users #sp-component .password-group .input-group > .input-group-text::before{
  content:"\f084"; /* key */
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free",system-ui,"Segoe UI Emoji";
  font-weight:900; font-size:18px; line-height:1; display:inline-block;
}
@supports not (font:900 12px "Font Awesome 6 Free"){
  body.com_users #sp-component .password-group .input-group > .input-group-text::before{content:"🔑";}
}
/* ===============================
   FINAL, MINIMAL PATCH
   - Normal row height knob
   - Consistent widths per page
   - Use real FA icons (visible + centered)
   =============================== */
/***** TRU — SURGICAL FIX (place last) *********************************/

/* ---------- knobs ---------- */
html body.com_users { --tru-pass-h: 46px; }

/* ========== A) PASSWORD ROWS (LOGIN + EDIT PROFILE) ========== */
/* Use the exact structure from your markup so it can’t be overridden */
html body.com_users #sp-component form#member-profile .password-group .input-group,
html body.com_users #sp-component .com-users-login .password-group .input-group{
  display:flex !important;
  align-items:stretch !important;
  width:100% !important;
  min-width:0 !important;
  gap:0 !important;
}

/* left icon cell */
html body.com_users #sp-component form#member-profile .password-group .input-group > .input-group-text,
html body.com_users #sp-component .com-users-login .password-group .input-group > .input-group-text{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:var(--tru-pass-h) !important;
  min-width:var(--tru-pass-h) !important;
  height:var(--tru-pass-h) !important;
  border-radius:6px 0 0 6px !important;
  box-sizing:border-box !important;
  border-right:none !important;
}

/* input (make it fill the space, do not shrink to “short”) */
html body.com_users #sp-component form#member-profile .password-group .input-group > input.form-control[type="password"],
html body.com_users #sp-component form#member-profile #jform_password1,
html body.com_users #sp-component form#member-profile #jform_password2,
html body.com_users #sp-component .com-users-login .password-group .input-group > input.form-control[type="password"]{
  flex:1 1 100% !important;
  width:100% !important;
  min-width:0 !important;
  height:var(--tru-pass-h) !important;
  line-height:normal !important;
  padding:0 12px !important;
  margin:0 !important;
  border-left:none !important;
  border-right:none !important;
  border-radius:0 !important;
  box-sizing:border-box !important;
}

/* right toggle cell */
html body.com_users #sp-component form#member-profile .password-group .input-group > .input-password-toggle,
html body.com_users #sp-component .com-users-login .password-group .input-group > .input-password-toggle{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:var(--tru-pass-h) !important;
  min-width:var(--tru-pass-h) !important;
  height:var(--tru-pass-h) !important;
  border-radius:0 6px 6px 0 !important;
  box-sizing:border-box !important;
  cursor:pointer !important;
}

/* login page: don’t let the row stretch edge-to-edge */
html body.com_users.view-login #sp-component .com-users-login .password-group .input-group{
  max-width:520px !important;
  margin:0 auto !important;
}

/* profile edit: ensure the row uses full column width (no “short” inputs) */
html body.com_users.view-profile #sp-component .profile-edit .password-group .input-group{
  max-width:none !important;
  width:100% !important;
}

/* Visual parity (keep your dark theme) */
html body.com_users #sp-component .password-group .input-group > .input-group-text,
html body.com_users #sp-component .password-group .input-group > .input-password-toggle{
  background:rgba(18,18,25,.95) !important;
  border:1px solid rgba(0,234,255,.30) !important;
  color:#00eaff !important;
}
html body.com_users #sp-component .password-group .input-group > input.form-control[type="password"]{
  background:rgba(15,15,22,.95) !important;
  color:#e0e0e0 !important;
  border-top:1px solid rgba(0,234,255,.30) !important;
  border-bottom:1px solid rgba(0,234,255,.30) !important;
}

/* ========== B) FONT AWESOME VISIBILITY (real icons) ========== */
/* left “key” icon already exists in your markup; just make sure it shows */
html body.com_users #sp-component .input-group-text .fa,
html body.com_users #sp-component .input-group-text .fas,
html body.com_users #sp-component .input-group-text .fa-solid{
  display:inline-block !important;
  visibility:visible !important;
  opacity:1 !important;
  line-height:1 !important;
  font-size:18px !important;
}

/* right eye button: hide template glyph, use FA pseudo so it’s centered */
html body.com_users #sp-component .password-group .input-password-toggle .icon-eye,
html body.com_users #sp-component .password-group .input-password-toggle .icon-fw{ display:none !important; }
html body.com_users #sp-component .password-group .input-password-toggle::before{
  content:"\f06e"; font-family:"Font Awesome 6 Free" !important; font-weight:900 !important;
  font-size:18px; line-height:1; display:inline-block;
}
html body.com_users #sp-component .password-group .input-password-toggle[aria-pressed="true"]::before{
  content:"\f070";
}

/* ========== C) LOGIN “PASSWORD RECOVERY” BLOCK — dark surface ========== */
html body.com_users.view-login #sp-component .com-users-login__options{
  background:linear-gradient(180deg, rgba(12,12,20,.96), rgba(4,4,8,.96)) !important;
  border:1px solid rgba(0,234,255,.25) !important;
  border-radius:8px !important;
  box-shadow:inset 0 0 20px rgba(0,0,0,.6) !important;
  width:85% !important;
  margin:14px auto 0 !important;
}
html body.com_users.view-login #sp-component .com-users-login__options .list-group-item{
  background:transparent !important; border:0 !important;
}

/* ========== D) TIMEZONE DROPDOWN — make the popup actually appear ========== */
/* 1) ancestors must not clip the popup */
html body.com_users.view-profile #sp-main-body,
html body.com_users.view-profile #sp-component,
html body.com_users.view-profile #sp-component .sp-column,
html body.com_users.view-profile #sp-component .profile-edit{
  overflow:visible !important;
  position:relative !important;
  z-index:1 !important;
}

/* 2) web component host on top */
html body.com_users.view-profile #sp-component .profile-edit joomla-field-fancy-select[id*="timezone"]{
  position:relative !important;
  z-index:1002 !important;
}

/* 3) style + stack the popup (J5 supports ::part; keep Choices.js fallback too) */
html body.com_users.view-profile #sp-component .profile-edit joomla-field-fancy-select[id*="timezone"]::part(popup),
html body.com_users.view-profile #sp-component .profile-edit joomla-field-fancy-select[id*="timezone"]::part(listbox){
  position:absolute !important;
  z-index:100000 !important;
  background:rgba(15,15,20,.98) !important;
  border:1px solid rgba(0,234,255,.35) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.65) !important;
}
html body.com_users.view-profile #sp-component .profile-edit joomla-field-fancy-select[id*="timezone"] .choices__list--dropdown{
  /* fallback when the component renders Choices.js markup */
  position:absolute !important;
  z-index:100000 !important;
  background:rgba(15,15,20,.98) !important;
  border:1px solid rgba(0,234,255,.35) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.65) !important;
}
/* Make both password rows full-width in the edit form (optional) */
html body.com_users.view-profile #sp-component .profile-edit #jform_password1,
html body.com_users.view-profile #sp-component .profile-edit #jform_password2{
  width:100% !important;
}
html body.com_users.view-profile #sp-component .profile-edit #jform_password1-lbl,
html body.com_users.view-profile #sp-component .profile-edit #jform_password2-lbl{
  width:100% !important; display:block !important;
}