/* ================= عام ================= */
  :root{--primary:#006CFF;--danger:#FF6B6B;--muted:#888;--success:#00A86B;--warning:#FF8A00;--purple:#9b59b6;}
  body {font-family: 'Cairo', 'Roboto', Arial, Helvetica, sans-serif; background:#f5f5f5; padding:10px; color:#0b1220;}
  .container {max-width:980px;margin:auto;background:white;padding:15px;border-radius:10px;box-shadow:0 6px 20px rgba(14,30,66,0.04);}
  .header-content h1 { margin:0 0 12px; font-size: 1.4em; color: var(--primary); }
  .header-content h2 { margin:0 0 12px; font-size: 1.1em; color: #555; font-weight: normal; }
  h3 {font-size: 1.1em;}
  button{padding:8px 12px;border-radius:8px;border:none;background:var(--primary);color:white;cursor:pointer}
  button:hover {opacity:0.9;}
  .small {font-size:13px;color:#555;margin-top:8px}
  .card {background:#fff;border-radius:10px;padding:12px;margin-bottom:12px;border:1px solid #eee;}
  a {color:var(--primary)}

  
  /* ================= زر تبديل اللغة ================= */
  .header-content { 
      display: flex; 
      justify-content: space-between; 
      align-items: center; 
      margin-bottom: 15px; 
      flex-wrap: wrap; 
  }
  .lang-switch-group {
      display: flex;
      gap: 5px;
      flex-shrink: 0; 
      flex-wrap: wrap; 
  }
/* 1. التنسيق الموحد لجميع الأزرار */
.lang-btn {
  text-decoration: none !important;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.9em;
  display: inline-block;
  transition: all 0.3s ease;
  border: 1px solid #ccc; /* فريم خفيف للأزرار العادية */
  background: #f0f0f0 !important; /* خلفية رمادية للأزرار غير النشطة */
  color: #333 !important;
}

/* 2. الزر النشط (اللغة الحالية) - فريم أبيض كما طلبت */
.lang-switch-group a.lang-btn.active,
.lang-switch-group a.lang-btn.active:visited {
  background: #ffffff !important;   /* خلفية بيضاء */
  border: 2px solid #ffffff !important; /* فريم أبيض */
  color: var(--primary) !important;  /* النص بلون الموقع الأساسي (الأزرق) */
  font-weight: bold !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* ظل خفيف لإبراز الفريم الأبيض على الخلفية البيضاء */
  pointer-events: none;
}

/* 3. تأثير عند الوقوف بالماوس على الأزرار الأخرى */
.lang-btn:hover:not(.active) {
  background: #e0e0e0 !important;
  border-color: #bbb;
}

  /* ================= إدخال الملفات ================= */
  input[type="text"], select {width:100%;padding:10px;margin:5px 0 10px;display:inline-block;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;}
  input[type="file"] { display: none !important; }
  
  /* ================= خيارات الفحص ================= */
  .scan-options {display:flex; gap:10px; margin-bottom:15px; flex-wrap:wrap; align-items:center; font-size: 0.9em;}
  .scan-options > div {display: flex; align-items: center; gap: 8px;}
  .toggle-label {font-weight: bold;}
  .scan-options select {width:auto; padding:5px; border-radius:6px; border:1px solid #ccc; font-size: 0.9em;}

  .toggle-checkbox {opacity: 0; width: 0; height: 0; position: absolute;}
  .toggle-switch {
    position: relative; display: inline-block; width: 40px; height: 20px;
    background-color: var(--danger); border-radius: 10px; cursor: pointer; transition: background-color 0.3s;
  }
  .toggle-switch::after {
    content: ''; position: absolute; top: 2px; right: 2px; width: 16px; height: 16px;
    border-radius: 50%; background-color: white; transition: transform 0.3s;
  }
  html[dir="ltr"] .toggle-switch::after { right: auto; left: 2px; transition: transform 0.3s; }
  html[dir="ltr"] .toggle-checkbox:checked + .toggle-switch::after { transform: translateX(20px); }
  html[dir="rtl"] .toggle-switch::after { right: 2px; left: auto; transition: transform 0.3s; }
  html[dir="rtl"] .toggle-checkbox:checked + .toggle-switch::after { transform: translateX(-20px); }
  .toggle-checkbox:checked + .toggle-switch {background-color: var(--success);}

  /* ================= معاينة الصور ================= */
  .preview-area {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 15px;
    justify-content: center;
  }

  .img-box {
    position: relative;
    /* نجعل الصندوق ينكمش حول الصورة التي بداخلة */
    width: fit-content; 
    height: auto;
    background: white;
    border: 1px solid #ccc;
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  .img-box img {
    /* جعل العرض 500 بكسل ولكن بشرط ألا يتجاوز عرض الفريم أو الشاشة */
    width: 500px !important; 
    max-width: 100% !important; 
    
    /* الحفاظ على التناسب */
    height: auto !important; 
    display: block;
    border-radius: 8px;
    object-fit: contain; 
  }

  /* تعديل زر الحذف ليتناسب مع الحجم الكبير */
  .delete-img { 
    position: absolute;
    top: -12px;
    background: #ff3b30 !important; 
    color: white !important;
    border: 2px solid #ffffff; 
    border-radius: 50%;
    width: 30px !important;
    height: 30px !important; 
    cursor: pointer;
    z-index: 100;
    
    /* توسط مطلق */
    display: flex !important;
    align-items: center;
    justify-content: center;
    
    /* تنسيق الحرف */
    font-size: 22px !important;
    font-family: Arial, sans-serif !important;
    font-weight: bold;
    line-height: 1;
    padding: 0;
    
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* حذفنا الـ ::after والـ ::before لكي لا يظهر حرفان */

html[dir="rtl"] .delete-img { right: -12px; }
html[dir="ltr"] .delete-img { left: -12px; }

  /* ================= النص ================= */
  #textOutput {
    white-space: pre-wrap; line-height: 1.6; padding: 10px;
    border: 1px dashed #ccc; border-radius: 6px; margin-top: 10px;
    font-size: 16px; color: #0b1220; 
    font-family: 'Cairo', 'Roboto', Arial, Helvetica, sans-serif;
  }
  html[dir="rtl"] #textOutput { text-align: right; }
  html[dir="ltr"] #textOutput { text-align: left; }

  #rawOutput { white-space: pre-wrap; font-size: 14px; padding: 8px; background: #f0f0f0; margin-top: 10px; }
  html[dir="rtl"] #rawOutput { text-align: right; }
  html[dir="ltr"] #rawOutput { text-align: left; }

  .text-tools { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .text-tools label {font-weight: normal; font-size: 14px;}
  .text-tools button {margin: 0; padding: 6px 10px; font-size: 13px;}
  .text-tools select {padding: 4px; font-size: 13px; height: 30px;}
  
  @media (max-width: 600px) {
    body {padding: 10px;}
    .container {padding: 10px;}
    .header-content h1 {font-size: 1.2em; margin-bottom: 0;} 
    .header-content h2 {font-size: 1em; margin-bottom: 0;} 
    h3 {font-size: 1em;}
    .scan-options {font-size: 0.85em;}
    .img-box {max-width: 100%;}
    .text-tools button {padding: 5px 8px; font-size: 12px;}
    .text-tools select {font-size: 12px;}
    .header-content { flex-direction: column; align-items: flex-start; gap: 10px; }
    .lang-switch-group { width: 100%; justify-content: space-around; gap: 2px; }
    .lang-btn { padding: 5px 8px; font-size: 0.8em; }
  }

  /* تنسيق شعار الموقع الموحد */
.site-logo-container { 
  width: 100%; 
  max-width: 375px; 
  margin: 20px auto; 
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-logo-container img { 
  width: 100%; 
  height: auto; 
  display: block;
  transition: transform 0.4s ease;
}

.site-logo-container img:hover { 
  transform: scale(1.05); 
}

/* تنسيق قسم الخصوصية */
.privacy-box {
  text-align: center;
  margin-top: 25px;
  padding: 15px;
  font-size: 0.85em;
  color: #555;
  border-top: 1px dotted #ccc;
  line-height: 1.6;
}

.privacy-box strong {
  color: #2c3e50;
}