/* =========================
   PROFILE HEADER (TOP SECTION)
========================= */

@media (max-width:768px){
  .profile-header {
    margin-top: 210px !important;
  }
}

.profile-header {
  position: relative;
  overflow: hidden;
  background: #fff;
  margin: 120px auto 2rem auto;
  max-width: 1340px;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
}

.profile-info{
  display:flex;
  gap:32px;
  align-items:center; /* FIX: center vertically */
  flex-wrap:wrap;
}

/* Profile Picture */
.profile-picture-container {
  position: relative;
  justify-content: center;
  align-items: center;
  flex-shrink: 0; /* prevents weird squishing */
}



.edit-profile-pic {
  background: #000000;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
  font-size: .75rem;
}

.edit-profile-pic:hover {
  background: #2563EB;
  transform: scale(1.1);
}


.profile-about {
  margin-top: 18px;
}

.profile-bio {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: none;
}


.profile-field {
  margin-bottom: 14px;
}

.field-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 3px;
}

.field-value {
  font-size: 0.95rem;
  color: #1e293b;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #3B82F6;
}

.stat-label {
  font-size: .875rem;
  color: rgba(30,64,175,.7);
}

.bio {
  color: #231e1e;
  margin-top: .25rem;
  max-width: 600px;
  background: #f9ffe0;
  border-radius: 12px;
  padding: 8px;
  border: 2px dashed lightgrey;
}

.profile-actions {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: flex-end;
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 8px;
  background: #00c7f6;
  color: white;
  font-size: 11px;
  font-weight: bold;
  clip-path: polygon(
    50% 0%, 61% 10%, 75% 5%, 80% 20%, 95% 25%,
    90% 40%, 100% 50%, 90% 60%, 95% 75%, 80% 80%,
    75% 95%, 61% 90%, 50% 100%, 39% 90%, 25% 95%,
    20% 80%, 5% 75%, 10% 60%, 0% 50%, 10% 40%,
    5% 25%, 20% 20%, 25% 5%, 39% 10%
  );
  box-shadow: 0 0 6px rgba(241, 14, 14, 0.6);
}
.sidebar-widget {
  text-align: center;
}

.upload-area {
  margin: 0 auto;
 /* max-width: 260px;*/
}

#profileUploadStatus {
  margin: 10px auto 0;
  max-width: 260px;
}

#profileUploadBtn {
  max-width: 260px;
  margin: 10px auto 0;
  display: block;
}

.profile-picture {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid white;
  box-shadow: 
      0 0 0 4px #000,
      0 12px 30px rgba(0,0,0,.35);
}
.profile-picture {
  image-rendering: -webkit-optimize-contrast;
}

.profile-picture-container img {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center center !important;

  display: block;
}

.photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s ease;
}

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

/*=================================================*/

.photo-delete-btn {
  background: #e74c3c5e;
  color: white;
  border: none;
  border-radius: 50%;
  padding: 6px;
  cursor: pointer;
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 5;
}

.photo-delete-btn:hover {
  opacity: 0.9;
}



/* =========================
   UPLOAD PROGRESS BAR (FIXED)
========================= */

#profileUploadStatus {
  background: #ffffff;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
}

/* Reset native look */
#profileUploadProgress {
  width: 100%;
  height: 12px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  overflow: hidden;
}

/* Background track */
#profileUploadProgress::-webkit-progress-bar {
  background: rgba(0,0,0,.08);
  border-radius: 999px;
}

/* Progress fill */
#profileUploadProgress::-webkit-progress-value {
  background: linear-gradient(90deg, #2563EB, #3B82F6);
  border-radius: 999px;
  transition: width .25s ease;
}

/* Firefox */
#profileUploadProgress::-moz-progress-bar {
  background: linear-gradient(90deg, #2563EB, #3B82F6);
  border-radius: 999px;
}

/* Percentage text */
#profileUploadPercent {
  text-align: right;
  font-weight: 600;
  color: #1E40AF;
}
/* FORCE visibility + styling */
#profileUploadProgress {
  width: 100%;
  height: 14px;

  appearance: none;
  -webkit-appearance: none;

  border-radius: 999px;
  overflow: hidden;

  background: rgba(0,0,0,.1);
}

/* Chrome/Safari */
#profileUploadProgress::-webkit-progress-bar {
  background: rgba(0,0,0,.1);
}

