:root {
    --user-color: ;
    --user-color-rgb: 255, 127, 0;
}

/* GLOBAL: Disable text selection everywhere (kills all 3 warnings) */
*,
*::before,
*::after {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none; /* iOS long-press menu gone */
}


html { 
    overflow-y: scroll;
    scroll-behavior: smooth;
    scrollbar-width: thin !important;
    scrollbar-color: var(--user-color) #0A0E17 ;
}
body {
    font-family: 'Exo 2', sans-serif;
    /*background-image: url(/uploads/1bg.png);*/
    background-color: #0A0E17 !important;
    background-attachment: fixed ;
    background-size: cover ;
    background-repeat: no-repeat ;
    background-position: center ;
    color: #E0E7FF ;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    position: relative;
    z-index: 0;
}
/* 
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: -1;
    filter: brightness(50%) hue-rotate(0deg) saturate(100%) contrast(100%);
    animation: livingBackground 120s ease-in-out infinite;
    
    pointer-events: none;
    transition: filter 4s ease-in-out;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, 
        rgba(138,43,226,0.02), 
        rgba(0,206,209,0.015), 
        rgba(255,192,203,0.02),
        rgba(255,165,0,0.015),      
        rgba(255,0,0,0.02),         
        rgba(255,255,0,0.015),      
        rgba(0,255,0,0.02)          
    );
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
}


@keyframes livingBackground {
  0%, 100% {
    filter: brightness(92%) hue-rotate(0deg) saturate(100%) contrast(100%);
  }
  14% {
    filter: brightness(93%) hue-rotate(15deg) saturate(101%) contrast(100%);
  }
  28% {
    filter: brightness(91%) hue-rotate(30deg) saturate(102%) contrast(101%);
  }
  42% {
    filter: brightness(94%) hue-rotate(60deg) saturate(103%) contrast(100%); 
  }
  56% {
    filter: brightness(92%) hue-rotate(90deg) saturate(101%) contrast(100%);
  }
  70% {
    filter: brightness(93%) hue-rotate(120deg) saturate(102%) contrast(101%);
  }
  84% {
    filter: brightness(91%) hue-rotate(150deg) saturate(100%) contrast(100%);
  }
}
*/


:focus {
    outline: 0.5px solid var(--user-color);
    outline-offset: 2px;
    transition: outline 0.2s ease;
}

/* FINAL STARFIELD — INSTANT ON FIRST LOAD + PERFECT */
.fullspace-stars {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 1400;
    background: transparent;
}

.stars {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.stars::before {
    content: "";
    position: absolute;
    width: 1px; height: 1px;
    background: transparent;
    border-radius: 50%;
    box-shadow: var(--starfield);
    animation: fly-toward var(--duration) linear infinite,
               twinkle 4s ease-in-out infinite;
    /* This is the magic: start halfway through the animation */
    animation-delay: calc(-1 * var(--duration) * 0.5);
    transform: translateZ(-1500px);
}

@keyframes fly-toward {
    0% {
        transform: translateZ(-1500px) translateY(-180vh) scale(0.05);
        opacity: 0;
    }
    5%  { opacity: 0.8; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    95% { opacity: 0.8; }
    100% {
        transform: translateZ(600px) translateY(120vh) scale(1);
        opacity: 0;
    }
}

@keyframes twinkle {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

/* Speed layers — now you see stars IMMEDIATELY */
.far   { --duration: 380s; }
.mid   { --duration: 260s; }
.near  { --duration: 140s; }

.far::before   { --starfield: <?php echo $farStars; ?>; }
.mid::before   { --starfield: <?php echo $midStars; ?>; }
.near::before  { --starfield: <?php echo $nearStars; ?>; }

/* Update crop-overlay z-index */
.crop-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none;
    z-index: 1000; /* Below cropModal, above notificationPopup2 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(3px);
}
.crop-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Update dropdown-overlay z-index */
.dropdown-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none;
    z-index: 950; /* Below crop-overlay, above notificationPopup2 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(3px);
}
.dropdown-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}




.top-bar {
    position: fixed; /* Stays at top */
    top: 0; /* Aligned to top */
    left: 0; /* Aligned to left */
    width: 100%; /* Full width */
    height: 114px; /* Fixed height */
    background: rgba(10, 14, 23, 0.3);
    backdrop-filter: blur(2px);
    z-index: 160000; /* High stacking order */
    display: flex; /* Flex layout */
    align-items: center; /* Center vertically */
    padding: 0px 5px 20px 5px; /* Padding with extra bottom space */
    box-sizing: border-box; /* Includes padding in dimensions */
    overflow: visible; /* Allows overflow content */
}

.loading-spinner {
  position: fixed;
  top: 35px;
  right: 660px;
  width: auto;
  height: auto;
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1700000;
  transition: opacity 0.3s ease;
}

.spinner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 120deg,
    var(--user-color) 120deg 240deg,
    transparent 240deg 360deg
  );
  animation:
    spin 1.4s cubic-bezier(0.55, 0.1, 0.3, 0.9) infinite,
    glowPulse 3s ease-in-out infinite alternate,
    orbit 4s ease-in-out infinite;
  position: relative;
  box-shadow:
    0 0 12px rgba(var(--user-color-rgb), 0.3),
    inset 0 0 20px rgba(var(--user-color-rgb), 0.2),
    inset 0 0 30px rgba(0, 0, 0, 0.7);
  z-index: 1700000;
  backdrop-filter: blur(3px);
}

.spinner::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  background:
    radial-gradient(
      circle at 40% 40%,
      rgba(var(--user-color-rgb), 0.25) 0%,
      rgba(var(--user-color-rgb), 0.05) 45%,
      transparent 70%
    ),
    radial-gradient(circle, #05070e 0%, #111625 60%, #191f2d 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: innerPulse 2.4s ease-in-out infinite alternate;
  box-shadow:
    0 0 18px rgba(var(--user-color-rgb), 0.25),
    inset 0 0 10px rgba(0, 0, 0, 0.8),
    inset 0 0 18px rgba(var(--user-color-rgb), 0.05);
  z-index: 1700001;
}

.spinner::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  background: conic-gradient(
    from 90deg,
    transparent 0deg 80deg,
    rgba(var(--user-color-rgb), 0.45) 80deg 160deg,
    transparent 160deg 360deg
  );
  animation: counterSpin 1.6s linear infinite reverse;
  opacity: 0.6;
  filter: blur(0.3px);
}

/* ✦ Refined Animations ✦ */
@keyframes spin {
  0% {
    transform: rotate(0deg) scale(1);
    filter: hue-rotate(0deg) brightness(0.95);
  }
  25% {
    transform: rotate(90deg) scale(1.02);
    filter: hue-rotate(90deg) brightness(1);
  }
  50% {
    transform: rotate(180deg) scale(1.05);
    filter: hue-rotate(180deg) brightness(1.05);
  }
  75% {
    transform: rotate(270deg) scale(1.02);
    filter: hue-rotate(270deg) brightness(1);
  }
  100% {
    transform: rotate(360deg) scale(1);
    filter: hue-rotate(360deg) brightness(0.95);
  }
}

@keyframes glowPulse {
  0% {
    box-shadow:
      0 0 10px rgba(var(--user-color-rgb), 0.25),
      0 0 20px rgba(var(--user-color-rgb), 0.2),
      inset 0 0 20px rgba(var(--user-color-rgb), 0.1);
  }
  100% {
    box-shadow:
      0 0 20px rgba(var(--user-color-rgb), 0.45),
      0 0 40px rgba(var(--user-color-rgb), 0.3),
      inset 0 0 28px rgba(var(--user-color-rgb), 0.15);
  }
}

@keyframes innerPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.95;
    box-shadow:
      0 0 12px rgba(var(--user-color-rgb), 0.25),
      inset 0 0 10px rgba(0, 0, 0, 0.8),
      inset 0 0 16px rgba(var(--user-color-rgb), 0.05);
  }
  50% {
    transform: translate(-50%, -50%) scale(0.97);
    opacity: 1;
    box-shadow:
      0 0 20px rgba(var(--user-color-rgb), 0.35),
      inset 0 0 14px rgba(0, 0, 0, 0.9),
      inset 0 0 22px rgba(var(--user-color-rgb), 0.08);
  }
}

@keyframes counterSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes orbit {
  0% { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
  25% { border-radius: 45% 55% 50% 50% / 50% 50% 50% 50%; }
  50% { border-radius: 50% 50% 45% 55% / 50% 50% 50% 50%; }
  75% { border-radius: 50% 50% 50% 50% / 45% 55% 50% 50%; }
  100% { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
}
.spinner-glow {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--user-color-rgb), 0.08) 0%, transparent 70%);
  filter: blur(12px);
  z-index: -1;
}

.nav-logo {
    text-align: center;
    margin: 30px 50 0 30px;
}
.nav-logo img {
    width: 100px;
    height: 100px;
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease;
}
.nav-logo img:hover {
    transform: scale(1.1) rotate(5deg);
}
.feed-header {
    display: flex;
    align-items: flex-start;
    background: transparent;
    padding: 0;
    margin-right: auto;
    height: 80px;
}
.feed-selector { 
    display: inline-block; 
    
    position: relative;
    margin-top: 30px;
    margin-left: -60px;
}
.feed-selector .dropdown {
    position: relative;
    display: inline-block;
    width: 150px;
}
.feed-selector .dropdown-btn {
    background: rgba(10, 14, 23, 0.1);
    backdrop-filter: blur(3px) !important;
    color: #FFF;
    border: none;
    padding: 10px 12px;
    border-radius: 100px;
    font-size: 17px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    font-weight: 600;
    margin-left: 20px;
    margin-bottom: 10px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    outline: 1px solid var(--user-color);
}
.feed-selector .dropdown-btn:hover { 
    transform: scale(1.05);
    color: #FFEB3B;
    box-shadow: 0 8px 16px var(--user-color, rgba(229, 78, 50, 0.35));
}
.feed-selector .dropdown-btn:focus { 
    outline: 1px solid var(--user-color); 
    outline-offset: 2px;
}
.feed-selector .dropdown-btn.active {
    color: var(--user-color);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
    outline: 1px solid var(--user-color);
}
.feed-selector .dropdown-content {
    display: none;
    position: absolute;
    margin-left: 200px;
    background: rgba(10, 14, 23, 0.9); /* Lower alpha for more visible blur */
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    isolation: isolate; /* Forces stacking context for reliable blur */
    border: none;
    border-radius: 16px;
    max-height: 1000px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 99999999999;
    width: 325px;
    scrollbar-width: thin;
    scrollbar-color: var(--user-color) #0A0E17;
    padding: 12px;
    margin-top: 0px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
    

}

@keyframes wave3 {
    0% { background-position-x: 0%; }
    50% { background-position-x: 10%; } /* Mimics the subtle left-right wave */
    100% { background-position-x: 0%; }
}

.feed-selector .dropdown-content.open {
    display: block; /* Added to toggle visibility */
}
.feed-selector .dropdown-content::-webkit-scrollbar {
    width: 6px;
}
.feed-selector .dropdown-content::-webkit-scrollbar-track {
    background: rgba(10, 14, 23, 0.3) !important;
    border-radius: 3px;
}
.feed-selector .dropdown-content::-webkit-scrollbar-thumb {
    background: var(--user-color);
    border-radius: 3px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
.feed-selector .dropdown-content label {
    display: block;
    padding: 10px 16px;
    color: #FFF;
    cursor: pointer;
    text-align: center;
    background: transparent;
    font-size: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1);
}
.feed-selector .dropdown-content label:not(:hover):not(:focus) {
    transform: scale(1);
    color: #FFF;
    text-shadow: none;
}
.feed-selector .dropdown-content label:hover,
.feed-selector .dropdown-content label:focus {
    transform: scale(1.1);
    color: #FFEB3B;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
    outline: none;
}
.feed-title {
    background: transparent;
    margin-top: 30px;
    border-radius: 5px;
    color: #FFF;
    font-size: 28px;
    margin-left: 135px;
    text-shadow: 0 2px 6px rgba(30, 60, 90, 0.5);
    letter-spacing: .5px;
}

.feed-title .comment-count {
    font-size: 16px;
    font-weight: bold;
    color: #FFF;
    letter-spacing: 3px;
}

.comment-count {
    margin-left: 5px;
    margin-top: -2px;
    color: #FFF;
    font-size: 14px !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

h2.feed-title > .username {
    font-size: 16px;
    color: #E0E7FF !important;
    text-shadow: 0 2px 6px rgba(30, 60, 90, 0.5);
    letter-spacing: .5px;
    margin-top: 0px;
    display: block;
    width: 100%;
    
    font-weight: 300;
    margin-left: 30px;
}

.nav-menu {
    display: flex; /* Flex layout */
    align-items: center; /* Center vertically */
    margin-top: 15px; /* Top spacing */
    margin-right: 10px;
}
.nav-left {
    display: flex;
    align-items: center;
    position: relative; /* Anchor for tally */
    flex-shrink: 0;
}
.nav-menu a {
    color: #FFF;
    text-decoration: none;
    margin: 0 10px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
    font-weight: 600;
    font-size: 18px;
}

/* Navigation link hover effect */
.nav-menu a:hover {
    color: #FFEB3B; /* Yellow text */
    transform: scale(1.05); /* Slight scale up */
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6); /* Glow effect */
}
.nav-menu a:focus {
    outline: 0.5px solid var(--user-color);
    outline-offset: 2px;
}
.nav-menu a i {
    font-size: 22px;
    margin-right: 6px;
    width: 22px;
    text-align: center;
    color: var(--user-color);
    transition: all 0.3s ease;
    margin-left: 8px;
}
.nav-menu a:hover i {
    color: #FFEB3B;
    transform: rotate(15deg);
}
.nav-menu a.home-active i {
    color: #FFEB3B;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.5);
}



.fa-bell.active-notifications {
    color: #FFEB3B !important; /* Yellow for active notifications */
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.5);
}
.fa-bell.user-color {
    color: var(--user-color, ) !important; /* User color when no notifications */
}
/* Fixed hover rule for bell icon */
.nav-menu #notificationsBtn:hover i.fa-bell {
    color: #FFEB3B !important;
    transform: rotate(15deg);
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}
.nav-profile {
    display: flex;
    align-items: center;
    margin-left: 0;
    padding: 3px 12px 3px  8px; /* Adjusted padding */
    border-radius: 100px;
    transition: all 0.3s ease;
    text-decoration: none;
    background: none;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    outline: 0.5px solid var(--user-color);
    will-change: transform; /* Prepares for smooth scaling */
    transform: translateZ(0); /* Hardware acceleration to lock text layout */
}

/* Profile link hover effect */
.nav-profile:hover {
    
    box-shadow: 0 8px 16px var(--user-color, rgba(229, 78, 50, 0.35)) !important;
}

/* Profile link focus state */
.nav-profile:focus {
    outline: 1px solid var(--user-color, rgba(229, 78, 50, 0.8)); /* Stronger outline */
    outline-offset: 2px; /* Offset outline */
}

/* Profile image (non-verified) */
.nav-profile img:not(.verified-badge) {
    width: 38px; /* Fixed width */
    height: 38px; /* Fixed height */
    border-radius: 100%; /* Circle shape */
    object-fit: cover; /* Cover image */
    overflow-clip-margin: unset;
    pointer-events: none; /* Disable clicks */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); /* Subtle shadow */
    transition: transform 0.3s ease; /* Smooth transition */
}

/* Profile image hover effect */
.nav-profile:hover img:not(.verified-badge) {
    transform: scale(1.02); /* Slight scale up */
}

/* Profile info container */
.nav-profile .profile-info {
    display: flex; /* Flex layout */
    flex-direction: column; /* Vertical stacking */
    margin-left: 5px; /* Left spacing */
    pointer-events: none; /* Disable clicks */
}

.nav-profile .nav-custom-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    font-weight: 500;
    color: #FFF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    font-size: 16px;
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    gap: 2px; /* This is the magic – 2px space between name and ALL badges */
}

/* Username in profile */
.nav-profile .nav-username {
    color: var(--user-color);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    font-size: 15px;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 3;
    margin-right: 4;
    display: block;
    font-weight: 500;
}
.button-container {
    display: flex;
    gap: 5px;
    align-items: center;
    position: absolute;
    left: 40%;
    transform: translateX(-9.8%);
    z-index: 1601;
    margin-top: 20px;
}
#pop-btn {
    position: relative;
    display: inline-block;
    background: linear-gradient(135deg, #FFEB3B 0%, #F7C948 100%);
    color: #0A0E17;
    padding: 12px 20px;
    border-radius: 100px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
    transition: all 0.3s ease;
    width: 140px;
    text-align: center;
    letter-spacing: 0.5px;
    border: none;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 6px 15px rgba(255, 235, 59, 0.4);
}

#pop-btn:hover:not(.posting):not(:disabled) {
    transform: scale(1.05);
    background: linear-gradient(135deg, #F7C948 0%, #FFEB3B 100%);
    box-shadow: 0 8px 20px rgba(255, 235, 59, 0.6);
}

#pop-btn:active:not(.posting):not(:disabled) {
    transform: scale(0.98);
    box-shadow: 0 2px 10px rgba(255, 235, 59, 0.3);
}

#pop-btn:focus {
    outline: 0.5px solid rgba(255, 235, 59, 0.4);
    outline-offset: 2px;
}

#pop-btn:disabled {
    filter: grayscale(100%) opacity(1.0);
    cursor: not-allowed;
    box-shadow: none;
}

#pop-btn.posting {
    background: rgba(10, 14, 23, 0.3) !important;
    color: #FFEB3B;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

#pop-btn.posting::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255, 235, 59, 0.2), transparent);
    animation: shimmer 2s infinite;
    z-index: -1;
}
/* Record button styling */
#record-btn {
    position: relative;
    display: inline-block;
    padding: 12px 20px;
    border-radius: 100px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
    transition: all 0.3s ease;
    width: 140px;
    text-align: center;
    letter-spacing: 1px;
    color: #fff;
    text-shadow: 1.2px 1px 2px rgba(0, 0, 0, 1);
    margin-left: 10px;
    border: none;
    overflow: hidden;
    z-index: 1;
    background: transparent;
    /* outline: 1px solid var(--user-color); */
}

/* 🌌 brighter cosmic nebula swirl - enhanced vibrancy with dual custom user color integration for offset effect */
#record-btn::before {
    content: "";
    position: absolute;
    top: -150%;
    left: -150%;
    width: 400%;
    height: 400%;
    border-radius: 50%; /* oversized swirl */
    background: conic-gradient(
        #2a2a5e,
        #4d0099,
        #7d26cd,
        var(--user-color),
        #40e0d0,
        #1e90ff,
        var(--user-color),
        #5a67d8,
        #2a2a5e
    );
    animation: spinSpectrum 12s linear infinite;
    z-index: -2;
    opacity: 1;
}

/* ✨ dark overlay to make text readable */
#record-btn::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background: linear-gradient(135deg, #1A1F2B 0%, #2E3440 100%);
    opacity: 0.92;
    z-index: -1;
}

/* spin animation */
@keyframes spinSpectrum {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



/* Hover state */
#record-btn:hover:not(.recording):not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 4px 12px 4px var(--user-color, rgba(160, 166, 177, 0.05));
}

/* Active state */
#record-btn:active:not(.recording):not(:disabled) {
    transform: scale(0.98);
    box-shadow: 0 2px 10px var(--user-color, rgba(160, 166, 177, 0.2));
}

/* Focus state */
#record-btn:focus {
    outline: 0.5px solid var(--user-color, rgba(160, 166, 177, 0.4));
    outline-offset: 2px;
}

/* Disabled */
#record-btn:disabled {
    filter: grayscale(100%) opacity(0.5);
    cursor: not-allowed;
    box-shadow: none;
}

/* Recording state overrides swirl */
#record-btn.recording {
    background: rgba(10, 14, 23, 0.3) !important;
    color: #FFF;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    animation: recordPulse 1.5s infinite ease-in-out;
}

#record-btn.recording::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    filter: none;
    animation: shimmer 2s infinite;
    z-index: -1;
}

@keyframes recordPulse {
    0% { box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4), 0 0 0 0 var(--user-color); }
    50% { box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4), 0 0 20px 10px var(--user-color); }
    100% { box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4), 0 0 0 0 var(--user-color); }
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

#pop-btn.pulse {
    animation: glowPulse 1.5s infinite ease-in-out;
}

@keyframes glowPulse {
    0% { box-shadow: 0 6px 15px rgba(255, 235, 59, 0.4), 0 0 0 0 rgba(255, 235, 59, 0.7); }
    50% { box-shadow: 0 6px 15px rgba(255, 235, 59, 0.4), 0 0 20px 10px rgba(255, 235, 59, 0.5); }
    100% { box-shadow: 0 6px 15px rgba(255, 235, 59, 0.4), 0 0 0 0 rgba(255, 235, 59, 0.7); }
}

#back-btn, #refresh-btn {
    background: rgba(10, 14, 23, 0.3) !important;
    backdrop-filter: blur(3px) !important;
    color: #FFF;
    border: none;
    padding: 12px 14px;
    border-radius: 100px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 0.5);
    margin-right: 5px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    outline: 1px solid var(--user-color);
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}
#back-btn:hover, #refresh-btn:hover {
    transform: scale(1.05);
    background: rgba(10, 14, 23, 0.7) !important;
    backdrop-filter: blur(3px) !important;
    color: #FFEB3B;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}
#back-btn:focus, #refresh-btn:focus {
    outline: 0.5px solid var(--user-color);
    outline-offset: 2px;
}
#back-btn i, #refresh-btn i {
    font-size: 18px;
    transition: transform 0.3s ease;
}
#back-btn:hover i, #refresh-btn:hover i {
    transform: rotate(15deg);
}
input[type="file"] {
    display: none;
}
/* Upload button */
#upload-btn {
    background: rgba(10, 14, 23, 0.3) !important;
    backdrop-filter: blur(3px) !important;
    color: #FFF; /* White text */
    border: none; /* No border */
    padding: 12px 14px; /* Padding */
    border-radius: 100px; /* Rounded corners */
    cursor: pointer; /* Hand cursor */
    font-size: 18px; /* Font size */
    font-weight: 600; /* Bold text */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 0.5); /* Smooth transition */
    margin-right: 5px; /* Right spacing */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4); /* Shadow */
    outline: 1px solid var(--user-color, ); /* User color outline */
    width: 100%; /* Full width */
    text-align: center; /* Center text */
    box-sizing: border-box; /* Include padding in size */
}

/* Upload button hover effect */
#upload-btn:hover {
    transform: scale(1.05); /* Scale up */
    background: rgba(10, 14, 23, 0.7) !important;
    backdrop-filter: blur(3px) !important;
    color: #FFEB3B; /* Yellow text */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25); /* Adjusted shadow */
}

/* Upload button focus state */
#upload-btn:focus {
    outline: 0.5px solid var(--user-color, rgba(229, 78, 50, 0.4)); /* Subtle outline */
    outline-offset: 2px; /* Offset outline */
}

/* Icon in upload button */
#upload-btn i {
    font-size: 18px; /* Icon size */
    transition: transform 0.3s ease; /* Smooth transition */
}

/* Icon hover effect */
#upload-btn:hover i {
    transform: rotate(15deg); /* Slight rotation */
}
.record-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    gap: 10px;
    margin-top: 15px;
}
.recording-status {
    position: absolute;
    top: calc(95% + 8px);
    margin-left: 15px;
    display: none;
    flex-direction: row;
    align-items: center;
    width: 120px;
    gap: 3px;
    background: none;
    border-radius: 6px;
    padding: 4px 6px;
    letter-spacing: 0.5px;
}
#recording-label {
    color: var(--user-color);
    font-size: 14px;
    font-weight: 600;
    text-shadow: 2px 4px 6px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.5px;
    margin-left: 10px;
}
.recording-status.posting #recording-label {
    display: none;
}
.recording-status #recorded-time {
    color: #FFEB3B;
    font-size: 14px;
    font-weight: 600;
    position: static;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    animation: yellowGlow 1.2s infinite ease-in-out;
}
#recorded-time.processing {
    position: absolute;
    margin-top: 14px;
    left: 180px;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 120px;
    gap: 5px;
    font-size: 14px;
    color: #FFEB3B;
    background: none;
    border-radius: 6px;
    animation: yellowGlow 1.2s infinite ease-in-out;
    letter-spacing: 0.5px;
}
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}
@keyframes yellowGlow {
    0% { text-shadow: 0 0 6px rgba(255, 235, 59, 0.7); }
    50% { text-shadow: 0 0 12px rgba(255, 235, 59, 1), 0 0 18px rgba(255, 235, 59, 0.6); }
    100% { text-shadow: 0 0 6px rgba(255, 235, 59, 0.7); }
}
.post-cooldown {
    position: absolute;
    margin-top: 75px;
    left: 178px;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 120px;
    gap: 4px;
    font-size: 14px;
    color: #FFF;
    background: none;
    border-radius: 6px;
    padding: 4px 6px;
}
#cooldown-label,
#cooldown-time {
    color: #00A1D6;
    font-size: 14px;
    font-weight: 600;
    text-shadow: 0 0 6px rgba(0, 161, 214, 0.95);
    animation: pulseGlow 1.2s infinite ease-in-out;
}
@keyframes pulseGlow {
    0% { text-shadow: 0 0 6px rgba(0, 161, 214, 0.8); }
    50% { text-shadow: 0 0 12px rgba(0, 161, 214, 1), 0 0 18px rgba(0, 161, 214, 0.9); }
    100% { text-shadow: 0 0 6px rgba(0, 161, 214, 0.8); }
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.category-link,
.state-link,
.city-link {
    font-size: 16px;
    font-weight: 400;
    color: #cfd8dc;
    text-decoration: none;
    font-style: italic;
    position: relative;
    z-index: 999999999;
    transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease, letter-spacing 0.3s ease;
    display: inline-block;
    text-align: right;
    margin-top: -5px;
    margin-bottom: 8px;
}
.category-link {
    margin-left: 0px;
}
.city-link {
    margin-left: 8px;
}
.category-link:hover,
.category-link:focus,
.city-link:hover,
.city-link:focus,
.state-link:hover,
.state-link:focus {
        text-shadow: 
        0 0 4px rgba(255, 255, 255, 0.8),
        0 0 25px var(--post-color, #FFEB3B),
        0 0 40px rgba(255, 235, 59, 0.8),
        0 0 55px rgba(255, 165, 0, 0.6);
    color: #FFF;
    transform: scale(1.05);
    letter-spacing: 0.5px;
    font-style: italic;
    z-index: 999999999;
}



.post-map {
    height: 280px;
    width: 100%;
    margin: 5px 0 10px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
    filter: brightness(0.9) contrast(1);
}
.main-container {
    max-width: 680px;
    width: 100%;
    margin: 25px auto;
    padding: 10px;
    box-sizing: border-box;
    z-index: 1500;
}
.container {
    max-width: 680px;
    width: 100%;
    margin-top: 84px;
}
#post-container {
    margin-top: 60px;
    
}
.posts {
    padding-bottom: 30px;
    
}
/* Individual post styling */
.post {
    background: rgba(10, 14, 23, 0.5) !important;  /* Glass-like: Your specified rgba */
    backdrop-filter: blur(3px) !important;  /* 8px blur for glass effect */
    padding: 16px; /* Padding */
    border-radius: 16px; /* Rounded corners */
    margin-bottom: 20px; /* Bottom spacing */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7), -1px 0 5px var(--post-color); /* Shadow with color accent */
    position: relative; /* For absolute children */
    overflow: hidden; /* Clip content */
    display: flex; /* Flex layout */
    flex-direction: column; /* Vertical stacking */
    width: 100%; /* Full width */
    box-sizing: border-box; /* Include padding in size */
    transition: all 0.3s ease; /* Smooth transition */
    transform: perspective(1000px) rotateX(0deg); /* 3D effect */
    z-index: 1500;
    cursor: pointer;
    outline: 1px solid color-mix(in srgb, var(--post-color, #1E90FF) 30%, transparent);

}

.post::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, transparent, var(--post-color), transparent);
    background-size: 165% 165%;
    animation: wave2 14s ease-in-out infinite;
    opacity: 0.26; /* Subtle over holo—tweak to 0.2 for fainter or 0.3 for bolder */
    z-index: -1; 
    border-radius: inherit; 
    pointer-events: none; 
}


