/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* ============ JALFAA Product (single-product.php) ============ */
:root{
  --jalfaa-primary:#025E73;
  --jalfaa-bg:#F5F7F8;
  --jalfaa-secondry:#69BFD9;
  --jalfaa-black:#1C1C1C;
  --jalfaa-orange:#E98A15;
  --jalfaa-muted: #7C7C7C;
  --jalfaa-border: #CACACA;
  --jalfaa-card: #F5F7F8;
  --jalfaa-radius: 16px;
  --jalfaa-shadow: 0 10px 30px rgba(0,0,0,.07);
  --jalfaa-panel-h: 520px;
}

.jalfaa-product{
  background: var(--jalfaa-bg);
  padding: 48px 0;
}

.jalfaa-container{
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.jalfaa-hero{
  outline: 3px solid red;
  min-height: 300px;
  background: #ddd;
}



/* ===== Language Button ===== */
.jalfaa-lang-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size:14px;

  /* ثبات الشكل + يمنع نزول النص */
  height: 44px;
  padding: 0 18px;

  border-radius: 40px;
  background: #EBEBEB;
  color: var(--jalfaa-primary);
  font-weight: 400;
  text-decoration: none;

  line-height: 1 !important;
  box-sizing: border-box;

  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jalfaa-lang-btn:hover{
  background: var(--jalfaa-secondry);
  color: var(--jalfaa-bg);
}

.jalfaa-lang-btn span{
  display: block;
  line-height: 1 !important;
  padding: 0;
  margin: 0;
}

.jalfaa-lang-icon{
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: 0 0 auto;
  display: block;
  vertical-align: middle;
}

/* ===== Brands Marquee (mobile only) — Clean + RTL/LTR ===== */
.brands-marquee{
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: clip;            /* أقوى من hidden ضد السحب الأفقي */
  contain: layout paint;     /* يمنع التراك من توسيع عرض الصفحة */
}

@supports not (overflow: clip){
  .brands-marquee{ overflow: hidden; }
}

/* تدرّج خفيف على الأطراف */
.brands-marquee::before,
.brands-marquee::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:36px;
  z-index:2;
  pointer-events:none;
}
.brands-marquee::before{
  left:0;
  background: linear-gradient(to right, #fff, rgba(255,255,255,0));
}
.brands-marquee::after{
  right:0;
  background: linear-gradient(to left, #fff, rgba(255,255,255,0));
}

@media (max-width: 767px){

  /* تحكم بالسرعة من هنا فقط */
  :root{ --brands-speed: 5s; } /* 10s أسرع | 12s متوازن | 14s أهدى */

  /*
    الهدف الحقيقي للحركة:
    - إذا Elementor استخدم Grid داخلي: حرّك الـ .e-grid / .elementor-grid
    - وإلا حرّك .brands-track نفسه
  */
  .brands-track .e-grid,
  .brands-track .elementor-grid,
  .brands-track{
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 22px;
    white-space: nowrap;
    will-change: transform;
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
  }

  /* LTR (إنجليزي) */
  html[dir="ltr"] .brands-track,
  html[dir="ltr"] .brands-track .e-grid,
  html[dir="ltr"] .brands-track .elementor-grid,
  html[lang^="en"] .brands-track,
  html[lang^="en"] .brands-track .e-grid,
  html[lang^="en"] .brands-track .elementor-grid{
    animation: brandsScroll var(--brands-speed) linear infinite !important;
  }

  /* RTL (عربي) */
  html[dir="rtl"] .brands-track,
  html[dir="rtl"] .brands-track .e-grid,
  html[dir="rtl"] .brands-track .elementor-grid,
  html[lang^="ar"] .brands-track,
  html[lang^="ar"] .brands-track .e-grid,
  html[lang^="ar"] .brands-track .elementor-grid,
  body.rtl .brands-track,
  body.rtl .brands-track .e-grid,
  body.rtl .brands-track .elementor-grid{
    animation: brandsScrollRTL var(--brands-speed) linear infinite !important;
  }

  /* كل عنصر داخل التراك */
  .brands-track > *,
  .brands-track .e-grid > *,
  .brands-track .elementor-grid > *{
    flex: 0 0 auto;
    min-width: 0;
  }

  /* تحجيم الصور */
  .brands-track img,
  .brands-track .e-grid img,
  .brands-track .elementor-grid img{
    height: 48px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
    display: block;
  }

  /* تقليل الحركة للمستخدم */
  @media (prefers-reduced-motion: reduce){
    .brands-track,
    .brands-track .e-grid,
    .brands-track .elementor-grid{
      animation: none !important;
      transform: none !important;
    }
  }
}

/* الحركة الأساسية (LTR) */
@keyframes brandsScroll{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-50%,0,0); }
}

/* الحركة (RTL) */
@keyframes brandsScrollRTL{
  from{ transform: translate3d(-50%,0,0); }
  to{ transform: translate3d(0,0,0); }
}

