/* ===== Insta Clone (Pure) - Light UI / Trend 2026 ===== */
/* ===== Custom Font ===== */
@font-face{
  font-family: "MyFont";
  src:
    url("../fonts/woff2/IRANSansWeb\(FaNum\).woff2") format("woff2"),
    url("../fonts/woff/IRANSansWeb\(FaNum\).woff") format("woff");
  font-weight: 100 900; /* اگر فونت Variable یا چند وزن دارد */
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family:"MyFont";
  src:
  url("../fonts/woff2/IRANSansWeb\(FaNum\)_Bold.woff2") format("woff2"),
  url("../fonts/woff/IRANSansWeb\(FaNum\)_Bold.woff") format("woff");
  font-weight:bold;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#ffffff;
  --card:#ffffff;
  --text:#111318;
  --muted:#5b6472;
  --line:#e9edf3;

  --accent:#ff2d55;

  /* Trend 2026 tokens */
  --shadow: 0 10px 30px rgba(16, 24, 40, .08);
  --shadow2: 0 6px 16px rgba(16, 24, 40, .06);
  --radius: 18px;
  --radius2: 22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: "MyFont", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial;
}

a{color:inherit;text-decoration:none}
.app{min-height:100vh}

/* ===== Topbar ===== */
.topbar{
  position:sticky; top:0; z-index:5;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
}

.logo{
  font-weight:900;
  letter-spacing:.2px;
  font-size:18px;
}

.top-actions{display:flex; gap:10px}

.icon-btn{
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  font-size:14px;
  cursor:pointer;
  padding:8px 10px;
  border-radius:12px;
  transition: background .2s ease, border-color .2s ease, transform .08s ease;
}
.icon-btn:hover{
  background:#f4f7fb;
  border-color:#edf1f7;
}
.icon-btn:active{ transform: scale(.98); }

/* ===== Container ===== */
.container{
  max-width:560px;
  margin:0 auto;
  padding:14px 12px 44px;
}

/* ===== Stories (base) ===== */
.stories{
  display:flex;
  gap:12px;
  overflow:auto;
  padding:12px 2px 14px;
  border-bottom:1px solid var(--line);
  scrollbar-width: thin;
}
.stories::-webkit-scrollbar{height:8px}
.stories::-webkit-scrollbar-thumb{background:#e8eef7;border-radius:999px}
.stories::-webkit-scrollbar-track{background:transparent}

.story-bubble{
  width:74px;
  flex:0 0 auto;
  cursor:pointer;
  user-select:none;
}

.ring{
  width:64px;height:64px;
  border-radius:50%;
  background: conic-gradient(from 180deg, #ffb703, #ff006e, #8338ec, #3a86ff, #ffb703);
  padding:2px;
  margin:0 auto 6px;
  box-shadow: 0 8px 18px rgba(16,24,40,.10);
}

.avatar{
  width:100%;height:100%;
  border-radius:50%;
  background:#e9eef7;
  background-size:cover;
  background-position:center;
  border:3px solid #fff;
}

.avatar.small{
  width:34px;height:34px;
  border-radius:50%;
  border:1px solid var(--line);
  background:#e9eef7;
  background-size:cover;
  background-position:center;
}

.story-name{
  font-size:12px;
  text-align:center;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===== Profile Header (Instagram-like) ===== */
.profile-header{
  padding: 14px 2px 10px;
  border-bottom: 1px solid var(--line);
}

.profile-top{
  display:flex;
  gap:14px;
  align-items:center;
}

.profile-avatar{
  width:90px;
  height:90px;
  border-radius:50%;
  border:1px solid var(--line);
  background: radial-gradient(circle at 30% 30%, #f2f5fb, #ffffff);
  background-size:cover;
  background-position:center;
  box-shadow: var(--shadow2);
}

.profile-stats{flex:1; min-width:0}

.profile-username{
  font-weight:900;
  margin-bottom:20px;
  letter-spacing:.2px;
  font-size:16px;
}

.stats-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.stat {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  border-radius: 14px;
  background: #f7f7f7;
}

.stat-num{
  font-weight:900;
  font-size:16px;
}

.stat-label{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.profile-bio {
  margin-top: 30px;
  color: var(--text);
  line-height: 1.75;
  font-size: 13px;
  margin-bottom: 30px;
}

/* Stories row under profile (same element, just spacing) */
.stories-profile{
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: 10px;
}

/* ===== Grid: اندازه گرید تصاویر مانند اینستاگرام ===== */
/* ===== Grid (No crop - show full image) ===== */
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:6px;
  margin-top: 12px;
}

.grid-item{
  background:#f2f5fb;
  position:relative;
  width:100%;
  aspect-ratio: 1 / 1;
  overflow:hidden;
  border-radius: 14px;
  border:1px solid #eef2f7;
  box-shadow: 0 1px 0 rgba(16,24,40,.04);
  display:flex;
  align-items:center;
  justify-content:center;
}

.grid-item img{
  width:100%;
  height:100%;
  object-fit: cover;     /* مهم: بدون کراپ */
  background:#f4f6fb;      /* حاشیه‌های خالی قشنگ دیده بشه */
  display:block;
  cursor:pointer;
  transition: transform .25s ease, filter .25s ease;
}

.grid-item img:hover{
  transform: scale(1.01);
  filter: saturate(1.02) contrast(1.02);
}


/* ===== Feed (اگر صفحه‌های دیگر هنوز از feed استفاده کردند) ===== */
.feed{padding-top:12px}
.post{
  background:var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  margin-bottom:14px;
  box-shadow: var(--shadow2);
}
.post-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
}
.post-user{flex:1; min-width:0}
.username {
  font-weight: 800;
  font-size: 10px;
}
.sub{
  color:var(--muted);
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.dots{color:var(--muted); font-size:20px}

.post-image img{
  width:100%;
  display:block;
  background:#f4f6fb;
  cursor:pointer;
}

.post-actions{
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 8px 6px;
}
.spacer{flex:1}

.post-caption{
  padding:0 12px 10px;
  line-height:1.55;
}
.post-caption .username{margin-left:6px}

.post-time{
  padding:0 12px 12px;
  color:var(--muted);
  font-size:12px;
}

/* ===== Modals ===== */
.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:50;
}
.modal.show{display:block}

.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15, 18, 25, .55);
}

.modal-card{
  position:relative;
  max-width:900px;
  width:92vw;
  margin:6vh auto 0;
  background: rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius: var(--radius2);
  overflow:hidden;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.modal-close{
  position:absolute;
  top:10px; left:10px;
  width:38px;height:38px;
  border-radius:14px;
  border:1px solid #eef2f7;
  background: rgba(255,255,255,.85);
  color:var(--text);
  font-size:22px;
  cursor:pointer;
  z-index:3;
  transition: transform .08s ease, background .2s ease;
}
.modal-close:hover{background:#ffffff}
.modal-close:active{transform: scale(.98)}

/* ===== Modal layout: 50/50 and square image frame ===== */
.modal-body{
  display:grid;
  grid-template-columns: 1fr 1fr; /* 50% عکس / 50% کپشن */
  gap:0;
}

.modal-imgwrap{
  background:#f4f6fb;
  display:flex;
  align-items:center;
  justify-content:center;

  aspect-ratio: 1 / 1;     /* کادر مربعی */
  width:100%;
}

.modal-imgwrap img{
  width:100%;
  height:100%;
  object-fit: contain;     /* بدون کراپ داخل کادر مربعی */
  background:#f4f6fb;
}

.modal-side{
  border-right:1px solid var(--line);
  padding:14px;
  background: rgba(255,255,255,.9);

  /* ثابت ماندن واید و کنترل اسکرول کپشن */
  overflow:auto;
}

.modal-head{
  display:flex;
  gap:10px;
  align-items:center;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}

.modal-caption{
  padding-top:12px;
  color:var(--text);
  line-height:1.8;
}

/* ===== Story Modal ===== */
.story-card{
  position:relative;
  width:min(420px, 92vw);
  margin:8vh auto 0;
  border-radius: var(--radius2);
  overflow:hidden;
  border:1px solid var(--line);
  background:#000;
  box-shadow: var(--shadow);
}

.story-card img{
  width:100%;
  display:block;
}

.story-cap{
  position:absolute;
  bottom:0; left:0; right:0;
  padding:12px 12px 14px;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  color:#fff;
  font-size:14px;
  line-height:1.6;
}

/* ===== Responsive ===== */
@media (max-width: 720px){
@media (max-width: 720px){
  .modal-body{
    grid-template-columns:1fr; /* عکس بالا، کپشن پایین */
  }
  .modal-side{
    border-right:0;
    border-top:1px solid var(--line);
    max-height: 40vh; /* کپشن اگر زیاد شد اسکرول می‌خورد */
    overflow:auto;
  }
  .modal-imgwrap{
    width:100%;
    aspect-ratio: 1 / 1; /* همچنان مربعی در موبایل */
  }
}

  .profile-username {
  font-weight: 900;
  margin-bottom: 20px;
  letter-spacing: .2px;
  font-size: 13px;
}
.stat-num {
  font-weight: 900;
  font-size: 13px;
}
.stat-label {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}
}

/* ===== Full-width CTA button under bio ===== */
.cta-btn{
  display:block;
  width:100%;
  margin-top:12px;

  text-align:center;
  font-weight:900;
  font-size:14px;
  letter-spacing:.2px;

  padding:12px 14px;
  border-radius:14px;

  background: linear-gradient(135deg, #111318, #2a2f3a);
  color:#fff;

  border:1px solid rgba(17,19,24,.08);
  box-shadow: 0 10px 24px rgba(16,24,40,.12);

  transition: transform .08s ease, filter .2s ease, box-shadow .2s ease;
}

.cta-btn:hover{
  filter: brightness(1.02);
  box-shadow: 0 12px 28px rgba(16,24,40,.14);
}

.cta-btn:active{
  transform: scale(.99);
}
/* Hide bio (sub) inside post modal header only */
#postModal .modal-head .sub{
  display: none !important;
}/* ===== Admin Dashboard List (Responsive, No Overflow) ===== */
.admin-item{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;              /* اجازه بده تو موبایل بره خط بعد */
  border:1px solid #e9edf3;
  padding:10px;
  border-radius:16px;
  background:#fff;
  box-shadow: 0 1px 0 rgba(16,24,40,.04);
}

.admin-thumb{
  width:60px;
  height:60px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid #e9edf3;
  flex:0 0 auto;
}

.admin-meta{
  flex:1 1 220px;              /* می‌تونه کوچک/بزرگ بشه */
  min-width:0;                 /* خیلی مهم: جلوی بیرون زدن flex رو می‌گیره */
}

.admin-caption{
  color:var(--text);
  font-size:13px;
  line-height:1.6;

  /* خیلی مهم: متن‌های طولانی کادر رو نمی‌شکنن */
  overflow-wrap:anywhere;
  word-break:break-word;
}

.admin-time{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}

.admin-actions{
  display:flex;
  gap:8px;
  flex:0 0 auto;
}

.admin-btn{
  font-size:14px;              /* دکمه‌ها خواناتر */
  padding:10px 12px;
  border-radius:12px;
  background:#f4f7fb;
  border:1px solid #edf1f7;
}

.admin-btn.danger{
  background:#fff5f7;
  border-color:#ffd6de;
}

/* موبایل: دکمه‌ها بیان پایین و فول‌واید/دوستونه بشن */
@media (max-width: 720px){
  body{ overflow-x:hidden; }

  .admin-item{ align-items:flex-start; }

  .admin-actions{
    flex:1 1 100%;
  }

  .admin-actions .admin-btn{
    flex:1 1 calc(50% - 4px);
    text-align:center;
  }

  /* اگر فقط یک دکمه بود (استوری)، فول واید */
  .admin-actions .admin-btn:only-child{
    flex:1 1 100%;
  }
}