/* Badge styles moved to /css/badges.css */

/* === PROFILE ENTRANCE ANIMATIONS (60fps smooth) === */

/* Avatar entrance - first element */
.profile-pic-container {
  animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
  margin-top: 14px !important;
  margin-bottom: 40px !important;
}

/* Username entrance - second */
.profile-username {
  animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
  font-size: 1.6rem; 
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  color: #fff; 
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* Badges entrance - third */
.profile-badges {
  animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
  margin-top: 4px !important;
}

/* Bio entrance - fourth */
.profile-bio-container {
  animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
  margin: 6px 0 8px 0 !important;
  max-width: 760px;
  padding: 0 12px;
}

/* Action buttons entrance - fifth */
.profile-actions {
  animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 6px 0 10px 0 !important;
}

/* Stats entrance - sixth */
.profile-stats {
  animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
  margin-top: 6px !important;
}
/* Tabs entrance - seventh */
.tabs-container {
  animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;
  margin-top: 6px !important;
}

/* Posts grid entrance - last, with fade */
.posts-grid {
  animation: fadeInScale 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}

/* Individual post items stagger */
.post-item {
  animation: fadeInScale 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.post-item:nth-child(1) { animation-delay: 0.9s; }
.post-item:nth-child(2) { animation-delay: 0.95s; }
.post-item:nth-child(3) { animation-delay: 1s; }
.post-item:nth-child(4) { animation-delay: 1.05s; }
.post-item:nth-child(5) { animation-delay: 1.1s; }
.post-item:nth-child(6) { animation-delay: 1.15s; }
.post-item:nth-child(7) { animation-delay: 1.2s; }
.post-item:nth-child(8) { animation-delay: 1.25s; }
.post-item:nth-child(9) { animation-delay: 1.3s; }

/* Remaining posts fade in together */
.post-item:nth-child(n+10) { animation-delay: 1.35s; }

/* Keyframes - hardware accelerated for 60fps */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Level badge pulse (subtle) */
.level-badge {
  animation: badgePulse 2.5s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.05);
  }
}

/* Verified/Premium badges float */
.profile-username .verified-badge,
.profile-username .premium-badge-pill {
  animation: badgeFloat 3s ease-in-out infinite;
}

@keyframes badgeFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .profile-pic-container,
  .profile-username,
  .profile-badges,
  .profile-bio-container,
  .profile-actions,
  .profile-stats,
  .tabs-container,
  .posts-grid,
  .post-item {
    animation: none !important;
  }
  
  .level-badge,
  .verified-badge,
  .premium-badge-pill {
    animation: none !important;
  }
  
  .post-modal.open,
  .post-modal-content,
  .post-modal-image,
  .post-modal-header,
  .post-modal-actions,
  .post-modal-content-text,
  .post-modal-comments,
  .post-modal-comment-input {
    animation: none !important;
  }
}

/* === POST MODAL ENTRANCE ANIMATIONS (cascade) === */

/* Modal backdrop fade in */
@keyframes modalBackdropFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Modal content slide up */
@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Modal elements cascade */
.post-modal.open .post-modal-image {
  animation: modalElementFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.post-modal.open .post-modal-header {
  animation: modalElementSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.post-modal.open .post-modal-actions {
  animation: modalElementSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.post-modal.open .post-modal-content-text {
  animation: modalElementSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

.post-modal.open .post-modal-comments {
  animation: modalElementFade 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.post-modal.open .post-modal-comment-input {
  animation: modalElementSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}

/* Individual comments stagger */
.post-modal.open .post-modal-comment:nth-child(1) {
  animation: modalElementSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

.post-modal.open .post-modal-comment:nth-child(2) {
  animation: modalElementSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}

.post-modal.open .post-modal-comment:nth-child(3) {
  animation: modalElementSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

.post-modal.open .post-modal-comment:nth-child(n+4) {
  animation: modalElementSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

/* Keyframes for modal elements */
@keyframes modalElementFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalElementSlide {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Close button entrance */
.post-modal.open .post-modal-close {
  animation: modalCloseEntrance 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

@keyframes modalCloseEntrance {
  from {
    opacity: 0;
    transform: scale(0.5) rotate(-90deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* Navigation buttons entrance (prev/next) */
.post-modal.open .post-modal-nav {
  animation: modalNavEntrance 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

@keyframes modalNavEntrance {
  from {
    opacity: 0;
    transform: translateY(-50%) scale(0.8);
  }
  to {
    opacity: 0.85;
    transform: translateY(-50%) scale(1);
  }
}

/* === Edit Modal (copiat din index.css, adaptat pentru profil) === */
.edit-modal {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.85);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}
.edit-modal.hidden {
  display: none !important;
}
.edit-modal-content {
  background: #232323;
  border-radius: 16px;
  max-width: 420px;
  width: 95vw;
  margin: auto;
  padding: 32px 24px 24px 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  position: relative;
  color: #fff;
  animation: fadeInPopup .18s cubic-bezier(.4,0,.2,1);
}
.edit-modal-content h2 {
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: 18px;
  font-weight: 600;
  text-align: left;
}
.edit-modal-content label {
  color: #bbb;
  font-size: 1rem;
  margin-top: 12px;
  display: block;
  margin-bottom: 4px;
}
.edit-modal-content input[type="text"],
.edit-modal-content textarea {
  width: 100%;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 10px 14px;
  color: #fff;
  font-size: 1rem;
  margin-bottom: 10px;
  margin-top: 6px;
  resize: vertical;
  outline: none;
  transition: border 0.2s, box-shadow 0.2s;
}
.edit-modal-content input[type="text"]:focus,
.edit-modal-content textarea:focus {
  border-color: #e91e63;
  box-shadow: 0 0 0 2px rgba(233,30,99,0.15);
}
.edit-modal-content input[type="file"] {
  margin-top: 8px;
  margin-bottom: 16px;
  color: #fff;
  background: #2a2a2a;
  border: 2px dashed #666;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.edit-modal-content input[type="file"]:hover {
  border-color: #e91e63;
  background: #333;
}

.edit-modal-content input[type="file"]:focus {
  outline: none;
  border-color: #e91e63;
  box-shadow: 0 0 0 2px rgba(233,30,99,0.2);
}

.preview-container {
  text-align: center;
  margin: 16px 0;
}

.preview-container img {
  border: 2px solid #e91e63;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.edit-modal-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  gap: 12px;
}
.edit-modal-buttons button {
  background: #333;
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s, color 0.2s;
  margin-right: 8px;
}
.edit-modal-buttons button[type="submit"],
.edit-modal-buttons .save-edit-btn {
  background: #e91e63;
  color: #fff;
  font-weight: 600;
}
.edit-modal-buttons button[type="submit"]:hover,
.edit-modal-buttons .save-edit-btn:hover {
  background: #ff2e7a;
}
.edit-modal-buttons button[type="button"],
.edit-modal-buttons .cancel-edit-btn {
  background: #444;
  color: #ccc;
}
.edit-modal-buttons button[type="button"]:hover,
.edit-modal-buttons .cancel-edit-btn:hover {
  background: #e91e63;
}
.edit-modal .close-edit-modal {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #888;
  cursor: pointer;
  z-index: 2;
  transition: color 0.2s;
}
.edit-modal .close-edit-modal:hover {
  color: #fff;
}
.select-game {
  position: relative;
}

body.modal-open {
  overflow: hidden;
}

@media (max-width: 600px) {
  .edit-modal-content {
    padding: 18px 6vw 18px 6vw;
    max-width: 98vw;
  }
}
/* === 3 dots (ellipsis) menu in modal header, exact ca pe feed === */
.post-modal-options-toggle {
    background: none;
    border: none;
    color: #888;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s;
}
.post-modal-options-toggle:hover {
    background: #333;
    color: #fff;
}
.post-modal-options-menu {
    position: fixed;
    right: 16px;
    top: auto;
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    z-index: 10000;
    min-width: 140px;
    display: none;
    overflow: hidden;
    padding: 4px 0;
}
.post-modal-options-menu .post-modal-option {
    padding: 10px 16px;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-size: 0.92rem;
}
.post-modal-options-menu .post-modal-option:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #e91e63;
}
.post-modal-options-menu .post-modal-option.delete-post {
    color: #ff4444;
}
.post-modal-options-menu .post-modal-option.delete-post:hover {
    background: rgba(255, 68, 68, 0.1);
    color: #ff4444;
}

/* Post options menu for feed posts (3 dots menu) */
.post-options {
    position: relative;
    display: inline-block;
}

.post-options-toggle {
    background: none;
    border: none;
    color: #888;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s;
}

.post-options-toggle:hover {
    background: #333;
    color: #fff;
}

.post-options-menu {
    position: absolute;
    right: 0;
    top: 100%;
    background: rgba(30, 30, 30, 0.95);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: none;
    z-index: 1000;
    min-width: 140px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    overflow: hidden;
    padding: 4px 0;
}

/* Modal navigation buttons (Next/Prev) - Instagram style cu tema site-ului */
.post-modal-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(233, 30, 99, 0.9);
  border: none;
  color: #ffffff;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  z-index: 3500;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(233, 30, 99, 0.3);
  opacity: 0.85;
}

.post-modal-nav:hover { 
  background: rgba(233, 30, 99, 1);
  opacity: 1;
  transform: translateY(-50%) scale(1.15);
  box-shadow: 0 6px 20px rgba(233, 30, 99, 0.5);
}

.post-modal-nav.prev { 
  left: 30px; 
}

.post-modal-nav.next { 
  right: 30px; 
}

.post-modal-nav i { 
  font-size: 16px;
  font-weight: 900;
  color: #ffffff;
}

/* Hide on mobile like Instagram */
@media (max-width: 768px) {
  .post-modal-nav { display: none; }
}

.post-options-menu .post-option {
    padding: 10px 16px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.92rem;
    transition: background 0.15s, color 0.15s;
}

.post-options-menu .post-option:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #e91e63;
}

.post-options-menu .post-option.delete-post {
    color: #ff4444;
}

.post-options-menu .post-option.delete-post:hover {
    background: rgba(255, 68, 68, 0.1);
}

/* Save (bookmark) button modal: outline/solid ca pe feed */
/* Save (bookmark) button - UNIFICAT pentru feed, grid, modal */
/* Save/Bookmark button - unified style for feed, grid, modal, profile */
.save-btn,
.post-modal-action.bookmark-btn {
  color: #888 !important;
  background: none !important;
  border: none !important;
  transition: color 0.2s, background 0.2s, font-weight 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.save-btn:hover,
.post-modal-action.bookmark-btn:hover {
  color: #e91e63 !important;
}
.save-btn.active,
.save-btn.saved,
.post-modal-action.bookmark-btn.saved {
  color: #e91e63 !important;
  background: none !important;
}
.save-btn.active:hover,
.save-btn.saved:hover,
.post-modal-action.bookmark-btn.saved:hover {
  background: none !important;
}
.save-btn i,
.post-modal-action.bookmark-btn i {
  font-weight: 400 !important; /* FontAwesome outline */
  color: #888 !important;
  transition: color 0.2s, font-weight 0.2s;
}
.save-btn:hover i,
.post-modal-action.bookmark-btn:hover i {
  color: #e91e63 !important;
}
.save-btn.active i,
.save-btn.saved i,
.post-modal-action.bookmark-btn.saved i {
  color: #e91e63 !important;
  font-weight: 900 !important; /* FontAwesome solid */
}
/* Save counter next to button, like on feed */
.save-btn .save-count,
.post-modal-action.bookmark-btn .save-count {
  font-size: 0.98em;
  color: #fff;
  font-weight: 600;
  margin-left: 2px;
  min-width: 18px;
  text-align: left;
  letter-spacing: 0.5px;
  transition: color 0.2s;
}
.save-btn.active .save-count,
.save-btn.saved .save-count,
.post-modal-action.bookmark-btn.saved .save-count {
  color: #e91e63;
}
/* CSS doar pentru sectiunea Share Your Gaming Moments */
.share-section {
    text-align: center;
    padding: 40px 0;
    /* Animație identică cu celelalte intrări din profil (slideInUp) */
    animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}

.share-section h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #fff;
    font-weight: bold;
}

.camera-icon {
    width: 80px;
    height: 80px;
    border: 2px solid #e91e63;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    /* Pop-in animation pentru camera icon */
    animation: popIn 0.56s cubic-bezier(0.16, 1, 0.3, 1) 0.72s both;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.camera-icon:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 8px 24px rgba(233,30,99,0.12);
}

.camera-icon i {
    font-size: 40px;
    color: #e91e63;
    /* Pulsație subtilă continuă pentru icon */
    animation: cameraPulse 3.2s ease-in-out infinite;
}

/* Profile content container */
.profile-content { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  padding-top: 6px !important;
}

/* Additional profile element styles */
.profile-bio { 
  color: #ccc; 
  text-align: center; 
  font-size: 1rem; 
}

.profile-btn { 
  background: #e91e63; 
  color: #fff; 
  border: none; 
  padding: 8px 14px; 
  border-radius: 8px; 
  cursor: pointer; 
}

.profile-btn a { 
  color: inherit; 
  text-decoration: none; 
}

@media (max-width:600px) {
  .profile-bio { 
    font-size: 0.95rem; 
  }
  .profile-username { 
    font-size: 1.35rem; 
  }
  .profile-actions { 
    gap: 8px; 
  }
}

.share-section p {
    color: #ccc;
    margin-bottom: 10px;
}
.share-link {
    color: #e91e63;
    text-decoration: none;
    font-weight: 500;
    display: inline-block;
    margin-top: 10px;
    font-size: 1.05rem;
    transition: color 0.2s;
}
.share-link:hover {
    color: #ff4081;
}
/* Show/Hide replies button */
.show-replies-btn {
    color: #e91e63;
    background: none;
    border: none;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    margin: 4px 0 4px 0;
    padding: 2px 8px;
    border-radius: 8px;
    display: inline-block;
    transition: background 0.2s, color 0.2s;
    user-select: none;
}
.show-replies-btn:hover {
    background: #2a2a2a;
    color: #fff;
}
.replies-count {
    color: #fff;
    font-weight: 700;
    margin-left: 2px;
}
/* Animate replies show/hide */
.post-modal-comment .replies,
.post-modal-reply .replies {
    transition: max-height 0.25s cubic-bezier(0.4,0,0.2,1), opacity 0.2s;
    overflow: hidden;
    opacity: 1;
    max-height: 1000px;
}
.post-modal-comment .replies[style*='display:none'],
.post-modal-reply .replies[style*='display:none'] {
    opacity: 0;
    max-height: 0;
    pointer-events: none;
}
/* Reply button highlight when active */
.reply-btn.active-reply {
    color: #ff2e9a !important;
    font-weight: bold;
    background: rgba(255,46,154,0.08);
    border-radius: 6px;
    transition: background 0.2s;
}

/* Reply button styling - Same as main reply button */
.reply-btn {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95em;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.2s;
}

.reply-btn:hover {
    color: #e91e63;
    background: rgba(233, 30, 99, 0.05);
}

.reply-btn.active-reply {
    color: #ff2e9a !important;
    font-weight: bold;
    background: rgba(255, 46, 154, 0.08);
    border-radius: 4px;
    transition: background 0.2s;
}

/* Reply button in replies section - Same styling */
.reply .reply-btn {
    /* styling pentru butonul de reply din reply-uri */
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95em;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.2s;
}

.reply .reply-btn:hover {
    color: #e91e63;
    background: rgba(233, 30, 99, 0.05);
}

.reply .reply-btn.active-reply {
    color: #ff2e9a !important;
    font-weight: bold;
    background: rgba(255, 46, 154, 0.08);
    border-radius: 4px;
    transition: background 0.2s;
}

.reply-btn i {
    font-size: 1.1em;
}

/* CSS Variables */
:root {
    --primary-color: #e91e63;
    --secondary-color: #ff4081;
    --bg-color: #1a1a1a;
    --card-bg: #2a2a2a;
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --border-color: #333333;
    --hover-bg: #333333;

/* Pop-in pentru camera icon (ușor bounce) */
@keyframes popIn {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.86);
  }
  60% {
    opacity: 1;
    transform: translateY(-6px) scale(1.06);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

/* Subtile pulsații pentru icon (separat de animația popIn) */
@keyframes cameraPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
    
    --warning-color: #ff9800;
    --error-color: #f44336;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
  }
  
  body {
    background-image: url(../assets/background.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    min-height: 100vh;
  }
  
  /* Container Layout */
  .container {
    display: flex;
    min-height: 100vh;
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
  }
  
  /* Left Sidebar Styles */
  .sidebar {
    width: 250px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
  }
  
  .logo {
    margin-bottom: 30px;
  }
  
  .logo img {
    max-width: 180px;
  }
  
  .nav-item {
    display: flex;
    align-items: center;
    padding: 12px;
    color: #e91e63;
    text-decoration: none;
    margin-bottom: 10px;
    border-radius: 8px;
    transition: background-color 0.3s;
  }
  
  .nav-item:hover {
    background-color: #333;
  }
  
  .nav-item i {
    margin-right: 15px;
    width: 20px;
  }
  
  .nav-item.active {
    background-color: #333;
  }
  
  .sidebar-bottom {
    margin-top: auto;
    padding-top: 20px;
  }
  
  /* Main Content Styles */
  .main-content {
    flex-grow: 1;
    margin-left: 250px;
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;
    margin-left: calc(250px + ((100% - 1150px) / 2));
  }

/* --- PROFILE: MOBILE / RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 900px) {
  /* collapse large margins and make main content fluid */
  .main-content {
    margin-left: 0 !important;
    max-width: 760px;
    padding: 18px;
  }

  .profile-content {
    transform: none;
  }
}

@media (max-width: 768px) {
  /* hide fixed sidebar on small screens */
  .sidebar { display: none !important; }
  .container { min-height: auto; padding: 0 !important; }
  /* force main content to full width and remove calc() offsets that cause gutters */
  .main-content {
    margin-left: 0 !important;
    padding: 14px 8px 80px 8px !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    background: transparent !important;
  }

  /* Make profile header stack nicely */
  .profile-content { padding-top: 8px; }
  .profile-pic-container { width: 110px; height: 110px; }
  .profile-pic i { font-size: 128px; }
  .profile-username { font-size: 1.25rem; margin: 10px 0; }
  .profile-badges { margin-top: 6px; display:flex; gap:6px; justify-content:center }
  .profile-actions { flex-direction: row; gap:8px; }
  .profile-btn { padding: 8px 12px; font-size: 14px; }
  .profile-stats { gap: 18px; }
  .profile-pic { border-width: 2px; }
}

@media (max-width: 430px) {
  .profile-pic-container { width:92px; height:92px; }
  /* make avatar border slightly thinner and add subtle glow */
  .profile-pic { border: 1.5px solid #e91e63; box-shadow: 0 6px 20px rgba(233,30,99,0.12); }
  .profile-pic i { font-size: 122px; }
  .profile-username { font-size: 1.05rem; margin: 8px 0; }
  /* badges & small icons tighter */
  .profile-badges { display:flex; gap:6px; justify-content:center; align-items:center }
  .profile-badges i, .profile-badges .premium-badge-pill { transform: translateY(1px); }
  /* Make action buttons inline and centered on mobile to match design */
  .profile-actions { flex-direction: row; gap: 8px; align-items: center; justify-content: center; margin: 8px 0; flex-wrap: wrap; }
  .profile-actions .profile-btn { display:inline-flex; align-items:center; gap:8px; padding:7px 10px; font-size:14px; min-width: 110px; border-radius:10px; }
  .profile-actions .profile-btn i { margin-right:6px; }
  /* Stats on a single centered row */
  .profile-stats { flex-direction: row; gap: 18px; align-items: center; justify-content: center; margin-bottom: 12px; }
  .stat-item { font-size: 13px; }
  .stat-item .stat-value { font-weight: 800; margin-right:6px; }
  .profile-bio { font-size: 0.95rem; padding: 0 6px; }
  .profile-bio-container { padding: 0 6px; }
  .tabs-container { display:flex; gap:6px; overflow:auto; padding: 6px 4px; }

  /* Posts grid: force two columns on small phones with tighter gaps */
  .posts-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; margin-top: 14px !important; padding: 0 6px !important; }
  .post-item { border-radius: 6px !important; }
}

@media (max-width: 360px) {
  .profile-pic-container { width: 78px; height: 78px; }
  .profile-username { font-size: 0.98rem; }
  .profile-actions { gap:6px; }
  .profile-btn { padding: 8px 10px; font-size: 13px; }
}


/* Extra tiny-phone polish */
@media (max-width: 340px) {
  .profile-pic-container { width: 72px; height:72px; }
  .profile-pic { border: 1px solid #e91e63; }
  .profile-username { font-size: 0.95rem; }
  .profile-btn { padding: 7px 10px; font-size: 13px; }
  .posts-grid { gap: 5px !important; }
}
/* End PROFILE mobile adjustments */

/* --- EMERGENCY MOBILE FIX: Force profile full-width on small devices --- */
@media (max-width: 900px) {
  /* Ensure container and main-content use entire viewport width */
  body, .container { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
  .main-content {
    margin-left: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .profile-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 6px !important;
    border-radius: 8px !important;
  }
  /* Make sure profile card doesn't have extra side margins */
  .profile-pic-container { margin: 6px auto !important; }
}

  
  /* Profile Content */
  .profile-content {
    text-align: center;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;

    /* Alignment fix applied here */
    transform: translateX(-8px);
  }
  
  .profile-pic-container {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    position: relative;
  }
  
  .profile-pic {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #e91e63;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  }
  
  .profile-pic::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e91e63, #ff4081, #e91e63);
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.3s ease;
    z-index: -1;
  }
  
  .profile-pic:hover {
    transform: scale(1.05);
    border-color: #ff4081;
    box-shadow: 0 6px 24px rgba(233, 30, 99, 0.25);
  }
  
  .profile-pic:hover::before {
    opacity: 0.3;
  }
  
  .profile-pic i {
    font-size: 40px;
    color: #666;
  }
  
  .edit-profile-pic-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e91e63;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(233, 30, 99, 0.3);
  }
  
  .edit-profile-pic-btn:hover {
    background: #ff2e7a;
    transform: scale(1.1) rotate(15deg);
    box-shadow: 0 6px 16px rgba(233, 30, 99, 0.4);
  }
  
  .edit-profile-pic-btn:active {
    transform: scale(1.05) rotate(15deg);
  }
  
  .edit-profile-pic-btn i {
    font-size: 14px;
  }
  
  /* Profile picture with image */
  .profile-pic img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }
  
  .level-badge {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #e91e63;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  
  .level-badge:hover {
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 4px 12px rgba(233, 30, 99, 0.4);
  }
  
  .profile-username {
    font-size: 24px;
    margin: 20px 0;
    font-weight: normal;
    transition: all 0.2s ease;
    cursor: default;
  }
  
  .profile-username:hover {
    transform: scale(1.02);
  }
  
  .profile-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  margin-top: 24px; /* Spațiu între badge-uri și butoane */
  }
  
  .profile-btn {
    background: #e91e63;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
  
  .profile-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.5s, height 0.5s;
  }
  
  .profile-btn:hover::before {
    width: 300%;
    height: 300%;
  }
  
  .profile-btn:hover {
    background: #ff2e7a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(233, 30, 99, 0.3);
  }
  
  .profile-btn:active {
    transform: translateY(0);
  }
  
  .settings-btn {
    background: transparent;
    border: 1px solid rgba(233, 30, 99, 0.3);
    color: #e91e63;
    cursor: pointer;
    font-size: 20px;
    padding: 8px 12px;
    border-radius: 12px;
    transition: all 0.3s ease;
  }
  
  .settings-btn:hover {
    background: rgba(233, 30, 99, 0.05);
    border-color: #e91e63;
    transform: rotate(15deg) scale(1.05);
  }
  
  .profile-stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
  }
  
  .stat-item {
    color: #ccc;
    font-size: 14px;
    transition: color 0.2s ease;
    cursor: pointer;
  }
  
  .stat-item:hover {
    color: #fff;
  }
  
  .stat-value {
    color: white;
    font-weight: bold;
    margin-right: 4px;
  }
  
  /* Level Progress */
  .level-container {
    margin: 20px auto;
    max-width: 400px;
    text-align: left;
  }
  
  .level-title {
    color: #e91e63;
    margin-bottom: 5px;
  }
  
  .level-subtitle {
    color: #888;
    font-size: 14px;
    text-align: right;
  }
  
  .progress-bar {
    height: 2px;
    background: #333;
    margin: 10px 0;
    border-radius: 1px;
  }
  
  .progress-fill {
    height: 100%;
    background: #e91e63;
    border-radius: 1px;
    width: 45%;
  }
  
  /* Tabs Navigation */
  .tabs-container {
    display: flex;
    justify-content: center;
    gap: 60px;
    border-top: 1px solid #333;
    margin-top: 30px;
  }
  
  .tab {
    color: #888;
    text-decoration: none;
    padding: 15px 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  
  .tab::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 100%;
    height: 2px;
    background: #e91e63;
    transition: transform 0.3s ease;
  }
  
  .tab:hover {
    color: #e91e63;
  }
  
  .tab:hover::after {
    transform: translateX(-50%) scaleX(1);
  }

  /* === G-Zone Achievements & Quests (Cinematic UI) === */
  #achievements .gz-achievements-root {
    --gz-accent: #ff2d75;
    --gz-text: #fff;
    --gz-muted: rgba(255, 255, 255, 0.74);
    --gz-muted-2: rgba(255, 255, 255, 0.58);
    --gz-border: rgba(255, 255, 255, 0.08);

    --tier-bronze: #cd7f32;
    --tier-silver: #c0c0c0;
    --tier-gold: #ffd700;
    --tier-platinum: #00e5ff;
    --tier-diamond-1: #7b61ff;
    --tier-diamond-2: #00e5ff;

    --unlock: #2cff8f;
  }

  #achievements .gz-section {
    padding: 18px 14px;
  }

  #achievements .gz-section-title {
    margin: 0 0 12px 0;
    font-size: 19px;
    font-weight: 950;
    letter-spacing: 0.8px;
    color: var(--gz-text);
  }

  #achievements .gz-stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  #achievements .gz-stat-pill {
    padding: 12px 14px;
    border: 1px solid var(--gz-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    color: var(--gz-muted);
  }

  #achievements .gz-card-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  #achievements .gz-card {
    position: relative;
    border-radius: 16px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }

  #achievements .gz-card-top {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
  }

  #achievements .gz-card-title {
    font-weight: 950;
    letter-spacing: 0.3px;
    color: var(--gz-text);
  }

  #achievements .gz-card-subtitle {
    font-weight: 800;
    opacity: 0.75;
  }

  #achievements .gz-card-desc {
    margin-top: 4px;
    color: var(--gz-muted);
  }

  #achievements .gz-card-right {
    text-align: right;
    min-width: 170px;
  }

  #achievements .gz-card-meta {
    margin-top: 8px;
    font-size: 0.92em;
    color: var(--gz-muted-2);
  }

  #achievements .gz-card-meta--reset {
    margin-top: 8px;
  }

  #achievements .gz-meta-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.18);
    color: rgba(255, 255, 255, 0.82);
    font-weight: 850;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-right: 8px;
  }

  /* Divider between Achievements and Quests */
  #achievements .gz-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(255,45,117,0), rgba(255,45,117,0.35), rgba(255,45,117,0));
    margin: 6px 14px 10px 14px;
  }

  /* Quests group title (more minimal) */
  #achievements .gz-quest-group {
    margin: 0 0 16px 0;
  }

  #achievements .gz-quest-group-title {
    margin: 0 0 10px 0;
    font-weight: 950;
    letter-spacing: 0.7px;
    color: rgba(255,255,255,0.92);
    opacity: 0.92;
  }

  /* Progress Bar */
  #achievements .gz-progress {
    margin-top: 12px;
    height: 10px;
    background: rgba(0, 0, 0, 0.28);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
  }

  #achievements .gz-progress.is-unlocked {
    border-color: rgba(255,45,117,0.35);
  }

  #achievements .gz-progress-fill {
    position: relative;
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition: width 0.25s ease;
    background: linear-gradient(90deg, var(--gz-accent), rgba(255,45,117,0.55));
  }

  /* Tier progress styles */
  #achievements .gz-progress-fill.tier-bronze {
    background: linear-gradient(90deg, rgba(205,127,50,0.95), rgba(205,127,50,0.35));
  }

  #achievements .gz-progress-fill.tier-silver {
    background: linear-gradient(90deg, rgba(192,192,192,0.95), rgba(192,192,192,0.30));
  }

  #achievements .gz-progress-fill.tier-gold {
    background: linear-gradient(90deg, rgba(255,215,0,0.95), rgba(255,215,0,0.30));
  }

  #achievements .gz-progress-fill.tier-platinum {
    background: linear-gradient(90deg, rgba(0,229,255,0.95), rgba(0,229,255,0.25));
  }

  #achievements .gz-progress-fill.tier-diamond {
    background: linear-gradient(90deg, rgba(123,97,255,0.95), rgba(0,229,255,0.65));
  }

  #achievements .gz-progress-fill.tier-quest {
    background: linear-gradient(90deg, var(--gz-accent), rgba(255,45,117,0.55));
  }

  @keyframes gz-shimmer {
    from { transform: translateX(-35%); }
    to { transform: translateX(135%); }
  }

  /* Shimmer only for Platinum & Diamond */
  #achievements .gz-progress-fill.tier-platinum::after,
  #achievements .gz-progress-fill.tier-diamond::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.28), rgba(255,255,255,0));
    width: 45%;
    transform: translateX(-35%);
    animation: gz-shimmer 1.9s linear infinite;
    pointer-events: none;
    mix-blend-mode: screen;
  }

  /* Reward badge (cinematic) */
  #achievements .reward-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 22px;
    font-size: 0.85rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
    width: fit-content;
    max-width: 100%;
    flex: 0 0 auto;
    border: 1px solid rgba(255,45,117,0.65);
    background: rgba(255,45,117,0.10);
    color: #fff;
    box-shadow: 0 0 16px rgba(255,45,117,0.12);
    filter: brightness(0.94) saturate(0.96);
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
    vertical-align: middle;
    align-self: center;
  }

  /* If a reward badge is ever rendered inline next to a title */
  #achievements .gz-card-title .reward-badge {
    margin-left: 8px;
  }

  #achievements .reward-badge .icon {
    display: inline-block;
    transform: translateY(0.5px) scale(0.9);
    transform-origin: center;
  }

  #achievements .reward-badge .full-text {
    display: inline-block;
  }

  #achievements .reward-badge .compact-text {
    display: none;
  }

  #achievements .reward-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgba(255,45,117,0.16);
    filter: brightness(0.96) saturate(0.98);
  }

  /* Quest reward badge: minimal, accent-only */
  #achievements .reward-badge.reward-badge--quest {
    border-color: rgba(255,45,117,0.5);
    box-shadow: none;
    background: rgba(255,45,117,0.08);
  }

  /* Tier reward variants */
  #achievements .reward-badge.tier-bronze {
    border-color: rgba(205,127,50,0.65);
    background: rgba(205,127,50,0.14);
    color: #ffe6d1;
  }

  #achievements .reward-badge.tier-silver {
    border-color: rgba(192,192,192,0.60);
    background: rgba(192,192,192,0.12);
    color: #ffffff;
  }

  #achievements .reward-badge.tier-gold {
    border-color: rgba(255,215,0,0.60);
    background: rgba(255,215,0,0.10);
    color: #fff6c7;
  }

  #achievements .reward-badge.tier-platinum {
    border-color: rgba(0,229,255,0.60);
    background: rgba(0,229,255,0.12);
    box-shadow: 0 0 18px rgba(0,229,255,0.08);
  }

  #achievements .reward-badge.tier-platinum .full-text,
  #achievements .reward-badge.tier-platinum .compact-text {
    background-image: linear-gradient(90deg, rgba(0,229,255,1), rgba(255,45,117,0.95));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: brightness(0.95) saturate(0.95);
  }

  #achievements .reward-badge.tier-diamond {
    border-color: rgba(0,229,255,0.55);
    background: rgba(0,0,0,0.22);
    box-shadow: 0 0 20px rgba(0,229,255,0.11), 0 0 16px rgba(123,97,255,0.10);
  }

  #achievements .reward-badge.tier-diamond .full-text,
  #achievements .reward-badge.tier-diamond .compact-text {
    background-image: linear-gradient(90deg, rgba(123,97,255,1), rgba(0,229,255,1));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: brightness(0.95) saturate(0.95);
  }

  @media (max-width: 768px) {
    #achievements .reward-badge {
      font-size: 0.75rem;
      padding: 5px 10px;
      border-radius: 18px;
      box-shadow: none;
      filter: brightness(0.93) saturate(0.95);
      white-space: nowrap;
      width: fit-content;
      max-width: 100%;
    }

    #achievements .reward-badge.tier-platinum,
    #achievements .reward-badge.tier-diamond {
      box-shadow: none;
    }

    #achievements .reward-badge .full-text {
      display: none;
    }

    #achievements .reward-badge .compact-text {
      display: inline-block;
    }

    #achievements .reward-badge:hover {
      box-shadow: none;
    }
  }

  /* Unlocked state: subtle left accent + opacity */
  #achievements .gz-card.is-unlocked {
    opacity: 0.97;
  }

  #achievements .gz-card.is-unlocked::after {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(44,255,143,0), rgba(44,255,143,0.85), rgba(44,255,143,0));
    opacity: 0.55;
  }

  /* Tier cards: gradient borders + glow */
  #achievements .gz-achievement-card {
    border-color: rgba(255,255,255,0.08);
  }

  #achievements .gz-achievement-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 16px;
    background: var(--tier-border, linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.08)));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.9;
  }

  #achievements .gz-achievement-card.tier-bronze { --tier-border: linear-gradient(90deg, rgba(205,127,50,0.65), rgba(255,45,117,0.10)); }
  #achievements .gz-achievement-card.tier-silver { --tier-border: linear-gradient(90deg, rgba(192,192,192,0.65), rgba(255,255,255,0.08)); }
  #achievements .gz-achievement-card.tier-gold { --tier-border: linear-gradient(90deg, rgba(255,215,0,0.70), rgba(255,45,117,0.10)); }
  #achievements .gz-achievement-card.tier-platinum { --tier-border: linear-gradient(90deg, rgba(0,229,255,0.75), rgba(255,45,117,0.10)); }

  /* Silver: slight shine effect */
  #achievements .gz-achievement-card.tier-silver {
    background-image: linear-gradient(120deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 45%),
      radial-gradient(1200px 300px at 0% 0%, rgba(192,192,192,0.08), rgba(0,0,0,0));
    box-shadow: 0 0 18px rgba(192,192,192,0.05);
  }

  /* Platinum: cyan neon accent glow */
  #achievements .gz-achievement-card.tier-platinum {
    box-shadow: 0 0 22px rgba(0,229,255,0.08);
  }

  @keyframes gz-diamond-border {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
  }

  @keyframes gz-diamond-pulse {
    0%, 100% { box-shadow: 0 0 22px rgba(0,229,255,0.10), 0 0 20px rgba(123,97,255,0.08); }
    50% { box-shadow: 0 0 26px rgba(0,229,255,0.14), 0 0 26px rgba(123,97,255,0.12); }
  }

  /* Legendary Diamond: animated gradient border + pulse + lift */
  #achievements .gz-achievement-card.tier-diamond {
    animation: gz-diamond-pulse 3.2s ease-in-out infinite;
  }

  #achievements .gz-achievement-card.tier-diamond::before {
    background: linear-gradient(90deg, rgba(123,97,255,0.95), rgba(0,229,255,0.85), rgba(123,97,255,0.95));
    background-size: 200% 200%;
    animation: gz-diamond-border 3.8s linear infinite;
    opacity: 0.95;
  }

  #achievements .gz-achievement-card.tier-diamond:hover {
    transform: translateY(-2px) scale(1.02);
  }

  /* Gold: subtle pulse on unlocked */
  @keyframes gz-gold-unlocked {
    0%, 100% { box-shadow: 0 0 0 rgba(255,215,0,0); }
    50% { box-shadow: 0 0 18px rgba(255,215,0,0.10); }
  }

  #achievements .gz-achievement-card.tier-gold.is-unlocked {
    animation: gz-gold-unlocked 2.8s ease-in-out infinite;
  }

  /* Quests: minimal styling, keep accent but avoid strong glow */
  #achievements .gz-quest-card {
    border-color: rgba(255,255,255,0.07);
    box-shadow: none;
  }
  
  .tab.active {
    color: #e91e63;
  }
  
  .tab.active::after {
    transform: translateX(-50%) scaleX(1);
  }
  
  .tab i {
    font-size: 16px;
  }
  
  /* Share Section eliminată complet */
  
  /* Posts Grid - Instagram Style */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 4px;
    padding: 0;
    margin-top: 20px;
}

