/*
 * TFM Ultimate Member — Styling
 * /wp-content/themes/blocksy-child/css/tfm-um.css
 *
 * Nutzt globale CSS-Variablen aus dem Color Theme System:
 *   --area-accent / --area-accent-soft / --area-accent-glow
 *   tfm-time-night / tfm-time-sunrise / tfm-time-sunset
 *
 * Kein Template-Override nötig — alles via CSS-Selektoren.
 */

/* ============================================================
   1. GLOBALE UM-WRAPPER — Schrift, Farbe, Hintergrund
   ============================================================ */

.um,
.um * {
  font-family: 'Jost', sans-serif !important;
  font-weight: 300 !important;
}

/* Überschriften innerhalb von UM */
.um .um-header h3,
.um .um-account-name a,
.um .um-name,
.um-profile-photo .um-name,
.um .um-form .um-header {
  font-family: 'Cormorant Garamond', serif !important;
  font-style:  italic !important;
  font-weight: 400 !important;
}

/* ============================================================
   2. FORMULARE — Login, Register, Password Reset
   ============================================================ */

.um .um-form {
  background:    transparent !important;
  border-radius: 14px !important;
}

/* Formular-Überschrift */
.um .um-form .um-header {
  color:       var(--area-accent-soft, #e8c97a) !important;
  font-size:   1.5rem !important;
  text-align:  center !important;
  margin-bottom: 1.5rem !important;
  border-bottom: 1px solid rgba(176, 110, 255, 0.18) !important;
  padding-bottom: 1rem !important;
}

/* Feld-Label */
.um .um-field-label label,
.um .um-field-label {
  color:       rgba(196, 160, 255, 0.75) !important;
  font-size:   0.72rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.35rem !important;
}

/* Eingabefelder */
.um .um-field-input input:not([type=checkbox]):not([type=radio]),
.um .um-field-input textarea,
.um .um-field-input select,
.um .um-field-area input {
  background:    rgba(14, 9, 28, 0.70) !important;
  border:        1px solid rgba(176, 110, 255, 0.25) !important;
  border-radius: 8px !important;
  color:         #ddd4f0 !important;
  padding:       0.7rem 1rem !important;
  font-family:   'Jost', sans-serif !important;
  font-weight:   300 !important;
  font-size:     0.88rem !important;
  transition:    border-color 0.3s ease, box-shadow 0.3s ease !important;
  width:         100% !important;
  box-shadow:    none !important;
}

.um .um-field-input input:not([type=checkbox]):not([type=radio]):focus,
.um .um-field-input textarea:focus {
  border-color: var(--area-accent, #d4a843) !important;
  box-shadow:   0 0 14px rgba(212, 168, 67, 0.14) !important;
  outline:      none !important;
}

.um .um-field-input input::placeholder,
.um .um-field-input textarea::placeholder {
  color: rgba(154, 143, 187, 0.45) !important;
}

/* Passwort-Eye-Button */
.um-field-password .um-field-input .um-field-pass-icon {
  color: rgba(196, 160, 255, 0.55) !important;
}

/* Checkboxen + Radio */
.um .um-field-input input[type=checkbox],
.um .um-field-input input[type=radio] {
  accent-color: var(--area-accent, #d4a843) !important;
}

/* Submit-Button */
.um .um-button,
.um input[type=submit].um-button,
.um #um-submit-btn,
.um .um-col-alt .um-center input[type=submit] {
  background:    rgba(212, 168, 67, 0.12) !important;
  border:        1px solid rgba(212, 168, 67, 0.50) !important;
  border-radius: 999px !important;
  color:         var(--area-accent-soft, #e8c97a) !important;
  font-family:   'Jost', sans-serif !important;
  font-weight:   300 !important;
  letter-spacing: 0.08em !important;
  font-size:     0.82rem !important;
  padding:       0.7rem 2rem !important;
  cursor:        pointer !important;
  transition:    all 0.3s ease !important;
  width:         auto !important;
  min-width:     160px !important;
  box-shadow:    none !important;
  text-transform: none !important;
}
.um .um-button:hover,
.um input[type=submit].um-button:hover,
.um #um-submit-btn:hover {
  background:  rgba(212, 168, 67, 0.22) !important;
  border-color: var(--area-accent, #d4a843) !important;
  box-shadow:   0 0 18px rgba(212, 168, 67, 0.18) !important;
}

/* Links */
.um a,
.um .um-link,
.um .um-form a {
  color:      var(--area-accent-soft, #e8c97a) !important;
  transition: color 0.25s ease !important;
}
.um a:hover,
.um .um-link:hover {
  color: var(--area-accent, #d4a843) !important;
}

/* Info-Text / Notices */
.um .um-notice,
.um .um-field-block {
  background:    rgba(176, 110, 255, 0.08) !important;
  border:        1px solid rgba(176, 110, 255, 0.22) !important;
  border-radius: 10px !important;
  color:         rgba(196, 160, 255, 0.80) !important;
  padding:       1rem 1.2rem !important;
  font-family:   'Cormorant Garamond', serif !important;
  font-style:    italic !important;
  font-size:     0.94rem !important;
  text-align:    center !important;
}

/* ============================================================
   3. ACCOUNT SEITE
   ============================================================ */

/* Sidebar */
.um-account-side {
  background:    rgba(14, 9, 28, 0.70) !important;
  border:        1px solid rgba(176, 110, 255, 0.18) !important;
  border-radius: 14px !important;
  padding:       1.2rem 0 !important;
}

/* Account Avatar-Bereich */
.um-account-meta {
  padding: 0.8rem 1.2rem 1.2rem !important;
  border-bottom: 1px solid rgba(176, 110, 255, 0.14) !important;
  margin-bottom: 0.5rem !important;
}

/* Avatar-Ring */
.um-account-meta .um-account-meta-img img {
  border:        2px solid rgba(212, 168, 67, 0.40) !important;
  border-radius: 50% !important;
  transition:    border-color 0.3s ease !important;
}
.um-account-meta .um-account-meta-img:hover img {
  border-color: var(--area-accent, #d4a843) !important;
}

/* Account Name */
.um-account-name a {
  color:     var(--area-accent-soft, #e8c97a) !important;
  font-size: 1.1rem !important;
}
.um-account-profile-link a {
  color:     rgba(196, 160, 255, 0.60) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.06em !important;
}

/* Sidebar Nav-Links */
.um-account-side ul {
  padding: 0.3rem 0 !important;
}
.um-account-side ul li {
  list-style: none !important;
}
.um-account-link {
  display:        flex !important;
  align-items:    center !important;
  gap:            0.6rem !important;
  padding:        0.65rem 1.2rem !important;
  color:          rgba(196, 160, 255, 0.65) !important;
  border-left:    3px solid transparent !important;
  transition:     all 0.25s ease !important;
  font-size:      0.82rem !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
}
.um-account-link:hover {
  color:            rgba(232, 201, 122, 0.85) !important;
  border-left-color: rgba(212, 168, 67, 0.35) !important;
  background:       rgba(212, 168, 67, 0.05) !important;
}
.um-account-link.current {
  color:            var(--area-accent-soft, #e8c97a) !important;
  border-left-color: var(--area-accent, #d4a843) !important;
  background:       rgba(212, 168, 67, 0.08) !important;
}
.um-account-link i {
  font-size: 1rem !important;
  opacity:   0.75 !important;
}
.um-account-link.current i {
  opacity: 1 !important;
}

/* Account Haupt-Bereich */
.um-account-main {
  background:    rgba(14, 9, 28, 0.55) !important;
  border:        1px solid rgba(176, 110, 255, 0.14) !important;
  border-radius: 14px !important;
  padding:       1.5rem !important;
}

/* Account Tab Navigation (Mobile) */
.um-account-nav a {
  background:    rgba(14, 9, 28, 0.65) !important;
  border:        1px solid rgba(176, 110, 255, 0.18) !important;
  border-radius: 8px !important;
  color:         rgba(196, 160, 255, 0.70) !important;
  padding:       0.6rem 1rem !important;
  margin-bottom: 0.4rem !important;
}
.um-account-nav a.current {
  border-color: var(--area-accent, #d4a843) !important;
  color:        var(--area-accent-soft, #e8c97a) !important;
}

/* ============================================================
   4. PROFIL SEITE
   ============================================================ */

/* Cover-Bereich */
.um .um-cover,
.um-profile-photo .um-cover {
  background: linear-gradient(to bottom,
    rgba(100, 40, 220, 0.22) 0%,
    rgba(14,   9,  28, 0.95) 100%
  ) !important;
  border-bottom: 1px solid rgba(176, 110, 255, 0.18) !important;
}

/* Profilbild */
.um-profile-photo .um-avatar img,
.um .um-avatar img {
  border:     2px solid rgba(212, 168, 67, 0.45) !important;
  box-shadow: 0 0 22px rgba(212, 168, 67, 0.14) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
.um-profile-photo .um-avatar img:hover,
.um .um-avatar img:hover {
  border-color: var(--area-accent, #d4a843) !important;
  box-shadow:   0 0 32px rgba(212, 168, 67, 0.24) !important;
}

/* Profil-Name */
.um .um-name,
.um-profile-photo .um-name {
  color:     var(--area-accent-soft, #e8c97a) !important;
  font-size: 1.6rem !important;
}

/* Profil-Navbar */
.um-profile-navbar {
  border-bottom: 1px solid rgba(176, 110, 255, 0.18) !important;
  padding:       0.3rem 0 !important;
}

/* Profil-Menu-Tabs */
.um-profile-nav li a,
.um .um-profile-nav > li > a {
  color:       rgba(196, 160, 255, 0.65) !important;
  border-bottom: 2px solid transparent !important;
  padding-bottom: 0.5rem !important;
  font-size:   0.78rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  transition:  all 0.25s ease !important;
}
.um-profile-nav li a:hover,
.um .um-profile-nav > li > a:hover {
  color: var(--area-accent-soft, #e8c97a) !important;
}
.um-profile-nav li.active a,
.um .um-profile-nav > li.active > a {
  color:         var(--area-accent-soft, #e8c97a) !important;
  border-bottom-color: var(--area-accent, #d4a843) !important;
}

/* Profil-Body */
.um-profile-body {
  background:    rgba(14, 9, 28, 0.45) !important;
  border:        1px solid rgba(176, 110, 255, 0.12) !important;
  border-radius: 0 0 14px 14px !important;
  padding:       1.5rem !important;
  margin-top:    -1px !important;
}

/* ============================================================
   5. LOGOUT SEITE
   ============================================================ */

.um .um-misc-with-img {
  text-align:  center !important;
  padding:     1.5rem !important;
}
.um .um-misc-with-img img {
  border:        2px solid rgba(212, 168, 67, 0.40) !important;
  border-radius: 50% !important;
  margin-bottom: 0.8rem !important;
}
.um .um-misc-with-img strong {
  display:    block !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-style:  italic !important;
  font-size:   1.2rem !important;
  color:       var(--area-accent-soft, #e8c97a) !important;
  margin-bottom: 1rem !important;
  font-weight: 400 !important;
}
.um .um-misc-ul {
  list-style: none !important;
  padding:    0 !important;
  margin:     0 !important;
}
.um .um-misc-ul li a {
  display:        block !important;
  padding:        0.55rem 1rem !important;
  border:         1px solid rgba(176, 110, 255, 0.18) !important;
  border-radius:  8px !important;
  margin-bottom:  0.4rem !important;
  color:          rgba(196, 160, 255, 0.75) !important;
  font-size:      0.82rem !important;
  text-align:     center !important;
  transition:     all 0.25s ease !important;
}
.um .um-misc-ul li a:hover {
  border-color: var(--area-accent, #d4a843) !important;
  color:        var(--area-accent-soft, #e8c97a) !important;
}

/* ============================================================
   6. KINGDOM FORTSCHRITT — Custom Block auf Profilseite
   ============================================================ */

.tfm-profile-kingdom {
  background:    rgba(14, 9, 28, 0.65);
  border:        1px solid rgba(212, 168, 67, 0.22);
  border-radius: 14px;
  padding:       1.4rem 1.6rem;
  margin-bottom: 1.5rem;
}

.tfm-profile-kingdom__header {
  font-family:    'Cormorant Garamond', serif;
  font-style:     italic;
  font-size:      1.05rem;
  color:          var(--area-accent-soft, #e8c97a);
  margin-bottom:  1.1rem;
  display:        flex;
  align-items:    center;
  gap:            0.5rem;
}
.tfm-profile-kingdom__glyph {
  font-style: normal;
  opacity:    0.75;
}

.tfm-profile-kingdom__empty {
  font-family: 'Cormorant Garamond', serif;
  font-style:  italic;
  font-size:   0.92rem;
  color:       rgba(154, 143, 187, 0.60);
  text-align:  center;
  padding:     0.5rem 0;
}

/* District-Zeilen */
.tfm-profile-kingdom__districts {
  display:       flex;
  flex-direction: column;
  gap:           0.65rem;
  margin-bottom: 1.2rem;
}

.tfm-profile-district {
  display:     grid;
  grid-template-columns: 1fr 2fr auto;
  align-items: center;
  gap:         0.75rem;
  opacity:     0.5;
  transition:  opacity 0.3s ease;
}
.tfm-profile-district.visited {
  opacity: 1;
}

.tfm-profile-district__name {
  font-size:  0.74rem;
  color:      #ddd4f0;
  white-space: nowrap;
  overflow:   hidden;
  text-overflow: ellipsis;
}

/* Farbige Linke Linie je Distrikt */
.tfm-profile-district--wanderers   .tfm-profile-district__name { color: #e8c97a; }
.tfm-profile-district--feral       .tfm-profile-district__name { color: #5ab87a; }
.tfm-profile-district--devotion    .tfm-profile-district__name { color: #cc3050; }
.tfm-profile-district--temptations .tfm-profile-district__name { color: #d040a0; }
.tfm-profile-district--ecstasy     .tfm-profile-district__name { color: #9040e0; }
.tfm-profile-district--archives    .tfm-profile-district__name { color: #30b0c8; }

.tfm-profile-district__bar-wrap {
  background:    rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  height:        4px;
  overflow:      hidden;
}
.tfm-profile-district__bar {
  height:        100%;
  border-radius: 999px;
  background:    var(--area-accent, #d4a843);
  transition:    width 0.8s ease;
}
.tfm-profile-district--feral       .tfm-profile-district__bar { background: #5ab87a; }
.tfm-profile-district--devotion    .tfm-profile-district__bar { background: #cc3050; }
.tfm-profile-district--temptations .tfm-profile-district__bar { background: #d040a0; }
.tfm-profile-district--ecstasy     .tfm-profile-district__bar { background: #9040e0; }
.tfm-profile-district--archives    .tfm-profile-district__bar { background: #30b0c8; }

.tfm-profile-district__tier {
  font-size:   0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:       rgba(154, 143, 187, 0.55);
  white-space: nowrap;
  min-width:   50px;
  text-align:  right;
}
.tfm-profile-district.visited .tfm-profile-district__tier {
  color: rgba(196, 160, 255, 0.75);
}

/* Achievement-Bereich */
.tfm-profile-kingdom__achievements {
  border-top:  1px solid rgba(176, 110, 255, 0.14);
  padding-top: 1rem;
}

.tfm-profile-kingdom__ach-label {
  font-size:    0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:        rgba(196, 160, 255, 0.50);
  margin-bottom: 0.75rem;
}

.tfm-profile-kingdom__ach-grid {
  display:              grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap:                  0.7rem;
}

.tfm-profile-ach {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.3rem;
  text-align:     center;
}
.tfm-profile-ach img {
  width:         48px;
  height:        48px;
  border-radius: 50%;
  border:        1px solid rgba(212, 168, 67, 0.30);
  object-fit:    cover;
}
.tfm-profile-ach__placeholder {
  width:         48px;
  height:        48px;
  border-radius: 50%;
  border:        1px solid rgba(212, 168, 67, 0.30);
  background:    rgba(212, 168, 67, 0.08);
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         rgba(212, 168, 67, 0.55);
  font-size:     1.1rem;
}
.tfm-profile-ach__name {
  font-size:  0.60rem;
  color:      rgba(196, 160, 255, 0.55);
  line-height: 1.3;
  max-width:  72px;
}

/* ============================================================
   7. RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
  .tfm-profile-district {
    grid-template-columns: 1fr 1fr;
    grid-template-rows:    auto auto;
  }
  .tfm-profile-district__bar-wrap {
    grid-column: 1 / -1;
    grid-row:    2;
  }
  .tfm-profile-district__tier {
    text-align: right;
  }
}

/* ============================================================
   8. NEUE PROFIL-TABS — Kingdom + Achievements
   ============================================================ */

/* "Profile is empty" Meldung verstecken (CSS-Sicherheitsnetz) */
.um-profile-note,
.um-profile-empty-note,
.um-notice.um-profile-completeness-notice {
  display: none !important;
}

/* Kingdom-Tab nutzt die bestehenden .tfm-profile-kingdom Klassen */

/* District meta — Zeit + Tier nebeneinander */
.tfm-profile-district__meta {
  display:     flex;
  flex-direction: column;
  align-items: flex-end;
  gap:         0.15rem;
  min-width:   60px;
}
.tfm-profile-district__time {
  font-size:   0.58rem;
  color:       rgba(154, 143, 187, 0.45);
  white-space: nowrap;
}
.tfm-profile-district__tier.unvisited-label {
  color: rgba(154, 143, 187, 0.35);
}

/* Achievements Tab */
.tfm-profile-achievements {
  padding: 0;
}

.tfm-profile-ach-section {
  margin-bottom: 1.6rem;
}
.tfm-profile-ach-section__label {
  font-size:     0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:         rgba(196, 160, 255, 0.45);
  margin-bottom: 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(176, 110, 255, 0.10);
}

/* Earned Achievement */
.tfm-profile-ach.earned {
  opacity: 1;
}
.tfm-profile-ach.earned img {
  border-color: rgba(212, 168, 67, 0.45);
  box-shadow:   0 0 10px rgba(212, 168, 67, 0.12);
}
.tfm-profile-ach.earned .tfm-profile-ach__placeholder {
  border-color: rgba(212, 168, 67, 0.45);
  background:   rgba(212, 168, 67, 0.10);
  color:        rgba(212, 168, 67, 0.70);
}
.tfm-profile-ach.earned .tfm-profile-ach__name {
  color: rgba(232, 201, 122, 0.75);
}

/* Unearned/Locked Achievement */
.tfm-profile-ach.unearned {
  opacity: 0.38;
  filter:  grayscale(0.6);
}
.tfm-profile-ach.unearned img {
  border-color: rgba(176, 110, 255, 0.20);
  box-shadow:   none;
}
.tfm-profile-ach__placeholder.locked {
  font-size: 0.8rem;
  color:     rgba(154, 143, 187, 0.40);
}
.tfm-profile-ach.unearned .tfm-profile-ach__name {
  color: rgba(154, 143, 187, 0.50);
}

/* Größere Achievement-Icons in den Tabs */
.tfm-profile-achievements .tfm-profile-ach img,
.tfm-profile-achievements .tfm-profile-ach__placeholder {
  width:  56px;
  height: 56px;
}

/* Achievement-Grid in Tabs — etwas mehr Platz */
.tfm-profile-achievements .tfm-profile-kingdom__ach-grid {
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 1rem;
}

/* ── Edit Profile Button ── */
.tfm-edit-profile-wrap {
  display:     flex;
  justify-content: center;
  padding:     0.6rem 0 0.2rem;
}
.tfm-edit-profile-btn {
  font-family:    'Jost', sans-serif;
  font-size:      0.74rem;
  letter-spacing: 0.08em;
  padding:        0.4rem 1.2rem;
  border-radius:  999px;
  border:         1px solid rgba(212, 168, 67, 0.40);
  background:     rgba(212, 168, 67, 0.08);
  color:          var(--area-accent-soft, #e8c97a) !important;
  text-decoration: none;
  transition:     all 0.25s ease;
  display:        inline-flex;
  align-items:    center;
  gap:            0.4rem;
}
.tfm-edit-profile-btn:hover {
  background:   rgba(212, 168, 67, 0.16);
  border-color: var(--area-accent, #d4a843);
  box-shadow:   0 0 14px rgba(212, 168, 67, 0.14);
  color:        var(--area-accent, #d4a843) !important;
}

/* ── Empty Profile Notice ── */
.tfm-profile-empty-notice {
  text-align:    center;
  padding:       1.8rem 1.5rem;
  margin-bottom: 1.2rem;
  border:        1px dashed rgba(176, 110, 255, 0.22);
  border-radius: 12px;
  background:    rgba(176, 110, 255, 0.04);
}
.tfm-profile-empty-notice__glyph {
  display:    block;
  font-size:  1.3rem;
  color:      rgba(196, 160, 255, 0.35);
  margin-bottom: 0.5rem;
}
.tfm-profile-empty-notice p {
  font-family: 'Cormorant Garamond', serif;
  font-style:  italic;
  font-size:   1rem;
  color:       rgba(196, 160, 255, 0.55);
  margin:      0 0 0.7rem;
}
.tfm-profile-empty-notice a {
  font-size:   0.72rem;
  letter-spacing: 0.08em;
  color:       var(--area-accent-soft, #e8c97a) !important;
  border-bottom: 1px solid rgba(212, 168, 67, 0.30);
  padding-bottom: 1px;
  text-decoration: none;
  transition:  color 0.25s ease, border-color 0.25s ease;
}
.tfm-profile-empty-notice a:hover {
  color:        var(--area-accent, #d4a843) !important;
  border-color: var(--area-accent, #d4a843);
}

/* ── Cover Bild — Höhe + Ausrichtung ── */
.um .um-cover {
  height:     240px !important;  /* Höhe nach Wunsch anpassen */
  min-height: 240px !important;
}
.um .um-cover-e {
  background-position: center center !important;
  height:              240px !important;
}