/* ===============
Albargh Sources – Standalone CSS
Theme tokens + Layout
================== */

/* Light tokens */
:root{
--bg: #f4f2f6; /* خلفية الصفحة العامة */
--text: #111827; /* نص أساسي */
--muted: #6b7280; /* نص ثانوي */
--border: #e5e7eb; /* حدود عامة */
--card-bg: #ffffff; /* خلفية البطاقات */
--card-border: #e5e7eb;
--hover: #f3f4f6;

--brand-indigo: #4f46e5;
--brand-indigo-600: #4f46e5;
--brand-indigo-700: #4338ca;
--accent-green: #16a34a;
}

/* Dark tokens */
html[data-theme="dark"]{
--bg: #0f172a; /* slate-900 */
--text: #e5e7eb; /* gray-200 */
--muted: #94a3b8; /* slate-400 */
--border: #263145; /* حدود داكنة */
--card-bg: #111827; /* gray-900 */
--card-border: #1f2937; /* gray-800 */
--hover: #0b1220; /* داكن أخف */
}

/* ===== Base ===== */

html, body{
background: var(--bg);
color: var(--text);
overflow-x: hidden;
}

body{
min-height: 100vh;
}

a{
color: inherit;
text-decoration: none;
}
a:hover{
text-decoration: none;
}

/* نصوص ثانوية */
.text-muted{ color: var(--muted); }

/* ===== Header & Footer ===== */

header, footer{
background: color-mix(in oklab, var(--bg) 85%, #ffffff);
border-color: var(--border) !important;
}

/* اسم الموقع والرابط في الهيدر – يتكيّف مع الثيم */
#brandName,
#sourceLabel{
color: #111827;
}

/* في الوضع الليلي: النص أبيض، الخلفية لا تتغير */
html[data-theme="dark"] #brandName,
html[data-theme="dark"] #sourceLabel{
color: #ffffff !important;
}

/* أزرار الهيدر في الوضع الليلي: نص أسود وخلفية فاتحة */
html[data-theme="dark"] header{
background: rgba(0,0,0,0.35);
border-color: #2e3a52 !important;
backdrop-filter: blur(12px);
}

html[data-theme="dark"] header #langToggle,
html[data-theme="dark"] header #themeToggle{
color: #000 !important;
border-color: #cbd5e1 !important;
background: #f9fafb !important;
}
html[data-theme="dark"] header #langToggle:hover,
html[data-theme="dark"] header #themeToggle:hover{
background: #e2e8f0 !important;
}

/* ===== Tabs ===== */

.tabBtn{
border-radius: .75rem;
font-weight: 700;
color: #111827;
transition: all .15s ease;
}
.tabBtn:hover{ background: var(--hover); }
.tabBtn[data-active="true"]{
background: var(--brand-indigo);
color: #fff;
}
html[data-theme="dark"] .tabBtn:hover {
color: #fff !important;
}
/* ===== Card ===== */