.post-item {
    background: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    aspect-ratio: 1;
    position: relative;
}

.post-item:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.post-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.post-item:hover .post-image img {
    transform: scale(1.08);
}

.post-image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.post-item:hover .post-image video {
    transform: scale(1.08);
}

.no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e91e63 0%, #ff4081 100%);
    color: white;
    font-size: 2rem;
}

.post-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.post-item:hover .post-overlay {
    opacity: 1;
}

/* Mobile: show same hover effect when .hovered class is added (tap-to-toggle) */
@media (max-width: 768px) {
  .post-item.hovered .post-overlay { opacity: 1 !important; }
  .post-item.hovered .post-image img,
  .post-item.hovered .post-image video { transform: scale(1.06) !important; }
  .post-item .post-overlay { transition: opacity 180ms ease; }
  .post-item .post-image img, .post-item .post-image video { transition: transform 260ms ease; }
}

.post-stats {
    display: flex;
    gap: 20px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
}

.post-stats span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.post-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.95));
    padding: 20px 12px 12px 12px;
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.post-item:hover .post-info {
    opacity: 1;
}

.post-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.post-content {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0 0 12px 0;
    max-height: 2.6em;
}

.post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #fff;
    margin-top: 4px;
}

.post-game {
    background: var(--primary-color);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    box-shadow: 0 2px 8px rgba(233, 30, 99, 0.4);
}

