/* modals-celebration-broadcast.css -- النوافذ المنبثقة العامة، احتفال 100 فاتورة، شريط الإعلان. */
/* ---------------------------- النوافذ المنبثقة (Modals) ---------------------------- */
/* openModal()/closeModal() بـ main.js يبدّلان display بين none و flex؛
   الخلفية المعتمة + ضبابية (backdrop-filter) تعطي إحساس التركيز على النافذة */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    /* padding + env(safe-area-inset-*) عشان محتوى المودال ما يجلس تحت نوتش/زر
       الجوال بشاشات الهواتف الحديثة (iPhone وغيرها) */
    padding: calc(15px + env(safe-area-inset-top)) calc(15px + env(safe-area-inset-right)) calc(15px + env(safe-area-inset-bottom)) calc(15px + env(safe-area-inset-left));
}

.modal-content {
    background: var(--card-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 20px;
    width: 100%;
    max-width: 650px;
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 25px;
    border: 1.5px solid var(--border-color) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), var(--shadow) !important;
    position: relative;
    color: var(--text-main) !important;
}

/* إصلاح جذري لمشكلة "تسرّب" المحتوى فوق عنوان النوافذ المنبثقة الطويلة
   (بلاغ حي صاحب المشروع 2026-09-01، ظهر بالجوال والحاسوب معاً): تركيبة
   position:sticky + overflow-y:auto + خلفية ضبابية على .modal الأب لها
   خلل رسم معروف بمتصفحات متعددة (محتوى مفروض يختفي خلف الرأس اللاصق
   يظهر بدله فوقه لجزء ثانية أثناء التمرير). الحل: فصل الرأس فعلياً عن
   منطقة التمرير -- .modal-content يصبح flex-column بلا تمرير خاص به
   (padding:0!important يتغلب على قاعدة الجوال تحت)، والرأس والمحتوى كل
   وحد بعنصر منفصل بالـclass المقابل. استُخدمت أول مرة بنافذة نشاط
   الحساب (userSettingsModal) ثم عُممت على أي نافذة تعاني نفس الخلل. */
