/* === YOUZIFY PROFILE AREA – iMessage Blue Glass Edition (v2.9 FROST PERFECT BALANCE) === */

/* === Feed Design – iMessage Blue Glass Edition === */

/* Outer Post Container – Glass Look (perfekt balanciert, 74% Opacity) */
.youzer-wall-post,
.activity-item {
  border-radius: 20px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.74) !important; /* 74% opacity (Desktop-Default) */
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25) !important;
  -webkit-backdrop-filter: blur(74px) saturate(300%) !important;
  backdrop-filter: blur(74px) saturate(300%) !important; /* Frostglas-Effekt */
}

/* ▼▼ NEW: Lesbarkeit Username + Status (ohne Pill) – stärkerer blurry drop shadow + reines Weiß ▼▼ */
/* Weicher Schatten für gesamten Header-Text (Name + optional „changed their …“), aber NICHT für den Timestamp */
#youzify .activity-header p,
#buddypress .activity-header p,
.youzify .activity-header p {
  text-shadow:
    0 2px 6px  rgba(0, 0, 0, 0.42),
    0 0 12px   rgba(0, 0, 0, 0.36),
    0 0 22px   rgba(0, 0, 0, 0.30) !important;
}
/* Reines Weiß auf Name/Status – Timestamp bewusst ausgenommen */
#youzify .activity-header p,
#youzify .activity-header p a:not(.activity-time-since),
#youzify .activity-header p span:not(.activity-time-since),
#buddypress .activity-header p,
#buddypress .activity-header p a:not(.activity-time-since),
#buddypress .activity-header p span:not(.activity-time-since),
.youzify .activity-header p,
.youzify .activity-header p a:not(.activity-time-since),
.youzify .activity-header p span:not(.activity-time-since) {
  color: #ffffff !important;
}
/* Timestamp dunkler (besser lesbar auf milchigem Weiß) – UNVERÄNDERT */
#youzify .activity-header .activity-time-since,
#buddypress .activity-header .activity-time-since,
.youzify .activity-header .activity-time-since,
.activity-header a.activity-time-since,
.activity-header .time-since {
  color: rgba(0, 0, 0, 0.70) !important; /* dunkleres Grau */
  font-weight: 500 !important;
}
/* ▲▲ NEW END ▲▲ */


/* Fix: Remove transparency from Elementor or shortcode containers (nur Hintergrundfarbe anfassen) */
.elementor-widget-container .youzify,
.elementor-widget-container .youzer,
.elementor-widget-container .activity,
.elementor-shortcode,
#youzify {
  background-color: transparent !important; /* statt background */
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

/* iMessage Blue Text Bubble */
.activity-inner > p,
.youzer-wall-post .activity-inner > p {
  position: relative !important;
  display: inline-block !important;
  margin: 14px 18px !important;
  padding: 12px 18px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #007aff, #0a84ff) !important;
  color: #fff !important;
  font-weight: 500 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  line-height: 1.55 !important;
  min-width: 60px !important;
}

/* Tail – perfekt ausgerichtet */
.activity-inner > p::after,
.youzer-wall-post .activity-inner > p::after {
  content: "";
  position: absolute;
  left: -13px;
  bottom: 7px;
  width: 16px;
  height: 14px;
  background: linear-gradient(135deg, #007aff, #0a84ff);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.25);
}

/* Hover Effekt */
.activity-inner > p:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* Like Button – Glassy & Soft */
.yz-like-button {
  font-size: 14px !important;
  padding: 10px 18px !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.3) !important;
  transition: all 0.25s ease !important;
  backdrop-filter: blur(8px) !important;
  color: #000 !important;
}
.yz-like-button:hover {
  background: rgba(255, 255, 255, 0.5) !important;
  transform: scale(1.05);
}

/* Images – Smooth Rounded */
.youzer-wall-post img {
  border-radius: 16px !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* === FIX: Remove dark container background on Youzify feed pages ===
   WICHTIG: body.page entfernt + nur background-color ändern, damit Site-Background (Customizer) erhalten bleibt. */
#youzify,
.yz-page,
.yz-content,
.youzer,
.youzer-wall,
.youzify,
#buddypress,
.activity,
#activity-stream {
  background-color: transparent !important; /* statt background */
  box-shadow: none !important;
  border: none !important;
}

/* === CINEMATIC GLASS AUDIO PLAYER – LUCA v2.5 FROST SYNC === */
.youzify-post-attachments audio {
  width: calc(100% - 40px) !important;
  display: block !important;
  margin: 10px 18px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,0.15) !important; /* angepasst auf 54%-Look */
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  padding: 4px !important;
  box-shadow:
    inset 0 0 12px rgba(255,255,255,0.05),
    0 8px 20px rgba(0,0,0,0.25) !important;
  overflow: hidden !important;
}

/* Control Area */
.youzify-post-attachments audio::-webkit-media-controls-enclosure {
  border-radius: 14px !important;
  background: transparent !important;
}

/* Timeline / Progress Bar – neutral gradient (no hover) */
.youzify-post-attachments audio::-webkit-media-controls-timeline {
  height: 6px !important;
  border-radius: 10px !important;
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.25) 100%) !important;
}

/* Play / Mute Buttons – bessere Lesbarkeit auf hellem Glas */
.youzify-post-attachments audio::-webkit-media-controls-play-button,
.youzify-post-attachments audio::-webkit-media-controls-mute-button {
  filter: brightness(0) invert(1)
          drop-shadow(0 2px 6px rgba(0,0,0,0.42))
          drop-shadow(0 0 12px rgba(0,0,0,0.36))
          drop-shadow(0 0 22px rgba(0,0,0,0.30)) !important;
  opacity: 0.90 !important;
  transition: all 0.25s ease !important;
}
.youzify-post-attachments audio::-webkit-media-controls-play-button:hover,
.youzify-post-attachments audio::-webkit-media-controls-mute-button:hover {
  opacity: 1 !important;
  transform: scale(1.08);
}

/* Time text – stärkere Lesbarkeit (gleicher Blur-Shadow wie beim Namen) */
.youzify-post-attachments audio::-webkit-media-controls-current-time-display,
.youzify-post-attachments audio::-webkit-media-controls-time-remaining-display {
  color: #ffffff !important;
  font-weight: 500 !important;
  text-shadow:
    0 2px 6px  rgba(0, 0, 0, 0.42),
    0 0 12px   rgba(0, 0, 0, 0.36),
    0 0 22px   rgba(0, 0, 0, 0.30) !important;
}

/* Volume (Desktop) */
.youzify-post-attachments audio::-webkit-media-controls-volume-slider {
  background: rgba(255,255,255,0.25) !important;
  border-radius: 6px !important;
}

/* === FORCE MILKY GLASS FIX (übersteuert alle Inline/Youzify-Styles) === */
.youzer-wall-post,
.activity-item,
.youzer-wall-post.youzify-post,
#youzify .activity-item,
#youzify .youzer-wall-post,
.youzer-wall-post .yz-post-inner,
.activity-item .yz-post-inner {
  background: rgba(255, 255, 255, 0.74) !important; /* Desktop/Global: 0.74 */
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.3s ease !important;
}
