*, *::before, *::after {
  box-sizing: border-box;
}

* {
  font-family: 'Tajawal', sans-serif;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  background: white;
  overflow: auto; /* يسمح بالتمرير إذا تجاوز المحتوى ارتفاع النافذة */
}

/* الحاوية الرئيسية: يتم ترتيبها أفقيًا */
#mainContainer {
  display: flex;
  flex-direction: row;
  height: 100vh;
  padding-left: 150px;    /* مساحة للشريط الجانبي */
  padding-top: 80px;      /* مساحة لشريط الأدوات العلوي */
  padding-right: 175px;   /* مساحة لواجهة القوالب اليمنى */
  box-sizing: border-box;

  overflow: visible; /* <<<< هذا هو التغيير: تم استبدال overflow-x و overflow-y */
}



/* الشريط الجانبي */
#sidebar {
  width: 150px;
  background: linear-gradient(180deg, #1f3c5a1f, #34495e00);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: fixed;
  top: 0px;       /* يبدأ تحت شريط الأدوات—غيّر القيمة حسب ارتفاع شريط الأدوات لديك */
  bottom: 0;       /* ينتهي عند أسفل النافذة */
  left: 0;         /* يثبت على اليسار */
}


/* تنسيق أزرار الشريط الجانبي */
#sidebar button {
  background: linear-gradient(45deg, #c0c0c0, #e0e0e0) !important;
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 3px;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: background 0.3s, transform 0.2s;
}

#userTemplatesContainer {
  flex-grow: 1; /* لملء المساحة المتبقية */
  overflow-y: auto; /* تفعيل التمرير العمودي عند الحاجة */
  min-height: 0; /* مهم لجعل التمرير يعمل بشكل صحيح داخل flex container */
  /* يمكنك إضافة padding أو margin هنا إذا أردت */
  padding-top: 5px; /* مثال: لإضافة مسافة فوق أول عنصر */
  display: flex; /* إضافة flex لتوزيع العناصر داخله إذا أردت */
  flex-direction: column; /* ترتيب القوالب عمودياً */
  gap: 0px; /* المسافة بين عناصر القوالب */
}

/* تخصيص شريط التمرير داخل قائمة قوالب المستخدم */
#userTemplatesContainer::-webkit-scrollbar {
  width: 8px;
}
#userTemplatesContainer::-webkit-scrollbar-track {
  background: #fafafa;
  border-radius: 4px;
}
#userTemplatesContainer::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 10px;
  border: 2px solid transparent;
  background-color: rgba(204, 204, 204, 0.7);
}

/* دعم Firefox */
#userTemplatesContainer {
  scrollbar-width: thin;
  scrollbar-color: #ccc #fafafa;
}
/* خطوة 1: اجعل الـscrollbar في #userTemplatesContainer يظهر على اليسار */
#userTemplatesContainer {
  direction: rtl;          /* يقلب المسار الأفقي للتمرير */
}

/* خطوة 2: أعد ضبط محتوى العناصر الداخلية ليظل بالاتجاه الطبيعي */
#userTemplatesContainer > * {
  direction: ltr;          /* يحافظ على ترتيب المحتوى كما هو */
}


/* قد تحتاج لتعديل margin على .user-template-item إذا كنت تستخدمه */
.user-template-item {
   margin: 0; /* الاعتماد على gap في الحاوية */
}

#sidebar button:hover {
  background: linear-gradient(45deg, #e0e0e0, #c0c0c0) !important;
  transform: scale(1.03);
}


/* === القاعدة المعدلة لـ #canvasArea === */
/* منطقة الكانفس */
#canvasArea {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px;
  margin-top: 0px;      /* تحت شريط الأدوات */

  overflow: visible; /* <<<< هذا هو التغيير: تم استبدال overflow-x و overflow-y */
}

/* === إخفاء أشرطة التمرير داخل حاوية Fabric.js (إن وجدت) === */
.canvas-container {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;     /* يمنع ظهور أي scroll داخل الكانتينر */
}


/* 1) ضبط شريط الأدوات ليكون ثابتًا في الأعلى بشكل مركزي */
#controlPanelContainer {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: top 0.3s ease;
    width: max-content;
    background: linear-gradient(180deg, rgb(226 97 242 / 0%), rgb(0 27 255 / 9%));
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 1px 60px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 900;
    /* قم بإلغاء تدوير الحواف العلوية */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    /* والحفاظ على تدوير الحواف السفلية */
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.control-group { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.control-group label { margin-right: 2px; }
.control-group input,
.control-group select,
.control-group button {
  padding: 5px 6px;
  font-size: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
background: #f1f1f1;
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.control-group input:focus,
.control-group select:focus,
.control-group button:focus {
  outline: none;
  border-color: #2c3e50;
  box-shadow: 0 0 5px rgba(44,62,80,0.5);
}
.templates-panel {
  position: fixed;       /* تثبيته بالنسبة للنافذة */
  top: 0;                /* وضعه في أعلى الصفحة */
  right: 0;              /* وضعه في أقصى اليمين */
  width: 175px;
  height: 100vh;         /* ليأخذ كامل ارتفاع النافذة */
  background: linear-gradient(180deg, #1f3c5a1f, #34495e00);
  border-left: none;     /* إلغاء الحد الأيسر إن وجد */
  overflow-y: auto;      /* تمكين التمرير العمودي عند الحاجة */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px;
  z-index: 5;         /* رفع مستوى العنصر فوق باقي العناصر */
}

.templates-panel img {
  height: 100px;
  margin: 5px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 8px;
  transition: transform 0.3s, border 0.3s;
}
.templates-panel img:hover {
  border: 2px solid #333;
  transform: scale(1.05);
}
.templates-panel::-webkit-scrollbar { width: 8px; }
.templates-panel::-webkit-scrollbar-track { background: #fafafa; border-radius: 4px; }
.templates-panel::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 10px; }



/* === القاعدة المعدلة لـ .canvas-container === */
.canvas-container {
  /* لم تعد بحاجة لـ flex هنا لتوسيط الكانفاس */
  /* يمكنك الاحتفاظ بالظل والحدود إذا أردت */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-radius: 8px; /* أبقي على الحواف الدائرية للظل */
  line-height: 0; /* لمنع مسافات إضافية حول الكانفاس */
  /* تأكد من أنها لا تتداخل مع توسيط #canvasArea */
  max-width: 100%; /* السماح لها بأخذ عرض الكانفاس بداخلها */
margin-top: 0px;
}



/* ======================================= */

/* === القاعدة المعدلة لـ #certificateCanvas === */
#certificateCanvas {
  border: 2px solid #ddd;
  background: #fff;
  border-radius: 8px; /* قد ترغب بجعلها 0 إذا كانت الحاوية لها حدود دائرية */
  display: block; /* ممارسة جيدة للكانفاس */
  /* تأكد تماماً من عدم وجود width, height, max-width, max-height هنا */
}
/* ======================================== */

button {
  background: linear-gradient(45deg, #ffffff, #e0e0e0) !important;
  color: #000 !important;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
  transition: transform 0.2s, background 0.3s, box-shadow 0.3s;
}
button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  background: linear-gradient(45deg, #e0e0e0, #c0c0c0) !important;
}
select { color: #000; }

/* إعدادات النوافذ المنبثقة */
#saveOptionsModal .modal-content,
#batchSaveOptionsModal .modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  width: 300px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  gap: 10px;
z-index: 100; /* قيمة أعلى لتظهر فوق شريط التعديل */
}
#batchSendModal .modal-content button { padding: 10px 15px; font-size: 14px; }
#batchSendModal .modal-content input[type="text"] { height: 40px; font-size: 14px; }
.table-wrapper { max-height: 400px; overflow-y: auto; }
#batchTable { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
#batchTable th, #batchTable td {
  border: 1px solid #ccc;
  padding: 5px;
  font-size: 12px;
  text-align: center;
}
#batchTable input[type="text"] {
  width: 100%;
  padding: 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
/* إعدادات النوافذ المنبثقة */
#saveOptionsModal,
#smartSearchModal,
#batchDownloadModal,
#batchSendModal,
#batchSaveOptionsModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
#closeBatchSendBtn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #000;
z-index: 1000;
}

/* تصميم قائمة السياق المخصصة */
.context-menu {
  display: none; /* مخفية بشكل افتراضي */
  position: absolute; /* لتحديد موضعها بدقة */
  z-index: 10000; /* فوق كل العناصر الأخرى */
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 0; /* إزالة الحشو الافتراضي للقائمة */
}

.context-menu ul {
  list-style: none;
  margin: 0;
  padding: 5px 0; /* إضافة حشو داخلي للقائمة */
}

.context-menu ul li {
  padding: 8px 15px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  position: relative; /* مهم لموضع القائمة الفرعية */
  white-space: nowrap; /* منع التفاف النص */
}

.context-menu ul li:hover {
  background-color: #eee;
}

/* الخط الفاصل */
.context-menu ul li.ctx-separator {
  border-top: 1px solid #e0e0e0;
  margin-top: 4px;
  padding-top: 4px;
  height: 1px; /* مجرد فاصل بصري */
  cursor: default;
  background-color: transparent !important; /* لا يتغير لونه عند المرور */
}
.context-menu ul li.ctx-separator:hover {
   background-color: transparent; /* التأكيد على عدم تغيير اللون */
}


/* تصميم القوائم الفرعية */
.context-menu ul li .submenu {
  display: none; /* إخفاء القائمة الفرعية افتراضياً */
  position: absolute;
  left: 100%; /* الظهور على يمين العنصر الأب */
  top: -5px; /* محاذاة رأس القائمة الفرعية مع العنصر الأب (مع تعديل بسيط) */
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 5px 0;
}

/* إظهار القائمة الفرعية عند مرور الماوس فوق العنصر الأب */
.context-menu ul li:hover > .submenu {
  display: block;
}

/* تصميم سهم القائمة الفرعية (اختياري) */
.context-menu ul li span {
    display: inline-block;
    margin-left: 5px; /* مسافة بسيطة قبل السهم */
}

/* (اختياري) تعطيل الخيارات غير المتاحة */
.context-menu ul li.disabled {
    color: #aaa;
    cursor: default;
    background-color: transparent !important;
}
.context-menu ul li.disabled:hover {
     background-color: transparent;
}



/* تنسيق شريط الأدوات النصية */
#contextualToolbar {
z-index: 10; /* قيمة منخفضة ليظهر تحت النوافذ المنسدلة */
  background: #fff;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  font-size: 10px;
  top: 50px; /* تم تقليل القيمة من 70px إلى 50px */
}

