/* Add custom CSS styles below */ 
/* ───────── إعدادات سريعة (عدّل القيم فقط) ───────── */
:root{
  --logo-max-h-desktop: 64px;   /* ارتفاع الشعار على الديسكتوب */
  --logo-max-w-desktop: 220px;  /* عرض الشعار على الديسكتوب */
  --logo-max-h-mobile: 48px;    /* ارتفاع الشعار على الجوال */
  --logo-max-w-mobile: 180px;   /* عرض الشعار على الجوال */

  --logo-color-main: #d4af37;   /* اللون الذهبي */
  --logo-color-bg: #000000;     /* اللون الأسود */
}

/* استهداف أماكن الشعار */
header .logo img,
.site-header .logo img,
.header-logo img,
.navbar-brand img,
.brand-logo img,
.logo a img,
header .logo svg,
.site-header .logo svg,
.header-logo svg,
.navbar-brand svg,
.brand-logo svg{
  max-height: var(--logo-max-h-desktop);
  max-width:  var(--logo-max-w-desktop);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 6px 0;
  background-color: var(--logo-color-bg); /* خلفية الشعار أسود */
  padding: 6px; /* مسافة حول الشعار */
  border-radius: 8px; /* حواف ناعمة */
  box-shadow: 0 0 10px rgba(212,175,55,0.6); /* توهج ذهبي */
}

/* إذا كان الشعار بصيغة SVG يمكن تلوينه مباشرة */
header .logo svg path,
.site-header .logo svg path,
.header-logo svg path,
.navbar-brand svg path,
.brand-logo svg path{
  fill: var(--logo-color-main); /* تلوين ذهبي */
}

/* ترتيب ومحاذاة الشعار */
header .logo,
.site-header .logo,
.header-logo,
.navbar-brand,
.brand-logo{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* أحجام الجوال */
@media (max-width: 768px){
  header .logo img,
  .site-header .logo img,
  .header-logo img,
  .navbar-brand img,
  .brand-logo img,
  header .logo svg,
  .site-header .logo svg,
  .header-logo svg,
  .navbar-brand svg,
  .brand-logo svg{
    max-height: var(--logo-max-h-mobile);
    max-width:  var(--logo-max-w-mobile);
    margin: 4px 0;
  }

  header .logo,
  .site-header .logo,
  .header-logo,
  .navbar-brand,
  .brand-logo{
    justify-content: center;
  }
}