.post-time {
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* Comments preview in posts - DISABLED */
.post-comments-preview {
    display: none;
}



.error-message {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.error-message i {
    font-size: 3rem;
    margin-bottom: 20px;
    color: #ff6b6b;
}

.error-message p {
    font-size: 1.1rem;
    margin: 0;
  }
  
  /* Responsive Design */
  @media (max-width: 1200px) {
    .main-content {
      max-width: calc(100% - 250px);
    }
  }
  
  @media (max-width: 768px) {
    .sidebar {
      width: 70px;
    }
    .nav-item span {
      display: none;
    }
    .main-content {
      margin-left: 70px;
      max-width: calc(100% - 70px);
    }
    .logo img {
      max-width: 40px;
    }
    .profile-actions {
      flex-wrap: wrap;
    }
    .tabs-container {
      gap: 30px;
    }
  }

  /* Search page */
  .search-results {
    max-height: 70vh;
    overflow-y: auto;
}

.search-section {
    padding: 16px;
    border-bottom: 1px solid #333;
}

.search-section h3 {
    color: #e91e63;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    color: white;
}

.search-item:hover {
    background-color: #333;
}

.item-meta {
    color: #e91e63;
    font-size: 14px;
}

/* Modificăm butonul de search din sidebar să fie button în loc de link */
.search-trigger {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

/* Responsive adjustments for search */
@media (max-width: 768px) {
    .search-container {
        margin: 0;
        height: 100%;
        max-width: none;
        border-radius: 0;
    }
    
    .search-results {
        max-height: calc(100vh - 70px);
    }
}
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 1000;
  display: none;
  justify-content: center;
  align-items: flex-start;
}

.search-overlay.active {
  display: flex;
}

.search-container {
  width: 100%;
  max-width: 600px;
  background-color: #121212;
  margin-top: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.search-header {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #333;
}

.search-header i {
  color: #e91e63;
  margin-right: 12px;
}

.search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: white;
  font-size: 16px;
  outline: none;
}

.search-input::placeholder {
  color: #666;
}

.close-search {
  background: none;
  border: none;
  color: #e91e63;
  cursor: pointer;
  padding: 8px;
}

.close-search:hover {
  color: #ff4081;
}

.search-results {
  max-height: 70vh;
  overflow-y: auto;
}

.search-section {
  padding: 16px;
  border-bottom: 1px solid #333;
}

.search-section h3 {
  color: #e91e63;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  color: white;
}

.search-item:hover {
  background-color: #333;
}

.item-meta {
  color: #e91e63;
  font-size: 14px;
}

/* Modificăm butonul de search din sidebar să fie button în loc de link */
.search-trigger {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

/* Responsive adjustments for search */
@media (max-width: 768px) {
  .search-container {
      margin: 0;
      height: 100%;
      max-width: none;
      border-radius: 0;
  }
  
  .search-results {
      max-height: calc(100vh - 70px);
  }
}

.post-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0; top: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.9);
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.post-modal.open { 
    display: flex;
    animation: modalBackdropFade 0.3s ease both;
}
.post-modal-content {
  background: #1a1a1a;
  border-radius: 12px;
  max-width: 1000px;
  width: 85vw;
  max-height: 85vh;
  height: 85vh;
  display: flex;
  flex-direction: row;
    box-shadow: 0 25px 50px rgba(0,0,0,0.8);
    position: relative;
    overflow: hidden;
    border: 1px solid #333;
    animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

  /* Ensure modal fills viewport height so internal columns can stretch */
  .post-modal-content {
    height: 90vh; /* fixed height to allow inner flex children to size */
  }

/* Mobile-friendly modal: stack image above details and remove large fixed min sizes */
@media (max-width: 760px) {
  .post-modal {
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
  }
  .post-modal-content {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    overflow: hidden !important;
    margin: 0 !important;
  }
  .post-modal-body {
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  /* Image (wherever it is) */
  .post-modal-image {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 40vh !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .post-modal-image img, .post-modal-image video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000 !important;
  }

  /* Details: fills remaining height, NO scroll on itself */
  .post-modal-details {
    flex: 1 1 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-left: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .post-modal-header {
    flex: 0 0 auto !important;
    padding: 10px 12px !important;
    min-height: 48px !important;
    gap: 10px !important;
  }
  .post-modal-user-avatar {
    width: 25px !important;
    height: 25px !important;
    border-width: 2px !important;
  }
  .post-modal-user-avatar img,
  .post-modal-user-avatar span {
    width: 100% !important;
    height: 100% !important;
    font-size: 1.1rem !important;
  }
  .post-modal-username {
    font-size: 1rem !important;
  }
  .post-modal-close {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    background: rgba(255,255,255,0.06) !important;
    color: #fff;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .post-modal-desc,
  .post-modal-description {
    flex: 0 0 auto !important;
    padding: 8px 12px !important;
  }
  .post-modal-actions {
    flex: 0 0 auto !important;
    padding: 8px 12px !important;
    gap: 10px !important;
  }

  /* Comments: scrollable, takes ALL remaining space */
  .post-modal-comments {
    flex: 1 1 0 !important;
    overflow-y: auto !important;
    max-height: none !important;
    padding: 10px 12px !important;
    min-height: 0 !important;
  }

  /* Meta + Input: ALWAYS sticky at bottom, never scroll away */
  .post-modal-meta {
    flex: 0 0 auto !important;
    padding: 6px 12px !important;
    background: #1a1a1a !important;
    border-top: 1px solid #333;
  }
  .post-modal-comment-input {
    flex: 0 0 auto !important;
    background: #1a1a1a !important;
    padding: 8px 12px !important;
    border-top: 1px solid #333;
    z-index: 10;
  }

  /* Hide nav arrows on mobile */
  .post-modal-nav {
    display: none !important;
  }
}
.post-modal-body {
    display: flex; flex-direction: row; width: 100%; height: 100%;
}
.post-modal-image {
    flex: 1 1 60%;
    background: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 320px;
    min-height: 360px;
    max-height: 80vh;
    overflow: hidden;
}
.post-modal-image img {
    max-width: 100%; 
    max-height: 95vh; 
    object-fit: contain;
    border-radius: 0;
}
.post-modal-image .no-image {
    width: 100%; height: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: white;
}
.post-modal-image video {
    max-width: 100%;
    max-height: 95vh;
    object-fit: contain;
    border-radius: 0;
}

/* Video support in posts grid */
.post-image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.post-item:hover .post-image video {
    transform: scale(1.1);
}

.post-modal-details {
  flex: 1 1 40%;
  padding: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  /* allow children to shrink/scroll correctly inside flex */
  min-height: 0;
  min-width: 350px;
  max-width: 450px;
  overflow: hidden; /* let children control scrolling */
  background: #1a1a1a;
  border-left: 1px solid #333;
}

/* Make header/sections not grow so comments can take remaining space */
.post-modal-header,
.post-modal-actions,
.post-modal-likes,
.post-modal-desc,
.post-modal-description {
  flex: 0 0 auto;
}

/* Keep meta + input fixed-sized at bottom */
.post-modal-meta,
.post-modal-comment-input {
  flex: 0 0 auto;
}

/* Ensure details area fills parent's height and allows the comments column to scroll */
.post-modal-details {
  height: 100%;
}

/* Improved comment styling */
.post-modal-comments {
  /* Comments area should fill available vertical space so meta+input stay at bottom */
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px 24px;
  overflow-y: auto;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Invisible scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* When there are no comments, keep the area compact */
.post-modal-comments:empty {
  /* keep compact when there are no comments, but still allow input/meta at bottom */
  min-height: 40px;
  padding-bottom: 8px;
}

.post-modal-comments::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Feed comment styling for modal */
.comment {
    display: flex;
    gap: 12px;
    margin-bottom: 22px;
    padding: 10px 12px 10px 0;
    border-radius: 10px;
    background: transparent;
    transition: background 0.2s;
    align-items: flex-start;
}

.comment:hover {
    background: rgba(255,255,255,0.02);
    box-shadow: none;
    transition: background 0.2s;
    cursor: default;
}

/* Profile initial styling for comments */
.profile-initial {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
   background: #242424;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    border: 2px solid #ff0080;
    overflow: hidden;
    text-transform: uppercase;
    flex-shrink: 0;
}

.profile-initial img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: none;
}

/* Pentru replies - avataruri mai mici */
.reply .profile-initial {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    font-size: 0.9rem;
    border-width: 1px;
}



.post-modal-user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Search avatar styling */
.search-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #e91e63;
}

.search-avatar.avatar-initial {
    background: #1c1f26;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    border: 2px solid #e91e63;
    box-sizing: border-box;
}
.comment-content {
    flex: 1;
    min-width: 0;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.comment-username {
    color: #e91e63;
    font-weight: 600;
    font-size: 0.97rem;
}

.comment-time {
    color: #888;
    font-size: 0.8rem;
    margin-left: 8px;
    white-space: nowrap;
}

.comment-text {
    color: #fff;
    font-size: 0.93rem;
    margin-bottom: 2px;
    word-break: break-word;
    line-height: 1.3;
}

.comment-actions {
    display: flex;
    gap: 16px;
    margin-top: 4px;
    font-size: 0.92em;
    color: #aaa;
    min-height: 24px;
}

.comment-action {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95em;
    padding: 0;
    transition: color 0.2s;
}

.comment-action.like-btn:hover,
.comment-action.reply-btn:hover {
    color: #e91e63;
}

.comment-action.like-btn.active {
    color: #e91e63;
}

.comment-action i {
    font-size: 1.1em;
}

/* Reply styling */
.reply {
    margin-left: 40px;
    padding-left: 12px;
}

.reply:hover {
    background: #242424;
}

.reply .profile-initial {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    font-size: 0.9rem;
}

.reply .comment-username {
    font-size: 0.9rem;
}

.reply .comment-text {
    font-size: 0.88rem;
}

.reply .comment-time {
    font-size: 0.75rem;
}

.replies-count-inline {
    display: inline-block;
    margin-left: 0;
    font-size: 0.9rem;
    color: #999;
    vertical-align: middle;
    cursor: default;
}

.see-more-comments,
.show-replies-btn {
    color: #aaa;
    font-size: 0.92em;
    background: none;
    border: none;
    padding: 0 4px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}

.see-more-comments:hover,
.show-replies-btn:hover {
    background: #232323;
    color: #e91e63;
}

/* Remove old modal comment styling */
.post-modal-comment,
.post-modal-reply,
.post-modal-comment-avatar,
.post-modal-comment-user,
.post-modal-comment-text,
.post-modal-comment-time {
    /* Remove these - we're using feed styling now */
    display: none;
}

/* Post Modal Header Styles - Compact Design */
.post-modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px 10px 16px;
    border-bottom: 1px solid #333;
    background: #1a1a1a;
    min-height: 64px;
}



.post-modal-user-avatar {
  width: 56px !important;
  height: 56px !important;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.45rem;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid #e91e63;
    margin-right: 0;
    box-shadow: 0 4px 18px 0 rgba(233,30,99,0.18), 0 2px 12px 0 rgba(0,0,0,0.22);
    transition: box-shadow 0.22s, border-color 0.22s, background 0.22s;
    position: relative;
}

/* Avatar img/span inside the container: always fill parent */
.post-modal-avatar-img {
  width: 100% !important;
  height: 100% !important;
}

.post-modal-user-avatar:hover {
    border-color: #ff4081;
    box-shadow: 0 6px 24px 0 rgba(233,30,99,0.28), 0 4px 16px 0 rgba(0,0,0,0.22);
    background: #2a223a;
}

.post-modal-user-avatar:hover {
    border-color: #ff4081;
    box-shadow: 0 4px 16px 0 rgba(233,30,99,0.18);
}

.post-modal-user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: none;
}

.post-modal-user-avatar span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    background: none;
    letter-spacing: 0.5px;
}

.post-modal-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-modal-user-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    min-width: 0;
}

.post-modal-username {
  font-weight: 700;
  color: #e91e63;
  font-size: 1.22rem;
  margin: 0;
  line-height: 1.22;
  letter-spacing: 0.2px;
  display: inline-flex; /* keep username and badges on one line */
  align-items: center;   /* vertically center badges with text */
  gap: 8px;              /* spacing between username and badges */
  min-width: 0;         /* allow truncation inside flex */
  white-space: nowrap;   /* prevent badges from wrapping under username */
}

.post-modal-game-time {
    font-size: 0.8rem;
    color: #888;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
}

.post-modal-game {
    background: #e91e63;
    color: white;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.post-modal-time {
    color: #888;
    font-size: 0.8rem;
    font-weight: 400;
}

.post-modal-game-badge {
    background: #e91e63;
    color: white;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 500;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}

.post-modal-header-right {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
}

.post-modal-time-display {
    color: #888;
    font-size: 0.85rem;
    font-weight: 400;
}

.post-modal-comments-count-header {
    color: #888;
    font-size: 0.85rem;
    font-weight: 400;
}

.post-modal-close {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 1.4rem;
    padding: 6px;
    border-radius: 50%;
    transition: all 0.2s ease;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.post-modal-close:hover {
    background: #333;
    color: #fff;
}

/* Disabled state for modal nav arrows */
.post-modal-nav.disabled,
.post-modal-nav[disabled] {
  opacity: 0.35;
  pointer-events: none;
  filter: grayscale(60%);
}

/* Post Modal Actions Section - Fix pentru butoane */
.post-modal-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
    border-bottom: 1px solid #333;
    background: #1a1a1a;
}

.post-modal-actions-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.post-modal-action {
    background: none !important;
    border: none !important;
    color: #888 !important;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 2px;
    border-radius: 0;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
}

.post-modal-action:hover {
    color: #fff !important;
    transform: scale(1.05);
}


/* Like & Comment (message) button modal: outline/solid ca pe feed (fără share) */
.post-modal-action.like-btn,
.post-modal-action.comment-btn {
    color: #888 !important;
}

.post-modal-action.like-btn:hover,
.post-modal-action.comment-btn:hover {
    color: #e91e63 !important;
}

.post-modal-action.like-btn.liked,
.post-modal-action.comment-btn.commented {
    color: #e91e63 !important;
    background: none !important;
}
.post-modal-action.like-btn.liked:hover,
.post-modal-action.comment-btn.commented:hover {
    background: none !important;
}

.post-modal-action.like-btn i,
.post-modal-action.comment-btn i {
    transition: color 0.3s, font-weight 0.3s;
    font-weight: 400 !important; /* FontAwesome outline */
    color: #888 !important;
}

.post-modal-action.like-btn:hover i,
.post-modal-action.comment-btn:hover i {
    color: #e91e63 !important;
}

.post-modal-action.like-btn.liked i,
.post-modal-action.comment-btn.commented i {
    color: #e91e63 !important;
    font-weight: 900 !important; /* FontAwesome solid */
}

/* Eliminăm complet stilul pentru butonul de share din modal */
.post-modal-action.share-btn {
    display: none !important;
}

/* Like count section - Clean */
.post-modal-likes {
    padding: 8px 16px;
    font-size: 0.85rem;
    color: #fff;
    border-bottom: 1px solid #333;
    background: #1a1a1a;
}

.post-modal-likes-count {
    font-weight: 600;
    color: #e91e63;
}

/* Post modal description section */
.post-modal-desc {
  padding: 8px 12px;
    border-bottom: 1px solid #333;
    background: #1a1a1a;
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

/* Description section */
.post-modal-description {
    padding: 12px 16px;
    border-bottom: 1px solid #333;
    background: #1a1a1a;
}

.post-modal-description-text {
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

/* Post Modal Comment Input - Feed Style */
.post-modal-comment-input {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
    border-top: 1px solid #333;
    background: #1a1a1a;
    align-items: center;
    flex-shrink: 0;
}

.post-modal-comment-input .comment-form {
    display: flex;
    gap: 10px;
    align-items: center;
}

.post-modal-comment-input .comment-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    color: white !important;
    font-size: 0.9rem;
    outline: none !important;
    transition: all 0.3s ease;
}

.post-modal-comment-input .comment-input::placeholder {
    color: #888;
}

.post-modal-comment-input .comment-input:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid #e91e63 !important;
    box-shadow: 0 0 0 2px rgba(233, 30, 99, 0.2) !important;
}

.post-modal-comment-input .post-comment-btn {
  background: linear-gradient(180deg,#ff2e7a,#e91e63);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 8px 14px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  min-width: 72px;
  box-shadow: 0 6px 18px rgba(233,30,99,0.18);
}

.post-modal-comment-input .post-comment-btn:hover {
    background: #d81b60;
    transform: translateY(-1px);
}

.post-modal-comment-input .post-comment-btn:active {
    transform: translateY(0);
}

/* Fallback pentru inputul vechi (dacă nu e actualizat HTML-ul) */
.post-modal-comment-input input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    color: white !important;
    font-size: 0.9rem;
    outline: none !important;
    transition: all 0.3s ease;
}

.post-modal-comment-input input::placeholder {
    color: #888;
}

.post-modal-comment-input input:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid #e91e63 !important;
    box-shadow: 0 0 0 2px rgba(233, 30, 99, 0.2) !important;
}

.post-modal-comment-input button {
    background: #e91e63;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    min-width: 60px;
}

.post-modal-comment-input button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(233,30,99,0.22);
}

.post-modal-comment-input button:active {
    transform: translateY(0);
}

/* Post Modal Meta - Clean Design */
.post-modal-meta {
  padding: 6px 12px;
    font-size: 0.8rem;
    color: #666;
    border-top: 1px solid #333;
    background: #1a1a1a;
}

.post-modal-meta .post-time {
    font-weight: 400;
}

/* Video indicator in post overlay */
.video-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px;
    border-radius: 50%;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.video-indicator i {
    margin-left: 2px; /* Adjust play icon alignment */
}

/* Animation for heart like button */
@keyframes pop {
    50% { transform: scale(1.2); }
}
.pop {
    animation: pop 0.3s ease;
}

/* Like button styles */
.like-btn.liked i {
    color: #d81b60;
}

.like-btn i {
    transition: color 0.2s ease;
}

/* Profile picture hover effect */
.profile-pic-container:hover .edit-profile-pic-btn {
  opacity: 1;
  transform: scale(1.1);
}

.edit-profile-pic-btn {
  opacity: 0.8;
  transition: all 0.3s ease;
}

.profile-initial-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2.5rem;
    width: 72px;
    height: 72px;
    border-radius: 50%;
}