/* Post hover effect */
.post:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), -1px 0 5px var(--post-color, var(--post-color, #F19221));
}


.new-members-box {
    width: 100%; /* Full width */
    height: 315px; /* Fixed height for 3 users */
    background: rgba(10, 14, 23, 0.1) !important;  /* Glass-like: Your specified rgba */
    backdrop-filter: blur(3px) !important;  /* 8px blur for glass effect */
    border-radius: 16px; /* Rounded corners */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); /* Shadow */
    box-sizing: border-box; /* Include padding in size */
    display: flex; /* Flex layout */
    flex-direction: column; /* Vertical stacking */
    transition: all 0.3s ease; /* Smooth transition */
    margin-bottom: 10px;
    overflow: hidden;
}
.new-members-box:hover {
    
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
}




.new-members-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--user-color) 50%, transparent);
    opacity: 0.12;
    animation: wave 28s infinite ease-in-out;
    z-index: -1;
    border-radius: 16px; /* Matches header radius; adjust if needed */
}
/* FORCE the content-box to NEVER cover the new-members blur – holo ON or OFF */
.content-box {
    background: transparent !important;           /* <-- this is the key */
    pointer-events: auto !important;              /* still clickable */
}

/* Keep the pretty neon border but make sure the fill stays transparent */

.content-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--user-color) 50%, transparent);
    opacity: 0.12;
    animation: wave 28s infinite ease-in-out;
    z-index: -1;
    border-radius: 16px; /* Matches header radius; adjust if needed */
}


.content-box::after {
    background: transparent !important;
}


/* FIXED: New members title top radius (inherits box curve, no bottom) */
.new-members-title {
color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
    text-align: left;
    padding-left: 30px;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid var(--user-color, );
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(3px) !important;
    border-radius: 16px 16px 0 0;
    height: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 30px;
    border-top: 1px solid color-mix(in srgb, var(--user-color) 30%, transparent);
}
.new-members-list {
    flex: 1; /* Grow to fill space */
    overflow-y: auto; /* Vertical scroll */
    overflow-x: hidden; /* No horizontal scroll */
    scrollbar-width: thin; /* Firefox - slim scrollbar */
    scrollbar-color: var(--user-color) #0A0E17; /* Firefox - thumb user color, track #0A0E17 */
    -ms-overflow-style: auto; /* IE - show scrollbar */
}

/* Style Webkit scrollbar */
.new-members-list::-webkit-scrollbar {
    width: 8px; /* Width of the vertical scrollbar */
}

.new-members-list::-webkit-scrollbar-track {
    background: rgba(10, 14, 23, 0.3) !important; /* Dark track matching dropdown */
    border-radius: 4px; /* Rounded edges */
}

.new-members-list::-webkit-scrollbar-thumb {
    background: var(--user-color); /* User color thumb */
    border-radius: 4px; /* Rounded edges */
}

.new-members-list::-webkit-scrollbar-thumb:hover {
    background: var(--user-color); /* Maintain user color on hover */
}
/* NEW-MEMBER-ITEM — now perfectly matched to trending-item */
.new-member-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 8px 19px;           /* same padding logic */
    cursor: pointer;
    transition: all 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
    width: 100%;
    border-bottom: 1px solid #2E3440;
    position: relative;
    box-sizing: border-box;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}

.new-member-item:hover,
.new-member-item:focus {
    background: rgba(40, 48, 70, 0.38) !important;        /* same lighter hover */
    
    transform: translateY(-4px) scale(1.02);
    box-shadow: 
        0 12px 28px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(var(--user-color-rgb, 255, 127, 0), 0.28);
    
    z-index: 1;
}

.new-member-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    overflow-clip-margin: unset;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.new-member-info {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    pointer-events: none;
    min-width: 0;
    margin-top: 0px;
}
.new-member-custom-name {
    color: #FFF;
    font-size: 16px;
    font-weight: 600;
    margin-right: 1px;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
    transition: all 0.3s ease;
    margin-left: 6px;
}
.new-member-custom-name:hover,
.new-member-custom-name:focus {
    color: #FFEB3B;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}
.new-member-username {
    color: #E0E7FF;
    font-size: 16px;
    margin-top: 0;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
    transition: all 0.3s ease;
    margin-left: 1px;
}
.new-member-username:hover,
.new-member-username:focus {
    color: #FFEB3B;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}
.new-member-time {
    font-size: 12px;
    margin-left: auto;
    padding-right: 38px;
    flex-shrink: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    color: #E0E7FF;
}
.right-container {
    width: 585px; /* Fixed width */
    border-radius: 16px; /* Rounded corners */
    padding: 15px; /* Padding */
    height: fit-content; /* Fit content height */
    position: fixed; /* Fixed to viewport */
    top: 90px; /* Below top bar */
    right: calc(50% - 950px); /* Right offset */
    z-index: 1600; /* High stacking order */
}
.search-bar-container {
    position: relative;
    width: 100%;
    margin: 12px 0 10px;
    display: inline-block;
}
/* Search input field */
.search-bar {
    width: 100%;
    padding: 12px 45px 12px 15px;
    background: rgba(10, 14, 23, 0.7) !important;  /* Glass-like: Your specified rgba */
    backdrop-filter: blur(3px) !important;  /* 8px blur for glass effect */
    border: none;
    border-radius: 100px;
    color: #FFF;
    font-size: 16px;
    font-family: 'Exo 2', sans-serif;
    transition: all 0.3s ease;
    box-sizing: border-box;

    outline: 0.5px solid var(--user-color, ); /* User color border */
    height: 45px;
}
.search-bar:focus {
    box-shadow: 0 8px 16px var(--user-color, rgba(229, 78, 50, 0.35));
    transform: scale(1.01);
    outline: 1px solid var(--user-color, ); /* User color border */
}
.search-bar::placeholder {
    color: #FFF;
    opacity: 0.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.search-icon-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #FFF;
    position: absolute;
    right: 10px;
    top: 12px;
    transform: none;
}
.search-icon-btn i {
   
    line-height: 1;
}
.search-icon-btn::-moz-focus-inner {
    border: 0;
    padding: 0;
}
.search-bar-container:hover .search-icon-btn {
    color: #FFEB3B;
    transform: none;
}
/*zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz*/



.upgrade-text {
color: #FFF;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    margin-right: 0px;
    padding: 0 10px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    letter-spacing: .3;
    margin-bottom: -8px;
}
.upgrade-text span {
    color: var(--accent-color, #FFEB3B);
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
    font-size: 20px; /* Larger than .upgrade-text */
    margin-left: -1px;
}
.upgrade-btn {
    background: linear-gradient(135deg, var(--user-color) 0%, var(--user-color) 100%);
    color: #FFF;
    border: none;
    padding: 12px 20px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 1.2px 1px 2px rgba(0, 0, 0, 1);
    display: block;
    margin: 0px auto 0;
}
.upgrade-btn:hover,
.upgrade-btn:focus {
    transform: scale(1.05);
    background: linear-gradient(135deg, var(--user-color) 0%, var(--user-color) 100%);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
}


.load-more-btn {
    display: block;
    margin: 20px auto;
    padding: 12px 24px;
    font-size: 16px;
}
.load-more-btn:disabled {
    filter: grayscale(70%) opacity(0.7);
    cursor: not-allowed;
    box-shadow: none;
}
.empty-message {
    background: linear-gradient(135deg, #1A1F2B 0%, #2E3440 100%);
    padding: 20px;
    border-radius: 16px;
    text-align: center;
    color: #FFF;
    font-size: 18px;
    font-weight: 600;
    margin-top: 350px;
}
.post-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 5px;
}
.header-left {
display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-left: 15px;
}
.user-info {
    flex-direction: row;
    align-items: center;
    gap: 0px;
    min-width: 0;
}
.post-header img {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    object-fit: cover;
    overflow-clip-margin: unset;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.35));
    transition: transform 0.3s ease;
}
.post-header img:hover {
    transform: scale(1.05);
}
.post-header a {
    text-decoration: none;
    color: #E0E7FF;
    transition: all 0.3s ease;
}

.post-header .username {
    margin-left: 1px;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.post-header .custom-name {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    margin-right: -2px;
    cursor: pointer;
}
.post-header .custom-name {
    font-weight: 600;
    color: #FFF;
}
.post-header .custom-name:hover,
.post-header .custom-name:focus,
.post-header .username:hover,
.post-header .username:focus {
    color: #FFEB3B;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); /* Subtle shadow */
}
.post-content {
    position: relative;
    width: 100%;
}
.post-content .location,
.post-content p,
.transcription {
    color: #cfd8dc;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.post .transcription {
    color: #cfd8dc;
    margin-top: -25px;
    font-size: 16px;
    margin-right: -10px;
    margin-bottom: 6px;
    text-align: left;          /* Explicitly left-aligns the text */
    overflow-wrap: break-word; /* Ensures long words wrap nicely without overflowing to the right */
    
}

.post-content p {
    
    font-size: 16px;
    line-height: 1.3;
    margin-left: 0px;
    
    margin-right: 15px;
    text-align: center;  /* Add this line for center alignment */
}

.transcription {
    margin-top: -4px;
    font-size: 16px;
    line-height: 1.3;
    margin-left: 0px;
    margin-bottom: 4px;
    margin-right: 0px;
}
.transcription {
    word-wrap: break-word;
    margin: 10px 0;
}

.map-hint {
    margin-top: -6px;
    position: absolute;
    right: 6;
    color: #E0E7FF;
    font-size: 10px;
    border-radius: 4px;
    z-index: 999999999;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.popped-in {
    color: var(--user-color);
    font-weight: 600;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}
.audio-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 600px;
    border-radius: 16px;
    padding: 10px 15px;
    margin-bottom: -10px;
}
.controls {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}
.controls button {
    background: none;
    border: none;
    color: #FFF;
    font-size: 18px;
    cursor: pointer;
    padding: 6px;
    transition: all 0.3s ease;
}
.controls button:hover {
    color: #FFEB3B;
    transform: scale(1.1);
}
.waveform-container {
    width: 100%;
    height: 70px;
    overflow: hidden;
    display: block;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    
}
.time-volume {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 8px;
    gap: 10px;
}
/* Time display */
.time-display {
    color: #FFF;
    font-size: 12px; /* Font size */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); /* Subtle shadow */
    flex: 1; /* Grow to fill space */
}
/* Play/pause button */
.play-pause-btn {
    flex: 0 0 auto; /* Don't grow/shrink */
    background: none;
    border: none;
    color: var(--post-color, #FFEB3B);
    font-size: 36px;
    width: 50px; /* Larger hitbox */
    height: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    z-index: 20; /* Higher to avoid overlap */
    outline: none; /* Remove focus outline issues */
    margin-top: 0px;
    margin-right: -10px;
    
}


/* Ensure icon fills button */
.play-pause-btn i {
    font-size: 36px;
    line-height: 50px;
    width: 100%;
    height: 100%;
    text-align: center;
    margin-top: 0px;
    
}

/* Play/pause button hover and focus */
.play-pause-btn:hover,
.play-pause-btn:focus {
    transform: scale(1.05); /* Scale up */
    animation: flash 0.4s ease-in-out; /* Flash animation */
}

/* Play/pause button active state */
.play-pause-btn:active {
    color: #FFF; /* White icon */
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 25px rgba(255, 235, 59, 0.6); /* Glow effect */
    transform: scale(1.1); /* Scale up */
    
}

/* ───── PLAY BUTTON — VISIBLE KEYBOARD FOCUS (exactly like switches) ───── */
.play-pause-btn:focus-visible,
.play-pause-btn:focus {
    outline: 3px solid var(--post-color) !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 16px rgba(0, 212, 255, 0.8) !important;
    /*margin-right: 15px;*/
}

/* Gold glow when the post is playing and focused */
.audio-player.playing .play-pause-btn:focus-visible,
.audio-player.playing .play-pause-btn:focus {
    outline: 3px solid #FFEB3B !important;
    box-shadow: 0 0 18px rgba(255, 235, 59, 0.9) !important;
    /*margin-right: 15px;*/
}

/* Volume control container */
.volume-control {
    display: flex; /* Flex layout */
    align-items: center; /* Center vertically */
    gap: 3px; /* Spacing between items */
    flex: 1; /* Grow to fill space */
    justify-content: flex-end; /* Right align */
    margin-right: 20px;
}

/* Volume button */
.volume-btn {
    background: none; /* No background */
    border: none; /* No border */
    color: var(--post-color); 
    font-size: 18px; /* Icon size */
    cursor: pointer; /* Hand cursor */
    transition: all 0.3s ease; /* Smooth transition */
}

/* Volume button hover effect */
.volume-btn:hover {
     /* Yellow icon */
    transform: scale(1.1); /* Scale up */
}

/* Volume slider */
.volume-slider {
    width: 80px; /* Fixed width */
    -webkit-appearance: none; /* Remove default styling */
    background: #1A1F2B !important; /* Gray background */
    border-radius: 6px; /* Rounded corners */
    height: 6px; /* Thin height */
    transition: background 0.3s ease; /* Smooth transition */
    opacity: 1;
}

/* Volume slider hover effect */
.volume-slider:hover {
    background: #1A1A1A; /* Lighter gray */
}

/* Volume slider thumb (Webkit) */
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Remove default styling */
    width: 14px; /* Fixed width */
    height: 14px; /* Fixed height */
    background: var(--post-color, #FFEB3B); /* User color thumb */
    border-radius: 50%; /* Circle shape */
    cursor: pointer; /* Hand cursor */
    box-shadow: 0 2px 6px var(--post-color, rgba(255, 235, 59, 0.5)); /* Subtle shadow */
}

/* Volume slider thumb (Mozilla) */
.volume-slider::-moz-range-thumb {
    width: 14px; /* Fixed width */
    height: 14px; /* Fixed height */
    background: var(--post-color, #FFEB3B); /* User color thumb */
    border-radius: 50%; /* Circle shape */
    cursor: pointer; /* Hand cursor */
    box-shadow: 0 2px 6px var(--post-color, rgba(255, 235, 59, 0.5)); /* Subtle shadow */
}

/* Audio seek bar */
.audio-player .seek-bar {
    width: 99%; /* Nearly full width */
    height: 10px; /* Fixed height */
    background: linear-gradient(90deg, #2E3440 0%, #1A1F2B 100%); /*instruction Gradient background */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Hand cursor */
    -webkit-appearance: none; /* Remove default styling */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35); /* Subtle shadow */
    transition: background 0.3s ease; /* Smooth transition */
}

/* Seek bar hover effect */
.audio-player .seek-bar:hover {
    background: linear-gradient(90deg, #3B4455 0%, #1A1F2B 100%); /* Lighter gradient */
}

/* Seek bar thumb styling (all browsers) */
.audio-player .seek-bar::-webkit-slider-thumb,
.audio-player .seek-bar::-moz-range-thumb,
.audio-player .seek-bar::-ms-thumb {
    width: 14px; /* Fixed width */
    height: 14px; /* Fixed height */
    background: var(--post-color, #F19221); /* User color thumb */
    box-shadow: 0 2px 6px var(--post-color, rgba(241, 146, 33, 0.6)); /* Subtle shadow */
}
.post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 5px -5px;
}
.like-container,
.comment-container,
.report-container,
.share-container {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.play-container {
display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 50px;
    position: absolute;
    /* top: 55px; */
    right: 0px;
}

/* Mobile view: keep play-container in upper right */
@media (max-width: 768px) {
    .play-container {
        position: absolute;
        top: 15px; /* Stay in upper right */
        right: -10px;
        margin: 0; /* Prevent margin shifts */
        flex-shrink: 0;
        min-width: 60px;
    }
}
.like-button,
.report-button,
.share-button,
.comment-link {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--post-color);
    font-size: 16px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    text-decoration: none;
}
.like-button:hover:not(.liked),
.like-button:focus:not(.liked),
.report-button:hover,
.report-button:focus,
.share-button:hover,
.share-button:focus,
.comment-wrapper i.fa-regular:hover {
    text-shadow: 
        0 0 4px rgba(255, 255, 255, 0.8),
        0 0 25px var(--post-color, #FFEB3B),
        0 0 40px rgba(255, 235, 59, 0.8),
        0 0 55px rgba(255, 165, 0, 0.6);
    color: #FFF;
}
.like-button.liked {
    color: var(--post-color);
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}
.like-button.liked:hover,
.like-button.liked:focus {
    text-shadow: 
        0 0 4px rgba(255, 255, 255, 0.8),
        0 0 25px var(--post-color, #FFEB3B),
        0 0 40px rgba(255, 235, 59, 0.8),
        0 0 55px rgba(255, 165, 0, 0.6);
    color: #FFF;
}
.like-button i,
.report-button i {
    font-size: 16px;
    vertical-align: middle;
    transition: all 0.3s ease;
    margin-right: 4px;
}
.like-button:hover i {
    transform: scale(1.1);
}
.like-count,
.play-count,
.report-button span {
    color: #FFF;
    font-size: 14px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    margin-left: 1px;
}

.play-count {
    margin: 3 15px 5 0px;
    font-size: 16px;
}
.report-button i.reported {
    color: var(--post-color);
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}
.report-button:hover span,
.report-button:focus span {
    color: var(--post-color);
    transform: scale(1.1);
}
.share-button {
    padding: 5px;
}
.share-button:hover,
.share-button:focus {
        text-shadow: 
        0 0 4px rgba(255, 255, 255, 0.8),
        0 0 25px var(--post-color, #FFEB3B),
        0 0 40px rgba(255, 235, 59, 0.8),
        0 0 55px rgba(255, 165, 0, 0.6);
    color: #FFF;

    transform: scale(1.1);
}
.share-button:active {
    transform: scale(1);
}
.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 14, 23, 0.3);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(3px);
    animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.popup-content {
    background: rgba(10, 14, 23, 0.3);
    padding: 50px;
    border-radius: 16px;
    max-width: 420px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--user-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(3px);
}
.popup-content:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.85), 0 0 15px rgba(0, 0, 0, 0.4);
}
.popup-content p {
    margin: 0 0 20px;
    color: #FFF;
    font-size: 16px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 6px rgba(255, 235, 59, 0.2);
    line-height: 1.5;
}
.popup-content button {
    color: #FFF;
    border: none;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    min-width: 50px;
    background: linear-gradient(135deg, var(--user-color) 0%, var(--user-color) 100%);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.popup-content button:hover,
.popup-content button:focus {
    transform: scale(1.05);
    background: linear-gradient(135deg, var(--user-color) 0%, var(--user-color) 100%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 10px rgba(255, 235, 59, 0.3);
    outline: 0.5px solid var(--user-color);
    outline-offset: 2px;
}
.map-reset-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 28px;
    color: #4A5568;
    z-index: 1000;
    transition: all 0.3s ease;
}
.map-reset-button:hover,
.map-reset-button:focus {
    transform: scale(1.10);
    cursor: pointer;
}

.user-info .verified-badge {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
    margin-right: -3px;
    margin-bottom: 2px;
    margin-left: 0px;
    margin-top: 5px;
}

/* Specific control in new-members-box */
.new-members-box .new-member-info .verified-badge {
    margin-top: 3px;
    margin-right: 0px;
    width: 18px !important;
    height: 18px !important;
    margin-left: 0;
    backdrop-filter: blur(3px) !important;
}

/* New member item styling */
.new-members-box .new-member-item {
    display: flex; /* Flex layout */
    align-items: center; /* Center vertically */
    justify-content: space-between; /* Space between items */
    padding: 8px 0; /* Vertical padding */
    cursor: pointer; /* Hand cursor */
    transition: all 0.3s ease; /* Smooth transition */
    width: 100%; /* Full width */
    border-bottom: 1px solid #2E3440; /* Bottom border */
    
    
}
.new-members-box .new-member-item img:not(.verified-badge) {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    overflow-clip-margin: unset;
    margin: 0 0px 0 0px;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}




.audio-preview {
    position: absolute;
    top: calc(95% + 8px);
    left: 32px;
    display: none;  /* <-- CHANGE: none instead of flex (hidden by default) */
    align-items: center;
    gap: 4px;
    width: 117px;
    border-radius: 6px;
    z-index: 1;
    padding: 3px 4px;
}
.play-pause-preview {
    background: none; /* No background */
    border: none; /* No border */
    color: var(--user-color, #FFEB3B); /* User color */
    font-size: 18px; /* Icon size */
    cursor: pointer; /* Hand cursor */
    padding: 1px; /* Minimal padding */
    margin-right: 5px; /* Right spacing */
    transition: all 0.3s ease; /* Smooth transition */
}

/* Play/pause preview hover and focus */
.play-pause-preview:hover,
.play-pause-preview:focus {
    color: var(--user-color, ); /* User color */
    transform: scale(1.10); /* Scale up */
    text-shadow: 0 0 6px var(--user-color, rgba(229, 78, 50, 0.6)); /* Glow effect */
}
.seek-bar-preview {
    width: 60px;
    background: linear-gradient(90deg, #2E3440 0%, #1A1F2B 100%);
    border-radius: 3px;
    cursor: pointer;
    -webkit-appearance: none;
    outline: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
    transition: background 0.3s ease;
}
.seek-bar-preview:hover {
    background: linear-gradient(90deg, #3B4455 0%, #1A1F2B 100%);
}
.seek-bar-preview::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    background: var(--post-color);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}
.time-display-preview {
    display: none;
    color: #FFF;
    font-size: 14px;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.comment-link {
    display: flex;
    align-items: center;
    font-size: 16px;
}
.comment-wrapper {
    display: flex;
    color: var(--post-color);
    align-items: center;
    cursor: pointer;
}
.comment-wrapper i.fa-solid,
.comment-wrapper i.fa-regular {
    color: var(--post-color);
    transition: all 0.3s ease;
}
.comment-wrapper i.fa-solid:hover {
    text-shadow: 
        0 0 4px rgba(255, 255, 255, 0.8),
        0 0 25px var(--post-color, #FFEB3B),
        0 0 40px rgba(255, 235, 59, 0.8),
        0 0 55px rgba(255, 165, 0, 0.6);
    color: #FFF;
    transform: scale(1.1);
}
.popup.geolocation-error p {
    color: var(--user-color);
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.cancel-post-btn {
    position: absolute;
    left: 56%;
    top: calc(100% + 8px);
    background: none;
    border: none;
    color: var(--user-color);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
    animation: userColorGlow 1.2s infinite ease-in-out;
}
.cancel-post-btn:hover,
.cancel-post-btn:focus {
    color: #FFEB3B;
}
@keyframes userColorGlow {
    0% { text-shadow: 0 0 6px var(--user-color); }
    50% { text-shadow: 0 0 12px var(--user-color), 0 0 18px var(--user-color); }
    100% { text-shadow: 0 0 6px var(--user-color); }
}
.comments-separator {
    margin: 20px 0;
    text-align: center;
    position: relative;
    height: 5px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.comments-separator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, transparent, var(--user-color) 50%, transparent);
    animation: wave 3s infinite ease-in-out;
}

.play-repeat-icon {
color: var(--post-color);
    font-size: 16px;
    margin-right: 6px;
    transition: all 0.3s ease;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: -25px;
    margin-top: 0px;
}

#game-container {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: transparent;
    top: 50px;
}
.game-box {
    top: 2px;
    width: 100%;
    height: 310px;
    border: 1px solid var(--user-color);
    border-radius: 16px;
    position: relative; /* To position selector absolutely inside */
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); /* Shadow */
}

.game-selector {
    background: none; /* Yellow background */
    color: #E0E7FF; /* White icons */
    display: flex;
    justify-content: start; /* Centered */
    align-items: center;
    gap: 10px; /* Space between icons */
    padding: 8px 0; /* Small vertical padding */
    position: absolute; /* Hovering at top */
    top: 8;
    left: 30;
    width: 100%;
    z-index: 10; /* Above iframe */
    font-size: 12px; /* Small icons */
}

.game-selector i {
    cursor: pointer;
    padding: 8px;
    border-radius: 0%; /* Round hover bg */
    transition: background 0.3s;
}

.game-selector i:hover {
    background: rgba(0, 0, 0, 0.2); /* Dark hover for visibility */
}

.game-selector i.active {
    border: solid 1px var(--user-color, );
    
}
#game-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    width: 100%;
    height: 100%;
}
.game-box iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background: rgba(10, 14, 23, 0.1) !important;
    backdrop-filter: blur(3px);
    position: relative;
}

.game-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--user-color) 50%, transparent);
    opacity: 0.15;
    animation: wave 28s infinite ease-in-out;
    z-index: -1;
    border-radius: 16px; /* Matches header radius; adjust if needed */
}


.lobby-creation {
    background: #1A1F2B;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
}
.lobby-creation input {
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
    background: #2E3440;
    border: none;
    color: #FFF;
    border-radius: 5px;
}
.lobby-creation button {
    background: var(--user-color);
    color: #FFF;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}
.whos-here-box,
.invite-members-box {
    background: #1A1F2B;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}
.whos-here-title,
.invite-members-title {
    font-size: 18px;
    color: #FFF;
    margin-bottom: 10px;
}
.whos-here-list,
.invite-members-list {
    max-height: 200px;
    overflow-y: auto;
}
.whos-here-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #2E3440;
}
.whos-here-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}
.whos-here-info {
    flex: 1;
}
.whos-here-custom-name {
    color: #FFF;
    font-weight: bold;
    text-decoration: none;
}
.whos-here-username {
    color: #E0E7FF;
    text-decoration: none;
}

/* overide v */
/* New member item - pack left, push buttons right */
.new-members-box .new-member-item {
    padding-left: 20px;
    justify-content: flex-start; /* Pack left instead of space-between */
    gap: 0px; /* Add small gap between image, info, and buttons to control spacing */
}

.nav-profile .super-badge,
.nav-profile .legend-badge {
    height: 16px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Action buttons wrapper - push to right with controlled gap */
.action-buttons {
    display: flex;
    align-items: center;
    gap: 6px; /* Tight space between bars, speaker mute, mic mute */
    margin-left: auto; /* Pushes the whole button row to the right */
    margin-right: 8px; /* Small right margin to avoid edge flush */
}

/* Reduce image margin to bring info closer */


/* New member info - allow shrinking to fit closer */
.new-members-box .new-member-info {
    flex: 1;
    min-width: 0; /* Already there, but ensures it shrinks if needed */
    gap: 1px;
}

/* overide ^ */

.kick-form,
.invite-form,
.action-form {
    display: inline-block;
}



.kick-btn, .invite-btn, .action-btn  {
    background: var(--user-color, );
    color: #FFF;
    border: none;
    padding: 5px 8px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 12px;
    margin-right: 35px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0px;
    min-width: 40px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    font-weight: 500;
    letter-spacing: 1px;
}
/* Button hover effects */
.kick-btn:hover, .invite-btn:hover, .action-btn:hover {
    background: var(--user-color, #F19221); /* User color */
    transform: scale(1.05); /* Scale up */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease;
}
.invite-btn {
    background: #28A745;
}
.action-form {
    margin-left: 10px;
}
.time-ago {
    font-size: 16px;
    color: #E0E7FF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.report-button.reported {
    color: var(--post-color);
}
#search-form {
    margin-block-end: 0;
}




/* ==========================================================================
   Muted Users Popup Styling for NotificationPopup6
   ========================================================================== */
#notificationPopup6 {
    display: none;
    position: fixed;
    top: 114px;
    right: 0;
    left: auto;
    width: 615px;
    height: calc(100% - 110px);
    border-radius: 16px;
    z-index: 15000;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.8);
    transition: transform 0.3s ease-out;
    transform: translateX(100%);
    padding-left: 0;
    padding-right: 0;
    margin: 0;
}

#notificationPopup6::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--user-color) 50%, transparent);
    opacity: 0.12;
    animation: wave 28s infinite ease-in-out;
    z-index: -1;
    border-radius: 16px; /* Matches header radius; adjust if needed */
}

