/* =========================================================
   NFT Bazaar — Theme: Deep space black / neon blue / hint of violet
   ========================================================= */

:root{
  --bg-0: #262b3d;
  --bg-1: #2b3145;
  --bg-2: #313850;
  --panel: rgba(255,255,255,0.065);
  --panel-strong: rgba(255,255,255,0.09);
  --border: rgba(255,255,255,0.13);
  --border-soft: rgba(255,255,255,0.08);

  --blue: #2f8fff;
  --blue-bright: #4fc3ff;
  --blue-glow: #00d4ff;
  --violet: #8b5cf6;
  --violet-soft: #6d5bd0;

  /* سبز — دکمه‌ی «ورود به سبد خرید» (بعد از افزودنِ موفق) و توستِ موفقیت */
  --green: #2ecc71;
  --green-bright: #4ade80;

  /* رنگِ اختصاصیِ «آگهی ویژه» — برای کادرِ کارت، بج ستاره، و سرتیترِ بخش‌های ویژه */
  --gold: #ffb648;
  --gold-soft: #ffd27a;

  --text-0: #f2f5ff;
  --text-1: #aab1c6;
  --text-2: #6b7288;

  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --shadow-blue: 0 0 24px rgba(47,143,255,0.35);
  --shadow-blue-soft: 0 8px 30px rgba(47,143,255,0.18);
  --shadow-violet: 0 0 24px rgba(139,92,246,0.30);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }

/* Use the dynamic viewport unit everywhere we lock a height to the
   screen. On mobile, 100vh is measured against the LARGEST possible
   viewport (address bar hidden), so when the browser chrome shows/
   hides during scroll the page jumps/"resizes" under the user's
   finger. 100dvh tracks the real, current viewport, so the page
   stays put — same box on a phone and in a resized desktop window. */
:root{ --vh-fix: 100vh; }
@supports (height: 100dvh){ :root{ --vh-fix: 100dvh; } }

html{
  overflow-x:hidden;
  width:100%;
  /* stop the elastic/rubber-band overscroll that makes the whole
     page visibly shift on mobile browsers */
  overscroll-behavior-y: none;
  /* smooth (not "jump-cut") scrolling for in-page anchor jumps */
  scroll-behavior: smooth;
}

/* =========================================================
   Scroll performance fix: nothing here changes any visuals —
   it only tells the browser to composite these layers on the
   GPU once and reuse them, instead of re-painting the heavy
   blurred/fixed backgrounds and glass (backdrop-filter) panels
   on every single scroll frame. That re-paint work — several
   large blurred fixed layers stacked on top of each other — was
   the actual cause of the choppy/non-smooth scrolling, not the
   scrolling mechanism itself.
   ========================================================= */
body::before,
body::after,
.topbar,
.bottom-nav,
.nav-side,
.nav-pill,
.nft-modal__panel,
.offer-modal__panel,
.mf-sheet__panel{
  transform: translateZ(0);
  will-change: transform;
}
body::before,
body::after{
  contain: paint;
}

body{
  margin:0;
  width:100%;
  font-family:'Vazirmatn', 'Space Grotesk', sans-serif;
  background: var(--bg-0);
  color: var(--text-0);
  min-height: var(--vh-fix);
  direction: rtl;
  overflow-x:hidden;
  overscroll-behavior-y: none;
  position:relative;
  -webkit-font-smoothing:antialiased;
}

/* Modern aurora-glow backdrop: soft blurred color blobs, fixed so they
   stay put while the page scrolls — gives depth without feeling flat
   or "grid/checkered". */
body::before{
  content:'';
  position:fixed;
  inset:-10%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(38% 30% at 12% 8%,  rgba(47,143,255,0.38), transparent 70%),
    radial-gradient(32% 26% at 88% 4%,  rgba(139,92,246,0.30), transparent 70%),
    radial-gradient(40% 32% at 78% 78%, rgba(0,212,255,0.20),  transparent 70%),
    radial-gradient(34% 28% at 8% 92%,  rgba(109,91,208,0.22), transparent 70%);
  filter: blur(60px);
  opacity:0.85;
}

/* Faint grain for a premium, non-flat texture */
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

/* Global safety net: an uploaded banner (or any other) image can
   have any intrinsic size. Without this rule a very large image can
   force the whole document wider than the screen — which, combined
   with dir="rtl", is exactly what makes the page look shifted/cut
   off and the fixed topbar/bottom-nav look "unstable" on mobile. */
img, svg, video{ max-width:100%; height:auto; }

::selection{ background: rgba(47,143,255,0.35); color:#fff; }

/* scrollbar */
::-webkit-scrollbar{ height:8px; width:8px; }
::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.15); border-radius:10px; }

/* =========================================================
   Shell / page container
   ========================================================= */
.app{
  position:relative;
  z-index:1;
  width:100%;
  max-width: 560px;
  margin: 0 auto;
  min-height: var(--vh-fix);
  overflow-x:hidden;
  padding-bottom: 128px; /* room for bottom glass nav */
}

/* On a wide desktop/Windows browser window the phone-sized shell
   (max-width:560px) just centers on the aurora backdrop — same
   layout logic as mobile, only the outer canvas is bigger. This
   media query only softens the outer edges so the centered card
   doesn't touch the browser edges on very wide windows. */
@media (min-width:700px){
  .app{
    box-shadow: 0 0 0 1px var(--border-soft), 0 40px 120px rgba(0,0,0,0.45);
  }
}

/* =========================================================
   Top bar: search + submit-ad
   ========================================================= */
.topbar{
  position:sticky;
  top:0;
  left:0;
  right:0;
  z-index:40;
  width:100%;
  padding: 18px 16px 12px;
  background: linear-gradient(180deg, rgba(38,43,61,0.88) 55%, rgba(38,43,61,0));
  backdrop-filter: blur(6px);
}

/* Single row: brand (right) — search (middle, compact) — post-ad (left).
   Search uses flex:1 with min-width:0 so it always shrinks to fit the
   remaining space between the two fixed-size buttons — never overflows. */
.topbar__row{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:8px;
  width:100%;
}

.brand{
  order:1;
  flex:none;
  display:flex;
  align-items:center;
  gap:8px;
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:0.2px;
  color: var(--text-0);
  white-space:nowrap;
  min-width:0;
}
.brand__mark{
  flex:none;
  width:30px; height:30px;
  border-radius:9px;
  display:grid; place-items:center;
  background: linear-gradient(145deg, var(--blue), var(--violet));
  box-shadow: var(--shadow-blue);
  font-size:15px;
}
.brand__text{
  overflow:hidden;
  text-overflow:ellipsis;
}

.post-ad{
  order:3;
  flex:none;
  display:flex;
  align-items:center;
  gap:6px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size:12.5px;
  font-weight:700;
  color:#eaf6ff;
  background: linear-gradient(135deg, rgba(47,143,255,0.28), rgba(139,92,246,0.22));
  border:1px solid rgba(79,195,255,0.45);
  white-space:nowrap;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .25s ease;
}
.post-ad:hover{ transform: translateY(-1px); box-shadow: var(--shadow-blue-soft); }
.post-ad svg{ flex:none; width:16px; height:16px; }

.search{
  order:2;
  flex:1 1 auto;
  min-width:0;
  max-width:220px;
  display:flex;
  align-items:center;
  gap:6px;
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: 999px;
  padding: 9px 12px;
  backdrop-filter: blur(14px);
  transition: border-color .2s, box-shadow .2s;
}
.search:focus-within{
  border-color: rgba(79,195,255,0.55);
  box-shadow: 0 0 0 3px rgba(47,143,255,0.14);
}
.search svg{ flex:none; opacity:0.6; width:15px; height:15px; }
.search input{
  flex:1;
  min-width:0;
  width:100%;
  background:transparent;
  border:0;
  outline:0;
  color: var(--text-0);
  font-size:12.5px;
  font-family:inherit;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.search input::placeholder{ color: var(--text-2); }

/* =========================================================
   Banner slider (managed from admin panel), sits right below
   the topbar/search — kept compact on purpose.
   ========================================================= */
.banner-slider{
  position:relative;
  z-index:1;
  /* isolates the slider's box from the rest of the page: no matter
     what size image gets uploaded from the admin panel, it can never
     stretch, overflow, or push this element's own layout around */
  contain: layout paint;
  width:auto;
  max-width:100%;
  margin: 4px 16px 0;
  border-radius: var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow: var(--shadow-blue-soft);
}
.banner-slider__track{
  position:relative;
  /* ارتفاع کمی بیشتر از قبل (بنر یکم بزرگ‌تر شد، عرض/حاشیه‌ی کناری دست‌نخورده) */
  height: 182px;
  max-height: 182px;
  overflow:hidden;
}
.banner-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  visibility:hidden;
  transition: opacity .5s ease;
}
.banner-slide.is-active{
  opacity:1;
  visibility:visible;
}
.banner-slide a{ display:block; width:100%; height:100%; }
.banner-slide img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:cover;   /* crops to fill the frame — never depends on the image's own ratio/size */
  object-position:center;
}
.banner-slide__title{
  position:absolute;
  right:14px;
  bottom:10px;
  font-size:12.5px;
  font-weight:700;
  color:#fff;
  padding:6px 12px;
  border-radius:999px;
  background: rgba(20,22,34,0.55);
  backdrop-filter: blur(6px);
}
.banner-slider__dots{
  position:absolute;
  left:0; right:0; bottom:8px;
  display:flex;
  justify-content:center;
  gap:6px;
  z-index:2;
}
.banner-dot{
  width:6px; height:6px;
  border-radius:50%;
  background: rgba(255,255,255,0.4);
  cursor:pointer;
  transition: all .2s ease;
}
.banner-dot.is-active{
  width:16px;
  border-radius:999px;
  background: var(--blue-bright);
  box-shadow: 0 0 8px 1px rgba(79,195,255,0.7);
}

@media (max-width:380px){
  .banner-slider__track{ height:154px; max-height:154px; }
}

/* category chips row */
.chips{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding: 14px 16px 4px;
  scrollbar-width:none;
}
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:none;
  padding: 7px 15px;
  border-radius: 999px;
  font-size:12.5px;
  color: var(--text-1);
  border:1px solid var(--border);
  background: var(--panel);
  white-space:nowrap;
  cursor:pointer;
  transition: all .18s ease;
}
.chip.is-active,
.chip:hover{
  color:#eaf6ff;
  border-color: rgba(79,195,255,0.55);
  background: linear-gradient(135deg, rgba(47,143,255,0.18), rgba(139,92,246,0.12));
  box-shadow: var(--shadow-blue-soft);
}

/* =========================================================
   H1 سئوی صفحه‌ی اصلی — از نظرِ بصری کوچیک/کم‌رنگ (چون برندینگِ سایت
   همون لوگوی بالای هدره)، ولی برای گوگل یک H1 واقعی و قابلِ‌دیدنه؛
   هیچ استایلِ display:none/visibility:hidden نداره.
   ========================================================= */
.page-h1{
  font-size:14px;
  font-weight:700;
  color: var(--text-1);
  margin: 14px 18px 2px;
  line-height:1.5;
}
.page-h1__sub{
  font-size:12px;
  color: var(--text-2);
  margin: 0 18px 10px;
  line-height:1.6;
}

/* =========================================================
   Section headers
   ========================================================= */
.section{ padding: 22px 0 4px; }
.section__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  padding: 0 18px 12px;
}
.section__title{
  font-size:16px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:8px;
}
.section__title .dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--blue-glow);
  box-shadow: 0 0 8px 2px rgba(0,212,255,0.65);
}
.section__more{
  font-size:12px;
  color: var(--blue-bright);
}

/* سرتیترِ بخش‌های «ویژه» — نقطه و متن با رنگِ طلاییِ متفاوت از بقیه‌ی بخش‌ها */
.section__title--featured{ color: var(--gold-soft); }
.section__title--featured .dot{
  background: var(--gold);
  box-shadow: 0 0 8px 2px rgba(255,182,72,0.65);
}

/* =========================================================
   Featured NFT Carousel (signature element)
   drag: right -> left reveals next cards (RTL swipe)
   ========================================================= */
.carousel-wrap{
  position:relative;
  padding: 6px 0 18px;
}
.carousel{
  display:flex;
  gap:16px;
  padding: 10px 40px;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:none;
  perspective: 900px;
}
.carousel::-webkit-scrollbar{ display:none; }
.carousel.is-dragging{ cursor: grabbing; scroll-snap-type:none; }

/* ردیفِ دومِ کاروسلِ NFTهای آگهی‌شده (قدیمی‌ترها) — دقیقاً زیرِ ردیفِ اول،
   بدونِ راهنمای کشیدنِ تکراری و با فاصله‌ی کمترِ بالا تا دو ردیف به‌هم
   چسبیده دیده بشن، نه دو بخشِ جدا. */
.carousel-wrap--second{ padding-top:22px; margin-top:0; }

/* دکمه‌ی «مشاهده همه»: یک کپسولِ کوچیک/کشیده و مینیمال، دقیقاً زیرِ هر دو
   ردیفِ کاروسل — به‌جای لینکِ متنیِ قبلی توی هدرِ بخش، که تاکیدِ بصریِ
   کافی نداشت. */
.view-all-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:max-content;
  margin: 14px auto 2px;
  padding: 9px 26px;
  border-radius: 999px;
  font-size:12px;
  font-weight:600;
  color: var(--blue-bright);
  border:1px solid rgba(79,195,255,0.35);
  background: rgba(79,195,255,0.07);
  text-decoration:none;
  letter-spacing:.2px;
  transition: all .18s ease;
}
.view-all-btn svg{ width:13px; height:13px; flex:none; }
.view-all-btn:hover{
  color:#eaf6ff;
  border-color: rgba(79,195,255,0.6);
  background: linear-gradient(135deg, rgba(47,143,255,0.18), rgba(139,92,246,0.12));
  box-shadow: var(--shadow-blue-soft);
}

.nft-card{
  position:relative;
  flex:none;
  width: 208px;
  scroll-snap-align:center;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: linear-gradient(155deg, rgba(79,195,255,0.55), rgba(139,92,246,0.35) 45%, rgba(255,255,255,0.05) 100%);
  transition: transform .35s ease;
  cursor: pointer;
}
.nft-card__inner{
  border-radius: calc(var(--radius-lg) - 1px);
  background: linear-gradient(180deg, rgba(44,49,68,0.92), rgba(34,39,55,0.95));
  overflow:hidden;
  backdrop-filter: blur(10px);
  /* هزاران کارت با blur جداگانه روی هرکدوم، بدون این، دقیقاً همون چیزیه که
     موقع اسکرول (وقتی کارت‌های تازه وارد صفحه می‌شن) لحظه‌ای هنگ/تکون می‌ده. */
  contain: paint;
  transform: translateZ(0);
}
/* با هر تعداد آگهی که باشه، مرورگر برای کارت‌هایی که فعلاً روی صفحه نیستن
   اصلاً layout/paint انجام نمی‌ده (فقط وقتی داره بهشون نزدیک می‌شه حساب می‌کنه) —
   بزرگ‌ترین تکِ تنظیمِ CSS برای سریع موندنِ صفحه با گرید بزرگ. */
.nft-card{
  content-visibility: auto;
  contain-intrinsic-size: 0 260px;
}
/* آگهی ویژه: کادرِ گرادیانِ طلایی به‌جای آبی/بنفشِ معمولی، برای تشخیصِ فوری
   از بین بقیه‌ی کارت‌ها — همون‌جا که .nft-card__star بج ستاره رو نشون می‌ده. */
.nft-card--featured{
  background: linear-gradient(155deg, rgba(255,182,72,0.85), rgba(255,210,122,0.35) 45%, rgba(255,255,255,0.05) 100%);
}
.nft-card__star{
  position:absolute; top:8px; right:8px;
  width:26px; height:26px;
  display:grid; place-items:center;
  border-radius:50%;
  background: linear-gradient(155deg, #ffb648, #ff8a3d);
  box-shadow: 0 0 10px 2px rgba(255,182,72,0.55);
  z-index:3;
  transform: translateZ(0);
}
.nft-card__star svg{ width:14px; height:14px; color:#26140a; }
.nft-card__art{
  height: 130px;
  display:grid; place-items:center;
  font-size: 34px;
  position:relative;
  overflow:hidden;
}
.nft-card__art::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 55%, rgba(38,43,61,0.72));
  z-index:2;
}
.nft-card__badge{
  position:absolute; top:8px; left:8px;
  font-size:10px;
  padding:3px 8px;
  border-radius:999px;
  background: rgba(38,43,61,0.6);
  border:1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(6px);
  z-index:3;
  color: var(--text-1);
  transform: translateZ(0);
}
/* نمادِ گیفت (ویژگی pattern تلگرام) — دقیقاً مثل خودِ تلگرام، به‌صورت یک الگوی
   تکرارشونده‌ی ریز پشتِ مدل، نه یک آیکون گنده‌ی تک. فقط برای عکس/گیف/webp با
   background-image تایل می‌شه (ویدیو/Lottie رو نمی‌شه با CSS خالص تایل کرد). */
.nft-card__pattern{
  position:absolute; inset:0;
  z-index:0;
  background-repeat: repeat;
  background-size: 40px 40px;
  opacity:.26;
}
.nft-card__art video,
.nft-card__art img,
.nft-card__art .nft-card__lottie{
  position:relative; z-index:1;
  display:block;
  width:58%; height:58%;
  object-fit:contain;
  object-position:center center;
  margin:auto;
}
.nft-card__lottie svg{ width:100% !important; height:100% !important; }
/* عکسِ ثابتِ پشتیبانِ گیفت‌های Lottie: با position:absolute از جریانِ گرید
   خارج می‌شه (یعنی .nft-card__lottie تنها آیتمِ گرید می‌مونه و درست
   وسط‌چین می‌شه) و دقیقاً پشتِ همون باکسِ ۵۸٪ سنتر می‌شه — اگه انیمیشن لود
   بشه روش رو می‌پوشونه، اگه لود نشه (نگاه کن به includes/card.php) خودش
   به‌تنهایی دیده می‌شه، نه یک جای خالی. */
.nft-card__art .nft-card__lottie-fallback{
  position:absolute; inset:0; margin:auto;
  z-index:1;
  width:58%; height:58%;
  object-fit:contain; object-position:center center;
}
.nft-card__body{ padding: 12px 14px 14px; }
.nft-card__attrs{ margin: 2px 0 10px; display:flex; flex-direction:column; gap:3px; }
.nft-card__attr{ display:flex; align-items:center; justify-content:space-between; font-size:11px; color:var(--text-2); }
.nft-card__attr b{ color:var(--text-1); font-weight:600; }
.nft-card__attr i{ color: var(--blue-bright); font-style:normal; font-size:10px; margin-right:2px; }
.nft-card__title{
  font-size:13px;
  font-weight:700;
  margin:0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nft-card__col{
  font-size:11.5px;
  color: var(--text-2);
  margin:0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nft-card__foot{ display:flex; align-items:center; justify-content:space-between; }
.nft-card__price{ font-family:'Space Grotesk', sans-serif; font-size:14px; font-weight:700; color: var(--blue-bright); }
.nft-card__price span{ font-size:10.5px; color: var(--text-2); font-family:inherit; margin-right:3px; }
.nft-card__verified{ width:18px; height:18px; }

/* gradient art variants */
.grad-1{ background: radial-gradient(120% 120% at 30% 20%, #2f8fff, #0b0c22 70%); }
.grad-2{ background: radial-gradient(120% 120% at 70% 20%, #8b5cf6, #0b0c22 70%); }
.grad-3{ background: radial-gradient(120% 120% at 30% 80%, #00d4ff, #0b0c22 70%); }
.grad-4{ background: radial-gradient(120% 120% at 70% 80%, #4fc3ff, #12082a 70%); }
.grad-5{ background: radial-gradient(120% 120% at 50% 10%, #6d5bd0, #08101f 70%); }
.grad-6{ background: radial-gradient(120% 120% at 50% 90%, #2f8fff, #16082a 70%); }

.carousel-hint{
  display:flex; align-items:center; gap:6px;
  justify-content:center;
  font-size:11px; color: var(--text-2);
  padding-top:4px;
}
.carousel-hint svg{ width:14px; height:14px; animation: swipehint 1.6s ease-in-out infinite; }
@keyframes swipehint{
  0%,100%{ transform: translateX(0); opacity:.5; }
  50%{ transform: translateX(-6px); opacity:1; }
}

/* =========================================================
   Grid listing (store page / recent listings)
   ========================================================= */
.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 0 16px;
}
.grid .nft-card{ width:auto; }
.grid .nft-card__art{ height:105px; font-size:26px; }

/* =========================================================
   Blog section (صفحه اصلی) — دقیقاً ۴ کارت، هرکدوم لینک به
   صفحه‌ی اختصاصی خودش. تصویرِ هر پست با object-fit:cover همیشه
   دقیقاً قالبِ کارت (نسبتِ ثابت) رو پر می‌کنه، فارغ از ابعادِ
   اصلیِ عکسِ آپلودشده در پنل ادمین.
   ========================================================= */
.blog-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 0 16px;
}
.blog-card{
  display:flex;
  flex-direction:column;
  color: inherit;
  text-decoration:none;
  border-radius: var(--radius-lg);
  overflow:hidden;
  background: var(--panel);
  border:1px solid var(--border);
  transition: transform .2s ease, border-color .2s ease;
}
.blog-card:active{ transform: scale(0.98); }
.blog-card__img{
  display:block;
  width:100%;
  aspect-ratio: 4 / 2.1;
  overflow:hidden;
  background: linear-gradient(150deg, rgba(47,143,255,0.12), rgba(139,92,246,0.08));
}
.blog-card__img img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.blog-card__title{
  font-size:13px;
  font-weight:700;
  color: var(--text-0);
  padding: 10px 12px 12px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.5;
}

/* صفحه‌ی اختصاصیِ هر پستِ بلاگ */
.blog-post{ padding: 4px 16px 28px; }
.blog-post__img{
  width:100%;
  aspect-ratio: 4 / 2.1;
  border-radius: var(--radius-lg);
  overflow:hidden;
  margin: 14px 0 16px;
  border:1px solid var(--border);
}
.blog-post__img img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.blog-post__title{
  font-size:19px;
  font-weight:800;
  color: var(--text-0);
  margin: 0 0 10px;
}
.blog-post__text{
  font-size:13.5px;
  line-height:2;
  color: var(--text-1);
  margin: 0 0 22px;
  white-space: pre-line;
}
.blog-post__back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color: var(--blue-bright);
}
.blog-post__back svg{ width:16px; height:16px; }

/* =========================================================
   Glass panel generic (used for account cards etc.)
   ========================================================= */
.panel{
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px);
  padding: 18px;
}

/* =========================================================
   Bottom glass navigation — mirrors the reference screenshot
   ========================================================= */
.bottom-nav{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:50;
  width:100%;
  max-width:560px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(38,43,61,0.92) 40%, rgba(38,43,61,0));
  pointer-events:none;
  box-sizing:border-box;
}
.bottom-nav > *{ pointer-events:auto; }

.nav-side{
  flex:none;
  width:58px; height:58px;
  border-radius:50%;
  display:grid; place-items:center;
  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  color: var(--text-1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.12);
  transition: all .2s ease;
}
.nav-side svg{ width:23px; height:23px; }
.nav-side.is-active,
.nav-side:hover{
  color:#fff;
  border-color: rgba(79,195,255,0.55);
  box-shadow: var(--shadow-blue-soft), inset 0 1px 0 rgba(255,255,255,0.16);
}
.nav-side.avatar{
  padding:2px;
  overflow:visible; /* برای این‌که نقطه‌ی قرمز سبدخرید (.cart-dot) روی لبه‌ی دایره قابل دیدن باشه */
  position:relative;
}

/* نقطه‌ی قرمز کوچک روی آیکون حساب کاربری — یعنی سبد خرید کاربر خالی نیست */
.cart-dot{
  position:absolute;
  top:2px;
  right:2px;
  width:11px; height:11px;
  border-radius:50%;
  background:#ff3b57;
  border:2px solid var(--bg-0);
  box-shadow:0 0 6px 1px rgba(255,59,87,0.75);
  z-index:3;
}
.nav-side.avatar .avatar-fill{
  width:100%; height:100%; border-radius:50%;
  background: linear-gradient(145deg, var(--violet), var(--blue));
  display:grid; place-items:center;
  font-size:13px; font-weight:700; color:#fff;
  font-family:'Space Grotesk', sans-serif;
}

.nav-pill{
  flex:1 1 auto;
  min-width:0;
  max-width:400px;
  display:flex;
  align-items:center;
  gap:3px;
  padding:7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.055);
  border:1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  box-shadow: 0 14px 38px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.14);
}
.nav-pill__item{
  position:relative;
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding: 11px 10px;
  border-radius: 999px;
  font-size:11.5px;
  font-weight:600;
  white-space:nowrap;
  color: var(--text-1);
  cursor:pointer;
  transition: color .2s ease;
}
.nav-pill__item svg{ width:22px; height:22px; }
.nav-pill__item.is-active{
  color:#eaf8ff;
  background: linear-gradient(160deg, rgba(47,143,255,0.92), rgba(79,195,255,0.6));
  box-shadow: 0 0 20px rgba(47,143,255,0.6), inset 0 0 0 1px rgba(255,255,255,0.22);
}
.nav-pill__item.is-active svg{ filter: drop-shadow(0 0 6px rgba(255,255,255,0.5)); }

/* =========================================================
   Misc: empty states, buttons, headings
   ========================================================= */
.hero-note{
  padding: 4px 18px 0;
  color: var(--text-1);
  font-size:12.5px;
  line-height:1.9;
}
.hero-note b{ color: var(--text-0); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-size:13.5px; font-weight:700;
  cursor:pointer;
  border:1px solid transparent;
}
.btn--primary{
  color:#03121e;
  background: linear-gradient(135deg, var(--blue-bright), var(--blue));
  box-shadow: var(--shadow-blue-soft);
}
.btn--ghost{
  color: var(--text-0);
  background: var(--panel);
  border-color: var(--border);
}

.page-title{
  padding: 18px 18px 4px;
  font-size:19px;
  font-weight:800;
}
.page-sub{
  padding: 0 18px 8px;
  color: var(--text-1);
  font-size:12.5px;
}
/* صفحه‌ی «ویژه»: سرتیتر با رنگِ طلاییِ متفاوت از بقیه‌ی صفحات */
.page-title--featured{
  color: var(--gold-soft);
  display:flex; align-items:center; gap:8px;
}
.page-title--featured svg{ width:20px; height:20px; color: var(--gold); }

/* پیجینیشن فروشگاه — به‌جای رندر کردنِ همه‌ی آگهی‌ها روی یک صفحه (که با
   زیادشدن تعداد آگهی‌ها دقیقاً همون چیزیه که سایت رو کند می‌کنه)، هر صفحه
   فقط یک بخش محدود رو نشون می‌ده. */
.pager{
  display:flex; align-items:center; justify-content:center;
  gap:8px; padding: 6px 18px 18px;
}
.pager__link{
  min-width:36px; height:36px; padding:0 10px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  background: var(--panel);
  border:1px solid var(--border);
  color: var(--text-1);
  font-size:12.5px; font-weight:600;
  text-decoration:none;
}
.pager__link.is-active{
  background: var(--blue-bright);
  border-color: var(--blue-bright);
  color:#0b0c22;
}
.pager__link.is-disabled{
  opacity:.4; pointer-events:none;
}

@media (max-width:380px){
  .nft-card{ width:180px; }
  .post-ad{ padding:9px 11px; font-size:11.5px; }
  .brand{ font-size:13px; }
  .brand__mark{ width:26px; height:26px; font-size:13px; }
  .search{ max-width:150px; padding:8px 10px; }
}

/* =========================================================
   پنجره‌ی جزئیات کامل NFT (با کلیک روی کارت باز می‌شه)
   ========================================================= */
.nft-modal{
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
}
.nft-modal[hidden]{ display: none; }
.nft-modal__backdrop{
  position: absolute; inset: 0;
  background: rgba(10,12,20,0.72);
  backdrop-filter: blur(4px);
}
.nft-modal__panel{
  position: relative;
  width: 100%; max-width: 420px;
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, rgba(44,49,68,0.98), rgba(30,34,49,0.99));
  border: 1px solid rgba(255,255,255,0.08);
  border-bottom: none;
  animation: nftModalUp .25s ease;
}
@media (min-width:460px){
  .nft-modal{ align-items:center; }
  .nft-modal__panel{ border-radius: 22px; border-bottom: 1px solid rgba(255,255,255,0.08); }
}
@keyframes nftModalUp{ from{ transform: translateY(24px); opacity:0; } to{ transform:none; opacity:1; } }
.nft-modal__close{
  position: absolute; top: 12px; left: 12px; z-index: 3;
  width: 30px; height: 30px; border-radius: 999px;
  background: rgba(20,22,32,0.6); border: 1px solid rgba(255,255,255,0.14);
  color: var(--text-1); font-size: 18px; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
}
.nft-modal__art{
  position: relative;
  height: 168px;
  display: grid; place-items: center;
  overflow: hidden;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(160deg, #2f8fff, #262b3d);
}
.nft-modal__art img,
.nft-modal__art video,
.nft-modal__art .nft-card__lottie{
  position: relative; z-index: 1;
  width: 52%; height: 52%; object-fit: contain;
}
.nft-modal__art .nft-card__lottie svg{ width:100% !important; height:100% !important; }
.nft-modal__art .nft-card__lottie-fallback{
  position:absolute; inset:0; margin:auto;
  z-index:1;
  width:52%; height:52%;
  object-fit:contain; object-position:center center;
}
.nft-modal__pattern{
  position: absolute; inset: 0;
  z-index: 0;
  background-repeat: repeat;
  background-size: 58px 58px;
  opacity: .26;
}
.nft-modal__body{ padding: 13px 18px 20px; }
.nft-modal__title{ font-size: 16px; font-weight: 800; margin: 0 0 2px; text-align:center; }
.nft-modal__col{ font-size: 11.5px; color: var(--text-2); margin: 0 0 10px; text-align:center; }
.nft-modal__desc{
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-1);
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  margin: 0 0 10px;
  max-height: 84px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.nft-modal__rows{
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
}
.nft-modal__row{
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nft-modal__row:last-child{ border-bottom: none; }
.nft-modal__row span{ color: var(--text-2); }
.nft-modal__row b{ color: var(--text-1); font-weight: 600; }
.nft-modal__row i{ color: var(--blue-bright); font-style: normal; font-size: 11px; margin-right: 4px; background: rgba(79,195,255,0.12); padding: 2px 6px; border-radius: 999px; }
.nft-modal__price{
  font-family: 'Space Grotesk', sans-serif;
  font-size: 21px; font-weight: 800; color: var(--blue-bright);
  text-align: center;
}
.nft-modal__price span{ font-size: 13px; color: var(--text-2); font-family: inherit; margin-right: 5px; }

/* آیتم سبد خرید (account.php) — کارت NFT معمولی + دکمه‌ی حذف روی گوشه‌اش */
.cart-item{ position:relative; }
.cart-item__remove{
  position:absolute;
  top:8px; left:8px;
  z-index:5;
  width:26px; height:26px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(20,22,32,0.75);
  backdrop-filter:blur(6px);
  color:#fff;
  font-size:16px;
  line-height:1;
  display:grid; place-items:center;
  cursor:pointer;
}
.cart-item__remove:hover{ background:rgba(255,59,87,0.65); border-color:rgba(255,59,87,0.7); }

/* دکمه‌ی خرید — زیرِ قیمت، تمام‌عرض، آبیِ توپر مثل نمونه‌ی طراحی */
.nft-modal__buy{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  margin-top:16px;
  padding:14px 18px;
  border-radius:999px;
  border:none;
  background: var(--blue);
  color:#fff;
  font-size:14.5px; font-weight:800;
  text-decoration:none;
  cursor:pointer;
  box-shadow: var(--shadow-blue-soft);
  transition: transform .15s ease, background .15s ease;
}
.nft-modal__buy:hover{ background: var(--blue-bright); transform: translateY(-1px); }
.nft-modal__buy svg{ flex:none; width:17px; height:17px; }
/* حالت «تو سبد خریدته» — بعد از کلیک روی خرید. عمداً سبزِ توپر (نه فقط
   حاشیه‌ی رنگی) تا واضح باشه این دیگه یک دکمه‌ی «برو به سبد خرید»ه، نه
   صرفاً یک نشونه‌ی وضعیت. */
.nft-modal__buy.is-added{
  background: var(--green);
  color:#fff;
  border:none;
  box-shadow: 0 8px 30px rgba(46,204,113,0.28);
}
.nft-modal__buy.is-added:hover{ background: var(--green-bright); }
.nft-modal__buy.is-loading{ opacity:.65; pointer-events:none; }

/* توستِ بالای صفحه — پیامِ کوتاهِ سبزِ «به سبد خرید اضافه شد» بعد از کلیکِ
   خرید (نگاه کن به assets/js/nft-modal.js: showToast). روی همه‌ی صفحات
   در دسترسه چون خودِ کانتینرش تو includes/footer.php است. */
.nft-toast{
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%) translateY(-140%);
  z-index: 9999;
  max-width: calc(100% - 32px);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nft-toast.is-visible{
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.nft-toast--success{ background: var(--green); }
.nft-toast--error{ background: #ff3b57; }

/* ردیفِ «خرید» + «قیمت پیشنهادی» کنارِ هم — دکمه‌ی خرید عریض، دکمه‌ی
   پیشنهاد کوچیک/مربعی و رنگش (بنفش) عمداً متفاوت از آبیِ خرید است. */
.nft-modal__actions{ display:flex; align-items:center; gap:8px; margin-top:16px; }
.nft-modal__actions[hidden]{ display:none; }
.nft-modal__actions .nft-modal__buy{ margin-top:0; flex:1.6; }
.nft-modal__offer{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:5px;
  padding:11px 10px;
  border-radius:999px;
  border:1px solid rgba(139,92,246,0.45);
  background: rgba(139,92,246,0.14);
  color: var(--violet);
  font-size:11.5px; font-weight:800;
  white-space:nowrap;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease;
}
.nft-modal__offer[hidden]{ display:none; }
.nft-modal__offer:hover{ background: rgba(139,92,246,0.26); transform: translateY(-1px); }
.nft-modal__offer svg{ flex:none; width:14px; height:14px; }
.nft-modal__offer span{ overflow:hidden; text-overflow:ellipsis; }

/* موبایل: اگه جا کم بیاد، فقط آیکون بمونه و نوشته مخفی بشه */
@media (max-width: 380px){
  .nft-modal__offer{ flex:none; width:40px; padding:0; }
  .nft-modal__offer span{ display:none; }
}

/* روی آگهیِ خودِ کاربر، به‌جای دکمه‌های خرید/پیشنهاد — یک ردیفِ کوچیک و
   جمع‌وجور: پیام + دکمه‌ی «ویرایش آگهی» کنارِ هم */
.nft-modal__owner-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:16px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(139,92,246,0.30);
  background: rgba(139,92,246,0.08);
}
.nft-modal__owner-row[hidden]{ display:none; }
.nft-modal__owner-note{
  color: var(--violet);
  font-size:12px; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.nft-modal__edit-btn{
  flex:none;
  display:flex; align-items:center; gap:5px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(139,92,246,0.5);
  background: rgba(139,92,246,0.18);
  color: var(--violet);
  font-size:11.5px; font-weight:800;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease;
}
.nft-modal__edit-btn:hover{ background: rgba(139,92,246,0.30); transform: translateY(-1px); }
.nft-modal__edit-btn svg{ flex:none; width:13px; height:13px; }

/* =========================================================
   پنجره‌ی کوچکِ «قیمت پیشنهادی»
   ========================================================= */
.offer-modal{
  position: fixed; inset: 0; z-index: 110;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.offer-modal[hidden]{ display: none; }
.offer-modal__backdrop{
  position: absolute; inset: 0;
  background: rgba(10,12,20,0.72);
  backdrop-filter: blur(4px);
}
.offer-modal__panel{
  position: relative;
  width: 100%; max-width: 360px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(44,49,68,0.98), rgba(30,34,49,0.99));
  border: 1px solid rgba(255,255,255,0.08);
  padding: 20px 18px 18px;
  animation: nftModalUp .2s ease;
}
.offer-modal__title{ margin:0 0 8px; font-size:16px; font-weight:800; text-align:center; color: var(--violet); }
.offer-modal__sub{ margin:0 0 16px; font-size:12px; line-height:1.9; color: var(--text-1); text-align:center; }
.offer-modal__label{ display:block; font-size:11.5px; color: var(--text-2); margin:0 0 6px; }
.offer-modal__input{
  width:100%; margin-bottom:14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 12px;
  color: var(--text-0);
  font-size: 13px;
  font-family: inherit;
}
.offer-modal__input:focus{ outline:none; border-color: rgba(139,92,246,0.55); }
.offer-modal__fee-note{ margin:-8px 0 14px; font-size:11px; color: var(--text-2); text-align:center; min-height:14px; }
.offer-modal__note{ margin:0 0 4px; font-size:11.5px; color: var(--text-2); text-align:center; }
.offer-modal__status{ min-height:16px; margin:0 0 10px; font-size:11.5px; text-align:center; color: var(--blue-bright); }
.offer-modal__status.is-error{ color:#ff6b81; }
.offer-modal__submit{
  display:block; width:100%;
  padding:13px 18px;
  border-radius:999px;
  border:none;
  background: var(--violet);
  color:#fff;
  font-size:14px; font-weight:800;
  cursor:pointer;
  box-shadow: var(--shadow-violet);
  transition: transform .15s ease, background .15s ease;
}
.offer-modal__submit:hover{ background: var(--violet-soft); transform: translateY(-1px); }
.offer-modal__submit:disabled{ opacity:.6; pointer-events:none; }

/* =========================================================
   کارتِ پیشنهاد قیمت (offers.php) — دریافتی/ارسالی
   ========================================================= */
.offer-card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.offer-card__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.offer-card__title{ margin:0; font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.offer-card__badge{
  flex:none;
  font-size:10.5px; font-weight:700;
  padding:3px 9px; border-radius:999px;
  border:1px solid transparent;
}
.offer-card__badge.is-pending{ color: var(--blue-bright); background: rgba(79,195,255,0.12); border-color: rgba(79,195,255,0.35); }
.offer-card__badge.is-success{ color:#4ade80; background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.35); }
.offer-card__badge.is-danger{ color:#ff6b81; background: rgba(255,107,129,0.12); border-color: rgba(255,107,129,0.35); }
.offer-card__badge.is-muted{ color: var(--text-2); background: rgba(255,255,255,0.05); border-color: var(--border-soft); }
.offer-card__meta{ margin:8px 0 0; font-size:12px; color: var(--text-1); }
.offer-card__meta b{ color: var(--text-0); }
.offer-card__actions{ display:flex; gap:8px; margin-top:10px; }
.offer-card__btn{
  flex:1;
  padding:9px 10px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:12px; font-weight:700;
  cursor:pointer;
}
.offer-card__btn--accept{ background: var(--blue); color:#fff; }
.offer-card__btn--accept:hover{ background: var(--blue-bright); }
.offer-card__btn--reject{ background: transparent; border-color: var(--border); color: var(--text-1); }
.offer-card__btn--reject:hover{ border-color: rgba(255,107,129,0.5); color:#ff6b81; }
.offer-card__btn:disabled{ opacity:.6; pointer-events:none; }

/* هایلایتِ موقتِ کارتی که از لینکِ مستقیمِ پیامِ ربات (?offer=ID) بهش رسیدیم */
.offer-card--highlight{
  animation: offerCardGlow 1.8s ease 2;
  border-color: rgba(139,92,246,0.7);
}
@keyframes offerCardGlow{
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 3px rgba(139,92,246,0.35); }
}

/* =========================================================
   نوار فیلترِ بازار (همه / کالکشن / بکگراند / نماد)
   جایگزینِ چیپ‌های قبلیِ بالای فروشگاه/صفحه‌ی اصلی — گزینه‌های هر فیلتر
   مستقیماً از روی آگهی‌های واقعاً ثبت‌شده ساخته می‌شن (اسکریپت: market-filters.js)
   ========================================================= */
.market-filters{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding: 14px 16px 4px;
  scrollbar-width:none;
}
.market-filters::-webkit-scrollbar{ display:none; }
.mf-btn{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin:0;
  padding: 7px 14px;
  border-radius: 999px;
  font-size:12.5px;
  font-family:inherit;
  -webkit-appearance:none;
  appearance:none;
  color: var(--text-1);
  border:1px solid var(--border);
  background: var(--panel);
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
  transition: all .18s ease;
}
.mf-btn svg{ width:13px; height:13px; flex:none; opacity:.7; }
.mf-btn.is-active,
.mf-btn.has-value,
.mf-btn:hover{
  color:#eaf6ff;
  border-color: rgba(79,195,255,0.55);
  background: linear-gradient(135deg, rgba(47,143,255,0.18), rgba(139,92,246,0.12));
  box-shadow: var(--shadow-blue-soft);
}
.mf-btn.has-value svg{ opacity:1; }

/* =========================================================
   نوار فیلترِ صفحه‌ی اصلی — دکمه‌ها دقیقاً هم‌اندازه‌ی حالتِ قبلی (چیپِ
   کوچیک، نه کپسولِ بزرگ)؛ فقط کل ردیف داخلِ یک قابِ شیشه‌ای گرد با یک
   بازتابِ نوریِ ملایم روی گوشه‌ی بالا گذاشته شده — دقیقاً مثلِ نمونه‌ای
   که فرستاده شد. فقط روی صفحه‌ی اصلی (body.page-home)؛ فروشگاه
   (store.php) با همون چیپ‌های قبلی دست‌نخورده می‌مونه.
   ========================================================= */
.page-home .market-filters{
  position:relative;
  margin: 4px 16px 0;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 10px 28px -8px rgba(0,0,0,0.4);
  overflow:hidden;
}

.page-home .mf-btn{
  position:relative;
  z-index:1;
}
.page-home .mf-btn.is-active,
.page-home .mf-btn.has-value,
.page-home .mf-btn:hover{
  border-color: rgba(79,195,255,0.6);
  background: linear-gradient(135deg, var(--blue), var(--blue-bright) 120%);
  box-shadow: 0 6px 20px -4px rgba(47,143,255,0.55), inset 0 1px 0 rgba(255,255,255,0.18);
}

.mf-btn__count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:999px;
  background: var(--blue-bright);
  color:#04141c;
  font-size:10px;
  font-weight:800;
  font-family:'Space Grotesk', sans-serif;
}

/* =========================================================
   صفحه‌ی اصلی — چیدمان جمع‌وجورتر
   فاصله‌ی بخش «NFTهای آگهی‌شده» از نوار فیلترهای بالا (همه/کالکشن/...)
   کم شده و عنوانش نزدیک‌تر به گزینه‌ها اومده، فاصله‌ی عنوان/مشاهده‌ی‌همه
   تا خودِ کارت‌ها نصف شده، و فاصله‌ی کارت‌ها تا راهنمای «برای دیدن بقیه
   بکش» هم کمتر شده — فقط روی صفحه‌ی اصلی (کلاس page-home روی body)، بدون
   تاثیر روی فروشگاه/حساب کاربری/سایر صفحات.
   ========================================================= */
.page-home .market-filters{ margin-bottom: 2px; }
/* فاصله‌ی بخش‌ها از هم («برای دیدن بقیه بکش» تا ردیفِ دومِ کاروسل)
   حدود ۷۰٪ کمتر از قبل */
.page-home .section{ padding: 2px 0 1px; }
/* فاصله‌ی عنوان «NFTهای آگهی‌شده» تا خودِ کارت‌ها، ۴۰٪ کمتر از قبل */
.page-home .section__head{ padding: 0 18px 2px; }
.page-home .carousel-wrap{ padding: 1px 0 2px 0; }
.page-home .carousel{
  padding-top: 2px;
  /* حاشیه‌ی کناریِ کاروسل از ۴۰px به ۱۶px (هم‌اندازه‌ی بقیه‌ی سایت) کم شد
     تا اون فضای خالیِ اولیه بین سمت راست سایت و اولین/آخرین کارت از بین
     بره و همه‌چیز منظم و هم‌تراز باشه */
  padding-left: 16px;
  padding-right: 16px;
  /* فاصله‌ی بین خودِ کارت‌های کاروسل، ۳۰٪ کمتر (۱۶px → ۱۱px) */
  gap: 11px;
}
.page-home .carousel-hint{ padding-top: 2px; }
/* اندازه‌ی کارت‌های هر دو ردیفِ NFTهای آگهی‌شده — دقیقاً برابر با اندازه‌ای
   که یک گرید ۲ ستونه با فاصله‌ی 14px بین‌شون طبیعتاً تولید می‌کنه، تا با
   بقیه‌ی سایت (فروشگاه/بازار) هم‌اندازه بمونن. */
.page-home .carousel .nft-card{ width: calc((min(100vw, 560px) - 32px - 14px) / 2); }
.page-home .carousel .nft-card__art{ height: 105px; font-size: 26px; }

/* =========================================================
   صفحه‌ی بازار — عنوان «بازار» و تصویر/تب‌های وسط، کاملاً
   چسبیده به بالای صفحه (زیر نوار جست‌وجو)، بدون فاصله‌ی اضافه
   ========================================================= */
.page-market .page-title{ padding: 6px 18px 0; }
.page-market #marketHeatmap.section{ padding: 0; }

/* پنجره‌ی پایین‌رونده‌ی هر فیلتر (کالکشن/بکگراند/نماد) */
.mf-sheet{
  position: fixed; inset: 0; z-index: 110;
  display: flex; align-items: flex-end; justify-content: center;
}
.mf-sheet[hidden]{ display:none; }
.mf-sheet__backdrop{
  position: absolute; inset: 0;
  background: rgba(10,12,20,0.72);
  backdrop-filter: blur(4px);
}
.mf-sheet__panel{
  position: relative;
  width: 100%; max-width: 420px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, rgba(44,49,68,0.98), rgba(30,34,49,0.99));
  border: 1px solid rgba(255,255,255,0.08);
  border-bottom: none;
  animation: nftModalUp .25s ease;
}
@media (min-width:460px){
  .mf-sheet{ align-items:center; }
  .mf-sheet__panel{ border-radius: 22px; border-bottom: 1px solid rgba(255,255,255,0.08); max-height: 76vh; }
}
.mf-sheet__handle{
  width:36px; height:4px; border-radius:999px;
  background: rgba(255,255,255,0.18);
  margin: 10px auto 2px;
  flex:none;
}
.mf-sheet__head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 16px 4px;
  flex:none;
}
.mf-sheet__title{ font-size:15.5px; font-weight:800; color: var(--text-0); margin:0; }
.mf-sheet__close{
  width: 28px; height: 28px; border-radius: 999px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-1); font-size: 17px; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
}
.mf-sheet__search{
  flex:none;
  display:flex; align-items:center; gap:8px;
  margin: 10px 16px 6px;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-soft);
}
.mf-sheet__search svg{ width:16px; height:16px; flex:none; color: var(--text-2); }
.mf-sheet__search input{
  flex:1; min-width:0;
  background:transparent; border:none; outline:none;
  color: var(--text-0); font-size:13.5px; font-family:inherit;
}
.mf-sheet__search input::placeholder{ color: var(--text-2); }

.mf-sheet__list{
  flex:1;
  overflow-y:auto;
  padding: 2px 8px 8px;
}
.mf-sheet__empty{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  color: var(--text-2); font-size:13px;
  padding: 24px;
}

.mf-item{
  display:flex; align-items:center; gap:10px;
  padding: 9px 8px;
  border-radius: 12px;
  cursor:pointer;
  transition: background .12s ease;
}
.mf-item:hover{ background: rgba(255,255,255,0.04); }
.mf-item__check{
  flex:none;
  width:20px; height:20px; border-radius:6px;
  border:1.5px solid var(--border);
  display:grid; place-items:center;
  color:#04141c;
  transition: all .15s ease;
}
.mf-item__check svg{ width:13px; height:13px; opacity:0; transform:scale(.6); transition: all .15s ease; }
.mf-item.is-checked .mf-item__check{
  background: var(--blue-bright);
  border-color: var(--blue-bright);
}
.mf-item.is-checked .mf-item__check svg{ opacity:1; transform:scale(1); }

.mf-item__icon{
  flex:none;
  width:36px; height:36px;
  border-radius:10px;
  background-color: rgba(255,255,255,0.05);
  background-repeat:no-repeat;
  background-position:center;
  /* رستری‌شده‌ی نمادهای Lottie (symbol-pattern.js) از قبل با حاشیه‌ی مساوی
     دورِ خودش تولید می‌شه، برای همین این آیکون نیازی به کوچیک‌کردنِ اضافه نداره */
  background-size: 100%;
  border: 1px solid var(--border-soft);
  overflow:hidden;
  display:grid; place-items:center;
}
.mf-item__icon--swatch{ background-size:cover; }
.mf-item__icon img,
.mf-item__icon video{
  width:100%; height:100%; object-fit:cover;
}
.mf-item__icon .nft-card__lottie{ width:100%; height:100%; }
.mf-item__icon .nft-card__lottie svg{ width:100% !important; height:100% !important; }

.mf-item__name{
  flex:1; min-width:0;
  font-size:13.5px; color: var(--text-0);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mf-item__count{
  flex:none;
  font-size:12px; color: var(--text-2);
  font-family:'Space Grotesk', sans-serif;
}

.mf-sheet__foot{
  flex:none;
  display:flex; align-items:center; gap:10px;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255,255,255,0.06);
}
.mf-sheet__clear{
  flex:none;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-1);
  font-size: 13.5px; font-weight:700; font-family:inherit;
  cursor:pointer;
}
.mf-sheet__clear:hover{ color:#fff; border-color: rgba(255,255,255,0.3); }
.mf-sheet__apply{
  flex:1;
  padding: 12px 16px;
  border-radius: 999px;
  border:none;
  background: var(--blue);
  color:#fff;
  font-size: 13.5px; font-weight:800; font-family:inherit;
  cursor:pointer;
  box-shadow: var(--shadow-blue-soft);
  transition: background .15s ease, transform .15s ease;
}
.mf-sheet__apply:hover{ background: var(--blue-bright); transform: translateY(-1px); }

/* =========================================================
   فروشگاه (shop.php) — بنرهای فقط-لینک بالای صفحه + گرید
   محصولاتِ قابل‌سفارش از خودِ سایت + صفحه‌ی سفارش/پرداخت
   ========================================================= */
.shop-banners{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding: 4px 16px 6px;
}
.shop-banner{
  display:block;
  border-radius: var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow-blue-soft);
  transition: transform .18s ease, border-color .18s ease;
}
.shop-banner:hover{ transform: translateY(-2px); border-color: rgba(79,195,255,0.5); }
.shop-banner__art{ display:block; width:100%; aspect-ratio: 16/7; overflow:hidden; }
.shop-banner__art img{ width:100%; height:100%; object-fit:cover; display:block; }
.shop-banner__cap{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding: 10px 14px 12px;
}
.shop-banner__cap b{ font-size:13.5px; color: var(--text-0); }
.shop-banner__cap span{ font-size:12px; color: var(--text-1); line-height:1.8; }

.shop-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 0 16px;
}
.shop-card{
  display:block;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: linear-gradient(155deg, rgba(79,195,255,0.55), rgba(139,92,246,0.35) 45%, rgba(255,255,255,0.05) 100%);
  transition: transform .2s ease;
}
.shop-card:hover{ transform: translateY(-2px); }
.shop-card__art{
  height:105px;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(44,49,68,0.92), rgba(34,39,55,0.95));
}
.shop-card__art img{ width:100%; height:100%; object-fit:cover; display:block; }
.shop-card__body{
  padding: 10px 12px 12px;
  border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
  background: linear-gradient(180deg, rgba(44,49,68,0.92), rgba(34,39,55,0.95));
}
.shop-card__title{
  font-size:13px; font-weight:700; color: var(--text-0);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.shop-card__desc{
  margin-top:4px;
  font-size:11.5px; color: var(--text-1); line-height:1.7;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.shop-card__foot{
  margin-top:8px;
  display:flex; align-items:center; justify-content:space-between;
}
.shop-card__price{ font-size:12.5px; font-weight:800; color:#eaf6ff; }
.shop-card__price span{ font-size:10.5px; font-weight:600; color: var(--text-2); margin-right:3px; }
.shop-card__buy{
  font-size:11px; font-weight:700; color:#03121e;
  padding:6px 12px; border-radius:999px;
  background: linear-gradient(135deg, var(--blue-bright), var(--blue));
}

/* صفحه‌ی سفارش/پرداختِ یک محصول */
.shop-order{
  margin: 0 16px;
  text-align:center;
}
.shop-order__art{
  width:100%; max-width:320px; margin:0 auto 16px;
  border-radius: var(--radius-lg); overflow:hidden;
  border:1px solid var(--border);
}
.shop-order__art img{ width:100%; display:block; }
.shop-order__title{ font-size:16px; font-weight:800; margin:0 0 8px; color: var(--text-0); }
.shop-order__desc{ font-size:12.5px; color: var(--text-1); line-height:1.9; margin:0 0 14px; }
.shop-order__price{ font-size:19px; font-weight:800; color:#eaf6ff; margin-bottom:18px; }
.shop-order__price span{ font-size:12px; font-weight:600; color: var(--text-2); margin-right:4px; }
.shop-order__buy{ width:100%; padding:14px; border-radius:999px; border:none; font-size:14px; cursor:pointer; }
.shop-order__buy:not(a){ display:flex; }
.shop-order form{ display:block; }
.shop-order__status{
  font-size:12.5px; line-height:1.9; padding:12px 14px;
  border-radius: var(--radius-md); margin-bottom:16px;
}
.shop-order__status--ok{
  background: rgba(53,214,138,0.12); color:#8ff0c1; border:1px solid rgba(53,214,138,0.35);
}
.shop-order__status--pending{
  background: rgba(255,193,7,0.1); color:#ffd479; border:1px solid rgba(255,193,7,0.3);
}