/* =======================================================
   Cleaned & De-duplicated Stylesheet (with iPhone avatar fix)
   - Prevent stretched avatars on cards (especially on iOS)
   - Key changes:
     * .card img  ->  .card img:not(.avatar)
     * strong scoped override: .home-feed .card img.avatar { ... !important }
   ======================================================= */

/* ---------- THEME VARIABLES & RESETS ---------- */
:root{
  --bg:#0e1b24;
  --card:#172734;
  --muted:#9ecae1;
  --accent:#ff2d7a;
  --text:#eaf2f8;
}
*{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--bg);
  
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
}
a{ color:var(--muted); text-decoration:none; }
img{ max-width:100%; height:auto; }

/* Prevent page from scrolling while certain UIs are open */
body.lock-scroll{ overflow:hidden; }

/* ---------- LAYOUT ---------- */
.layout{
  display:grid;
  grid-template-columns:240px 1fr;
  grid-template-rows:56px 1fr;
  min-height:100vh;
}
.content{ padding:2px; 
margin:0px;
 background: url('/public/uploads/content-bg/contentbg.jpg') no-repeat center fixed;
    background-size: cover;
    background-attachment:fixed;
}



/* Sidebar */
.sidebar{
  grid-row:1/3;
  background:#0a141b;
  border-right:1px solid #203341;
  padding:16px;
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
}

.sidebar nav{ display:flex; flex-direction:column; gap:10px; }
.sidebar a{ padding:10px 12px; border-radius:10px; background:transparent; }
.sidebar a:hover{ background:#12202b; }

/* Sidebar overlay (mobile) */
.sidebar-overlay{
  position:fixed; inset:0;
  background:rgba(10,20,27,.45);
  backdrop-filter:blur(2px);
  display:none;
  z-index:19; /* sidebar uses z-index:20 */
}
.sidebar-overlay.show{ display:block; }
.sidebar-overlay.show{ backdrop-filter: blur(2px); }

/* Topbar */

.topbar{
  grid-column:2/3;
  background:#0a141b;
  border-bottom:1px solid #203341;
  display:flex; align-items:center; gap:12px;
  padding:0 12px; position:sticky; top:0; z-index:10;
}
.topbar .brand{letter-spacing:2px; color: white;}
.topbar .spacer{ flex:1; }
.burger{
  background:#13222e; border:0; color:#cfe7ff;
  border-radius:10px; padding:8px 10px; font-size:18px; cursor:pointer;
}

/* size the badge and keep it from stretching the row */
.verified-icon { width:14px; height:14px; flex:none; }

/* protect the verified colors from any global icon rules */
.verified-icon .badge { fill: url(#vgrad-verified) !important; }
.verified-icon .check { stroke:#fff !important; fill:none !important; }
.verified-icon .edge  { stroke:rgba(0,0,0,.18) !important; fill:none !important; }

/* Grid & Cards */
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.card{
  position:relative; /* anchor .meta */
  background:#fff;
 /* border:1px solid #203341;*/
  border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; cursor:pointer;
}

/* IMPORTANT: do NOT style avatars with the generic card image rule */
.card img:not(.avatar){
  width:100%;
  aspect-ratio:auto;
  object-fit:cover;
  display:block;
}


/* Only size/crop the main post photo, never avatars */
.card .post-image{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
}


/* Never let avatars inherit post-image sizing inside cards */
.card .meta img.avatar{
  width:36px !important;
  height:36px !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  object-position:center !important;
  display:inline-block !important;
  border-radius:50%;
  flex-shrink:0;
  border:2px solid #fff;
}
@media (max-width:600px){
  .card .meta img.avatar{
    width:32px !important;
    height:32px !important;
  }
}

/* iOS Safari “just in case” reinforcement */
@supports (-webkit-touch-callout: none) {
  .card .meta img.avatar{
    width:32px !important;
    height:32px !important;
    object-fit:cover !important;
  }
}


.card .meta{ display:flex; align-items:center; justify-content:space-between; padding:10px; position:absolute; }

/* ---------- CONTROLS & INPUTS ---------- */
.btn{ border:0; background:#133246; color:#cfe7ff; padding:8px 12px; margin-top:10px; border-radius:10px; cursor:pointer; font-size:10px; }
.btn:hover{ background:#173b53; }
.btn.sm{ font-size:13px; padding:6px 10px; border-radius:8px; }
.btn.ghost{ background:blue; border:1px solid white; }
.btn.ok{ background:#1f4633; }
.btn.warn{ background:#4a2020; }

.icon-btn{ border:0; background:#13222e; color:#cfe7ff; padding:8px; border-radius:10px; cursor:pointer; }
.icon-btn:hover{ background:#173b53; }
.icon-btn.danger{ background:none; }
.icon-btn.danger:hover{ background:#4a2020; }

.input, textarea{
  background:#0c1820; border:1px solid #1b3241; color:#eaf2f8;
  border-radius:10px; padding:10px; width:100%;
}

.row{ display:flex; gap:10px; align-items:center; }
.stack{ display:flex; flex-direction:column; gap:10px; }
.inline{ display:inline; }
.rel{ position:relative; }
.meta .row form{ margin:0; }
.delete-overlay{ position:absolute; top:6px; right:6px; }

/* People & Chips */
/* Base avatar defaults */
.avatar{
  width:50px;
  height:50px;
  border-radius:50%;
  object-fit:cover;
  object-position:center;
  flex-shrink:0;
  border:3px solid #fff;
}

.badge{ padding:2px 8px; border-radius:100px; background:#1a2c3a; color:#b1d5ff; font-size:12px; }


/* ---------- PROFILE ---------- */
.profile{ display:grid; grid-template-columns:280px 1fr; gap:18px; }
.profile .avatar{
  width:120px;
  height:120px;
  border-radius:20%;
  object-fit:cover;
  object-position:center;
}

/* Gallery grid */
.profile .gallery,
.profile-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;
}
.profile .gallery img,
.profile-gallery img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:8px;
  display:block;
  cursor:pointer;
}

/* ---------- FEED / POSTS IMAGES (outside modal) ---------- */
.post-image,
.feed .card img:not(#imgModalImage):not(.avatar),
.post img:not(#imgModalImage):not(.avatar){
  display:block;
  width:100% !important;
  height:auto !important;
  max-height:380px;
  object-fit:cover !important;
  border-radius:10px;
}

/* ---------- GENERIC MODAL ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,20,27,.6);
  backdrop-filter:blur(2px);
}
.modal{
  position:relative;
  background:#0f1d27;
  border:3px solid #fff;
  border-radius:16px;
  overflow:hidden;
  width:92%; max-width:920px;
  display:grid; align-items:stretch;
}
.modal-close{
  position:absolute; top:10px; right:10px;
  background:#13222e; border:0; color:#cfe7ff;
  border-radius:10px; padding:6px 10px; cursor:pointer;
}
.modal-close .icon { width:20px; height:20px; }

/* Left: image panel */
.modal-media{
  height:100%; align-self:stretch;
  display:flex; align-items:flex-start; justify-content:center;
  background:#0a141b; overflow:hidden;
}
.modal-media img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain; display:block;
}
/* Right: header + scrollable body + sticky actions/form */
.modal-side{ display:flex; flex-direction:column; min-width:300px; height:100%; min-height:0; }
.modal-head{ flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:10px; border-bottom:1px solid #203341; }
.modal-body{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; padding:10px;
  display:flex; flex-direction:column; gap:10px;
  overscroll-behavior:contain;
}
.modal-actions,
#modal-comment-form{
  flex:0 0 auto;
  display:flex; align-items:center; gap:10px; padding:10px;
  border-top:1px solid #203341; position:sticky; bottom:0;
  background:#0f1d27; z-index:1;
}
#modal-comment-form .input{ flex:1; }

/* Comments */
.comment{
  background:#112230; border:1px solid #1d3444;
  padding:8px; border-radius:10px; position:relative;
  word-break:break-word;
}
.comment .comment-controls{ position:absolute; top:6px; right:6px; }
.comment .icon-btn{ border:0; background:#13222e; color:#cfe7ff; padding:6px; border-radius:8px; cursor:pointer; }
.comment .icon-btn:hover{ background:#173b53; }
.comment .icon-btn.danger{ background:#3b1a1a; }
.comment .icon-btn.danger:hover{ background:#4a2020; }

/* Compact modal variant */
.modal.modal-small{
  grid-template-columns:1fr;
  width:520px; max-width:96%;
  height:auto; max-height:90vh;
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  border:1px solid #1e3342;
}
.modal.modal-small .stack{ max-height:80vh; overflow:auto; }
.modal-close{ border:1px solid #203341; }

/* Keep modal image unconstrained in dedicated overlay */
#imageModalOverlay #imgModalImage{
  width:auto !important; height:auto !important;
  max-width:none !important; max-height:none !important;
  object-fit:contain !important;
}

/* ---------- POST MODAL (scoped variant) ---------- */
#post-modal.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  display:grid; place-items:center; z-index:1000;
}
#post-modal .modal{
  width:min(1200px,96vw);
  height:min(88vh,900px);
  background:#111; color:#f0f0f0;
  border-radius:16px; overflow:hidden;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  grid-template-rows:auto 1fr auto;
  gap:0;
  box-shadow:0 10px 40px rgba(0,0,0,.45);
}
#post-modal .modal .modal-close{
  position:absolute; top:10px; right:10px;
  background:transparent; border:0; font-size:22px; cursor:pointer; color:#ddd;
}
#post-modal .modal-media{
  grid-column:1/2; grid-row:1/4; background:#000; display:grid; place-items:center;
}
#post-modal .modal-media img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
#post-modal .modal-side{
  grid-column:2/3; grid-row:1/4;
  display:grid; grid-template-rows:auto 1fr auto; background:#0f0f10;
}
#post-modal .modal-head{
  padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; gap:10px;
}
#post-modal .modal-head .avatar{ width:40px; height:40px; border-radius:999px; }
#post-modal .modal-body{ padding:12px 16px; overflow:auto; }
#post-modal .comment{
  display:grid; grid-template-columns:36px 1fr; gap:10px;
  padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06);
}
#post-modal .comment .avatar{ width:36px; height:36px; border-radius:999px; }
#post-modal .modal-actions{
  padding:12px 16px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; gap:12px;
}
#post-modal .modal-actions .icon-btn,
#post-modal .modal-actions .btn{
  background:#1d1d1f; border:1px solid rgba(255,255,255,.08);
  padding:6px 10px; border-radius:10px; cursor:pointer; color:#eaeaea;
}
#post-modal #modal-comment-form{
  padding:12px 16px 16px; border-top:1px solid rgba(255,255,255,.08);
  display:grid; grid-template-columns:1fr auto; gap:10px;
}
#post-modal #modal-comment-form .input{
  background:#151517; border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:10px 12px; color:#f5f5f5;
}
#post-modal .badge{
  background:#161618; border:1px solid rgba(255,255,255,.08);
  padding:4px 8px; border-radius:999px; font-size:12px; color:#cfcfcf;
}
#post-modal .stack{ display:grid; }
#post-modal .row{ display:flex; }
#post-modal .spacer{ flex:1; }
#post-modal .notice{ opacity:.8; font-size:13px; }

/* ---------- RESPONSIVE ---------- */

/* Tablets (≤ 980px/900px) */
@media (max-width: 980px){
  .layout{ grid-template-columns:1fr; }
  .topbar{
    grid-column:1/2; display:flex; align-items:center;
    position:relative; z-index:5; padding:0 12px; height:50px; background:#0d1117;
  }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .profile{ grid-template-columns:1fr; }

  /* Mobile sidebar behavior */
  .sidebar{
    position:fixed;  top:0; z-index:20; width:240px;
    height:100vh; overflow:auto; transition:left .25s ease;
    background:#0a141b; border-right:1px solid #203341;
  }
  .sidebar.open{ left:0; }
  .sidebar .sidebar-close{
    display:block; position:sticky; top:8px; margin-left:auto; margin-right:8px;
    background:#13222e; color:#cfe7ff; border:0; padding:8px 10px; border-radius:10px;
  }
}
@media (max-width: 900px){
  .post-image,
  .feed .card img:not(#imgModalImage):not(.avatar),
  .post img:not(#imgModalImage):not(.avatar){ max-height:300px; }

  .profile .gallery,
  .profile-gallery{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
  .profile .gallery img,
  .profile-gallery img{ height:120px !important; }
}

/* Phones (≤ 820px for modal, ≤ 600px general) */
@media (max-width: 820px){
  .modal{ grid-template-columns:1fr; max-height:90vh; }
  .modal-media{ height:50vh; }
}
@media (max-width: 600px){
  .post-image,
  .feed .card img:not(#imgModalImage):not(.avatar),
  .post img:not(#imgModalImage):not(.avatar){
    max-height:40vh; border-radius:8px;
  }
  .profile .gallery,
  .profile-gallery{
    grid-template-columns:repeat(auto-fill,minmax(80px,1fr));
    gap:8px;
  }
  .profile .gallery img,
  .profile-gallery img{
    width:100px !important; height:100px !important; border-radius:6px;
  }

  /* Relax container padding on small screens */
  /*.page, main, .feed{ padding-left:12px; padding-right:12px; }*/
}

/* Very small phones (≤ 380px) */
@media (max-width: 380px){
  .post-image,
  .feed .card img:not(#imgModalImage):not(.avatar),
  .post img:not(#imgModalImage):not(.avatar){ max-height:35vh; }
  .profile .gallery img,
  .profile-gallery img{ width:88px !important; height:88px !important; }
  .profile .gallery, .profile-gallery{ gap:6px; }
}

/* ---------- MISC FIXES ---------- */
.delete-button{ background-image:none; } /* prevent broken placeholder icon */

.who {
  font-size: .85rem;
  color: #eee;
  background: rgba(255,255,255,0.08);
  padding: 4px 10px;
  border-radius: 999px;
  margin-left: auto;
  z-index: 10;
  position: relative;
}

/* ===== Upload modal — Instagram-like polish (scoped) ===== */
#uploadOverlay .modal {
  max-width: 720px;
  padding: 0;
  background: #0c1621;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
#uploadOverlay .upload-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
}
#uploadOverlay .upload-header {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
}
#uploadOverlay .upload-header h2 {
  margin: 0; font-size: 16px; font-weight: 600; letter-spacing: .2px; color: #e6edf3;
}
#uploadOverlay .upload-body { display: grid; gap: 14px; padding: 16px; }
#uploadOverlay .upload-dropzone {
  position: relative; aspect-ratio: 1 / 1; border-radius: 12px;
  border: 1px dashed rgba(255,255,255,0.16);
  background:
    radial-gradient(1200px 200px at 0% 0%, rgba(255,255,255,0.03), transparent 60%),
    radial-gradient(1200px 200px at 100% 100%, rgba(255,255,255,0.03), transparent 60%),
    #0a141b;
  display: grid; place-items: center; overflow: hidden;
  transition: border-color 180ms ease, transform 180ms ease;
}
#uploadOverlay .upload-dropzone:hover {
  border-color: rgba(255,255,255,0.24); transform: translateY(-1px);
}
#uploadOverlay .upload-choose {
  font-size: 14px; color: #aab6c3; background: rgba(255,255,255,0.05);
  padding: 10px 14px; border-radius: 999px; cursor: pointer; user-select: none;
  transition: background 160ms ease, color 160ms ease;
  border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(4px);
}
#uploadOverlay .upload-choose:hover { background: rgba(255,255,255,0.09); color: #e6edf3; }
#uploadOverlay .upload-preview {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none;
}
#uploadOverlay .has-image .upload-choose { display: none; }
#uploadOverlay .has-image .upload-preview { display: block; }
#uploadOverlay .upload-caption {
  width: 100%; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03); color: #e6edf3; padding: 12px 14px; font-size: 14px;
  outline: none; transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
#uploadOverlay .upload-caption::placeholder { color: #8fa1b3; }
#uploadOverlay .upload-caption:focus {
  border-color: rgba(88,166,255,0.6); background: rgba(88,166,255,0.06);
  box-shadow: 0 0 0 3px rgba(88,166,255,0.22);
}
#uploadOverlay .upload-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 12px 16px 16px; border-top: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(0deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}
#uploadOverlay .button {
  appearance: none; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04);
  color: #d9e3ec; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 600;
  line-height: 1; cursor: pointer; transition: background 160ms ease, border-color 160ms ease, transform 60ms ease;
}
#uploadOverlay .button:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
#uploadOverlay .button:active { transform: translateY(1px); }
#uploadOverlay .button.light { color: #adc0d1; background: rgba(255,255,255,0.02); }
#uploadOverlay .button.primary {
  border: 0; background: linear-gradient(135deg, #6ea8ff 0%, #589bff 40%, #4b8dff 100%);
  color: #0b1220; text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
#uploadOverlay .button.primary:hover { background: linear-gradient(135deg, #7eb2ff, #66a3ff, #589bff); }
#uploadOverlay .upload-dropzone.dragover {
  border-color: rgba(88,166,255,0.6); box-shadow: inset 0 0 0 2px rgba(88,166,255,0.25);
}
@media (prefers-reduced-motion: reduce) {
  #uploadOverlay .upload-dropzone, #uploadOverlay .button { transition: none !important; }
}

/* ===== Edit Profile modal — SCOPED polish ===== */
#editProfileOverlay .modal{
  width: min(860px, calc(100vw - 40px));
  padding: 0;
  border-radius: 16px;
  background: #0c1621;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 22px 70px rgba(0,0,0,0.45);
  overflow: hidden;
}
#editProfileOverlay #editProfileTitle{
  display:block; margin:0; padding:14px 18px;
  font-size:16px; font-weight:600; letter-spacing:.2px; color:#e6edf3;
  border-bottom:1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
}
#editProfileOverlay .stack{ gap:12px; }
#editProfileOverlay .input{
  width:100%; border-radius:10px; border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03); color:#e6edf3; padding:12px 14px; font-size:14px;
  outline:none; transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
#editProfileOverlay .input::placeholder{ color:#8fa1b3; }
#editProfileOverlay textarea.input{ min-height:110px; resize:vertical; }
#editProfileOverlay .input:focus{
  border-color: rgba(88,166,255,0.6); background: rgba(88,166,255,0.06);
  box-shadow: 0 0 0 3px rgba(88,166,255,0.22);
}
#editProfileOverlay input[type="file"].input{ padding:10px 12px; }
#editProfileOverlay input[type="file"].input::file-selector-button{
  margin-right:12px; padding:8px 12px; border-radius:8px;
  border:1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06);
  color:#e6edf3; cursor:pointer; transition: background 160ms ease, border-color 160ms ease;
}
#editProfileOverlay input[type="file"].input::file-selector-button:hover{
  background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.20);
}
#editProfileOverlay .btn.sm{
  appearance:none; border-radius:10px; font-size:14px; font-weight:600; line-height:1;
  padding:10px 14px; border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04); color:#d9e3ec; cursor:pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 60ms ease;
}
#editProfileOverlay .btn.sm:hover{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
#editProfileOverlay .btn.sm:active{ transform: translateY(1px); }
#editProfileOverlay .btn.sm[type="submit"]{
  border:0; background: linear-gradient(135deg, #6ea8ff, #589bff 40%, #4b8dff);
  color:#0b1220; text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
#editProfileOverlay .btn.sm[type="submit"]:hover{
  background: linear-gradient(135deg, #7eb2ff, #66a3ff, #589bff);
}

/* Make the anchor a positioning context */
.profile.gallery .rel { position: relative; display: block; }

/* Overlay delete button in the top-right of each tile */
.profile.gallery .delete-post {
  position: absolute; top: 8px; right: 8px; margin: 0;
}
.profile.gallery .delete-post .icon-trash {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.45); color: #fff; font-size: 13px;
  cursor: pointer; opacity: 0;
  transition: opacity 140ms ease, transform 60ms ease, background 160ms ease;
}
.profile.gallery .rel:hover .icon-trash { opacity: 1; }
.profile.gallery .icon-trash:hover { background: rgba(0,0,0,0.6); }
.profile.gallery .icon-trash:active { transform: translateY(1px); }

