@import url('srlab-shared.css');

/* .tal-tabs/.tal-tab و.tal-concept-intro/.tal-try-btn/.strat-* موحّدين
   الآن فى assets/css/shared-components.css — كانوا هنا مكررين. */

.smc-share { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.smc-share-toggle { display: flex; align-items: center; gap: 8px; background: rgba(102,126,234,0.18); border: 1px solid rgba(102,126,234,0.4); color: #fff; border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--font-secondary); transition: var(--transition); white-space: nowrap; }
.smc-share-toggle:hover { background: rgba(102,126,234,0.3); }
.smc-share-icons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* أيقونات المشاركة هنا بنفس ألوان المنصات المستخدمة فى باقي الموقع
   (.ci-share-icon/.tal-share-btn) بدل لون primary-color عام لكل الأزرار،
   عشان الشكل يبقى متطابق حتى لو تصميم "زر يفتح الأيقونات" فرق شوية. */
.smc-share-btn { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22); color: #fff; text-decoration: none; cursor: pointer; transition: var(--transition); flex-shrink: 0; }
.smc-share-btn:hover { transform: translateY(-2px); color: #fff; }
.smc-share-btn[data-share="whatsapp"]:hover { background: #25D366; border-color: #25D366; }
.smc-share-btn[data-share="twitter"]:hover { background: #000; border-color: #000; }
.smc-share-btn[data-share="facebook"]:hover { background: #1877F2; border-color: #1877F2; }
.smc-share-btn[data-share="telegram"]:hover { background: #229ED9; border-color: #229ED9; }
.smc-share-btn[data-share="copy"]:hover { background: var(--primary-color); border-color: var(--primary-color); }
.smc-share-btn.is-copied { background: #22c55e !important; border-color: #22c55e !important; color: #111 !important; }
/* .srlab-chart-wrap/.srlab-labels-layer/.srlab-level-tag/.srlab-svg موحّدة
   الآن فى shared-components.css؛ هنا override بسيط فقط لخاصية overflow
   إضافية مطلوبة لصفحات هذا المختبر تحديدًا. */
.srlab-chart-wrap { overflow: hidden; border-radius: 12px; }
.srlab-btn { background: var(--bg-gray-800); color: var(--text-light); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 12px; font-size: 12px; cursor: pointer; font-family: var(--font-secondary); }
.srlab-btn.active { background: var(--primary-gradient); border-color: transparent; color: #fff; }
.srlab-replay-btn:hover:not(:disabled) { border-color: var(--primary-color); }
.srlab-banner { background: var(--bg-gray-800); border: 1px solid var(--primary-color); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; animation: srlab-fade-in 0.35s ease-out; }
.srlab-banner-tag { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.srlab-banner h3 { margin: 0 0 6px; font-size: 15px; color: #fff; }
.srlab-banner p { font-size: 13.5px; color: #d1d5db; line-height: 1.8; margin: 0 0 10px; }
.srlab-banner button { width: auto; padding: 9px 16px; font-size: 13px; }
@keyframes srlab-fade-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }