/**
 * BitPulse — Styles (فاز A)
 * همه رنگ‌ها از CSS Variables — بدون hardcode
 */

/* ─── Design Tokens ──────────────────────────────────────────── */
:root {
  --bp-green:        #02a67f;
  --bp-green-light:  #4ef09d;
  --bp-green-bg:     #02a67f15;
  --bp-green-bg10:   #02a67f1a;
  --bp-red:          #ff5a5a;
  --bp-red-bg:       #ff5a5a1a;
  --bp-gold:         #e7c400;
  --bp-gold-bg:      #e7c40020;

  --bp-text:         #1a1a1a;
  --bp-text-sub:     #555555;
  --bp-text-muted:   #b2b2b2;
  --bp-bg:           #f8f8f8;
  --bp-bg-alt:       #f2f2f2;
  --bp-border:       #e9e9e9;
  --bp-white:        #ffffff;

  --bp-r-sm:   5px;
  --bp-r-md:   8px;
  --bp-r-lg:   16px;
  --bp-r-full: 1000px;

  --bp-ease:   0.18s ease-in-out;
  --bp-shadow: 0 2px 8px rgba(0,0,0,.07);
}

/* ─── Reset داخلی ────────────────────────────────────────────── */
#bp-app { direction: rtl; }
#bp-app *, #bp-app *::before, #bp-app *::after { box-sizing: border-box; }

/* ═══════════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════════ */
.bp-hero {
  background:
    radial-gradient(ellipse 70% 90% at 85% 10%, #4ef09d22 0%, transparent 55%),
    linear-gradient(160deg, #01332c 0%, #024d40 48%, #026b56 100%);
  padding: 2.75rem 0 2.4rem;
  overflow: hidden;
  position: relative;
}

.bp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#ffffff08 1px, transparent 1px),
    linear-gradient(90deg, #ffffff08 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  pointer-events: none;
}

.bp-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  position: relative;
  z-index: 1;
}

.bp-hero__content { flex: 1; min-width: 0; }

.bp-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12px;
  color: #d8ffe9;
  font-weight: 600;
  margin-bottom: 0.85rem;
  background: #ffffff14;
  border: 1px solid #4ef09d55;
  padding: 5px 12px;
  border-radius: var(--bp-r-full);
}

.bp-hero__live-dot {
  width: 7px;
  height: 7px;
  background: var(--bp-green-light);
  border-radius: 50%;
  animation: bp-pulse 2s infinite;
  flex-shrink: 0;
}

@keyframes bp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .45; transform: scale(.75); }
}

.bp-hero__title {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 800;
  color: var(--bp-white);
  font-family: iransansx, sans-serif;
  line-height: 1.45;
  margin-bottom: 0.75rem;
}

.bp-hero__title-accent {
  color: var(--bp-green-light);
}

.bp-hero__desc {
  font-size: 15px;
  color: #e7f6ef;
  line-height: 1.9;
  margin-bottom: 1.4rem;
  max-width: 520px;
}

.bp-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.bp-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 108px;
  padding: 0.65rem 0.9rem;
  background: #ffffff12;
  border: 1px solid #ffffff22;
  border-radius: var(--bp-r-md);
  backdrop-filter: blur(8px);
}

.bp-hero__stat-label {
  font-size: 11px;
  color: #c5e8da;
}

.bp-hero__stat strong {
  color: var(--bp-white);
  font-weight: 700;
  font-size: 15px;
}

.bp-hero__visual {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.bp-hero__radar {
  position: relative;
  width: 180px;
  height: 180px;
}

.bp-hero__radar-ring {
  position: absolute;
  inset: 18px;
  border: 1px solid #4ef09d44;
  border-radius: 50%;
}
.bp-hero__radar-ring + .bp-hero__radar-ring { inset: 42px; border-color: #4ef09d66; }

.bp-hero__radar-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 70%, #4ef09d55 88%, transparent 100%);
  animation: bp-sweep 4s linear infinite;
  -webkit-mask: radial-gradient(circle, transparent 36%, #000 37%);
  mask: radial-gradient(circle, transparent 36%, #000 37%);
}

@keyframes bp-sweep {
  to { transform: rotate(360deg); }
}

.bp-hero__radar-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 58px; height: 58px;
  border-radius: 50%;
  background: linear-gradient(160deg, #04c48f, #017a5c);
  color: var(--bp-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 8px #4ef09d22, 0 8px 24px #01332c88;
}

.bp-hero__topics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  max-width: 240px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* چیپ بدون لینک: برچسب ساده، بدون ظاهر دکمه */
.bp-hero__chip {
  display: inline-block;
  font-size: 11px;
  color: #c5e8da;
  padding: 4px 2px;
}

.bp-hero__chip--link {
  color: #e7f6ef;
  background: #ffffff14;
  border: 1px solid #ffffff22;
  border-radius: var(--bp-r-full);
  padding: 4px 10px;
  text-decoration: none;
  transition: background var(--bp-ease), border-color var(--bp-ease), color var(--bp-ease);
}

.bp-hero__chip--link:hover {
  background: #4ef09d26;
  border-color: #4ef09d88;
  color: var(--bp-white);
}

.bp-hero__chip--link:focus-visible {
  outline: 2px solid var(--bp-green-light);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .bp-hero { padding: 1.75rem 0 1.6rem; }
  .bp-hero__inner { flex-direction: column; gap: 1.5rem; text-align: center; }
  .bp-hero__desc { max-width: 100%; }
  .bp-hero__eyebrow, .bp-hero__stats { justify-content: center; }
  .bp-hero__stats { width: 100%; }
  .bp-hero__stat { flex: 1; min-width: 0; }
}

@media (max-width: 480px) {
  .bp-hero__visual { display: none; }
}

/* ─── Body wrapper ───────────────────────────────────────────── */
.bp-body { padding-top: 1.75rem; padding-bottom: 3rem; }

/* ═══════════════════════════════════════════════════════════════
   TABS
═══════════════════════════════════════════════════════════════ */
.bp-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 2px solid var(--bp-border);
  margin-bottom: 1.5rem;
}

.bp-tabs__track {
  display: flex;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.bp-tabs__track::-webkit-scrollbar { display: none; }

.bp-tab-btn {
  flex-shrink: 0;
  scroll-snap-align: start;
  padding: 0.6rem 1.1rem;
  font-size: 14px;
  font-family: iransansx, sans-serif;
  color: var(--bp-text-sub);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: color var(--bp-ease);
  bottom: -2px;
  text-decoration: none;
}
a.bp-tab-btn { display: inline-block; }

.bp-tab-btn:hover { color: var(--bp-text); }
.bp-tab-btn.active-tab { color: var(--bp-text); font-weight: 700; }

/* خط سبز */
.bp-tab-btn.active-tab::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0; left: 0;
  height: 3px;
  background: var(--bp-green);
  border-radius: 3px 3px 0 0;
}

.bp-tabs__arrow {
  display: none;
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: var(--bp-r-sm);
  border: 1px solid var(--bp-border);
  background: var(--bp-bg);
  color: var(--bp-text-sub);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all var(--bp-ease);
  bottom: -2px;
  position: relative;
}

.bp-tabs--overflow .bp-tabs__arrow { display: flex; }

.bp-tabs__arrow:hover {
  border-color: var(--bp-green);
  color: var(--bp-green);
  background: var(--bp-green-bg10);
}

@media (max-width: 640px) { .bp-tabs__arrow, .bp-tabs--overflow .bp-tabs__arrow { display: none; } }

/* ═══════════════════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════════════════ */
.bp-layout {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

/* محتوا سمت راست (RTL)، سایدبار سمت چپ */
.bp-content { flex: 1; min-width: 0; order: 1; }
.bp-sidebar { width: 250px; flex-shrink: 0; order: 2; }

@media (max-width: 1024px) {
  .bp-layout    { flex-direction: column; }
  .bp-content   { order: 1; width: 100%; }
  .bp-sidebar   { order: 2; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR WIDGETS
═══════════════════════════════════════════════════════════════ */
.bp-sidebar-widget {
  background: var(--bp-white);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-r-md);
  overflow: hidden;
  margin-bottom: 0.75rem;
  box-shadow: var(--bp-shadow);
}

.bp-sidebar-widget.bp-hidden { display: none; }

.bp-sidebar-widget__head {
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--bp-border);
  font-size: 13px;
  font-weight: 700;
  color: var(--bp-text);
  font-family: iransansx, sans-serif;
  background: var(--bp-bg);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.bp-sidebar-widget__head::before {
  content: '';
  width: 3px; height: 14px;
  background: var(--bp-green);
  border-radius: var(--bp-r-full);
  display: block;
}

.bp-sidebar-widget__body {
  padding: 0.4rem 0.6rem;
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--bp-border) transparent;
}
.bp-sidebar-widget__body::-webkit-scrollbar { width: 3px; }
.bp-sidebar-widget__body::-webkit-scrollbar-thumb {
  background: var(--bp-border);
  border-radius: var(--bp-r-full);
}

.bp-sidebar-empty {
  font-size: 12px;
  color: var(--bp-text-muted);
  padding: 0.5rem 0;
}

/* ─── Filter Items ───────────────────────────────────────────── */
.bp-filter-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.3rem;
  border-radius: var(--bp-r-sm);
  cursor: pointer;
  transition: background var(--bp-ease);
  font-size: 13px;
  color: var(--bp-text);
  user-select: none;
}

.bp-filter-item:hover { background: var(--bp-bg-alt); }
.bp-filter-item--active { color: var(--bp-green); font-weight: 600; }

.bp-filter-item__check {
  width: 15px; height: 15px;
  border: 1.5px solid var(--bp-border);
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--bp-ease);
  background: var(--bp-white);
}

.bp-filter-item--active .bp-filter-item__check {
  background: var(--bp-green);
  border-color: var(--bp-green);
}

.bp-filter-item--active .bp-filter-item__check::after {
  content: '';
  display: block;
  width: 7px; height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}

.bp-filter-item__label { flex: 1; line-height: 1.4; }
.bp-filter-item__icon  { border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.bp-filter-item__initial {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bp-bg-alt);
  color: var(--bp-text-sub);
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.bp-filter-item__count {
  font-size: 11px;
  color: var(--bp-text-muted);
  background: var(--bp-bg-alt);
  padding: 1px 6px;
  border-radius: var(--bp-r-full);
  min-width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.bp-filter-item--active .bp-filter-item__count {
  background: var(--bp-green-bg10);
  color: var(--bp-green);
}

.bp-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* ═══════════════════════════════════════════════════════════════
   NEWS LIST
═══════════════════════════════════════════════════════════════ */
#bp-news-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: opacity 0.2s;
}


/* ─── News Item Card ─────────────────────────────────────────── */
.bp-news-item {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--bp-border);
  background: var(--bp-white);
  padding: 1rem 1.1rem;
  position: relative;
  transition: background var(--bp-ease);
}

/* آخرین آیتم — بدون border پایین (parent overflow:hidden آن را قطع می‌کند) */
.bp-has-items .bp-news-item:last-child { border-bottom: none; }

.bp-news-item:hover { background: #fafffe; }

/* wrapper لیست خبرهای واقعی — border یکپارچه */
#bp-news-list.bp-has-items {
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-r-md);
  overflow: hidden;
  box-shadow: var(--bp-shadow);
  background: var(--bp-white);
}

/* skeleton: کارت جداگانه با gap */
#bp-news-list.bp-loading {
  gap: 0.5rem;
  opacity: 0.5;
  pointer-events: none;
}

