/* jahmi.sa codes */

.mm-spn.mm-spn--navbar ul:before {
	content: "";
	opacity: 1;
	border-top: 1px solid #ddd;
	/* use CSS variable if available, otherwise fallback to the image */
	background-image: var(
		--custom-image1,
		url(https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=600,height=600,onerror=redirect,format=auto/bRZZzW/orR6b5GuBq1hg0WsF9DdJcib5LDEa56wUdn4aiWJ.png)
	);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	display: inline-block;
	width: 100%;
	margin: auto;
	position: static;
	height: 120px;
}

/* شارة كرت المنتج (بدون شفافية) */
custom-salla-product-card .product-block__thumb .badge {
	background-color: #042B32;
	color: #ffffff;
}

/* jahmi.sa codes */

/* not jahmi codes */

/* Pop */
@-webkit-keyframes hvr-pop {
	50% {
		-webkit-transform: scale(1.2);
		transform: scale(1.2);
	}
}
@keyframes hvr-pop {
	50% {
		-webkit-transform: scale(1.2);
		transform: scale(1.2);
	}
}
.hvr-pop {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-pop:hover,
.hvr-pop:focus,
.hvr-pop:active {
	-webkit-animation-name: hvr-pop;
	animation-name: hvr-pop;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
}

button,
salla-button {
	border-radius: 100px !important;
}
/* not jahmi codes */

/* Trustpilot Box */
.trustpilot-widget-container {
	position: relative;
	top: 20px;
	left: 0%;
}

/* حدود وزوايا للصندوق (iframe) */
.trustpilot-widget-container iframe[src*="trustpilot.com"] {
	border: 1px solid #e5e7eb; /* عدّل اللون/السُمك حسب الهوية */
	border-radius: 80px; /* زوايا مستديرة */
	overflow: hidden;
	display: block;
}

/* تحسين الاستجابة للجوال */
@media (max-width: 768px) {
	.trustpilot-widget-container {
		top: 10px; /* نزول بسيط */
		left: -5%; /* محاذاة أكثر لليسار */
	}
}
/* Trustpilot Box */

/* Performance Improvements - Hero */
/* 1) Give the whole hero slider a stable minimum height */
.s-slider-container {
	min-height: 20vh; /* height of hero on most screens */
}

/* 2) Make sure each slide respects that height */
.s-slider-container .swiper-slide {
	min-height: 40vh;
}

/* 3) Ensure the bg__image acts as a proper background frame */
.s-slider-container .swiper-slide .bg__image {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* 4) The video should just fill that frame */
.s-slider-container .swiper-slide .bg__image > video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Performance Improvements - Product Pictures */
/* نخلي مساحة صورة المنتج مربعة وثابتة */
.product-block__thumb .thumb-wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1; /* مربع، تقدر تغيّرها لو حاب شكل مستطيل */
	overflow: hidden;
}

/* نخلي الصورة تعبي المربع بالكامل بشكل مرتب */
.product-block__thumb .thumb-wrapper img {
	position: absolute;
	inset: 0; /* top/right/bottom/left = 0 */
	width: 100%;
	height: 100%;
	object-fit: cover; /* يقص من الأطراف بدل ما يضغط الصورة */
	display: block;
}

/* ============================= */
/* Hero images (no override of display) */
/* ============================= */

/* Mobile hero – apply ONLY on small screens */
@media (max-width: 767px) {
  /* Let the slide & bg container grow with the image */
  .s-slider-container .swiper-slide {
    min-height: auto;
  }

  .s-slider-container .swiper-slide .bg__image {
    height: auto;
    overflow: visible;
  }

  /* Apply correct ratio & scaling to the mobile hero image */
  .s-slider-container .swiper-slide .bg__image img[src*="Vh9uO0gTXqeR7LvR3By4Hlaz4SOBfIlIGuhaXlc0"] {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1080 / 2000;   /* نفس أبعاد الصورة الحقيقية */
    display: block;
  }
}