/* تنسيق مجموعات الأدوات */
#contextualToolbar .toolbar-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* تقليص عرض حقول الأرقام داخل شريط الأدوات */
#contextualToolbar input[type="number"] {
  width: 30px; /* قلل القيمة حسب الحاجة */
  min-width: 0; /* لضمان السماح بتصغير العرض دون قيود */
  text-align: center; /* لجعل القيمة في المنتصف (اختياري) */
}


/* تنسيق كل مجموعة فرعية بحيث تظهر العلامة فوق العنصر */
.form-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

/* تنسيق العناصر داخل الشريط */
#contextualToolbar label {
  font-size: 10px;
}
#contextualToolbar select,
#contextualToolbar input,
#contextualToolbar button {
  padding: 2px;
  font-size: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
}

.toolbar-separator {
  width: 1px;           /* سمك الخط */
  height: 40px;         /* ارتفاع الفاصل */
  background-color: #ccc; /* لون الفاصل */
  margin: 0 5px;       /* مسافة على اليمين واليسار */
}

/* المودال الكامل يغطي الشاشة */
.modal {
  display: none; /* مخفي افتراضيًا */ /* <<< الحفاظ على هذا السطر */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* خلفية شفافة */
  /* display: flex; */ /* <<< حذف أو تعليق هذا السطر */
  align-items: center; /* توسيط عمودي (يبقى) */
  justify-content: center; /* توسيط أفقي (يبقى) */
  z-index: 1000; /* (يبقى) */
}


/* محتوى المودال */
.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  min-width: 300px;
}

/* تنسيق النموذج داخل المودال */
#certificateSizeForm label {
  display: block;
  margin: 10px 0;
}

/* تنسيق أزرار المودال */
.modal-buttons {
  margin-top: 20px;
}

.modal-buttons button {
  margin: 0 10px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background: linear-gradient(45deg, #c0c0c0, #e0e0e0);
  transition: transform 0.2s;
}

/* نافذة المودال ارسال جماعي  */
#batchSendModal {
  display: none; /* مخفي افتراضياً */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  align-items: center;
  justify-content: center;
  z-index: 200;
}

/* الكود الصحيح الذي يجب استبداله بالكود الخاطئ */
#batchSendModal .modal-content {
    position: relative;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* زر الإغلاق أعلى المودال (اختياري) */
#closeBatchSendBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #000;
}

/* نص العنوان والوصف */
#batchSendModalContent h3 {
  margin: 0;
  text-align: center;
}
#batchSendModalContent p {
  margin: 0;
  text-align: center;
  font-size: 14px;
}

/* منطقة الجدول */
.table-wrapper {
  flex: 1; /* اجعل الجدول يتمدد عمودياً */
  overflow-y: auto; /* شريط تمرير عند زيادة عدد الصفوف */
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
}

/* تنسيق الجدول */
#batchTable {
  width: 100%;
  border-collapse: collapse;
}
#batchTable th, #batchTable td {
  border: 1px solid #ccc;
  padding: 5px;
  font-size: 10px;
  text-align: center;
}

/* جعل حقول "نص الرسالة" و"الاسم المطبوع" مختلفة العرض */
#batchTable input[type="text"],
#batchTable input[type="tel"] {
  width: 90%;
  padding: 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 10px;
}

/* السطر السفلي: توزيع أفقي للعناصر */
.batch-send-options-row {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* ترتيب العناصر إلى اليمين */
  gap: 2px;
}


/* إذا أردت توزيعاً مختلفاً (مثلاً كلها في جهة اليسار)، استبدل بـ:
   justify-content: flex-start; أو center; أو flex-end
*/

/* التحكم في حجم الأزرار السفلية */
.batch-send-options-row button {
  padding: 10px 15px;
  font-size: 14px;
}

/* تنسيق مجموعات الدقة والصيغة */
.batch-send-options-row .control-group {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  gap: 3px; /* مسافة بسيطة بين اللابل والقائمة */
  align-items: flex-start; /* محاذاة العناصر إلى اليسار */
}

.batch-send-options-row .control-group select {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}


.modal-buttons button:hover {
  transform: scale(1.05);
}


/* مجموعة زر إدراج الأشكال */
.control-group.shapes-group {
  position: relative; /* لضمان تموضع لوحة الخيارات بالنسبة للزر */
  display: flex;
  align-items: center;
  gap: 5px;
font-size: 10px;
}

/* زر إدراج الأشكال */
#insertShapeBtn {
  padding: 5px 6px;
  font-size: 10px;
}

/* لوحة الخيارات المنبثقة الاشكال*/
.shapes-panel {
display: none;
  position: absolute;
  top: 40px; /* موضعها أسفل الزر، قم بتعديل القيمة حسب الحاجة */
  left: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  z-index: 1000;
  gap: 5px;
}

.shape-option {
  cursor: pointer;
  display: inline-block; /* أو block إن أردت أن يكون كل شكل في سطر منفصل */
  margin: 5px;
  padding: 5px;
  /* يمكنك إضافة خلفية أو حدود عند التحويم إن رغبت */
}
.shape-option:hover {
  background-color: #eee;
}

/* خلفية الموقع */
body {
    background-color: #f0f0f0; /* يمكنك اختيار أي درجة من الرمادي */
}

.size-option {
  margin-bottom: 10px;
}

.size-option label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.paper {
  border: 1px solid #ccc;
  background: #fff;
  margin-right: 10px;
}

/* تصميم الورقة العمودية */
.paper.portrait {
  width: 80px;
  height: 120px;
}

/* تصميم الورقة الأفقية */
.paper.landscape {
  width: 120px;
  height: 80px;
}

#certificateSizeForm {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px; /* مسافة بين الخيارات */
}

/* تنسيق قسم النصوص الجاهزة */
#readyTextSection {
  position: relative;
  margin: 10px;
}

/* تنسيق زر فتح القائمة */
#readyTextBtn {
  background-color: #3498db;
  color: #fff;
  border: none;
  padding: 5px 6px;
  cursor: pointer;
  border-radius: 5px;
font-size: 10px;
border: 1px solid #ccc;
}

#readyTextSection {
    position: relative; /* <--- أضف هذه القاعدة المهمة جداً */
    /* ملاحظة: قد تحتاج لاحقاً لتحديد عرض أو محاذاة لهذا القسم */
    /* لضمان أنه يأخذ مساحة كافية، لكن جرب position أولاً */
    /* display: inline-block; */ /* قد يكون هذا مفيداً أيضاً */
}

/* --- بداية: التنسيق الجديد لقائمة النصوص الجاهزة --- */

#readyTextDropdown {
  display: none; /* مخفية افتراضياً، يتم التحكم بها عبر JS */
  position: absolute; /* تحديد الموقع */
  top: 110%; /* أسفل زر الفتح */
  /* تحديد المحاذاة الأفقية (جرب right: 0; أو left: 0; أو التوسيط حسب رغبتك) */
  /* مثال: محاذاة لليمين */
  /* left: 50%; transform: translateX(-50%); */ /* مثال: للتوسيط */

  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  z-index: 1000; /* فوق العناصر الأخرى */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);

  /* --- تخطيط Flexbox الجديد --- */
  flex-wrap: wrap; /* السماح بانتقال العناصر لسطر جديد */
  gap: 12px; /* المسافة بين العناصر */
  justify-content: flex-start; /* محاذاة العناصر بدايةً من اليمين (أو اليسار حسب اتجاه الصفحة) */
  align-items: flex-start; /* محاذاة العناصر لأعلى */

  padding: 15px; /* حشوة داخلية للقائمة */

  /* --- قيود الحجم والتمرير --- */
  width: auto; /* العرض يتمدد حسب المحتوى */
  max-width: 360px; /* مثال: حد أقصى لعرض القائمة (يمكن تعديله) */
  min-width: 200px; /* مثال: حد أدنى لعرض القائمة */
  max-height: 400px; /* أقصى ارتفاع للقائمة */
  overflow-y: auto; /* إضافة شريط تمرير عمودي عند الحاجة */
  overflow-x: hidden; /* منع التمرير الأفقي */
}