#notificationPopup6.open {
    display: block;
    transform: translateX(0);
}

#notificationPopup6 .notification-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#notificationPopup6 .notification-header2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid var(--user-color, #D32F2F);
    height: 40px;
    position: relative;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    backdrop-filter: blur(3px);
    border-top: 1px solid color-mix(in srgb, var(--user-color) 30%, transparent);
}

#notificationPopup6 #notificationTitle6 {
    color: #FFF;
    font-size: 20px;
    font-weight: 600;
    margin-left: 10px;
    line-height: 1;
    text-align: center;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.6);
}

#notificationPopup6 #closeNotificationBtn6 {
    background: none;
    border: none;
    color: #E0E7FF;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    margin-right: 35px;
    font-weight: light;
    line-height: 1;
    margin-top: 0px;
}

#notificationPopup6 #closeNotificationBtn6:hover,
#notificationPopup6 #closeNotificationBtn6:focus {
    color: #FFEB3B;
    transform: translateX(3px);
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

#notificationPopup6 .notification-list {
    padding: 20px;
    height: calc(100% - 60px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--user-color, #D32F2F) #1A1F2B;
    -ms-overflow-style: auto;
    position: relative;
    scroll-behavior: smooth;
}

#notificationPopup6 .notification-list::-webkit-scrollbar {
    width: 8px;
}

#notificationPopup6 .notification-list::-webkit-scrollbar-track {
    background-color: #0A0E17;
    border-radius: 4px;
}

#notificationPopup6 .notification-list::-webkit-scrollbar-thumb {
    background-color: var(--user-color, #D32F2F);
    border-radius: 4px;
}

#notificationPopup6 .notification-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--user-color, #D32F2F);
}

/* Follow Entry Styling */
#notificationPopup6 .follow-entry {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    background: rgba(46, 52, 64, 0.5);
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 5px solid #D32F2F;
    gap: 10px;
    overflow: hidden;
    position: relative;
    animation: slideIn 0.5s ease-out forwards;
    cursor: pointer;
    padding: 5px 0;
}

#notificationPopup6 .follow-entry:hover {
    background: rgba(46, 52, 64, 0.9);
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
    border-left-width: 6px;
}

#notificationPopup6 .follow-left {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 4px;
}

#notificationPopup6 .notif-profile-pic {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 5px 0px 5px 15px;
    object-fit: cover;
    overflow-clip-margin: unset;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

#notificationPopup6 .follow-entry:hover .notif-profile-pic {
    transform: rotate(10deg) scale(1.1);
}

#notificationPopup6 .follow-content {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    position: relative;
    padding-right: 80px; /* Space for unmute-btn */
    gap: 10px; /* Space between user-info and muted text */
}

#notificationPopup6 .user-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0px;
    flex-shrink: 0;
}

#notificationPopup6 .custom-name {
    color: #FFF;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    margin-top: 5px;
    margin-left: 5px;
}

#notificationPopup6 .custom-name:hover,
#notificationPopup6 .custom-name:focus {
    color: #FFEB3B;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

#notificationPopup6 .custom-name a {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
}

#notificationPopup6 .custom-name a:hover,
#notificationPopup6 .custom-name a:focus {
    color: #FFEB3B;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

#notificationPopup6 .verified-badge {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-top: 10px;
    margin-right: 0px;
    margin-left: 2px;
}

#notificationPopup6 .username {
    color: #E0E7FF;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 5px;
    margin-right: 0px;
}

#notificationPopup6 .username:hover,
#notificationPopup6 .username:focus {
    color: #FFEB3B;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

#notificationPopup6 .follow-content p {
    font-size: 14px;
    color: #FFF;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

#notificationPopup6 .follow-content .time {
    font-size: 14px;
    color: #E0E7FF;
}

/* Unmute Button Styling */
#notificationPopup6 .unmute-btn {
    background: linear-gradient(135deg, #1A1F2B 0%, #2E3440 100%);
    color: #FFF;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    max-width: 65px;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    position: absolute;
    right: 30px;
}

#notificationPopup6 .unmute-btn:hover,
#notificationPopup6 .unmute-btn:focus {
    background: linear-gradient(135deg, #2E3440 0%, #1A1F2B 100%);
    color: #FFEB3B;
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

#notificationPopup6 .unmute-btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Muted Users Tally (Optional) */
.muted-users-tally {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--user-color, #D32F2F);
    color: #FFF;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 50%;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    
}

/* Holo Layer for Header 
#notificationPopup6 .holo-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(211, 47, 47, 0.1), rgba(255, 235, 59, 0.1));
    opacity: 1;
    z-index: -1;
}*/

/* Loading and Error Messages */
#notificationPopup6 .notification-list p {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    margin: 0 0 0 2px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    margin-top: 5px;
}

#notificationPopup6 .notification-list p[style*="color: #FFF"] {
    color: #FFF;
}

#notificationPopup6 .notification-list p[style*="color: #FF6B4F"] {
    color: #FF6B4F;
}




/* ==========================================================================
   View Profile Popup Block CSS (#viewProfilePopup)
   Based on NotificationPopup2 styles but for display only.
   Added will-change property for potential performance improvement. C0
   ========================================================================== */

#viewProfilePopup {
    display: none;
    position: fixed;
    top: 114px;
    right: 0;
    left: auto;
    width: 615px;
    height: calc(100% - 110px);
    z-index: 3000;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.8);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    transform: translateX(100%);
    opacity: 0;
    padding-left: 0;
    padding-right: 0;
    background: rgba(10, 14, 23, 0.3);
    backdrop-filter: blur(3px);
    border-radius: 16px
    overflow: hidden;
}

#viewProfilePopup::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, transparent, var(--profile-color), transparent);
    background-size: 600% 600%;
    animation: wave2 15s ease-in-out infinite;
    opacity: 0.3;
    z-index: -2;
    border-radius: 16px;
    
}

@keyframes wave2 {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


@keyframes wave {
    0% { transform: translateX(-5%); }
    50% { transform: translateX(5%); }
    100% { transform: translateX(-5%); }
}

#viewProfilePopup.open {
    display: block !important;
    transform: translateX(0);
    opacity: 1; /* Fade in */
}

.profile-view-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Header Styling - Based on notification-header2 */
.profile-view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: linear-gradient(90deg, #1A1F2B 0%, #2E3440 100%);
    border-bottom: 1px solid var(--user-color, );
    height: 40px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    border-top: 1px solid color-mix(in srgb, var(--user-color) 30%, transparent);
}

#viewProfileTitle {
    color: #FFF;
    font-size: 20px;
    font-weight: 600;
    margin-left: 10px;
    line-height: 1;
    text-align: center;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.6);
}

.profile-view-actions {
    display: flex;
    align-items: center;
}

/* Close Button Styling - Based on closeNotificationBtn2 */
.profile-view-action-btn { /* Renamed from action-btn to avoid potential conflicts */
    background: none;
    border: none;
    color: #E0E7FF;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    margin-right: 35px; /* Match closeNotificationBtn2 margin */
    font-weight: lighter;
    line-height: 1;
}

.profile-view-action-btn:hover,
.profile-view-action-btn:focus {
    color: #FFEB3B;
    transform: translateX(3px);
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

/* Profile Body Styling - Based on notificationList2 */
.profile-view-body {
    overflow-y: auto;
    height: 100%;
    padding: 10px; /* Match settings-form padding */
    display: flex;
    flex-direction: column;
    /*gap: 10px; /* Spacing between sections */
    background: none;
    /* Custom Scrollbar (matching notificationList2) */
    scrollbar-width: thin;
    scrollbar-color: var(--user-color, ) #0A0E17;
    -ms-overflow-style: auto;
}

.profile-view-body::-webkit-scrollbar {
    width: 8px;
}

.profile-view-body::-webkit-scrollbar-track {
    background-color: #0A0E17;
    border-radius: 4px;
}

.profile-view-body::-webkit-scrollbar-thumb {
    background-color: var(--user-color, );
    border-radius: 4px;
}

.profile-view-body::-webkit-scrollbar-thumb:hover {
    background-color: var(--user-color, #FF6347); /* Darker user color */
}

.profile-view-top-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* Align items vertically */
    gap: 15px; /* Space between identity and stats */
    border-left: 5px solid var(--profile-color, var(--user-color, )); /* Use CSS variable for color */
    padding: 50px; /* Add some padding */
    background: linear-gradient(90deg, #1A1F2B 0%, #2E3440 100%); /* Gradient background */
    border-radius: 12px; /* Match other elements */
    margin-bottom: -15px; /* Space below this section */
    height: 250px;  /* FIXED: Reduced from 280px to 200px for tighter fit */
    position: relative;  /* FIXED: Ensure relative for absolute child */
    overflow: hidden;
    transition: all 0.3s ease;
    box-sizing: border-box;
    cursor: pointer; /* Match header interactivity */
    margin-top: 0px;
}

.profile-view-identity {
    display: flex;
    align-items: center;
    gap: 15px; /* Space between image and text */
    flex-grow: 0;  /* FIXED: No flex-grow (don't stretch to full width) */
    width: fit-content;  /* FIXED: Shrink to content width only (covers user info length) */
    align-self: flex-start;  /* FIXED: Align left (under img, no centering/stretch) */
    background: rgba(26, 31, 43, 0.6);  /* FIXED: Semi-transparent bg to match identity + prevent full banner bleed */
    padding: 15px;  /* FIXED: Increased padding (10px → 15px) for banner visible around edges */
    border-radius: 12px;
margin-top: -15px;
    margin-left: -40px;  /* NEW: Pulls box up without moving parent/banner */
}

.profile-view-image {
    width: 135px; /* Slightly smaller than settings preview */
    height: 135px;
    border-radius: 50%;
    object-fit: cover;
    
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.profile-view-image {
    /* Ensure transition applies to transform and border */
    transition: transform 0.3s ease, border 0.3s ease;
}

.profile-view-image:hover {
    transform: scale(1.10) !important;
    border: none !important;
}

.profile-view-name-section {
    display: flex;
    flex-direction: column;  /* FIXED: Vertical stack (custom name > username > stats) */
    gap: 0px;  /* FIXED: Small vertical gap between lines */
    align-items: flex-start;  /* FIXED: Left-align all (no centering) */
}

.profile-view-custom-name {
    font-size: 22px; /* Slightly smaller than header */
    font-weight: 700;
    color: #FFF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 0px;
}

.profile-view-username {
font-size: 16px;
    color: #fff;
    font-weight: 300;
    margin-bottom: 10px;
}

.profile-view-stats {
    display: flex;  /* FIXED: Horizontal flex for buttons */
    gap: 8px;  /* FIXED: Space between buttons */
    align-items: center;  /* FIXED: Center vertically within section */
    width: 100%;  /* FIXED: Full width for left alignment */
    margin-top: 15px;  /* FIXED: Tiny top margin from username */
    position: relative;  /* FIXED: For z-index if needed */
    z-index: 2;  /* FIXED: Stack above banner */
    background: none;  /* FIXED: No bg (transparent, inherits identity shadow) */
    padding: 0;  /* FIXED: No padding (just text links) */
    border-radius: 0;  /* FIXED: No rounding (inline text) */
    margin-left: 13px;
}

.profile-view-stat-item {
    background: none;
    color: #ffffff;
    border: none;
    /* padding: 8px 14px; */
    border-radius: 100px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 8px 8px;
    letter-spacing: 0.5px;
    margin-left: -10px;
    margin-top: -15px;
}

.profile-view-stat-item:hover,
.profile-view-stat-item:focus {
    color: #FFEB3B;
    background: transparent;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);  /* FIXED: Glow for focus */
}

/* General Section Styling */
.profile-view-section {
    border: 1px solid var(--profile-color, var(--user-color, )) !important;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.4), 
        inset 0 0 20px 2px rgba(var(--profile-color-rgb, 160,166,177), 0.25); /* Bolder inner glow + 2px spread for shine */
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-sizing: border-box;
    cursor: pointer;
    background: rgba(10, 14, 23, 0.7);
    margin-bottom: 30px;
}

/* Label Styling - Based on form-label */
.profile-view-label {
    color: #FFF;
    font-size: 11px; /* Smaller label */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px; /* Increased from 0.5px to 1px for more spacing */
    font-style: italic; /* Adds italics */
    display: block;
    margin-bottom: 8px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Text Content Styling */
.profile-view-text {
    font-size: 16px;
    line-height: 1.5;
    color: #FFF; /* Off-white for readability */
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-left: 5px;
}

/* Icon Styling within text */
.profile-view-text i {
    color: var(--profile-color);
    font-size: 16px;
    margin-right: 8px; /* Space after icon */
    vertical-align: middle; /* Align icon with text */
}

/* Optional Holo Effect Layer (copy from holo-effect.css if needed) */
.holo-layer {
    /* Add holo effect styles here if desired */
}

/* ==========================================================================
   Profile Settings Popup Styling for NotificationPopup2 C1
   ========================================================================== */

/* Custom Dropdown (unchanged, kept for other potential dropdowns) */
.settings-form .custom-select {
    position: relative;
    width: 100%;
    font-family: 'Exo 2', sans-serif;
    font-size: 14px;
    color: #FFF;
    background: linear-gradient(135deg, #0A0E17 0%, #1A1F2B 100%) !important;
    border: 1px solid var(--user-color, ) !important;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.3s ease;
    cursor: pointer;
    outline: none;
    z-index: 2000;
}
.settings-form .custom-select:hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, #2E3440 0%, #1A1F2B 100%) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7);
    border: 1px solid var(--user-color, ) !important;
}
.settings-form .custom-select:focus,
.settings-form .custom-select[aria-expanded="true"] {
    border: 1px solid var(--user-color, ) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
    outline: 3px solid #00D4FF !important;
    outline-offset: 3px !important;
}
.settings-form .select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    width: 100%;
    box-sizing: border-box;
}
.settings-form .select-trigger .selected-option {
    flex-grow: 1;
    text-align: left;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.settings-form .select-trigger .arrow {
    width: 12px;
    height: 12px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="%23E54E32" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>') !important;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
}
.settings-form .custom-select[aria-expanded="true"] .arrow {
    transform: rotate(180deg);
}
.settings-form .options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #1A1F2B 0%, #2E3440 100%) !important;
    background-color: #1A1F2B !important;
    border: 1px solid var(--user-color, ) !important;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
    max-height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 4000;
    display: none;
    list-style: none;
    margin: 4px 0 0;
    padding: 4px 0;
    animation: fadeIn 0.3s ease-out;
    opacity: 1;
    box-sizing: border-box;
    isolation: isolate;
}
.settings-form .custom-select[aria-expanded="true"] .options {
    display: block;
    aria-hidden: false;
}
.settings-form .options .option {
    padding: 10px 16px;
    color: #FFF;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 2px 4px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}
.settings-form .options .option:hover,
.settings-form .options .option:focus,
.settings-form .options .option[aria-selected="true"] {
    background: linear-gradient(135deg, #2E3440 0%, #1A1F2B 100%) !important;
    color: #FFEB3B;
    transform: scale(1.02);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}
.settings-form .options .option:active {
    background: linear-gradient(135deg, #1A1F2B 0%, #0A0E17 100%) !important;
    transform: scale(0.98);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
/* Scrollbar for options list */
.settings-form .options::-webkit-scrollbar {
    width: 8px;
}
.settings-form .options::-webkit-scrollbar-track {
    background-color: #0A0E17 !important;
    border-radius: 4px;
}
.settings-form .options::-webkit-scrollbar-thumb {
    background-color: var(--user-color, ) !important;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.settings-form .options::-webkit-scrollbar-thumb:hover {
    background-color: var(--user-color, #FF6347) !important;
}
/* Advanced Settings and Switches */
.settings-form .advanced-settings {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
    visibility: visible;
    opacity: 1;
    height: auto;
    margin-left: 10px;
}
.settings-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.settings-form .flex-container {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.settings-form .form-label {
    font-family: 'Exo 2', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #FFF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.settings-form .switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    visibility: visible;
    opacity: 1;
    z-index: 100;
}
.settings-form .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.settings-form .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 14, 23, 0.7);
    border: 1px solid var(--user-color, ) !important;
    border-radius: 24px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    z-index: 100;
    outline: none;
}
.settings-form .slider:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* KEYBOARD FOCUS — NOW VISIBLE AND GORGEOUS */
.settings-form .switch input:focus-visible + .slider,
.settings-form .switch input:focus + .slider {
    outline: 3px solid #00D4FF !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 14px rgba(0, 212, 255, 0.7) !important;
}
.settings-form .switch input:checked:focus-visible + .slider {
    outline: 3px solid #FFEB3B !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 16px rgba(255, 235, 59, 0.8) !important;
}

.settings-form .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 2.5px;
    background-color: #FFEB3B !important;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 101;
}
.settings-form .switch input:checked + .slider {
    background: rgba(10, 14, 23, 0.7);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--user-color, ) !important;
}
.settings-form .switch input:checked + .slider:before {
    transform: translateX(26px);
}
.settings-form .status-icon {
    font-size: 14px;
    line-height: 24px;
}
.settings-form .status-icon.enabled {
    color: #00FF00;
    content: '✔';
}
.settings-form .status-icon.disabled {
    color: #FF0000;
    content: '✖';
}
.settings-form .status-icon[data-for="two_factor"].disabled,
.settings-form .status-icon[data-for="data_sharing"].disabled {
    content: '✖';
}
.settings-form small {
    font-family: 'Exo 2', sans-serif;
    font-size: 12px;
    color: #BBB;
    line-height: 24px;
    white-space: nowrap;
}
.settings-form .advanced-settings .form-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    visibility: visible;
    opacity: 1;
}

/* Notification List 2 Specific Styles */
#notificationList2 .settings-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding: 20px !important;
    font-family: 'Exo 2', sans-serif;
}

#notificationList2 .settings-form .form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

#notificationList2 .settings-form .form-group label {
    color: #FFF; 
    font-size: 10px; 
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px ;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) ;
    margin-left: 0px;
}

#notificationList2 .settings-form .form-label {
    color: #FFFFFF; 
    font-size: 10px; 
    font-weight: 600; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.4); 
    margin-top: 0px;
}

#notificationList2 .settings-form .form-group input[type="text"],
#notificationList2 .settings-form .form-group textarea {
    background: rgba(10, 14, 23, 0.7);
    backdrop-filter: blur(3px);
    border: 1px solid var(--user-color, ) !important;
    border-radius: 0px !important;
    padding: 12px !important;
    color: #FFF !important;
    font-size: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
    
}

#notificationList2 .settings-form .form-group input[type="text"]:hover,
#notificationList2 .settings-form .form-group textarea:hover {
    transform: translateY(-2px) !important;
    background: rgba(10, 14, 23, 0.7);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid var(--user-color, ) !important;
}

#notificationList2 .settings-form .form-group input[type="text"]:focus,
#notificationList2 .settings-form .form-group textarea:focus {
    background: rgba(10, 14, 23, 0.7);
    border: 1px solid var(--user-color, ) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5) !important;
    transform: translateY(-2px) !important;
}

#notificationList2 .settings-form .form-group input[type="text"]::placeholder,
#notificationList2 .settings-form .form-group textarea::placeholder {
    color: #E0E7FF !important;
    opacity: 0.7 !important;
}

#notificationList2 .settings-form .form-group textarea {
    resize: vertical !important;
    min-height: 110px !important;
    max-height: 150px !important;
}

#notificationList2 .settings-form .form-group small {
    color: #E0E7FF !important;
    font-size: 12px !important;
    text-align: center !important;
    margin-top: 0px;
}

#notificationList2 .settings-form .file-upload-container {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
    margin-top: -55px;
    margin-left: 70px;
}

#notificationList2 .settings-form .profile-image-preview {
    width: 150px !important;
    height: 150px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    overflow-clip-margin: unset;
    margin-top: 20px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) !important;
    overflow: hidden !important;
    margin-bottom: 5px;
}

#notificationList2 .settings-form .profile-image-preview {
    transition: transform 0.3s ease, border 0.3s ease;
}

#notificationList2 .settings-form .profile-image-preview:hover {
    transform: scale(1.10) !important;
    border: none !important;
}

#notificationList2 .settings-form .custom-file-upload {
    background: rgba(10, 14, 23, 0.7);
    border: 1px solid var(--user-color, );
    color: #FFF !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 10px 14px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-align: center !important;
    letter-spacing: 0.5px !important;
    text-shadow:
        1px 2px 0 #000,
        1px 2px 0.5px rgba(0, 0, 0, 0.9),
        inset 0 0 1px rgba(0, 0, 0, 0.9) !important; /* Inner for recessed text */
    border-radius: 100px !important;
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
    max-width: 100px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important; /* Ensures max-width is respected */
}

#notificationList2 .settings-form .custom-file-upload:hover {
    background: rgba(10, 14, 23, 0.7);
    color: #FFEB3B !important;   
    text-shadow:
        1px 1px 2px rgba(0, 0, 0, 0.9),
        -1px -1px 2px rgba(0, 0, 0, 0.9),
        0 0 3px rgba(255, 235, 59, 0.9) !important;
    box-shadow: 
        0 6px 12px rgba(0, 0, 0, 0.5),
        inset 0 1px 2px rgba(255, 255, 59, 0.1) !important;
}

#notificationList2 .settings-form .form-actions {
    display: flex !important;
    gap: 10px !important;
    justify-content: start !important;
    margin-top: 20px !important;
    margin-left: 170px;
}

.save-btn-top {
    background: rgba(72, 255, 146, 0.7); /* Keep semi-transparent for vibe, but we'll darken on hover for punch. */
    border: none !important;
    color: #FFF !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 8px 20px !important; /* Increased padding slightly for bigger, more forgiving hit area (feels less "weak"). */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Your smooth easing is perfect—keep it! */
    text-align: center !important;
    letter-spacing: 0.5px !important;
    text-shadow: 1px 2px 0 #000, 1px 2px 0.5px rgba(0, 0, 0, 0.9), inset 0 0 1px rgba(0, 0, 0, 0.9) !important;
    border-radius: 100px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.1) !important; /* Solid base shadow for depth. */
    max-width: 100px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
    margin-left: 50px !important; /* Fixed: Added 'px' unit. Adjust value if needed for positioning. */
    margin-bottom: -30px;
    margin-top: 20px;
    position: relative; /* Added for potential z-index tweaks if overlapping issues arise. */
}

/* NEW: Hover state for "lift" effect—makes it feel eager to be clicked. */
.save-btn-top:hover {
    background: rgba(72, 255, 146, 0.9); /* Slightly more opaque/darker for energy. */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.2) !important; /* Taller shadow = floating up. */
    transform: translateY(-2px); /* Subtle upward shift for lift—ties into your transition. */
}

/* NEW: Active/click state for "press" feedback—instant confirmation the click worked. */
.save-btn-top:active {
    background: rgba(72, 255, 146, 0.6); /* Quick dim for press. */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.1) !important; /* Squished shadow = pushed down. */
    transform: translateY(0px); /* Snaps back to original Y for rebound feel. */
}

/* OPTIONAL: Focus state for accessibility (keyboard navigation). */
.save-btn-top:focus {
    outline: 2px solid rgba(72, 255, 146, 0.8); /* Visible ring without cluttering your design. */
    outline-offset: 2px;
}

#notificationList2 .settings-form .save-btn {
    background: rgba(72, 255, 146, 0.7);
    border: none;
    border-radius: 100px !important;
    padding: 10px 20px !important;
    color: #FFF !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
}

#notificationList2 .settings-form .save-btn:hover {
    background: rgba(72, 255, 146, 0.9);
    color: #FFF !important;
}

#notificationList2 .settings-form .cancel-btn {
    background: rgba(10, 14, 23, 0.7);
    border: 1px solid var(--user-color, );
    border-radius: 100px !important;
    padding: 10px 20px !important;
    color: #FFF !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
    margin-left: 60px;
}


#notificationList2 .settings-form .cancel-btn:hover {
    background: rgba(10, 14, 23, 0.7);
    color: #FFEB3B !important;
}

/* Preferred Location Dropdown Styles */
#notificationList2 .settings-form .form-group select {
    background: rgba(10, 14, 23, 0.7);
    border: 1px solid var(--user-color, ) !important;
    border-radius: 12px !important;
    padding: 12px 32px 12px 12px !important; /* Extra right padding for arrow */
    color: #FFF !important;
    font-size: 14px !important;
    font-family: 'Exo 2', sans-serif;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: background 0.3s ease, border 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important; /* Explicit transitions */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="6 9 12 15 18 9"%3E%3C/polyline%3E%3C/svg%3E') !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    cursor: pointer !important;
}

#notificationList2 .settings-form .form-group select:hover {
    transform: translateX(-2px) !important;
    background: rgba(10, 14, 23, 0.7) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid var(--user-color, ) !important;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="6 9 12 15 18 9"%3E%3C/polyline%3E%3C/svg%3E') !important; /* Reapply arrow */
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
}

#notificationList2 .settings-form .form-group select:focus {
    background: rgba(10, 14, 23, 0.7);
    border: 1px solid var(--user-color, ) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5) !important;
    transform: translateY(-2px) !important;
    outline: none !important;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="6 9 12 15 18 9"%3E%3C/polyline%3E%3C/svg%3E') !important; /* Reapply arrow */
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
}

/* Placeholder option (Custom Posting Location) */
#notificationList2 .settings-form .form-group select option[disabled][selected] {
    color: #E0E7FF !important;
    opacity: 0.7 !important;
}

/* Options styling */
#notificationList2 .settings-form .form-group select option {
    background: rgba(10, 14, 23, 0.7);
    color: #FFF !important;
    font-size: 14px !important;
    font-family: 'Exo 2', sans-serif;
}

/* Color Picker */
#notificationList2 .settings-form .color-picker {
    position: relative !important;
    width: 100% !important;
}

#notificationList2 .settings-form .color-swatches {
    display: grid !important;
    grid-template-columns: repeat(10, 1fr) !important;
    row-gap: 10px !important;
    column-gap: 5px !important;
    padding: 15px !important;
    background: rgba(10, 14, 23, 0.7);
    backdrop-filter: blur(3px);
    border: 1px solid var(--user-color, ) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6) !important;
}

#notificationList2 .settings-form .color-swatches input[type="radio"] {
    display: none !important;
}

#notificationList2 .settings-form .swatch-wrapper {
    position: relative !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 auto !important;
}

#notificationList2 .settings-form .swatch {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
}

#notificationList2 .settings-form .swatch-wrapper input:checked + .swatch {
    border: 2px solid #FFF !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
}

#notificationList2 .settings-form .swatch-check {
    position: absolute !important;
    top: 55% !important;
    left: 58% !important;
    transform: translate(-50%, -50%) !important;
    color: #0A0E17 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

