/* Wir zielen auf die Users-Views ab – Helix setzt Klassen wie "com-users view-login" am Body */

/* 1) Root wieder auf Normalmaß (rem-Basis) setzen */
:root:has(body.com-users) {
  /* falls ein Preset html: 62.5% o.ä. setzt → neutralisieren */
  font-size: 16px !important;

  /* Bootstrap-Variablen zurück auf Default */
  --bs-body-font-size: 1rem !important;
  --bs-font-size-base: 1rem !important;
  --bs-body-line-height: 1.5 !important;
}

/* 2) Häufige Verkleinerer ausschalten */
body.com-users .small,
body.com-users small,
body.com-users .text-muted {
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

/* 3) Dein Chrome (Footer & Burger) hart auf sichere Größe pinnen */
body.com-users .global-mega-footer,
body.com-users .burger-container,
body.com-users #main-burger-menu {
  font-size: 1rem !important;
  transform: none !important;
}

/* 4) Falls irgendwo eine "global scale" drauf ist (selten, aber nervig) */
body.com-users {
  transform: none !important;
  zoom: 1 !important;
}

/* 5) SPPB/Helix-Komponentenrahmen nicht schrumpfen lassen */
body.com-users .sppb-section,
body.com-users .component-content {
  font-size: 1rem !important;
}

/* 6) Icons/SVGs nicht mitskalieren lassen */
body.com-users svg,
body.com-users img {
  max-width: 100%;
  height: auto;
}
/* =========================================================
   USERS OVERRIDE
   AllyouneedisHarry - com_users / edit profile
   Datei: /media/com_allyou_sidewide/css/users-anti-override.css
========================================================= */

/* ---------- Basis / Seite ---------- */
body.com_users,
body.com-users {
  background: #1c2f45;
  color: #f3f6fb;
}

body.com_users #sp-main,
body.com-users #sp-main,
body.com_users #sp-main-body,
body.com-users #sp-main-body {
  background: transparent;
}

body.com_users .container,
body.com-users .container,
body.com_users .container-inner,
body.com-users .container-inner {
  background: transparent;
}

/* ---------- Edit Profile Wrapper ---------- */
.com-users-profile__edit.profile-edit {
  max-width: 980px;
  margin: clamp(110px, 12vh, 140px) auto 72px;
  padding: 34px 34px 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 24px;
  box-shadow:
    0 16px 40px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Formular selbst */
#member-profile.com-users-profile__edit-form {
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ---------- Fieldset / Überschrift ---------- */
#member-profile fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

#member-profile legend {
  display: block;
  width: 100%;
  margin: 0 0 26px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  color: #ffffff;
  font-size: clamp(1.55rem, 1.1rem + 1.1vw, 2.1rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---------- Joomla Control Groups ---------- */
#member-profile .control-group {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: 12px 26px;
  align-items: start;
  margin: 0 0 22px;
  padding: 0 0 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

#member-profile .control-group:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

#member-profile .control-label {
  margin: 0;
  padding-top: 12px;
}

#member-profile .control-label label {
  display: inline-block;
  margin: 0;
  color: #f7f9fc;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

#member-profile .control-label .star {
  color: #f2c46d;
}

#member-profile .controls {
  min-width: 0;
}

/* ---------- Inputs / Textareas / Selects ---------- */
#member-profile input[type="text"],
#member-profile input[type="email"],
#member-profile input[type="password"],
#member-profile input[type="tel"],
#member-profile input[type="url"],
#member-profile input[type="number"],
#member-profile input[type="search"],
#member-profile select,
#member-profile textarea,
#member-profile .form-control {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  background: rgba(10, 22, 37, 0.72) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 16px !important;
  color: #f4f7fb !important;
  font-size: 0.98rem;
  line-height: 1.45;
  box-shadow: none !important;
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease,
    transform 0.18s ease;
}

#member-profile textarea {
  min-height: 120px;
  resize: vertical;
}

#member-profile input::placeholder,
#member-profile textarea::placeholder {
  color: rgba(244,247,251,0.56);
}

#member-profile input:hover,
#member-profile select:hover,
#member-profile textarea:hover,
#member-profile .form-control:hover {
  background: rgba(13, 28, 46, 0.84) !important;
  border-color: rgba(242,196,109,0.3) !important;
}

#member-profile input:focus,
#member-profile select:focus,
#member-profile textarea:focus,
#member-profile .form-control:focus {
  background: rgba(13, 28, 46, 0.96) !important;
  border-color: rgba(242,196,109,0.82) !important;
  box-shadow: 0 0 0 4px rgba(242,196,109,0.14) !important;
  color: #fff !important;
  outline: none !important;
}

#member-profile input[readonly],
#member-profile input[disabled],
#member-profile select[disabled],
#member-profile textarea[disabled] {
  opacity: 0.72;
  cursor: not-allowed;
}

/* ---------- Hilfstexte / Hinweise ---------- */
#member-profile small,
#member-profile .form-text,
#member-profile .small,
#member-profile .text-muted,
#member-profile [id$="-desc"] {
  display: block;
  margin-top: 8px;
  color: rgba(231,238,247,0.72) !important;
  font-size: 0.88rem;
  line-height: 1.5;
}

#member-profile #jform\\[password1\\]-rules,
#member-profile [id="jform[password1]-rules"] {
  margin: 0 0 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  color: rgba(238,243,249,0.82) !important;
  font-size: 0.9rem;
}

/* ---------- Passwortfeld / Input Groups ---------- */
#member-profile .password-group,
#member-profile .input-group {
  width: 100%;
}

#member-profile .input-group {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

#member-profile .input-group > .form-control,
#member-profile .input-group > input {
  flex: 1 1 auto;
}

#member-profile .input-group .btn,
#member-profile .input-group button,
#member-profile .input-group-text {
  min-width: 52px;
  border-radius: 14px !important;
}

/* ---------- Buttons ---------- */
#member-profile .btn,
#member-profile button,
#member-profile input[type="submit"],
#member-profile input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid rgba(242,196,109,0.42) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(242,196,109,0.22), rgba(242,196,109,0.12)) !important;
  color: #fff !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  box-shadow: none !important;
  transition:
    transform 0.18s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

#member-profile .btn:hover,
#member-profile button:hover,
#member-profile input[type="submit"]:hover,
#member-profile input[type="button"]:hover {
  transform: translateY(-1px);
  border-color: rgba(242,196,109,0.82) !important;
  background: linear-gradient(180deg, rgba(242,196,109,0.3), rgba(242,196,109,0.18)) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}

#member-profile .btn:focus-visible,
#member-profile button:focus-visible,
#member-profile input[type="submit"]:focus-visible,
#member-profile input[type="button"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(242,196,109,0.16);
}

/* Primärbutton noch etwas stärker */
#member-profile .btn-primary,
#member-profile button.btn-primary,
#member-profile input.btn-primary {
  background: linear-gradient(180deg, rgba(242,196,109,0.34), rgba(224,162,60,0.2)) !important;
  border-color: rgba(242,196,109,0.78) !important;
  color: #ffffff !important;
}

/* Sekundärbutton etwas ruhiger */
#member-profile .btn-secondary,
#member-profile .btn-default,
#member-profile .btn-light {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.14) !important;
}

/* ---------- Joomla Meldungen ---------- */
body.com_users #system-message-container,
body.com-users #system-message-container {
  max-width: 980px;
  margin: 110px auto 0;
  padding: 0 10px;
}

body.com_users .alert,
body.com-users .alert,
body.com_users joomla-alert,
body.com-users joomla-alert {
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

/*
/* ---------- Etwas Luft für fixed Header-Elemente ---------- */
body.com_users .body-wrapper,
body.com-users .body-wrapper {
  position: relative;
  z-index: 1;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .com-users-profile__edit.profile-edit {
    margin-top: 104px;
    padding: 26px 22px 22px;
    border-radius: 22px;
  }

  #member-profile .control-group {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #member-profile .control-label {
    padding-top: 0;
  }
}