/* --- تنسيق كل عنصر (الحاوية التي تحتوي الصورة) داخل القائمة --- */
.ready-text-image-item { /* هذا الكلاس سنضيفه عبر JS */
  border: 1px solid #eee;
  padding: 5px;
  border-radius: 4px;
  /* لا نحدد عرضاً ثابتاً هنا، نجعله يعتمد على الصورة */
  margin: 0; /* تم نقل المسافات إلى gap في الحاوية الرئيسية */
  background-color: #f9f9f9;
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s;
  text-align: center; /* لتوسيط الصورة إذا كانت أصغر من الحاوية */
  flex-grow: 0; /* عدم السماح للعنصر بالتمدد لملء المساحة */
  flex-shrink: 0; /* عدم السماح للعنصر بالانكماش */
}

.ready-text-image-item:hover {
  background-color: #e9e9e9;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* --- تنسيق الصورة المصغرة نفسها داخل كل عنصر --- */
.ready-text-image-item img {
  display: block; /* لإزالة أي مسافات سفلية */
  max-width: 100%; /* الصورة تصغر لتناسب الحاوية */
  height: auto; /* الحفاظ على نسبة أبعاد الصورة */
  /* يمكنك تحديد أقصى ارتفاع إذا أردت */
  /* max-height: 80px; */
  margin: 0 auto; /* لتوسيط الصورة داخل حاويتها */
}

/* --- (اختياري) تنسيق شريط التمرير (يبقى كما هو من الكود القديم إذا أردت) --- */
#readyTextDropdown::-webkit-scrollbar { width: 8px; }
#readyTextDropdown::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
#readyTextDropdown::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }
#readyTextDropdown::-webkit-scrollbar-thumb:hover { background: #aaa; }

/* --- نهاية: التنسيق الجديد --- */

#batchSendModal .modal-content {
  z-index: 1000;
  position: relative;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#userTemplateContextMenu ul li:hover {
  background-color: #eee;
}

/* نجعل مدخل اللون والزر في صف أفقي */
#contextualToolbar .text-bg-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;  /* مسافة بسيطة بين الـ label والصف الأفقي */
}

/* إخفاء الشريط افتراضيًا */
#contextualToolbar {
  display: none;           /* سيكون المخفي الافتراضي */
  position: fixed;         /* ثابت بالنسبة للنافذة */
  top: 50px;               /* اضبط المسافة أسفل لوحة التحكم */
  left: 40%;
  z-index: 10000;          /* فوق كل العناصر */
  cursor: move;
  background: #fff;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  flex-wrap: wrap;
  gap: 5px;
  font-size: 10px;
}

/* عندما نضيف الصنف active، يظهر الشريط */
#contextualToolbar.active {
  display: flex;
}

/* ================================================ */
/* === تنسيق زر تحميل المزيد (ضمن القائمة) === */
/* ================================================ */
#loadMoreTemplatesBtn {
  display: block; /* اجعل عرضه يأخذ السطر ويسمح بالتوسيط */
  width: auto; /* اجعل العرض يتناسب مع النص */
  max-width: 90%; /* حد أقصى للعرض داخل الحاوية */
  margin: 25px auto 15px auto; /* هامش علوي أكبر قليلاً، توسيط أفقي، هامش سفلي */
  padding: 10px 25px;
  height: auto;

  /* --- إعادة التموضع ليكون ضمن التدفق الطبيعي --- */
  position: relative; /* أو يمكنك حذف هذه القاعدة ليعود للوضع الافتراضي static */
  /* --- تم حذف z-index, bottom, right, left, transform --- */

  /* --- التنسيقات المرئية (يمكن الإبقاء عليها أو تعديلها) --- */
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  transition: background-color 0.3s;
}

#loadMoreTemplatesBtn:hover {
  background-color: #ddd;
}

#loadMoreTemplatesBtn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background-color: #f8f8f8;
}


  /* --- شريط البحث --- */
#templateSearchContainer {
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
}

#templateSearchInput {
  padding: 2px;
  flex: 1; /* تم الافتراض هنا أن flex- كان يعني flex: 1 لتمدد الحقل */
  border: 1px solid #00adff;
  border-radius: 6px;
  min-width: 50px;
transform: translateY(2px);
    width: 125px;
}

#templateSearchBtn,
#clearSearchBtn {
  padding: 2px;
  width: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
transform: translateY(2px);

}

#clearSearchBtn {
  display: none; /* يبقى هذا النمط هنا لأنه قد يتم التحكم به بواسطة JavaScript */
}
  /* --- بداية: تنسيقات زر حذف النص الجاهز --- */

/* التأكد من أن حاوية النص الجاهز يمكنها احتواء الزر ذي الموضع المطلق */
.ready-text-image-item {
  position: relative; /* ضروري لتحديد موضع الزر بداخله */
  /* لا تحذف التنسيقات الأخرى الموجودة لديك لهذا الكلاس */
}

/* تنسيق زر الحذف نفسه */
.delete-ready-text-btn {
  position: absolute; /* تحديد الموضع بالنسبة للحاوية الأم */
  top: 3px;         /* مسافة صغيرة من الأعلى */
  left: 3px;        /* مسافة صغيرة من اليسار (أو استخدم right: 3px; لليمين) */
  background-color: rgba(220, 53, 69, 0.65); /* أحمر شبه شفاف (يمكن تغيير اللون) */
  color: white;
  border: 1px solid rgba(0, 0, 0, 0.2); /* حد بسيط */
  border-radius: 50%; /* لجعله دائريًا */
  width: 20px;      /* عرض الزر */
  height: 20px;     /* ارتفاع الزر */
  padding: 0;       /* إزالة الحشو الداخلي */
  font-size: 11px;  /* حجم الأيقونة (سلة المهملات) */
  line-height: 18px; /* لمحاذاة الأيقونة عموديًا بشكل أفضل */
  text-align: center;
  cursor: pointer;
  z-index: 5;       /* ليظهر فوق الصورة إذا تداخل معها */
  transition: background-color 0.2s, transform 0.1s; /* تأثير بسيط للحركة واللون */
  box-shadow: 0 1px 2px rgba(0,0,0,0.2); /* ظل بسيط */
  display: flex; /* لتوسيط المحتوى (الأيقونة) بسهولة */
  align-items: center; /* توسيط عمودي للمحتوى */
  justify-content: center; /* توسيط أفقي للمحتوى */
}

/* تغيير بسيط عند مرور الماوس */
.delete-ready-text-btn:hover {
  background-color: rgba(220, 53, 69, 0.9); /* يصبح اللون أغمق قليلاً */
  transform: scale(1.1); /* يكبر قليلاً */
}

/* تغيير بسيط عند الضغط على الزر */
.delete-ready-text-btn:active {
   transform: scale(1.0); /* يعود لحجمه الأصلي عند الضغط */
}

/* --- نهاية: تنسيقات زر حذف النص الجاهز --- */

/* --- بداية: تنسيقات زر حذف قالب الشهادة --- */

/* الحاوية التي تجمع الصورة والزر */
.template-item-container {
  position: relative; /* ضروري لتحديد موضع الزر بداخله */
  display: block; /* اجعل الحاوية تأخذ عرضًا كاملاً إذا كانت القائمة عمودية */
  margin-bottom: -10px; /* مسافة بين حاويات القوالب */
  line-height: 0; /* لمنع مسافات إضافية حول الصورة */
  /* يمكنك إضافة حدود أو خلفية للحاوية إذا أردت */
}

/* تنسيق زر الحذف نفسه (استخدمنا اسم كلاس جديد) */
.delete-template-btn {
  position: absolute; /* تحديد الموضع بالنسبة للحاوية */
  top: 5px;         /* مسافة من الأعلى (يمكن تعديلها) */
  right: 5px;       /* مسافة من اليمين (يمكن تغييرها إلى left: 5px; لليسار) */
  width: 24px;      /* عرض أكبر قليلاً ليناسب القوالب الأكبر */
  height: 24px;     /* ارتفاع أكبر قليلاً */
  background-color: rgba(220, 53, 69, 0.75); /* أحمر أكثر وضوحًا قليلاً */
  color: white;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 4px; /* يمكن جعله مربعًا أكثر */
  padding: 0;
  font-size: 14px;  /* حجم أكبر للأيقونة */
  line-height: 22px; /* تعديل المحاذاة العمودية */
  text-align: center;
  cursor: pointer;
  z-index: 10;       /* تأكد من ظهوره فوق الصورة */
  transition: background-color 0.2s, transform 0.1s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8; /* يمكن جعله شبه شفاف مبدئيًا */
}

/* تأثيرات عند المرور والضغط (مشابهة للزر الآخر) */
.template-item-container:hover .delete-template-btn {
 opacity: 1; /* يظهر بشكل كامل عند مرور الماوس فوق الحاوية */
}