#notificationList2 .settings-form .swatch-wrapper input:checked + .swatch .swatch-check {
    opacity: 1 !important;
}

/* Profile Image Section */
#notificationList2 .settings-form .profile-image-section {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin-bottom: 13px;
    margin-left: 145px;
}

/* Follow Stats */
#notificationList2 .settings-form .follow-stats {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;
    color: #FFF !important;
    font-family: 'Exo 2', sans-serif;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    margin-right: 110px;
}

#notificationList2 .settings-form .follow-stats a {
    color: #FFF !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    background: none !important;
    transition: all 0.3s ease !important;
}

#notificationList2 .settings-form .follow-stats a:hover {
    color: #FFEB3B !important;
    background: none !important;
    transform: translateY(-2px) !important;
}

#notificationList2 .settings-form .follow-stats span {
    color: #FFEB3B !important;
    font-weight: normal !important;
}

#viewProfileBtn {
    background: linear-gradient(135deg, #0A0E17 0%, #1A1F2B 100%) !important;
    border: 1px solid var(--user-color, );
    color: #FFF !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 8px 16px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-align: center !important;
    letter-spacing: 0.5px !important;
    text-shadow:
        1px 2px 0 #000,
        1px 2px 0.5px rgba(0, 0, 0, 0.9),
        inset 0 0 1px rgba(0, 0, 0, 0.9) !important; /* Inner for recessed text */
    border-radius: 100px !important;
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
    max-width: 100px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important; /* Ensures max-width is respected */
    margin-top: 22px;
    margin-bottom: -8px;
    margin-left: 10px;
}

#viewProfileBtn:hover,
#viewProfileBtn:focus {
    color: #FFEB3B !important;   
    background: linear-gradient(135deg, #2E3440 0%, #1A1F2B 100%) !important;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6) !important;
}

.post-comment-btn {
    background: linear-gradient(135deg, #0A0E17 0%, #1A1F2B 100%) !important;
    border: 1px solid var(--post-color, ) !important;
    color: #FFF !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 8px 16px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-align: center !important;
    letter-spacing: 0.5px !important;
    text-shadow:
        1px 2px 0 #000,
        1px 2px 0.5px rgba(0, 0, 0, 0.9),
        inset 0 0 1px rgba(0, 0, 0, 0.9) !important;
    border-radius: 100px !important;
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
    max-width: 150px !important; /* Adjusted for longer text */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
    margin-left: 220px;
    text-decoration: none;
}

.post-comment-btn:hover,
.post-comment-btn:focus {
    color: #FFEB3B !important;   
    background: linear-gradient(135deg, #2E3440 0%, #1A1F2B 100%) !important;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6) !important;
}

#mutedMembersBtn {
    color: var(--user-color, #D32F2F) !important;
    font-size: 14px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    background: none !important;
    border: none !important;
    margin: 0px 40px 30px 50 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#mutedMembersBtn i {
    font-size: 17px !important;
}

#mutedMembersBtn:hover,
#mutedMembersBtn:focus {
    color: #FFEB3B !important;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6) !important;
    text-decoration: none !important;
}

#logoutBtn {
    background: linear-gradient(135deg, #0A0E17 0%, #1A1F2B 100%) !important;
    border: 1px solid var(--user-color, );
    color: #FFF !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 8px 16px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-align: center !important;
    letter-spacing: 0.5px !important;
    text-shadow:
        1px 2px 0 #000,
        1px 2px 0.5px rgba(0, 0, 0, 0.9),
        inset 0 0 1px rgba(0, 0, 0, 0.9) !important; /* Inner for recessed text */
    border-radius: 100px !important;
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
    max-width: 100px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important; /* Ensures max-width is respected */
    text-decoration: none;
    margin-right: 0px;
    margin-bottom: -8px;
    margin-top: 24px;
}

#logoutBtn:hover,
#logoutBtn:focus {
    background: linear-gradient(135deg, #2E3440 0%, #1A1F2B 100%) !important;
    color: #FFEB3B !important;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6) !important;
    text-decoration: none !important;
}

/* Full-screen dark overlay */
#crop-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(12px);
    z-index: 9998;
}

#crop-overlay.visible {
    display: block;
}

/* Centered modal - full control */
#cropModal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 94vw;
    max-width: 1000px;
    height: 86vh;
    max-height: 820px;
    background: #0d1117;
    border-radius: 20px;
    overflow: hidden;
    z-index: 9999;
    flex-direction: column;
    box-shadow: 0 30px 100px rgba(0,0,0,0.8);
    border: 2px solid var(--user-color, #00d4ff);
}

#cropModal.open {
    display: flex;
}

#cropModal.banner-mode {
    max-width: 1200px;
    width: 96vw;
    height: 76vh;
}

/* Main image area */
.crop-container {
    flex: 1;
    position: relative;
    background: #000;
    margin: 24px;
    border-radius: 16px;
    overflow: hidden;
}

/* CRITICAL: Keep original img in DOM but invisible */
#cropPreview {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0; /* Hidden but present for Cropper */
}

/* Force Cropper to fill container */
.cropper-container {
    width: 100% !important;
    height: 100% !important;
    border-radius: 16px !important;
}

/* Banner mode: exact ratio */
#cropModal.banner-mode .crop-container {
    aspect-ratio: 590 / 247;
    max-height: 62vh;
}

/* Beautiful crop box */
.cropper-crop-box,
.cropper-view-box {
    border-radius: 16px !important;
    box-shadow: 0 0 0 3px var(--user-color, #00d4ff) !important;
}

.cropper-point {
    width: 16px !important;
    height: 16px !important;
    background: var(--user-color, #00d4ff) !important;
    border-radius: 50% !important;
    opacity: 0.95 !important;
}

/* Buttons */
.crop-actions {
    padding: 20px;
    background: rgba(15, 22, 33, 0.95);
    display: flex;
    justify-content: center;
    gap: 30px;
}

.crop-actions button {
    padding: 14px 40px;
    border: none;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    min-width: 140px;
}

.crop-actions .crop-btn {
    background: var(--user-color, #00d4ff);
    color: #000;
}

.crop-actions .cancel-crop-btn {
    background: #333;
    color: #fff;
}
/* ==========================================================================
   Profile Settings Box Popup Styling for NotificationPopup2 C2
   ========================================================================== */

#notificationPopup2 {
    display: none;
    position: fixed;
    top: 114px;
    right: 0;
    left: auto;
    width: 615px;
    height: calc(100% - 110px);
    
    backdrop-filter: blur(3px);
    z-index: 2000;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.8);
    transition: transform 0.3s ease-out;
    transform: translateX(100%);
    padding-left: 0px;
    padding-right: 0px;
    border-radius: 16px;
}

#notificationPopup2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--user-color) 50%, transparent);
    opacity: 0.12;
    animation: wave 28s infinite ease-in-out;
    z-index: -1;
    border-radius: 16px; /* Matches header radius; adjust if needed */
}

#notificationPopup2.open {
    display: block;
    transform: translateX(0);
}

.notification-header2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: linear-gradient(270deg, transparent,
    color-mix(in srgb, var(--user-color) 50%, black), transparent);
    backdrop-filter: blur(3px);
    border-bottom: 1px solid var(--user-color, );
    height: 40px;
    position: relative; /* Added to contain holo-layer */

    border-radius: 16px 16px 0 0;
    border-top: 1px solid color-mix(in srgb, var(--user-color) 30%, transparent);
}

#notificationList2 {
    overflow-x: hidden !important;

    overflow-y: auto !important;
    height: auto !important;
    max-height: calc(100% - 60px) !important;
    scrollbar-width: thin !important; /* Firefox - slim scrollbar */
    scrollbar-color: var(--user-color, ) #0A0E17 !important; /* Firefox - thumb user color, track #0A0E17 */
    -ms-overflow-style: auto !important; /* IE - show scrollbar */
    opacity: 1 !important; /* Prevent parent opacity issues */
    filter: none !important; /* Prevent color distortion */
}

#notificationList2::-webkit-scrollbar {
    width: 8px !important; /* Width of the vertical scrollbar */
}

#notificationList2::-webkit-scrollbar-track {
    background-color: #0A0E17 !important; /* Dark track matching dropdown */
    border-radius: 4px !important; /* Rounded edges */
}

#notificationList2::-webkit-scrollbar-thumb {
    background-color: var(--user-color, ) !important; /* User color thumb */
    border-radius: 4px !important; /* Rounded edges */
}

#notificationList2::-webkit-scrollbar-thumb:hover {
    background-color: var(--user-color, ) !important; /* User color on hover */
}

#notificationTitle2 {
    color: #FFF;
    font-size: 20px;
    font-weight: 600;
    margin-left: 10px;
    line-height: 1;
    text-align: center;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.6);
}

#clearAllBtn2 {
    color: var(--user-color, #E0E7FF);
    font-size: 14px;
    font-weight: lighter;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    background: none;
    border: none;
    margin: 0 240px 15px 0;
    padding: 0;
    line-height: 1.5;
}

#clearAllBtn2:hover,
#clearAllBtn2:focus {
    color: #FFEB3B;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
    text-decoration: none;
}

#closeNotificationBtn2 {
    background: none;
    border: none;
    color: #E0E7FF;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    margin-right: 35px;
    font-weight: light;
    line-height: 1;
}

#closeNotificationBtn2:hover,
#closeNotificationBtn2:focus {
    color: #FFEB3B;
    transform: translateX(3px);
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

/* ==========================================================================
   Notification Popup Styling
   ========================================================================== */

#notificationPopup {
    display: none;
    position: fixed;
    top: 114px;
    right: 0;
    width: 615px;
    height: calc(100% - 10px);
    background: rgba(10, 14, 23, 0.1);
    backdrop-filter: blur(3px);
    z-index: 2000;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.8);
    transition: transform 0.3s ease-out;
    transform: translateX(100%);
    padding-left: 0px;
    padding-right: 0px;
    border-radius: 16px;
}

#notificationPopup.open {
    display: block;
    transform: translateX(0);
    
}

#notificationPopup::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--user-color) 50%, transparent);
    opacity: 0.12;
    animation: wave 28s infinite ease-in-out;
    z-index: -1;
    border-radius: 16px; /* Matches header radius; adjust if needed */
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: linear-gradient(90deg, #1A1F2B 0%, #2E3440 100%);
    border-bottom: 1px solid var(--user-color, );
    height: 40px;
    border-top: 1px solid color-mix(in srgb, var(--user-color) 30%, transparent);
}

#notificationTitle {
    color: #FFF;
    font-size: 20px;
    font-weight: 600;
    margin-left: 10px;
    line-height: 1;
    text-align: center;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.6); /* White glow */
}

#clearAllBtn {
    color: var(--user-color, #F19221);
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    background: none;
    border: none;
    margin: 20 195px 15px 0; /* Matches private.php exactly */
    padding: 0;              /* Matches private.php */
    line-height: 1.5;          /* Ensures height consistency */
}

#clearAllBtn:hover,
#clearAllBtn:focus {
    color: #FFEB3B;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
    text-decoration: none;
}

#closeNotificationBtn {
    background: none;
    border: none;
    color: #E0E7FF;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    margin-right: 35px;
    font-weight: light;
    line-height: 1;
}

#closeNotificationBtn:hover,
#closeNotificationBtn:focus {
    color: #FFEB3B;
    transform: translateX(3px);
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

#notificationList {
    padding: 20px;
    height: calc(100% - 190px); /* Gives more space below scroll area */
    overflow-y: auto;
    scrollbar-width: thin;         /* Firefox */
    -ms-overflow-style: none;      /* IE 10+ */
    position: relative;
    scroll-behavior: smooth;
    scrollbar-color: var(--user-color, ) #1A1F2B;
}

#notificationList::-webkit-scrollbar {
    width: 8px;                 /* Chrome, Safari */
}

/* Type-specific colored tabs */
.notification-item.invite {
    border-left: 5px solid #28A745; /* Green - unchanged */
}

.notification-item.follow {
    border-left: 5px solid #FFD700; /* Gold - was #F19221 (orange) */
}

.notification-item.comment {
    border-left: 5px solid #6A5ACD; /* Slate blue - was #00A1D6 (cyan) */
}

.notification-item.like {
    border-left: 5px solid #FF69B4; /* Hot pink - was #E54E32 (red-orange) */
}

.notification-item.kicked {
    border-left: 5px solid #DC3545; /* Red */
}

.notification-item.closed {
    border-left: 5px solid #6C757D; /* Gray */
}

/* Read vs unread appearance */
.notification-item:not(.unread) {
    background: rgba(10, 14, 23, 0.3);
    opacity: 0.9;
}

.notification-item:hover {
    border-left-width: 6px; /* Slightly thicker on hover */
    opacity: 1;
            background: rgba(10, 14, 23, 0.4) !important;  /* Darker variant of your rgba */
    backdrop-filter: blur(3px) !important;  /* Keep blur for depth */
}

/* Individual notification item */
.notification-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    background: rgba(46, 52, 64, 0.5);
    border-radius: 8px;
    transition: all 0.3s ease;
    border-left: 5px solid #4A5568;
    gap: 3px;
    overflow: hidden;
    position: relative;
    animation: slideIn 0.5s ease-out forwards;
    cursor: pointer; /* Hand cursor on hover */
}

/* Enhanced entrance animation with bounce */
@keyframes slideIn {
    0% {
        transform: translateX(20px);
        opacity: 0;
    }
    80% {
        transform: translateX(-5px);
        opacity: 1;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Refined realistic shadow hover effect */
.notification-item {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease;
}

.notification-item:hover {
    background: rgba(46, 52, 64, 0.95); /* Slightly darker for depth */
    transform: translateY(-3px) scale(1.02); /* Subtler lift and scale */
    box-shadow: 0 12px 20px -2px rgba(0, 0, 0, 0.4); /* Softer, more realistic shadow */
}

/* Unread notification with smooth left-to-right gradient shift */
.notification-item.unread {
    background: linear-gradient(
        90deg, /* Horizontal gradient */
        rgba(46, 52, 64, 0.4) 0%, /* Darker start for contrast */
        rgba(var(--user-color-rgb, 233, 116, 81), 0.6) 50%, /* Vibrant midway color */
        rgba(46, 52, 64, 0.4) 100% /* Darker end */
    );
    background-size: 400% 100%; /* Larger sweep for horizontal shift */
    animation: bgShift 12s ease-in-out infinite; /* Slower, smoother animation */
    box-shadow: 0 4px 12px rgba(var(--user-color-rgb, 233, 116, 81), 0.4); /* Enhanced glow */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

/* Ensure text readability */
.notification-item.unread * {
    text-shadow: -1px 0 2px rgba(0, 0, 0, 0.8); /* Subtle shadow for text clarity */
    color: #FFF; /* Match footer text color */
}

/* Hover effect */
.notification-item.unread:hover {
    opacity: 0.95; /* Slightly higher for visibility */
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 20px -2px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(var(--user-color-rgb, 233, 116, 81), 0.5); /* Bolder glow */
}

/* Left-to-right gradient shift */
@keyframes bgShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%; /* Shift to right */
    }
    100% {
        background-position: 0% 50%; /* Return to left */
    }
}

/* Notification profile pictureeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee */
.notif-profile-pic {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 5px 0px 5px 15px;
    object-fit: cover;
    overflow-clip-margin: unset;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.notification-item:hover .notif-profile-pic {
    transform: rotate(10deg) scale(1.1); /* Rotation and scale, no glow */
}

/* Notification content container */
.notification-item .content {
    flex: 1;
    color: #FFF;
    font-size: 14px;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    min-width: 0;
    margin-top: 6px;
    margin-bottom: 15px;
    margin-left: 5px;
}

/* Custom name styling */
.notif-custom-name {
    color: #FFF;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.notif-custom-name:hover,
.notif-custom-name:focus {
    color: #FFEB3B;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

.notif-custom-name a {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 2px;
    margin-top: 5px;
}

.notif-custom-name a:hover,
.notif-custom-name a:focus {
    color: #FFEB3B;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

/* Verified badge */
.notification-item .verified-badge {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-left: 2px;
    margin-top: 5px;
    margin-right: -1px;
}

/* Specific control in nav-profile */
.nav-profile .profile-info .verified-badge {
    width: 18px !important;
    height: 18px !important;
    vertical-align: middle;
    display: inline-block;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-top: 3px;
}

/* Accept/Follow buttons container */
.accept-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 30px;
    flex-shrink: 0;
    padding-right: 0px; /* Space from edge */
}

/* Accept button (Join) */
.accept-btn {
    background: linear-gradient(135deg, #28A745 0%, #2ECC71 100%);
    color: #FFF;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    max-width: 50px;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    margin-top: 12px;
}

.accept-btn:hover,
.accept-btn:focus {
    background: linear-gradient(135deg, #2ECC71 0%, #28A745 100%);
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(40, 167, 69, 0.6);
}

/* Follow button */
.follow-btn {
    display: none;
    background: linear-gradient(135deg, var(--user-color, #F19221) 0%, var(--user-color, #FFA500) 100%);
    color: #FFF;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    max-width: 65px;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    margin-top: 12px;
    margin-left: 20px;
}

.follow-btn:hover,
.follow-btn:focus {
    background: linear-gradient(135deg, var(--user-color, #FFA500) 0%, var(--user-color, #F19221) 100%);
    transform: scale(1.05);
    box-shadow: 0 2px 6px var(--user-color, rgba(241, 146, 33, 0.6));
}

/* Time-delete container */
.time-delete {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 60px;
    flex-shrink: 0;
}

/* Time ago */
.time-delete .time-ago {
    font-size: 12px;
    color: #E0E7FF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    margin-bottom: 20px;
    margin-right: 15px;
}

/* Delete button */
.delete-notif-btn {
    background: none;
    border: none;
    color: var(--user-color, );
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    padding: 2px;
    transition: all 0.3s ease;
    margin-right: 12px;
}

.delete-notif-btn:hover,
.delete-notif-btn:focus {
    color: #FFEB3B;
    transform: scale(1.1) rotate(5deg);
    animation: shake 0.5s infinite;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

@keyframes shake {
    0% { transform: translateX(0) rotate(5deg); }
    25% { transform: translateX(-2px) rotate(5deg); }
    50% { transform: translateX(2px) rotate(5deg); }
    75% { transform: translateX(-2px) rotate(5deg); }
    100% { transform: translateX(0) rotate(5deg); }
}

.kicked-icon {
    color: var(--user-color, ); /* User color */
    font-size: 28px;
    line-height: 1;
    transition: all 0.3s ease;
    margin-left: 40px;
    margin-bottom: 40px;
}

.kicked-icon:hover,
.kicked-icon:focus {
    color: #FFEB3B; /* Yellow */
    transform: scale(1.1);
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

.delete-post-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--user-color);
    font-size: 16px;
    padding: 2px;
    transition: all 0.3s ease;
    margin-top: -43px;
    margin-right: -6px;
    opacity: 40%;
}

.delete-post-btn i {
    pointer-events: none; /* Ensure icon doesn’t steal clicks */
    font-size: 16px; /* Match button */
}

.delete-post-btn:hover,
.delete-post-btn:focus {
    color: #FFEB3B;
    transform: scale(1.1) rotate(5deg);
    animation: shake 0.5s infinite;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
    opacity: 100%;
}

.host-icon {
    margin-bottom: 1px;
    margin-left: 6px;
    color: #FFD700;
    font-size: 16px;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.new-member-custom-name:hover {
    transform: scale(1); /* Subtle grow on hover */
}

.view-btn {
    background: linear-gradient(135deg, #007BFF 0%, #00BFFF 100%);
    color: #FFF;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    max-width: 50px;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    margin-top: 12px;
}

.view-btn:hover, .view-btn:focus {
    background: linear-gradient(135deg, #00BFFF 0%, #007BFF 100%);
    transform: scale(1.05);
}

.view-btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
    opacity: 0.7;
}

.notification-row {
    display: flex;
    justify-content: flex-start; /* Text and button stay together */
    align-items: center;
    width: 100%;
    gap: 35px; /* Space between text and button */
}

.like-view-btn {
    background: linear-gradient(135deg, #800080 0%, #9400D3 100%); /* Purple gradient for posts */
    color: #FFF;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    max-width: 50px;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    margin-top: 12px;
}

.like-view-btn[data-like-type="comment"] {
    background: linear-gradient(135deg, #9400D3 0%, #800080 100%); /* Reverse gradient for comments */
}

.like-view-btn:hover, .like-view-btn:focus {
    background: linear-gradient(135deg, #660066 0%, #7A00A3 100%); /* Darker purple gradient on hover */
    transform: scale(1.05);
}

.like-view-btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
    opacity: 0.7;
}

body.no-scroll {
    overflow: hidden;
    width: 100%;
}

/* Follow Stats Styling ADDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDEEEEDDDDDDDDDDDDDDDDDDDDDDDDDD FOR BUTTONS*/

#notificationPopup2 .follow-stats .action-btn {
    background: linear-gradient(135deg, #1A1F2B 0%, #2E3440 100%);
    color: #FFF;
    border: 0.5px solid var(--user-color);
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
}

#notificationPopup2 .follow-stats .action-btn:hover {
    background: linear-gradient(135deg, #2E3440 0%, #1A1F2B 100%);
    color: #FFEB3B;
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

#notificationPopup2 .follow-stats .action-btn:focus {
    outline: 0.5px solid var(--user-color);
    outline-offset: 2px;
}

#notificationPopup2 .follow-stats .action-btn span {
    color: #FFEB3B;
    margin-left: 5px;
    font-weight: normal;
}

/* ==============================================================================================================================================================================
   Followers Popup Styling for NotificationPopup4
   ========================================================================== */
#notificationPopup4 {
    display: none !important;
    position: fixed;
    top: 114px;
    right: 0;
    left: auto;
    width: 615px;
    height: calc(100% - 110px);
    background: rgba(10, 14, 23, 0.3);
    backdrop-filter: blur(3px);
    z-index: 5000; /* Increased from 2000 to appear above viewProfilePopup (3000) */
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.8);
    transition: transform 0.3s ease-out;
    transform: translateX(100%);
    padding-left: 0;
    padding-right: 0;
    margin: 0;
    border-radius: 16px;
}

#notificationPopup4::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--profile-color) 50%, transparent);
    opacity: 0.12;
    animation: wave 28s infinite ease-in-out;
    z-index: -1;
    border-radius: 16px; /* Matches header radius; adjust if needed */
}

#notificationPopup4.open {

    display: block !important;
    transform: translateX(0);
    opacity: 1; /* Fade in */
}


#notificationPopup4 .notification-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#notificationPopup4 .notification-header2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-top: 1px solid color-mix(in srgb, var(--user-color) 30%, transparent);
    backdrop-filter: blur(3px);
    border-bottom: 1px solid var(--user-color);
    height: 40px;
    position: relative;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}

#notificationPopup4 #notificationTitle4 {
    color: #FFF;
    font-size: 20px;
    font-weight: 600;
    margin-left: 10px;
    line-height: 1;
    text-align: center;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.6);
}

#notificationPopup4 #closeNotificationBtn4 {
    background: none;
    border: none;
    color: #E0E7FF;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    margin-right: 35px;
    font-weight: light;
    line-height: 1;
    margin-top: 0px;
}

#notificationPopup4 #closeNotificationBtn4:hover,
#notificationPopup4 #closeNotificationBtn4:focus {
    color: #FFEB3B;
    transform: translateX(3px);
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

#notificationPopup4 #notificationList4 {
    padding: 20px;
    height: calc(100% - 60px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--user-color) #1A1F2B;
    -ms-overflow-style: auto;
    position: relative;
    scroll-behavior: smooth;
}

#notificationPopup4 #notificationList4::-webkit-scrollbar {
    width: 8px;
}

#notificationPopup4 #notificationList4::-webkit-scrollbar-track {
    background-color: #0A0E17;
    border-radius: 4px;
}

#notificationPopup4 #notificationList4::-webkit-scrollbar-thumb {
    background-color: var(--user-color);
    border-radius: 4px;
}

#notificationPopup4 #notificationList4::-webkit-scrollbar-thumb:hover {
    background-color: var(--user-color);
}

/* Follow Entry Styling */
#notificationPopup4 .follow-entry {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    background: rgba(10, 14, 23, 0.3);
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 5px solid #FFD700; /* Gold for followers */
    gap: 3px;
    overflow: hidden;
    position: relative;
    animation: slideIn 0.5s ease-out forwards;
    cursor: pointer;
}

#notificationPopup4 .follow-entry:hover {
    background: rgba(10, 14, 23, 0.4) !important;  /* Darker variant of your rgba */
    backdrop-filter: blur(3px) !important;  /* Keep blur for depth */
    transform: translateY(-5px) scale(1.03);
    border-left-width: 6px;
}

@keyframes slideIn {
    0% {
        transform: translateX(20px);
        opacity: 0;
    }
    80% {
        transform: translateX(-5px);
        opacity: 1;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

#notificationPopup4 .follow-left {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 10px;
}

#notificationPopup4 .notif-profile-pic {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 5px 0px 5px 15px;
    object-fit: cover;
    overflow-clip-margin: unset;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

#notificationPopup4 .follow-entry:hover .notif-profile-pic {
    transform: rotate(10deg) scale(1.1);
}

#notificationPopup4 .follow-content {
    flex: 1;
    color: #FFF;
    font-size: 16px;
    line-height: 1.4;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    min-width: 0;
    margin-top: 6px;
    margin-bottom: 15px;
}

#notificationPopup4 .user-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0px;
}

#notificationPopup4 .custom-name {
    color: #FFF;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    margin-top: 10px
}

#notificationPopup4 .custom-name:hover,
#notificationPopup4 .custom-name:focus {
    color: #FFEB3B;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

#notificationPopup4 .custom-name a {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
}

#notificationPopup4 .custom-name a:hover,
#notificationPopup4 .custom-name a:focus {
    color: #FFEB3B;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

#notificationPopup4 .verified-badge {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-left: 2px;
    margin-top: 14px;
    margin-right: 0px;
}

#notificationPopup4 .username {
    color: #E0E7FF;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 11px
}

#notificationPopup4 .username:hover,
#notificationPopup4 .username:focus {
    color: #FFEB3B;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

#notificationPopup4 .follow-content p {
    font-size: 14px;
    color: #FFF;
    margin: 0px 0 0;
}

#notificationPopup4 .follow-content .time {
    font-size: 12px;
    color: #E0E7FF;
    margin-left: 5px;
}

#notificationPopup4 .time-delete {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 60px;
    flex-shrink: 0;
}

#notificationPopup4 .time-delete .time-ago {
    font-size: 12px;
    color: #E0E7FF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    margin-bottom: 20px;
    margin-right: 15px;
}

/* ==============================================================================================================================================================================
   Following Popup Styling for NotificationPopup5
   ========================================================================== */
#notificationPopup5 {
    display: none !important;
    position: fixed;
    top: 114px;
    right: 0;
    left: auto;
    width: 615px;
    height: calc(100% - 110px);
    border-radius: 16px;
    z-index: 5000; /* Increased from 2000 to appear above viewProfilePopup (3000) */
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.8);
    transition: transform 0.3s ease-out;
    background: rgba(10, 14, 23, 0.3);
    backdrop-filter: blur(3px);
    transform: translateX(100%);
    padding-left: 0;
    padding-right: 0;
    margin: 0;
}

#notificationPopup5::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--profile-color) 50%, transparent);
    opacity: 0.12;
    animation: wave 28s infinite ease-in-out;
    z-index: -1;
    border-radius: 16px; /* Matches header radius; adjust if needed */
}