#profileUploadProgress::-webkit-progress-value {
  background: #2563EB;
}

/* Firefox */
#profileUploadProgress::-moz-progress-bar {
  background: #2563EB;
}

/* =========================
   MAIN GRID LAYOUT (FIXED)
   - Sidebar ALWAYS stays right
   - Prevents sidebar drop from width overflow
========================= */
.main-container {
  overflow: visible;
  max-width: 1340px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 2rem;
  align-items: start;
  position: relative;
}


/* Content (critical for grid stability) */
.main-container > .content-area {
  min-width: 0 !important;
  align-self: start !important;
}

/* Sidebar */
.main-container > .sidebar {
  grid-column: 2 !important;
  justify-self: end !important;
  align-self: start !important;

  width: 100% !important;
  max-width: 300px !important;
  margin: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;

  /*  prevents "escape" + forces sidebar to stay inside column */
  min-width: 0 !important;
}

/*  FORCE ALL SIDEBAR CHILDREN TO RESPECT WIDTH */
.main-container > .sidebar * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Sticky Sidebar on Desktop */
@media (min-width: 901px) {
  .main-container > .sidebar {
    /*position: sticky !important;*/
    top: 110px !important;
  }
}

/* Collapse Sidebar ONLY on Smaller Screens */
@media (max-width: 900px) {
  .main-container {
    grid-template-columns: 1fr !important;
    padding: 0 1rem 2rem !important;
  }

  .main-container > .sidebar {
    grid-column: 1 !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    position: static !important;
    top: auto !important;
  }
}


/* Media safety */
video {
  max-width: 100%;
  height: auto;
}



/* =========================
   VIDEO GALLERY
========================= */
.video-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.video-item {
  background: rgba(255,255,255,.9);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
  transition: transform .3s ease;
}

.video-item:hover {
  transform: translateY(-4px);
}

.video-thumbnail {
  position: relative;
  width: 100%;
  height: 200px;
  background: #000;
}

.video-thumbnail img,
.video-thumbnail video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(59,130,246,.9);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all .3s ease;
}

.play-button:hover {
  background: #2563EB;
  transform: translate(-50%,-50%) scale(1.1);
}

/* =========================
   STORIES / POSTS
========================= */
.blog-posts {
  display: grid;
  gap: 2rem;
}

.featured-post {
  background: rgba(255,255,255,.9);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 300px;
  cursor: pointer;
}

.featured-post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.post-category {
  background: #3B82F6;
  color: #fff;
  padding: .25rem .75rem;
  border-radius: 15px;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  width: fit-content;
  margin-bottom: 1rem;
}

.post-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1E40AF;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.post-excerpt {
  color: rgba(30,64,175,.8);
  margin-bottom: 1.5rem;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .875rem;
  color: rgba(30,64,175,.6);
}

.regular-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.post-card {
  background: rgba(255,255,255,.9);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
  transition: transform .3s ease;
  cursor: pointer;
  height: 450px;
}

.post-card:hover {
  transform: translateY(-4px);
}

.post-image {
  width: 100%;
  height: 60%;
  object-fit: cover;
  object-position: center;
  border-radius: 15px;
  padding: 10px;
}

.post-content {
  padding: 1.5rem;
}

.post-content .post-title {
  font-size: 1.125rem;
  margin-bottom: .75rem;
}

/* Upload Area */
.upload-area {
  border: 2px dashed rgba(59,130,246,.3);
  border-radius: 10px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all .3s ease;
  background: white;
}

.upload-area:hover {
  border-color: #3B82F6;
  background: rgba(59,130,246,.05);
}

.upload-icon {
  font-size: 2rem;
  color: #3B82F6;
  margin-bottom: 1rem;
}

/* =========================================================
   UNIFIED PHOTO GALLERY SYSTEM (CLEAN + STABLE)
========================================================= */

.profile-header,
.photo-item,
.photo-item img,
.video-item,
.post-card,
.modal,
.photo-modal {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}


.photo-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px; /* tight like your mom*/
  width: 100%;
}

.photo-item {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f1f5f9; /* instead of black */
}

.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* THIS FIXES BLACK BARS */
  object-position: center;
  display: block;
   opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.photo-item img.loaded {
  opacity: 1;
  transform: scale(1);
}

.photo-item:active img {
  transform: scale(0.97);
}

/* Mobile */
@media (max-width: 768px) {
  .photo-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
  }
}

.photo-delete-btn:hover {
  opacity: 0.9;
}

/* =========================
   ITSA NICE - PHOTO MODAL
========================= */

.photo-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;

  z-index: 999999;
}

.photo-modal.active {
  opacity: 1;
  pointer-events: auto;
}

/* Image container */
.photo-modal-content {
  max-width: 95vw;
  max-height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Actual image */
.photo-modal-content img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* important here */
  border-radius: 12px;

  transform: scale(0.95);
  transition: transform 0.3s ease;
}

/* Animate in */
.photo-modal.active img {
  transform: scale(1);
}

/* Close button */
.photo-modal-close {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 2rem;
  color: white;
  cursor: pointer;
  z-index: 10;
}

/* =========================
   TEXT POSTS FEED
========================= */
#feed .blog-posts {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#feed article.text-post-card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.06) !important;
}

#feed .text-post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: rgba(0,0,0,.65);
  margin-bottom: 6px;
}

#feed .text-post-body {
  font-size: 1rem;
  color: rgba(0,0,0,.88);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

#feed .text-post-body a {
  color: #2563EB;
  text-decoration: underline;
}

.delete-btn:hover {
    background: #c0392b;
}

/* Delete button */
#feed .text-post-card {
  position: relative;
}

#feed .post-delete-form {
  position: absolute;
  top: 10px;
  right: 10px;
  margin: 0;
}

#feed .post-delete-btn {
  background: transparent;
  border: none;
  color: rgba(0,0,0,.45);
  cursor: pointer;
  font-size: 0.95rem;
  padding: 6px;
  border-radius: 10px;
  transition: all .15s ease;
}

#feed .post-delete-btn:hover {
  background: rgba(0,0,0,.06);
  color: rgba(220,38,38,.95);
}

/* =========================
   FRIENDS GRID
========================= */

.friend-name {
  color: #1E40AF;
  font-weight: 600;
  margin-bottom: .25rem;
}

.friend-sub {
  color: rgba(30,64,175,.7);
  font-size: .875rem;
  margin-bottom: 1rem;
}

.friend-actions {
  display: flex;
  gap: .5rem;
  justify-content: center;
}

/* =========================
   MODALS (GENERAL)
========================= */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.8);
  z-index: 999999 !important;
  align-items: center;
  justify-content: center;
}

.modal.active {
  display: flex;
}

.modal-content {
  background: #fff;
  border-radius: 15px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1E40AF;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: rgba(30,64,175,.6);
}

/* Forms */
.form-group {
  margin-bottom: 1rem;
}

.form-label {
  display: block;
  margin-bottom: .5rem;
  font-weight: 500;
  color: #1E40AF;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: .75rem;
  border: 1px solid rgba(59,130,246,.3);
  border-radius: 8px;
  font-size: 1rem;
}

.form-textarea {
  min-height: 100px;
  resize: vertical;
}

/* Video modal */
.modal-video {
  max-width: 900px;
}

/*-------------------------------*/

.msg-sent {
  background: #f8fafc;
  border-left: 4px solid #3b82f6;
}

.msg-received {
  background: #ffffff;
  border-left: 4px solid #10b981;
}

/* =========================
   MESSAGES MODAL (IFRAME)
========================= */
.messages-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.messages-modal-overlay.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.messages-modal-box {
  width: min(1150px, 96vw);
  height: min(720px, 92vh);
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
}

.messages-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid #eee;
  background: #fff;
}

.messages-modal-title {
  font-weight: 900;
  font-size: 16px;
}

.messages-modal-close {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  font-weight: 900;
}

.messages-modal-frame {
  width: 100%;
  height: 100%;
  border: none;
}

/* Optional: prevent background scroll when modal open */
body.modal-open {
  overflow: hidden;
}