.delete-template-btn:hover {
  background-color: rgba(220, 53, 69, 1.0); /* يصبح اللون كاملاً */
  transform: scale(1.1);
}

.delete-template-btn:active {
   transform: scale(1.0);
}
/* --- نهاية: تنسيقات زر حذف قالب الشهادة --- */

/* ========================================================================== */
/* === بداية: تنسيقات قائمة عناصر التصميم (تحل محل تنسيقات icons-dropdown القديمة) === */
/* ========================================================================== */

/* حاوية مجموعة الزر والقائمة المنسدلة (يمكنك تسميتها .design-elements-group إذا غيرت الكلاس في HTML) */
.icons-group { /* أو إذا غيرت الكلاس في HTML إلى .design-elements-group */
  position: relative; /* ضروري لتموضع القائمة المنسدلة بشكل صحيح */
}

/* القائمة المنسدلة الرئيسية لعناصر التصميم */
.design-elements-dropdown {
  display: none; /* يتم التحكم بالظهور عبر JavaScript */
  position: absolute;
  top: 100%; /* تظهر أسفل الزر الذي يفتحها */
  left: 0;   /* محاذاة لليسار (أو right: 0; لليمين) */
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 8px;
  z-index: 1100; /* تأكد أنها فوق العناصر الأخرى إذا لزم الأمر */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  padding: 8px; /* حشوة داخلية للقائمة ككل */
  min-width: 280px; /* عرض أدنى للقائمة (يمكن تعديله) */
  max-width: 380px; /* عرض أقصى للقائمة (يمكن تعديله) */
  /* لا تحدد max-height هنا مباشرة، بل على categoryItemsContainer */
}

/* حاوية أزرار الفئات */
.category-buttons-container {
  display: flex;
  flex-wrap: wrap; /* للسماح بانتقال الأزرار لسطر جديد */
  gap: 6px;        /* مسافة بين أزرار الفئات */
  padding-bottom: 8px; /* حشوة أسفل أزرار الفئات */
  margin-bottom: 8px; /* مسافة بين أزرار الفئات ومنطقة عرض العناصر */
  border-bottom: 1px solid #eeeeee; /* خط فاصل خفيف */
}

/* تنسيق أزرار الفئات */
.category-buttons-container button {
  padding: 3px 7px;
  font-size: 8px;
  font-family: 'Tajawal', sans-serif; /* تأكد من استخدام نفس الخط المتناسق */
  border: 1px solid #dddddd;
  border-radius: 15px; /* حواف دائرية أكثر */
  background-color: rgba(255, 255, 255, 0.75);
  color: #333333;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  outline: none; /* إزالة التحديد الأزرق عند النقر في بعض المتصفحات */
}

.category-buttons-container button:hover {
  background-color: #e9ecef;
  border-color: #ced4da;
}

/* كلاس للزر النشط (الفئة المحددة) */
.category-buttons-container button.active {
  background-color: #007bff; /* مثال: أزرق Bootstrap */
  color: white;
  border-color: #007bff;
  font-weight: bold;
}

/* حاوية عرض عناصر الفئة (الشبكة) */
.category-items-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); /* أعمدة مرنة، كل عنصر بعرض أدنى 50px */
  gap: 10px; /* مسافة بين العناصر */
  max-height: 280px; /* أقصى ارتفاع لمنطقة العناصر، مع شريط تمرير */
  overflow-y: auto;  /* إظهار شريط التمرير العمودي عند الحاجة */
  overflow-x: hidden;/* إخفاء شريط التمرير الأفقي */
  padding: 5px 2px;  /* حشوة بسيطة حول العناصر */
}

/* رسالة "جاري التحميل" أو "لا توجد عناصر" داخل حاوية العناصر */
.category-items-container p {
  grid-column: 1 / -1; /* لجعل النص يأخذ عرض الشبكة بالكامل */
  text-align: center;
  color: #777777;
  font-size: 12px;
  padding: 15px 0;
}

/* تنسيق كل عنصر (قصاصة/زخرفة) داخل القائمة */
.design-element-option {
  cursor: pointer;
  padding: 5px;
  border: 1px solid transparent; /* حد شفاف مبدئيًا */
  border-radius: 6px;
  display: flex;
  flex-direction: column; /* لجعل الاسم (إذا أضيف) تحت الصورة */
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  transition: background-color 0.2s, border-color 0.2s, transform 0.1s;
  min-height: 55px; /* ارتفاع أدنى ليناسب الصورة والتسمية المحتملة */
  overflow: hidden; /* لإخفاء أي تجاوز من الصورة أو النص */
}

.design-element-option:hover {
  background-color: #f1f1f1;
  border-color: #cccccc;
  transform: translateY(-1px); /* تأثير رفع بسيط عند المرور */
}

/* تنسيق الصورة (SVG/PNG) داخل مربع العنصر */
.design-element-option img {
  width: 40px;   /* حجم المعاينة (يمكن تعديله) */
  height: 40px;
  object-fit: contain; /* للحفاظ على نسبة الأبعاد وعرض الصورة بالكامل */
  margin-bottom: 3px; /* مسافة صغيرة إذا كان هناك نص أسفلها */
}

/* (اختياري) تنسيق لاسم العنصر إذا قررت إضافته تحت الصورة المصغرة */
/*
.design-element-option .element-name {
  font-size: 10px;
  color: #555555;
  text-align: center;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%; (أو عرض ثابت إذا أردت)
  padding: 0 2px;
}
*/

/* تخصيص شريط التمرير داخل category-items-container (اختياري، نفس تصميمك السابق) */
.category-items-container::-webkit-scrollbar {
  width: 7px;
}
.category-items-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}
.category-items-container::-webkit-scrollbar-thumb {
  background-color: #cccccc;
  border-radius: 10px;
  border: 2px solid #f1f1f1; /* لإعطاء إطار حول المقبض */
}
.category-items-container::-webkit-scrollbar-thumb:hover {
  background-color: #aaaaaa;
}
/* دعم Firefox لشريط التمرير */
.category-items-container {
  scrollbar-width: thin;
  scrollbar-color: #cccccc #f1f1f1;
}

/* ========================================================================== */
/* === نهاية: تنسيقات قائمة عناصر التصميم === */
/* ========================================================================== */

.modal-overlay {
  position: fixed;           /* تثبيت الموضع بالنسبة لنافذة العرض */
  top: 0;                    /* البدء من أعلى الشاشة */
  left: 0;                   /* البدء من يسار الشاشة */
  width: 100%;               /* تغطية كامل عرض الشاشة */
  height: 100%;              /* تغطية كامل ارتفاع الشاشة */
  background-color: rgba(0,0,0,0.5); /* خلفية شبه شفافة */
  display: flex;             /* استخدام Flexbox للتوسيط */
  align-items: center;       /* توسيط المحتوى (modal-content) عموديًا */
  justify-content: center;   /* توسيط المحتوى (modal-content) أفقيًا */
  z-index: 1000;             /* التأكد من ظهورها فوق العناصر الأخرى */
  /* تأكد من إزالة أي خصائص position أخرى مثل relative أو absolute إن وجدت */
  /* تأكد من أن display: none موجود فقط في الكود المباشر للعنصر في HTML أو يتم التحكم به بـ JS */
}

/* ===== تفعيل عند الشاشات المتوسطة (تابلت / لابتوب صغير ≤1024px) ===== */
@media (max-width: 1024px) {

  #mainContainer {
    flex-wrap: wrap; 
    padding-right: 20px; 
    padding-left: 170px;
  }

  #right-column-wrapper {
    width: 100%;
    margin-top: 25px;
    order: 3;
  }

  /* استهداف العناصر لإلغاء تثبيتها */
  #right-column-wrapper #templateOptionsHeader,
  #right-column-wrapper #templateContainer { /* <-- تم التعديل هنا لاستخدام ID */
    position: static;
    width: 100%;
    height: auto;
  }
  
  /* هنا الجزء الأهم: تغيير تنسيق قائمة القوالب إلى شبكة (Grid) */
  #right-column-wrapper #templateContainer { /* <-- تم التعديل هنا لاستخدام ID */
    max-height: 45vh;
    display: grid !important; /* استخدام !important لضمان الأولوية القصوى */
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 15px;
  }
  
  #right-column-wrapper #templateContainer img { /* <-- تم التعديل هنا لاستخدام ID */
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/* ===== تفعيل عند الشاشات الصغيرة (جوال ≤480px) ===== */
@media (max-width: 480px) {
  /* تعويض قيم px بقيم نسبية فقط هنا */
  .canvas-container,
  #certificateCanvas {
    width: 100% !important;
    height: auto !important;
  }

  /* تصغير الأزرار والنصوص للجوال */
  #sidebar button,
  .control-group input,
  .control-group select,
  .control-group button {
    padding: 4px 6px;
    font-size: 0.8rem;
  }
}
img, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}
/* style.css */