#notificationPopup5.open {
    display: block !important;
    transform: translateX(0);
    opacity: 1; /* Fade in */
}


#notificationPopup5 .notification-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#notificationPopup5 .notification-header2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-top: 1px solid color-mix(in srgb, var(--user-color) 30%, transparent);
    backdrop-filter: blur(3px);
    border-bottom: 1px solid var(--user-color);
    height: 40px;
    position: relative;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}

#notificationPopup5 #notificationTitle5 {
    color: #FFF;
    font-size: 20px;
    font-weight: 600;
    margin-left: 10px;
    line-height: 1;
    text-align: center;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.6);
}

#notificationPopup5 #closeNotificationBtn5 {
    background: none;
    border: none;
    color: #E0E7FF;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    margin-right: 35px;
    font-weight: light;
    line-height: 1;
    margin-top: 0px;
}

#notificationPopup5 #closeNotificationBtn5:hover,
#notificationPopup5 #closeNotificationBtn5:focus {
    color: #FFEB3B;
    transform: translateX(3px);
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

#notificationPopup5 #notificationList5 {
    padding: 20px;
    height: calc(100% - 60px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--user-color) #1A1F2B;
    -ms-overflow-style: auto;
    position: relative;
    scroll-behavior: smooth;
}

#notificationPopup5 #notificationList5::-webkit-scrollbar {
    width: 8px;
}

#notificationPopup5 #notificationList5::-webkit-scrollbar-track {
    background-color: #0A0E17;
    border-radius: 4px;
}

#notificationPopup5 #notificationList5::-webkit-scrollbar-thumb {
    background-color: var(--user-color);
    border-radius: 4px;
}

#notificationPopup5 #notificationList5::-webkit-scrollbar-thumb:hover {
    background-color: var(--user-color);
}

#notificationPopup5 .follow-entry {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    background: rgba(10, 14, 23, 0.3);
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 5px solid #FFD700; /* Gold for followers */
    gap: 3px;
    overflow: hidden;
    position: relative;
    animation: slideIn 0.5s ease-out forwards;
    cursor: pointer;
}

#notificationPopup5 .follow-entry:hover {
    background: rgba(10, 14, 23, 0.4) !important;  /* Darker variant of your rgba */
    backdrop-filter: blur(3px) !important;  /* Keep blur for depth */
    transform: translateY(-5px) scale(1.03);
    border-left-width: 6px;
}

#notificationPopup5 .follow-left {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 10px;
}

#notificationPopup5 .notif-profile-pic {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 5px 0px 5px 15px;
    object-fit: cover;
    overflow-clip-margin: unset;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

#notificationPopup5 .follow-entry:hover .notif-profile-pic {
    transform: rotate(10deg) scale(1.1);
}

#notificationPopup5 .follow-content {
    flex: 1;
    color: #FFF;
    font-size: 16px;
    line-height: 1.4;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    min-width: 0;
    margin-top: 6px;
    margin-bottom: 15px;
}

#notificationPopup5 .user-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0px;
}

#notificationPopup5 .custom-name {
    color: #FFF;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
}

#notificationPopup5 .custom-name:hover,
#notificationPopup5 .custom-name:focus {
    color: #FFEB3B;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

#notificationPopup5 .custom-name a {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
}

#notificationPopup5 .custom-name a:hover,
#notificationPopup5 .custom-name a:focus {
    color: #FFEB3B;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

#notificationPopup5 .verified-badge {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-left: 2px;
    margin-top: 13px;
    margin-right: 0px;
}

#notificationPopup5 .username {
    color: #E0E7FF;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 10px;
}

#notificationPopup5 .username:hover,
#notificationPopup5 .username:focus {
    color: #FFEB3B;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

#notificationPopup5 .follow-content p {
    font-size: 14px;
    color: #FFF;
    margin: 0px 0 0;
}

#notificationPopup5 .follow-content .time {
    font-size: 12px;
    color: #E0E7FF;
    margin-left: 5px;
}

#notificationPopup5 .time-delete {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 60px;
    flex-shrink: 0;
}

#notificationPopup5 .time-delete .time-ago {
    font-size: 12px;
    color: #E0E7FF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    margin-bottom: 20px;
    margin-right: 15px;
}
/* J2 */
.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.delete-container {
    margin-bottom: 0px; /* Space between delete button and play-container */
}



.delete-post-btn i {
    margin: 0;
}

.delete-post-btn:hover,
.delete-post-btn:focus {
    color: #FFEB3B;
    transform: scale(1.1) rotate(5deg);
    animation: shake 0.5s infinite;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
    opacity: 100%
}

@keyframes shake {
    0% { transform: translateX(0) rotate(5deg); }
    25% { transform: translateX(-2px) rotate(5deg); }
    50% { transform: translateX(2px) rotate(5deg); }
    75% { transform: translateX(-2px) rotate(5deg); }
    100% { transform: translateX(0) rotate(5deg); }
}

.option-button-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: -5px;
    margin-left: 0px;
}

.follow-button, .mute-button, .profile-button, .profile-likes-button, .profile-comments-button, .invite-button {
    background: none;
    color: #FFF;
    border: none;
    padding: 8px 14px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    box-sizing: border-box;
    vertical-align: middle;
    line-height: 1.5;
    position: relative; /* For positioning the lock icon */
    margin-top: 0px;
    letter-spacing: 0.3px
}

.follow-button:hover, .mute-button:hover, .profile-button:hover, .profile-likes-button:hover, .profile-comments-button:hover, .invite-button:hover {
    color: #FFEB3B;
    background: transparent;
}

.follow-button:disabled, .mute-button:disabled, .invite-button:disabled, .profile-button:disabled, .profile-likes-button:disabled, .profile-comments-button:disabled {
    background: #2E3440;
    color: #666;
    cursor: not-allowed;
    opacity: 0.6; /* Grey-out effect for disabled buttons */
}

.profile-button:disabled:hover::after,
.profile-likes-button:disabled:hover::after,
.profile-comments-button:disabled:hover::after {
    content: '\f023';
    font-family: 'Font Awesome 6 Free', sans-serif;
    font-weight: 900;
    color: #FFEB3B;
    font-size: 20px;
    position: absolute;
    top: -10%;
    right: -5px;
    transform: translateY(-50%);
    pointer-events: none;
    display: block;
    z-index: 10;
}

.mute-button i {
    font-size: 16px;
}

.follow-form, .mute-form {
    display: inline-flex;
    margin-top: 15px;
    padding: 0;
    align-items: center;
    margin-right: 0px;
}

.profile-button:not(:disabled),
.profile-likes-button:not(:disabled),
.profile-comments-button:not(:disabled) {
    background-image: none; /* Remove no-smoking.png for enabled buttons */
}

.post-top-cap,
.post-bottom-cap {
    border-top: 3px solid #FFEB3B;
    margin: 20px 0;
    height: 20px;
    width: 100%;
}

.profile-visibility-indicator {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 8px 30px;
    border-radius: 100px;
    transition: opacity 0.3s ease;
    margin-right: 310px;
    margin-top: 8px;
    padding-top: auto;
}
.profile-visibility-indicator[style*="display: inline-block"] {
    opacity: 1;
}
.profile-visibility-indicator[style*="display: none"] {
    opacity: 0;
}

.post-bottom-cap {
    margin-bottom: 0px; /* Slightly more spacing below to separate from the next thread */
}
/* Transcription Popup */
#transcriptionPopup .popup-content {
    width: 550px; /* Increased width for larger textarea */
    max-width: 90vw; /* Prevent overflow on smaller screens */
    padding: 20px; /* Consistent padding */
    background: rgba(10, 14, 23, 0.7);
    border-radius: 8px;
    position: relative;
    box-sizing: border-box;
    margin-bottom: 50px;
}

#transcriptionPopup p {
    margin: 0 0 15px;
    font-size: 14px;
}

#transcriptionPopup textarea {
    width: 100%; /* Full width of parent */
    height: 100px;
    background: none;
    color: #FFF;
    border: 1px solid var(--user-color);
    border-radius: 5px;
    padding: 10px;
    font-size: 14px;
    resize: none;
    font-family: 'Exo 2', sans-serif;
    box-sizing: border-box; /* Ensure padding doesn’t affect width */
}

#transcriptionPopup h2 {
    margin: 0 0 10px;
    font-size: 20px;
    font-family: 'Exo 2', sans-serif;
    text-align: left;
}

#transcriptionPopup textarea:focus {
    outline: none;
    border-color: var(--user-color);
}

#transcriptionPopup #transcription_help {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--user-color);
}

#transcriptionPopup .form-group {
    width: 100%; /* Ensure form-group doesn’t constrain textarea */
    margin-bottom: 15px;
}

#transcriptionPopup .save-btn,
#transcriptionPopup .cancel-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    font-size: 14px;
    font-family: 'Exo 2', sans-serif;
    margin-top: 20px;
    margin-right: 0px;
    margin-bottom: 0px;
}

#transcriptionPopup .save-btn {
    background: var(--user-color);
    color: #FFF;
}

#transcriptionPopup .cancel-btn {
    background: #3B4252;
    color: #FFF;
}

#transcriptionPopup .save-btn:hover {
    background: var(--user-color);
}

#transcriptionPopup .cancel-btn:hover {
    background: #4C566A;
}

/* Responsive Design */
@media (max-width: 600px) {
    #transcriptionPopup .popup-content {
        width: 95vw; /* Full width on mobile */
        max-width: 95vw;
        padding: 15px;
    }
    #transcriptionPopup textarea {
        height: 80px;
    }
}
.user-info .separator {
    color: #E0E7FF;
    font-size: 16px;
    margin: 0 0px;
    line-height: 1; /* Match text line height */
    display: inline-flex;
    align-items: center; /* Ensure vertical centering within flex */
    transform: translateY(-3px); /* Fine-tune vertical position */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.pill-button-group {
    display: flex;
    background-color: #2D3748; /* Dark background for pill */
    border-radius: 50px; /* Pill shape */
    overflow: hidden;
    width: fit-content;
}

.pill-button-group button {
    background-color: #2D3748;
    color: #FFF;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 22px;
    transition: background-color 0.3s;
    border-radius: 0;
}

.pill-button-group button:first-child {
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    border-right: 1px solid #4A5568; /* Separator */
}

.pill-button-group button:last-child {
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}

.pill-button-group button:hover {
    background-color: #4A5568;
}

.pill-button-group button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
#notificationList2 .settings-form .form-group .preferred_location_help {
    color: #E0E7FF !important;
    font-size: 12px !important;
    text-align: center !important;
    margin-top: 0px;
    display: block;
}
#notificationList2 .settings-form .form-group .elite-link {
    color: var(--user-color, ); /* Use user color, fallback to default */
    text-decoration: none; /* No underline */
    transition: all 0.3s ease; /* Smooth transition */
}
#notificationList2 .settings-form .form-group .elite-link:hover,
#notificationList2 .settings-form .form-group .elite-link:focus {
    color: #FFEB3B; /* Yellow on hover, matching .notif-custom-name */
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6); /* Yellow glow */
}
.site-footer {
    position: fixed; /* Stick to bottom of viewport */
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 20px; /* Padding for balance */
    text-align: right; /* Fallback for text alignment */
    z-index: 1; /* High to layer above most content */
    line-height: 1.4; /* Tight line height */
    display: flex; /* Flexbox for layout */
    flex-direction: column; /* Stack children vertically */
    align-items: flex-end; /* Right-align all children */
    justify-content: center; /* Center vertically if needed */
}

.footer-links {
    display: flex;
    flex-wrap: nowrap;
    gap: 28px;
    font-size: 12px;
    color: #FFF;
    align-items: center;
    margin-left: 100px;
    margin-top: 20px;
    margin-bottom: -10px;
    
}

.footer-link {
    color: #FFF; /* White text */
    text-decoration: none;
    transition: color 0.3s ease;
    
}

.footer-link:hover,
.footer-link:focus {
    color: var(--user-color, ); 
    
}

.copyright-notice {
    color: #FFF;
    font-size: 10px;
    margin-bottom: -5px;
    margin-right: 40px;
    opacity: 0.7;
}

/* Responsive */
@media (max-width: 768px) {
    .site-footer {
        padding: 8px 15px; /* Adjusted padding for mobile */
        flex-direction: column; /* Maintain vertical stacking */
        align-items: flex-end; /* Keep right-aligned */
    }
    .footer-links {
        flex-wrap: wrap; /* Allow links to wrap on mobile */
        gap: 12px; /* Smaller gap for mobile */
        font-size: 11px; /* Smaller for mobile */
        margin-right: 15px; /* Smaller right margin for mobile */
        margin-bottom: 6px; /* Smaller space for mobile */
    }
    .footer-link, .copyright-notice {
        font-size: 11px; /* Uniform on mobile */
    }
    .copyright-notice {
        margin-right: 15px; /* Match mobile right margin */
    }
}


    #notificationList2 .settings-form .file-name {
        font-family: 'Exo 2', sans-serif;
        font-size: 12px;
        color: #E0E7FF;
        margin-left: 10px;
        line-height: 24px;
        white-space: nowrap;
    }
    #notificationList2 .settings-form .profile-view-stats {
        display: flex;
        gap: 25px;
        justify-content: start;
        margin-top: 40px;
        
    }
    #notificationList2 .settings-form .profile-view-stat-item {
    background: rgba(10, 14, 23, 0.7);
    border: 1px solid var(--user-color, );
    border-radius: 100px;
    padding: 8px 12px;
    color: #FFF;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    margin-left: 2px;
    margin-bottom: 0px;
    }
    #notificationList2 .settings-form .profile-view-stat-item:hover {
        background: rgba(10, 14, 23, 0.7);
        color: #FFEB3B;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
        transform: translateY(-2px);
    }
    @media (max-width: 768px) {
        #notificationList2 .settings-form .profile-image-section {
            flex-direction: column;
        }
 
    }

.notif-username {
    color: #E0E7FF;
    font-size: 16px;
    margin-left: 3px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    margin-top: 7px;
}

.notif-username:hover,
.notif-username:focus {
    color: #FFEB3B;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}
/* Unauth Overlay: Safe Login BG Override (Fallback Color + No Blank) */
.unauth-blur-overlay {
    background: url(uploads/login-bg13.png) no-repeat center center fixed;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;  /* Locks to viewport */
    color: #FFF;
    margin: 0;
    padding: 0;
    position: fixed !important;  /* Full viewport coverage */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    z-index: 1498; /* Above body BG, under posts */
    display: none; /* Hidden by default */
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.unauth-blur-overlay.active {
    display: block !important;
    opacity: 1 !important;
}

.unauth-blur-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background: url(uploads/login-bg13.png) no-repeat center center fixed;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    pointer-events: none; /* Clicks go through to posts */
    z-index: -1;  /* Masks body but behind content */
}













@keyframes wave2 {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}



/* New Download Button Styling */
.download-container {
    display: flex;
    align-items: center;
}

.download-button {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--post-color);
    font-size: 16px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    text-decoration: none;
}

.download-button:hover,
.download-button:focus {
    text-shadow: 
        0 0 4px rgba(255, 255, 255, 0.8),
        0 0 25px var(--post-color, #FFEB3B),
        0 0 40px rgba(255, 235, 59, 0.8),
        0 0 55px rgba(255, 165, 0, 0.6);
    color: #FFF;
    transform: scale(1.1);
}

/* Simplified Download Popup (smaller, only download button) */
.download-popup-content {
    background: linear-gradient(135deg, #0A0E17 0%, #1A1F2B 100%);
    padding: 20px; /* UPDATED: Match share padding */
    border-radius: 16px;
    max-width: 400px; /* UPDATED: Match share max-width */
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--user-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.download-popup-content:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.85), 0 0 15px rgba(0, 0, 0, 0.4);
}

.download-popup-content p {
    margin: 0 0 20px; /* UPDATED: Match share p margin */
    color: #FFF;
    font-size: 16px; /* UPDATED: Match share p font-size */
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 6px rgba(255, 235, 59, 0.2);
    line-height: 1.5;
}

.download-popup-content button {
    color: #FFF;
    border: none;
    padding: 10px 20px; /* UPDATED: Match share button padding */
    border-radius: 12px;
    font-size: 16px; /* UPDATED: Match share button font-size */
    font-weight: 600;
    cursor: pointer;
    min-width: 50px;
    background: linear-gradient(135deg, var(--user-color) 0%, var(--user-color) 100%);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.download-popup-content button:hover,
.download-popup-content button:focus {
    transform: scale(1.05);
    background: linear-gradient(135deg, var(--user-color) 0%, var(--user-color) 100%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 10px rgba(255, 235, 59, 0.3);
    outline: 0.5px solid var(--user-color);
    outline-offset: 2px;
}

/* NEW: Add h3 and a styles to match share (if not already present) */
.download-popup-content h3 {
    font-size: 24px; /* Match share h3 */
    font-weight: 600;
    color: #FFEB3B;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
}

.download-popup-content a {
    display: inline-block;
    margin: 10px;
    padding: 10px 20px; /* Match share a padding */
    color: #FFF;
    text-decoration: none;
    border-radius: 8px;
    font-size: 16px; /* Match share a font-size */
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
}

.download-popup-content a:hover,
.download-popup-content a:focus {
    transform: scale(1.05);
    background: linear-gradient(135deg, #45a049 0%, #4CAF50 100%);
}

.upgrade-text .verified-badge {
    width: 28px; /* Smaller for inline text, match post badge if needed */
    height: 28px;
    margin-bottom: 5px;
    vertical-align: middle; /* Fallback alignment */
}
.verified-badge {
    width: 18px; /* Consistent size */
    height: 18px; /* Consistent size */
    vertical-align: middle; /* Align with text */
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); /* Subtle shadow */
    display: inline-block; /* Inline-block for flow */
    margin-right: 0px;
    cursor: pointer;
}



/* START OF TRENDING CSS BLOCK */
.trending-box {
    width: 100%;
    height: 820px !important;
    min-height: 400px;
    flex: none !important;
background: rgba(10, 14, 23, 0.1);
    backdrop-filter: blur(3px);
    border: none;
    border-radius: 16px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55);
    padding: 0;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden !important;
}

.trending-box:hover {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
}

.trending-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--user-color) 50%, transparent);
    opacity: 0.12;
    animation: wave 28s infinite ease-in-out;
    z-index: -1;
    border-radius: 16px; /* Matches header radius; adjust if needed */
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: linear-gradient(90deg, #1A1F2B 0%, #2E3440 100%);
    border-bottom: 1px solid var(--user-color, );
    height: 40px;
    border-top: 1px solid color-mix(in srgb, var(--user-color) 30%, transparent);
}

.trending-box::-webkit-scrollbar {
    display: none !important;
}
.trending-box {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.trending-box::-webkit-scrollbar-track {
    background: rgba(10, 14, 23, 0.3) !important;
    border-radius: 3px !important;
    margin-right: 0 !important;
}
.trending-box::-webkit-scrollbar-thumb {
    background: var(--user-color) !important;
    border-radius: 3px !important;
    border: none !important;
}
.trending-box::-webkit-scrollbar-thumb:hover {
    background: var(--user-color) !important;
}

.trending-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 10px;
    background: linear-gradient(270deg, transparent,
    color-mix(in srgb, var(--user-color) #1E90FF
    50%, black), transparent);
    backdrop-filter: blur(3px);
    border-bottom: 1px solid var(--user-color, );
    height: 55px;
    position: relative;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}

.trending-title {
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0 2px 6px rgba(255, 255, 255, 0.4);
    text-align: left;
    padding-left: 20px;
    width: calc(100% - 120px);
    display: block;
    line-height: 50px;
}

.trending-buttons {
    display: flex;
    gap: 15px;
    margin-right: 30px;
}

.trending-btn {
    background: linear-gradient(135deg, #0A0E17 0%, #1A1F2B 100%) !important;
    border: 1px solid var(--user-color, );
    color: #FFF !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 8px 16px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-align: center !important;
    letter-spacing: 0.5px !important;
    text-shadow:
        1px 2px 0 #000,
        1px 2px 0.5px rgba(0, 0, 0, 0.9),
        inset 0 0 1px rgba(0, 0, 0, 0.9) !important; /* Inner for recessed text */
    border-radius: 100px !important;
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
    max-width: 100px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important; /* Ensures max-width is respected */
    margin-top: -3px;
    margin-right: 8px;
}

.trending-btn:hover,
.trending-btn:focus {
    background: linear-gradient(135deg, #2E3440 0%, #1A1F2B 100%) !important;
    color: #FFEB3B !important;   
    text-shadow:
        1px 1px 2px rgba(0, 0, 0, 0.9),
        -1px -1px 2px rgba(0, 0, 0, 0.9),
        0 0 3px rgba(255, 235, 59, 0.9) !important;
    box-shadow: 
        0 6px 12px rgba(0, 0, 0, 0.5),
        inset 0 1px 2px rgba(255, 255, 59, 0.1) !important;
}

.trending-btn.active {
    background: linear-gradient(135deg, #2E3440 0%, #1A1F2B 100%) !important;
    color: #FFEB3B;
    border-radius: 100px;
    box-shadow: 
        0 3px 6px rgba(0, 0, 0, 0.9),
        inset 0 1px 2px rgba(255, 255, 255, 0.9);
    text-shadow:
        /* FIXED: Bottom-right "cast" drop shadow (dupe text offset: right 1px + down 2px for stronger bottom angle on yellow bg) */
        1px 2px 0 #000,
        /* Softer blur aligned to bottom-right (0.5px radius, same offset) */
        1px 2px 0.5px rgba(0, 0, 0, 0.9),
        inset 0 0 1px rgba(0, 0, 0, 0.9); /* Inner for recessed text */
}



.trending-panel {
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    flex: 1;
    position: relative;
    height: calc(100% - 50px) !important;
}

.trending-panel.active {
    display: flex !important;
    opacity: 1 !important;
    transition: opacity 0.3s ease;
    height: calc(100% - 50px) !important;
    transform: translateZ(0);
}

.trending-panel.active .trending-list {
    flex: 1 !important;
    height: 100% !important;
    
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    min-height: 0 !important;
}

/* TRENDING ITEM — permanent glass + glowing lift + light hover */
.trending-item {
    display: flex;
    align-items: center;
    padding: 8px 16px 8px 19px;           /* extra left for stripe */
    cursor: pointer;
    transition: all 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
    width: 100%;
    border-bottom: 1px solid #2E3440;
    position: relative;
    box-sizing: border-box;

         /* light permanent glass */
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}

.trending-item:hover,
.trending-item:focus {
    background: rgba(40, 48, 70, 0.38) !important;        /* noticeably lighter + blue-tinted */

    transform: translateY(-4px) scale(1.02);
    box-shadow: 
        0 12px 28px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(var(--user-color-rgb, 255, 127, 0), 0.28);

    z-index: 1;
}

.trending-item img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    overflow-clip-margin: unset;
    margin: 0 0 0 10px;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.trending-info {
    display: flex;
    flex-direction: column;
    pointer-events: none;
    min-width: 0;
    margin-left: 4px;
    padding-right: 0;
}

.trending-info-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    margin-right: 0;
    padding-right: 0;
    margin-left: 0;
}

.trending-custom-name {
    color: #FFF;
    font-size: 16px;
    font-weight: 600;
    padding-right: 0;
    margin-left: 2px;
    text-decoration: none;
    pointer-events: auto;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
    text-align: left;
    display: inline-block;
    margin-right: 1px;
}

.trending-custom-name:hover,
.trending-custom-name:focus {
    color: #FFEB3B;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

.trending-username {
    color: var(--post-color);
    font-size: 16px;
    margin: 0 0 0 3px;
    text-decoration: none;
    pointer-events: auto;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}

.trending-username:hover,
.trending-username:focus {
    color: #FFEB3B;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

.trending-transcription {
    color: #E0E7FF;
    font-size: 14px;
    margin-top: 0px;
    max-width: calc(100% - 20px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    margin-left: 4px;
}

.trending-box .trending-info-top .verified-badge {
    margin-left: 1;
    width: 18px !important;
    height: 18px !important;
    margin-top: 3;
    margin-right: -1px;
}

.trending-rank {
    color: #E0E7FF;
    font-weight: normal;
    font-size: 12px;
    margin-left: 15px;
    margin-right: 3px;
    flex-shrink: 0;
    min-width: 20px;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.trending-item:hover .trending-rank {
    color: #FFEB3B;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

.trending-rank::before {
    content: '#';
    font-size: 12px;
    font-weight: normal;
    color: #E0E7FF;
    text-shadow: 0 1px 2px;
    margin-right: 1px;
    transition: all 0.3s ease;
    display: inline;
    vertical-align: top;
}

.trending-item:hover .trending-rank::before {
    color: #FFEB3B;
    text-shadow: 0 0 4px rgba(255, 235, 59, 0.6);
}

.rank-container {
    display: flex !important;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
    flex-shrink: 0;
}

.fa-fire {
    color: var(--user-color) !important;
    font-size: 16px;
    margin-left: 4px;
    margin-right: 0;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.trending-panel.active .trending-list {
    flex: 1 !important;
    height: auto !important;
    min-height: 300px !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
}

.trending-panel.active .trending-list > * { 
    direction: ltr !important;
}

.trending-panel.active .trending-list::-webkit-scrollbar { 
    width: 6px !important; 
    -webkit-appearance: none !important;
    display: block !important;
}

.trending-panel.active .trending-list::-webkit-scrollbar-track { 
    background: rgba(10, 14, 23, 0.3) !important; 
    border-radius: 3px !important; 
    padding: 0 !important;
}

.trending-panel.active .trending-list::-webkit-scrollbar-thumb { 
    background: var(--user-color) !important; 
    border-radius: 3px !important; 
    box-shadow: 0 0 4px rgba(0,0,0,0.5) !important; 
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
    min-height: 20px !important;
}

.trending-panel.active .trending-list::-webkit-scrollbar-thumb:hover { 
    background: var(--user-color) !important; 
    opacity: 0.8 !important;
}

.left-container {
    width: 585px;
    border-radius: 16px;
    padding: 15px;
    height: fit-content;
    position: fixed;
    left: calc(50% - 950px);
    z-index: 1600;
    display: flex;
    flex-direction: column;
    gap: 15px !important;
    margin-top: 64px;
    overflow: hidden !important;
    padding-right: 0 !important;
}

#trending-states .trending-info,
#trending-categories .trending-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

#trending-states .trending-info-top,
#trending-categories .trending-info-top {
    display: flex !important;
    align-items: center;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 0 !important;
    margin: 0 !important;
}

#trending-states .trending-custom-name,
#trending-categories .trending-custom-name {
    display: inline-flex !important;
    align-items: center;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 !important;
    flex: 1 !important;
    text-align: center !important;
    padding: 12px;
}

#trending-states .trending-custom-name i,
#trending-categories .trending-custom-name i {
    font-size: 14px !important;
    color: var(--user-color) !important;
    margin-left: 0 !important;
    text-shadow: none !important;
    order: -1 !important;  /* FIXED: Icon to left of name (like posts) */
}

#trending-states .trending-count-right,
#trending-categories .trending-count-right {
    color: #E0E7FF;
    font-size: 14px;
    text-align: right !important;
    white-space: nowrap;
    pointer-events: auto !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
    margin-left: auto !important;
    margin-right: 15px !important;
    transition: all 0.3s ease !important;
}

#trending-states .trending-count-right:hover,
#trending-categories .trending-count-right:hover,
#trending-states .trending-count-right:focus,
#trending-categories .trending-count-right:focus {
    color: #FFEB3B !important;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6) !important;
}

#trending-states .trending-transcription,
#trending-categories .trending-transcription {
    display: none !important;
}
/* END OF TRENDING CSS BLOCK */
/* FIXED: Ensure pointer events after switch */
.trending-panel.active .trending-item {
    pointer-events: auto !important;
}
.trending-panel:not(.active) .trending-item {
    pointer-events: none !important;
}
.trending-panel {
    transition: opacity 0.3s ease, display 0s 0.3s;  /* FIXED: Delay display transition */
}

/* Holo & Tilt Toggle Off: Hide Effects, Keep User Colors & Dark BG */
body.holo-disabled .holo-layer {
    display: none !important; /* Hide shimmer/glare/foil */
}

body.holo-disabled .post:hover {
    transform: none !important; /* No tilt on hover */
    box-shadow: 
        0 10px 25px rgba(0, 0, 0, 0.7), 
        -1px 0 5px var(--post-color) !important; /* Flat shadow + preserved user color glow */
}
body.holo-disabled .post {
    transform: none !important;
    background: none;  /* Glass-like: Semi-transparent dark bg */
    backdrop-filter: blur(1px) !important;  /* 8px blur for glass effect */
}


body.holo-disabled .comment-popup-header {


}
/* Preserve/Force Dark Gradient BG When Holo Off (Glass-Optional Tint) */

body.holo-disabled .profile-view-section,
body.holo-disabled .profile-view-top-section,
body.holo-disabled .content-box,
body.holo-disabled .new-members-title,
body.holo-disabled .trending-header,
body.holo-disabled .nav-profile {
    
     /* Glass-like: Semi-transparent dark bg */
    backdrop-filter: blur(3px) !important;  /* 8px blur for glass effect */
}

    

    


body.holo-disabled .post::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, transparent, var(--post-color), transparent);  /* Horizontal wave using post color */
    /*background-size: 165% 165%;  /* Wide for smooth shift */
   /* animation: wave2 15s ease-in-out infinite;  /* Slow, gentle back-and-forth glow */
    opacity: 0.3;  /* Subtle—adjust to 0.2 for fainter or 0.4 for bolder */
    z-index: -1;  /* Behind post content */
    border-radius: inherit;  /* Matches post rounding */
    pointer-events: none;  /* Doesn't block interactions */
}