#bp-news-list.bp-loading .bp-skeleton {
  border: 1px solid var(--bp-border) !important;
  border-radius: var(--bp-r-md) !important;
  background: var(--bp-white) !important;
}

/* ─── Header کارت ────────────────────────────────────────────── */
.bp-news-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
  flex-wrap: wrap;
}

.bp-news-item__meta-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 12px;
  color: var(--bp-text-muted);
  flex-wrap: wrap;
}

.bp-news-item__time { white-space: nowrap; }

.bp-meta-dot {
  width: 3px; height: 3px;
  background: var(--bp-border);
  border-radius: 50%;
  display: inline-block;
}

.bp-source-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 4px;
  overflow: hidden;
  color: var(--bp-text-muted);
  flex-shrink: 0;
}
.bp-source-icon--own { color: var(--bp-gold); }
.bp-source-icon img  { width: 100%; height: 100%; object-fit: contain; }

.bp-news-item__source-name { font-size: 12px; }

.bp-news-item__badges {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

/* ─── Badges ─────────────────────────────────────────────────── */
.bp-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--bp-r-sm);
  line-height: 1.6;
  white-space: nowrap;
}

.bp-badge--own {
  background: var(--bp-gold-bg);
  color: #b89200;
  border: 1px solid #e7c40060;
}