/* تنسيق عام لحقول الإدخال داخل قسم إنشاء الحساب */
#signupFields input[type="email"],
#signupFields input[type="password"] {
  display: block; /* لجعل كل حقل في سطر ومستقل */
  width: 280px; /* مثال: حدد عرضًا مناسبًا لحقول الإدخال */
  max-width: 90%; /* لضمان عدم تجاوز عرض الشاشات الصغيرة جدًا */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px; /* مسافة أسفل كل حقل إدخال */
  padding: 8px; /* الحشو الحالي من HTML */
  box-sizing: border-box; /* لضمان أن padding و border لا يزيدان العرض الفعلي */
}

/* تنسيق رسالة الخطأ */
.form-error-message {
  display: block; /* لجعلها تظهر في سطر خاص بها فوق الحقل */
  color: red;
  font-size: 12px;
  text-align: right; /* محاذاة النص لليمين */
  width: 280px; /* يجب أن يكون نفس عرض حقول الإدخال أو قريبًا منه */
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3px; /* مسافة صغيرة بين رسالة الخطأ والحقل الذي يليها */
  min-height: 15px; /* لمنع "قفز" العناصر عند ظهور/إخفاء الرسالة */
}

/* (اختياري) تنسيق لحدود الحقل عند الخطأ والصحة - سيبقى في JavaScript كما هو حاليًا */
/* يمكن أيضًا نقل هذا لـ CSS إذا أردت: */
/*
#signupFields input.input-error {
  border-color: red;
}
#signupFields input.input-success {
  border-color: green;
}
*/

/* style.css */

/* تنسيق الحاوية الرئيسية لتسجيل الدخول وإنشاء الحساب */
#loginContainer {
  padding: 20px;
  text-align: center;
  /* display: block; /* هذا يمكن أن يبقى في HTML أو يُنقل هنا إذا كان دائمًا block */
}

/* تنسيق حاوية قسم إنشاء الحساب */
#signupFields {
  /* display: none; /* يتم التحكم به من JavaScript لإظهاره وإخفائه */
  max-width: 320px; /* حدد عرضًا أقصى مناسبًا للنموذج */
  margin: 20px auto; /* هامش علوي/سفلي وتوسيط أفقي للحاوية نفسها */
  padding: 15px;
  border: 1px solid #ddd; /* (اختياري) إضافة حدود بسيطة للقسم */
  border-radius: 8px;   /* (اختياري) حواف دائرية */
  background-color: #f9f9f9; /* (اختياري) لون خلفية خفيف للقسم */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* (اختياري) ظل خفيف */
}

#signupFields h3 {
  margin-top: 0; /* إزالة الهامش العلوي الافتراضي لـ h3 إذا لزم الأمر */
  margin-bottom: 20px; /* مسافة أسفل العنوان */
  font-size: 20px; /* تعديل حجم الخط حسب الرغبة */
}

/* تعديل طفيف على تنسيق حقول الإدخال داخل قسم إنشاء الحساب */
#signupFields input[type="email"],
#signupFields input[type="password"] {
  display: block;
  width: 100%; /* اجعل الحقول تأخذ كامل عرض الحاوية #signupFields */
  /* max-width: 90%; /* لم نعد بحاجة لهذا إذا كان width: 100% */
  margin-left: auto; /* لم نعد بحاجة لهذا إذا كان width: 100% */
  margin-right: auto; /* لم نعد بحاجة لهذا إذا كان width: 100% */
  margin-bottom: 10px;
  padding: 10px; /* زيادة الحشو قليلًا */
  box-sizing: border-box;
  border: 1px solid #ccc; /* التأكد من وجود حدود واضحة */
  border-radius: 4px; /* حواف دائرية بسيطة للحقول */
}

/* تعديل طفيف على تنسيق رسالة الخطأ */
.form-error-message {
  display: block;
  color: red;
  font-size: 12px;
  text-align: right;
  width: 100%; /* اجعلها تأخذ كامل عرض الحاوية #signupFields */
  /* max-width: 90%; /* لم نعد بحاجة لهذا */
  /* margin-left: auto; /* لم نعد بحاجة لهذا */
  /* margin-right: auto; /* لم نعد بحاجة لهذا */
  margin-bottom: 4px; /* مسافة أوضح قليلاً */
  min-height: 15px;
  box-sizing: border-box; /* لضمان التناسق */
  padding-right: 2px; /* إضافة حشو بسيط لليمين لمزيد من الوضوح */
}

/* تنسيق الأزرار داخل قسم إنشاء الحساب */
#signupFields button {
  padding: 10px 20px; /* زيادة الحشو قليلًا */
  font-size: 14px; /* تعديل حجم الخط */
  margin-top: 10px; /* مسافة فوق الأزرار */
  /* يمكنك إضافة display: block; width: 100%; إذا أردت الأزرار بعرض كامل */
}

/* style.css */

/* تنسيق الحاوية الرئيسية لتسجيل الدخول وإنشاء الحساب */
#loginContainer {
  padding: 20px;
  text-align: center;
}

/* تنسيق حاوية قسمي تسجيل الدخول وإنشاء الحساب بشكل موحد */
#loginFields,
#signupFields {
  max-width: 350px; /* يمكنك تعديل هذا العرض ليناسب تصميمك */
  margin: 25px auto; /* هامش أكبر قليلاً بين الأقسام وتوسيط أفقي */
  padding: 25px;    /* زيادة الحشو الداخلي */
  border: 1px solid #e0e0e0; /* حدود أفتح قليلاً */
  border-radius: 10px;   /* حواف دائرية أكثر */
  background-color: #ffffff; /* خلفية بيضاء نقية */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* ظل أنعم وأكثر توزيعًا */
  text-align: right; /* محاذاة كل المحتوى لليمين بشكل افتراضي داخل هذه الحاويات */
}

/* تنسيق العناوين (h3) داخل كلا القسمين */
#loginFields h3,
#signupFields h3 {
  margin-top: 0;
  margin-bottom: 25px; /* مسافة أكبر أسفل العنوان */
  font-size: 22px;    /* خط أكبر قليلاً للعنوان */
  color: #333;       /* لون خط أغمق للعنوان */
  text-align: center; /* توسيط العنوان نفسه */
}

/* تنسيق موحد لحقول الإدخال (email و password) في كلا القسمين */
#loginFields input[type="email"],
#loginFields input[type="password"],
#signupFields input[type="email"],
#signupFields input[type="password"] {
  display: block;
  width: 100%;
  margin-bottom: 15px; /* مسافة أكبر قليلاً أسفل كل حقل */
  padding: 12px 10px;   /* حشو متوازن */
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 6px; /* حواف دائرية متناسقة */
  font-size: 14px;   /* حجم خط مناسب للحقول */
  text-align: right; /* محاذاة النص داخل الحقل لليمين */
}

/* تنسيق عند التركيز على حقول الإدخال */
#loginFields input[type="email"]:focus,
#loginFields input[type="password"]:focus,
#signupFields input[type="email"]:focus,
#signupFields input[type="password"]:focus {
  border-color: #007bff; /* تغيير لون الحدود عند التركيز (مثال: أزرق) */
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); /* إضافة ظل خفيف عند التركيز */
  outline: none; /* إزالة التحديد الافتراضي للمتصفح */
}

/* تنسيق رسالة الخطأ (تبقى كما هي، وتعمل مع قسم إنشاء الحساب) */
.form-error-message {
  display: block;
  color: #dc3545; /* لون أحمر أوضح للخطأ */
  font-size: 13px; /* حجم خط أوضح قليلاً */
  text-align: right; /* محاذاة النص لليمين */
  width: 100%;
  margin-bottom: 8px; /* مسافة مناسبة */
  min-height: 18px; /* ارتفاع أدنى لمنع القفز */
  box-sizing: border-box;
  padding-right: 2px;
}

/* تنسيق موحد للأزرار في كلا القسمين */
#loginFields button,
#signupFields button {
  display: block; /* اجعل الأزرار تأخذ عرضًا كاملاً إذا أردت */
  width: 100%;    /* اجعل الأزرار تأخذ عرضًا كاملاً */
  padding: 12px 20px;
  font-size: 15px;
  margin-top: 15px; /* مسافة أكبر فوق الأزرار */
  margin-bottom: 10px; /* مسافة أسفل الأزرار (خاصة إذا كان هناك أكثر من زر) */
  color: #fff; /* لون نص أبيض */
  background-color: #007bff; /* لون خلفية أساسي (مثال: أزرق) */
  border: none;
  border-radius: 6px; /* حواف دائرية متناسقة */
  cursor: pointer;
  transition: background-color 0.2s ease-in-out; /* تأثير انتقال ناعم */
}

/* تنسيق الأزرار عند مرور الماوس */
#loginFields button:hover,
#signupFields button:hover {
  background-color: #0056b3; /* لون أغمق قليلاً عند المرور */
}

/* تنسيق خاص لزر "إنشاء حساب" (إذا كان لديك زر "تسجيل الدخول بجوجل" وتريد تمييزه) */
/* مثال: إذا كان زر جوجل يحتاج لونًا مختلفًا */
#loginFields #googleLoginBtn { /* مثال لاستهداف زر جوجل */
  background-color: #DB4437; /* لون جوجل الأحمر */
  margin-top: 10px;
}
#loginFields #googleLoginBtn:hover {
  background-color: #C33327;
}