/* Your Wave2 Animation (Reused for Consistency) */
@keyframes wave2 {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Hide Maps Toggle */
body.maps-disabled .post-map {
    display: none !important;  /* Hide all post maps */
}
body.maps-disabled .map-hint {
    display: none !important;  /* Hide map hints too */
}


body.maps-disabled .post-content .transcription {
    margin-bottom: 20px!important;
    
}
body.maps-disabled .post-content p:last-of-type {
    margin-bottom: 0px !important;
    
}

/* Banner Styles */

.profile-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--banner-url, url('uploads/default-banner.png'));
    background-size: cover;
    background-position: center;
    
    z-index: 0;
}


.banner-preview {
    width: 100%;  /* Full width */
    height: 100px;  /* FIXED: Fixed height (1/5 of 500px for preview scale) */
    background-size: cover;  /* FIXED: Cover (no stretch) */
    background-position: center;  /* FIXED: Centered (no right bias) */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 14, 23, 0.7);
    backdrop-filter: blur(3px);
    margin-bottom: 10px;
    overflow: hidden;  /* FIXED: Clip if needed */
    border: 1px dashed var(--user-color);  /* Visual dim guide */
    margin-left: 24px;
}

.banner-section {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.crypto-tip-container:hover i, .voxbucks-tip-container:hover i,
.crypto-tip-btn:hover i, .voxbucks-tip-btn:hover i { 
    text-shadow: 
        0 0 4px rgba(255, 255, 255, 0.8),
        0 0 25px var(--post-color, #FFEB3B),
        0 0 40px rgba(255, 235, 59, 0.8),
        0 0 55px rgba(255, 165, 0, 0.6);
    color: #FFF !important;
    transform: scale(1.1) !important; /* FIXED: Scale like like-button */
}
/* FIXED: Containers (wrappers) - transparent, no interference */
.crypto-tip-container, .voxbucks-tip-container {
    display: inline-flex !important; align-items: center; justify-content: center;
    background: transparent !important; border: none !important; box-shadow: none !important;
    padding: 0 !important; margin-left: 8px !important;
}
/* FIXED: Tipping Buttons - Target inner buttons (transparent bg, post-color icons, yellow hover like others) */
.crypto-tip-container button, .voxbucks-tip-container button,
.crypto-tip-btn, .voxbucks-tip-btn {
    background: transparent !important; /* FIXED: Transparent (kills white bg) */
    border: none !important; outline: none !important; /* FIXED: No border/outline */
    box-shadow: none !important; /* FIXED: No shadow */
    padding: 0 !important; margin: 0 !important; /* FIXED: No padding/margin */
    display: inline-flex !important; align-items: center; justify-content: center;
    min-width: 32px !important; height: 32px !important; cursor: pointer;
    transition: all 0.3s ease !important;
    color: var(--post-color);
}
.crypto-tip-container:hover button, .voxbucks-tip-container:hover button,
.crypto-tip-btn:hover, .voxbucks-tip-btn:hover { 

    color: #FFF;
    transform: scale(1.05) !important; /* FIXED: Subtle scale */
}

.crypto-tip-container:hover i, .voxbucks-tip-container:hover i,
.crypto-tip-btn:hover i, .voxbucks-tip-btn:hover i { 
color: #FFF;
    transform: scale(1.1) !important; /* FIXED: Scale like like-button */
}
/* FIXED: Containers (wrappers) - transparent, no interference */
.crypto-tip-container, .voxbucks-tip-container {
    display: inline-flex !important; align-items: center; justify-content: center;
    background: transparent !important; border: none !important; box-shadow: none !important;
    padding: 0 !important; margin-left: 8px !important;
}
/* FIXED: Tipping Buttons - Match post footer icons (transparent bg, post-color icons, yellow hover) */
.crypto-tip-container, .voxbucks-tip-container {
    display: inline-flex !important; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; margin-left: 8px; cursor: pointer;
    transition: all 0.3s ease; border-radius: 50%; background: transparent !important; /* FIXED: Transparent (no white) */
    border: none !important; outline: none !important; /* FIXED: No border/outline */
    box-shadow: none !important; /* FIXED: No shadow */
    padding: 0 !important; /* FIXED: No padding */
}
.crypto-tip-container:hover, .voxbucks-tip-container:hover { 

    
    transform: scale(1.1); /* FIXED: Subtle scale */
    
}
.crypto-tip-container i, .voxbucks-tip-container i { 
    font-size: 18px; /* FIXED: Match other icons */
    color: var(--post-color) !important; /* FIXED: Post color like likes/comments */
    transition: all 0.3s ease; /* FIXED: Smooth */
    vertical-align: middle;
    margin-right: 5px;
}
.crypto-tip-container:hover i, .voxbucks-tip-container:hover i { 
    text-shadow: 
        0 0 4px rgba(255, 255, 255, 0.8),
        0 0 25px var(#FFF, #FFEB3B),
        0 0 40px rgba(255, 235, 59, 0.8),
        0 0 55px rgba(255, 165, 0, 0.6);
    color: #FFF;
    transform: scale(1.1); /* FIXED: Scale like like-button */
}

/* FIXED: Balances UI - Tighten gaps (pull totals to dropdown, no shift) */
#balances-ui { 
    display: none !important; align-items: center; gap: 5px !important;  /* FIXED: 5px between spans (tight, no air) */
}
#balances-ui #eth-balance { 
    margin-right: 2px !important;  /* FIXED: Slight right trim (snug to VoxBucks, no overlap) */
}
/* FIXED: Rest unchanged (VoxBucks min-width holds) */
#balances-ui span { 
    flex-shrink: 0 !important; min-width: 130px !important;  
    margin-right: -3px !important;  
}
#balances-ui span .value { 
    min-width: 45px; text-align: right; flex-shrink: 0;  
}
/* FIXED: Tiers dropdown snug to totals (no left marg hack needed) */
#voxbucks-tiers { 
    margin-left: 0 !important;  /* FIXED: Zero left (flex gap handles it) */
    flex-shrink: 0 !important;  /* FIXED: No shrink (holds width) */
}
/* FIXED: Buy button flush (tight to tiers) */
#buy-voxbucks { 
    margin-left: 0px !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
}
/* FIXED: Icon lock (unchanged, but tighter marg) */
#balances-ui .eye-toggle {
width: 24px !important;
    height: 24px !important;
    display: flex !important;
    justify-content: center;
    flex-shrink: 0 !important;
    /* margin-right: 3px !important; */
    margin-top: 10px !important;
    margin-right: 15px !important;
    transition: color 0.3s !important;
}
#balances-ui .eye-toggle i { 
    font-size: 16px !important;  
    transition: none !important;  
}

#transactions-btn:hover, #transactions-btn:hover i { color: #FFEB3B; text-shadow: 0 0 6px rgba(255, 235, 59, 0.6); }

/* Improved glow for play triangle icon only */
.play-pause-btn i.fa-play {
    margin-top: 0px;
    transition: text-shadow 0.3s ease, color 0.3s ease;
    color: #FFF; /* Ensure the base icon color is white for clarity */
    text-shadow: 
        0 0 2px rgba(255, 255, 255, 0.4),          /* Very subtle inner white glow */
        0 0 10px var(--post-color, #FFEB3B); /* Saturated outer yellow/gold glow */
}

/* Hover/Focus: Stronger, more intense outer glow */
.play-pause-btn:hover i.fa-play,
.play-pause-btn:focus i.fa-play {
    margin-top: 0px;
    text-shadow: 
        0 0 4px rgba(255, 255, 255, 0.8),          /* Sharper white glow close to icon */
        0 0 25px var(--post-color, #FFEB3B),       /* Expansive, brighter mid-glow */
        0 0 40px rgba(255, 235, 59, 0.8),          /* Richer yellow bloom */
        0 0 55px rgba(255, 165, 0, 0.6);           /* Broad, fiery orange outer halo */
    color: #FFF; 
}

/* Active: Explosive, pulsing glow */
.play-pause-btn:active i.fa-play {
    margin-top: 0px;
    text-shadow: 
        0 0 8px rgba(255, 255, 255, 1),             /* Super bright white core */
        0 0 35px var(--post-color, #FFEB3B),        /* Intense, focused mid-glow */
        0 0 60px rgba(255, 235, 59, 1),             /* Massive yellow bloom */
        0 0 80px rgba(255, 165, 0, 0.9);            /* Huge orange halo */
    animation: iconGlowPulse 0.2s ease-out;
    color: #FFF; 
}

/* Keyframes for the active state pulse animation */
@keyframes iconGlowPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.ad-video { object-fit: cover !important; }  /* FIXED: Inline killer */

.ad-image {
    object-fit: cover !important;
    height: 200px !important;
    width: 100% !important;
    margin: 5px 0 10px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.6) !important;
    filter: brightness(1) contrast(1.1) !important;
}

.ad-control-spot {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 5px !important;
    margin-right: 15px !important;
    margin-bottom: 40px !important;
}

/* CSP Fixes: Dropdown */
.dropdown-content.hidden { display: none; }

/* CSP Fixes: Feed Filter Input */
.feed-filter { width: 99%; padding: 5px; margin-bottom: 5px; background: #1A1F2B; color: #FFF; border: 1px solid #2E3440; }

/* CSP Fixes: File Input */
.hidden-file-input { display: none; }

/* CSP Fixes: Recording Status */
.hidden-recording { display: none; }

/* CSP Fixes: Audio Preview */
.hidden-preview { display: none; }

/* CSP Fixes: Post Cooldown */
.post-cooldown { display: none; }
.post-cooldown.show-cooldown { display: flex; }
.post-cooldown.hide-cooldown { display: none; }

/* CSP Fixes: Notifications */
.notifications-link.unread-notif i.fa-bell { color: #FFEB3B; }
.notifications-link i.fa-bell { color: var(--user-color, ); }
.notification-tally.show-tally { visibility: visible; }
.notification-tally.hide-tally { visibility: hidden; }

/* CSP Fixes: Trending Icons */
.trending-icon-fire,
.trending-icon-state,
.trending-icon-category { color: var(--user-color, #FFEB3B); font-size: 16px; margin-left: 4px; margin-right: 0; }
.trending-icon-state { color: var(--user-color); }

/* CSP Fixes: Empty Message */
.empty-message.empty-csp,
.empty-trending { background: transparent; color: #FFF; }



/* CSP Fixes: Transcription */
.transcription-csp { color: #FFF; margin-top: 0; font-size: 16px; margin-left: 8px; }

/* CSP Fixes: Verified Badge in Comments */
.verified-csp { margin-left: 0; }

/* CSP Fixes: Comment Count in Feed Title */
.feed-comment-count { color: #FFF; margin-right: 5px; }



/* CSP Fixes: Transcription */
.transcription-csp { color: #FFF; margin-top: 0; font-size: 16px; margin-left: 8px; }

/* CSP Fixes: Error Message */
.error-csp { color: #FFF; }

/* CSP Fixes: New Members Error/Empty */
.error-new-members,
.empty-new-members { color: #FFF; text-align: center; }

/* CSP Fixes: Hidden Elements */
.hidden-message,
.hidden-onboarding,
.hidden-popup { display: none; }

/* CSP Fixes: Onboarding List */
.onboarding-list { text-align: left; color: #FFF; }

/* CSP Fixes: Profile Visibility Indicator */
.profile-visibility-indicator { display: none; position: absolute; right: 10px; top: 5px; color: #E0E7FF; font-size: 14px; font-weight: bold; letter-spacing: 1; }

/* CSP Fixes: Verified Badge in Profile */
#profileViewVerifiedBadge { display: none; }

/* CSP Fixes: Profile Top Section */
.profile-top-default { --profile-color: ; }





/* CSP Fixes: Banner Preview */


.banner-preview-text { text-align: center; font-weight: 600; }

.banner-preview-subtext { text-align: center; font-size: 12px; font-weight: 400; }

/* CSP Fixes: Sensitive Checkbox */
.sensitive-checkbox-container { display: flex; align-items: center; justify-content: center; margin-top: 10px; }

.sensitive-label { display: flex; align-items: center; gap: 5px; color: #FFF; font-size: 14px; margin-top: 20px; }

.sensitive-checkbox { width: 16px; height: 16px; accent-color: var(--user-color); }

.ad-post-cyan {
    border-left: 5px solid #00FFFF;
    --post-color: #00FFFF;
}





.flash-message {
  position: fixed; top: 120px; right: 20px; z-index: 2000; padding: 12px 20px; border-radius: 8px; color: #FFF; font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: all 0.3s ease;
}
.flash-success { background: #28a745; }
.flash-error { background: #dc3545; }

/* Balances UI (replaces inline styles) */
#balances-ui {
  position: fixed; top: 70px; right: 32px; z-index: 1700; color: #FFF; padding: 8px 12px; border-radius: 20px;
  font-size: 14px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.5); display: flex; align-items: center; gap: 10px;
}
#eth-balance { color: #1E90FF; }
#voxbucks-balance { color: #FFD700; }
.eye-toggle { cursor: pointer; color: #FFF; transition: color 0.3s; }
#voxbucks-tiers {
  display: flex; align-items: center; gap: 5px; font-size: 12px; color: #FFF; white-space: nowrap; margin-left: 3px;
}
#tier-select {
  background: #1A1F2B; color: #FFF; border: 1px solid #FFD700; border-radius: 4px; padding: 2px 6px; font-size: 12px;
  min-width: 80px; margin-left: -10px;
}
#buy-voxbucks {
  background: none; border: none; color: #FFD700; text-decoration: none; cursor: pointer; font-size: 14px; margin-left: 0px;
}
#cashout-btn {
  background: none; border: none; color: #1E90FF; text-decoration: none; cursor: pointer; font-size: 14px; margin-left: -8px; margin-right: 5px;
}
#transactions-btn {
  background: transparent; color: #FFF; border: none; padding: 0 0 0 0px; border-radius: 0; cursor: pointer; font-size: 14px;
  margin-left: 5px; transition: color 0.3s;
}
#transactions-btn i { transition: color 0.3s; }  /* Inner icon */





/* WaveSurfer Container (CSP-safe sizing, no layout hacks) */
.audio-player .waveform-container {
    position: relative ;  /* Allows absolute children without breaking */
    width: 85% ;
    height: 60px ;  /* Matches JS height */
    overflow: hidden;  /* Clips canvas if needed */
    margin-left: -25px;
    margin-bottom: 20px;
}

/* Inherit post color for buttons (play-pause, volume) */
.audio-player {
    --wave-progress-color: var(--post-color, );  /* Fallback gray if no --post-color */
}

.play-pause-btn,
.volume-btn,
.volume-slider::-webkit-slider-thumb,
.volume-slider::-moz-range-thumb {
    color: var(--wave-progress-color) !important;  /* User's post color */
    background: var(--wave-progress-color) !important;  /* Thumb bg */
    transition: color 0.3s ease, background 0.3s ease;
}

.play-pause-btn:hover,
.volume-btn:hover {
    text-shadow: 
        0 0 4px rgba(255, 255, 255, 0.8),          /* Sharper white glow close to icon */
        0 0 25px var(--post-color,),       /* Expansive, brighter mid-glow */
        0 0 40px rgba(255, 235, 59, 0.8),          /* Richer yellow bloom */
        0 0 55px rgba(255, 165, 0, 0.6);           /* Broad, fiery orange outer halo */
    color: #FFF; 
}

/* Progress bar (via ::part for v7 Shadow DOM—no inline needed) */
.waveform-container::part(progress) {
    background: var(--wave-progress-color) !important;  /* User's post color on play */
}

.waveform-container::part(wave) {
    background: #4A5568 !important;  /* Static gray bars */
}

.waveform-container::part(cursor) {
    background: var(--wave-progress-color) !important;  /* User's color for cursor */
}


/* Button disables (from logs: visibility checks work, but style 'em) */
#profilePostsBtn:disabled, #profileLikesBtn:disabled, #profileCommentsBtn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Explore Dropdown: Base hidden + toggle */
#feed-dropdown {
    display: none !important;
    position: absolute;
    top: -25; left: -20px;
    backdrop-filter: blur(3px) !important;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    min-width: 250px;
    height: 600px;
    overflow-y: auto;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.2s ease-out;
    border-left: 1px solid var(--user-color, #1E90FF);
    outline: 1px solid color-mix(in srgb, var(--post-color, #1E90FF) 50%, transparent);

    
}
#feed-dropdown.open {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    backdrop-filter: blur(3px) !important;
}

/* Filter input */
#feed-filter {
    width: 100%; padding: 10px; background: transparent; color: #FFF;  border-radius: 4px;
}

/* ←←← NEW SMOOTH LABEL STYLES – replace everything below this line ↓↓↓ */
#feed-dropdown label {
    display: block;
    padding: 12px 16px;                    /* comfortable base padding */
    cursor: pointer;
    color: #FFF;
    transition: all 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);  /* butter */
    transform: translateY(0) scale(1);
    will-change: transform, background;
}

#feed-dropdown label:hover {
    background: rgba(255, 255, 255, 0.18); /* nice glassy highlight */
    transform: translateY(-2px) scale(1.045);
    border-radius: 8px;
}
/* ←←← END OF NEW STYLES */

.post .user-info { 
    display: flex !important;
    vertical-align: middle;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
    gap: 4px !important;
    flex-wrap: wrap !important;
}
    
/* Glow the play triangle when hovering the entire post */
.clickable-post:hover .play-pause-btn i.fa-play {
    margin-top: 0px;
    text-shadow: 
        0 0 4px rgba(255, 255, 255, 0.5),          /* Sharp white glow close to icon */
        0 0 25px var(--post-color, #FFEB3B),       /* Mid-level glow matching post color */
        0 0 40px rgba(255, 235, 59, 0.4),          /* Rich yellow bloom */
        0 0 55px rgba(255, 165, 0, 0.6);           /* Outer halo */
    color: #FFF;
    transition: text-shadow 0.3s ease, color 0.3s ease;
}

/* Keep the original button hover intact (direct hover) */
.play-pause-btn:hover i.fa-play,
.play-pause-btn:focus i.fa-play {
    margin-top: 0px;
    text-shadow: 
        0 0 4px rgba(255, 255, 255, 0.8),
        0 0 25px var(--post-color, #FFEB3B),
        0 0 40px rgba(255, 235, 59, 0.8),
        0 0 55px rgba(255, 165, 0, 0.6);
    color: #FFF;
}

/* Active/pulsing glow (click) */
.play-pause-btn:active i.fa-play {
    margin-top: 0px;
    text-shadow: 
        0 0 8px rgba(255, 255, 255, 1),
        0 0 35px var(--post-color, #FFEB3B),
        0 0 60px rgba(255, 235, 59, 1),
        0 0 80px rgba(255, 165, 0, 0.9);
    animation: iconGlowPulse 0.2s ease-out !important;
    color: #FFF;
}

/* Keyframes for active pulse */
@keyframes iconGlowPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}



/* ---- Undo bar ------------------------------------------------------- */
#undo-delete-bar {
    position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
    background:#333; color:#fff; padding:10px 20px; border-radius:6px;
    display:flex; gap:12px; align-items:center; font-size:14px;
    z-index:9999; box-shadow:0 4px 12px rgba(0,0,0,.3);
}
#undo-delete-bar button {
    background:#4a90e2; color:#fff; border:none; padding:4px 12px;
    border-radius:4px; cursor:pointer;
}
#undo-delete-bar button:hover { background:#357abd; }

#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(10, 14, 23, 0.95);
    color: #FFF;
    padding: 15px;
    text-align: center;
    z-index: 9999999999000;
    font-family: 'Exo 2', sans-serif;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
    line-height: 1.4;
  }
  #cookie-banner.hidden { display: none; }
  .cookie-buttons { margin-top: 10px; }
  .cookie-btn { 
    margin: 0 10px; 
    padding: 8px 16px; 
    border: none; 
    border-radius: 6px; 
    cursor: pointer; 
    font-size: 14px; 
    font-weight: 500; 
    transition: all 0.3s ease; 
  }
  .accept-all { background: #1E90FF; color: #000; }
  .accept-all:hover { background: #00BFFF; transform: translateY(-1px); }
  .reject-all { background: transparent; color: #FFF; border: 1px solid #FFF; }
  .reject-all:hover { background: #FFF; color: #000; transform: translateY(-1px); }
  .learn-more { color: #1E90FF; text-decoration: none; font-size: 12px; font-weight: 500; }
  .learn-more:hover { text-decoration: underline; color: #00BFFF; }
  
  /* ==========================================================================
   POPUP WINDOWS – Share, Download (verified), Upgrade (non-verified)
   ========================================================================== */

:root {
  --popup-bg: linear-gradient(135deg, #0A0E17 0%, #1A1F2B 100%);
  --popup-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
  --text-light: #bcbcbc;
  --yellow-glow: #FFEB3B;
}

/* Base for all three popup types */
.share-window,
.download-window,
.upgrade-window {
  background: var(--popup-bg);
  border-radius: 12px;
  padding: 20px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  font-family: 'Exo 2', sans-serif;
  color: #FFF;
  text-align: center;
  box-sizing: border-box;
  box-shadow: var(--popup-shadow);
  min-height: 100vh;                     /* fills the tiny popup window */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

/* Titles */
.share-window h3,
.download-window h3,
.upgrade-window h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--yellow-glow);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  margin: 0 0 20px;
}

/* Transcription / description text */
.share-window p,
.download-window p,
.upgrade-window .description {
  margin: 0 0 20px;
  font-size: 16px;
  color: var(--text-light);
  line-height: 1.5;
  word-wrap: break-word;
}

/* Share buttons (X & Facebook) */
.share-window a.share-x,
.share-window a.share-facebook {
  display: inline-block;
  margin: 10px;
  padding: 12px 24px;
  color: #FFF;
  text-decoration: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease, background .3s ease;
}
.share-window a.share-x      { background: linear-gradient(135deg, #000 0%, #333 100%); }
.share-window a.share-facebook { background: linear-gradient(135deg, #4267B2 0%, #3B5998 100%); }

.share-window a:hover,
.share-window a:focus {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}
.share-window a.share-x:hover      { background: linear-gradient(135deg, #333 0%, #000 100%); }
.share-window a.share-facebook:hover { background: linear-gradient(135deg, #3B5998 0%, #4267B2 100%); }

/* Download button (verified users) */
.download-window a {
  display: inline-block;
  margin: 15px 0;
  padding: 12px 28px;
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: #FFF;
  text-decoration: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  transition: transform .2s ease, background .3s ease;
}
.download-window a:hover,
.download-window a:focus {
  transform: scale(1.05);
  background: linear-gradient(135deg, #45a049 0%, #4CAF50 100%);
}

/* Upgrade button (non-verified) */
.upgrade-window a {
  display: inline-block;
  padding: 14px 32px;
  background: linear-gradient(135deg, #FFEB3B 0%, #F7C948 100%);
  color: #0A0E17;
  text-decoration: none;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 600;
  transition: transform .2s ease, background .3s ease;
}
.upgrade-window a:hover,
.upgrade-window a:focus {
  transform: scale(1.05);
  background: linear-gradient(135deg, #F7C948 0%, #FFEB3B 100%);
}

/* Close button – used in all three popups */
.share-window button,
.download-window button,
.upgrade-window button {
  background: linear-gradient(135deg, var(--user-color) 0%, var(--user-color) 100%);
  color: #FFF;
  border: none;
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  width: 100%;
  cursor: pointer;
  margin-top: 10px;
  transition: transform .2s ease, background .3s ease;
}
.share-window button:hover,
.download-window button:hover,
.upgrade-window button:hover,
.share-window button:focus,
.download-window button:focus,
.upgrade-window button:focus {
  transform: scale(1.05);
  background: linear-gradient(135deg, var(--user-color) 100%, var(--user-color) 0%);
}

/* Elite benefits list (upgrade popup) */
.upgrade-window ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  text-align: left;
  display: inline-block;
}
.upgrade-window li {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.5;
  margin: 8px 0;
  padding-left: 20px;
  position: relative;
}
.upgrade-window li:before {
  content: '•';
  color: var(--yellow-glow);
  font-weight: bold;
  position: absolute;
  left: 0;
}

/* Verified badge in upgrade popup */
.upgrade-window .verified-badge {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 8px;
}

/* Ensure Font Awesome loads (you already have it in the popup head, but keep a fallback) */
.share-window i,
.download-window i,
.upgrade-window i {
  margin-right: 8px;
}

/* Share & Download Popups – match transcriptionPopup exactly */
#sharePopup, #downloadPopup { display: none; }
#sharePopup.active, #downloadPopup.active { display: flex; }

.share-form-group, .download-form-group { 
    text-align: center;
    padding: 20px 20px; 
    
}

#shareTranscription, #downloadTranscription { 
    margin: 0 0 25px; 
    color: #cfd8dc; 
    line-height: 1.5; 
    word-break: break-word; 
    font-size: 16px;
}

.share-buttons-wrapper { 
    display: flex; 
    flex-direction: column; 
    gap: 14px; 
    /*max-width: 280px; 
    margin-right: 20px;*/
}

.share-social-btn, .download-real-btn, .download-upgrade-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 14px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s;
    
}

.share-social-btn:hover, .download-real-btn:hover, .download-upgrade-btn:hover { transform: scale(1.04); }

.share-x-btn { background: #000; color: #FFF; }
.share-fb-btn { background: #4267B2; color: #FFF; }
.download-real-btn { background: #FF4500; color: #FFF; }
.download-upgrade-btn { background: #FFEB3B; color: #000; }



.elite-badge { 
    width: 28px; 
    height: 28px; 
    vertical-aligned: middle; 
    margin-right: 8px; 
}

.close-popup-btn {     color: #FFF;
    border: none;
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    min-width: 50px;
    background: linear-gradient(135deg, var(--user-color) 0%, var(--user-color) 100%);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }

.content-box {
    width: 100%;
    height: 120px;
    background: linear-gradient(90deg, #1A1F2B 0%, #2E3440 100%);
    
    margin-bottom: 10px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5); /* softer base shadow */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    padding: 15px;
    box-sizing: border-box;
    transition: all 0.3s ease;

    /* Neon animated border */
    border: 2px solid transparent; 
    border-image: conic-gradient(
        from var(--angle),
        #00eaff 0%,
        #ff007f 15%,
        #ffea00 30%,
        #39ff14 45%,
        #ff4500 60%,
        #8a2be2 75%,
        #00eaff 100%
    ) 1;
    --angle: 0deg;
    animation: rotate 20s linear infinite;

    box-shadow: 
        0 0 3px rgba(0, 234, 255, 0.15),   /* Softer cyan inner glow */
        0 0 6px rgba(255, 0, 127, 0.1),    /* Gentler magenta mid-glow */
        0 0 9px rgba(255, 234, 0, 0.1),    /* Dimmer yellow outer glow */
        0 0 12px rgba(57, 255, 20, 0.1),   /* Subtle lime further out */
        0 0 16px rgba(138, 43, 226, 0.1);  /* Faint violet edge */
}

@keyframes rotate {
    to {
        --angle: 360deg;
    }
}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.content-box:hover {
    transform: scale(1.01);  /* Subtler growth */

}

.post,
.new-members-box,
.trending-box,
.game-box,
.content-box
 {
    backdrop-filter: blur(1px) !important;           /* keep the glass look */
    -webkit-backdrop-filter: blur(1px);   /* Safari */
    background: none !important;   /* ← slightly more transparent */
    isolation: isolate !important;                   /* ← THIS IS THE KEY LINE */
}


/* FINAL FINAL — Perfect bell + super-smooth badge pulse */
#notificationsBtn {
    background: none;
    border: none;
    padding: 0;
    margin: 0 12px;
    cursor: pointer;
    font-size: inherit;
    color: inherit;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

/* Bell icon — locked at original 22px size */
#notificationsBtn .bell-icon {
    font-size: 22px !important;     /* ← forces original size */
    color: var(--user-color);
    transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
    display: inline-block;
}

/* Hover only: spin + yellow */
#notificationsBtn:hover .bell-icon {
    color: #FFEB3B !important;
    transform: rotate(15deg);
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

/* Click/focus: yellow, NO rotation (never gets stuck) */
#notificationsBtn:focus .bell-icon,
#notificationsBtn:active .bell-icon {
    color: #FFEB3B !important;
    transform: none !important;
}

/* Unread = solid yellow bell */
#notificationsBtn .bell-icon.unread {
    color: #FFEB3B !important;
}

/* FINAL: Tally badge — fixed size, never grows, shows 99+ */
#notificationsBtn .notification-tally {
    position: absolute;
    top: -12px;
    right: 5px;
    background: #2E3440;
    color: #fff;
    font-size: 12px;           /* smaller text for big numbers */
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: 2px solid var(--user-color);
    text-shadow: -1px 0 2px rgba(0,0,0,0.8);
    pointer-events: none;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
    overflow: hidden;          /* critical: hides long text */
    line-height: 1;
}

/* When visible */
#notificationsBtn .notification-tally.visible {
    opacity: 1;
    transform: scale(1);
    animation: badgePulse 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(var(--user-color-rgb, 255, 215, 0), 0.6);
}

/* PERFECTLY SMOOTH pulse — no jumps, no stutters */
@keyframes badgePulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--user-color-rgb, 255, 215, 0), 0.7);
    }
    70% {
        transform: scale(1.28);
        box-shadow: 0 0 0 11px rgba(var(--user-color-rgb, 255, 215, 0), 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--user-color-rgb, 255, 215, 0), 0);
    }
}


.onboarding-content {
    max-width: 420px;
    padding: 2rem 1.8rem;
    text-align: center;
}

.onboarding-content h2 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #1E90FF, #00FF7F);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.subtitle {
    color: #aaa;
    margin-bottom: 2rem;
    font-size: 1rem;
}

/* ←←← Replace only these two blocks in your CSS →→→ */

.steps {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;          /* nice breathing room – not cramped, not huge */
    margin: 2rem 0;
    padding: 0 0.5rem;    /* tiny side padding so it doesn’t touch screen edge on mobile */
}

.step {
    display: flex;
    align-items: center;
    text-align: left;
    background: transparent;           /* ← no background */
    border-radius: 16px;
    transition: all 0.25s ease;
    position: relative;
}

/* Subtle line separator + hover glow instead of a full card */
.step::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,212,255,0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.step:first-child::before { display: none; }

.step:hover {
    transform: translateY(-3px);
    background: rgba(0,212,255,0.03);   /* barely-there glow on hover only */
}
.step:hover::before { opacity: 1; }

/* Smaller, tighter icons */
.step-icon {
    width: 44px;           /* was 56px → much slimmer */
    height: 44px;
    background: rgba(0,212,255,0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 1rem;
    font-size: 1.25rem;    /* smaller icon inside */
    color: #1E90FF;
}

/* Tighter text */
.step-text strong {
    color: #fff;
    font-size: 1rem;
    display: block;
    margin-bottom: 0.15rem;
}
.step-text span {
    color: #bbbbbb;
    font-size: 0.89rem;
    line-height: 1.35;
}

.onboarding-footer {
    margin-top: 2rem;
}

.primary-btn {
    background: linear-gradient(135deg, #1E90FF, #00FF7F);
    color: #000;
    font-weight: bold;
    padding: 0.9rem 2rem;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.primary-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0,212,255,0.5);
}

.small {
    margin-top: 1rem;
    color: #777;
    font-size: 0.8rem;
}

.legend-badge {
    width: 18px; /* Consistent size */
    height: 18px; /* Consistent size */
    vertical-align: middle; /* Align with text */
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); /* Subtle shadow */
    display: inline-block; /* Inline-block for flow */
    cursor: pointer;

}

.master-badge {
    width: 18px; /* Consistent size */
    height: 18px; /* Consistent size */
    vertical-align: middle; /* Align with text */
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); /* Subtle shadow */
    display: inline-block; /* Inline-block for flow */
    cursor: pointer;

}

.super-badge {
    width: 18px; /* Consistent size */
    height: 18px; /* Consistent size */
    vertical-align: middle; /* Align with text */
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); /* Subtle shadow */
    display: inline-block; /* Inline-block for flow */

    cursor: pointer;
}

.user-info .legend-badge {
    width: 18px; /* Consistent size */
    height: 18px; /* Consistent size */
    vertical-align: middle; /* Align with text */
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); /* Subtle shadow */
    display: inline-block; /* Inline-block for flow */
    margin-right: -3px;
    margin-top: 3px;
    cursor: pointer;
}

.user-info .super-badge {
    width: 18px; /* Consistent size */
    height: 18px; /* Consistent size */
    vertical-align: middle; /* Align with text */
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); /* Subtle shadow */
    display: inline-block; /* Inline-block for flow */
    margin-right: -3px;
    margin-top: 3.5px;
    cursor: pointer;
}
.trending-box .trending-info-top .legend-badge {
    margin-left: 1;
    width: 18px !important;
    height: 18px !important;
    margin-top: 3 !important;
    margin-right: -1px;
}
.trending-box .trending-info-top .super-badge {
    margin-left: 1;
    width: 18px !important;
    height: 18px !important;
    margin-top: 3 !important;
    margin-right: -1px !important;
}

.new-members-box .new-member-info .legend-badge {
    margin-top: 3px !important;
    margin-right: 0px;
    width: 18px !important;
    height: 18px !important;
    margin-left: 0;
    
}

.new-members-box .new-member-info .super-badge {
    margin-top: 3px !important;
    margin-right: 0px;
    width: 18px !important;
    height: 18px !important;
    margin-left: 0;
    
}

.notification-item .legend-badge {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-left: 2px;
    margin-top: 5px;
    margin-right: -2px;
}
.notification-item .super-badge {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-left: 2px;
    margin-top: 5px;
    margin-right: -2px;
}

#notificationPopup5 .legend-badge {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-left: 0px;
    margin-top: 12px;
    margin-right: 2px;
}

#notificationPopup5 .super-badge {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-left: 0px;
    margin-top: 12px;
    margin-right: 0px;
}

#notificationPopup6 .legend-badge {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-left: 0px;
    margin-top: 8px;
    margin-right: 1px;
}

#notificationPopup6 .super-badge {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-left: 0px;
    margin-top: 8px;
    margin-right: 0px;
}

#notificationPopup4 .legend-badge {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-left: 0px;
    margin-top: 12px;
    margin-right: 2px;
}
#notificationPopup4 .super-badge {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-left: 0px;
    margin-top: 12px;
    margin-right: 0px;
}

/* PROFILE POPUP ONLY — Perfect badge spacing */
#viewProfilePopup .master-badge,
#viewProfilePopup .verified-badge,
#viewProfilePopup .super-badge,
#viewProfilePopup .legend-badge {
    width: 20px !important;
    height: 20px !important;
    vertical-align: middle;
    margin-left: -1px !important;     /* Pulls them together */
    margin-right: -1px !important;    /* Tighter spacing */
    margin-top: 3px !important;      /* Fine vertical nudge */
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
    display: inline-block !important;
    cursor: default;
}

/* Optional: First badge has no left overlap */
#viewProfilePopup .master-badge:first-of-type,
#viewProfilePopup .verified-badge:first-of-type {
    margin-left: 0px !important;   /* Small breathing room after name */
}

/* Specific control in nav-profile */
.nav-profile .profile-info .super-badge {
width: 18px !important;
    height: 18px !important;
    vertical-align: middle;
    display: inline-block;
    margin-left: -1px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-top: 3px;
}


/* Specific control in nav-profile */
.nav-profile .profile-info .legend-badge {
    width: 18px !important;
    height: 18px !important;
    vertical-align: middle;
    display: inline-block;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-top: 3px;
}
/* Disabled state for upload button — match record/pop exactly */
#upload-btn:disabled,
#upload-btn[aria-disabled="true"] {
    filter: grayscale(100%) opacity(0.5) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    pointer-events: none !important;
    transform: none !important;
}

/* Make icon look disabled too */
#upload-btn:disabled i,
#upload-btn[aria-disabled="true"] i {
    color: #888 !important;
    text-shadow: none !important;
}