/* Tablet */
@media (max-width: 1024px){
  .jalfaa-lang-btn{
    height: 40px;
    padding: 0 14px;
    font-size: 12px;
  }
  .jalfaa-lang-icon{
    width: 16px;
    height: 16px;
  }
}

/* Mobile */
@media (max-width: 767px){
  .jalfaa-lang-btn{
    height: 36px;
    padding: 0 12px;
    font-size: 12px;
  }
  .jalfaa-lang-icon{
    width: 15px;
    height: 15px;
  }
}


/* ====== Layout like mockup (image left / content right) ====== */
.jalfaa-top{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

/* Right column wrapper (info + table + actions) */
.jalfaa-right{
  min-width: 0;
}



/* Image box */
.jalfaa-image{
  background: var(--jalfaa-card);
  border: 1px solid var(--jalfaa-border);
  border-radius: var(--jalfaa-radius);
  box-shadow: var(--jalfaa-shadow);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: var(--jalfaa-panel-h);
  overflow: hidden; /* keep image inside box */
}

.jalfaa-single-img img,
.jalfaa-gallery-slide img{
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}


/* Single-image helper: keep image centered and constrained */
.jalfaa-single-img{
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: grid;
  place-items: center;
}

.jalfaa-image .jalfaa-main-img{
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Title + underline line (like design) */
.jalfaa-title{
  margin: 0 0 10px;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.1;
  color: #0b3f44;
}

.jalfaa-title-line{
  height: 4px;
  width: 100%;
  background: var(--jalfaa-primary);
  border-radius: 999px;
  opacity: .85;
  margin: 8px 0 8px;
}

/* Keep supporting styles (in case h1 used instead of .jalfaa-title) */
.jalfaa-info h1{
  margin: 0 0 10px;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
}

.jalfaa-excerpt{
  margin: 0 0 8px;
  color: var(--jalfaa-muted);
  font-size: 16px;
  line-height: 1.8;
  max-width: 60ch;
}

/* WhatsApp button */

.jalfaa-wa-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--jalfaa-orange);
  color: var(--jalfaa-bg) !important;
  text-decoration: none !important;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 600;
  transition: transform .12s ease, opacity .12s ease;
}
.jalfaa-wa-btn:hover{ transform: translateY(-1px); opacity: .95; }

.jalfaa-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.jalfaa-actions--bottom{
  margin-top: 16px;
}
.jalfaa-actions--no-data{

  margin-top: 12px;
}

.jalfaa-wa-btn--small{
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 999px;
}

@media (max-width: 520px){
  .jalfaa-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .jalfaa-actions a{
    width:100%;
    text-align:center;
  }
}

/* Data section */
.jalfaa-data{
  margin-top: 26px;
}
.jalfaa-data--in-top{
  margin-top: 0;
}

.jalfaa-data h2{
  margin: 24px 0 12px;
  font-size: 22px;
  line-height: 1.2;
  color: var(--jalfaa-primary);
}

.jalfaa-section-title{
  margin: 0 0 6px;
  font-size: 18px;
  color: #0b3f44;
}

/* Table styling */
.jalfaa-table{
  border-collapse: separate;
  border-spacing: 0;
  overflow: visible;
  width: max-content;
  min-width: 100%;
  border: 1px solid var(--jalfaa-border);
  border-radius: var(--jalfaa-radius);
  background: var(--jalfaa-bg);
  box-shadow: var(--jalfaa-shadow);
}

.jalfaa-table thead{
  position: sticky;
  top: 0;
  z-index: 4;
}

.jalfaa-table thead th{
  background:var(--jalfaa-primary);
  color: var(--jalfaa-bg);
  text-align: left;
  font-weight: 700;
  padding: 12px 14px;
  border-bottom: 1px solid var(--jalfaa-border);
  font-size: 14px;
  position: sticky;
  top: 0;
  z-index: 6;
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
  background-clip: padding-box;
  }

body.rtl .jalfaa-table thead th{ text-align: right; }

.jalfaa-table tbody td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--jalfaa-border);
  font-size: 14px;
  color: #111827;
}

.jalfaa-table tbody tr:nth-child(even) td{
  background: #fbfdff;
}

.jalfaa-table tbody tr:last-child td{
  border-bottom: 0;
}

/* =========================
   JALFAA Related Products (UPDATED)
   - Always 1 row + horizontal scroll on ALL screens
   - Indicator appears only if scrollable
   - Desktop shows 4.5 cards (requested)
========================= */

.jalfaa-related-section{
  margin-top: 34px;
}

.jalfaa-related-title{
  margin: 0 0 22px; /* ✅ مسافة أكبر بين العنوان والكروت */
  font-size: 22px;
  color: #111827;
}

/* ✅ Slider variables (DESKTOP: 4.5 visible) */
.jalfaa-related-slider{
  width: 100%;
  position: relative; /* ✅ عشان نثبت الأزرار */
  --jalfaa-rel-gap: 18px;
  --jalfaa-rel-visible: 4.5; /* ✅ المطلوب */
  /* 4 gaps تقريباً بين 5 كروت ظاهر منها 4.5 */
  --jalfaa-rel-card-w: calc((100% - (var(--jalfaa-rel-gap) * 4)) / var(--jalfaa-rel-visible));
}

