/* ==========================================================
   Plans page fixes — MOBILE ONLY and card buttons
   ========================================================== */
/* 1) Plan cards: free (شروع رایگان) and team (انتخاب تیم) should match basic (انتخاب پایه) — primary style, except featured حرفه‌ای */
.plan-grid .plan-card:nth-child(1) .btn.btn-ghost,
.plan-grid .plan-card:nth-child(4) .btn.btn-ghost {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.plan-grid .plan-card:nth-child(1) .btn.btn-ghost:hover,
.plan-grid .plan-card:nth-child(4) .btn.btn-ghost:hover {
  background: var(--primary-dark);
  color: #fff;
  border-color: var(--primary-dark);
}
/* Also handle Elementor HTML where buttons may be direct children */
.plan-card:nth-child(1) .btn-ghost,
.plan-card:nth-child(4) .btn-ghost {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
/* 2) MOBILE ONLY: comparison table team column was hidden via display:none at 768px */
@media (max-width: 768px) {
  .compare-table { overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; }
  .compare-table .pt-row { min-width: 640px; grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr !important; }
  .pt-head span:last-child, .pt-row span:last-child { display: block !important; }
}
@media (max-width: 560px) {
  .compare-table { overflow-x: auto; }
  .compare-table .pt-row { min-width: 640px; }
}
/* ==========================================================
   Blog post fix — desktop width and <br> handling
   The blog text was narrow (760px) and had <br> every ~80 chars
   inside <p>, causing early breaks like Enter in middle of sentence.
   ========================================================== */
.article-body { max-width: 860px !important; }
.article-body p br { display: none !important; }
.article-body p { max-width: none !important; word-break: normal !important; overflow-wrap: break-word !important; white-space: normal !important; }
/* Ensure container + asha-content + article-body all respect the wider width */
.container.article-body.asha-content { max-width: 860px !important; }
@media (min-width: 1160px) {
  .article-body { max-width: 860px !important; }
}
/* ==========================================================
   Blog code copy button — icon + head handling (fix for attachCopy early-return)
   All blog posts have div.code-block with head; previously attachCopy returned early.
   Now button is appended to .code-block-head with icon.
   ========================================================== */
.code-block { position: relative; }
.code-block-head { display: flex; align-items: center; gap: 12px; }
.code-block-head .code-copy-btn {
  position: static !important;
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.85);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.code-block-head .code-copy-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.code-copy-btn .code-copy-icon { flex-shrink: 0; display: inline-flex; }
.code-copy-btn .code-copy-text { line-height: 1; }