/* استيراد خط كايرو من جوجل */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');

/* تطبيق الخط على كافة النصوص في المتجر */
body, h1, h2, h3, h4, h5, h6, span, a, p, button {
    font-family: 'Cairo', sans-serif !important;
}

/* استيراد خط كايرو المضمون */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');

/* تطبيق الخط العام */
body, * {
    font-family: 'Cairo', sans-serif !important;
}

/* حجم خط عنوان المنتج في شبكة المنتجات */
.product-item .product-title, 
.product-card h3, 
.product-card .title {
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* حجم خط السعر الحالي */
.product-item .price, 
.product-card .price_current {
    font-size: 15px !important;
    font-weight: 700 !important;
}

/* حجم خط زر أضف إلى السلة */
.product-item .add-to-cart, 
.product-card button {
    font-size: 13px !important;
    font-weight: 600 !important;
/* استيراد الخط والتطبيق العام */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');

/* تخصيص صندوق ووصف المنتج لتحسين القراءة */
.product-description, 
.product-details, 
.product-content,
.product-description p, 
.product-details p {
    font-family: 'Cairo', sans-serif !important;
    font-size: 14px !important;            /* حجم الخط المناسب والمريح للقراءة على الجوال */
    line-height: 1.8 !important;         /* مسافة واسعة ومرتاحة بين الأسطر لمنع ازدحام الكلمات */
    color: #4a5568 !important;             /* لون رمادي غامق مريح للعين بدلاً من الأسود الفاقع */
    font-weight: 400 !important;         /* وز الوزن الطبيعي للنص العادي */
}
  /* إجبار ظهور أزرار إضافة السلة والشراء على بطاقات المنتجات في الجوال لثيم سيليا */
@media (max-width: 768px) {
    /* إظهار زر أضف إلى السلة وإلغاء تأثير الإخفاء المخصص للجوال */
    .product-card .add-to-cart,
    .product-item .add-to-cart,
    .product-card button.btn-add-to-cart,
    .product-item button.btn-add-to-cart,
    .product-card .product-actions,
    .product-item .product-actions {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        position: relative !important;
    }

    /* تعديل حجم وشكل الزر ليتناسب مع شاشة الجوال دون ازدحام */
    .product-card .add-to-cart,
    .product-item .add-to-cart {
        width: 100% !important;
        margin-top: 8px !important;
        padding: 6px 10px !important;
        font-size: 13px !important;
        border-radius: 6px !important;
    }
}


/* تنسيق العناوين داخل وصف المنتج إن وجدت */
.product-description h1, 
.product-description h2, 
.product-description h3 {
    font-family: 'Cairo', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a202c !important;
/* إجبار ظهور زر أضف إلى السلة وجعله فوق صورة المنتج في الجوال */
@media (max-width: 768px) {
    /* تحديد الحاوية الخاصة ببطاقة المنتج لتكون نسبية التمركز */
    .product-item, .product-card, .s-product-card {
        position: relative !important;
    }

    /* سحب زر الإضافة للسلة ووضعه فوق الصورة مباشرة */
    .product-item .add-to-cart,
    .product-card .add-to-cart,
    .product-item button.btn-add-to-cart,
    .product-card button.btn-add-to-cart,
    .product-item .s-product-card__actions,
    .product-card .s-product-card__actions {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: absolute !important;
        top: 10px !important;
        left: 10px !important;
        right: 10px !important;
        z-index: 5 !important;
        background-color: rgba(20, 35, 60, 0.85) !important; /* لون خلفية داكن وشفاف مثل الصورة */
        color: #ffffff !important;
        border-radius: 6px !important;
        padding: 6px 12px !important;
        font-size: 13px !important;
        justify-content: center !important;
        align-items: center !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
    }
/* 1. ضبط حاوية صورة المنتج لتكون القاعدة الأساسية */
.product-item, 
.product-img, 
.product-card,
.product-image-wrap {
    position: relative !important;
    overflow: hidden;
}

/* 2. تنسيق الشريط الأحمر الترويجي */
.custom-ribbon-tag {
    position: absolute !important;
    top: 15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(135deg, #d93848, #b51a2b) !important;
    color: #ffffff !important;
    padding: 6px 25px !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: center !important;
    z-index: 999 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 10px rgba(217, 56, 72, 0.3) !important;
    white-space: nowrap !important;
}

/* 3. أطراف الشريط المقصوصة بشكل هندسي */
.custom-ribbon-tag::before, 
.custom-ribbon-tag::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
}
.custom-ribbon-tag::before {
    left: -8px !important;
    border-width: 15px 8px 15px 0 !important;
    border-color: transparent #b51a2b transparent transparent !important;
}
.custom-ribbon-tag::after {
    right: -8px !important;
    border-width: 15px 0 15px 8px !important;
    border-color: transparent transparent transparent #b51a2b !important;
}/* تنسيق صفحة المنتج وأزرار الشراء لتطابق الشكل المطلوب */

/* تحسين حاوية أزرار الشراء وعداد الكمية */
.product-actions, .cart-actions-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* زر "أضف إلى السلة" (لون غامق ومتناسق) */
.btn.btn-primary, .add-to-cart-btn {
    background-color: #1a233a !important; /* لون كحلي غامق مشابه للصورة */
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 12px 20px !important;
    font-weight: bold !important;
    font-size: 16px !important;
    border: none !important;
    box-shadow: none !important;
}

/* زر "اشتري الآن" (إطار خارجي مع كتابة واضحة) */
.btn.btn-outline, .buy-now-btn {
    background-color: transparent !important;
    color: #1a233a !important;
    border: 2px solid #1a233a !important;
    border-radius: 12px !important;
    padding: 12px 20px !important;
    font-weight: bold !important;
    font-size: 16px !important;
}

/* تنسيق حواف الأزرار العامة والدفع السريع (Apple Pay) */
apple-pay-button, .apple-pay-btn, [data-apple-pay] {
    border-radius: 12px !important;
    overflow: hidden;
}

/* تنسيق عداد الكمية والسعر بجانبه */
.product-quantity-price-box, .quantity-and-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}/* تطبيق لون الخلفية الموجود في الصورة (الكحلي/الرمادي الداكن) */
.mobile-bottom-nav, .bottom-navigation, nav.fixed-bottom,
.footer-social a, .social-icons a, footer .social a {
    background-color: #1a2230 !important; /* درجة اللون المطابقة تماماً للصورة */
}

/* تنسيق النصوص والأيقونات لتكون واضحة وباللون الأبيض فوق هذا اللون */
.mobile-bottom-nav a, .bottom-navigation a, nav.fixed-bottom a,
.footer-social a, .social-icons a, footer .social a {
    color: #ffffff !important;
}/* تكبير حجم اللوجو في المتجر العام */
.logo-img, .site-logo img, header img.logo {
    max-height: 90px !important; /* قم بتعديل الرقم حسب الحجم الذي يناسبك */
    width: auto !important;
}
/* تكبير حاوية الشعار بالكامل */
.logo-container, 
.header__logo, 
.site-header__logo {
    transform: scale(1.4); /* تكبير بنسبة 40%، يمكنك تعديلها مثل 1.2 أو 1.5 */
    transform-origin: left center; /* لتثبيت مكان تكبير الشعار من جهة اليسار أو center للمنتصف */
}
@media (max-width: 768px) {
    header img, 
    .header-logo img, 
    .store-logo img,
    .logo-img {
        max-height: 80px !important; /* قم بتعديل هذا الرقم لزيادة أو تقليل الحجم حسب رغبتك في الجوال */
        width: auto !important;
    }
}/* =========================================
   HOB STORE - Settings Panel
   ========================================= */

:root {
  --hob-primary: #182f50;
  --hob-accent: #f4c400;
  --hob-text: #202533;
  --hob-muted: #687083;
  --hob-border: #e7e9ee;
  --hob-bg: #ffffff;
}

/* زر الإعدادات */
#hob-settings-button {
  position: fixed;
  left: 18px;
  bottom: 90px;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: var(--hob-primary);
  color: #fff;
  z-index: 99990;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(0,0,0,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  transition: .25s ease;
}

#hob-settings-button:hover {
  transform: scale(1.06);
}

/* الخلفية */
#hob-settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.48);
  z-index: 99998;
  opacity: 0;
  visibility: hidden;
  transition: .25s ease;
}

/* اللوحة */
#hob-settings-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(430px, 92vw);
  height: 100vh;
  background: var(--hob-bg);
  z-index: 99999;
  overflow-y: auto;
  transform: translateX(105%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  box-shadow: -10px 0 35px rgba(0,0,0,.12);
  direction: rtl;
}

/* عند الفتح */
body.hob-settings-open #hob-settings-overlay {
  opacity: 1;
  visibility: visible;
}