/* تنسيق خاص لزر "تبديل النموذج" (مثل "إنشاء حساب" أو "لديك حساب؟") */
#loginFields #showSignUpBtn,
#signupFields #showLoginBtn {
  background-color: transparent; /* خلفية شفافة */
  color: #007bff; /* لون نص يطابق لون الزر الأساسي */
  border: 1px solid #007bff; /* (اختياري) حدود بلون الزر الأساسي */
  margin-top: 15px;
  font-size: 14px;
}

#loginFields #showSignUpBtn:hover,
#signupFields #showLoginBtn:hover {
  background-color: rgba(0,123,255,0.1); /* خلفية بلون خفيف عند المرور */
  color: #0056b3;
}

/* style.css */

/* --- بداية: تنسيقات إظهار/إخفاء كلمة المرور --- */

/* حاوية حقل كلمة المرور وأيقونة التبديل */
.password-wrapper {
  position: relative; /* ضروري لتموضع الأيقونة بشكل صحيح */
  width: 100%; /* اجعل الحاوية تأخذ عرض حقول الإدخال الأخرى داخل #signupFields */
  /* إذا كنت قد حددت max-width ثابت لحقول الإدخال في #signupFields input, */
  /* يمكنك إما أن تجعل هذا الـ div يرثه أو تحدده هنا أيضًا إذا لزم الأمر. */
  /* حاليًا، سيفترض أنه داخل حاوية #signupFields التي لها max-width خاص بها. */
  margin-left: auto; /* لتوسيط الحاوية إذا كانت #signupFields تتوسط */
  margin-right: auto; /* لتوسيط الحاوية */
  margin-bottom: 15px; /* نفس الهامش السفلي لحقول الإدخال الأخرى التي حددناها سابقًا */
}

/* تعديل حقل كلمة المرور داخل الحاوية لإفساح مجال للأيقونة على اليسار */
/* نستهدف الحقول داخل #signupFields لضمان الخصوصية وعدم التأثير على نماذج أخرى */
#signupFields .password-wrapper input[type="password"],
#signupFields .password-wrapper input[type="text"] { /* يشمل type="text" عند إظهار كلمة المرور */
  width: 100%; /* اجعل الحقل يملأ الـ password-wrapper */
  /* تعديل الحشو: الحشو الافتراضي للحقول (أعلى يمين أسفل) + حشو إضافي لليسار للأيقونة */
  /* افترضنا أن الحشو الافتراضي للحقول لديك هو 12px للجهات الأخرى و 10px لليمين */
  padding-top: 12px;
  padding-right: 10px; /* الحشو لليمين (للنص العربي) */
  padding-bottom: 12px;
  padding-left: 40px;   /* الحشو لليسار (لمكان الأيقونة) */
  box-sizing: border-box; /* مهم للحفاظ على العرض الكلي صحيحًا مع الحشو */
  text-align: right; /* الحفاظ على محاذاة النص المكتوب لليمين */
  /* يجب أن ترث هذه الحقول بقية التنسيقات (border, border-radius, font-size) */
  /* من القاعدة العامة: #signupFields input[type="password"] التي وحدناها سابقًا. */
  /* إذا لم يحدث ذلك، انسخ تلك الخصائص المشتركة إلى هنا. */
  /* مثال للخصائص التي قد تحتاج لضمان وجودها إذا لم يتم الوراثة بشكل صحيح: */
  /*
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  */
}

/* أيقونة تبديل إظهار/إخفاء كلمة المرور */
.toggle-password {
  position: absolute; /* تموضع مطلق بالنسبة لـ .password-wrapper */
  top: 50%; /* للبدء من منتصف ارتفاع الحاوية */
  left: 12px; /* المسافة من الحافة اليسرى. عدّلها حسب الحاجة. */
  transform: translateY(-50%); /* لضبط التوسيط العمودي بدقة */
  cursor: pointer; /* تغيير شكل المؤشر للإشارة إلى أنه قابل للنقر */
  user-select: none; /* لمنع تحديد نص الأيقونة عند النقر المتكرر */
  font-size: 13px; /* حجم أيقونة العين، عدّله حسب رغبتك */
  color: #888; /* لون مبدئي للأيقونة */
  z-index: 2; /* (اختياري) للتأكد من أنها فوق حقل الإدخال إذا كان هناك تداخل بسيط */
}

.toggle-password:hover {
  color: #333; /* تغيير لون الأيقونة عند مرور الماوس فوقها */
}
/* --- نهاية: تنسيقات إظهار/إخفاء كلمة المرور --- */

/* style.css */

/* تنسيق زر عرض المزيد لعناصر التصميم */
.load-more-category-btn {
  display: block; /* يجعله يأخذ عرض السطر ويسمح بالتوسيط الأفقي */
  width: auto;    /* العرض يتناسب مع النص بداخله */
  max-width: 80%; /* مثال: لا يتجاوز 80% من عرض الحاوية الأم */
  margin: 15px auto; /* هامش علوي وسفلي، وتوسيط أفقي */
  padding: 6px 12px; /* حشوة داخلية */
  font-size: 11px;   /* حجم الخط */
  color: #333;       /* لون النص */
  background-color: #f0f0f0; /* لون خلفية خفيف */
  border: 1px solid #ccc;    /* حد بسيط */
  border-radius: 4px;        /* حواف دائرية */
  cursor: pointer;
  transition: background-color 0.2s ease-in-out; /* تأثير انتقال ناعم */
  /* تأكد من أنه لا يتعارض مع التنسيقات المطبقة مباشرة من JavaScript إذا كانت موجودة */
}

.load-more-category-btn:hover {
  background-color: #e0e0e0; /* لون أغمق قليلاً عند المرور */
}

.load-more-category-btn:disabled {
  cursor: not-allowed; /* تغيير المؤشر عند تعطيل الزر */
  opacity: 0.7;        /* جعله باهتاً قليلاً عند التعطيل */
  background-color: #f8f8f8;
}
/* تنسيقات إضافية لنافذة إعدادات الحساب */
#accountSettingsModal .modal-content {
    text-align: right; /* لضمان محاذاة النصوص والعناوين لليمين */
}

#accountSettingsModal h4 {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.settings-input {
    width: calc(100% - 22px); /* يتناسب مع padding و border */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: 'Tajawal', sans-serif;
    font-size: 0.95em;
    margin-bottom: 8px; /* مسافة صغيرة أسفل كل حقل إدخال */
}

.settings-button {
    padding: 10px 20px;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-family: 'Tajawal', sans-serif;
    transition: background-color 0.2s ease;
}

#updatePasswordBtn {
    background-color: #28a745; /* أخضر */
}
#updatePasswordBtn:hover {
    background-color: #218838;
}

/* يمكنك إضافة تنسيقات لـ updateEmailBtn لاحقًا */

#changePasswordStatus, #changeEmailStatus, #accountSettingsMessage { /* لتنسيق رسائل الحالة */
    min-height: 1.2em; /* لمنع "قفز" الواجهة عند ظهور الرسالة */
}

/* تنسيق أزرار تبويب الإعدادات */
.settings-tab-button {
    padding: 8px 15px;
    cursor: pointer;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    margin-bottom: -1px; /* ليتداخل مع الخط السفلي للقائمة */
    border-radius: 4px 4px 0 0;
    font-family: 'Tajawal', sans-serif;
}

.settings-tab-button.active-tab {
    background-color: #fff;
    border-bottom-color: #fff; /* لإخفاء الخط السفلي للزر النشط */
    font-weight: bold;
    color: #007bff;
}

/* === تنسيقات صندوق خيارات القوالب === */
#templateOptionsHeader {
    width: 175px; /* يمكنك تعديل هذا ليتناسب مع عرض .templates-panel إذا أردت */
    position: fixed;
    top: 0;      /* القيمة الابتدائية، قد تحتاج لتعديلها لتكون أسفل شريط الأدوات العلوي */
                 /* مثال: إذا كان ارتفاع شريط الأدوات العلوي 70px، ضع top: 70px; */
    right: 0;    /* ليكون في نفس محاذاة .templates-panel */
    background-color: #dadde0;
    padding: 8px;
    box-sizing: border-box;
    z-index: 6;  /* تأكد أنه أعلى من z-index الخاص بـ .templates-panel (الذي هو 5) */
    text-align: center;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* ظل خفيف (اختياري) */
}

#templateOrientationSelector label {
    margin: -2px; /* تعديل الهامش بين الخيارين */
    cursor: pointer;
    font-size: 10px;
    color: #333;
}

#templateOrientationSelector input[type="radio"] {
    vertical-align: middle;
    margin-left: 3px; /* مسافة بسيطة بين زر الراديو والتسمية باللغة العربية */
}