/* Lock icon on disabled hover — same as record/pop, but with extra specificity & fixes */
#upload-btn:disabled:hover::after,
#upload-btn[aria-disabled="true"]:hover::after {
    content: "\f023" !important;                          /* fa-lock — force content */
    font-family: "Font Awesome 6 Free" !important;        /* Explicit family */
    font-weight: 900 !important;                           /* Solid weight — critical */
    color: #FFEB3B !important;
    font-size: 20px !important;
    position: absolute !important;
    top: -15% !important;                                  /* Nudged up slightly for visibility */
    right: -8px !important;                                /* Nudged left slightly */
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    display: block !important;
    z-index: 999 !important;                               /* Higher z-index to avoid overlap */
    line-height: 1 !important;                             /* Prevent vertical stretch */
}

/* Ensure hover does nothing else */
#upload-btn:disabled:hover,
#upload-btn[aria-disabled="true"]:hover {
    transform: none !important;
    background: inherit !important;
    box-shadow: none !important;
}






@media screen and (max-width: 768px) {
    /* ==========================================================================
       Mobile-Responsive CSS (Enhanced Touch Scrolling, Map Lock, Post Swiping)
       ========================================================================== */

    html {
        background: linear-gradient(135deg, #0A0E17 0%, #1A1F2B 50%, #2E3440 100%) !important;
        background-attachment: scroll !important;
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
    }
    body {
        background: none !important;
        background-image: none !important;
        overflow-y: auto !important;
        padding-top: 0 !important;
        padding-bottom: 50px !important;
    }
    body::before,
    body::after {
        content: none !important;
        display: none !important;
        animation: none !important;
        filter: none !important;
        background: none !important;
    }

    .nav-logo img {
        width: 30px !important;
        height: 30px !important;
        margin: 0 !important;
        display: none;
    }
    .feed-header {
        display: flex !important;
        align-items: center !important;
    margin-top: -55px !important;
        margin-left: -35px !important;
        
    }
    .feed-selector {
        margin-left: 0 !important;
        margin-top: 0 !important;
    }
 
    .feed-title {
        font-size: 20px !important;
        margin-left: 15px !important;
        flex-grow: 1 !important;
        text-align: center !important;
    }
    .nav-menu {
        display: flex !important;
        justify-content: flex-end !important;
        
        gap: 0px !important;
        margin-right: -0px !important;
        margin-top: -95px;
        z-index: 999;
    }
    .button-container {
        order: 3 !important; /* push to bottom of column */
        position: relative !important;
        left: auto !important;
        transform: none !important;
        margin-top: 10 !important;
        margin-bottom: 4px !important;
        display: flex !important;
        flex-direction: row !important; /* force horizontal */
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important; /* tight but breathable spacing */
        flex-wrap: nowrap !important; /* prevent wrapping */
        width: 100% !important;
        
    }
    .record-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    gap: 10px;
    margin-top: 15px;
}
    #pop-btn, #record-btn, #refresh-btn, #upload-btn {
width: 40px !important;
        height: 40px !important;
        min-width: 40px !important; 
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important;
        transition: all 0.3s ease !important;
        min-height: 36px;
    }
    /* Delete or comment this out to show the back button on mobile */
    /*
    #back-btn {
        display: none !important;
    }
    */
    /* Pop button – yellow circle with + icon */
    #pop-btn {
        background: linear-gradient(135deg, #FFEB3B 0%, #F7C948 100%) !important;
        box-shadow: 0 4px 10px rgba(255, 235, 59, 0.4) !important;
    }
    #pop-btn::before {
        content: "\f067" !important; /* Font Awesome plus */
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;
        font-size: 16px !important;
        color: #0A0E17 !important;
    }
    #pop-btn:hover {
        transform: scale(1.08) !important;
        box-shadow: 0 6px 14px rgba(255, 235, 59, 0.6) !important;
    }
    /* Record button – keep cosmic swirl but make circle */
    #record-btn {
        background: transparent !important;
        outline: 1px solid var(--user-color) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    /* Keep the swirl background but constrain to circle */
    #record-btn::before {
        width: 200% !important;
        height: 200% !important;
        top: -50% !important;
        left: -50% !important;
    }
    #record-btn::after {
        inset: 2px !important;
        background: linear-gradient(135deg, #1A1F2B 0%, #2E3440 100%) !important;
        opacity: 0.92 !important;
    }
    /* Record mic icon */
    #record-btn i {
        font-size: 18px !important;
        color: #FFF !important;
        position: relative !important;
        z-index: 2 !important;
    }
    #record-btn:hover {
        transform: scale(1.08) !important;
        box-shadow: 0 0 12px var(--user-color, rgba(255,127,0,0.4)) !important;
    }
    /* Refresh button – FIXED: removed ::before to prevent duplicate icon */
    #refresh-btn {
        background: rgba(10, 14, 23, 0.6) !important;
        backdrop-filter: blur(3px) !important;
        outline: 1px solid var(--user-color) !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #refresh-btn i {
        font-size: 18px !important;
        color: #FFF !important;
        margin: 0 !important;
    }
    #refresh-btn:hover,
    #refresh-btn:focus {
        transform: scale(1.08) !important;
        background: rgba(10, 14, 23, 0.9) !important;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5), 0 0 12px rgba(var(--user-color-rgb, 255,127,0), 0.3) !important;
    }
    /* Upload button – circle with upload icon */
    #upload-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;     /* extra safety – prevents stretching */
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important; /* perfect circle */
        background: rgba(10, 14, 23, 0.6) !important;
        backdrop-filter: blur(3px) !important;
        outline: 1px solid var(--user-color) !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important; /* hide any text */
        transition: all 0.3s ease !important;
        overflow: hidden !important; /* clip any overflow */
    }
    /* Center the upload icon and size it consistently */
    #upload-btn i {
        font-size: 18px !important;
        color: #FFF !important;
        margin: 0 !important;
        pointer-events: none !important; /* icon doesn't steal clicks */
    }
    /* Hover/focus – subtle lift + glow like the others */
    #upload-btn:hover,
    #upload-btn:focus {
        transform: scale(1.08) !important;
        background: rgba(10, 14, 23, 0.9) !important;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5), 0 0 12px rgba(var(--user-color-rgb, 255,127,0), 0.3) !important;
    }
    /* Explore (feed-selector) – circle button with globe icon */
    .feed-selector {
        order: 2 !important; /* place in middle of column */
        margin: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
    .feed-selector .dropdown-btn {
width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
margin-left: -28px !important;
        margin-top: -25px !important;
        border-radius: 50% !important;
        background: rgba(10, 14, 23, 0.6) !important;
        backdrop-filter: blur(3px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important;
        outline: 1px solid var(--user-color) !important;
        transition: all 0.3s ease !important;
    }
    /* Explore icon (globe) – visible instead of text */
    .feed-selector .dropdown-btn::before {
        content: "\f0ac" !important; /* Font Awesome globe icon */
        font-family: "Font Awesome 6 Free" !important;
        font-weight: 900 !important;
        font-size: 16px !important;
        color: #FFF !important;
    }
    .feed-selector .dropdown-btn:hover,
    .feed-selector .dropdown-btn:focus {
        background: rgba(10, 14, 23, 0.9) !important;
        transform: scale(1.08) !important;
        box-shadow: 0 0 10px rgba(var(--user-color-rgb, 255,127,0), 0.4) !important;
    }

    /* Feed title – smaller and centered */
    .feed-title {
        order: 1 !important;
        font-size: 18px !important;
        width: 100% !important;
        text-align: center !important;
    }
    .nav-profile {
        margin-left: auto !important;
        padding: 0 !important;
        background: none !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
    .nav-profile img:not(.verified-badge) {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
    .popup,
    #transcriptionPopup,
    #sharePopup,
    #downloadPopup {
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
       
        height: 80vh !important;
        border-radius: 16px 16px 0 0 !important;
        transform: translateY(100%) !important;
        transition: transform 0.3s ease-out !important;
        overflow-y: auto !important;
    }
        .popup,
    #notificationPopup,
    #notificationPopup2,
    #notificationPopup4,
    #notificationPopup5,
    #notificationPopup6,
    #viewProfilePopup
 {
        top: 160 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
       
        height: auto !important;
        border-radius: 16px 16px 0 0 !important;
        transform: translateY(100%) !important;
        transition: transform 0.3s ease-out !important;
        overflow-y: auto !important;
    }

    .popup-content,
    .notification-content,
    .profile-view-content,
    .share-window,
    .download-window,
    .upgrade-window {
        height: auto;
        max-width: 100% !important;
    }
    .main-container,
    .container,
    #post-container {
        max-width: 100% !important;
        margin-top: 80px !important;
    }
    .right-container,
    .left-container {
        display: none !important;
    }

    /* DARK GLASS POSTS + smaller profile pic */
    .post {
        margin-bottom: 15px !important;
        padding: 15px 12px 15px 12px !important;  /* FIXED: only 10px left space before profile pic */
        background: rgba(10, 14, 23, 0.5) !important;
        backdrop-filter: blur(3px) !important;
        border: 1px solid color-mix(in srgb, var(--post-color, #1E90FF) 30%, transparent) !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.7), -1px 0 5px var(--post-color) !important;
        transform: none !important;
        transition: none !important;
        position: relative !important; /* ← required for absolute delete button */
    }

    .post-header img {
        width: 54px !important;
        height: 54px !important;
        margin-left: -14px !important;        /* no extra left margin on avatar */
        margin-right: 0px !important;     /* small tight gap to names (no extra space added) */
        border-radius: 50% !important;
    }

    .post-header .custom-name,
    .post-header .username {
        font-size: 14px !important;
    }
    .post-content p,
    .transcription {
        font-size: 15px !important;
    }
    .post-footer {
        flex-wrap: wrap !important;
        gap: 5px !important;
        margin-top: 25px;
    }
    .post-map {
        height: 200px !important;
        display: none;
    }
    .crop-modal {
        padding: 10px !important;
    }
    .crop-container {
        max-width: 100% !important;
    }
    .site-footer {
        padding: 10px !important;
        text-align: center !important;
    }
    .footer-links {
        justify-content: center !important;
        gap: 15px !important;
    }
    .copyright-notice {
        margin-top: 5px !important;
    }
    .holo-layer {
        display: none !important;
    }
    .audio-player .waveform-container {
        position: relative !important;
        width: 100% !important;
        height: 70px !important;
        overflow: hidden !important;
        margin-left: -18px !important;
        margin-right: 10px !important;
    }
    .post,
    .post-content,
    .clickable-post {
        touch-action: pan-y !important;
        pointer-events: none !important;
        -webkit-overflow-scrolling: touch !important;
        overflow: visible !important;
        user-select: none !important;
    }
    .comment-link,
    .comment-container {
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }
    .post button,
    .post a:not(.comment-link) {
        touch-action: manipulation !important;
        pointer-events: auto !important;
    }
    .posts,
    #post-container {
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .map-hint {
        display: none !important;
    }
    .post-header .username {
        max-width: 55px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 15px !important;
        margin-left: 2px !important;
        margin-right: 5px !important;
    }
    .post-header .custom-name {
        max-width: none !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        margin-right: 0.5px !important;
    }
    .transcription {
        margin-bottom: 15px !important;
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
    }
    .post-content .location {
        text-align: right !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        display: block !important;
        width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        font-size: 1rem !important;
        line-height: 1.3 !important;
    }
    .post-content .location > * {
        display: inline-block !important;
        max-width: 100% !important;
        word-break: break-all !important;
        text-align: right !important;
    }
    .fullspace-stars {
        display: none !important;
    }
    .loading-spinner {
        top: 20px !important;
        right: 50% !important;
        transform: translateX(50%) !important;
    }
    /* Dropdown content – full-width menu on mobile */
   
    .feed-selector .dropdown-content {
        width: 100% !important;
        max-height: 650px !important;
        margin-left: 0px !important;
        margin-top: 50px !important;
    }
    .nav-menu a {
        margin: 0 5px !important;
    }

    #notificationList,
    #notificationList2,
    #notificationList4,
    #notificationList5,
    #notificationList6 {
        padding: 10px !important;
    }
    .notification-item {
        flex-direction: row !important;
        align-items: flex-start !important;
        
    }
    .notif-profile-pic {
        width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 10px 0px 5px 15px;
    object-fit: cover;
    overflow-clip-margin: unset;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    flex-shrink: 0;
    transition: transform 0.3s ease;
    }
    .follow-content {
        width: 100% !important;
    }
    .time-delete {
        align-self: flex-end !important;
    }
    .crop-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .cropper-container {
        max-height: 50vh !important;
    }
    .site-footer {
        display: none !important;
    }
    .footer-links,
    .copyright-notice {
        display: none !important;
    }
    .main-container,
    #post-container {
        padding-bottom: 20px !important;  /* reduced from previous values since no footer */
    }
    .volume-control {
        visibility: hidden !important;
        pointer-events: none !important;
    }
    .volume-slider.stop-propagation {
        display: none !important;
    }
    .volume-btn {
        display: none !important;
    }
    .category-link, .state-link, .city-link {
        font-size: 16px !important;
        margin-top: -5px;
        margin-bottom: 8px ;
    }
    .play-pause-btn i.fa-play,
    .play-pause-btn i.fa-pause {
        margin-top: 0 !important;
        transition: text-shadow 0.3s ease, color 0.3s ease !important;
        color: #FFF !important;
        text-shadow: 0 0 2px rgba(255, 255, 255, 0.4), 0 0 10px var(--post-color, #FFEB3B) !important;
    }
    /* Extra tight glue between name and badges */
    .post-header .custom-name,
    .post-header .user-info {
        gap: 1px !important;
        display: inline-flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    /* ────────────────────────────────────────────────
       DELETE BUTTON (X) — smaller, still upper-right
       ──────────────────────────────────────────────── */
    .delete-post-btn {
        position: absolute !important;
        top: 60px !important;
        right: 16px !important;
        margin: 0 !important;
        padding: 2px !important;
        z-index: 10 !important;
        font-size: 8px !important;           /* smaller X */
        color: var(--user-color) !important;
        background: rgba(10, 14, 23, 0.7) !important;
        border-radius: 50% !important;
        width: 20px !important;               /* smaller circle */
        height: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 0.8 !important;
        transition: all 0.2s ease !important;
    }

    .delete-post-btn:hover,
    .delete-post-btn:focus {
        opacity: 1 !important;
        background: rgba(220, 53, 69, 0.95) !important;
        color: white !important;
        transform: scale(1.12) !important;
    }

    /* ────────────────────────────────────────────────
       PLAY ICON + COUNT — back together side-by-side
       ──────────────────────────────────────────────── */
    .play-container {
        position: absolute !important;
        top: 6px !important;
        right: 8px !important;               /* space left for delete X */
        min-width: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;                  /* small gap between icon & count */
        padding: 4px 8px !important;
        background: rgba(0,0,0,0.35) !important;
        border-radius: 12px !important;
        z-index: 5 !important;
    }

    .play-container i {
        font-size: 15px !important;           /* slightly smaller icon */
        color: var(--post-color, #FFEB3B) !important;
        margin: 0 !important;
        text-shadow: 0 0 6px rgba(255,235,59,0.5) !important;
    }

    .play-count {
        font-size: 12px !important;           /* small but readable */
        color: #E0E7FF !important;
        margin: 0 !important;
        padding: 0 !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
    }

    /* Glow on interaction */
    .play-container:hover i,
    .play-container:focus i,
    .play-container:hover .play-count,
    .play-container:focus .play-count {
        text-shadow: 0 0 4px rgba(255,255,255,0.7),
                     0 0 12px var(--post-color, #FFEB3B) !important;
        transform: scale(1.08) !important;
    }

    /* Make sure delete doesn't get covered */
    .post:hover .play-container {
        z-index: 6 !important;
    }

    /* BADGES: force smaller size + ultra-tight spacing on mobile */
    .verified-badge,
    .super-badge,
    .legend-badge,
    .master-badge,
    .elite-badge {
        width: 15px !important;
        height: 15px !important;
        min-width: 15px !important;           /* prevent flex shrinking */
        min-height: 15px !important;
                    
        vertical-align: middle !important;
        display: inline-block !important;
    }

    /* Post header (most common place) */
    .post-header .user-info .verified-badge,
    .post-header .user-info .super-badge,
    .post-header .user-info .legend-badge,
    .post-header .user-info .master-badge,
    .post-header .user-info .elite-badge {
        width: 14px !important;
        height: 14px !important;
        margin: 2px -1px 0 1px !important;     /* right margin now 1px */
    }

    /* Nav profile */
    .nav-profile .verified-badge,
    .nav-profile .super-badge,
    .nav-profile .legend-badge {
        width: 14px !important;
        height: 14px !important;
        margin: 2px 1px 0 2px !important;     /* right margin now 1px */
    }

    /* Notification items */
    .notification-item .verified-badge,
    .notification-item .super-badge,
    .notification-item .legend-badge,
    .notification-item .master-badge {
        width: 12px !important;
        height: 12px !important;
        margin: 3px 1px 0 0.5px !important;   /* right margin now 1px */
    }

    /* Extra tight name → badges glue (affects most places) */
    .post-header .custom-name,
    .post-header .user-info,
    .notif-custom-name,
    .trending-custom-name,
    .new-member-custom-name {
        gap: 1px !important;
        display: inline-flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    /* Prevent any accidental large inline size */
    .verified-badge:not(.big-badge),
    .super-badge:not(.big-badge),
    .legend-badge:not(.big-badge),
    .master-badge:not(.big-badge),
    .elite-badge:not(.big-badge) {
        max-width: 12px !important;
        max-height: 12px !important;
    }

    /* PERFECT CENTER STOP ICON IN RECORD BUTTON (mobile) */
    #record-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    #record-btn.recording,
    #record-btn.recording i {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }
    #record-btn.recording i.fa-stop,
    #record-btn.recording i.fa-square {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 16px !important;
        transform: translateX(1px) !important;
    }
    #record-btn.recording i {
        transform: translateX(1px) !important;
    }
    /* Transcription popup – your exact working fix */
    #transcriptionPopup {
        bottom: 870px !important;
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        
        border-radius: 0 16px 16px 0 !important;
        transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 999999999999 !important;
        backdrop-filter: blur(10px) !important;
        box-shadow: 8px 0 30px rgba(0, 0, 0, 0.8) !important;
                height: 100dvh !important;              /* Dynamic viewport height – key for iOS address bar hiding/showing */
        min-height: 100dvh !important;
    }
    /* Safety: prevent button-container from forcing width on any button */
    .button-container button,
    .button-container #upload-btn {
        flex: 0 0 36px !important; /* fixed size, no grow/shrink */
        width: 40px !important;
        height: 40px !important;
    }
}

@media screen and (max-width: 768px) {
    /* Completely redesign the top-bar as a single compact row */
    .top-bar {
        position: fixed !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 6px 10px !important;     /* much shorter vertically */
        gap: 8px !important;
        height: 160px !important;         /* fixed compact height – prevents stretching */
        background: rgba(10, 14, 23, 0.95) !important;
        backdrop-filter: blur(3px) !important;
    }

    /* Logo – pinned left */
    .nav-logo img {
        width: 35px !important;
        height: 35px !important;
        margin: 0 !important;
    }

    /* Feed title – absolute centered (professional header style) */
    .feed-title {
        position: absolute !important;
        left: 42% !important;
        transform: translateX(-50%) !important;
        margin-top: 70px;
        font-size: 18px !important;
        white-space: nowrap !important;
        pointer-events: none !important;
    }

    /* Right-side group: Explore globe button + profile avatar (tight together) */
    .feed-selector,
    .nav-profile {
        margin-left: 0 !important;    /* pushes both to the far right */
    }

    /* Explore globe button – directly left of profile avatar */
    .feed-selector {
        order: 1 !important;             /* ensures it comes before profile in flex */
        margin-top: 90px !important;    /* tight gap to profile */
    }

    /* Profile avatar – far right, same size as other icons */
    .nav-profile img:not(.verified-badge) {
        width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
    }

    /* Action buttons row (pop, record, refresh, upload) – now a tight horizontal bar directly under the header */
    .button-container {
        position: fixed !important;
        top: -14;
        left: 47% !important;
        transform: translateX(-50%) !important;
        z-index: 1;
        /* backdrop-filter: blur(8px) !important; */
        /* border-radius: 30px !important; */
        /* padding: 6px 12px !important; */
        gap: 10px !important;
        /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important; */
    }
    
    .nav-logo {
    text-align: center;
    }

    /* Reduce massive gap above posts */
    .main-container,
    .container,
    #post-container {
        
        
    }
    #recording-label {
color: var(--user-color);
        font-size: 14px;
        font-weight: 600;
        text-shadow: 2px 4px 6px rgba(0, 0, 0, 0.8);
        letter-spacing: 0.5px;
        margin-left: 40px;
        margin-top: 12px;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
    }

.recording-status #recorded-time {
        color: #FFEB3B;
        font-size: 14px;
        font-weight: 600;
        position: static;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        animation: yellowGlow 1.2s infinite ease-in-out;
        margin-top: 12px;
        margin-left: 5px;
    }