.card{
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 1rem;
display: flex;
flex-direction: column;
min-height: 220px;
box-shadow: 0 4px 12px rgba(0,0,0,.05);
transition:
transform .15s ease,
box-shadow .15s ease,
background .2s ease,
border-color .2s ease;
}
.card:hover{
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

/* عنوان البطاقة */
.card h3{
font-size: 1rem;
font-weight: 700;
display: flex;
align-items: center;
gap: .5rem;
margin: 0;
}

/* "موصى به" */
.card h3 .recommended{
font-weight: 800;
font-size: .75rem;
color: var(--accent-green);
letter-spacing: .1px;
}

/* اسم المصدر كرابط */
.source-name-link{
color: #111827;
}
.source-name-link:hover{ text-decoration: underline; }

/* الوصف */
.card p{
font-size: .925rem;
color: #374151;
margin: .25rem 0 0;
}

/* مؤشر القوة الاجتماعية */
.social-strength{
display: inline-flex;
align-items: center;
gap: .4rem;
margin-top: .5rem;
padding: .2rem .45rem;
border-radius: 999px;
background: rgba(148,163,184,.12);
font-size: .8rem;
color: #334155;
}
.social-strength i{
font-size: .85rem;
}
.social-strength .social-count{
font-weight: 700;
}
.social-strength .social-platform{
opacity: .9;
}

/* سطر التغطية */
.coverage-line{
margin-top: .65rem;
margin-bottom: .5rem;
font-size: .85rem;
color: #374151;
font-weight: 600;
}

/* رابط المضيف */
.card .host-link{
font-size: 11px;
color: #6366f1;
opacity: .95;
display: inline-flex;
align-items: center;
gap: .4rem;
}
.card .host-link i{ font-size: 10px; }
.card .host-link:hover{ text-decoration: underline; }

/* صف الأزرار بأسفل البطاقة */
.actions-row{
display: flex;
align-items: center;
gap: .5rem;
flex-wrap: nowrap;
margin-top: auto;
padding-top: .5rem;
}

/* زر chip موحّد الارتفاع */
.btn-chip{
display: inline-flex;
align-items: center;
justify-content: center;
gap: .4rem;
height: 38px;
padding: 0 .8rem;
border-radius: .75rem;
font-size: .875rem;
font-weight: 700;
white-space: nowrap;
border: 1px solid transparent;
}
.btn-chip i{ font-size: .9em; }

/* زيارة الموقع */
.btn-visit{
border-color: var(--brand-indigo-600);
color: var(--brand-indigo-700);
background: #fff;
}
.btn-visit:hover{ background: rgba(79,70,229,.06); }

/* أخبار المصدر */
.btn-news{
border-color: #10b981;
color: #059669;
background: #fff;
}
.btn-news:hover{ background: rgba(16,185,129,.06); }

/* شارة عامة لو احتجت */
.badge{
border: 1px solid var(--border);
color: #374151;
border-radius: .75rem;
padding: .25rem .5rem;
font-size: .75rem;
}

/* ===== Dark tweaks for card ===== */

html[data-theme="dark"] .card{
background: #1b1b1d !important;
border: 1px solid rgba(255, 255, 255, 0.07) !important;
box-shadow: 0 0 18px rgba(0,0,0,0.35) !important;
}
html[data-theme="dark"] .card:hover{
box-shadow: 0 0 26px rgba(0,0,0,0.5) !important;
}

html[data-theme="dark"] .card h3,
html[data-theme="dark"] .card p{
color: #e5e7eb;
opacity: 1;
}
html[data-theme="dark"] .coverage-line{
color: #cbd5e1;
}

/* social strength في الداكن */
html[data-theme="dark"] .social-strength{
background: rgba(148,163,184,.16);
color: #e5e7eb;
}

/* اسم المصدر داخل البطاقة في الداكن */
html[data-theme="dark"] .card .source-name-link{
color: #ffffff !important;
}

/* زر chip في الداكن */
html[data-theme="dark"] .btn-chip{
background: #0b1220;
color: var(--text);
border-color: var(--border);
}
html[data-theme="dark"] .btn-chip:hover{
background: #0f172a;
}

/* لا نغيّر host-link */
.card .host-link{ color:#6366f1; }

/* ===== Load more button (mobile) ===== */

.load-more-btn{
display:inline-flex;
align-items:center;
gap:.5rem;
height:42px;
padding:0 1rem;
border:1px solid var(--border);
border-radius:.75rem;
background:#fff;
color:#111827;
font-weight:700;
box-shadow:0 2px 8px rgba(0,0,0,.05);
transition:background .15s ease, transform .1s ease;
}
.load-more-btn:hover{ background:#f3f4f6; }
.load-more-btn:active{ transform:translateY(1px); }

html[data-theme="dark"] .load-more-btn{
background:#111827;
color:#e5e7eb;
border-color:var(--border);
}

/* ===== Back to top ===== */

#backToTop{
position:fixed;
bottom:70px; /* أعلى الشريط السفلي قليلاً */
left:22px;
z-index:60;
width:42px;
height:42px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#4f46e5,#6366f1);
color:#fff;
box-shadow:0 6px 16px rgba(0,0,0,.25);
cursor:pointer;
opacity:0;
transform:scale(.85);
transition:all .25s ease;
}
#backToTop.visible{
opacity:1;
transform:scale(1);
}
#backToTop:hover{
filter:brightness(1.05);
}