/* === تعديل على .templates-panel لتبدأ أسفل الصندوق الجديد === */
.templates-panel {
    /* الخصائص الحالية لديك: */
    position: fixed;
    right: 0;
    width: 175px;
    background: linear-gradient(180deg, #1f3c5a1f, #34495e00);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px; /* يمكنك تعديل الحشو العلوي من هنا إذا أردت مسافة إضافية */
    z-index: 5;

    /* --- التعديلات المطلوبة --- */
    /* اضبط قيمة top لتبدأ أسفل #templateOptionsHeader */
    /* ستحتاج لحساب الارتفاع الكلي لـ #templateOptionsHeader (بما في ذلك padding و border) */
    /* لنفترض أن ارتفاع #templateOptionsHeader سيكون حوالي 50px بعد التنسيق */
    top: 80px; /* <<< اضبط هذه القيمة بدقة بعد معرفة ارتفاع #templateOptionsHeader */
    height: calc(100vh - 50px); /* <<< تعديل الارتفاع ليأخذ المساحة المتبقية أسفل الصندوق الجديد */
}

#exportPreviewModal .modal-content {
    background-color: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    width: 90%; 
    max-width: 650px; 
    text-align: center;
    position: relative; 
}

#exportPreviewModal .close-modal-btn:hover { /* افترض أن .close-modal-btn لديك تنسيق عام */
    color: #d9534f; 
}

#exportPreviewModal #freeExportOptionDiv,
#exportPreviewModal #proExportOptionDiv {
    transition: background-color 0.2s ease, border-color 0.2s ease;
    border: 2px solid #e0e0e0; 
    /* الخصائص الأخرى لهذه العناصر موجودة كـ inline style في HTML الذي أضفته،
       مثل flex: 1, padding, border-radius, cursor, background-color.
       يمكنك نقلها إلى هنا إذا أردت لتوحيد التنسيق. مثال:
       flex: 1;
       padding: 15px;
       border-radius: 8px;
       cursor: pointer;
       background-color: #f9f9f9;
    */
}

#exportPreviewModal #freeExportOptionDiv:hover,
#exportPreviewModal #proExportOptionDiv:hover,
#exportPreviewModal .export-option-selected { 
    background-color: #e9f5ff !important; 
    border-color: #007bff !important; 
}

/* تنسيقات إضافية للأشرطة في الزوايا */
#exportPreviewModal .corner-ribbon {
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    font-weight: bold;
    /* الخصائص الأخرى لهذه الأشرطة موجودة كـ inline style في HTML.
       يمكنك نقلها إلى هنا لمركزية التنسيق. مثال لـ .free-ribbon:
        position: absolute; 
        top: -5px; 
        right: -5px; 
        background-color: #5cb85c; 
        color: white; 
        padding: 3px 8px; 
        font-size: 11px; 
        border-radius: 4px;
    */
}
/* يمكنك إضافة تنسيقات خاصة لـ .free-ribbon و .pro-ribbon هنا إذا أردت تعديل الألوان من CSS */
/* مثال:
#exportPreviewModal .free-ribbon {
    background-color: #5cb85c; 
    color: white; 
}
#exportPreviewModal .pro-ribbon {
    background-color: #ffd700; 
    color: #333; 
}
*/


#exportPreviewModal #dynamicExportActionBtn {
    background-color: #007bff; 
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    /* الخصائص الأخرى مثل padding, font-size, min-width, margin-top
       موجودة كـ inline style في HTML. يمكنك نقلها هنا.
       padding: 12px 25px;
       font-size: 16px;
       min-width: 250px;
       margin-top:10px;
    */
}

#exportPreviewModal #dynamicExportActionBtn:hover {
    background-color: #0056b3; 
}

/* كلاس لتغيير لون الزر عندما يكون للترقية */
#exportPreviewModal #dynamicExportActionBtn.upgrade-action {
    background-color: #28a745; 
}
#exportPreviewModal #dynamicExportActionBtn.upgrade-action:hover {
    background-color: #1e7e34; 
}


/* =========================================================== */
/* ===== تنسيقات نافذة التسعير (#pricingModal) في index.html ===== */
/* =========================================================== */

/* القاعدة العامة للمودال (يفترض أنها موجودة لديك وتستخدم display: flex للتوسيط) */
/* .modal {
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background-color: rgba(0,0,0,0.6); 
    z-index: 1050; 
    display: flex; 
    align-items: center;
    justify-content: center;
    overflow-y: auto; 
} 
*/

/* =========================================================== */
/* ===== تنسيقات نافذة التسعير (#pricingModal) في index.html (مُحدّثة) ===== */
/* =========================================================== */

#pricingModal .modal-content.pricing-modal-content { 
    background-color: #fff; 
    padding: 0; 
    border-radius: 12px; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    width: 90%; 
    max-width: 750px; 
    min-height: 300px; 
    max-height: 90vh; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column;
    position: relative; /* <<< هذا هو السطر الذي تم إضافته لإصلاح المشكلة >>> */
}

#pricingModal #pricingPlansContainer {
    flex-grow: 1; 
    display: flex; 
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    width: 100%; 
}

#pricingModal #pricingPlansContainer > p[style*="text-align:center"] {
    font-size: 1.2em; 
    font-weight: 500; 
    color: #0a2342; 
    padding: 40px 20px; 
    text-align: center;
    margin: auto; 
}

/* تنسيقات زر الإغلاق الخاص بـ pricingModal (إذا كنت تستخدم ID="closePricingModalInEditorBtn" في HTML) */
/* تأكد أن هذا الـ ID مستخدم في HTML الخاص بك لزر الإغلاق لهذه النافذة تحديدًا */
#pricingModal #closePricingModalInEditorBtn.close-modal-btn { /* استخدام الكلاس العام .close-modal-btn مهم إذا كان موجوداً */
    position: absolute;
    top: 15px;     /* مسافة من الأعلى داخل .modal-content */
    left: 20px;      /* مسافة من اليسار داخل .modal-content (أو right: 20px; للغة العربية) */
    font-size: 30px; /* حجم علامة X */
    font-weight: bold;
    color: #aaa;    /* لون مبدئي لعلامة X */
    background: none; /* بدون خلفية */
    border: none;     /* بدون حدود */
    cursor: pointer;
    line-height: 1;   /* لمنع ارتفاع إضافي */
    padding: 0;       /* إزالة أي حشو قد يؤثر على الموضع */
    z-index: 10;      /* لضمان ظهوره فوق محتوى pricingPlansContainer */
}
#pricingModal #closePricingModalInEditorBtn.close-modal-btn:hover {
    color: #333; /* لون أغمق عند المرور */
} 

/* =========================================================== */

/* =========================================================== */
/* ===== الخطوة 10.2: CSS لمربع "إدارة الاشتراك والفوترة" ===== */
/* =========================================================== */

#subscriptionManagementModal .modal-content {
    background-color: #fff;
    padding: 25px 30px; /* تعديل الحشو ليناسب المحتوى العربي */
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    width: 90%; 
    max-width: 550px; 
    text-align: right; /* محاذاة النص الرئيسية لليمين */
    position: relative; 
}

#subscriptionManagementModal h3 {
    margin-top: 5px; 
    margin-bottom: 25px; 
    text-align: center; 
    color: #333;
    font-size: 1.4em; /* حجم مناسب للعنوان */
}

#subscriptionManagementModal #subscriptionInfoArea {
    margin-bottom: 25px; /* زيادة الهامش السفلي */
    padding: 15px 20px; /* تعديل الحشو */
    background-color: #f8f9fa; /* لون خلفية أفتح قليلاً */
    border: 1px solid #e9ecef; /* حد خفيف */
    border-radius: 8px; /* حواف دائرية */
}

#subscriptionManagementModal #subscriptionInfoArea p {
    margin-bottom: 12px; /* مسافة بين أسطر المعلومات */
    font-size: 1.05em; /* حجم خط أوضح قليلاً للمعلومات */
    line-height: 1.6;
    color: #495057; /* لون نص أغمق قليلاً */
}

#subscriptionManagementModal #subscriptionInfoArea p:last-child {
    margin-bottom: 0; /* إزالة الهامش السفلي من آخر فقرة */
}

#subscriptionManagementModal #subscriptionInfoArea strong {
    color: #212529; /* لون أغمق للعناوين الفرعية (الخطة، الحالة) */
    margin-left: 8px; /* مسافة بين العنوان الفرعي والقيمة (للنصوص العربية) */
}

#subscriptionManagementModal #subscriptionInfoArea span {
    color: #007bff; /* لون مميز لقيم المعلومات */
    font-weight: 500; /* خط أعرض قليلاً للقيم */
}
#subscriptionManagementModal #subscriptionInfoArea span#currentPlanDisplay {
    /* يمكنك إضافة تنسيق خاص هنا إذا أردت تمييز اسم الخطة أكثر */
}


#subscriptionManagementModal #subscriptionActionsArea {
    text-align: center; /* توسيط الأزرار */
    padding-top: 10px; /* مسافة فوق منطقة الأزرار */
    border-top: 1px solid #eee; /* خط فاصل خفيف (اختياري) */
    margin-top: 20px; /* مسافة فوق الخط الفاصل */
}

/* تنسيق عام للأزرار داخل منطقة الإجراءات (سيتم استخدام نفس كلاس .settings-button من قبل) */
/* إذا لم يكن كلاس .settings-button معرفًا بشكل عام، يمكنك إضافة تنسيقات هنا */
#subscriptionManagementModal #subscriptionActionsArea button {
    padding: 10px 25px;
    font-size: 1em;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    margin: 5px; /* مسافة بين الأزرار إذا كان هناك أكثر من زر */
    min-width: 200px; /* عرض أدنى للزر */
}
#subscriptionManagementModal #subscriptionActionsArea button:hover {
    transform: translateY(-1px);
}



