/* ===== Scoped: bps- ===== */
@font-face {
  font-family: 'IRANSans';
  src: url('/modules/header-a/storage/fonts/IRANSans.eot');
  src: url('/modules/header-a/storage/fonts/IRANSans.eot?#iefix') format('embedded-opentype'),
       url('/modules/header-a/storage/fonts/IRANSans.woff2') format('woff2'),
       url('/modules/header-a/storage/fonts/IRANSans.woff') format('woff'),
       url('/modules/header-a/storage/fonts/IRANSans.ttf') format('truetype');
  font-style: normal;
  font-weight: 400; /* اگر وزن‌های جدا دارید، @font-face‌های جدا برای 500/700/800 تعریف کنید */
  font-display: swap;
}

.bps-single{
  --bps-max: 1920px;
  --bps-radius: 16px;
  --bps-brand: #5b6cff;
  --bps-brand2:#8a95ff;
  --bps-muted: #6b7280;
  --bps-text:  #111827;
  --bps-card-bg:#ffffff;
  --bps-shadow: 0 6px 22px rgba(17,24,39,.08);
  --bps-shadow-sm: 0 2px 10px rgba(17,24,39,.06);
  --bps-chip-bg:#eef2ff;
  direction: rtl;
  font-family: "IRANSans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--bps-text);
}

.bps-wrap{max-width: var(--bps-max); margin-inline:auto; padding: 16px}

/* کارت اصلی */
.bps-card{
  background: var(--bps-card-bg);
  border-radius: var(--bps-radius);
  box-shadow: var(--bps-shadow);
  overflow: hidden;
  border: 1px solid #eef1ff;
  font-family: iransans;
}

/* هدر تصویر و برچسب دسته */
.bps-hero{position: relative; background:#f3f4f6; aspect-ratio: 16/9; overflow: hidden}
.bps-hero img{width:100%; height:100%; object-fit:cover; display:block}
.bps-cat-badge{
  position:absolute; top:12px; left:12px;
  background:linear-gradient(135deg,var(--bps-brand),var(--bps-brand2));
  color:#fff; font-weight:800; font-size:12px;
  padding:6px 10px; border-radius:999px;
  box-shadow: var(--bps-shadow-sm);
}

/* عنوان و متادیتا */
.bps-header{padding:18px 18px 6px}
.bps-title{margin:0 0 8px; font-size:28px; font-weight:800; line-height:1.5}
.bps-meta{display:flex; gap:10px; align-items:center; flex-wrap:wrap; color:var(--bps-muted); font-size:13px}
.bps-meta .dot{width:4px; height:4px; border-radius:50%; background:#cdd3f9; display:inline-block}

/* متن محتوا */
.bps-content{padding:0 18px 18px; font-size:16px; line-height:1.9}
.bps-content h2{font-size:22px; margin:22px 0 10px; font-weight:800}
.bps-content h3{font-size:19px; margin:18px 0 8px; font-weight:800}
.bps-content p{margin:12px 0}
.bps-content img{max-width:100%; border-radius:12px}
.bps-content blockquote{
  margin:18px 0; padding:14px 16px; background:#fff; border:1px solid #e8ebff;
  border-right:4px solid var(--bps-brand); border-radius:12px; color:#374151
}

/* جداکننده */
.bps-sep{height:1px; background:#eef1ff; margin:10px 18px}
.bps-sep.big{margin-top:18px}

/* قبلی/بعدی */
.bps-prevnext{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:12px 18px}
.pn-card{
  display:flex; flex-direction:column; gap:6px; text-decoration:none; color:#1f2937;
  background:#f9faff; border:1px solid #e8ebff; border-radius:12px; padding:12px;
  box-shadow: var(--bps-shadow-sm); transition: transform .15s ease, box-shadow .15s ease;
}
.pn-card:hover{transform: translateY(-2px); box-shadow: 0 6px 16px rgba(17,24,39,.08)}
.pn-card.disabled{opacity:.55; pointer-events:none}
.pn-card i{font-size:14px; color:var(--bps-brand)}
.pn-card .pn-t{font-size:12px; color:var(--bps-muted)}
.pn-card .pn-ttl{font-weight:700; line-height:1.6}
.pn-card.next{ text-align:left }

/* مرتبط‌ها */
.bps-related{padding:6px 18px 18px}
.bps-related h4{margin:0 0 12px; font-size:18px; font-weight:800}
.bps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.rel-card{background:#fff; border:1px solid #e8ebff; border-radius:14px; overflow:hidden; box-shadow:var(--bps-shadow-sm)}
.rel-thumb{display:block; aspect-ratio:16/9; overflow:hidden}
.rel-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.rel-title{display:block; padding:10px 12px; text-decoration:none; color:#111827; font-weight:700; line-height:1.6}
.rel-title:hover{color:var(--bps-brand)}

.bps-empty{padding:18px; text-align:center; color:var(--bps-muted)}

/* ریسپانسیو */
@media (max-width: 900px){
  .bps-title{font-size:24px}
  .bps-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 600px){
  .bps-prevnext{grid-template-columns:1fr}
  .bps-grid{grid-template-columns:1fr}
}