body.hob-settings-open #hob-settings-panel {
  transform: translateX(0);
}

/* الهيدر */
.hob-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 25px 22px;
  border-bottom: 1px solid var(--hob-border);
}

.hob-settings-title {
  margin: 0;
  font-size: 25px;
  font-weight: 700;
  color: var(--hob-text);
}

.hob-settings-close {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: #f4f5f7;
  color: #333;
  font-size: 23px;
  cursor: pointer;
}

/* الأقسام */
.hob-settings-section {
  padding: 25px;
  border-bottom: 1px dashed var(--hob-border);
}

.hob-section-title {
  margin: 0 0 7px;
  font-size: 22px;
  font-weight: 700;
  color: var(--hob-text);
}

.hob-section-description {
  margin: 0 0 20px;
  color: var(--hob-muted);
  font-size: 16px;
}

/* خيار اللغة */
.hob-language-box {
  border: 1px solid var(--hob-border);
  border-radius: 15px;
  padding: 15px;
  background: #fafafa;
}

.hob-language-current {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  color: var(--hob-primary);
  font-weight: 600;
}

.hob-change-language {
  width: 100%;
  margin-top: 13px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--hob-primary);
  background: white;
  color: var(--hob-primary);
  font-size: 17px;
  cursor: pointer;
}

