/* =========================================
   1. التأسيس العام - (LTR) للمحتوى الطبي
   ========================================= */
.medco-wrapper, .medco-post-container {
    max-width: 1000px;
    margin: 40px auto;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #333;
    direction: ltr; /* المحتوى الطبي إنجليزي لليسار */
    text-align: left;
}

/* =========================================
   2. العناوين والنصوص
   ========================================= */
.medco-main-title, .medco-post-title {
    text-align: center;
    color: #000;
    margin-bottom: 30px;
    font-weight: 800;
    font-size: 2.5rem;
}

/* =========================================
   3. التبويبات (Basics / Clinical)
   ========================================= */
.medco-tabs {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    justify-content: center;
}

.medco-tab-card {
    flex: 1;
    background: #f8f9fa; 
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.medco-tab-card:hover {
    background: #fff;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transform: translateY(-4px);
    border-color: #dee2e6;
}

.medco-tab-card.active {
    background: #fff;
    border-color: #000;
    border-width: 2px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.medco-tab-card h3 {
    margin: 0;
    color: #212529;
    font-size: 1.3rem;
}

/* =========================================
   4. شريط الأزرار العلوية (Toggle Toolbar)
   ========================================= */
.medco-post-toolbar {
    display: flex;
    gap: 20px;
    background: #ffffff;
    padding: 15px 25px;
    border-radius: 12px;
    margin-bottom: 25px;
    position: sticky;
    top: 10px;
    z-index: 999;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border: 1px solid #eee;
    justify-content: center;
    direction: rtl; /* الأزرار عربية من اليمين */
}

.toggle-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 0.95rem;
}

/* تصميم السويتش (Switch) */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #0056b3; }
input:checked + .slider:before { transform: translateX(18px); }

/* =========================================
   5. الأقسام المنسدلة (Accordions)
   ========================================= */
.medco-section-item {
    margin-bottom: 12px;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    background: #fff;
}

.medco-section-trigger {
    padding: 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333;
    background: #fdfdfd;
}

.medco-section-content {
    display: none;
    padding: 20px;
    border-top: 1px solid #fafafa;
    line-height: 1.8;
}

/* =========================================
   6. الميزات التفاعلية (Highlight / Notes / Dosage)
   ========================================= */
/* الهايلايت */
.medco-highlight {
    background-color: transparent !important;
    transition: all 0.3s ease;
}
body.show-highlight .medco-highlight {
    background-color: #ffeb3b !important;
}

/* الملاحظات */
.medco-note-box {
    display: none !important;
    background: #e3f2fd !important;
    border-left: 5px solid #2196f3 !important;
    padding: 15px !important;
    margin: 15px 0 !important;
    border-radius: 4px;
    color: #0d47a1 !important;
    text-align: left;
}
body.show-notes .medco-note-box {
    display: block !important;
}

/* الجرعات */
.medco-dosage-hidden {
    display: none;
    background-color: #fce4ec;
    color: #c2185b;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    border: 1px dashed #f48fb1;
    margin: 0 5px;
    transition: all 0.3s ease;
}
body.show-dosage .medco-dosage-hidden {
    display: inline-block;
    animation: fadeIn 0.5s;
}

/* =========================================
   7. القوائم والشجرة (Tree View)
   ========================================= */
.medco-trigger { padding: 18px; cursor: pointer; display: flex; justify-content: space-between; font-weight: 600; }
.medco-collapsible-content { display: none; padding: 10px 25px; border-left: 2px solid #eee; }
.medco-posts-list { list-style: none !important; padding-left: 15px !important; }

/* القسم المقفول */
.medco-trigger.locked {
    background-color: #f8f9fa;
    color: #6c757d;
    cursor: pointer;
    border-style: dashed;
}

/* =========================================
   8. النافذة المنبثقة (Activation Modal)
   ========================================= */
.medco-modal {
    display: none; 
    position: fixed; 
    z-index: 99999; 
    left: 0; top: 0; 
    width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(3px);
    animation: fadeIn 0.3s;
}

.medco-modal-content {
    background-color: #fefefe;
    margin: 10% auto; 
    padding: 0;
    border: 1px solid #888;
    width: 90%; 
    max-width: 450px;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    position: relative;
    animation: slideDown 0.3s;
    overflow: hidden;
}

.medco-modal-header {
    background: #0056b3;
    color: white;
    padding: 15px 20px;
    text-align: center;
}
.medco-modal-header h3 { margin: 0; font-size: 1.2rem; color: #fff; }

.medco-modal-body { padding: 25px; text-align: center; }

.medco-close-modal {
    color: #fff;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    right: 15px; top: 5px;
    cursor: pointer;
}

.medco-input-group input {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    text-align: center;
    margin-bottom: 15px;
    box-sizing: border-box;
}
.medco-input-group input:focus { border-color: #0056b3; outline: none; }

.medco-btn-primary {
    background: #0056b3;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
}
.medco-btn-primary:hover { background: #004494; }

#medco-msg-box { margin-bottom: 15px; font-weight: 600; }
.medco-error { color: #dc3545; }
.medco-success { color: #28a745; }

/* تأثيرات الحركة */
@keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }
@keyframes slideDown { from {transform: translateY(-50px);} to {transform: translateY(0);} }

/* =========================================
   9. إضافات هامة جداً (Fixes)
   ========================================= */

/* أ) تحسين عرض الفيديو ليكون متجاوباً */
.medco-video-wrapper iframe, 
.medco-video-wrapper video,
.medco-video-wrapper embed { 
    width: 100%; 
    height: auto; 
    aspect-ratio: 16/9; 
    border-radius: 8px; 
}

/* ب) إخفاء معلومات القالب الافتراضية (الحل الجذري) ⛔ */
.entry-meta, 
.post-meta, 
.entry-header .byline,
.entry-header .posted-on,
.meta-info,
.post-author,
.post-date,
.entry-footer,
.elementor-widget-theme-post-info {
    display: none !important;
}

/* ج) التأكد من ظهور معلوماتنا نحن فقط ✅ */
.medco-meta-info {
    display: flex !important;
}

/* الموبايل */
@media (max-width: 768px) {
    .medco-tabs { flex-direction: column; }
    .medco-post-toolbar { flex-wrap: wrap; }
}
/* =================================================
   🔥 إخفاء الميتا داتا القديمة (الحل النهائي)
   ================================================= */

/* 1. إخفاء العناصر الشائعة في 99% من القوالب */
.entry-meta, 
.post-meta, 
.meta-top,
.entry-header .entry-meta,
.entry-header .byline,
.entry-header .posted-on,
.entry-header .cat-links,
.site-main header .entry-meta {
    display: none !important;
}

/* 2. إخفاء الروابط التي تظهر فوق العنوان (للقوالب المعقدة) */
.single-medco_library article header .entry-meta,
.single-medco_library .post-info,
.single-medco_library .auth-meta {
    display: none !important;
}

/* 3. ضمان بقاء معلوماتنا الجديدة ظاهرة */
.medco-meta-info {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* --- 1. شكل الكلمة في النص --- */
.medco-term-trigger {
    border-bottom: 2px dashed #2196f3; /* خط أزرق متقطع */
    color: #0d47a1;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.medco-term-trigger:hover {
    background-color: #e3f2fd; /* خلفية خفيفة عند الماوس */
    border-bottom-style: solid;
}

/* --- 2. تخصيص شكل البوكس (ليشبه الملاحظات) --- */
.term-box-style {
    border-top: 5px solid #2196f3; /* خط علوي أزرق */
    border-radius: 8px;
    max-width: 500px !important; /* حجم مناسب للقراءة */
}

.term-header {
    background: #fff !important; /* رأس أبيض */
    color: #333 !important;
    border-bottom: 1px solid #eee;
    padding: 15px !important;
    text-align: left !important; /* لأن المحتوى إنجليزي */
}

.term-header h3 {
    color: #2196f3 !important;
    margin: 0;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.term-body {
    text-align: left !important;
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
    background-color: #fcfcfc;
}

/* زر الإغلاق X */
.medco-close-modal[data-target="medco-term-modal"] {
    color: #999;
    top: 10px;
    right: 15px; /* ثابت على اليمين */
    font-size: 30px;
}
.medco-close-modal[data-target="medco-term-modal"]:hover {
    color: #d32f2f; /* أحمر عند التحويم */
}
/* =========================================
   ⭐ تنسيقات أيقونة ونافذة الصور الجديدة
   ========================================= */

/* 1. شكل الأيقونة داخل النص */
.medco-img-trigger {
    color: #2196f3; /* لون أزرق */
    cursor: pointer;
    font-size: 22px; /* حجم مناسب */
    vertical-align: middle; /* محاذاة مع النص */
    margin-left: 5px;
    transition: transform 0.2s;
}
.medco-img-trigger:hover {
    transform: scale(1.2); /* تكبير بسيط عند الماوس */
    color: #0d47a1;
}

/* =========================================
   ⭐ إصلاح مشكلة المحاذاة وحجم الصور
   ========================================= */

/* 1. إصلاح النافذة المنبثقة (لتكون ملء الشاشة تماماً) */
.medco-modal.image-mode {
    position: fixed !important; /* مهم جداً: يخرجها من الحاوية */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw; /* عرض الشاشة بالكامل */
    height: 100vh; /* ارتفاع الشاشة بالكامل */
    background-color: rgba(0,0,0,0.9) !important; /* خلفية سوداء داكنة */
    z-index: 999999 !important; /* لتظهر فوق كل شيء */
    
    /* توسيط الصورة في المنتصف تماماً */
    display: none; /* مخفية افتراضياً */
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* 2. تنسيق الصورة الكبيرة (داخل البوب أب) */
.medco-modal-content-img {
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

#medco-popup-img-tag {
    max-width: 90vw !important; /* لا تتجاوز 90% من عرض الشاشة */
    max-height: 85vh !important; /* لا تتجاوز ارتفاع الشاشة */
    width: auto !important; /* الحفاظ على الأبعاد */
    height: auto !important;
    border: 3px solid #fff;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    object-fit: contain;
}

/* زر الإغلاق الأبيض */
.medco-close-modal.white-x {
    position: absolute;
    top: 30px;
    right: 30px;
    color: #fff !important;
    font-size: 40px;
    cursor: pointer;
    z-index: 1000000;
}

/* 3. تنسيق الصورة الأصلية في الأسفل (لتكون صغيرة دائماً) */
/* أي صورة تحمل ID نخصص لها هذا الشكل لتكون كالمعاينة فقط */
img[id^="thyroid"], /* استهداف ذكي لأي آيدي يبدأ بكلمة thyroid */
.medco-source-thumb { 
    max-width: 150px !important; /* عرض صغير ثابت */
    height: auto !important;
    border-radius: 8px;
    border: 1px solid #ddd;
    padding: 5px;
    cursor: pointer;
    transition: transform 0.2s;
    display: block;
    margin-top: 10px;
}

img[id^="thyroid"]:hover,
.medco-source-thumb:hover {
    opacity: 0.8;
}

/* تأثير الزوم */
@keyframes zoomIn { from {transform:scale(0.8); opacity:0;} to {transform:scale(1); opacity:1;} }
/* =========================================
   🌑 الوضع الليلي (Dark Mode)
   ========================================= */

/* 1. الخلفية والنصوص العامة */
body.dark-mode {
    background-color: #121212 !important; /* خلفية الصفحة سوداء */
    color: #e0e0e0 !important; /* النص أبيض مائل للرمادي للراحة */
}

/* 2. الكروت والحاويات */
body.dark-mode .medco-card, 
body.dark-mode .medco-tab-card,
body.dark-mode .medco-content-wrapper,
body.dark-mode .medco-post-container,
body.dark-mode .medco-section-content {
    background-color: #1e1e1e !important; /* رمادي غامق للكروت */
    color: #e0e0e0 !important;
    border-color: #333 !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
}

/* 3. العناوين والأكورديون */
body.dark-mode .medco-trigger {
    background-color: #2c2c2c !important; /* خلفية العنوان */
    color: #fff !important;
    border-bottom: 1px solid #444 !important;
}
body.dark-mode .medco-trigger:hover {
    background-color: #383838 !important;
}

/* 4. القوائم والنقاط */
body.dark-mode ul li, 
body.dark-mode p {
    color: #ccc !important;
}

/* 5. النوافذ المنبثقة (Popups) */
body.dark-mode .medco-modal-content,
body.dark-mode .term-box-style {
    background-color: #252525 !important;
    color: #fff !important;
    border-color: #444 !important;
}
body.dark-mode .term-header {
    background-color: #333 !important; /* رأس النافذة */
    color: #fff !important;
    border-bottom: 1px solid #444 !important;
}
body.dark-mode .term-body {
    background-color: #252525 !important;
    color: #ddd !important;
}

/* 6. تحسينات إضافية */
body.dark-mode a {
    color: #64b5f6 !important; /* لون الروابط أزرق فاتح */
}
body.dark-mode .medco-term-trigger {
    color: #82b1ff !important;
    border-bottom-color: #82b1ff !important;
}
body.dark-mode .medco-term-trigger:hover {
    background-color: #333 !important;
}
/* =======================================================
   1. تصميم زر التبديل (Toggle Switch UI)
   هذا الكود سيحول المربع العادي إلى زر سحب
   ======================================================= */
.medco-toggle-label {
    position: relative;
    display: inline-flex; /* لترتيب النص بجانب الزر */
    align-items: center;
    gap: 10px; /* مسافة بين الزر والنص */
    cursor: pointer;
    margin-left: 15px; /* مسافة عن العناصر المجاورة */
}

/* إخفاء مربع الاختيار الاصلي */
.medco-toggle-label input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* شريط السحب (الخلفية) */
.medco-slider {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    background-color: #ccc;
    border-radius: 34px;
    transition: .4s;
}

/* الدائرة المتحركة داخل الزر */
.medco-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: .4s;
}

/* شكل الزر عند التفعيل (أزرق) */
.medco-toggle-label input:checked + .medco-slider {
    background-color: #2196f3;
}

/* حركة الدائرة لليمين عند التفعيل */
.medco-toggle-label input:checked + .medco-slider:before {
    transform: translateX(24px);
}

/* تنسيق النص بجانب الزر */
.label-text {
    font-size: 14px;
    font-weight: bold;
    color: #555;
}


/* =======================================================
   2. ألوان الوضع الليلي (Dark Mode Colors)
   هذه الألوان تعمل فقط عند إضافة كلاس dark-mode للـ body
   ======================================================= */

body.dark-mode {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}


/* أيقونات الصور والمصطلحات */
body.dark-mode .medco-term-trigger {
    color: #82b1ff !important;
    border-bottom-color: #82b1ff !important;
}

body.dark-mode .medco-img-trigger {
    color: #82b1ff !important;
}

/* النوافذ المنبثقة (Modal) */
body.dark-mode .term-header {
    background-color: #2c2c2c !important;
    border-bottom: 1px solid #444 !important;
}
body.dark-mode .term-header h3 {
    color: #fff !important;
}
body.dark-mode .term-body {
    background-color: #1e1e1e !important;
}
/* =========================================
   تصميم الجداول الاحترافي (Medical Tables)
   ========================================= */

/* 1. التصميم العام */
.medco-section-content table {
    width: 100%;
    border-collapse: collapse; /* دمج الحدود */
    margin: 20px 0;
    font-size: 0.95em;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
    border-radius: 8px 8px 0 0;
    overflow: hidden; /* لضمان زوايا مدورة */
}

/* 2. رأس الجدول (العناوين) */
.medco-section-content table thead tr {
    background-color: #009879; /* لون طبي أخضر داكن (يمكن تغييره للأزرق #2271b1) */
    color: #ffffff;
    text-align: left;
    font-weight: bold;
}

/* 3. الخلايا والصفوف */
.medco-section-content table th,
.medco-section-content table td {
    padding: 12px 15px;
    border: 1px solid #dddddd; /* حدود خفيفة */
}

/* 4. تلوين الصفوف (Zebra Striping) لسهولة القراءة */
.medco-section-content table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}
.medco-section-content table tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
}

/* 5. جعل الجدول متجاوب للموبايل (Scroll) */
.medco-section-content {
    overflow-x: auto; /* يسمح بالسحب يمين ويسار اذا الجدول عريض */
}

/* =========================================
   🔥🔥 دعم الوضع الليلي للجداول 🔥🔥
   ========================================= */
body.dark-mode .medco-section-content table thead tr {
    background-color: #333; /* رأس الجدول غامق */
    color: #fff;
}
body.dark-mode .medco-section-content table th, 
body.dark-mode .medco-section-content table td {
    border-color: #444; /* حدود غامقة */
    color: #e0e0e0;
}
body.dark-mode .medco-section-content table tbody tr:nth-of-type(even) {
    background-color: #2c2c2c; /* الصفوف الزوجية غامقة */
}
body.dark-mode .medco-section-content table tbody tr:nth-of-type(odd) {
    background-color: #1e1e1e; /* الصفوف الفردية أغمق */
}

/* =========================================
   إصلاح حجم النافذة المنبثقة للصور (Image Lightbox)
   ========================================= */

/* 1. جعل الحاوية تأخذ حجم الشاشة وإزالة المربع الأبيض */
.medco-modal-content-img {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 95vw !important; /* تأخذ 95% من عرض الشاشة */
    max-width: 1200px !important; /* أقصى حد للشاشات الكبيرة */
    max-height: 95vh !important; /* تأخذ 95% من طول الشاشة */
    background: transparent !important; /* إزالة الخلفية البيضاء */
    box-shadow: none !important;
    text-align: center;
    padding: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 2. جعل الصورة نفسها تكبر بذكاء بدون أن تتمطط (تتشوه) */
#medco-popup-img-tag {
    max-width: 100% !important;
    max-height: 95vh !important;
    object-fit: contain !important; /* يحافظ على أبعاد الصورة الأصلية */
    border-radius: 8px; /* حواف ناعمة اختيارية */
    box-shadow: 0 5px 25px rgba(0,0,0,0.5); /* ظل خفيف خلف الصورة لجمالية أكثر */
}

/* 3. تنسيق زر الإغلاق (X) ليكون واضح فوق الصورة */
.medco-modal.image-mode .white-x {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #ffffff !important;
    font-size: 45px;
    font-weight: bold;
    cursor: pointer;
    z-index: 999999;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8); /* ظل للزر عشان يبين لو كانت الصورة بيضاء */
}