/* Related arrows (only show when scrollable) */
.jalfaa-related-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 0;
  background: var(--jalfaa-primary);
  font-size: 0; /* icon via ::before for RTL swapping */
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

.jalfaa-related-prev{ left: 10px; }
.jalfaa-related-next{ right: 10px; }

/* related arrow glyphs (swap in RTL) */
.jalfaa-related-btn::before{content:"\276E"; font-size:26px; line-height:1;}
.jalfaa-related-next::before{content:"\276F";}
body.rtl .jalfaa-related-prev::before{content:"\276F";}
body.rtl .jalfaa-related-next::before{content:"\276E";}

/* RTL: swap related arrow button positions (match RTL scroll start) */
body.rtl .jalfaa-related-prev{ left: auto !important; right: 10px !important; }
body.rtl .jalfaa-related-next{ right: auto !important; left: 10px !important; }

.jalfaa-related-btn:hover,
.jalfaa-related-btn:focus{background: var(--jalfaa-secondry);}

.jalfaa-related-slider.is-scrollable-x .jalfaa-related-btn{ display: flex; }

.jalfaa-related-slider.is-at-start .jalfaa-related-prev{ opacity: .35; pointer-events: none; }
.jalfaa-related-slider.is-at-end .jalfaa-related-next{ opacity: .35; pointer-events: none; }

/* ✅ Always Horizontal Scroll (no grid) */
.jalfaa-related-track{
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: default;
  display: flex;
  gap: var(--jalfaa-rel-gap);

  overflow-x: auto;
  overflow-y: hidden;

  padding: 6px 2px 14px;

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* Card */
.jalfaa-related-card{
  flex: 0 0 var(--jalfaa-rel-card-w);   /* ✅ 4.5 cards on desktop */
  max-width: var(--jalfaa-rel-card-w);
  scroll-snap-align: start;

  display: grid;
  grid-template-rows: 1fr auto;
  text-decoration: none !important;
  border-radius: 14px;
  overflow: hidden;

  border: 1px solid var(--jalfaa-border);
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.jalfaa-related-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  border-color: color-mix(in srgb, var(--jalfaa-primary) 35%, var(--jalfaa-border));
}

/* Image area */
.jalfaa-related-img{
  background: #fff;
  display: grid;
  place-items: center;
  padding: 16px;
  min-height: 190px;
}

.jalfaa-related-img img{
  width: 100%;
  height: 170px;
  object-fit: contain;
  display: block;
}

/* fallback */
.jalfaa-related-placeholder{
  width: 100%;
  height: 170px;
  background: #f3f4f6;
  border-radius: 10px;
}

/* Bottom bar (teal) */
.jalfaa-related-bar{
  background: var(--jalfaa-primary);
  padding: 14px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jalfaa-related-name{
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;

  /* لو الاسم طويل */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Responsive card width */
@media (max-width: 980px){
  .jalfaa-related-slider{
    --jalfaa-rel-gap: 14px;
    --jalfaa-rel-card-w: 260px; /* ✅ نفس اللي كان عندك */
  }

  .jalfaa-related-track{
    gap: var(--jalfaa-rel-gap);
  }
}

@media (max-width: 520px){
  .jalfaa-related-slider{
    --jalfaa-rel-card-w: 240px; /* ✅ نفس اللي كان عندك */
  }
}

/* ===== Horizontal Scroll Indicator (← →) =====
   - يظهر فقط لو فيه سكرول
   - يختفي لما توصل للنهاية (إذا JS يضيف is-at-end)
*/
.jalfaa-related-indicator{
  display: none;
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 5;

  width: 110px;
  height: 44px;
  border-radius: 999px;
  background: rgba(0, 92, 106, .88);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.15);

  align-items: center;
  justify-content: center;
  gap: 14px;

  font-size: 18px;
  font-weight: 600;

  pointer-events: none;
  animation: jalfaaRelatedHint 1.25s ease-in-out infinite;
}

/* يتفعل فقط إذا JS حط الكلاس */
.jalfaa-related-slider.is-scrollable-x .jalfaa-related-indicator{
  display: none;
}

/* يختفي عند نهاية السحب (اختياري إذا JS يحطه) */
.jalfaa-related-slider.is-at-end .jalfaa-related-indicator{
  opacity: 0;
  transform: translateX(-50%) translateY(4px);
  animation: none;
  transition: opacity .2s ease, transform .2s ease;
}

@keyframes jalfaaRelatedHint{
  0%,100%{ opacity:.92; transform: translateX(-50%) translateY(0); }
  50%{ opacity:.65; transform: translateX(-50%) translateY(-2px); }
}

/* =========================
   (باقي الكود تحت هنا خليته كما هو بدون تعديل)
========================= */


/* ===== JALFAA Category Page (match mockup) ===== */
.jalfaa-cat-wrap{
  margin-top: 0;
}

.jalfaa-cat-tabs{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 24px 0 22px;
  padding: 0 6px;
}
.jalfaa-tab{
  border: 0;
  background:transparent;
  cursor: pointer;
  padding: 10px;
  font-weight: 500;
  color: var(--jalfaa-black);
  border-bottom: 2px solid transparent;
  line-height: 1;
  border-radius:10px;
}

.jalfaa-tab:active{
  color: var(--jalfaa-bg);
  background: var(--jalfaa-secondry);
  border-bottom-color: transparent;
}

.jalfaa-tab:hover{
  color: var(--jalfaa-bg)!important;
  background-color : var(--jalfaa-primary)!important;
  border-bottom-color: var(--jalfaa-primary);
}

.jalfaa-cat-section{
  margin-top: 18px;
}

.jalfaa-cat-heading{
  margin: 28px 0 14px;
  font-size: 26px;
  font-weight: 800;
  color:var(--jalfaa-primary);
  position: relative;
  padding-bottom: 10px;
}

.jalfaa-cat-heading:after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;
  height: 3px;
  background: var(--jalfaa-primary);
  opacity: .75;
}

/* RTL underline alignment */
body.rtl .jalfaa-cat-heading:after{
  left: auto;
  right: 0;
}

.jalfaa-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  margin-top: 14px;
}