/* الوضع الليلي */
.hob-theme-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.hob-theme-option {
  border: 2px solid var(--hob-border);
  border-radius: 15px;
  padding: 10px;
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: .2s ease;
}

.hob-theme-option.active {
  border-color: var(--hob-primary);
  box-shadow: 0 4px 15px rgba(24,47,80,.10);
}

.hob-theme-preview {
  height: 90px;
  border-radius: 11px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 35px;
}

.hob-light-preview {
  background: #f6f7f9;
}

.hob-dark-preview {
  background: #171927;
  color: white;
}

.hob-theme-name {
  font-size: 17px;
  color: var(--hob-text);
}

/* حجم الخط */
.hob-font-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.hob-font-option {
  border: 2px solid var(--hob-border);
  background: #fff;
  border-radius: 13px;
  padding: 12px 5px;
  cursor: pointer;
  text-align: center;
}

.hob-font-option.active {
  border-color: var(--hob-primary);
}

.hob-font-icon {
  display: block;
  font-size: 25px;
  margin-bottom: 5px;
  color: var(--hob-primary);
}

.hob-font-label {
  font-size: 15px;
  color: var(--hob-text);
}

/* الوضع الليلي للمتجر */
body.hob-dark-mode {
  background: #11131a !important;
  color: #f4f4f4 !important;
}

body.hob-dark-mode main,
body.hob-dark-mode header,
body.hob-dark-mode footer,
body.hob-dark-mode section {
  transition: background .25s ease, color .25s ease;
}

body.hob-dark-mode #hob-settings-panel {
  background: #171927;
}

body.hob-dark-mode .hob-settings-title,
body.hob-dark-mode .hob-section-title,
body.hob-dark-mode .hob-theme-name,
body.hob-dark-mode .hob-font-label {
  color: #fff;
}

body.hob-dark-mode .hob-section-description {
  color: #b5b8c4;
}

body.hob-dark-mode .hob-settings-header,
body.hob-dark-mode .hob-settings-section {
  border-color: #303340;
}

body.hob-dark-mode .hob-language-box,
body.hob-dark-mode .hob-theme-option,
body.hob-dark-mode .hob-font-option {
  background: #20222e;
  border-color: #363946;
}

body.hob-dark-mode .hob-change-language {
  background: #20222e;
  color: #fff;
  border-color: #555;
}

/* أحجام الخط */
body.hob-font-small {
  --hob-font-scale: .92;
}

body.hob-font-medium {
  --hob-font-scale: 1;
}

body.hob-font-large {
  --hob-font-scale: 1.08;
}

body.hob-font-small main,
body.hob-font-small header,
body.hob-font-small footer {
  font-size: calc(1em * .92);
}

body.hob-font-large main,
body.hob-font-large header,
body.hob-font-large footer {
  font-size: calc(1em * 1.08);
}