/* Overlay trash button on each index card */
.grid .card { position: relative; }
.grid .card .delete-post {
  position: absolute; top: 8px; right: 8px; margin: 0;
}
.grid .card .delete-post .icon-trash {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.45); color: #fff; font-size: 13px;
  cursor: pointer; opacity: 0;
  transition: opacity 140ms ease, transform 60ms ease, background 160ms ease;
}
.grid .card:hover .icon-trash { opacity: 1; }
.grid .card .icon-trash:hover { background: rgba(0,0,0,0.6); }
.grid .card .icon-trash:active { transform: translateY(1px); }

/* Kill magnifier cursor everywhere we show post images */
.profile.gallery .rel,
.profile.gallery .rel img,
.grid .card img,
.post-image { cursor: pointer !important; }

/* If a zoom/lightbox lib is injecting these, neuter them too */
.zoom-in, .zoom-out, .zoom-img, .medium-zoom-image {
  cursor: pointer !important;
}

/* Verified badge pill (optional) */
.badge.verified{
  display:inline-block;
  padding:4px 8px;
  font-size:12px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);
  color:#e6edf3;
  vertical-align:middle;
}
.verified{ display:inline-grid; place-items:center; width:18px; height:18px; margin-left:6px; vertical-align:middle; }
.verified-svg{ width:100%; height:100%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }

:root { --sticky-footer-h: 48px; } /* set your preferred height */
body.has-sticky-footer { padding-bottom: calc(var(--sticky-footer-h) + env(safe-area-inset-bottom)); }
.sticky-footer {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: var(--sticky-footer-h); z-index: 1000; background: #0a141b;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-bottom: env(safe-area-inset-bottom);
}
.sticky-footer__inner {
  height: 100%; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.sticky-footer__inner::-webkit-scrollbar { display: none; }
.sticky-footer__copy { opacity: .85; white-space: nowrap; }
.sticky-footer__links { display: inline-flex; gap: 10px; white-space: nowrap; font-size: .9rem;}
.sticky-footer__links a { color: inherit; text-decoration: none; opacity: .9; }
.sticky-footer__links a:hover { text-decoration: underline; opacity: 1; }
.sticky-footer__links .sep { opacity: .4; }
@media (max-width: 480px){
  .sticky-footer__copy { font-size: .9rem; }
}

/* Don’t let our styles override FA */
.fa, .fa-solid, .fa-regular, .fa-brands { font-family: "Font Awesome 6 Free" !important; }
.fa::before, .fa-solid::before, .fa-regular::before, .fa-brands::before { speak: none; }

/* Inline SVG icon normalization */
.icon { width: 1em; height: 1em; vertical-align: -0.2em; flex-shrink: 0; }
nav a .icon { margin-right: 6px; }
.burger .icon { width: 20px; height: 20px; }
.sidebar nav i { font-size: 1em; line-height: 1; }

/* =======================================================
   iPhone-specific avatar hardening for the home grid
   (prevents avatars from inheriting post-image styles)
   Wrap your home grid in <div class="home-feed grid">…</div>
   ======================================================= */
.home-feed .card .meta{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:10px; padding:10px;
  background: linear-gradient(0deg, rgba(0,0,0,0.45), rgba(0,0,0,0));
}
.home-feed .card img.avatar{
  width:36px !important;
  height:36px !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  object-position:center !important;
  display:inline-block !important;
  border-radius:50%;
  flex-shrink:0;
  border:2px solid #fff;
}
.home-feed .card .meta .name{
  min-width:0; color:#fff; font-weight:700;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width:600px){
  .home-feed .card img.avatar{
    width:32px !important; height:32px !important;
  }
}


/* === FINAL: mobile sidebar + overlay (put this LAST) === */
@media (max-width: 980px){
  .sidebar{
    position: fixed;
    top: 0; bottom: 0; left: -260px;   /* start off-canvas */
    width: 240px;
    z-index: 20;
    background: #0a141b;
    border-right: 1px solid #203341;
    height: 100vh;
    overflow: auto;
    transition: left .25s ease;
    /* neutralize any stray transforms from earlier CSS */
    transform: none !important;
    visibility: visible; /* visible but offscreen */
  }
  .sidebar.open,
  .sidebar.is-open{
    left: 0 !important;
  }

  /* Overlay: fade via opacity/pointer-events (no display/hidden) */
  .sidebar-overlay{
    position: fixed; inset: 0;
    background: rgba(10,20,27,.45);
    backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease;
    z-index: 19;  /* under the sidebar */
  }
  .sidebar-overlay.show{
    opacity: 1; pointer-events: auto;
  }
}

/* Optional: hide burger on desktop */
@media (min-width: 981px){ .burger{ display:none; } }


/* === Overlay: single source of truth (LAST in the file) === */
.sidebar-overlay{
  position: fixed; inset: 0;
  background: rgba(10,20,27,.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;          /* <-- off by default */
  transition: opacity .18s ease;
  z-index: 19;                   /* below the sidebar (20) */
}
.sidebar-overlay.show{
  opacity: 1;
  pointer-events: auto;          /* <-- only clickable when visible */
}

/* If an old .site-overlay exists anywhere, neutralize it */
.site-overlay { display: none !important; pointer-events: none !important; }

/* iOS: prevent auto-zoom on focus by making inputs >= 16px */
@media (max-width: 680px){
  input, select, textarea {
    font-size: 12px !important;
    line-height: 1.3;
  }
}

/* Optional: keep overall text legible on mobile */
@media (max-width: 680px){
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 16px; }
}

/* Your .btn is 10px right now — that looks tiny on phones. Bump it up on mobile. */
@media (max-width: 680px){
  .btn { font-size: 16px; padding: 10px 14px; }
  .btn.sm { font-size: 15px; padding: 8px 12px; }
}

/* --- Contained mode: keep the Newest Members strip inside the content gutter --- */
.ig-strip{
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 12px !important;   /* match your page gutter */
  padding-right: 12px !important;
}

/* Make fades/arrows line up with the new padding */
.ig-fade.left  { left: 12px !important; }
.ig-fade.right { right: 12px !important; }

/* Safety: never let the scroller widen the page */
.ig-inner{
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

/* Ensure the grid recenters and doesn’t inherit weird flex sizing */
.thumbnail-layout-one{
  margin-left: auto;
  margin-right: auto;
  max-width: 1100px;
  width: 100%;
  padding: 0 12px;
  box-sizing: border-box;
}

/* === MOBILE FIX: contain the Newest Members strip & prevent sideways scroll === */
@media (max-width: 680px){
  /* Keep the strip inside the gutter (override any edge-bleed rules) */
  .ig-strip{
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 8px;
    padding-bottom: 8px;
    box-sizing: border-box;
  }

  /* Hide arrows/fades on small screens; rely on swipe */
  .ig-nav, .ig-fade{ display:none !important; }

  /* Make sure the scroller can't widen the page */
  .ig-inner{
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 10px;
    padding: 4px 0 2px;
    -webkit-overflow-scrolling: touch;
  }

  /* Compact card sizing on phones */
  .ig-card{ width: 78px; }
  .ig-ring{ width: 60px; height: 60px; }
  .ig-name{ font-size: 12px; }
  .ig-ago { font-size: 10px; }

  /* Global: never allow horizontal scroll on mobile */
  body, .layout, .content, .feed-wrap, .page, .main{
    overflow-x: hidden !important;
  }

  /* If you use the home grid or galleries, keep them centered & full width */
  .thumbnail-layout-one,
  .profile-gallery,
  .profile .gallery{
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  /* Buttons readable on mobile (optional, but avoids tiny tap targets) */
  .btn{ font-size: 16px; padding: 10px 14px; }
  .btn.sm{ font-size: 12px; padding: 8px 12px; }
}



/* Style the built-in button for choose file on feed*/
input[type="file"]::file-selector-button{
  border:0;
  background:#133246;
  color:#cfe7ff;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  margin-right:10px;
}
input[type="file"]::file-selector-button:hover{ background:#173b53; }

/* Safari/WebKit fallback */
input[type="file"]::-webkit-file-upload-button{
  border:0;
  background:#133246;
  color:#cfe7ff;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  margin-right:10px;
}


/*added fotn size 11px for feed elements*/
/*change buttons look and other little elements on a posted image*/
/* ===== Feed action row: like / comment count / delete ===== */
.feed-wrap article .btn.btn-link{
  /* turn them into soft pills */
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(19,50,70,.55);
  border:1px solid rgba(32,51,65,.9);
  color:#cfe7ff;
  text-decoration:none;
  font-weight:600;
  font-size:11px;
  line-height:1;
  transition:background .16s ease, transform .06s ease, box-shadow .16s ease, border-color .16s ease;
}
.feed-wrap article .btn.btn-link:hover{
  background:rgba(23,59,83,.75);
  border-color:#2b6ea0;
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}

/*added font size 11px for date on feed*/
/* comment counter bubble ("💬 0" span.muted) */
.feed-wrap article .muted{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  padding:6px 10px;
  border-radius:999px;
  background:#edff00;
  border:1px solid rgba(32,51,65,.9);
  color:#b8d4ef;
  font-weight:600;
  line-height:1;
}

/* style just the Delete action (uses the delete form's onsubmit attr) */
.feed-wrap article form[onsubmit*="Delete this post"] .btn.btn-link{
  background:rgba(220,38,38,.10);
  border-color:rgba(239,68,68,.35);
  color:#fda4af;
}
.feed-wrap article form[onsubmit*="Delete this post"] .btn.btn-link:hover{
  background:rgba(220,38,38,.18);
  border-color:rgba(239,68,68,.55);
  color:#fecaca;
}

/* ===== Reply row: input + Send button ===== */
.feed-wrap article form input[type="text"]{
  flex:1;
  background:#0c1820;
  border:1px solid #1b3241;
  color:#eaf2f8;
  border-radius:10px;
  padding:10px 12px;
  font-size:16px;                 /* prevents iOS zoom */
  outline:none;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.feed-wrap article form input[type="text"]::placeholder{ color:#8fa1b3; }
.feed-wrap article form input[type="text"]:focus{
  border-color:rgba(88,166,255,.6);
  background:#0e1e28;
  box-shadow:0 0 0 3px rgba(88,166,255,.22);
}

/* Make the Send button match the pills but stand out slightly */
.feed-wrap article form .btn{
  padding:8px 12px;
  border-radius:10px;
  background:#133246;
  color:#cfe7ff;
  border:1px solid rgba(32,51,65,.9);
  font-weight:600;
  transition:background .16s ease, border-color .16s ease, transform .06s ease;
}
.feed-wrap article form .btn:hover{
  background:#173b53;
  border-color:#2b6ea0;
  transform:translateY(-1px);
}

/* Tighten spacing so the row feels intentional on small screens */
@media (max-width: 600px){
  .feed-wrap article [style*="display:flex"][style*="gap:12px"]{
    gap:8px !important;   /* keep your inline flex but reduce gap */
  }
}

/*new addition for the feed elements, make it look purty*/
/* ===== 1) New Post row (file + name + Post) ===== */
/* Target the upload form on feed.php by its enctype */
.feed-wrap .card form[enctype="multipart/form-data"] > div{
  /* Override the inline flex with a reliable grid on small screens */
  display:grid !important;
  grid-template-columns: auto 1fr auto;   /* [Choose] [filename grows] [Post] */
  align-items:center;
  gap:10px;
}

/* Make the native file control feel like your buttons (zero-HTML-change) */
.feed-wrap .card form[enctype="multipart/form-data"] input[type="file"]{
  font-size:16px;           /* prevent iOS zoom */
  color:#000;
  max-width:100%;
}
.feed-wrap .card form[enctype="multipart/form-data"] input[type="file"]::file-selector-button{
  border:0; background:#133246; color:#cfe7ff;
  padding:10px 14px; border-radius:10px; cursor:pointer; margin-right:10px;
  transition:background .16s ease, transform .06s ease, box-shadow .16s ease;
}
.feed-wrap .card form[enctype="multipart/form-data"] input[type="file"]::file-selector-button:hover{
  background:#173b53; transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.25);
}
/* WebKit fallback */
.feed-wrap .card form[enctype="multipart/form-data"] input[type="file"]::-webkit-file-upload-button{
  border:0; background:#133246; color:#cfe7ff;
  padding:10px 14px; border-radius:10px; cursor:pointer; margin-right:10px;
}

/* Keep long filenames from pushing the Post button off-screen */
.feed-wrap .card form[enctype="multipart/form-data"] input[type="file"]{
  text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
}

/* Make Post button a tidy pill; never stretch full-width */
.feed-wrap .card form[enctype="multipart/form-data"] .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:10px; width:auto; min-width:72px;
}

/* Small screens: stack neatly if space is tight */
@media (max-width: 480px){
  .feed-wrap .card form[enctype="multipart/form-data"] > div{
    grid-template-columns: 1fr auto;   /* [file control grows] [Post] */
    grid-auto-rows: auto;
  }
}

/* ===== 2) Action pills under each photo (♥, 💬, Delete) ===== */
.feed-wrap article .btn.btn-link{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:rgba(19,50,70,.55);
  border:1px solid rgba(32,51,65,.9);
  color:#cfe7ff; font-weight:600; line-height:1;
  text-decoration:none;
  transition:background .16s ease, border-color .16s ease, transform .06s ease, box-shadow .16s ease;
  margin-bottom:10px;
}
.feed-wrap article .btn.btn-link:hover{
  background:rgba(23,59,83,.75);
  border-color:#2b6ea0;
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}

/* comment count badge */
.feed-wrap article .muted{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background:rgba(15,24,32,.6);
  border:1px solid rgba(32,51,65,.9);
  font-weight:600; line-height:1;
  color:#f0fdbf;
}

/* Delete pill variant */
.feed-wrap article form[onsubmit*="Delete this post"] .btn.btn-link{
  background:rgba(220,38,38,.10);
  border-color:rgba(239,68,68,.35);
  color:#fda4af;
}
.feed-wrap article form[onsubmit*="Delete this post"] .btn.btn-link:hover{
  background:rgba(220,38,38,.18);
  border-color:rgba(239,68,68,.55);
  color:#fecaca;
}

/* Tighten spacing of that control row on phones */
@media (max-width: 600px){
  .feed-wrap article [style*="display:flex"][style*="gap:12px"]{ gap:8px !important; }
}

/* ===== 3) Reply input + Send ===== */
.feed-wrap article form input[type="text"]{
  flex:1;
  background:#0c1820; border:1px solid #1b3241; color:#eaf2f8;
  border-radius:10px; padding:10px 12px; font-size:16px;   /* prevent iOS zoom */
  outline:none;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.feed-wrap article form input[type="text"]::placeholder{ color:#8fa1b3; }
.feed-wrap article form input[type="text"]:focus{
  border-color:rgba(88,166,255,.6);
  background:#0e1e28;
  box-shadow:0 0 0 3px rgba(88,166,255,.22);
}
.feed-wrap article form .btn{
  padding:10px 14px; border-radius:10px;
  background:#133246; border:1px solid rgba(32,51,65,.9); color:#cfe7ff; font-weight:600;
  transition:background .16s ease, border-color .16s ease, transform .06s ease;
}
.feed-wrap article form .btn:hover{
  background:#173b53; border-color:#2b6ea0; transform:translateY(-1px);
}

/* ===== 4) Small polish for the topbar message button (the blue pill) ===== */
#msgDrawerBtn {
  padding: 6px;
  border-radius: 50%;
  background: transparent;
  color: #e6f0f2;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, transform 0.2s ease;
}

#msgDrawerBtn:hover {
  color: #7dd3fc;
  transform: scale(1.1);
}

/* Icon normalization inside the button */
#msgDrawerBtn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
}

/* Optional: unread pulse effect */
#msgDrawerBtn[data-has-unread="true"] svg {
  animation: msgPulse 1.6s infinite ease-in-out;
}
@keyframes msgPulse {
  0%,100% { transform: scale(1); color: #e6f0f2; }
  50% { transform: scale(1.15); color: #7dd3fc; }
}


.msgDrawer,
.msgDrawer.ghost {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}


/* Force pointer instead of zoom-in, regardless of inline styles */
.postimage img,
.gallery img,
.org-gallery-img {
  cursor: pointer !important;
}

/*fix scrolling and double tab for profile*/

/* === Profile Mobile Sidebar Blur Fix === */
.profile,
.page,
.profile-page {
  position: static !important;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  z-index: auto !important;
}

/* Ensure overlay sits correctly under the fixed header */
#sidebarOverlay.sidebar-overlay {
  top: 60px; /* if your fixed header is 60px tall */
  height: calc(100vh - 60px);
  z-index: 19;
}

/* Ensure sidebar opens over content smoothly */
.sidebar {
  z-index: 20;
  transform: none !important;
  visibility: none !important;
}

/* Make sure no extra backdrop from profile causes blur flicker */
body.profile-page,
body.profile {
  backdrop-filter: none !important;
}

/* =======================================================
   MEMBERS PAGE – MOBILE / iPHONE XR OPTIMIZATION
   (Safe to drop at end of global stylesheet)
   ======================================================= */

/* 1. Global safety: no sideways scroll on any page */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* 2. Members wrapper: behave like a full-width strip on phones */
@media (max-width: 600px) {
    .members-wrap {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 12px 0 24px 0 !important; /* no side padding, strip style */
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow-x: hidden !important;
    }

    /* Full-width white header strip (Instagram-style) */
    .members-header {
        background: #ffffff;
        border-radius: 0 !important;
        padding: 16px 16px 20px 16px !important;
        margin: 0 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    /* Tidy the “10 Members” heading */
    .members-count h1 {
        font-size: 2rem;
        margin: 0 0 12px 0;
        text-align: left;
    }
}

/* 3. Search & sort tools: stack cleanly on mobile */
@media (max-width: 600px) {
    .members-tools {
        margin-top: 8px;
    }

    .members-search {
        display: flex;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 8px;
    }

    .members-search .field {
        flex: 1 1 100%;
    }

    .members-search input {
        width: 100% !important;
    }

    .members-search select,
    .members-search button {
        flex: 1 1 48%;
        min-width: 0;
    }

    /* If space is *really* tight, stack everything full width */
    @media (max-width: 420px) {
        .members-search select,
        .members-search button {
            flex: 1 1 100%;
            width: 100% !important;
        }
    }
}

/* 4. Fix background-attachment bug on iOS (no zoomed BG) */
@media (max-width: 900px) {
    .content {
        background-attachment: scroll !important;
        background-size: cover !important;
    }
}

/* 5. Member cards: never wider than the screen on phone */
@media (max-width: 600px) {
    .members-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-top: 16px;
        padding: 0 12px;     /* small side gutters */
        box-sizing: border-box;
    }

    .member-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px;
    }

    .member-image-wrap {
        aspect-ratio: 3 / 2.8;
    }

    .member-main {
        padding: 12px 12px 16px 12px;
    }
}

/* 6. Pagination: small pill centered under the grid */
@media (max-width: 600px) {
    nav.members-pager {
        margin: 18px auto 12px auto;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(58, 200, 251, 0.62);
        display: inline-flex;
        gap: 6px;
    }

    nav.members-pager a,
    nav.members-pager span {
        font-size: 0.85rem;
    }
}