/* =========================
   RESPONSIVE FIXES
========================= */
@media (max-width: 1024px) {
  .profile-info {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1.5rem;
  }

  .profile-picture-container {
    justify-content: center;
  }

  .profile-actions {
    align-items: center;
  }

  .featured-post {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
  }
  
  /* =========================
   PROFILE MODE BUTTONS
   Personal / Professional
========================= */

.profile-mode{
  display:flex;
  gap:10px;
  margin-top:10px;
}

.mode-btn{
  padding:6px 14px;

  border-radius:20px;
  border:1px solid rgba(0,0,0,.1);

  background:#f8fafc;
  color:#334155;

  font-size:.85rem;
  font-weight:600;

  cursor:pointer;
  transition:all .2s ease;
}

.mode-btn:hover{
  background:#e2e8f0;
}

.mode-btn.active{
  background:#0ea5e9;
  color:white;
  border-color:#0ea5e9;
}
  
/* =========================
   PROFILE CONTENT TABS
========================= */

.content-tabs{
  display:flex;
  gap:8px;
  margin:20px 0;
  flex-wrap:wrap;
}

.tab-btn{
  padding:8px 16px;
  border-radius:20px;

  background:#f1f5f9;
  border:1px solid rgba(0,0,0,.08);

  font-size:.9rem;
  font-weight:500;
  color:#334155;

  cursor:pointer;
  transition:all .2s ease;
}

.tab-btn:hover{
  background:#e2e8f0;
}

.tab-btn.active{
  background:#2563EB;
  color:white;
  border-color:#2563EB;
}
  
  .modal-video video {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
}


.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.9);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}

.modal.active {
  display: flex;
}

.video-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.video-item {
  position: relative; /* needed for overlay positioning */
  display: inline-block;
  margin: 0.5rem;
}

.video-thumbnail {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 8px;
}

.video-thumbnail video {
  display: block;
  width: 100%;
  height: auto;
}

.video-delete-form {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  opacity: 0; /* hidden by default */
  transition: opacity 0.2s;
}

.video-item:hover .video-delete-form {
  opacity: 1; /* show on hover */
}

.video-delete-btn {
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  padding: 0.4rem 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-delete-btn:hover {
  background: rgba(255, 0, 0, 0.8); /* red on hover */
}


/* Play overlay icon */
.play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 28px;
  pointer-events: none;
}

.video-delete-form {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 10;
}

.video-delete-btn {
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 50%;
  padding: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-delete-btn i {
  pointer-events: none;
}

.video-delete-btn:hover {
  opacity: 0.9;
}


  .play-button {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }

  .regular-posts {
    grid-template-columns: 1fr;
  }

  .post-card {
    height: auto;
  }

  .friends-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .friend-card {
    padding: 1.25rem;
  }

  .friend-actions {
    flex-wrap: wrap;
  }

  .friend-actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .upload-area {
    padding: 1.5rem;
  }

  .modal-content {
    width: 95%;
    padding: 1.25rem;
    max-height: 85vh;
  }

  .modal-photo {
    max-width: 95vw;
    max-height: 85vh;
  }

  .modal-video {
    max-width: 95vw;
  }
}
/* =========================
   PROFILE MESSAGING MODAL (NEW)
========================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

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

.modal-box {
  width: min(520px, 92vw);
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.modal-close {
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}

label {
  display: block;
  font-weight: 600;
  margin-top: 10px;
}

input, textarea {
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  outline: none;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}

.btn.primary {
  background: #111;
  color: #fff;
}

.btn.secondary {
  background: #e9e9e9;
  color: #111;
}

.status-text {
  margin-top: 10px;
  font-size: 14px;
}

.btn-following {
  background: #e5e7eb;
  color: #111;
}
.btn-following:hover {
  background: #d1d5db;
}


/* =========================================================
   MOBILE FULL-WIDTH FIX (EDGE-TO-EDGE CONTENT)
   Mobile only – desktop untouched
========================================================= */
@media (max-width: 768px) {

  /* Remove side padding from page-level containers */
  .main-container,
  .profile-banner,
  .profile-banner-container,
  .wrapit,
  .flash {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Ensure columns and content fill screen */
  .content-column {
    padding-left: 0;
    padding-right: 0;
  }

  /* Make feed items truly full width */
  .feed-item {
    margin-left: 0;
    margin-right: 0;
    border-radius: 16px; /* keep softness */
  }

  /* Profile banner card edge-to-edge */
  .profile-banner {
    border-radius: 0; /* optional – modern mobile look */
  }

  /* Header stays clean */
  .header-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Anchor positioning to image container */
.profile-picture-container {
  position: relative;
}

/* Camera button overlay */
.profile-picture-container .edit-profile-pic {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #1E40AF;
  border-radius: 50%;
  border: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
  position: absolute;
  bottom: 8px;
  right: 8px;

  z-index: 10; /* force above image */
}

/* Icon size */
.profile-picture-container .edit-profile-pic i {
  font-size: 0.9rem;
}

/* Hover (desktop) */
.profile-picture-container .edit-profile-pic:hover {
  background: #f8fafc;
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}

@media (max-width: 768px) {

    .profile-picture-container {
    width: 150px !important;
    height: 150px !important;
    margin: 0 auto;
  }

  .profile-picture-container .edit-profile-pic {
    bottom: 8px;
    right: 8px;
  }
}

.modal-content {
  max-height: 85vh;
  overflow-y: auto;
}

.profile-bio {
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 14px;
  color: #1f2937;
}

.profile-divider {
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 20px 0 18px 0;
}

.profile-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.profile-meta-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.profile-meta-label {
  font-weight: 600;
  min-width: 95px;
}

.profile-meta-value {
  flex: 1;
}

.profile-meta-row a {
  color: #2563EB;
  text-decoration: none;
  font-weight: 500;
}

.profile-meta-row a:hover {
  text-decoration: underline;
}


.profile-about {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}


.about-card {
  background: white;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
}

.about-bio {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 18px;
}

.about-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 20px 0;
}

.about-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.about-label {
  font-weight: 600;
  min-width: 0;
  width: 100%;
  color: #111827;
}

.about-value {
  width: 100%;
  color: #374151;
  line-height: 1.6;
}


.profile-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.profile-picture-container,
.profile-actions {
  position: relative;
  z-index: 2;
}

.user-details {
 /* flex: 1;*/
  min-width: 0;
    display: flex;
    flex-direction: column;
    background: #adebff61;
    border-radius: 15px;
    padding: 20px;
    text-align:center;
}

.user-details h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: .5rem;
  text-align: left;
  color: #000;
  background:white;
  border-radius:10px;
  padding:10px;
}