.bp-badge--xs { font-size: 10px; padding: 1px 6px; }

.bp-sentiment--bullish { background: var(--bp-green-bg); color: var(--bp-green); }
.bp-sentiment--bearish { background: var(--bp-red-bg);   color: var(--bp-red);   }
.bp-sentiment--neutral { background: var(--bp-bg-alt);   color: var(--bp-text-muted); }

.bp-sentiment-label {
  font-size: 11px;
  color: var(--bp-text-muted);
  white-space: nowrap;
}

/* ─── Trigger (عنوان آکاردئون) ──────────────────────────────── */
.bp-news-item__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 100%;
  text-align: right;
}

.bp-news-item__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--bp-text);
  font-family: iransansx, sans-serif;
  line-height: 1.65;
  text-align: right;
  flex: 1;
  transition: color var(--bp-ease);
}

.bp-news-item__trigger:hover .bp-news-item__title { color: var(--bp-green); }

/* شورون آکاردئون */
.bp-chevron {
  color: var(--bp-text-muted);
  transition: transform 0.22s ease, color 0.18s ease;
  flex-shrink: 0;
  margin-top: 3px;
}

.bp-news-item__trigger.bp-acc-open .bp-chevron {
  transform: rotate(180deg);
  color: var(--bp-green);
}

/* ─── Accordion Panel ────────────────────────────────────────── */
.bp-accordion-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.28s ease-in-out;
}

/* وقتی hidden نیست باید بدون JS هم کار کند */
.bp-accordion-inner {
  padding-top: 0.75rem;
  border-top: 1px solid var(--bp-border);
  margin-top: 0.65rem;
}

.bp-news-item__summary {
  font-size: 13px;
  color: var(--bp-text-sub);
  line-height: 1.9;
  margin-bottom: 0.7rem;
}

.bp-related-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 12px;
  color: var(--bp-green);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--bp-green);
  border-radius: var(--bp-r-sm);
  padding: 5px 12px;
  transition: all var(--bp-ease);
}

.bp-related-link:hover {
  background: var(--bp-green-bg10);
}

/* ─── Empty State ────────────────────────────────────────────── */
.bp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 4rem 1rem;
  color: var(--bp-text-muted);
  text-align: center;
  background: var(--bp-white);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-r-md);
  box-shadow: var(--bp-shadow);
}
.bp-empty-state svg { opacity: .35; }
.bp-empty-state p   { font-size: 14px; }

/* ─── Skeleton ───────────────────────────────────────────────── */
.bp-news-item.bp-skeleton { pointer-events: none; }