.jalfaa-card{
  background:var(--jalfaa-bg);
  border: 1px solid #eef1f4;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  overflow: hidden;
  cursor: pointer;
  display: grid;
  grid-template-rows: auto auto auto;
  transition: transform .15s ease, box-shadow .15s ease;
}

.jalfaa-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
}

.jalfaa-card-img{
  background: var(--jalfaa-bg);
  display: grid;
  place-items: center;
  padding: 18px;
  min-height: 180px;
}

.jalfaa-card-img img{
  width: 100%;
  height: 150px;
  object-fit: contain;
}

/* product name like mock */
.jalfaa-card-name{
  padding: 10px 14px 0;
  font-weight: 700;
  font-size: 16px;
  text-align:center;
  color:var(--jalfaa-black);
  min-height: 36px;
}

/* button as full-width bar */
.jalfaa-card-btn{
  margin: 12px 14px 14px;
  width: calc(100% - 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--jalfaa-primary);
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 800;
}

/* ===== Table Wrapper + Scroll hint ===== */
.jalfaa-table-wrap{
  position: relative;
  scrollbar-width: none;
  -ms-overflow-style: none;
  max-height: 420px;
  overflow-y: auto;
  overflow-x: auto; /* NEW */
  padding-top: 0 !important;
  padding-bottom: 22px;
}

.jalfaa-table-wrap.is-x-scrollable{
  cursor: default;
}
.jalfaa-table-wrap.is-grabbing{
  cursor: grabbing;
}


.jalfaa-info,
.jalfaa-table-block{
  min-width: 0;
}

.jalfaa-table-wrap:not(.is-scrollable){
  padding-bottom: 0;
}

.jalfaa-table-wrap.is-scrollable::after{
  content: "";
  position: sticky;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 52px;
  pointer-events: none;
  z-index: 2;
  display: block;
  background: linear-gradient(
    to bottom,
    rgba(245,247,248,0) 0%,
    rgba(245,247,248,.85) 70%,
    rgba(245,247,248,1) 100%
  );
}

.jalfaa-x-scroll-indicator{
  display: none;
  position: sticky;
  top: 12px;
  right: 10px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(0, 92, 106, .88);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.15);
  place-items: center;
  font-size: 18px;
  animation: scrollHintX 1.25s ease-in-out infinite;
}

.jalfaa-table-wrap.is-x-scrollable .jalfaa-x-scroll-indicator{
  display: grid;
}


/* (duplicate keyframes removed; kept later definition) */


.jalfaa-scroll-indicator{
  display: none;
  position: sticky;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(0, 92, 106, .88);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.15);
  place-items: center;
  font-size: 20px;
  animation: scrollHint 1.25s ease-in-out infinite;
}

.jalfaa-table-wrap.is-scrollable .jalfaa-scroll-indicator{
  display: grid;
}

@keyframes scrollHint{
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: .92; }
  50%      { transform: translateX(-50%) translateY(4px); opacity: .65; }
}

/* Gallery fill inside image box */
.jalfaa-image .jalfaa-gallery{
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  position: relative;
}
.jalfaa-gallery-btn, .jalfaa-gallery-dots, .jalfaa-gallery-dot{ pointer-events: auto; }

/* Gallery dots hover color */
.jalfaa-gallery-dot:hover{
  background: var(--jalfaa-secondry) !important;
  opacity: 1;
}
.jalfaa-gallery-dot.is-active{
  background: var(--jalfaa-primary) !important;
}



/* ===== Product Gallery (UPDATED to match new PHP classes) ===== */
.jalfaa-gallery{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--jalfaa-radius);
  cursor: default;
}

.jalfaa-gallery.is-grabbing{
  cursor: grabbing;
}

.jalfaa-gallery-track{
  display: flex;
  will-change: transform;
  width: 100%;
  /* ✅ reserve space for dots without pushing image down */
  height: calc(100% - 34px);
  transform: translateX(0%);
  transition: transform .35s ease;
}

.jalfaa-gallery-slide{
  flex: 0 0 100%;
  box-sizing: border-box;
  min-width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.jalfaa-gallery-slide img{
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* arrows */
.jalfaa-gallery-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 0;
  background: rgba(0, 92, 106, .85);
  color: #fff;
  font-size: 0; /* icon via ::before for RTL swapping */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  z-index: 5;
}

.jalfaa-gallery-prev{ left: 10px; }
.jalfaa-gallery-next{ right: 10px; }

/* gallery arrow glyphs (swap in RTL) */
.jalfaa-gallery-btn::before{content:"\276E"; font-size:26px; line-height:1;}
.jalfaa-gallery-next::before{content:"\276F";}
body.rtl .jalfaa-gallery-prev::before{content:"\276F";}
body.rtl .jalfaa-gallery-next::before{content:"\276E";}

.jalfaa-gallery-btn:hover,
.jalfaa-gallery-btn:focus{background: var(--jalfaa-secondry);}

/* dots (overlay - important) */
.jalfaa-gallery-dots{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 0;
  z-index: 6;
  pointer-events: auto;
}

.jalfaa-gallery-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: #c9d6da;
  cursor: pointer;
}

.jalfaa-gallery-dot.is-active{
  background: var(--jalfaa-primary);
}


/* ===== Desktop alignment: equal panels (image + right column) ===== */
@media (min-width: 981px){
  .jalfaa-top{
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .jalfaa-image{
    height: var(--jalfaa-panel-h);
    min-height: var(--jalfaa-panel-h);
  }

  .jalfaa-right{
    height: var(--jalfaa-panel-h);
    min-height: var(--jalfaa-panel-h);
    display: flex;
    flex-direction: column;
  }

  .jalfaa-info{
    flex: 0 0 auto;
  }

  .jalfaa-table-block{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-top: 4px;
  }

  .jalfaa-table-wrap{
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
}
/* ===== Horizontal scroll hint (left/right) ===== */

.jalfaa-scroll-indicator-x{
  display: none;
  margin-top: 10px;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 12px;
  height: 44px;
  border-radius: 999px;
  background: rgba(0, 92, 106, .88);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.is-scrollable-x + .jalfaa-scroll-indicator-x{
  display: flex;
}

@keyframes scrollHintX{
  0%,100%{ opacity:.95; transform: translateX(0); }
  50%{ opacity:.6; transform: translateX(6px); }
}

/* ===================== Responsive ===================== */
@media (max-width: 1024px){
  .jalfaa-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px){
  .jalfaa-top{ grid-template-columns: 1fr; }
  .jalfaa-image{ min-height: 360px; }
  .jalfaa-related{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .jalfaa-image,
  .jalfaa-info,
  .jalfaa-table-block{
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 820px){
  .jalfaa-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jalfaa-cat-tabs{ gap: 18px; }
}

@media (max-width: 520px){
  .jalfaa-product{ padding: 28px 0; }
  .jalfaa-container{ width: calc(100% - 22px); }
  .jalfaa-related{ grid-template-columns: 1fr; }
  .jalfaa-grid{ grid-template-columns: 1fr; }
}

/* ===== JALFAA Mobile Drawer ===== */
.jalfaa-mnav{ display:none; }

@media (max-width: 1024px){
  .jalfaa-mnav{ display:block; }
}

/* =========================
   Burger
========================= */
.jalfaa-mnav__burger{
  width:44px; height:44px;
  border:0; background:transparent;
  display:inline-flex; flex-direction:column; justify-content:center; gap:6px;
  cursor:pointer;

  -webkit-tap-highlight-color: transparent;
  user-select:none;
}
.jalfaa-mnav__burger span{
  display:block; height:3px; width:26px;
  background: var(--jalfaa-primary);
  border-radius: 999px;
}
.jalfaa-mnav__burger:hover,
.jalfaa-mnav__burger:active,
.jalfaa-mnav__burger:focus,
.jalfaa-mnav__burger:focus-visible{
  background:transparent !important;
  outline:none !important;
  box-shadow:none !important;
}

/* =========================
   Overlay
========================= */
.jalfaa-mnav__overlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.35);
  z-index: 999998;
}

/* =========================
   Drawer
========================= */
.jalfaa-mnav__drawer{
  position:fixed; top:0; bottom:0;
  width:min(360px, 86vw);
  background:#fff;
  z-index: 999999;
  transform: translateX(110%);
  transition: transform .25s ease;

  /* ✅ بدل 90px: خليها منطقية عشان ما يصير فراغ كبير */
  padding: 8px 16px 14px;

  overflow:auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  -webkit-tap-highlight-color: transparent;
}

/* RTL يدخل من اليمين - LTR من اليسار */
body.rtl .jalfaa-mnav__drawer{ right:0; left:auto; transform: translateX(110%); }
body:not(.rtl) .jalfaa-mnav__drawer{ left:0; right:auto; transform: translateX(-110%); }

.jalfaa-mnav-open body.rtl .jalfaa-mnav__drawer{ transform: translateX(0); }
.jalfaa-mnav-open body:not(.rtl) .jalfaa-mnav__drawer{ transform: translateX(0); }

/* لو أنت مسجل دخول و عندك admin bar */
body.admin-bar .jalfaa-mnav__drawer{
  padding-top: 36px;
}

/* =========================
   Top bar inside drawer
========================= */
.jalfaa-mnav__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

/* ✅ زر الإغلاق بدون أي أحمر */
.jalfaa-mnav__close{
  width:40px; height:40px;
  border:0 !important;
  border-radius:10px;
  background:#f2f2f2 !important;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  color: var(--jalfaa-primary) !important;
  outline:none !important;
  box-shadow:none !important;
  -webkit-tap-highlight-color: transparent;
}
.jalfaa-mnav__close:hover,
.jalfaa-mnav__close:active,
.jalfaa-mnav__close:focus,
.jalfaa-mnav__close:focus-visible{
  background:#f2f2f2 !important;
  color: var(--jalfaa-primary) !important;
  outline:none !important;
  box-shadow:none !important;
}

/* =========================
   Actions (lang + search)
   ✅ البحث فوق وزر اللغة تحته
========================= */
.jalfaa-mnav__actions{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end; /* RTL: يمين */
}

/* البحث: عرض كامل */
.jalfaa-mnav__actions form.search-form{
  width: 100%;
  display:flex;
  gap:10px;
  align-items:center;
}
.jalfaa-mnav__actions .search-field{
  width: 100%;
  min-width: 0;
  border:1px solid #ddd;
  border-radius:999px;
  padding:10px 12px;
  outline: none;
}
.jalfaa-mnav__actions .search-field:focus{
  border-color: color-mix(in srgb, var(--jalfaa-primary) 40%, #ddd);
}
.jalfaa-mnav__actions .search-submit{
  border:0;
  border-radius:999px;
  padding:10px 14px;
  background: var(--jalfaa-primary);
  color:#fff;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.jalfaa-mnav__actions .search-submit:hover{ opacity:.95; }

/* زر اللغة تحت البحث وبمحاذاة يمين */
.jalfaa-mnav__actions .jalfaa-lang-btn{
  align-self: flex-end;
  padding: 10px 14px;
  white-space: nowrap;
}

/* =========================
   Menu list
========================= */
.jalfaa-mnav__list{ list-style:none; margin:0; padding:0; }
.jalfaa-mnav__list li{ margin:0; padding:0; border-bottom:1px solid #eee; }

.jalfaa-mnav__list a{
  display:block;
  padding:14px 6px;
  text-decoration:none !important;
  color: var(--jalfaa-black);
  font-weight:600;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

.jalfaa-mnav__list a:hover{
  background: rgba(2, 94, 115, .08) !important;
  color: var(--jalfaa-primary) !important;
  border-radius: 12px;
}
.jalfaa-mnav__list a:focus,
.jalfaa-mnav__list a:active{
  background: rgba(2, 94, 115, .10) !important;
  color: var(--jalfaa-primary) !important;
  outline:none !important;
  box-shadow:none !important;
  border-radius: 12px;
}

.jalfaa-mnav__list .current-menu-item > a,
.jalfaa-mnav__list .current_page_item > a,
.jalfaa-mnav__list .current-menu-ancestor > a{
  background: rgba(2, 94, 115, .12) !important;
  color: var(--jalfaa-primary) !important;
  border-radius: 12px;
}

.jalfaa-mnav__close{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 26px;          /* اختياري: أنعم من 28 */
  line-height: 1 !important;

  padding: 0 !important;    /* مهم */
}

/* لو لسه نازل “شعرة” نرفعه 1px */
.jalfaa-mnav__close{
  position: relative;
  top: 0px;  /* غيّرها 0 أو -2 حسب اللي يعجبك */
}

/* =========================================
   1) Unified Section Padding + Gap (u-sec)
   ========================================= */
.u-sec{
  padding: 80px 24px !important;
  --sec-gap: 24px;
}

/* يحاول يطبق gap على أشهر حاويات Elementor */
.u-sec .e-con-inner,
.u-sec .elementor-container,
.u-sec .elementor-widget-wrap{
  gap: var(--sec-gap) !important;
}

@media (max-width: 1024px){
  .u-sec{
    padding: 64px 18px !important;
    --sec-gap: 18px;
  }
}

@media (max-width: 767px){
  .u-sec{
    padding: 48px 16px !important;
    --sec-gap: 14px;
  }
}

/* =========================================
   2) Categories Grid (cat-grid)
   Desktop/Tablet: 3 cols
   Mobile: 2 cols + last card centered
   ========================================= */
.cat-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;

  /* يمنع التمدد الوحشي في الشاشات الكبيرة */
  max-width: 1200px;

  /* ✅ جديد: عشان الكروت ما تصير "عريضة" داخل أعمدتها */
  justify-items: center !important;
}

@media (max-width: 1024px){
  .cat-grid{
    gap: 18px !important;
  }
}

@media (max-width: 767px){
  .cat-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  /* مع 5 كروت: نخلي الأخير يتوسط في الصف الثالث */
  .cat-grid > .cat-card:last-child{
    grid-column: auto !important;
    width: 100% !important;
    max-width: 340px !important;
    justify-self: center !important;
  }
}

/* =========================================
   3) Card Styling (cat-card)
   ثابت/مرن + ما يتضخم على الشاشات الكبيرة
   ========================================= */
.cat-card{
  width: 100% !important;

  /* ✅ جديد: سقف عرض يمنع الضخامة */
  max-width: 340px !important;
  justify-self: center !important;

  min-height: clamp(280px, 24vw, 340px) !important;

  background: #fff;
  border-radius: 22px;
  overflow: hidden;

  box-shadow: 0 18px 28px rgba(0,0,0,.12);

  display: flex !important;
  flex-direction: column;

  padding: 18px 18px 16px !important;
}

@media (max-width: 1024px){
  .cat-card{
    padding: 16px !important;
  }
}

@media (max-width: 767px){
  .cat-card{
    min-height: clamp(260px, 55vw, 320px) !important;
    padding: 14px !important;

    /* ✅ اختياري/مفيد: على الموبايل خليها تملى العمود */
    max-width: 100% !important;
  }
}

/* =========================================
   4) Image area inside card
   ========================================= */
.cat-card .elementor-widget-image{
  margin-bottom: 14px !important;
}

.cat-card .elementor-widget-image img{
  width: 100% !important;

  /* منطقة صورة موحدة */
  height: clamp(170px, 18vw, 220px) !important;

  object-fit: contain !important;
  display: block;
}

/* =========================================
   ========================================= */
.cat-card .elementor-heading-title{
  text-align: center;
  font-weight: 700;

  /* حجم خط ذكي يتقلص عند الحاجة */
  font-size: clamp(14px, 2.2vw, 20px);
  line-height: 1.25;

  margin: 6px 0 14px !important;

  /* مساحة ثابتة – الكرت ما يطول */
  min-height: calc(1.25em * 2);
  max-height: calc(1.25em * 2);

  overflow: hidden;

  /* يمنع كسر الكلمات بشكل سيئ */
  word-break: break-word;
  overflow-wrap: anywhere;
}


/* =========================================
   6) Button pinned to bottom
   ========================================= */
.cat-card .elementor-widget-button{
  margin-top: auto !important;
}

.cat-card .elementor-button{
  width: 100% !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
}


/* =========================
   JALFAA Unified Button (Elementor + normal links/buttons)
========================= */

.jalfaa-btn .elementor-button,
a.jalfaa-btn,
button.jalfaa-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 48px !important;       /* Default = MD */
  padding: 0 22px !important;        /* Default = MD */
  border-radius: 10px !important;    /* Figma */

  border: 0 !important;
  text-decoration: none !important;

  font-weight: 500 !important;
  line-height: 1 !important;

  box-shadow: 0 4px 4px rgba(0,0,0,.20) !important;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease !important;

  -webkit-tap-highlight-color: transparent;
}

/* Hover / Active */
.jalfaa-btn .elementor-button:hover,
a.jalfaa-btn:hover,
button.jalfaa-btn:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 10px rgba(0,0,0,.18) !important;
}

.jalfaa-btn .elementor-button:active,
a.jalfaa-btn:active,
button.jalfaa-btn:active{
  transform: translateY(0) !important;
  box-shadow: 0 4px 4px rgba(0,0,0,.20) !important;
}

/* Focus (مهم للوصولية) */
.jalfaa-btn .elementor-button:focus-visible,
a.jalfaa-btn:focus-visible,
button.jalfaa-btn:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--jalfaa-primary) 60%, white) !important;
  outline-offset: 2px !important;
}

/* ===== Variants بالألوان ===== */

/* Teal (Primary) */
.jalfaa-btn--primary .elementor-button,
a.jalfaa-btn--primary,
button.jalfaa-btn--primary{
  background: var(--jalfaa-primary) !important;
  color: #fff !important;
}
.jalfaa-btn--primary .elementor-button:hover,
a.jalfaa-btn--primary:hover,
button.jalfaa-btn--primary:hover{
  background: color-mix(in srgb, var(--jalfaa-primary) 88%, black) !important;
}

/* Light Blue (Secondary) */
.jalfaa-btn--secondry .elementor-button,
a.jalfaa-btn--secondry,
button.jalfaa-btn--secondry{
  background: var(--jalfaa-secondry) !important;
  color: #fff !important;
}
.jalfaa-btn--secondry .elementor-button:hover,
a.jalfaa-btn--secondry:hover,
button.jalfaa-btn--secondry:hover{
  background: color-mix(in srgb, var(--jalfaa-secondry) 88%, black) !important;
}

/* Orange */
.jalfaa-btn--orange .elementor-button,
a.jalfaa-btn--orange,
button.jalfaa-btn--orange{
  background: var(--jalfaa-orange) !important;
  color: #fff !important;
}
.jalfaa-btn--orange .elementor-button:hover,
a.jalfaa-btn--orange:hover,
button.jalfaa-btn--orange:hover{
  background: color-mix(in srgb, var(--jalfaa-orange) 88%, black) !important;
}

/* =========================
   Button Sizes
========================= */

/* ===== Small ===== */
.jalfaa-btn--sm .elementor-button,
a.jalfaa-btn--sm,
button.jalfaa-btn--sm{
  min-height: 40px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
}

/* ===== Large ===== */
.jalfaa-btn--lg .elementor-button,
a.jalfaa-btn--lg,
button.jalfaa-btn--lg{
  min-height: 56px !important;
  padding: 0 28px !important;
  font-size: 16px !important;
  border-radius: 12px !important;
}

/* ===== Full Width (Block) ===== */
.jalfaa-btn--block{
  display: flex !important;
}

/* Elementor wrapper support */
.elementor-widget-button.jalfaa-btn--block .elementor-button-wrapper{
  display: block !important;
}

.jalfaa-btn--block .elementor-button,
a.jalfaa-btn--block,
button.jalfaa-btn--block{
  width: 100% !important;
  justify-content: center !important;
  margin: 12px 0 !important; /* المسافة اللي طلبتها */
}

/* =========================
   Mobile tweaks
========================= */
@media (max-width: 767px){
  .jalfaa-btn .elementor-button,
  a.jalfaa-btn,
  button.jalfaa-btn{
    min-height: 44px !important;
    padding: 0 18px !important;
  }

  .jalfaa-btn--lg .elementor-button,
  a.jalfaa-btn--lg,
  button.jalfaa-btn--lg{
    min-height: 48px !important;
    padding: 0 22px !important;
  }
}





.jalfaa-related-track.is-grabbing{
  cursor: grabbing;
}


/* =========================
   Fix RTL arrows direction (only flip the icon)
========================= */
body.rtl .jalfaa-related-btn{
  direction: ltr; /* يمنع أي قلب تلقائي للحروف/الرموز */
}

body.rtl .jalfaa-related-btn svg,
body.rtl .jalfaa-related-btn i,
body.rtl .jalfaa-related-btn span{
  transform: scaleX(-1);
  display: inline-block;
}


/* Hide native scrollbars (keep scrolling) */
.jalfaa-table-wrap::-webkit-scrollbar{ width:0; height:0; }
.jalfaa-related-track::-webkit-scrollbar{ width:0; height:0; }


/* ================================
   Back To Categories – Tabs Style
   ================================ */
/* =====================================
   Tabs Wrapper
   ===================================== */

/* =====================================
   Tabs Wrapper
   ===================================== */
.jalfaa-cat-tabs{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* مجموعة التابات */
.jalfaa-tabs-group{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* =====================================
   Base Tab Style (ALL tabs + back use this)
   ===================================== */
.jalfaa-tab{
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 10px;
  font-weight: 500;
  color: var(--jalfaa-black);
  border-bottom: 2px solid transparent;
  line-height: 1;
  border-radius: 10px;
  text-decoration: none;       /* عشان الروابط */
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* Hover */
.jalfaa-tab:hover{
  color: var(--jalfaa-bg) !important;
  background-color: var(--jalfaa-primary) !important;
  border-bottom-color: var(--jalfaa-primary);
}

/* Active (لحظة الضغط) */
.jalfaa-tab:active{
  color: var(--jalfaa-bg) !important;
  background-color: var(--jalfaa-primary) !important;
  border-bottom-color: var(--jalfaa-primary);
}

/* Active tab (الكلاس اللي يبقى مفعّل) */
.jalfaa-tab.is-active{
  color: var(--jalfaa-primary);
  border-bottom-color: var(--jalfaa-primary);
  font-weight: 700;
  background: transparent;
}

/* خلي التاب النشط ما يصير له ستايل hover */
.jalfaa-tab.is-active:hover,
.jalfaa-tab.is-active:active{
  color: var(--jalfaa-primary) !important;
  background: transparent !important;
  border-bottom-color: var(--jalfaa-primary);
}

/* =====================================
   حالة: زر فقط بدون Tabs
   ===================================== */
.jalfaa-cat-tabs.jalfaa-cat-back-only{
  justify-content: flex-end;
}

html[dir="rtl"] .jalfaa-cat-tabs.jalfaa-cat-back-only{
  justify-content: flex-start;
}

/* =====================================
   Responsive (Mobile)
   ===================================== */
@media (max-width: 767px){
  .jalfaa-cat-tabs{ gap: 10px; }
  .jalfaa-tab{ font-size: 14px; }
}


/* ===== Single product: Back To Products (same style as category back link) ===== */
.jalfaa-product-back{
  display: flex;
  justify-content: flex-end;
  margin: 0 0 10px;
}

html[dir="rtl"] .jalfaa-product-back{
  justify-content: flex-start;
}