#followBtn i,
#messageBtn i {
  margin-right: 6px;
}
.toast-message {
  position: fixed;
  bottom: 20px;
  right: 20px;
  left: auto;
  margin: 0;
  transform: none;

  background-color: #333;
  color: #fff;
  padding: 14px 30px;
  border-radius: 6px;
  font-size: 15px;
  z-index: 9999;
  opacity: 0;
  animation: fadeInOut 4s forwards;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

  max-width: unset;
  width: fit-content;
  min-width: 250px;
  max-width: 100%;
}

/* Variante de tipuri /
.toast-message.success {
  background-color: #28a745;
}

.toast-message.error {
  background-color: #e74c3c;
}

/ Animație elegantă */
@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  10%, 90% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(40px);
  }
}

/* Badge styles moved to /css/badges.css */
.post-username {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.post-username .badge-icon,
.post-username .verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
}
.post-username .badge-icon,
.post-username .verified-badge {
  position: relative;
  top: -0.5px;
}

/* === My Library cosmetics (profile only) === */
.profile-library-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: none;
}

.profile-library-background.is-active {
  display: block;
}

.animated-profile-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 0, 150, 0.15),
    transparent 70%
  );
  animation: shimmerMove 5s linear infinite;
  pointer-events: none;
}

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

.container {
  position: relative;
  z-index: 1;
}

.profile-library-badges {
  margin: 10px auto 0 auto;
  max-width: 280px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.profile-library-badges img {
  width: 100%;
  height: 34px;
  object-fit: contain;
}

.profile-library-badges:empty {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .animated-profile-background::after {
    animation: none;
  }
}