.bp-sk-block {
  display: block;
  border-radius: var(--bp-r-sm);
  background: linear-gradient(90deg, var(--bp-border) 25%, var(--bp-bg-alt) 50%, var(--bp-border) 75%);
  background-size: 200% 100%;
  animation: bp-shimmer 1.5s infinite linear;
  height: 12px;
}

.bp-sk-block--sm    { width: 58px;  height: 10px; }
.bp-sk-block--icon  { width: 18px;  height: 18px; border-radius: 50%; }
.bp-sk-block--title { width: 100%;  height: 15px; margin-top: 7px; }
.bp-sk-block--short { width: 55%;   height: 15px; }

@keyframes bp-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════════════════════════ */
#bp-pagination { margin-top: 1.5rem; }

.bp-pagination { }

.bp-pag-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  list-style: none;
  padding: 0; margin: 0;
  direction: rtl;
}

.bp-pag-btn {
  min-width: 34px; height: 34px;
  padding: 0 0.35rem;
  border-radius: var(--bp-r-sm);
  border: 1px solid var(--bp-border);
  background: var(--bp-white);
  color: var(--bp-text);
  font-size: 13px;
  font-family: iransansx, sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--bp-ease);
  font-weight: 500;
}

a.bp-pag-btn { text-decoration: none; }

.bp-pag-btn:hover:not(:disabled):not([aria-disabled="true"]):not(.bp-pag-btn--active) {
  border-color: var(--bp-green);
  color: var(--bp-green);
  background: var(--bp-green-bg);
}

.bp-pag-btn:focus-visible {
  outline: 2px solid var(--bp-green);
  outline-offset: 2px;
}

.bp-pag-btn--active {
  background: var(--bp-green-light);
  border-color: var(--bp-green-light);
  color: var(--bp-text);
  font-weight: 700;
  cursor: default;
  box-shadow: 0 1px 4px #4ef09d55;
}

.bp-pag-btn:disabled,
.bp-pag-btn[aria-disabled="true"] { opacity: .3; cursor: not-allowed; }
.bp-pag-nav svg      { display: block; }

.bp-pag-ellipsis {
  min-width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bp-text-muted);
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════
   STATIC CONTENT (انتهای صفحات اختصاصی)
═══════════════════════════════════════════════════════════════ */
.bp-static-content {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--bp-white);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-r-md);
  box-shadow: var(--bp-shadow);
  color: var(--bp-text-sub);
  font-size: 14px;
  line-height: 2;
}
.bp-static-content[hidden] { display: none; }
.bp-static-content h2,
.bp-static-content h3,
.bp-static-content h4 {
  color: var(--bp-text);
  font-family: iransansx, sans-serif;
  font-weight: 700;
  line-height: 1.6;
  margin: 1.25rem 0 0.6rem;
}
.bp-static-content h2 { font-size: 18px; }
.bp-static-content h3 { font-size: 16px; }
.bp-static-content h4 { font-size: 15px; }
.bp-static-content > :first-child { margin-top: 0; }
.bp-static-content p  { margin: 0 0 0.9rem; }
.bp-static-content ul,
.bp-static-content ol { margin: 0 0 0.9rem; padding-right: 1.25rem; }
.bp-static-content ul { list-style: disc; }
.bp-static-content ol { list-style: decimal; }
.bp-static-content a  { color: var(--bp-green); text-decoration: underline; }
.bp-static-content a:hover { color: var(--bp-text); }
.bp-static-content img { max-width: 100%; height: auto; border-radius: var(--bp-r-sm); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .bp-news-item__title      { font-size: 14px; }
  .bp-news-item             { padding: 0.85rem 0.9rem !important; }
  .bp-pag-btn               { min-width: 30px; height: 30px; font-size: 12px; }
  .bp-static-content        { padding: 1rem; }
  .bp-news-item__badges     { flex-wrap: wrap; }
}