.modal-header-fixed {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 25px 15px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.modal-body-scroll {
    overflow-y: auto;
    padding: 20px 25px 25px;
    min-height: 0;
}
.modal-content:has(> .modal-header-fixed) {
    padding: 0 !important;
}

/* تجاوب جدول مقارنة الباقات بالجوال (2026-09-01، بلاغ حي صاحب المشروع):
   جدول مقارنة جانبية حقيقي (عمود = باقة، صف = ميزة) -- تحويله لبطاقات
   متسلسلة كنافذة الاشتراك القصصية كان سيفقده غرضه الفريد (المقارنة
   الجانبية) ويكررها بلا فائدة.
   محاولة أولى: تثبيت عمود "الميزة" بـposition:sticky على <td>/<th> --
   فشلت حياً (تأكّد بفحص مباشر): containing block لعنصر sticky داخل
   جدول HTML هو الجدول نفسه لا نافذة العرض المرئية لحاوية overflow-x:auto
   الخارجية (قيد موثَّق بمواصفة CSS، غير قابل للإصلاح بـborder-collapse
   أو أي حيلة CSS أخرى طالما البنية جدول HTML عادي) -- كان يظهر فعلياً
   بمنتصف الشاشة متراكباً فوق المحتوى بدل البقاء بأقصى اليمين. البديل
   الواقعي: scroll-snap يجعل التمرير "يلتقط" كل عمود باقة كاملاً بدل
   التوقف بمنتصفه، مع تلميح نصي واضح -- لا تثبيت حقيقي، لكن تجربة
   تمرير نظيفة ومقصودة بدل جدول عشوائي الوقوف. */
.plan-compare-scroll-hint {
    display: none;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    margin: -12px 0 16px;
}
@media (max-width: 768px) {
    .plan-compare-scroll-hint { display: block; }
    /* #plansComparisonTable (لا .plan-compare-table) عمداً -- specificity
       الـid يتغلب على html.font-md td (سطر ~187، أعلى specificity من أي
       تركيبة class فقط بسبب عنصرين HTML+td) بغض النظر عن ترتيب الظهور */
    #plansComparisonTable th, #plansComparisonTable td { padding: 8px !important; font-size: 12.5px !important; }
    .plan-compare-scroll { scroll-snap-type: x proximity; }
    #plansComparisonTableHead th { scroll-snap-align: start; }
}

/* نافذة الاشتراك القصصية بالحاسوب (2026-09-01، بلاغ حي صاحب المشروع):
   "ماتغطي الشاشة كلها، يكون فيها من شفافية الموقع" -- 85vh/640px الافتراضية
   (مناسبة تماماً للجوال، حيث المساحة أصلاً محدودة) كانت تلامس شبه كامل
   ارتفاع شاشات اللابتوب الفعلية، فما تترك مساحة كافية تُظهر خلفية الموقع
   الضبابية (.modal الأب أصلاً عندها backdrop-filter:blur(4px) شغّالة --
   المشكلة كانت حجم الصندوق نفسه، لا غياب الشفافية). بالحاسوب فقط: صندوق
   أصغر وأقرب لحجم نوافذ الحوار (dialog) المعتادة، هامش واضح فوق وتحت
   يكشف الصفحة خلفه. */
@media (min-width: 769px) {
    /* تصحيح (بلاغ حي صاحب المشروع 2026-09-01 بلقطة شاشة حقيقية من لابتوبه):
       74vh كانت تترك سكرول داخلي رغم فراغ كبير واضح فوق وتحت النافذة على
       شاشته -- المشكلة الأصلية ("تغطي الشاشة") كانت بسبب العرض الزائد
       (640px) لا الارتفاع. 90vh (نفس قيمة .modal-content الافتراضية بكل
       نوافذ الموقع) تسمح للمحتوى الكامل بالظهور بلا سكرول على أي شاشة
       معقولة الحجم، وتتقلص تلقائياً لحجمها الطبيعي لو المحتوى أقصر --
       السكرول يبقى فقط كحل أخير على شاشة صغيرة فعلاً لا تكفي، كما طلب. */
    .checkout-story-dialog { max-width: 520px !important; max-height: 90vh !important; }
}

/* شبكة حقول مودال تعديل الفاتورة: تعرض الحقول (تسمية + إدخال) بعمودين
   جنب بعض بدل عمود واحد طويل يفيض خارج الشاشة، مع احترام اتجاه RTL
   (grid-auto-flow يتبع direction الموروثة تلقائياً زي flex-direction: row) */
.edit-invoice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 14px;
}
.edit-invoice-field label { font-size: 12px; font-weight: 700; margin-bottom: 6px; display: block; }
.edit-invoice-field input, .edit-invoice-field select, .edit-invoice-field textarea { margin: 0; width: 100%; box-sizing: border-box; }

@media (max-width: 560px) {
    .edit-invoice-grid { grid-template-columns: 1fr; }
}

/* شبكة حقول مودال تصدير Excel/PDF (exportFlowFieldsModal): نفس فكرة
   .edit-invoice-grid فوق -- بطاقات صغيرة بعدة أعمدة بدل قائمة طويلة بعمود
   واحد، عشان تختصر ارتفاع المودال وتسهّل مسح الخيارات بنظرة وحدة */
.export-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.export-fields-grid label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    background: var(--card-bg);
    border: 1.5px solid var(--border-color);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
/* مربعات الاختيار كانت بحجم المتصفح الافتراضي الصغير جداً، وما فيه أي
   إشارة بصرية واضحة (غير المربع نفسه) للحقول المختارة فعلاً */
.export-fields-grid input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--primary); flex-shrink: 0; cursor: pointer; }
.export-fields-grid label:has(input:checked) { border-color: var(--primary); background: rgba(var(--primary-rgb), 0.08); }

@media (max-width: 560px) {
    .export-fields-grid { grid-template-columns: 1fr; }
}

/* بطاقات خيارات معالجة الصور بنفس المودال: كل خيار بطاقة مستقلة (عنوان +
   وصف) بشبكة تتكيف مع عدد الخيارات الظاهرة فعلياً (بعضها يظهر/يختفي حسب
   صيغة التصدير المختارة بالخطوة السابقة -- شوف updateImagesMode بـ main.js) */