/* Desktop hero – apply ONLY on larger screens */
@media (min-width: 1024px) {
  img[src*="dRSClvGGbO4ZWYjHopQE4Fo46MTQl4ypNGePvz26"] {
    width: 100%;
    height: auto;
    aspect-ratio: 19 / 9;
  }
}

/* ============================= */
/* FINAL FIX - Category Banners  */
/* 580 x 580 → 1:1 square        */
/* ============================= */

/* العنصر الحاوي للبانر */
.home-sec-2.s-block--banners .banner-entry.h-banner {
  position: relative;
  width: 100%;
  /* نتجاهل أي ارتفاع من الثيم */
  height: auto !important;
  min-height: 0 !important;

  /* هذا هو الأساس: مربع ثابت */
  aspect-ratio: 1 / 1 !important;

  overflow: hidden;
}

/* الصورة داخل البانر */
.home-sec-2.s-block--banners .banner-entry.h-banner .banner-img {
  position: absolute;
  inset: 0;           /* top/right/bottom/left = 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================= */
/* Accessibility – contrast fixes */
/* ============================= */

/* شارات الكروت (ribbons + badges) بلونك الغامق R:4 G:43 B:50 */
.badge.badge--ribbon.badge--primary,
.product-block__thumb .badge {
  background-color: #042B32 !important;
  color: #ffffff !important;
}

/* أي شارة primary ثانية نخليها نفس اللون */
.badge.badge--ribbon,
.badge--primary {
  background-color: #042B32 !important;
  color: #ffffff !important;
}

/* عدّاد التقييم داخل كرت المنتج */
.s-product-card-rating-count,
.s-product-card-rating-count span {
  color: #111827 !important; /* رمادي غامق جداً وواضح على الخلفية الفاتحة */
}

/* نخلي عناصر <li> في قائمة وسائل الدفع شفافة في التخطيط */
ul.payments-wrapper > li {
  display: contents;
}

/* ============================= */
/* Accessibility – touch targets */
/* ============================= */
@media (max-width: 767px) {
  /* زر البحث في الهيدر */
  button.search-btn {
    min-width: 42px;
    min-height: 42px;
    padding: 8px;              /* مساحة لمس أكبر */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* زر المنيو (الهامبرقر) في الهيدر */
  a.mburger {
    min-width: 42px;
    min-height: 42px;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* مسافة بسيطة بينهم عشان ما يلتصقون */
  button.search-btn {
    margin-inline-start: 4px;
    margin-inline-end: 4px;
  }
}

/* ============================= */
/* CLS fixes – category section  */
/* ============================= */

/* سكشن الكاتيجوري بانرز نفسه (اللي فوق الكروت) */
section.home-sec-2.s-block--banners.sq-awesome-banner {
  position: relative;
  min-height: 620px;      /* ديسكتوب – اضبطها حسب ارتفاعك الفعلي لو حاب */
}

@media (max-width: 767px) {
  section.home-sec-2.s-block--banners.sq-awesome-banner {
    min-height: 360px;    /* موبايل – مساحة كافية لبانرز الكاتيجوري */
  }
}

/* ============================= */
/* CLS fixes – fullscreen hero   */
/* ============================= */

/* سكشن الهيرو اللي فيه السلايدر (1 / 1 في التقرير) */
#fullscreen-banner-0 {
  position: relative;
  min-height: 75vh;       /* ديسكتوب – تقريبا فل سكرين */
}

@media (max-width: 767px) {
  #fullscreen-banner-0 {
    min-height: 80vh;     /* موبايل – نخليها أطول شوية */
  }
}

/* نتأكد إن السلايدر داخل الهيرو ياخذ كل ارتفاع السكشن */
#fullscreen-banner-0 .s-slider-container {
  min-height: 100%;
}

/* ============================= */
/* CLS fixes – fullscreen hero   */
/* ============================= */

/* أساس الهيرو */
#fullscreen-banner-0 {
  position: relative;
}

/* ديسكتوب / تابلت – نخليه شبه فل سكرين ومستقر */
@media (min-width: 768px) {
  #fullscreen-banner-0 {
    min-height: 75vh;
  }

  #fullscreen-banner-0 .s-slider-container {
    min-height: 100%;
  }
}

