/* =========================================================================
 * MIFA Gold Board — تابلوی قیمت (پریمیوم، شیشه‌ای، مدرن)
 * فونت Vazirmatn + گلسمورفیسم + اکسان طلایی. RTL، واکنش‌گرا، اعداد tabular.
 * ========================================================================= */

/* ---- فونت (با fallback امن به فونت قالب) ---- */
@font-face{
  font-family:'Vazirmatn';
  src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight:700; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src:url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-ExtraBold.woff2') format('woff2');
  font-weight:800; font-display:swap;
}

.mifa-board-container{
  --mifa-gold:#c9a227;
  --mifa-gold-soft:#e6cf8b;
  --mifa-gold-deep:#a87d18;
  --mifa-ink:#262320;
  --mifa-muted:#8d8678;
  --mifa-up:#16a35a;
  --mifa-down:#e0533d;

  display:flex; flex-wrap:wrap; gap:24px;
  direction:rtl;
  font-family:'Vazirmatn','dana','IRANSans','Yekan',Tahoma,sans-serif;
  max-width:900px; margin:40px auto; padding:16px;
  justify-content:center;
}

/* ---- پنل شیشه‌ای ---- */
.mifa-section{
  position:relative;
  flex:1 1 360px; max-width:415px;
  background:linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,.28));
  backdrop-filter:blur(28px) saturate(150%);
  -webkit-backdrop-filter:blur(28px) saturate(150%);
  border:1px solid rgba(255,255,255,.55);
  border-radius:26px;
  padding:24px 20px 16px;
  box-shadow:
    0 22px 60px rgba(60,50,20,.18),
    inset 0 1px 0 rgba(255,255,255,.75);   /* های‌لایت لبهٔ بالا = حس شیشه */
  overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}

/* نوار طلایی بالای پنل */
.mifa-section::before{
  content:''; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,var(--mifa-gold-soft),var(--mifa-gold),var(--mifa-gold-soft));
}
/* درخشش نرم طلایی گوشه (مدرن) */
.mifa-section::after{
  content:''; position:absolute; top:-40px; left:-40px; width:160px; height:160px;
  background:radial-gradient(circle, rgba(201,162,39,.18), transparent 70%);
  pointer-events:none;
}

.mifa-section:hover{
  transform:translateY(-5px);
  box-shadow:0 30px 70px rgba(60,50,20,.24), inset 0 1px 0 rgba(255,255,255,.8);
}

/* ---- سرستون ---- */
.mifa-section-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px;
}
.mifa-section-head h3{
  margin:0; font-size:20px; font-weight:800; padding-bottom:8px; position:relative;
  background:linear-gradient(90deg,var(--mifa-gold-deep),var(--mifa-gold),var(--mifa-gold-soft));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--mifa-gold-deep); /* fallback */
}
.mifa-section-head h3::after{
  content:''; position:absolute; right:0; bottom:0; width:48px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--mifa-gold),var(--mifa-gold-soft));
}

/* نشانگر «زنده» */
.mifa-live{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; color:var(--mifa-up);
  background:rgba(22,163,90,.1); padding:4px 10px; border-radius:999px;
}
.mifa-live-dot{
  width:8px; height:8px; border-radius:50%; background:var(--mifa-up);
  box-shadow:0 0 0 0 rgba(22,163,90,.6); animation:mifa-pulse 1.8s infinite;
}
@keyframes mifa-pulse{
  0%{box-shadow:0 0 0 0 rgba(22,163,90,.55);}
  70%{box-shadow:0 0 0 7px rgba(22,163,90,0);}
  100%{box-shadow:0 0 0 0 rgba(22,163,90,0);}
}