.export-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}
.export-images-grid label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    background: var(--card-bg);
    border: 1.5px solid var(--border-color);
    transition: border-color 0.15s ease;
}
/* نفس إصلاح checkbox حقول التصدير (.export-fields-grid أعلاه) لكن هنا
   لدوائر الاختيار (radio) -- كانت بحجم المتصفح الافتراضي الصغير جداً بلا
   أي إشارة بصرية واضحة للخيار المُحدَّد فعلاً */
.export-images-grid input[type="radio"] { width: 20px; height: 20px; accent-color: var(--primary); flex-shrink: 0; cursor: pointer; }
.export-images-grid label:has(input:checked) { border-color: var(--primary); background: rgba(var(--primary-rgb), 0.08); }

/* المرحلة 142: شارة صغيرة بالصفحة الرئيسية توضح حالة ربط البريد الإلكتروني
   بدون ما يحتاج المستخدم يفتح درج الإعدادات -- يضغطها يفتح الدرج مباشرة */
.mail-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    white-space: nowrap;
}
.mail-status-badge.linked { background: rgba(34, 197, 94, 0.12); color: #16a34a; border: 1.5px solid rgba(34, 197, 94, 0.35); }
.mail-status-badge.unlinked { background: rgba(148, 163, 184, 0.15); color: var(--text-muted); border: 1.5px solid var(--border-color); }

/* عارض الصورة المكبّر يظهر فوق أي نافذة أخرى مفتوحة (z-index أعلى) */
#imageViewerModal { z-index: 2000 !important; }

/* نافذة تفاصيل الفاتورة تُفتح أحياناً من فوق نافذة أخرى مفتوحة أصلاً (مثلاً
   زر "معاينة الفاتورة" داخل شاشة تحديد نطاق التصدير) -- بدون z-index أعلى
   من قاعدة .modal الافتراضية (1000)، كانت #exportFlowScopeModal (متأخرة
   بترتيب DOM) تبقى فوقها بصرياً دائماً بغض النظر عن أيّهما فُتح لاحقاً */
#invoiceModal { z-index: 1200 !important; }

/* المرحلة 142: نفس فكرة #invoiceModal أعلاه، لعموم النوافذ اللي تُفتح
   أحياناً من فوق نافذة أخرى مفتوحة أصلاً -- بدون هذا، أي نافذة "فرعية"
   (تعديل صنف، تأكيد حذف، ربط بريد...) تُفتح من داخل نافذة تفاصيل الفاتورة
   أو درج الإعدادات كانت تظهر خلفها لأن كل .modal تشترك نفس z-index
   الافتراضي (1000)، فترتيب DOM (لا وقت الفتح الفعلي) هو اللي يحدد الأعلى.
   طبقتان: نوافذ "فرعية" تُفتح من نافذة تفاصيل مفتوحة أصلاً (1400)، ونوافذ
   التأكيد/التنبيه العامة اللي ممكن تُستدعى من أي سياق بالموقع كله (1800،
   دايماً أعلى من كل نافذة عادية عدا عارض الصورة المكبّر). */
#editItemModal, #editModal, #deleteModal,
#deleteFolderChoiceModal, #deleteFolderConfirmModal,
#moveInvoiceModal, #bulkMoveModal, #changePasswordModal,
#deleteDataConfirmModal, #deleteDataOTPModal,
#deleteAllSiteDataConfirmModal, #deleteAllSiteDataOTPModal,
#logDetailsModal, #mailConnectionModal, #mailConsentModal,
#upgradeContactModal {
    /* upgradeContactModal أُضيفت 2026-09-01: تُفتح الآن من فوق checkoutModal
       المفتوحة أصلاً (بلا إغلاقها، عشان زر "رجوع" يشتغل -- شوف 24dc8a0)،
       فنفس مشكلة "الترتيب بالـDOM لا وقت الفتح" أعلاه تنطبق عليها حرفياً --
       كانت تُفتح فعلياً لكن تبقى مختفية خلف checkoutModal (نفس z-index،
       ومتأخرة بترتيب الـDOM) فتظهر كشاشة معتمة بلا أي محتوى. */
    z-index: 1400 !important;
}