#recorded-time.processing {
    position: absolute;
    margin-top: 40px;
    left: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 120px;
    gap: 5px;
    font-size: 14px;
    color: #FFEB3B;
    background: none;
    border-radius: 6px;
    animation: yellowGlow 1.2s infinite ease-in-out;
    letter-spacing: 0.5px;
}
.play-pause-preview {
    background: none;
    border: none;
    color: var(--user-color, #FFEB3B);
    font-size: 18px;
    cursor: pointer;
    padding: 1px;
    margin-right: 5px;
    transition: all 0.3s ease;
}
.audio-preview {
    position: absolute;
    top: 48;
    left: 54px;
    display: none;
    align-items: center;
    gap: 4px;
    width: 117px;
    border-radius: 6px;
    z-index: 1;
    

}

.post-cooldown {
        position: absolute;
        margin-top: 82px;
        left: 50px;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 120px;
        gap: 4px;
        font-size: 14px;
        color: #FFF;
        background: none;
        border-radius: 6px;
        padding: 4px 6px;
    }
#cooldown-label,
#cooldown-time {
    color: #00A1D6;
    font-size: 14px;
    font-weight: 600;
    text-shadow: 0 0 6px rgba(0, 161, 214, 0.95);
    animation: pulseGlow 1.2s infinite ease-in-out;
    
}

    /* Hide ONLY Home and Private Servers links (text + icons) — keep bell + profile visible 
    .nav-left a[href="<?php echo htmlspecialchars($homeLink); ?>"],
    .nav-left a[href="private.php"] {
        display: none !important;
    }*/

.spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg 120deg, var(--user-color) 120deg 240deg, transparent 240deg 360deg);
    animation: spin 1.4s cubic-bezier(0.55, 0.1, 0.3, 0.9) infinite, glowPulse 3s ease-in-out infinite alternate, orbit 4s ease-in-out infinite;
    position: relative;
    box-shadow: 0 0 12px rgba(var(--user-color-rgb), 0.3), inset 0 0 20px rgba(var(--user-color-rgb), 0.2), inset 0 0 30px rgba(0, 0, 0, 0.7);
    z-index: 1700000;
    backdrop-filter: blur(3px);
    margin-left: -340px;
    margin-top: -5px;
    
    }
    
    .nav-menu a i {
    font-size: 22px;
    margin-right: 3px;
    width: 22px;
    text-align: center;
    color: var(--user-color);
    transition: all 0.3s ease;
    margin-left: 8px;
    display: none;
}

.nav-profile .profile-info {
    display: none;
    flex-direction: column;
    margin-left: 5px;
    pointer-events: none;
}
 .nav-menu a:not(.nav-profile) {
        font-size: 0 !important;
    }

#notificationsBtn .bell-icon {
    font-size: 32px !important;
    color: var(--user-color);
    transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
    display: inline-block;
    margin-right: -4;
}

    #notificationsBtn .notification-tally {
        position: absolute;
        top: -8px;
        right: 8px;
        background: #2E3440;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        outline: 2px solid var(--user-color);
        text-shadow: -1px 0 2px rgba(0, 0, 0, 0.8);
        pointer-events: none;
        opacity: 0;
        transform: scale(0);
        transition: opacity 0.4s ease, transform 0.4s ease;
        overflow: hidden;
        line-height: 1;
    }

    .seek-bar-preview {
    width: 60px;
    background: linear-gradient(90deg, #2E3440 0%, #1A1F2B 100%);
    border-radius: 3px;
    cursor: pointer;
    -webkit-appearance: none;
    outline: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
    transition: background 0.3s ease;
}

    .seek-bar-preview::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    background: var(--user-color);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}
.profile-visibility-indicator { right: -170px !important;

}

.follow-button, .mute-button, .profile-button, .profile-likes-button, .profile-comments-button, .invite-button {
    background: none;
    color: #FFF;
    border: none;
    padding: 8px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    box-sizing: border-box;
    vertical-align: middle;
    line-height: 1.5;
    position: relative;
    margin-top: 0px;
    letter-spacing: 0.3px;
}


#commentViewPopup .comment-popup-content {
 
        
        /* Optional: full-screen feel, no margins/padding issues */
        margin: 0 !important;
        padding: 0 !important;
        width: 100vw !important;
        max-width: 100% !important;
}

.post-comment-btn {
    background: linear-gradient(135deg, #0A0E17 0%, #1A1F2B 100%) !important;
    border: 1px solid var(--post-color, ) !important;
    color: #FFF !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 8px 16px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-align: center !important;
    letter-spacing: 0.5px !important;
    text-shadow: 1px 2px 0 #000, 1px 2px 0.5px rgba(0, 0, 0, 0.9), inset 0 0 1px rgba(0, 0, 0, 0.9) !important;
    border-radius: 100px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
    max-width: 150px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
    margin-left: 0px;
    text-decoration: none;
}

.profile-view-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.profile-view-custom-name {
    font-size: 14px;
    font-weight: 700;
    color: #FFF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 0px;
    
}
.popup-content {
    background: rgba(10, 14, 23, 0.3);
    padding: 15px;
    border-radius: 16px;
    max-width: 420px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--user-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(3px);
    /* z-index: 999999999; */
}
#commentViewPopup {
    display: block !important;
    position: fixed !important;
    top: 100px !important;
    left: 0 !important;
    right: auto !important;
    width: 614px !important;
    height: calc(100% - 110px) !important;
    background: rgba(10, 14, 23, 0.3) !important;
    backdrop-filter: blur(6px) !important;
    z-index: 2000 !important;
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.8) !important;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out !important;
    transform: translateX(-100%) !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    border-radius: 0 16px 16px 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
.comment-popup-body {
    overflow-y: auto !important;
    /* height: auto !important; */
    /* max-height: calc(100% - 100px) !important; */
    scrollbar-width: thin !important;
    scrollbar-color: var(--post-color) #0A0E17 !important;
    -ms-overflow-style: auto !important;
    opacity: 1 !important;
    filter: none !important;
    color: #fff !important;
    padding-right: 45px;
    padding-left: 15px;
}

#notificationList2 .settings-form .profile-image-preview {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    overflow-clip-margin: unset;
    margin-top: 80px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) !important;
    overflow: hidden !important;
    margin-bottom: 5px;
    margin-left: -318;
}

#notificationList2 .settings-form .form-group small {
    color: #E0E7FF !important;
    font-size: 9px !important;
    text-align: center !important;
    margin-top: 0px;
}

    .banner-preview {
        width: 100%;
        height: 100px;
        background-size: cover;
        background-position: center;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(10, 14, 23, 0.7);
        backdrop-filter: blur(3px);
        margin-bottom: 10px;
        overflow: hidden;
        border: 1px dashed var(--user-color);
        margin-left: -60px;
    }

    #notificationList2 .settings-form .form-group label {
        color: #FFF !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
        margin-left: -8px;
        margin-right: 5;
    }

    #notificationList2 .settings-form .profile-view-stats {
        margin-top: 30px;
        margin-left: -250;
        ent: center;
    }
    #notificationList2 .settings-form .swatch {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
}
   
   #notificationList2 .settings-form .swatch-wrapper {
    position: relative !important;
    width: 0px !important;
    /* height: 30px !important; */
    margin: 0 auto !important;
}
 
 .settings-form .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    /* margin-right: 70px; */
    bottom: 0;
    background: rgba(10, 14, 23, 0.7);
    border: 1px solid var(--user-color, ) !important;
    border-radius: 24px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    z-index: 100;
    outline: none;
    min-width: 50;
}
 
  #notificationList2 .settings-form .form-label {
    color: #FFFFFF !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.4) !important;
    margin-left: 40px;
}
.settings-form .status-icon {
    font-size: 12px;
    line-height: 24px;
    margin-left: -2px;
    margin-right: -2px;
}
    .popup.open,
    #notificationPopup.open,
    #notificationPopup2.open,
    #notificationPopup4.open,
    #notificationPopup5.open,
    #notificationPopup6.open,
    #viewProfilePopup.open,
    #transcriptionPopup.active,
    #sharePopup.active,
    #downloadPopup.active {
        transform: translateY(0) !important;
        padding-bottom: 85px;
        padding-top: 0px;
        height: auto;
    }
    
     #commentViewPopup {
    display: none !important;
    visibility: hidden !important;
  }
}
@media screen and (max-width: 768px) {
    /* Force perfect centering for back button icon (matches upload/refresh) */
    #back-btn {
        display: flex !important;
        width: 40px !important;   /* Slightly larger than 30px for visibility */
        height: 40px !important;
        min-width: 40px;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;           /* remove any padding that could offset */
        margin: 0 !important;
    }

    #back-btn i {
        margin: 0 !important;             /* kill any auto margin */
        font-size: 18px !important;      /* match other icons */
        line-height: 1 !important;       /* tight vertical */
    }
}

@media screen and (max-width: 768px) {
    /* Unhide and adjust logo size for mobile */
    .nav-logo img {
        width: 50px !important;   /* Slightly larger than 30px for visibility */
        height: 50px !important;
        margin: 0 !important;
        /* display: none; */      /* ← Comment or delete this line */
        display: block !important; /* Force visible */
        
    }

    /* Optional: Center or position it nicely */
    .nav-logo {
        /* margin: 0 !important; */
        padding: 5px 0 !important;
        margin-top: -96;
        margin-left: 8;
    }
    body.holo-disabled .post::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, transparent, var(--post-color), transparent);  /* Horizontal wave using post color */
    /*background-size: 165% 165%;  /* Wide for smooth shift */
   /* animation: wave2 15s ease-in-out infinite;  /* Slow, gentle back-and-forth glow */
    opacity: 0.3;  /* Subtle—adjust to 0.2 for fainter or 0.4 for bolder */
    z-index: -1;  /* Behind post content */
    border-radius: inherit;  /* Matches post rounding */
    pointer-events: none;  /* Doesn't block interactions */
}

}


@media only screen and (max-width: 480px) {
    .post::before {
        display: none !important;
    }
#notificationPopup {
    height: auto;
}
#clearAllBtn {
        color: var(--user-color, #F19221);
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.3s ease;
        background: none;
        border: none;
        margin: 0;
        padding-right: 80;
        line-height: 1.5;
        /* margin-left: 0px; */
        margin-right: 0;
        /* margin-left: -200px; */
    }

    #viewProfileBtn {
        background: linear-gradient(135deg, #0A0E17 0%, #1A1F2B 100%) !important;
        border: 1px solid var(--user-color, );
        color: #FFF !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        padding: 8px 6px !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        text-align: center !important;
        letter-spacing: 0.5px !important;
        text-shadow: 1px 2px 0 #000, 1px 2px 0.5px rgba(0, 0, 0, 0.9), inset 0 0 1px rgba(0, 0, 0, 0.9) !important;
        border-radius: 100px !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
        max-width: 100px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        /* display: inline-block !important; */
        /* margin-top: 40px; */
        margin-bottom: -8px;
        margin-left: -110px;
        margin-right: 10px;
    }
        .settings-form .status-icon {
        font-size: 12px;
        line-height: 24px;
        margin-left: -2px;
        margin-right: -2px;
        display: none;
    }
    #logoutBtn {
        background: linear-gradient(135deg, #0A0E17 0%, #1A1F2B 100%) !important;
        border: 1px solid var(--user-color, );
        color: #FFF !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        padding: 8px 6px !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        text-align: center !important;
        letter-spacing: 0.5px !important;
        text-shadow: 1px 2px 0 #000, 1px 2px 0.5px rgba(0, 0, 0, 0.9), inset 0 0 1px rgba(0, 0, 0, 0.9) !important;
        border-radius: 100px !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
        max-width: 100px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: inline-block !important;
        text-decoration: none;
        margin-right: -10px;
        margin-bottom: -8px;
        margin-top: 24px;
        /* margin-left: -28; */
    }
    #mutedMembersBtn {
        color: var(--user-color, #D32F2F) !important;
        font-size: 14px !important;
        text-decoration: none !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        background: none !important;
        border: none !important;
        margin: 0px -25px 30px 30 !important;
        padding: 0 !important;
        line-height: 1.5 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
#mutedMembersBtn i {
    font-size: 17px !important;
    margin-left: -30px;
    margin-right: -15px;
}
#closeNotificationBtn2 {
    background: none;
    border: none;
    color: #E0E7FF;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    margin-right: -35px;
    font-weight: light;
    line-height: 1;
    margin-left: 20;
}
#notificationList2 .settings-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding: 15px !important;
    font-family: 'Exo 2', sans-serif;
}
#notificationList2 .settings-form .custom-file-upload {
    background: rgba(10, 14, 23, 0.7);
    border: 1px solid var(--user-color, );
    color: #FFF !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 6px 5px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-align: center !important;
    letter-spacing: 0.5px !important;
    text-shadow: 1px 2px 0 #000, 1px 2px 0.5px rgba(0, 0, 0, 0.9), inset 0 0 1px rgba(0, 0, 0, 0.9) !important;
    border-radius: 100px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
    max-width: 100px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
}
.banner-section {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: -170;
}
#notificationList2 .settings-form .profile-view-stat-item {
    background: rgba(10, 14, 23, 0.7);
    border: 1px solid var(--user-color, );
    border-radius: 100px;
    padding: 8px 12px;
    color: #FFF;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    margin-left: 20px;
    margin-bottom: 0px;
}
#notificationList2 .settings-form .form-group .preferred_location_help {
    color: #E0E7FF !important;
    font-size: 9px !important;
    text-align: center !important;
    margin-top: 0px;
    display: block;
}
#notificationList2 .settings-form .form-actions {
    display: flex !important;
    gap: 10px !important;
    justify-content: start !important;
    margin-top: 50px !important;
    margin-left: 60px;
}
.settings-form .advanced-settings {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
    visibility: visible;
    opacity: 1;
    height: auto;
    margin-left: 10px;
    max-width: 200;
}
.notification-item .content {
    flex: 1;
    color: #FFF;
    font-size: 12px;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    min-width: 0;
    margin-top: 6px;
    margin-bottom: 15px;
    margin-left: 5px;
}
.notif-custom-name {
    color: #FFF;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}
    .notif-custom-name a {
        color: inherit;
        text-decoration: none;
        transition: all 0.3s ease;
        margin-bottom: 2px;
        margin-top: 5px;
        
        /* Core requirements for ellipsis to actually work */
        display: inline-block;           /* or block — allows width to be respected */
        max-width: 100%;         
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
        
       
    }
.notif-username {
    color: #E0E7FF;
    font-size: 14px;
   margin-left: 2px; 
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    margin-top: 5px;
    width: 40;
}
.follow-btn {
    display: none;
    background: linear-gradient(135deg, var(--user-color, #F19221) 0%, var(--user-color, #FFA500) 100%);
    color: #FFF;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    max-width: 65px;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    margin-top: 12px;
    margin-left: 0px;
}
.profile-view-custom-name {
    font-size: 16px;
    font-weight: 700;
    color: #FFF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 0px;
    margin-left: -12px;
    
    /* ── Force everything to stay on one line ── */
    flex-wrap: nowrap;              /* Prevents flex items from wrapping to new line */
    white-space: nowrap;            /* Prevents text inside from wrapping */
               /* Hides anything that would overflow horizontally */
    
    /* Optional but very helpful: */
    max-width: 100%;                /* Doesn't grow wider than parent */
    /* or use a fixed value like max-width: 180px; if you want a hard limit */
}
.profile-view-username {
    font-size: 14px;
    color: #fff;
    font-weight: 300;
    margin-bottom: 10px;
}
.like-view-btn {
    background: linear-gradient(135deg, #800080 0%, #9400D3 100%);
    color: #FFF;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    max-width: 50px;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    margin-top: 12px;
    margin-left: -15px;
}
.view-btn {
    background: linear-gradient(135deg, #007BFF 0%, #00BFFF 100%);
    color: #FFF;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    max-width: 50px;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    margin-top: 12px;
    margin-left: -12px;
}
}
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ====================== MAKE EXISTING SEARCH BAR VISIBLE + CENTERED ON MOBILE ====================== */
@media screen and (max-width: 768px) {

    #combined-search-container {
        display: block !important;
        width: 100% !important;
        max-width: 92% !important;
        /* margin: 12px auto 16px auto !important; */
        /* z-index: 10 !important; */
        margin-left: -230;
        margin-right: -100;
        margin-top: 100;
    }

    .search-bar {
        width: 100% !important;
        margin: 0 auto !important;
        display: block !important;
        height: 40px !important;
    }

    .search-icon-btn {
        right: 50px !important;
        top: 120;
    }

    /* Hide the "Coming Soon" overlay */
    .mobile-message {
        display: none !important;
    }
}


.search-bar-container2 {
    display: none;
}
/* ====================== MOBILE HOME BUTTON ====================== */
@media screen and (max-width: 768px) {

    .nav-logo.mobile-home-btn {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 9999999999999999;
    }

    #mobile-home-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        border-radius: 50% !important;
        background: rgba(10, 14, 23, 0.6) !important;
        backdrop-filter: blur(3px) !important;
        border: 1px solid var(--user-color) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #FFF !important;
        font-size: 18px !important;           /* House icon size */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
        transition: all 0.3s ease !important;
        text-decoration: none !important;
        margin-left: -105px;
        margin-top: 0;
    }

    #mobile-home-btn:hover,
    #mobile-home-btn:focus {
        transform: scale(1.08) !important;
        background: rgba(10, 14, 23, 0.9) !important;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5), 
                    0 0 12px rgba(var(--user-color-rgb, 255,127,0), 0.4) !important;
        color: #FFEB3B !important;
    }

    /* Active state (when on home feed) */
    #mobile-home-btn.home-active {
        background: rgba(10, 14, 23, 0.95) !important;
        border-color: var(--user-color) !important;
        color: var(--user-color) !important;
        box-shadow: 0 0 12px rgba(var(--user-color-rgb, 255,127,0), 0.6) !important;
    }


}

/* Hide the new home button on desktop */
@media screen and (min-width: 769px) {
    .nav-logo.mobile-home-btn {
        display: none !important;
    }
}
/* ====================== SETTINGS POPUP FOOTER LINKS ====================== */
#notificationPopup2 .settings-footer-links {
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px solid rgba(var(--user-color-rgb), 0.25);
    text-align: center;
    display: flex;
    margin-left: 10px;
    justify-content: center;
    gap: 16px 22px;
    font-size: 13px;
    color: #ccc;
}

#notificationPopup2 .settings-footer-links a {
    color: #00D4FF;
    text-decoration: none;
    transition: all 0.25s ease;
    font-weight: 500;
}

#notificationPopup2 .settings-footer-links a:hover,
#notificationPopup2 .settings-footer-links a:focus {
    color: #FFEB3B;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

#notificationPopup2 .settings-footer-links a.upgrade-now {
    color: #a900ff;
    font-weight: 700;
}

#notificationPopup2 .settings-footer-links a.upgrade-now:hover {
    color: #FFEB3B;
}

/* Mobile adjustments for the settings popup footer */
@media screen and (max-width: 768px) {
    #notificationPopup2 .settings-footer-links {
        margin-top: 30px;
        padding-top: 20px;
        gap: 14px 18px;
        font-size: 12.5px;
        margin-left: 150;
    }
    #notificationPopup2 .upgrade-now2 {
            color: #a900ff;
    font-weight: 700;
    }
}
/* ====================== TOP UPGRADE BUTTON (Purple) ====================== */
#upgradeSettingsTop {
    position: absolute !important;   /* absolute = scrolls with content */
    top: 18px;                       /* keep your exact original top */
    right: 25px;                     /* keep your exact original right */
    background: linear-gradient(135deg, #8a2be2, #a900ff);
    color: #fff;
    border: none;
    padding: 9px 22px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(138, 43, 226, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    display: none;
    white-space: nowrap;
}

#upgradeSettingsTop:hover,
#upgradeSettingsTop:focus {
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(138, 43, 226, 0.6);
    background: linear-gradient(135deg, #a900ff, #8a2be2);
    color: #FFEB3B;
    text-shadow: 0 0 6px rgba(255, 235, 59, 0.6);
}

#upgradeSettingsTop:active {
    transform: scale(0.97);
}

/* Mobile - keep your exact original positioning */
@media screen and (max-width: 768px) {
    #upgradeSettingsTop {

display: none;
top: 18px;
        right: 238px;
        padding: 5px 14px;
        font-size: 12px;
        /* margin-left: -500px; */
    }
    
    /* Prevent overlap with Save */
    #saveSettingsTop {
        margin-right: 110px !important;
    }
}
/* ====================== DOWNLOAD POPUP BUTTON — CENTERED & WIDE ====================== */

/* Center the section itself */
#realDownloadSection {
    text-align: center;
    margin: 25px 0 35px 0;
    width: 100%;
}

/* Make the actual download button centered and wide */
#realDownloadBtn {
    display: block;
    width: 85%;
    max-width: 320px;
    margin: 0 auto;
    padding: 14px 20px;
    font-size: 16px;
    gap: 10px; /* for icon + text */
}

/* Optional: make sure the upgrade button and close button also look centered */
#upgradeSection a,
.close-popup-btn {
    display: block;
    margin: 0 auto;
    width: 85%;
    max-width: 320px;
}
/* ====================== ONBOARDING MODAL — FINAL WORKING VERSION ====================== */
/* MUST BE THE VERY LAST RULES IN YOUR CSS FILE */

#onboarding-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 96vw !important;
    max-width: 420px !important;
    height: auto !important;
    max-height: 94dvh !important;
    z-index: 999999999 !important;
    background: transparent !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

#onboarding-modal .popup-content.onboarding-content {
    background: rgba(10, 14, 23, 0.9) !important;
    padding: 2rem 1.8rem !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.8), 0 0 10px rgba(0,0,0,0.3) !important;
    border: 1px solid var(--user-color) !important;
    backdrop-filter: blur(3px) !important;
    width: 100% !important;
    max-height: 90dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    text-align: center !important;
}

/* FORCE override the bottom-sheet rule that keeps breaking it */
.popup.open#onboarding-modal,
#onboarding-modal.popup.open,
#onboarding-modal.open,
#onboarding-modal:not(.hidden),
#onboarding-modal[style*="display: flex"] {
    transform: translate(-50%, -50%) !important;
    bottom: auto !important;
    padding-bottom: 0 !important;
    height: auto !important;
}

/* Mobile portrait - keep it visible and usable */
@media screen and (max-width: 768px) {
    #onboarding-modal {
        width: 96vw !important;
    }
    #onboarding-modal .popup-content.onboarding-content {
        padding: 1.8rem 1.4rem !important;
        max-height: 88dvh !important;
    }
}

@media screen and (max-width: 480px) {
    #onboarding-modal .popup-content.onboarding-content {
        padding: 1.5rem 1.2rem !important;
    }
    .step-icon { width: 38px !important; height: 38px !important; }
    .steps { gap: 1.1rem !important; }
    .primary-btn { padding: 0.8rem 1.6rem !important; font-size: 1rem !important; }
}

/* View Counter - Underneath Play Count */
.view-counter {
display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 16px;
    color: #fff;
    margin-top: -20px;
    opacity: 1;
    /* padding: 2px 0; */
    margin-right: 8px;
    font-weight: 100;
}
.view-icon {
font-size: 15px;
    color: var(--post-color);
    /* line-height: 1; */
    margin-top: 3px;
    margin-right: 3px;
}

.view-count {
    
    font-size: 16px;
    color: #fff;
}

/* Mobile */
@media (max-width: 768px) {
    .view-counter {
font-size: 12px;
        margin-top: -38px;
        margin-right: 45px;
    }
    .view-icon {
        font-size: 12px;
            color: var(--post-color);
    /* line-height: 1; */
    margin-top: 3px;
    margin-right: 3px;
    }
}