.user-stats {
  display: flex;
  gap: 2.5rem;
  margin: 1rem 0;
  justify-content: flex-start;
  flex-wrap: wrap;
  background:white;
  border-radius:10px;
  padding:10px;
}

.profile-header h1,
.profile-header .stat-number,
.profile-header .stat-label {
  color: #000;
}


@media (max-width: 768px) {

  .profile-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .user-details {
    width: 100%;
    align-items: center;
  }

  .user-stats {
    justify-content: center;
  }

  .profile-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .profile-actions .btn {
    width: 100%;
  }

}


/* =====seperator between sections ====*/
.section-divider{
  height:1px;
  background:#e5e7eb;
  margin:8px 0;
}
/*-------------------lets make these buttons look snazzy--------------------------*/
.profile-mode-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px;
  background:#f1f5f9;
  border:1px solid #dbe3ee;
  border-radius:14px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  margin-bottom:40px;
}

.mode-btn{
  appearance:none;
  border:none;
  background:transparent;
  color:#475569;
  font-size:.9rem;
  font-weight:700;
  line-height:1;
  padding:10px 16px;
  border-radius:10px;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .15s ease,box-shadow .2s ease;
}

.mode-btn:hover{
  background:rgba(255,255,255,.75);
  color:#1e293b;
}

.mode-btn.active{
  background:linear-gradient(180deg,#2563eb,#1d4ed8);
  color:#fff;
  box-shadow:0 6px 16px rgba(37,99,235,.28);
}

.mode-btn:active{
  transform:scale(.98);
}

.mode-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
/*--------------------mobile bio buttons--------------------------*/
@media (max-width:768px){
  .profile-mode-toggle{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
    margin-bottom:20px;
  }
  .mode-btn{
    flex:1 1 auto;
    text-align:center;
  }
}
.text-post-body{
    padding:10px;
}
.text-post-meta{
    padding:10px;
}
.text-post-meta strong{
    color:black;
}
.text-post-meta #text{
    color:black;
    font-size:1.5rem;
}
.text-post-actions{
    padding:8px;
}


/* =========================
   PROFILE IMAGE — TRUE CENTER FIX
========================= */
.profile-header .profile-picture-container {
  width: 200px !important;
  height: 200px !important;

  border-radius: 50%;
  /*overflow: hidden;*/

  position: relative;
  flex-shrink: 0;
}

/* KEY FIX: center from middle, not top-left */
.profile-header .profile-picture-container img {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transform: translate(-50%, -50%);

  display: block;
}