#genericConfirmModal, #genericAlertModal, #genericPromptModal {
    z-index: 1800 !important;
}

/* ---------------------------- شاشة احتفال 100 فاتورة ---------------------------- */
/* إصلاح: كانت الإيموجي مربوطة بحركة اسمها "bounce" بدون أي @keyframes بهذا
   الاسم معرّف بالمشروع (لا هنا ولا بأي مكتبة خارجية محمّلة) -- الإيموجي
   كانت تجلس ثابتة تماماً بلا أي حركة فعلياً. الحركة الجديدة: دخول بقفزة
   واحدة (scale من صفر مع overshoot خفيف) بمنحنى --ease-out المعتمد بالمشروع
   بدل bounce/elastic (ممنوعة صراحة -- تبين قديمة ومصطنعة)، تتبعها نبضة
   scale هادئة مستمرة بمنحنى --ease-in-out نفسه المستخدم بباقي حركات الموقع */
@keyframes celebrationPop {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes celebrationPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
.celebration-emoji {
    display: inline-block;
    animation: celebrationPop 0.5s var(--ease-out) both,
               celebrationPulse 2.2s var(--ease-in-out) 0.5s infinite;
}

/* ---------------------------- شريط الإعلان الجماعي (Broadcast Banner) ---------------------------- */
/* نص الإعلان يتحرك بشكل نشرة أخبار (marquee) بدل ما يجلس ثابت بنص الشاشة --
   الأيقونة ثابتة دايماً، بس النص (#broadcastText) هو اللي ينزلق داخل مسار
   (.broadcast-track) بعرض الشريط الكامل مع overflow:hidden. */
.broadcast-banner {
    display: none;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    padding: 10px 5%;
    font-weight: 800;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    border-bottom: 1.5px solid var(--border-color);
}

.broadcast-track {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    /* تلاشي تدريجي (fade) عند طرفي مسار الحركة -- بدون هذا كان النص
       يُقطع بشكل حاد ومفاجئ لحظة ما يدخل/يخرج من حدود overflow:hidden
       (بالذات بالزاوية اللي يدخل منها، يبان قطع خشن للحرف). mask-image
       بتدرج شفافية يخلي الظهور/الاختفاء تدريجي بدل قطع فجائي -- على
       الطرفين الفعليين (يسار/يمين) بغض النظر عن اتجاه اللغة، لأن النص
       ممكن يدخل من أي طرف حسب عربي/إنجليزي (شوف
       updateBroadcastMarqueeDirection بـ main.js) */
    -webkit-mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
}

/* إصلاح جذري: خدعة padding-inline-start:100% (الأسلوب القياسي المعروف
   لهذا النوع من الـ marquee) طلعت لا تشتغل صح بفايرفوكس مع هذا العنصر
   تحديداً -- المربّع نفسه يتحرك فعلياً (تأكدنا بفحص العنصر) لكن النص
   يختفي بدل ما يتحرك معه. بدل الاعتماد على نسبة % مبنية على padding ضخم
   جداً (تصل لآلاف البكسلات)، نحسب نقطتي البداية/النهاية بالبكسل الفعلي
   من main.js (fetchPublicBroadcast) ونمررهما كمتغيرات CSS -- أوضح للتصحيح
   وما يعتمد على أي حيلة padding هشّة. بالمرة يفتح المجال نتحكم بالاتجاه:
   بالعربي (RTL) يدخل من اليسار الفعلي ويطلع لليمين، وبالإنجليزي (LTR)
   يدخل من اليمين ويطلع لليسار (نفس السلوك الأصلي) -- transform فيزيائي
   دايماً، فهذا يحتاج قيمتين مختلفتين حسب الاتجاه، تُحسبان بـ JS */
#broadcastText {
    display: inline-block;
    white-space: nowrap;
    animation-name: broadcastMarquee;
    animation-duration: 20s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

@keyframes broadcastMarquee {
    from { transform: translateX(var(--marquee-from, 100%)); }
    to { transform: translateX(var(--marquee-to, -100%)); }
}