/* موبايل – نحجز ارتفاع الهيرو بناءً على أبعاد صورة الموبايل (1080x2000) */
@media (max-width: 767px) {
  #fullscreen-banner-0 {
    width: 100%;
    /* 2000 / 1080 ≈ 1.85 → يحجز ارتفاع ثابت من أول ما الصفحة ترندر */
    min-height: calc(100vw * 2000 / 1080);
    overflow: hidden;
  }

  /* نخلي ما داخل الهيرو يتبع نفس الارتفاع بدون ما يغيّر الـ layout */
  #fullscreen-banner-0 .s-slider-container,
  #fullscreen-banner-0 .swiper-wrapper,
  #fullscreen-banner-0 .swiper-slide,
  #fullscreen-banner-0 .swiper-slide .bg__image {
    min-height: 100%;
  }

  /* نطبّق الستايل على صورة الهيرو للموبايل فقط
     عشان ما نظهر صورة الديسكتوب في الموبايل */
  #fullscreen-banner-0 .swiper-slide .bg__image img[src*="Vh9uO0gTXqeR7LvR3By4Hlaz4SOBfIlIGuhaXlc0"] {
    width: 100%;
    height: auto;
    object-fit: cover;  /* لو حاب تشوف الصورة كاملة بدون قص غيّرها لـ contain */
    /* مهم: ما نغيّر display عشان ما نكسر كلاس hidden حق صورة الديسكتوب */
  }
}

/* =============== */
/* Mobile: نفس اللي ضبط معك */
/* =============== */
@media (max-width: 1023px) {
  .footer-bottom{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:12px !important;
  }

  .footer-bottom #mc_embed_shell{ order:1 !important; width:100%; }
  .footer-bottom .sbc-wrapper{ order:2 !important; }
  .footer-bottom salla-trust-badges{ order:3 !important; }
}

/* Fix aspect ratio of Freelance Certificate trust badge */
img.s-trust-badges-image[src*="freelance.png"] {
  height: 24px !important;  /* اخترنا ارتفاع صغير يناسب الشريط */
  width: auto !important;   /* المتصفح يضبط العرض تلقائياً بنفس نسبة 160x72 */
  aspect-ratio: 160 / 72;   /* توضيح إضافي للمتصفح + Lighthouse */
}

/* Put label + number on the same line */
salla-trust-badges .s-trust-badges-content {
  display: flex;
  flex-wrap: wrap;              /* لو المساحة ضاقت ينزل الرقم تحت */
  align-items: center;
  gap: 0.25rem;                 /* مسافة بسيطة بين النص والرقم */
}

/* إزالة الهوامش الافتراضية */
salla-trust-badges .s-trust-badges-label {
  margin: 0;
}

/* إضافة النقطتين بعد النص العربي */
salla-trust-badges .s-trust-badges-label::after {
  content: ":";
}

/* تنسيق رقم الوثيقة */
salla-trust-badges .s-trust-badges-number {
  margin: 0;
  font-weight: 700;
}

/* وضع زر التيليجرام – ديناميك حسب الجهاز */

/* ديسكتوب / تابلت */
.telegramAnchor {
  bottom: 20px; /* تحت يمين عادي */
}

/* موبايل – نرفعه فوق شريط التنقل السفلي */
@media (max-width: 767px) {
  .telegramAnchor {
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    /* لو تشوفه لسا نازل كثير، جرّب 80px أو 70px بدل 90px */
  }
}

/* Fix SBC badge aspect ratio */
.sbc-wrapper .sbc-icon img,
.sbc-wrapper img[src*="sbc.png"] {
  height: auto !important;        /* لا تجبره على ارتفاع معيّن */
  width: 100% !important;         /* يملأ عرض الحاوية فقط */
  aspect-ratio: 192 / 146;        /* نفس أبعاد الصورة الأصلية */
  max-width: 48px;                /* تقدّر تصغّره أو تكبّره من هنا */
}