/* ---- شبکهٔ آیتم‌ها ---- */
.mifa-board{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ---- آیتم شیشه‌ای ---- */
.mifa-item{
  position:relative;
  background:linear-gradient(160deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(201,162,39,.22);
  border-radius:16px;
  padding:14px 12px 12px; text-align:center;
  box-shadow:0 6px 18px rgba(60,50,20,.08), inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .25s ease, box-shadow .25s ease, background .4s ease;
}
.mifa-item:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(60,50,20,.16), inset 0 1px 0 rgba(255,255,255,.9);
}

.mifa-item .value{
  display:block; font-size:18px; font-weight:800; color:var(--mifa-ink);
  line-height:1.25; letter-spacing:.2px;
  font-feature-settings:'tnum' 1; font-variant-numeric:tabular-nums;
}
.mifa-item .title{ display:block; font-size:12px; color:var(--mifa-muted); margin-top:5px; font-weight:600; }

/* چیپ درصد تغییر */
.mifa-item .change{
  display:inline-block; min-height:16px; margin-top:7px;
  font-size:11px; font-weight:700; padding:1px 8px; border-radius:999px;
  opacity:0; transition:opacity .3s ease;
}
.mifa-item .change.show{ opacity:1; }
.mifa-item.up   .change{ color:var(--mifa-up);   background:rgba(22,163,90,.12); }
.mifa-item.down .change{ color:var(--mifa-down); background:rgba(224,83,61,.12); }

/* فلش موقتِ تغییر قیمت */
.mifa-item.flash-up   { background:linear-gradient(160deg, rgba(22,163,90,.14), rgba(22,163,90,.06)); border-color:rgba(22,163,90,.45); }
.mifa-item.flash-up   .value{ color:var(--mifa-up); }
.mifa-item.flash-down { background:linear-gradient(160deg, rgba(224,83,61,.14), rgba(224,83,61,.06)); border-color:rgba(224,83,61,.45); }
.mifa-item.flash-down .value{ color:var(--mifa-down); }

/* ---- پاورقی ---- */
.mifa-updated{
  margin-top:14px; text-align:center; font-size:11px; color:var(--mifa-muted);
  border-top:1px dashed rgba(201,162,39,.28); padding-top:10px;
}
.mifa-updated time{ font-weight:700; color:var(--mifa-ink); }

/* ---- شورت‌کدهای تکی داخل متن ---- */
.mifa-price{
  font-family:'Vazirmatn','dana',Tahoma,sans-serif;
  font-weight:700; padding:5px 12px; border-radius:9px; display:inline-block;
  background:rgba(201,162,39,.10); border:1px solid rgba(201,162,39,.28);
  color:var(--mifa-ink,#262320); font-variant-numeric:tabular-nums; transition:all .3s ease;
}
.mifa-flash-up  { background:rgba(22,163,90,.14);  color:#0f7a43; border-color:rgba(22,163,90,.4); }
.mifa-flash-down{ background:rgba(224,83,61,.14);  color:#b23a28; border-color:rgba(224,83,61,.4); }

/* ---- قیمت در دسترس نیست (حالت کهنه) ---- */
.mifa-price-unavailable{
  display:inline-block; color:#b23a28; font-weight:700; font-size:13px;
  background:rgba(224,83,61,.08); border:1px solid rgba(224,83,61,.3);
  padding:5px 12px; border-radius:9px;
}

/* ---- پیام خطا ---- */
#mifa-error-message{
  flex-basis:100%; background:rgba(224,83,61,.1); color:#b23a28;
  border:1px solid rgba(224,83,61,.35); padding:10px 14px; border-radius:12px;
  text-align:center; font-size:13px;
}

/* ---- واکنش‌گرا ---- */
@media (max-width:768px){
  .mifa-board-container{ gap:16px; margin:24px auto; padding:12px; }
  .mifa-section{ flex-basis:100%; max-width:480px; padding:20px 16px 14px; }
  .mifa-section-head h3{ font-size:18px; }
  .mifa-item .value{ font-size:16px; }
}
@media (max-width:360px){ .mifa-board{ grid-template-columns:1fr; } }