#userPlanBadge {
    font-size: 9px;
    padding: 2px 6px; /* تعديل الحشو */
    border-radius: 4px; /* حواف أكثر دائرية */
    font-weight: 500;
    /* display: none; /* يتم التحكم به عبر JS */
}

#userPlanBadge.free-plan { /* كلاس للخطة المجانية */
    background-color: #e9ecef;
    color: #495057;
    border: 1px solid #ced4da;
}

#userPlanBadge.premium-plan { /* كلاس للخطة المدفوعة */
    background-color: #fff0b3; /* لون ذهبي فاتح */
    color: #856404; /* لون نص أغمق */
    border: 1px solid #ffe882;
}

/* تعديلات على القائمة المنسدلة للملف الشخصي */
#profileDropdown {
    top: 55px; /* اضبط هذه القيمة لتظهر أسفل الصورة والشارة بشكل جيد */
    min-width: 170px; /* زيادة العرض الأدنى قليلاً */
    text-align: right; /* لضمان محاذاة النص لليمين */
}

#profileDropdown ul {
    padding: 5px 0; /* تقليل الحشو العمودي للـ ul */
}

#profileDropdown li, #profileDropdown div#userEmailInDropdown {
    padding: 10px 15px; /* زيادة الحشو لخيارات القائمة */
    font-size: 0.95em; /* تعديل حجم الخط قليلاً */
}
#profileDropdown li:hover {
    background-color: #f8f9fa; /* لون خلفية عند المرور */
}

#profileDropdown div#userEmailInDropdown {
    margin-bottom: 5px; /* مسافة أسفل الإيميل */
    font-weight: bold; /* تمييز الإيميل */
}

/* ================================================ */
/* === تنسيقات أزرار التحكم بالطبقات والقفل === */
/* ================================================ */

/* تنسيق أزرار التحكم بالطبقات والقفل في شريط الأدوات */
#contextualToolbar .toolbar-group button#toolbarLock,
#contextualToolbar .toolbar-group button#toolbarBringForward,
#contextualToolbar .toolbar-group button#toolbarSendBackward,
#contextualToolbar .toolbar-group button#toolbarBringToFront,
#contextualToolbar .toolbar-group button#toolbarSendToBack {
  font-size: 10px; /* حجم أكبر للأيقونات */
}

/* تنسيق خاص لزر القفل عندما يكون العنصر مقفلاً */
#contextualToolbar button#toolbarLock.locked {
  background: #f8d7da !important; /* خلفية حمراء خفيفة للإشارة للقفل */
  color: #721c24 !important;
  border-color: #f5c6cb;
}

/* ================================================ */
/* === تنسيق الأزرار المعطلة (باهتة)        === */
/* ================================================ */

#contextualToolbar .toolbar-group button:disabled {
  opacity: 0.4; /* اجعل الزر شبه شفاف ليعطي إحساساً بأنه باهت */
  cursor: not-allowed; /* غير شكل المؤشر إلى علامة "ممنوع" عند المرور فوقه */
}

/* ========================================================== */
/* === (النسخة الكاملة) تنسيقات القوائم المنبثقة لشريط الأدوات === */
/* ========================================================== */

/* الحاوية الرئيسية لكل زر منبثق */
.toolbar-popup-container {
  position: relative;
  display: inline-block;
}

/* القائمة المنبثقة نفسها (تكون مخفية افتراضياً) */
.toolbar-popup-content {
  display: none; /* مخفية بشكل افتراضي، يتم التحكم بها عبر JS */
  position: absolute;
  top: calc(100% + 8px); /* الظهور أسفل الزر مباشرة مع مسافة 8px */
  left: 50%;
  transform: translateX(-50%); /* توسيط القائمة أفقياً تحت الزر */
  background-color: #fdfdfd;
  border: 1px solid #cccccc;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  z-index: 1100;
  padding: 12px;
  width: max-content;

  /* جعل المحتوى أفقيًا مع محاذاة وترتيب أفضل */
  display: flex;
  flex-direction: row; 
  align-items: flex-end;
  gap: 12px;
}

/* تنسيق إضافي للمجموعات داخل القوائم المنبثقة */
.toolbar-popup-content .form-group {
    border-left: 1px solid #f0f0f0; /* إضافة خط فاصل بين المجموعات (استخدام left للغة العربية) */
    padding-left: 12px;
    padding-right: 5px;
}
.toolbar-popup-content .form-group:first-child {
    border-left: none; /* إزالة الخط الفاصل من أول مجموعة */
    padding-left: 5px;
}

/* تنسيق حاوية أزرار التحكم بالحدود */
.stroke-controls {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* تنسيق أزرار الظل في شبكة 2x2 */
/* تنسيق أزرار الظل لجعلها في صف أفقي واحد */
.toolbar-popup-content .shadow-controls {
    display: flex; /* تغيير من grid إلى flex */
    align-items: center;
    gap: 5px;
}

.shadow-controls input[type="number"] {
    width: 50px;
}

/* style.css */

/* أضف هذه القاعدة الجديدة لتمييز الأزرار النشطة في شريط الأدوات */
#contextualToolbar .toolbar-group button.active {
    background-color: #cce5ff !important; /* لون أزرق سماوي للإشارة إلى أن الخاصية مفعلة */
    border-color: #007bff;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

/* ================================================================= */
/* ===== بداية: تنسيقات وضع القفل الذكي (النسخة النهائية) ===== */
/* ================================================================= */

/* القاعدة الأولى: في وضع القفل، قم بإخفاء كل الأبناء المباشرين للشريط */
#contextualToolbar.toolbar-locked-mode > * {
    display: none !important;
}

/* القاعدة الثانية: كاستثناء، أظهر فقط مجموعة الأزرار التي تحتوي على زر القفل */
/* نحن نستهدف المجموعة التي تحتوي على الزر وليس الزر مباشرة */
#contextualToolbar.toolbar-locked-mode .toolbar-group:has(#toolbarLock) {
    display: flex !important;
}

/* ======================================================== */
/* ===== نهاية: تنسيقات وضع القفل الذكي ===== */
/* ======================================================== */

/* (يمكنك إضافة المزيد من التنسيقات هنا) */
canvas {
  touch-action: auto;
  -ms-touch-action: auto; /* للمتصفحات القديمة */
}
html, body {
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
}

/* تنسيق رسالة تنبيه الحد الأقصى للإرسال الجماعي */
#batchSendLimitMessage {
    background-color: #fff3cd; /* لون أصفر فاتح للتنبيه */
    color: #856404; /* لون نص داكن */
    border: 1px solid #ffeeba; /* حدود بنفس اللون */
    border-radius: 8px;
    padding: 15px;
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 0.95em;
    line-height: 1.6;
}

#batchSendLimitMessage a {
    color: #0056b3; /* لون أزرق مميز للرابط */
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

/* --- تنسيقات شريط العرض الترويجي --- */
#promoBanner {
    background: linear-gradient(45deg, #ffd700, #f9c900);
    color: #0a2342;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1001; /* فوق الهيدر */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    border-bottom: 3px solid #cca300;
    animation: pulse-gold 2s infinite;
}

.promo-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap; /* للسماح بالالتفاف على الشاشات الصغيرة */
}

#promoBanner span {
    font-size: 0.95em;
    font-weight: 500;
}

.promo-badge {
    background-color: #0a2342;
    color: #ffd700;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.8em !important;
    font-weight: 700;
    animation: flash-badge 1.5s infinite;
}

.promo-timer {
    font-weight: 700;
    font-size: 1.1em;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 5px;
    min-width: 90px;
}

.promo-button {
    background-color: #ffffff;
    color: #0a2342;
    padding: 8px 18px;
    text-decoration: none;
    font-weight: 700;
    border-radius: 6px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.promo-button:hover {
    background-color: #f0f4f8;
    transform: scale(1.05);
}

@media (min-width: 993px) {
    #promoBanner {
        margin-right: 175px;  /* مسافة تعادل عرض الشريط الجانبي الأيمن */
        margin-left: 150px;   /* مسافة تعادل عرض الشريط الجانبي الأيسر */
    }
}

/* --- Keyframes للحركة --- */
@keyframes pulse-gold {
    0% { box-shadow: 0 4px 10px rgba(204, 163, 0, 0.15); }
    50% { box-shadow: 0 6px 15px rgba(204, 163, 0, 0.3); }
    100% { box-shadow: 0 4px 10px rgba(204, 163, 0, 0.15); }
}

@keyframes flash-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
/* ✨ بداية الكود الجديد ✨ */
/* عندما يكون شريط العرض ظاهراً، ادفع لوحة التحكم للأسفل */
body.promo-banner-visible #controlPanelContainer {
    top: 40px; /* اضبط هذا الرقم ليتناسب مع ارتفاع الشريط */
}
/* ✨ نهاية الكود الجديد ✨ */