/* الجوال */
@media (max-width: 600px) {

  #hob-settings-panel {
    width: 92vw;
  }

  #hob-settings-button {
    left: 15px;
    bottom: 75px;
    width: 50px;
    height: 50px;
  }

  .hob-settings-header {
    padding: 23px 20px;
  }

  .hob-settings-section {
    padding: 21px;
  }

  .hob-settings-title {
    font-size: 23px;
  }

  .hob-section-title {
    font-size: 20px;
  }
}(function () {

  /* منع التكرار */
  if (document.getElementById("hob-settings-panel")) return;

  /* =========================================
     إنشاء زر الإعدادات
     ========================================= */

  const button = document.createElement("button");
  button.id = "hob-settings-button";
  button.setAttribute("aria-label", "إعدادات المتجر");
  button.innerHTML = "⚙️";

  /* =========================================
     إنشاء الخلفية
     ========================================= */

  const overlay = document.createElement("div");
  overlay.id = "hob-settings-overlay";

  /* =========================================
     إنشاء اللوحة
     ========================================= */

  const panel = document.createElement("aside");
  panel.id = "hob-settings-panel";

  panel.innerHTML = `

    <div class="hob-settings-header">

      <h2 class="hob-settings-title">
        إعدادات عامة ⚙️
      </h2>

      <button class="hob-settings-close" type="button">
        ×
      </button>

    </div>


    <!-- اللغة والعملة -->

    <div class="hob-settings-section">

      <h3 class="hob-section-title">
        اللغة والعملة 🌐
      </h3>

      <p class="hob-section-description">
        اختر اللغة والعملة المناسبة لك
      </p>

      <div class="hob-language-box">

        <div class="hob-language-current">
          🇸🇦
          <span>العربية | ريال سعودي</span>
        </div>

        <button
          type="button"
          class="hob-change-language">
          تغيير
        </button>

      </div>

    </div>


    <!-- الوضع -->

    <div class="hob-settings-section">

      <h3 class="hob-section-title">
        مظهر المتجر 🎨
      </h3>

      <p class="hob-section-description">
        اختر الوضع النهاري أو الليلي
      </p>

      <div class="hob-theme-options">

        <button
          type="button"
          class="hob-theme-option"
          data-theme="light">

          <div class="hob-theme-preview hob-light-preview">
            ☀️
          </div>

          <div class="hob-theme-name">
            الوضع النهاري
          </div>

        </button>


        <button
          type="button"
          class="hob-theme-option"
          data-theme="dark">

          <div class="hob-theme-preview hob-dark-preview">
            🌙
          </div>

          <div class="hob-theme-name">
            الوضع الليلي
          </div>

        </button>

      </div>

    </div>


    <!-- حجم النص -->

    <div class="hob-settings-section">

      <h3 class="hob-section-title">
        حجم النص
      </h3>

      <p class="hob-section-description">
        اختر حجم النص المناسب لك
      </p>

      <div class="hob-font-options">

        <button
          type="button"
          class="hob-font-option"
          data-font="small">

          <span class="hob-font-icon">ض-</span>

          <span class="hob-font-label">
            صغير
          </span>

        </button>


        <button
          type="button"
          class="hob-font-option"
          data-font="medium">

          <span class="hob-font-icon">ض</span>

          <span class="hob-font-label">
            متوسط
          </span>

        </button>


        <button
          type="button"
          class="hob-font-option"
          data-font="large">

          <span class="hob-font-icon">ض+</span>

          <span class="hob-font-label">
            كبير
          </span>

        </button>

      </div>

    </div>

  `;


  /* =========================================
     إضافة العناصر للصفحة
     ========================================= */

  document.body.appendChild(button);
  document.body.appendChild(overlay);
  document.body.appendChild(panel);


  /* =========================================
     فتح / إغلاق اللوحة
     ========================================= */

  function openSettings() {
    document.body.classList.add("hob-settings-open");
  }

  function closeSettings() {
    document.body.classList.remove("hob-settings-open");
  }

  button.addEventListener("click", openSettings);

  overlay.addEventListener("click", closeSettings);

  panel.querySelector(".hob-settings-close")
    .addEventListener("click", closeSettings);


  /* =========================================
     الوضع الليلي والنهاري
     ========================================= */

  const savedTheme =
    localStorage.getItem("hob-theme") || "light";

  function setTheme(theme) {

    if (theme === "dark") {

      document.body.classList.add("hob-dark-mode");

    } else {

      document.body.classList.remove("hob-dark-mode");

    }

    localStorage.setItem("hob-theme", theme);

    document
      .querySelectorAll(".hob-theme-option")
      .forEach(function (item) {

        item.classList.toggle(
          "active",
          item.dataset.theme === theme
        );

      });
  }

  setTheme(savedTheme);

  document
    .querySelectorAll(".hob-theme-option")
    .forEach(function (item) {

      item.addEventListener("click", function () {

        setTheme(this.dataset.theme);

      });

    });


  /* =========================================
     حجم النص
     ========================================= */

  const savedFont =
    localStorage.getItem("hob-font") || "medium";

  function setFont(font) {

    document.body.classList.remove(
      "hob-font-small",
      "hob-font-medium",
      "hob-font-large"
    );

    document.body.classList.add(
      "hob-font-" + font
    );

    localStorage.setItem("hob-font", font);

    document
      .querySelectorAll(".hob-font-option")
      .forEach(function (item) {

        item.classList.toggle(
          "active",
          item.dataset.font === font
        );

      });
  }

  setFont(savedFont);

  document
    .querySelectorAll(".hob-font-option")
    .forEach(function (item) {

      item.addEventListener("click", function () {

        setFont(this.dataset.font);

      });

    });


  /* =========================================
     زر تغيير اللغة
     ========================================= */

  const languageButton =
    document.querySelector(".hob-change-language");

  if (languageButton) {

    languageButton.addEventListener("click", function () {

      /*
       * محاولة فتح محدد اللغة الموجود
       * في الثيم تلقائياً.
       */

      const selectors = [
        '[class*="language"]',
        '[class*="lang"]',
        '[data-language]',
        '[data-lang]'
      ];

      let found = null;

      for (let i = 0; i < selectors.length; i++) {

        const element =
          document.querySelector(selectors[i]);

        if (element && !element.closest("#hob-settings-panel")) {

          found = element;
          break;

        }

      }

      if (found) {

        found.click();

      } else {

        alert(
          "اللغة والعملة يتم التحكم بها من إعدادات المتجر في سلة."
        );

      }

    });

  }


  /* =========================================
     إغلاق بالضغط على ESC
     ========================================= */

  document.addEventListener("keydown", function (event) {

    if (event.key === "Escape") {

      /* =================================================
   HOB STORE - SMART SETTINGS
   ================================================= */

:root{
  --hob-blue:#183b63;
  --hob-yellow:#f5c400;
  --hob-text:#202331;
  --hob-muted:#687080;
  --hob-border:#e3e6eb;
  --hob-bg:#fff;
  --hob-close:#e58b91;
}

/* زر الإعدادات */
#hob-settings-button{
  position:fixed;
  left:18px;
  bottom:85px;
  width:54px;
  height:54px;
  border:0;
  border-radius:50%;
  background:var(--hob-blue);
  color:#fff;
  z-index:99990;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 7px 25px rgba(0,0,0,.18);
  transition:.25s;
}

#hob-settings-button:hover{
  transform:scale(1.07);
}

/* الخلفية */
#hob-settings-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.52);
  z-index:99998;
  opacity:0;
  visibility:hidden;
  transition:.3s;
}

/* اللوحة */
#hob-settings-panel{
  position:fixed;
  top:0;
  right:0;
  width:440px;
  max-width:88vw;
  height:100dvh;
  background:#fff;
  z-index:99999;
  direction:rtl;
  overflow-y:auto;
  transform:translateX(105%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow:-12px 0 35px rgba(0,0,0,.15);
}

/* الفتح */
body.hob-settings-open #hob-settings-overlay{
  opacity:1;
  visibility:visible;
}

body.hob-settings-open #hob-settings-panel{
  transform:translateX(0);
}