/* ===== Modal ===== */

.modal-backdrop{
position:fixed;
inset:0;
background:rgba(0,0,0,.45);
display:none;
z-index:70;
}
.modal-backdrop.show{ display:block; }
.modal-card{
width: min(680px, 94vw);
}
/* ===== Modal colors in dark mode ===== */
html[data-theme="dark"] #suggestModal .modal-card{
background: #f9fafb; /* نفس الإحساس الفاتح */
color: #0f172a; /* نص داكن */
}

/* عنوان المودال + النصوص */
html[data-theme="dark"] #suggestModal h3,
html[data-theme="dark"] #suggestModal p,
html[data-theme="dark"] #suggestModal a{
color: #0f172a !important;
}

/* زر الإغلاق + الأيقونة */
html[data-theme="dark"] #modalClose{
background: #f9fafb;
border-color: #cbd5e1;
}
html[data-theme="dark"] #modalClose i{
color: #0f172a;
}

/* أزرار "نسخ" */
html[data-theme="dark"] #suggestModal .copy-btn{
background: #ffffff;
color: #0f172a;
border-color: #cbd5e1;
}
html[data-theme="dark"] #suggestModal .copy-btn:hover{
background: #e5e7f0;
}
.copy-btn{
border:1px solid var(--border);
border-radius:.65rem;
padding:.35rem .6rem;
font-size:.85rem;
}
.copy-btn:hover{
background:#f3f4f6;
}

/* ===== Tooltip ===== */

.tooltip{
position: relative;
display:inline-block;
}
.tooltip .tooltiptext{
visibility: hidden;
opacity: 0;
transition: opacity .2s ease;
width: max-content;
background:#333;
color:#fff;
border-radius:.5rem;
font-size: 12px;
white-space: nowrap;
padding: 4px 8px;
position: absolute;
z-index: 10;
bottom:125%;
left:50%;
transform: translateX(-50%);
}
.tooltip:hover .tooltiptext{
visibility: visible;
opacity: 1;
}

/* ===== Bottom Nav (mobile) ===== */

#bottomNav{
position:fixed;
inset-inline:0;
bottom:0;
z-index:55;
background:#ffffff;
border-top:1px solid #e5e7eb;
}
.bottom-nav-inner{
max-width: 768px;
margin: 0 auto;
}
.bottom-nav-shell{
display:flex;
align-items:center;
justify-content:space-around;
padding:6px 12px 8px;
}
.bottom-nav-btn,
.bottom-btn{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
font-size: 1.1rem;
color:#4b5563;
}
.bottom-nav-btn i,
.bottom-btn i{
font-size: 1.25rem;
}
.bottom-nav-btn-primary{
color:#ffffff;
background:#009739;
border-radius:999px;
width:40px;
height:40px;
}

/* زر تحميل التطبيق في الشريط السفلي */
#btn-app{
font-size:.7rem;
gap:2px;
}
#btn-app .lbl{
font-size:.7rem;
}

/* Dark mode – bottom nav */

html[data-theme="dark"] #bottomNav{
background: #161618 !important;
border-top: 1px solid rgba(255,255,255,0.06) !important;
box-shadow: 0 -4px 15px rgba(0,0,0,0.4) !important;
backdrop-filter: blur(6px);
}
html[data-theme="dark"] #bottomNav .bottom-nav-btn,
html[data-theme="dark"] #bottomNav #btn-app{
color:#f9fafb !important;
}
html[data-theme="dark"] #bottomNav .bottom-nav-btn-primary{
background:#009739 !important;
color:#ffffff !important;
}

/* ===== Logo helper (لو احتجت) ===== */
.logo{
width: 30px;
height: 30px;
flex-shrink: 0;
display: inline-block;
border-radius: 50%;
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* ===== Responsive tweaks ===== */

@media (max-width: 640px){
.card h3{ font-size: .98rem; }
.card p{ font-size: .9rem; }
}
/* ============================
شريط آخر تحديث – آخر تعديل
============================ */
.last-updated {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 0.85rem;
font-weight: 700;
color: #374151; /* gray-700 */
background: #f9fafb; /* gray-50 */
border: 1px solid #e5e7eb;
border-radius: 10px;
white-space: nowrap;
}

.last-updated i {
color: #4f46e5; /* indigo */
}

@media (max-width: 640px) {
.last-updated {
font-size: 0.80rem;
padding: 5px 10px;
}
}

/* الوضع الليلي */
html[data-theme="dark"] .last-updated {
background: #0f172a; /* slate-900 */
color: #e5e7eb; /* gray-200 */
border-color: #1e293b; /* slate-800 */
}

html[data-theme="dark"] .last-updated i {
color: #cbd5e1; /* slate-300 */
}


/* شارة "آخر تحديث" في الهيدر */
.last-updated-pill{
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.75rem;
color: var(--muted);
padding: 2px 10px;
margin-inline-start: .2rem;
border-radius: 999px;
border: 1px dashed rgba(148,163,184,0.7); /* slate-400 */
background: rgba(255,255,255,0.8);
}

.last-updated-pill i{
font-size: 0.8em;
}

/* في الوضع الليلي */
html[data-theme="dark"] .last-updated-pill{
background: rgba(15,23,42,0.8); /* slate-900 شفاف */
border-color: rgba(148,163,184,0.6); /* slate-400 تقريبًا */
color: #e5e7eb; /* gray-200 */
}

/* على الشاشات الصغيرة جدًا، يمكن إخفاؤها إذا ضاق الهيدر */
@media (max-width: 380px){
.last-updated-pill{
display: none;
}
}
.btn-watch {
background: #dbeafe;
color: #1e40af;
border: 1px solid #93c5fd;
}

[data-theme="dark"] .btn-watch {
background: #1e3a8a;
color: #bfdbfe;
border-color: #3b82f6;
}
/* زر مشاهدة القناة (YouTube-style) */
.btn-channel {
background: #ff0000;
color: #fff;
border-radius: 0.75rem;
padding: 0.5rem 0.9rem;
font-size: 0.85rem;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
transition: 0.2s ease;
}

.btn-channel:hover {
background: #cc0000;
}

/* الوضع الليلي */
html[data-theme="dark"] .btn-channel {
background: #e60000;
color: #fff;
}

html[data-theme="dark"] .btn-channel:hover {
background: #c10000;
}

/* نجمة موصى به ⭐ */
.recommended {
font-size: 0.78rem;
font-weight: 800;
color: var(--accent-green);
}

/* إضافة النجمة قبل النص */
.recommended::before {
content: "⭐ ";
font-size: 0.95em;
margin-inline-end: 2px;
}

/* زر فيديوهات (قسم فيديو مجمع البرق) */
.btn-channel {
border-color: #009739; /* أخضر البرق */
background: #009739; /* خلفية خضراء */
color: #ffffff; /* نص أبيض */
padding: 0 0.8rem; /* نفس btn-chip تقريباً */
height: 38px; /* موحّد مع باقي الأزرار */
border-radius: 0.75rem;
font-size: 0.875rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
white-space: nowrap;
}

.btn-channel i {
font-size: 0.9em;
}

.btn-channel:hover {
background: #047857; /* أخضر أغمق بسيط */
border-color: #047857;
}

/* الوضع الليلي لزر الفيديوهات */
html[data-theme="dark"] .btn-channel {
background: #22c55e; /* أخضر فاقع في الداكن */
border-color: #22c55e;
color: #0b1120;
}

html[data-theme="dark"] .btn-channel:hover {
background: #16a34a;
border-color: #16a34a;
}