@media (max-width: 767.98px) {
  .com-users-profile__edit.profile-edit {
    margin: 94px 14px 42px;
    padding: 22px 16px 18px;
    border-radius: 18px;
  }

  #member-profile legend {
    margin-bottom: 20px;
    padding-bottom: 12px;
    font-size: 1.45rem;
  }

  #member-profile .control-group {
    margin-bottom: 18px;
    padding-bottom: 14px;
  }

  #member-profile input[type="text"],
  #member-profile input[type="email"],
  #member-profile input[type="password"],
  #member-profile input[type="tel"],
  #member-profile input[type="url"],
  #member-profile input[type="number"],
  #member-profile input[type="search"],
  #member-profile select,
  #member-profile textarea,
  #member-profile .form-control {
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 14px !important;
  }



/* ===============================
   FIX: Name-Feld im Profilformular
================================= */

.com-users-profile__edit.profile-edit,
#member-profile,
#member-profile fieldset {
  position: relative;
}

#member-profile .control-group {
  position: static !important;
  float: none !important;
  clear: both !important;
}

#member-profile .control-label,
#member-profile .controls {
  position: static !important;
  float: none !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

#member-profile .controls input,
#member-profile .controls .form-control,
#member-profile input[type="text"],
#member-profile input[type="email"],
#member-profile input[type="password"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Falls nur das erste Feld verrutscht */
#member-profile .control-group:first-of-type,
#member-profile .control-group:first-of-type .control-label,
#member-profile .control-group:first-of-type .controls,
#member-profile .control-group:first-of-type input {
  position: static !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  transform: none !important;
}

/* =========================================================
   FIX: Erstes Name-Feld im Profilformular bleibt weiß
========================================================= */

/* alle Eingabefelder im Profilformular hart angleichen */
#member-profile input[type="text"],
#member-profile input[type="email"],
#member-profile input[type="password"],
#member-profile .form-control,
#member-profile .controls input,
#member-profile .controls .form-control {
  background: rgba(10, 22, 37, 0.72) !important;
  color: #f4f7fb !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  -webkit-text-fill-color: #f4f7fb !important;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none !important;
}

/* speziell das erste Feld / Name-Feld */
#member-profile .control-group:first-of-type input,
#member-profile .control-group:first-of-type .form-control,
#member-profile .control-group:first-of-type .controls input,
#member-profile .control-group:first-of-type .controls .form-control {
  background: rgba(10, 22, 37, 0.72) !important;
  color: #f4f7fb !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  -webkit-text-fill-color: #f4f7fb !important;
  box-shadow: none !important;
}

/* Hover / Focus auch fürs erste Feld */
#member-profile .control-group:first-of-type input:hover,
#member-profile .control-group:first-of-type .form-control:hover {
  background: rgba(13, 28, 46, 0.84) !important;
  border-color: rgba(242,196,109,0.3) !important;
}

#member-profile .control-group:first-of-type input:focus,
#member-profile .control-group:first-of-type .form-control:focus {
  background: rgba(13, 28, 46, 0.96) !important;
  border-color: rgba(242,196,109,0.82) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 0 0 4px rgba(242,196,109,0.14) !important;
  outline: none !important;
}

/* =========================================================
   FIX: Joomla Fancy Select / Choices.js auf com_users
========================================================= */

/* Grundcontainer */
body.com_users #member-profile joomla-field-fancy-select,
body.com_users #member-profile .choices,
body.com-users #member-profile joomla-field-fancy-select,
body.com-users #member-profile .choices {
  width: 100%;
}

/* Geschlossenes Feld */
body.com_users #member-profile .choices__inner,
body.com-users #member-profile .choices__inner {
  min-height: 42px;
  padding: 8px 44px 8px 12px !important;
  background: rgba(10, 22, 37, 0.72) !important;
  border: 1px solid rgba(242,196,109,0.42) !important;
  border-radius: 16px !important;
  color: #f4f7fb !important;
  box-shadow: none !important;
  margin-top:40px;
}

/* Eingabetext / Placeholder */
body.com_users #member-profile .choices__input,
body.com_users #member-profile .choices__input--cloned,
body.com_users #member-profile .choices__placeholder,
body.com_users #member-profile .choices__item,
body.com-users #member-profile .choices__input,
body.com-users #member-profile .choices__input--cloned,
body.com-users #member-profile .choices__placeholder,
body.com-users #member-profile .choices__item {
  color: #f4f7fb !important;
  background: transparent !important;
  -webkit-text-fill-color: #f4f7fb !important;
}

/* Geöffnetes Dropdown */
body.com_users #member-profile .choices__list--dropdown,
body.com_users #member-profile .choices__list[aria-expanded],
body.com-users #member-profile .choices__list--dropdown,
body.com-users #member-profile .choices__list[aria-expanded] {
  background: #10253a !important;
  border: 1px solid rgba(242,196,109,0.42) !important;
  border-radius: 16px !important;
  color: #f4f7fb !important;
  box-shadow: 0 18px 34px rgba(0,0,0,0.35) !important;
  overflow: hidden !important;
  z-index: 10050 !important;
}

/* Optionen im Dropdown */
body.com_users #member-profile .choices__list--dropdown .choices__item,
body.com_users #member-profile .choices__list[aria-expanded] .choices__item,
body.com-users #member-profile .choices__list--dropdown .choices__item,
body.com-users #member-profile .choices__list[aria-expanded] .choices__item {
  color: #eef4fb !important;
  background: #10253a !important;
  padding: 10px 12px !important;
  font-size: 0.95rem !important;
}

/* Hover / Highlight */
body.com_users #member-profile .choices__list--dropdown .choices__item--selectable.is-highlighted,
body.com_users #member-profile .choices__list[aria-expanded] .choices__item--selectable.is-highlighted,
body.com-users #member-profile .choices__list--dropdown .choices__item--selectable.is-highlighted,
body.com-users #member-profile .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background: rgba(242,196,109,0.16) !important;
  color: #ffffff !important;
}

/* Ausgewählte Tags bei Multi-Select */
body.com_users #member-profile .choices__list--multiple .choices__item,
body.com-users #member-profile .choices__list--multiple .choices__item {
  background: rgba(242,196,109,0.18) !important;
  border: 1px solid rgba(242,196,109,0.36) !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 0.88rem !important;
  padding: 6px 10px !important;
}

/* Delete-X auf Tags */
body.com_users #member-profile .choices__list--multiple .choices__item .choices__button,
body.com-users #member-profile .choices__list--multiple .choices__item .choices__button {
  border-left: 1px solid rgba(255,255,255,0.18) !important;
  color: #fff !important;
  opacity: 0.9;
}

/* Pfeil */
body.com_users #member-profile .choices[data-type*="select-one"]::after,
body.com-users #member-profile .choices[data-type*="select-one"]::after {
  border-color: #f2c46d transparent transparent !important;
}

/* Focus */
body.com_users #member-profile .choices.is-focused .choices__inner,
body.com_users #member-profile .choices.is-open .choices__inner,
body.com-users #member-profile .choices.is-focused .choices__inner,
body.com-users #member-profile .choices.is-open .choices__inner {
  border-color: rgba(242,196,109,0.82) !important;
  box-shadow: 0 0 0 4px rgba(242,196,109,0.14) !important;
}

/* Dropdown nicht vom Formular abgeschnitten */
body.com_users #member-profile .controls,
body.com-users #member-profile .controls {
  overflow: visible !important;
}

body.com_users #member-profile .control-group,
body.com-users #member-profile .control-group {
  overflow: visible !important;
}

/* =========================================================
   FIX: Fancy Select Abstand nach unten korrigieren
========================================================= */

/* Mehr Abstand unter dem Multi-Select */
#member-profile .control-group {
  margin-bottom: 28px !important;
}

/* Speziell bei Fancy-Select */
#member-profile joomla-field-fancy-select,
#member-profile .choices {
  margin-bottom: 12px !important;
}

/* Dropdown sauber über anderen Elementen */
#member-profile .choices__list--dropdown {
  z-index: 10060 !important;
}

/* Darunterliegendes Feld darf nicht überlappen */
#member-profile .control-group + .control-group {
  position: relative;
  z-index: 1;
}