/* الهيدر */
.hob-settings-header{
  height:88px;
  padding:0 25px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #eee;
}

.hob-settings-title{
  margin:0;
  font-size:27px;
  font-weight:700;
  color:var(--hob-text);
}

/* زر الإغلاق */
.hob-settings-close{
  width:45px;
  height:45px;
  border:0;
  border-radius:11px;
  background:var(--hob-close);
  color:#fff;
  font-size:34px;
  line-height:1;
  font-weight:300;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* الأقسام */
.hob-settings-section{
  padding:28px 25px;
  border-bottom:2px dashed #e7e9ed;
}

.hob-section-title{
  margin:0 0 7px;
  font-size:25px;
  font-weight:700;
  color:var(--hob-text);
}

.hob-section-description{
  margin:0 0 24px;
  font-size:17px;
  color:#4e5668;
}

/* اللغة */
.hob-language-current{
  font-size:22px;
  font-weight:500;
  color:#394361;
  text-align:right;
}

.hob-change-language{
  width:100%;
  height:58px;
  margin-top:18px;
  border:2px solid var(--hob-blue);
  border-radius:14px;
  background:#fff;
  color:var(--hob-blue);
  font-size:20px;
  font-weight:600;
  cursor:pointer;
}

/* الوضع */
.hob-theme-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.hob-theme-option{
  border:2px solid #e4e7ec;
  background:#fff;
  border-radius:17px;
  padding:8px;
  cursor:pointer;
  transition:.2s;
}

.hob-theme-option.active{
  border-color:var(--hob-blue);
  box-shadow:0 4px 14px rgba(24,59,99,.12);
}

.hob-theme-preview{
  height:105px;
  border-radius:12px;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hob-light-preview{
  background:#f7f8fa;
}

.hob-dark-preview{
  background:#191a2b;
}

/* شكل معاينة الموقع */
.hob-preview-window{
  width:82%;
  height:68%;
  border-radius:7px;
  padding:7px;
}

.hob-light-preview .hob-preview-window{
  background:#fff;
}

.hob-dark-preview .hob-preview-window{
  background:#292a3c;
}

.hob-preview-line{
  height:5px;
  width:60%;
  border-radius:10px;
  background:var(--hob-blue);
  margin-bottom:7px;
}

.hob-dark-preview .hob-preview-line{
  background:#777;
}

.hob-preview-boxes{
  display:flex;
  gap:4px;
}

.hob-preview-box{
  width:30px;
  height:25px;
  border-radius:4px;
  background:var(--hob-yellow);
}

.hob-theme-name{
  padding:10px 3px 5px;
  font-size:19px;
  color:#303543;
}

/* حجم الخط */
.hob-font-options{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
}

.hob-font-option{
  min-height:92px;
  border:2px solid #e4e7ec;
  background:#fff;
  border-radius:14px;
  cursor:pointer;
  color:var(--hob-text);
}

.hob-font-option.active{
  border-color:var(--hob-blue);
}

.hob-font-icon{
  display:block;
  color:#273d5b;
  line-height:1;
  margin-bottom:9px;
}

.hob-font-option[data-font="small"] .hob-font-icon{
  font-size:25px;
}

.hob-font-option[data-font="medium"] .hob-font-icon{
  font-size:32px;
}

.hob-font-option[data-font="large"] .hob-font-icon{
  font-size:39px;
}

.hob-font-label{
  font-size:17px;
}

/* =================================================
   الوضع الليلي
   ================================================= */

body.hob-dark-mode{
  background:#11131b!important;
  color:#eee!important;
}

body.hob-dark-mode #hob-settings-panel{
  background:#171925;
}

body.hob-dark-mode .hob-settings-header,
body.hob-dark-mode .hob-settings-section{
  border-color:#303340;
}

body.hob-dark-mode .hob-settings-title,
body.hob-dark-mode .hob-section-title,
body.hob-dark-mode .hob-theme-name,
body.hob-dark-mode .hob-font-label{
  color:#fff;
}

body.hob-dark-mode .hob-section-description{
  color:#aeb2bf;
}

body.hob-dark-mode .hob-language-current{
  color:#d8dbea;
}

body.hob-dark-mode .hob-theme-option,
body.hob-dark-mode .hob-font-option{
  background:#20222e;
  border-color:#373a48;
}

body.hob-dark-mode .hob-change-language{
  background:#20222e;
  color:#fff;
}

/* =================================================
   حجم النص
   ================================================= */

body.hob-font-small{
  --hob-font-size-factor:.92;
}

body.hob-font-medium{
  --hob-font-size-factor:1;
}

body.hob-font-large{
  --hob-font-size-factor:1.08;
}

/* =================================================
   الجوال
   ================================================= */

@media(max-width:600px){

  #hob-settings-panel{
    width:88vw;
    max-width:88vw;
  }

  .hob-settings-header{
    height:82px;
    padding:0 20px;
  }

  .hob-settings-title{
    font-size:24px;
  }

  .hob-settings-section{
    padding:24px 20px;
  }

  .hob-section-title{
    font-size:22px;
  }

  .hob-section-description{
    font-size:16px;
  }

  .hob-theme-preview{
    height:88px;
  }

  .hob-theme-name{
    font-size:17px;
  }

  .hob-font-label{
    font-size:15px;
  }

  #hob-settings-button{
    width:50px;
    height:50px;
    left:14px;
    bottom:75px;
/* ================================
   HOB - شريط الهيدر مثل الصورة
   ================================ */

:root {
    --hob-yellow: #FFD400;
    --hob-black: #111111;
    --hob-blue: #1746A2;
    --hob-red: #E91E3A;
    --hob-border: #eeeeee;
}

/* الحاوية الرئيسية */
.hob-custom-nav {
    width: 100%;
    background: #fff;
    border-top: 1px solid var(--hob-border);
    border-bottom: 1px solid var(--hob-border);
    direction: rtl;
    font-family: inherit;
    position: relative;
    z-index: 50;
}

/* الصف الأول */
.hob-top-row {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 5px 20px;
    white-space: nowrap;
    overflow: hidden;
}

/* زر العروض */
.hob-offer-btn {
    background: var(--hob-black);
    color: #fff !important;
    border-radius: 7px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none !important;
    flex-shrink: 0;
    transition: .2s;
}

.hob-offer-btn:hover {
    background: var(--hob-yellow);
    color: #111 !important;
}

/* النص */
.hob-top-text {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* الصف الثاني */
.hob-bottom-row {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    padding: 4px 15px;
    border-top: 1px solid #f3f3f3;
    white-space: nowrap;
    overflow: hidden;
}

/* روابط التصنيفات */
.hob-bottom-row a {
    color: #333 !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    transition: .2s;
}

.hob-bottom-row a:hover {
    color: var(--hob-blue) !important;
}

/* زر مميز */
.hob-special-btn {
    background: var(--hob-yellow);
    color: #111 !important;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 800 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.08);
}

/* أيقونة صغيرة */
.hob-special-btn::before {
    content: "★";
    margin-left: 5px;
}

/* الجوال */
@media (max-width: 768px) {

    .hob-top-row {
        justify-content: flex-start;
        padding: 5px 10px;
    }

    .hob-top-text {
        font-size: 11px;
    }

    .hob-offer-btn {
        font-size: 11px;
        padding: 5px 9px;
    }

    .hob-bottom-row {
        justify-content: flex-start;
        overflow-x: auto;
        gap: 18px;
        scrollbar-width: none;
    }

    .hob-bottom-row::-webkit-scrollbar {
        display: none;
    }

    .hob-bottom-row a {
        font-size: 12px;
        flex-shrink: 0;
/* ===== HOB TOP NAV ===== */

.hob-nav-bar {
    width: 100%;
    background: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    direction: rtl;
    position: relative;
    z-index: 99;
}

.hob-nav-inner {
    max-width: 1400px;
    margin: auto;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 5px 15px;
}

/* زر العروض */
.hob-nav-offer {
    background: #17479e;
    color: #fff !important;
    border-radius: 7px;
    padding: 6px 13px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none !important;
    white-space: nowrap;
}

/* الروابط */
.hob-nav-link {
    color: #333 !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: .2s;
}

.hob-nav-link:hover {
    color: #17479e !important;
}

/* النص المتحرك */
.hob-nav-marquee {
    flex: 1;
    max-width: 650px;
    overflow: hidden;
    white-space: nowrap;
}

.hob-nav-marquee span {
    display: inline-block;
    animation: hobMove 22s linear infinite;
    color: #444;
    font-size: 13px;
    font-weight: 600;
}

@keyframes hobMove {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

/* الجوال */
@media (max-width: 768px) {

    .hob-nav-inner {
        justify-content: flex-start;
        overflow-x: auto;
        gap: 15px;
        scrollbar-width: none;
    }

    .hob-nav-inner::-webkit-scrollbar {
        display: none;
    }

    .hob-nav-link {
        font-size: 12px;
    }

    .hob-nav-marquee {
        display: none;
    }

    .hob-nav-offer {
        font-size: