* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
font-family: "Cairo", sans-serif;

}
body{
  font-family: Tajawal !important;
  font-weight:bold;
}
.container {
  display: grid;
  grid-template-rows: auto 1fr auto; /* header / main / footer */
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "header header header"
    "main main main"
    " footer footer footer";
  width: 100%;
  min-height: 100vh; /* الحاوية تاخد كامل ارتفاع الشاشة على الأقل */
  box-sizing: border-box;
}
.product-swiper{
  max-width:1900px !important;
  width:100%;
  margin:0 auto;
}
/* ====== Header ====== */
header {
  grid-area: header;
  top: 0;
  background-color: white;
  border-bottom: 2px solid #33333314;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
      direction: rtl;
}
/* #productsList {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  transition: opacity 0.3s ease;
} */
#productDetails {
  transition: opacity 0.3s ease;
}
.back-btn {
  border: none;
  background: none;
  color: #007bff;
  font-size: 18px;
  cursor: pointer;
  margin-bottom: 15px;
}


.cont{
  width: 100%;
  display: flex;
 flex-direction: column;
  align-items: center;
  position: relative;
}

.logo {
  font-weight: bold;
  font-size: 20px;
  border-bottom: 2px solid #33333314;
  width:100%;
  display: none;
  justify-content: center;
  padding: 10px 0;
  cursor: pointer;
  
}


.logo img{
 border-radius: 50%;
  border: 2px solid #333;
  margin-bottom: 10px;
  margin-top:10px;
  width: 90px;
  height: 90px;
}

.sdsad{
  display: flex;
  justify-content:space-between;
  align-items: center;
  width:100%;
}
.contsdsd{
  width:100%;
}
.lddow{
   display: flex;
  flex-direction: column; /* يخلي الصورة فوق واللينكات تحت */
  align-items: center;
  width: 100%;
  gap: 10px; /* مسافة بسيطة بين الصورة واللينكات */
  background-color:#89CFF0;
}
/* ====== Sidebar ====== */
nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 250px;
  height: 100vh;
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  transition: right 0.3s ease;
  z-index: 9999;
}

nav ul {
  list-style: none;
  padding: 0 20px;
}

nav ul li {
  margin-bottom: 10px;
}

nav ul li a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}


nav.active {
  right: 0;
}

/* ====== Main & Footer ====== */
main {
  grid-area: main;
  background-color:white;
  z-index:400;
}

footer {
  grid-area: footer;
}

/* ====== Responsive ====== */
@media (max-width: 768px) {
  .nav-links {
    display: none; /* نخفي روابط الهيدر في الموبايل */
  }

}
 .order-form {
      background: #fff;
      padding: 25px 30px;
      border-radius: 12px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      width: 90%;
      max-width: 400px;
    }

    h2 {
      text-align: center;
      margin-bottom: 20px;
      color: #333;
    }

    input, textarea, select, button {
      padding: 10px;
     
      border: 1px solid #ccc;
      font-size: 16px;
      outline: none;
        background-color: white;
    }

    input:focus, textarea:focus, select:focus {
      border-color: #0d6efd;
    }

    button {
      background-color: #89CFF0;;
      color: #fff;
      cursor: pointer;
      transition: 0.3s;
    }



    .success, .error {
      text-align: center;
      font-size: 16px;
      margin-top: 10px;
    }

    .success { color: green; }
    .error { color: red; }

    .section-buttons{
      display:none;
    }
    .text-canvas p{
      display:none;
    }
    
.slider-container {
  position: relative;
  width:100%;
  overflow: hidden;
}
.category{
  border-bottom: 2px solid #33333314;
  margin: 20px;

}
.slider-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ✅ تظبط الصورة جوه الإطار بدون تمدد أو تشويه */
  display: block;
}

.slider {
  display: flex;
  transition: transform 0.5s ease;
}

.slide {
  display: none;
  flex: 0 0 100%;
  text-align: center;
}

.slide.active {
  display: block;
}




/* button.next {
  right: 10px;
} */

.add-image-btn{
  display:none;
}
.settings-modal{
  display:none;
}
.feature-image {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 10px; /* بيتغير حسب اللي انت عامله في المودال */
  max-width:1900px;
  margin:0 auto;
  cursor: pointer;
  padding:10px;
}

.feature-image img {
  width: 100%;
  object-fit: cover; /* ✅ الصورة تبقى متناسبة */
  border-radius: inherit;
  transition: all 0.3s ease;
}

.category-image{
  display: flex;
  justify-content: center;
  align-items: center;
  width:90%;
  margin:40px auto;
  height:100%;
}
.category-image img{
  width:100%;
  height:100%;
  border-radius:10px;
}
[contenteditable="true"]:not(.edit-mode) {
  pointer-events: none;
  user-select: text;
}
.cont-headeing-paragraph,
.cont-headeing-paragraphh {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 80%;
  margin:20px auto;
}
.cont-headeing, 
.cont-paragraph{
  width:100%;
}

.settings-content-subheading{
  display:none;
}

iframe {
  width: 100% !important;
  height:100%;
  aspect-ratio: 16 / 9 !important;
}

.popup{
  display:none;
}

.advanced-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  direction:rtl;
}
.text-box {
  font-size: 30px;
}

  .image-box img {
    width: 100%;
    height: 100%;
  }
@media (max-width: 1279px) {
  .advanced-content {
    flex-direction: column; /* يخلي النص تحت الصورة */
    text-align: center; /* يخلي التنسيق جميل في الموبايل */
  }



  .image-box img {
    width: 100%;
    height: 100%;
  }
}

.category-section {
  width: 100%;
  max-width: 1300px;
  margin: 40px auto;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 10px;
}


    .category-title {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 20px;
      color: #333;
      border-bottom: 4px solid #3333331a;
      padding-bottom: 5px;
      text-align: right;
    }



.footer-container{
  width: 100%;
}



.arrow {
  transition: transform 0.3s ease;
}

/* ✅ معلومات الاتصال */
.footer-contact {
    border-radius: 10px;
  padding: 20px;
  text-align: center;
  margin-top: 20px;
}

.footer-contact h4 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #222;
}

.footer-contact p {
  margin: 5px 0;
  color: #555;
  font-size: 15px;
}

.social-icons {
  margin-top: 15px;
}

.social-icons a {
  color: #555;
  margin: 0 8px;
  font-size: 20px;
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: #e74c3c;
}

.footer-bottom {
  text-align: center;
  margin-top: 15px;
  color: #777;
  font-size: 14px;
}

/* ✅ الديسكتوب */
@media (min-width: 768px) {
  .footer-container {
    display: flex;
    justify-content: space-between;
    max-width: 1000px;
  }


  .footer-dropdown-header {
    cursor: default;
  }

  .footer-dropdown-content {
    max-height: none;
    padding: 0;
  }

  .arrow {
    display: none;
  }

  .footer-contact {
    text-align: right;
    background: none;
    box-shadow: none;
  }
  
}

.icon-header{
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1700px;
  width:100%;
  margin:0 auto;
  gap:10px;
}
.icons {
  display: flex;
  align-items: center;
  gap: 40px;
  width:100%;
}


::placeholder {
  text-align: right;
}
.fa-heart{
  font-size:20px;
}
.fa-user{
  font-size:20px;
}

.icon-search .fa-magnifying-glass{
background-color: #89CFF0;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  color: white;
  padding: 10px 14px;
  height: 100%;
  width: 40px;
outline: none;
  border: 1.5px solid #1a73e8;
  border-right:0px;
  align-content: center;
}



.icon-cart {
  width: 17.5px;
  height: 20px;
  transition: .2s linear;
  margin-top:15px;
  margin-left:15px;
}

.icon-cart path {
  fill: rgb(0, 0, 0);
  transition: .2s linear;
  font-size:20px;
}



.btn-cart:hover > .icon-cart path {
  fill: rgb(186, 34, 233);
}

.btn-cart:hover::after {
  visibility: visible;
  opacity: 1;
  top: 20%;
  right: 0px;
}

.quantity {
  display: none;
}

/* الخلفية المسودة */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 2000;
}

.overlay.active {
  opacity: 1;
  visibility: visible;
}

.line {
  transition: 0.5s;
  stroke-width: 6px;
  stroke: black;
}
.lineTop {
  stroke-dasharray: 40 40;
  stroke-dashoffset: 25;
}
.lineBottom {
  stroke-dasharray: 40 40;
  stroke-dashoffset: 60;
}
.lineMid {
  stroke-dasharray: 40 40;
}

.icon-website{
  display: flex;
  justify-content: center;
  align-items: center;
  gap:10px;
}
.icon-website p{
  font-size:20px;
  color:#333;
}
.righticon-mobile{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ✅ إخفاء خانة البحث في الموبايل وإظهارها عند الضغط */
@media (max-width: 1293px) {
  .search-box input {
    outline: none;
    transition: 0.3s;
    text-align: right;
    border-radius:20px;
    width:100%;
  }
  .icons {
  gap: 10px;
}

#categoriesDropdown{
  display:none;
}
.icon-website{
  display:none;
}
.righticon-mobile{
  display: flex;
  justify-content:right;
}
#productSearchResults{
  outline: none;
    transition: 0.3s;
    display:none;
    text-align: right;
    width:100%;
    position: fixed;
    top:350px;
    right: 1px;
    border-radius:0px;
    top:110px !important;
    width:100% !important;
    height:100vh !important;
  }
.nav-menu {
  display: flex;
  gap: 10px;
  overflow-x: auto; /* يخليها تتحرك أفقياً */
  white-space: nowrap; /* يمنع العناصر من النزول لسطر تاني */
  scroll-behavior: smooth; /* حركة ناعمة أثناء السحب */
  -webkit-overflow-scrolling: touch; /* يخلي السحب سلس على الموبايل */
  padding: 10px;
}

/* 🔸 إخفاء شريط التمرير */
.nav-menu::-webkit-scrollbar {
  display: none;
}

/* 🔸 تصميم الروابط */
.nav-menu a {
  display: inline-block;
  padding: 8px 15px;
  border-radius: 20px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  flex-shrink: 0; /* يمنع العناصر من التصغير */
}


.swiper-button-next,
.swiper-button-prev{
  display: none;
}
/* .icon-search .fa-magnifying-glass {
  background-color: transparent;
  border-radius: 20px;
  color: rgb(0, 0, 0);
  position: fixed;
  top: 67px;
  left: 85px;

} */

.nav-links{
  display:none;
}
.logo{
  display: none;
}
.text-web{
  display:none;
}
#logotext{
  display:block !important;
}

.icons{
  display: flex;
  justify-content: center;
  align-items: center;
}

#subImages{
  display: flex;
  justify-content: center;
  align-items: center;
    flex-direction: row;
}
#productDetailsContainer .image-box img.main-img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
}
.image-box{
  display: flex;
  flex-direction: column;
}


  /* إخفاء الـ input في الوضع العادي */
  .search-box input::placeholder {
    color: #aaa;
  }
}
/* ✅ شاشة البداية */
#splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #fff; /* ممكن تخليها لون اللوجو لو حابب */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
}
.splash-content {
  text-align: center;
}
.splash-logo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

#splash-screen h2 {
  margin-top: 15px;
  font-family: "Cairo", sans-serif;
  color: #333;
  font-size: 20px;
  letter-spacing: 1px;
}

  .splash-content{
    width:100%;
    height:100%;
    overflow:hidden;
  }
#splash-screen video{
  width:100%;
  height:100vh;
  object-fit:cover;
  z-index: 9999;
}
/* ✅ افتراضي: فيديو الكمبيوتر ظاهر */
.video-mobile {
  display: none;
}

.video-desktop {
  display: block;
}

/* ✅ عند الموبايل فقط */
@media (max-width: 768px) {
  .video-mobile {
    display: block;
  }

  .video-desktop {
    display: none;
  }
}
/* لما تختفي */
#splash-screen.hide {
  opacity: 0;
  visibility: hidden;
}

/* ====== تفاصيل المنتج ====== */
#productDetailsContainer {
  max-width: 1300px;
  margin: 40px auto;
  font-family: Arial, sans-serif;
  direction: rtl;
}

/* زر الرجوع */
 #backBtn {
  margin-bottom: 25px;
  padding: 10px 18px;
  background-color: #6c757d;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
}
#backBtn:hover {
  background-color: #5a6268;
}

/* المنتج الرئيسي */
.product-main {
  display: flex;
  gap: 25px;
  margin-bottom: 40px;
  max-width: 1280px;
  width:100%;
  margin:0 auto;
}
/* .image-box {
  flex-shrink: 0;
} */
.image-box img.main-img {
  width: 100%;
  border-radius: 10px;
}
 .sub-images {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
 .sub-images img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 5px;
  cursor: pointer;
  border: 2px solid black;
  transition: all 0.3s;
}
#productDetailsContainer .sub-images img:hover {
  border-color: #007bff;
}

#productDetailsContainer .info-box {
  flex: 1;
  min-width: 250px;
}
#productDetailsContainer .info-box h1 {
  margin-bottom: 12px;
}
#productDetailsContainer .info-box .price {
  font-size: 1.3rem;
  color: #e74c3c;
  margin-bottom: 15px;
}
#productDetailsContainer .info-box .buy-btn {
  padding: 10px 25px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s;
}
#productDetailsContainer .info-box .buy-btn:hover {
  background-color: #0056b3;
}

/* الوصف */
#productDetailsContainer .product-description,
#productDetailsContainer .product-reviews,
#productDetailsContainer .related-products {
  margin-bottom: 35px;
}
#productDetailsContainer h2 {
  margin-bottom: 15px;
  font-size: 1.4rem;
  color: #333;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
}

/* التقييمات */
#productDetailsContainer .product-reviews p {
  margin-bottom: 8px;
  color: #555;
}

/* منتجات مشابهة */
#productDetailsContainer .related-products .swiper {
  padding: 10px 0;
}
#productDetailsContainer .related-products .swiper-slide {
  text-align: center;
  
}
#productDetailsContainer .related-products .swiper-slide img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: transform 0.3s;
}
#productDetailsContainer .related-products .swiper-slide img:hover {
  transform: scale(1.05);
}
#productDetailsContainer .related-products .swiper-slide h4 {
  font-size: 0.95rem;
  margin-bottom: 4px;
}
#productDetailsContainer .related-products .swiper-slide p {
  font-size: 0.9rem;
  color: #e74c3c;
}

/* مودال الشراء */
#purchaseModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
#purchaseModal .modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  width: 90%;
  max-width: 400px;
  text-align: center;
  position: relative;
}
#purchaseModal img {
  width: 100%;
  margin-bottom: 10px;
  border-radius: 5px;
}
#purchaseModal form input {
  width: 100%;
  padding: 8px 10px;
  margin: 8px 0;
  border-radius: 5px;
  border: 1px solid #ccc;
}
#purchaseModal form button {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  background-color: #28a745;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
#purchaseModal form button:hover {
  background-color: #218838;
}
#purchaseModal .close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #dc3545;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-weight: bold;
  cursor: pointer;
}
#purchaseModal .close-btn:hover {
  background: #c82333;
}
/* ======================= Moving Bar ======================= */
.moving-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #89CFF0;
    padding: 10px 0;
}

.moving-bar span {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}

/* ---- وضع الحركة: يُفعَّل تلقائيًا من site-settings.js ---- */
.moving-bar.is-marquee {
    display: block;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    animation: none !important;   /* يبطل أي حركة قديمة على الحاوية نفسها */
}

/* إبطال أي أنيميشن قديم على العناصر الداخلية (بدون لمس الـ position) */
.moving-bar.is-marquee .moving-bar-group,
.moving-bar.is-marquee .moving-bar-item {
    animation: none !important;
    transition: none !important;
}

/* النص الأصلي (#topHeaderText) يبقى في الـ DOM لقارئات الشاشة فقط */
.moving-bar .moving-bar-source {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    animation: none !important;
}

.moving-bar-track {
    display: flex;
    width: max-content;
    direction: ltr;              /* اتجاه التخطيط فقط — النص نفسه dir="auto" */
    will-change: transform;
    backface-visibility: hidden;
}

/* يمنع أي وميض أثناء القياس والبناء */
.moving-bar-track:not([data-marquee-ready]) {
    visibility: hidden;
}

.moving-bar-group {
    display: flex;
    flex: 0 0 auto;
}

.moving-bar-item {
    flex: 0 0 auto;
    padding-inline: 24px;        /* المسافة بين التكرارات */
    white-space: nowrap;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  max-width: 1300px;
  margin: 40px auto;
  text-align: center;
  font-family: Arial, sans-serif;
  direction: rtl;
}
.services-grid > div {
  border-left: 1px solid #ddd; /* الخط على اليمين */
  padding: 20px;
}

/* إزالة الخط على أول عمود */
.services-grid > div:last-child {
  border-left: none;
}
.services {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.services i {
  font-size: 2rem;
  color: #8bc34a; /* اللون الأخضر زي الصورة */
  margin-bottom: 10px;
}

.services p.title {
  font-weight: bold;
  margin: 0;
  font-size: 1rem;
}

.services p.desc {
  font-size: 0.85rem;
  color: #555;
}
@media (max-width: 768px) {
  .services-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .services-grid .services {
    flex: 0 0 50%; /* حجم كل slide */
    border-left: none;
    border-right: 1px solid #ddd; /* الخط بين العناصر */
    scroll-snap-align: start;
    margin-right: 10px;
    border-radius: 10px;
  }

  .services-grid .services:first-child {
    border-right: none;
  }
}
.brands-section {
  max-width: 1300px;
  margin: 60px auto;
  text-align: center;
  font-family: "Cairo", sans-serif;
  direction: rtl;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 15px;
  padding: 30px 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
 
}

.brands-title {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin-bottom: 25px;
  position: relative;
  display: inline-block;
}

.brands-title::after {
  content: "";
  display: block;
  width: 60%;
  height: 3px;
  background: linear-gradient(to left, #007bff, #00b4d8);
  margin: 8px auto 0;
  border-radius: 5px;
}

.brandSwiper {
  width: 100%;
  padding: 10px 0;
}

.brandSwiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
  
}

.brandSwiper img {
  width: 120px;
  height: auto;
  object-fit: contain;
  filter: grayscale(0.4);
  opacity: 0.8;
  transition: all 0.3s ease;
}

.brandSwiper img:hover {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.1);
}



.swiper-pagination-bullet-active {
  opacity: 1;
  background: #00b4d8;
}

/* للموبايل */
@media (max-width: 768px) {
  .brands-section {
    padding: 20px 5px;
    margin: 40px auto;
  }

  .brands-title {
    font-size: 20px;
  }

  .brandSwiper img {
    width: 90px;
  }
}
video{
  width:100%;
}
.slider video::-webkit-media-controls {
  display: none !important;
}

.slider video::-moz-media-controls {
  display: none !important;
}



/* مودال الإعدادات */
.settings-content-category {
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  width: 600px;
  max-height: 80vh;
  overflow-y: auto;
}

.banners-list .banner-settings {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 12px;
  margin-bottom: 10px;
}

.banner-settings img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 8px;
}

.add-banner-btn {
  background: #2e86de;
  color: #fff;
  border: none;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 15px;
}

.add-banner-btn:hover {
  background: #1b4f72;
}


/* From Uiverse.io by Maximinodotpy */ 
.inputGroup {
  font-family: 'Segoe UI', sans-serif;
  margin: 1em 0 1em 0;
  position: relative;
  width:100%;
}

.inputGroup input {
  font-size: 100%;
  padding: 0.8em;
  outline: none;
  border: 2px solid rgb(200, 200, 200);
  background-color: transparent;
  border-radius: 20px;
  width: 100%;
}

.inputGroup label {
  font-size: 100%;
  position: absolute;
  right: 10px;
  padding: 0.8em;
  margin-left: 0.5em;
  pointer-events: none;
  transition: all 0.3s ease;
  color: rgb(100, 100, 100);
}

.inputGroup :is(input:focus, input:valid)~label {
  transform: translateY(-50%) scale(.9);
  margin: 0em;
  margin-left: 1.3em;
  padding: 0.4em;
  background-color: white;
}

.inputGroup :is(input:focus, input:valid) {
  border-color: rgb(150, 150, 200);
}

.text-popup{
  display:none !important;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  padding-bottom: 10px;
}

.cart-item img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
}

.cart-item-details {
  flex: 1;
}

.cart-item-details h4 {
  margin: 0;
}

.cart-item-details p {
  margin: 5px 0 0 0;
}

.cart-item button {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.increaseQty { background: #2ecc71; color: white; }
.decreaseQty { background: #e67e22; color: white; }
.deleteItem { background: #e74c3c; color: white; }


.nav-menu {
  list-style: none;
  display: flex;
  max-width:1300px;
  margin:0 auto;
  width:100%;
    direction: rtl;
}

.nav-menu li {
  position: relative;
}

.nav-menu a {
  color: white;
  text-decoration: none;
  padding: 12px 15px;
  display: block;
  transition: background 0.3s;
}

.nav-menu a:hover {
  background: #34495e;
}

/* Dropdown */
.dropdown-menu {
  background:white;
  list-style: none;
  padding: 0;
  margin: 0;
  width:100%;
  z-index: 1000;
  color:black;
/* ظل احترافي */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
position: fixed;
left:0%;

}

.dropdown-menu li a {
  padding: 10px 15px;
  color:black;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.product-name {
  width: 100%;          /* أو أي عرض مناسب للكارت */
  white-space: nowrap;   /* يمنع الانتقال لسطر جديد */
  overflow: hidden;      /* يخفي النص الزائد */
  text-overflow: ellipsis; /* يظهر ... في نهاية النص */
}
#cartPage{
  max-width: 1300px;
  width:100%;
  margin: auto;
  direction:rtl;
}

/* خلفية المودال */
.auth-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}

/* الصندوق */
.auth-box {
  background: #fff;
  width: 340px;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  position: relative;
  animation: fadeIn 0.3s ease;
  font-family: "Tajawal", sans-serif;
  text-align: center;
}

/* الزر إغلاق */
.auth-modal .close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
  font-size: 22px;
  color: #444;
  transition: 0.2s;
}

.close-btn:hover {
  color: #000;
  transform: scale(1.2);
}

/* العناوين */
.auth-box h3 {
  margin-bottom: 15px;
  color: #222;
  font-size: 20px;
}

/* الحقول */
.auth-box input {
  width: 90%;
  padding: 10px;
  margin: 6px 0;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
}

/* الأزرار */
.auth-box button {
  width: 95%;
  padding: 10px;
  margin-top: 10px;
  border: none;
  border-radius: 8px;
  background: #007bff;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: 0.3s;
}

.auth-box button:hover {
  background: #0056b3;
}

/* النص السفلي */
.auth-box p {
  margin-top: 10px;
  font-size: 14px;
}

.auth-box span {
  color: #007bff;
  cursor: pointer;
}

/* أنيميشن الظهور */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.order-item {
  margin-bottom: 15px;
}

.order-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
}
#subCategoriesContainer,
#products-list,
#uncategorizedProducts,
#categoryProductsContainer{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* مرن على كل الشاشات */
  gap: 20px;
  max-width: 1300px;
  width: 100%;
  margin: 30px auto;
  justify-items: center; /* يخلي الكروت في النص */
  box-sizing: border-box;
}
#categoryPartsContainer{
    display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* مرن على كل الشاشات */
  gap: 20px;
  width: 100%;
  margin: 30px auto;
  justify-items: center; /* يخلي الكروت في النص */
  box-sizing: border-box;
}
#spareCategoriesContainer{
    display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* مرن على كل الشاشات */
  gap: 20px;
  width: 100%;
  margin: 30px auto;
  justify-items: center; /* يخلي الكروت في النص */
  box-sizing: border-box;
}
#productsContainer{
   max-width:1300px;
  width:100%;
  margin:0 auto;
}
.order-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

.order-info p {
  margin: 3px 0;
  font-size: 14px;
}

.searchResults,
.product-card,
#uncategorizedProducts .product {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  width: 300px; /* عرض ثابت */
  text-align: center;
  display: flex;
  flex-direction: column;
  padding:20px;
}
.subcategory-card{
   background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  width: 300px; /* عرض ثابت */
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding:20px;
}

@media (max-width: 600px) {

.right-img-subcategorey-product .view-btn{
  position: absolute;
  right:0px;
    background-color:transparent;
    border:none;

}
.left-info-subcategorey-product{
  height: 100%;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  text-align: right;
}
}
.right-img-subcategorey-product {
  position: relative;
  overflow: hidden;
}

/* زر 👁️ مخفي في البداية */
.right-img-subcategorey-product .view-btn {
  position: absolute;
  top: 20%;
  transform: translateY(-50%);
  background-color: transparent;
  border: none;
  font-size: 24px;
  opacity: 1;
  transition: all 0.3s ease;
  cursor: pointer;
  z-index: 10;
}

/* عند Hover على البطاقة (الكارت كامل) */
.product:hover .right-img-subcategorey-product .view-btn {
  right: 10px; /* يظهر داخل الكارت */
  opacity: 1;
}

.cardresult{
   background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  width: 300px; /* عرض ثابت */
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding:20px;
}
.cardresult:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}.searchResults:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.subcategory-card img {
  object-fit: cover;
  border-radius: 8px;
  width:100% !important;
  height:300px !important;
}

.product-card  img {
  object-fit: cover;
  border-radius: 8px;
}

.cardresult img {
  object-fit: cover;
  border-radius: 8px;
  width:100% !important;
  height:300px !important;
}

#uncategorizedProducts .product img {
  object-fit: cover;
  border-radius: 8px;
  width:100% !important;
  height:300px !important;
}


.subcategory-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 10px 10px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subcategory-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.subcategory-card p {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}
.contmen{
  display:flex;
}

.cardresult{
  width:300px;
}
#imgspare{
  width:100%;
  margin:0 auto;
  direction:rtl;
}
#searchResults{
  display:flex;
    flex-wrap:wrap;
  justify-content: center;
  align-items: center;
    gap:20px;

}



  .no-results {
    grid-column: 1 / -1;
    text-align: center;
    color: #777;
    font-size: 16px;
    padding: 20px 0;
  }




.container.product-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  max-width: 1300px;
  width: 100%;
  margin: 30px auto;
  padding: 20px;
  flex-wrap: wrap; /* عشان يسمح للعناصر تنزل تحت */
  box-sizing: border-box;
}

/* صندوق الصورة */
.image-box {
  text-align: center;
  display:flex;
  direction:ltr;
    width:100%;
  max-width:600px;
  margin:auto;
}

.image-box .main-img {
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:10px;
}

.sub-images {
  display: flex;
  gap: 10px;
  flex-direction: column;
}


#productDetailsContainer .sub-images img
.sub-images img:hover {
  border: 2px solid #007bff;
}

/* صندوق المعلومات */
.info-box {
  flex: 1;
}

.info-box h1 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
  font-weight: 600;
  line-height: 1;
}

.info-box .code {
  color: #777;
  font-size: 14px;
}

.info-box .price {
  color: #ec0101;
  font-weight: bold;
  margin-bottom: 10px;
  font-size:35px;
  direction: ltr;
  text-align: right;
}

.info-box .desc {
  color: #555;
  line-height: 1.6;
}

/* العمود الأيسر */
.left-col {
  flex: 0.6;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  border-radius:20px;
  height:400px;
}

.left-col .buy-btn,
.left-col .add-to-cart-btn {
  background: red;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s;
  width: 100%;
  max-width: 250px;
}

.left-col .add-to-cart-btn {
  background:transparent;
  border:2px double red;
  color:black;
}

.left-col button:hover {
  opacity: 0.9;
}

/* ✅ الترتيب في وضع الموبايل */
@media (max-width: 768px) {
  .container.product-main {
    display: flex;
    align-items: center;
    text-align: center;
  }



  .image-box{
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .two-buttons-buy-add{
    width:100% !important;
  }
  .info-box {
    order: 2; /* يظهر بعد الصورة */
    margin-top: 60px;
  }

  .left-col {
    order: 3; /* الأزرار بعد المعلومات */
    margin-top: 20px;
  }

  .image-box {
    order: 1; /* الصورة أول حاجة */
  }
}

#productPrice{
  font-size:30px;
  color: #dc3545;
}
#productSearchResults {
  height: 400px;     /* أقصى ارتفاع */
  overflow-y: auto;       /* يخليها تسحب لفوق وتحت لو النتائج كتير */
  display: flex;          /* عرض الكروت جنب بعض */
  gap: 10px;              /* مسافة بين الكروت */
  padding: 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  position:fixed;
  left:100;
  width:900px;
  z-index:9999;
  display:none;
    flex-direction: column;
}


.product-item {
  padding: 10px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.product-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.product-content {
  display: flex;
  align-items: center;
  gap: 15px;
  direction: rtl;
}

.product-content img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
}

.product-info h3 {
  font-size: 16px;
  margin: 0 0 5px 0;
  color: #333;
}

.product-info p {
  font-size: 14px;
  color: #007bff;
  margin: 0;
  font-weight: bold;
}

.contorderform{
 direction:rtl;
 max-width: 1300px;
 width:100%;
 margin:0 auto ;
}

#orderForm{
  display: flex;
  justify-content: center;
  flex-direction: column; 
  padding:15px;
}

#orderForm textarea{
  height:200px;
  font-size:20px;
}
#accountPage{
  display:flex;
  justify-content: center;
  direction:rtl;
  max-width:1300px;
  width:100%;
  margin:0 auto;
}

#userEmail{
  margin-bottom:20px;
  padding:10px;
  font-size:20px;
}

.butacount{
  display: flex;
  justify-content: center;
  gap:10px;

}
.butacount button{
  background-color:red;
}

.product-settings-modal{
  display:none;
}

.settings-content-heading{
  display:none;
}
/* الشريط الافتراضي مخفي */
.bottom-nav {
  display: none; 
}

/* يظهر فقط على الشاشات الصغيرة (مثلاً أقل من 768px) */
@media (max-width: 768px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    justify-content: space-around;
    align-items: center;
    padding: 5px 0;
    z-index: 1000;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
  }

  .bottom-nav .nav-btn {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    color: #555;
  }

  .bottom-nav .nav-btn i {
    font-size: 20px;
    margin-bottom: 2px;
  }

  .bottom-nav .nav-btn.active {
    color: #007bff;
  }
}
.sub-category-card{
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  text-align: center;
  display: flex;
  flex-direction: column;
  padding: 10px;
}
.sub-category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.sub-category-card img{
  width:100%;
  object-fit:contain;
}


/* صورة المنتج */
.product-image {
  width: 100%;
  height: 100%;
  height: 180px; /* ارتفاع ثابت مناسب */
  overflow: hidden;
}



.price {
    margin-bottom: 10px;
}

/* زر الشراء */
.buy-btn,
.add-to-cart-btn{
  padding: 8px 15px;
  background-color:white;
  color: #89CFF0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 20px;
  transition: background 0.3s;
  border:2px solid #89CFF0;
}

.buy-btn:hover {
  background-color: #0056b3;
}
.add-to-cart-btn:hover{
  background-color: #0056b3;

}

/* استجابة السلايدر */
@media (max-width: 1024px) {
  .product-image {
    height: 150px;
  }
}

@media (max-width: 768px) {
  .product-image {
    height: 120px;
  }

  .product-name {
    font-size: 14px;
  }

  .product-price {
    font-size: 13px;
  }

 
}

#productDetailsPage{
  direction: rtl;
}


  :root{ --bg:#f8fafc; --card:#fff; --muted:#6b7280 }
    .brands-section{max-width:1300px; margin:0 auto; background:var(--card); padding:20px;box-shadow:0 6px 18px rgba(15,23,42,0.06)}
    h2{margin:0 0 12px 0; font-size:18px; color:#111827}
    .swiper-slide{display:flex; align-items:center; justify-content:center}
    .brand-card{width:120px; height:80px; display:flex; align-items:center; justify-content:center; border-radius:8px; padding:10px; background:transparent}
    .brand-card img{max-width:100%; max-height:100%; object-fit:contain; display:block}
    /* أزرار التنقل */
    .swiper-button-next, .swiper-button-prev{color:#111827}
    /* pagination */
    .swiper-pagination-bullet{background:var(--muted)}
    @media (max-width:640px){ .brand-card{width:100px;height:64px} }

.footer p{
  color:rgb(255, 253, 253);
}
.footer h4{
  color:rgb(255, 255, 255);
}
.footer a{
  color:rgb(255, 255, 255);
}
.footer span{
  color:rgb(255, 255, 255);
}
.social-icons {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.social-icons a {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  color: #333;
  text-decoration: none;
  transition: 0.3s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

/* Hover effect */
.social-icons a:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.15);
}

/* Instagram color */
.social-icons a:nth-child(1):hover i {
  color: #E1306C;
}

/* Facebook colors for both links */
.social-icons a:nth-child(2):hover i,
.social-icons a:nth-child(3):hover i {
  color: #1877F2;
}

/* TikTok color */
.social-icons a:nth-child(4):hover i {
  color: #000000;
}
.custom-shape-divider-top-1762558802 {
    position: absolute;
    bottom:100;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: -1;
}

.custom-shape-divider-top-1762558802 svg {
    position: relative;
    display: block;
    width: calc(153% + 1.3px);
    height: 107px;
    fill:white;
}

.custom-shape-divider-top-1762558802 .shape-fill {
    fill: #FFFFFF;
  background-color:#89CFF0;
}



.product-swiper .product-card{
 height:100%;
 width:500px;
   border: 2px solid #8c00ff;
}


.product-swiper .product-card img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.product-swiper{
  padding:10px;
} 

.cont-headeing-paragraph,
.cont-headeing-paragraphh{
  background-color: #89CFF0 ;
    height: 350px;
  position: relative;
  width: 100%;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  z-index: -1;
}

.cont-headeing{
  position: relative;
  top: 10px;
}

.subheading-text{
  font-size: 60px;
  background-color: white;
  width: 100%;
  width: 300px;
  height:100px;
  margin: 0 auto;
  position: relative;
  bottom: 140px;  
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;

}
.related-products .subheading-text{
  font-size: 47px;
  background-color: white;
  width: 100%;
  width: 300px;
  height:100px;
  margin: 0 auto;
  position: relative;
  bottom: 140px;  
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;

}
#feedback {
  margin-top: 40px;
  padding: 20px;
}

.videos-title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 25px;
  color: #333;
}

.videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

.video-card {
  perspective: 1000px;
}

.video-tilt {
  background: #fff;
  padding: 10px;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  transform: rotate(-3deg);
  transition: 0.3s ease;
}

.video-tilt:hover {
  transform: rotate(0deg) scale(1.03);
}

.video-tilt video {
  width: 100%;
  border-radius: 12px;
}


.whatsapp-menu {
  display: none;
  position: absolute;
  bottom: 70px;
  right: 0;
  background: white;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.whatsapp-menu a {
  display: block;
  margin: 5px 0;
  color: black;
  text-decoration: none;
  
}
.dropdown-menu{
  overflow-x: auto;
  height:400px;
    z-index: 99999999 !important;
}
.dropdown-menu li a{
  padding:2px;
  margin:5px;  
  font-size: 20px;
  border-bottom: 1px solid gray;
  border-radius: 0px;
}
.subheading{
  display:flex;
  justify-content: center;
  align-items: center;
}

.circle-card {
  width: 250px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px;
}


.circle-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 2px solid #8c00ff;
  border-radius: 50%;

}

.circle-card h4 {
  font-size: 14px;
}

.circle-settings-modal{
  display:none;
}

.circle-swiper-section{
  max-width: 1900px !important;
  margin:0 auto;
  width:100%;
  padding:10px;

}


/* ----------------------------
   كروت السلايدر الأفقي
---------------------------- */
.product-horizontal-swiper .swiper-slide {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.3s ease;
  direction:rtl;
  border: 2px solid #8c00ff;
}


.horizontal-product-card img {
 width:100%;
 height:100%;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}

.horizontal-product-card h4 {
  font-size: 16px;
  margin: 0 0 5px 0;
  color: #333;
}

.horizontal-product-card .price {
  font-size: 14px;
  color: #007bff;
  margin: 0;
}

/* السلايدر نفسه */
.product-horizontal-swiper .swiper-button-next,
.product-horizontal-swiper .swiper-button-prev {
  color: #007bff;
}

.product-horizontal-swiper .swiper-pagination-bullet {
  background: #007bff;
}

/* المودال */
.horizontal-settings-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.horizontal-settings-modal .settings-content {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  width: 300px;
  text-align: center;
}

.horizontal-settings-modal button {
  margin-top: 10px;
  padding: 8px 15px;
  border: none;
  background: #007bff;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

.horizontal-settings-modal select {
  width: 100%;
  padding: 5px;
  margin-top: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

/* responsive */
@media (max-width: 768px) {

  .horizontal-product-card img {
    width: 100%;
    height: 100%;
  }
  #subCategoriesContainer{
    display: grid;
grid-template-columns: repeat(2, 1fr); /* عمودين ثابتين */
  gap: 20px;
  max-width: 1700px;
  width: 100%;
  margin: 30px auto;
  justify-items: center;
  box-sizing: border-box;
  padding:10px;
  }
  .sub-category-card{
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  width:100% !important;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}
}

.horizontal-settings-modal{
  display:none;
}


.product-horizontal-swiper{
  max-width: 1700px !important;
  margin:0 auto;
  width:100%;
  padding:10px;
}
/* ضبط تفاصيل قطع الغيار على الموبايل */
@media (max-width: 600px) {
  .spare-details {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 20px !important;
  }

  .spare-details img {
    width: 100% !important;
    height: auto !important;
    max-width: 300px;
  }

  .spare-details div {
    text-align: center !important;
  }

  .spare-details .back-btn {
    width: 100%;
  }
}

/* الموبايل */
@media (max-width: 480px) {
  .product-card {
    padding: 8px;
  }

  .product-card img {
    height: 110px;     /* أصغر في الموبايل */
  }

  .product-card h4 {
    font-size: 13px;
  }

  .product-card p {
    font-size: 12px;
    direction: ltr;
  }
}

/* الموبايل الكبير */
@media (max-width: 600px) {
  .product-card img {
   height: 100%;
    width: 100%;
    object-fit: contain;
  }
}

.myProductSwiper,
.related-swiper {
  position: relative;
  margin-top: -200px;     
  width:100%;
  margin-left: auto;
  margin-right: auto;
  padding:10px;
}

.category-card {

  width: 300px;
  height: 300px;
  text-align: center;
  cursor: pointer;
  margin: 10px;
}

.main-slider {
  width: 100%;
  position: relative;
}

.main-slider .swiper-slide {
  width: 100%;
  height: 100%;
}

.main-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* تخلي الصورة تملأ الكادر */
}
.footer-dropdown-header{
  color:black;
}.hide-me {
  display: none !important;
}

#categoryTitle{
  text-align:center;
  padding:10px;
  font-size:30px;
}
#pagination,
#subNameTitle{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap:10px;
}

h3,
p{
 direction:rtl;
}

#cont{
   position: sticky;
  top: 0; 
  z-index: 99999;
}



.zoom-box {
  position: fixed; /* عشان يبقى عايم فوق كل شيء */
  top: 100px;        /* نص الشاشة رأسيًا */
  left: 0;       /* نص الشاشة أفقيًا */
  width:950px;    /* ممكن تغير الحجم */
  height: 60  0px;
  border: 2px solid #aaa;
  background-repeat: no-repeat;
  background-size: 300%;
  display: none; /* يظهر فقط عند التحريك */
  border-radius: 10px;
  z-index: 1000;
}

#logoImg{
  cursor: pointer;
}
#logotext{
  cursor: pointer;
}.logos {
  overflow: hidden;
  padding: 60px 0;
  background: white;
  white-space: nowrap;
  position: relative;
}

.logos:before,
.logos:after {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  content: "";
  z-index: 2;
}

.logos:before {
  left: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
}

.logos:after {
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
}

.logos:hover .logos-slide {
  animation-play-state: paused;
}

.logos-slide {
  display: inline-block;
  animation: 50s slide infinite linear;
}

.logos-slide img {
  height: 50px;
  width:auto;
  margin: 0 40px;
}
@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.icons-search{
  position:absolute;
  
}
#categoriesDropdown{
  background-color:white;
  margin-left:30px;
  border:none;
  transform:scale(0.8);
  border-radius:0px;
  width:140px;
  border-right:1px solid gray;
}

.swiper-button-prev{
      display:none;
    }
    .swiper-button-next{
      display:none;
    }


.categories .banners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* مرن على كل الشاشات */
  gap: 20px;
  max-width: 1900px;
  width: 100%;
  margin: 40px auto 30px; /* top & bottom margins */
  justify-items: center; /* يجعل العناصر في الوسط */
  box-sizing: border-box;
  padding: 10px;
}

.categories .banner-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
  cursor: pointer;
  width: 100%;
  border:2px solid #8c00ff;
}

.categories .banner-item:hover {
  transform: scale(1.03);
}

.categories .banner-item img {
  width: 100%;
  height: 300px; /* ممكن تعدل على حسب الرغبة */
  object-fit: cover;
  display: block;
}

/* ✅ Media Query للموبايل */
@media (max-width: 768px) {
  .categories .banners-grid {
    display: grid;
    grid-template-columns:auto auto; /* عمود واحد */
    grid-template-rows:auto;
 
  }

  .categories .banner-item {
    width: 100%; /* يأخذ كامل مساحة العمود */
  }

  .categories .banner-item img {
    width: 100%;
    height: auto; /* يضبط ارتفاع الصورة تلقائيًا */
        object-fit: cover; /* يحافظ على شكل الصورة */
          aspect-ratio: 16 / 9; /* النسبة = العرض ÷ الارتفاع */
  }
}
/* ✅ الشريط السفلي */
.mobile-bottom-nav {
  display: none; /* مخفي على الكمبيوتر */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 65px;
  background: #fff;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 888;
}

/* ✅ العناصر */
.mobile-bottom-nav .nav-item {
  text-decoration: none;
  color: #444;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.mobile-bottom-nav .nav-item i {
  font-size: 20px;
  margin-bottom: 3px;
}

/* ✅ عداد السلة */
.mobile-bottom-nav .cart-btn small {
  position: absolute;
  top: -4px;
  right: -10px;
  background: red;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 50%;
}

/* ✅ يظهر فقط في الموبايل */
@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex;
  }

}

h4 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  direction: rtl;        /* ✅ يعكس اتجاه النص */
  max-width: 100%;
  text-align: center;   /* ✅ محاذاة النص لليمين */
}

    /* ===== WhatsApp Float ===== */
    .whatsapp-float {
      position: fixed;
      bottom: 60px;
      right: 20px;
      z-index: 9999;
    }




    /* الرسالة مخفية افتراضياً */
    .whatsapp-message {
      position: absolute;
      bottom:15px; /* فوق الايقونة */
      right:69px;
      background: #ffffff;
      color: #000000;
      padding: 10px 15px;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      opacity: 0;
      transform: translateX(20px);
      transition: 0.5s ease;
  border: 2px solid #89CFF0;
    }

    /* السهم على جانب الرسالة */
.whatsapp-message::after {
  content: "";
  position: absolute;
  bottom: 10px;       /* يتناسب مع حجم الرسالة */
  right: -10px;       /* يخرج من طرف الرسالة */
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #89CFF0; /* لون السهم نفس لون الخلفية */
}
    /* تظهر الرسالة */
    .whatsapp-message.show {
      opacity: 1;
      transform: translateX(0);
    }



.input-group {
 position: relative;
   margin-bottom: 20px;
}

.input {
 border: solid 1.5px #9e9e9e;
 border-radius: 1rem;
 background: none;
 padding: 1rem;
 font-size: 1rem;
 color: #000000;
 transition: border 150ms cubic-bezier(0.4,0,0.2,1);
 width:100%;
 text-align:right;
}
.input-group select {
 border: solid 1.5px #9e9e9e;
 border-radius: 1rem;
 background: none;
 padding: 1rem;
 font-size: 1rem;
 color: #000000;
 transition: border 150ms cubic-bezier(0.4,0,0.2,1);
 width:100%;
   height: 64px;
}


.input:focus, input:valid {
 outline: none;
 border: 1.5px solid #1a73e8;
}

/* .input:focus ~ label, input:valid ~ label {
 transform: translateY(-50%) scale(0.8);
 background-color: #ffffff;
 padding: 0 .2em;
 color: #2196f3;
} */

/* الحاوية الأساسية للسلايدر */
.main-slider {
  width: 100%;       /* العرض كامل */
  position: relative;
  overflow: hidden;
}

/* كل سلايد */
.main-slider .swiper-slide {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* الصور داخل السلايد */
.main-slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* الصورة تغطي كامل السلايد بدون تشويه */
  display: block;
}
/* خلفية المودال */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow-y: auto;
  background-color: rgba(0,0,0,0.6);
}

/* محتوى المودال */
.modal-content {
  background: #fff;
  margin: 50px auto;
  padding: 15px;
  border-radius: 10px;
  width: 50%;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  position: relative;
}

/* زر الإغلاق */
.modal-content .close {
  float: right;
  font-size: 25px;
  cursor: pointer;
}

/* الصور */
.modal-product-images {
  text-align: center;
  margin-bottom: 15px;
}
.modal-main-img {
  width: 50%;
  border-radius: 8px;
}
.modal-sub-images {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.modal-sub-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid #ddd;
}

/* معلومات المنتج */
.modal-product-info {
  margin-bottom: 15px;
}
.modal-product-name {
  font-size: 18px;
  font-weight: bold;
}
.modal-product-price {
  color: #e74c3c;
  font-weight: bold;
  margin: 5px 0;
}

/* الأزرار */
.modal-product-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.modal-buy-btn,
.modal-add-to-cart-btn {
  flex: 1 1 45%;
  padding: 10px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}
.modal-buy-btn { background: #27ae60; color: #fff; }
.modal-add-to-cart-btn { background: #3498db; color: #fff; }

/* Responsive */
@media (max-width: 400px) {
.modal-product{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important; 
}

  .modal-buy-btn, .modal-add-to-cart-btn { width: 100%; };
}

.modal-product{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
}

.rightside,
.leftside{
  width:100%;
}


.faq{
  max-width: 1700px;
  width: 100%;
  margin: 0 auto;
  margin: 0 auto;
  padding: 10px;
}

.faq img{
  border:2px solid #8c00ff;
  border-radius:20px;
}

.categories{
  width: 100%;
  max-width: 1700px;
  margin: 0 auto;
}

/* ---------------------------
   الوضع الافتراضي: ديسكتوب
---------------------------- */
.desktop-slider {
  display: none;   /* يظهر على الديسكتوب */
}

.mobile-slider {
  display: block;    /* يخفي الموبايل على الديسكتوب */
}

/* ---------------------------
   عند الشاشات الصغيرة (الموبايل)
---------------------------- */
@media (max-width: 768px) {
  .desktop-slider {
    display: block;  /* يخفي الديسكتوب */
  }

  .mobile-slider {
    display: none; /* يظهر السلايدر الخاص بالموبايل */
  }
}

.myFaqMobileSwiper {
  height:450px;
}

.addToCartBtn{
  border-radius:20px;
  width:100%;
  background-color: #89CFF0 !important;
}

.videos-swiper {
  width: 100%;
  padding: 20px 0;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide video {
  width: 100%;
  max-width: 300px; /* حجم الفيديو */
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.videos-swiper .swiper-button-next{
  display:block ;
    color:#89CFF0 ;

}
.videos-swiper .swiper-button-prev{
  display:block ;
  color:#89CFF0 ;
}
/* From Uiverse.io by aguerquin */ 
.rating > label {
  margin-right: 4px;
}

.rating:not(:checked) > input {
  display: none;
}

.rating:not(:checked) > label {
  float: right;
  cursor: pointer;
  font-size: 30px;
}

.rating:not(:checked) > label > svg {
  fill: #666;
  transition: fill 0.3s ease;
}

.rating > input:checked ~ label > svg {
  fill: #ffa723;
}

.rating:not(:checked) > label:hover ~ label > svg,
.rating:not(:checked) > label:hover > svg {
  fill: #ff9e0b;
}

#star1:hover ~ label > svg,
#star1:hover > svg {
  fill: #a23c3c !important;
}

#star2:hover ~ label > svg,
#star2:hover > svg {
  fill: #99542d !important;
}

#star3:hover ~ label > svg,
#star3:hover > svg {
  fill: #9f7e18 !important;
}

#star4:hover ~ label > svg,
#star4:hover > svg {
  fill: #22885e !important;
}

#star5:hover ~ label > svg,
#star5:hover > svg {
  fill: #7951ac !important;
}

#star1:checked ~ label > svg {
  fill: #ef4444;
}

#star2:checked ~ label > svg {
  fill: #e06c2b;
}

#star3:checked ~ label > svg {
  fill: #eab308;
}

#star4:checked ~ label > svg {
  fill: #19c37d;
}

#star5:checked ~ label > svg {
  fill: #ab68ff;
}


.description{
  width:100%;
  text-align: center;
    padding:10px;
}
.description button{
    color:blue;
}

 .titledescription{
  display: flex;
  justify-content: center;
  align-items: center;
}
 .titledescription h3 {
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 30px;
  width: 100%;
  margin-bottom: 20px;

  direction: rtl;
}
 .titledescriptiondesc h3 {
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 30px;
  width: 100%;

  direction: rtl;
}

/* الخطين */
.titledescription h3::before,
.titledescription h3::after {
  content: "";
  flex: 1;
  height: 2px;
  background-color: rgba(128, 128, 128, 0.48);
  margin: 0 15px;
  width: 770px;
  padding: 0 10px;
}

.line-text span {
  padding: 0 12px;
  font-size: 14px;
  color: #333;
  white-space: nowrap;
}
.two-buttons-buy-add{
  display: flex;
  flex-direction: column;
  gap:10px;
  width:50%;
}
.two-buttons-buy-add button{
   border-radius:20px;
   margin-bottom: 0px;
   width:100%;
}

.ask-btn {
  color: #000000;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  background-color:transparent;
  margin-bottom:0px;
  padding: 0px;
}


/* Popup */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.popup-box {
  background: #fff;
  border-radius: 12px;
}

.popup-box h3 {
  margin-bottom: 10px;
  text-align: center;
  font-size:30px;
  font-weight:600;
}

.popup-box input,
.popup-box textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-family: inherit;
  
}

.popup-box textarea {
  resize: none;
  height: 90px;
}

.popup-actions {
  display: flex;
  gap: 10px;
    padding: 20px;

}

.send-btn {
  flex: 1;
  background: #16a34a;
  color: #fff;
  border: none;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
}

.close-btn {
  flex: 1;
  color: #fff;
  border: none;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  background-color:transparent;
}

.popup-actions .close-btn {
  cursor: pointer;
  font-size: 30px;
  color: #ffffff;
  transition: 0.2s;
}

.popup-box .main-img{
  width:100px;
  height:100px;
  border:2px solid gray;
  border-radius: 50%;
}

.details-product-img-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color:rgb(221,221,221);
    padding: 20px;

}
.details-product-img-title h1{
  font-size:15px;
  text-align:right;
}
.input-ask-question{
  padding:20px;
}
.cont-name-price{
  display: flex;
  flex-direction: column;
}
.cont-name-price p{
   font-size:15px !important;
  text-align:right;
}

.cont-popup{
  padding:20px;
}

.heart-iconpro .fa-heart,
.compare-iconpro .fa-code-compare{
  border:2px solid #89CFF0;
  padding:10px;
  border-radius:50%;
}
.fa-whatsapp{
  font-size:20px;
  margin:5px;
}
.fa-envelope{
  color:black;
  font-size:20px;
  margin:5px;
}
.description h1{
  font-size:25px;
  background-color: #89CFF0 ;
  padding: 20px;
  color:white;
  font-weight:bolder;
}
.description p{
  font-size:18px;
  line-height:2.6;
  padding:20px;

}
.desc-content{
  border-radius:20px;
}


/* From Uiverse.io by SelfMadeSystem */ 
.rating {
  display: flex;
  flex-direction: reverse;
  gap: 0.3rem;
  --stroke: #666;
  --fill: #ffc73a;
}

.rating input {
  appearance: unset;
}

.rating label {
  cursor: pointer;
  transform: translateY(0) scale(1) !important;
}

.rating svg {
  width: 2rem;
  height: 2rem;
  overflow: visible;
  fill: transparent;
  stroke: var(--stroke);
  stroke-linejoin: bevel;
  stroke-dasharray: 12;
  animation: idle 4s linear infinite;
  transition: stroke 0.2s, fill 0.5s;
}

@keyframes idle {
  from {
    stroke-dashoffset: 24;
  }
}

.rating label:hover svg {
  stroke: var(--fill);
}

.rating input:checked ~ label svg {
  transition: 0s;
  animation: idle 4s linear infinite, yippee 0.75s backwards;
  fill: var(--fill);
  stroke: var(--fill);
  stroke-opacity: 0;
  stroke-dasharray: 0;
  stroke-linejoin: miter;
  stroke-width: 8px;
}

@keyframes yippee {
  0% {
    transform: scale(1);
    fill: var(--fill);
    fill-opacity: 0;
    stroke-opacity: 1;
    stroke: var(--stroke);
    stroke-dasharray: 10;
    stroke-width: 1px;
    stroke-linejoin: bevel;
  }

  30% {
    transform: scale(0);
    fill: var(--fill);
    fill-opacity: 0;
    stroke-opacity: 1;
    stroke: var(--stroke);
    stroke-dasharray: 10;
    stroke-width: 1px;
    stroke-linejoin: bevel;
  }

  30.1% {
    stroke: var(--fill);
    stroke-dasharray: 0;
    stroke-linejoin: miter;
    stroke-width: 8px;
  }

  60% {
    transform: scale(1.2);
    fill: var(--fill);
  }
}



.specifications{
  display: flex;
  justify-content: right;
  gap:20px;
  max-width: 1280px;
  width:100%;
  margin:0 auto;
  
}


/* From Uiverse.io by andrew-demchenk0 */ 
.containers input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}



.containers svg {
  height: 20px;
  width: 20px;
  fill: #ffffff;
  background-color:gray;
  border-radius:5px;
}

.stars-icons{
  display: flex;
  gap: 5px;
  align-items: center;
  
}

.category-like{
  text-align:left;
}
.product-name-like,
.price{
  text-align:right;
}
.price{
  color:#e74c3c;
  direction: ltr;
}


.add-to-cart-small-btn {
  display: inline-flex;
  justify-content:space-between;
  align-items: center;
  gap: 6px;              /* مسافة بين النص والأيقونة */
  direction: rtl;        /* دعم العربية */
  border-radius:20px;
  width:100%;
  background-color: #89CFF0 !important;
}


.add-to-cart-small-btn svg {
  width: 18px;
  height: 18px;
}


#bottomBar {
  position: fixed;
  bottom: -150px; /* مخفي */
  left: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: bottom 0.3s ease;
  z-index: 999;
}

#bottomBar.show {
  bottom: 0; /* يظهر */
}
@media (max-width: 768px) {
  #bottomBar {
    bottom: auto;   /* نلغي البوتوم */
    top: -150px;    /* نخليه مخفي فوق */
  }

  #bottomBar.show {
    top: 0 !important;         /* يظهر من فوق */
    bottom:auto !important;
  }
}

#breadcrumb{
  display:none !important;
}
.buy-btn {
  background: #89CFF0;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
}

.bottom-bar-content{
  display: flex;
  justify-content: space-between;
  max-width: 1700px;
  width:100%;
  margin:0 auto;
}

.prod-info{
  display: flex;
  flex-direction: column;
  gap:5px;
}
.bottom-product-info{
  display: flex;
  align-items: center;
}
.bottom-product-info img{
  width:100px;
  height:100px;
  object-fit:contain;
}

.rating-comment-container{
  display: flex;
  flex-direction: column;
  gap:10px;
}


    .bottom-navbar {
      display: none;
    }

    @media (max-width: 768px) {
      .bottom-navbar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #89CFF0;
        justify-content: space-around;
        padding: 6px 0 8px;
        z-index: 9999;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
      }

      .icon-basket ,.heaert-icon ,.icon-user{
        display:none;
      }
      .bottom-navbar .nav-item {
        position: relative;
        text-decoration: none;
        color: #777;
        font-size: 11px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        transition: 0.3s;
      }

      .bottom-navbar .nav-item i {
        font-size: 20px;
      }

      .bottom-navbar .nav-item.active,
      .bottom-navbar .nav-item:hover {
        color: #ffffff;
        background-color: #89CFF0;
        border-radius: 50%;
        transition: 0.3s;
        transform: translateY(-30px);
        width: 50px;
        height: 50px;
        justify-content: center;
        border: 4px solid #fff;
      }

      .bottom-navbar .badge {
        position: absolute;
        top: 0;
        right: 18px;
        background: red;
        color: #fff;
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 50%;
        font-style: normal;
      }
    }


.breadcrumb span{
  color:black;
  border-radius:10px !important;
}

.breadcrumb {
  font-size: 16px;
  color: #555;
  display: flex;
  align-items: center;
  gap: 4px; /* مسافة صغيرة بين النص والسهم */
}

.breadcrumb span {
  cursor: pointer;
}

.breadcrumb-icon {
  color: #bbb; /* فضي باهت */
  font-size: 12px; /* حجم السهم أصغر من النص */
  margin: 0 6px;
}

.whatsapp-float {
  position: fixed;
  bottom: 70px;
  right: 25px;
  z-index: 999;
}

.whatsapp-menu {
  position: absolute;
  bottom: 80px;
  right: 10px;
  background: #ffffff;
  padding: 15px;
  border-radius: 18px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
  display: none;
  flex-direction: column;
  gap: 10px;
  min-width: 220px;
    background-color:rgb(17, 199, 17);

}

/* السهم الأبيض */
.whatsapp-menu::after {
  content: "";
  position: absolute;
  bottom: -8px;
  right: 12px;
  width: 20px;
  height: 20px;
  background: white;
  transform: rotate(-49deg);
    background-color:rgb(17, 199, 17);
}

/* كل عنصر رقم */
.wa-item {
  text-decoration: none;
  background: #f8f8f8;
  padding: 12px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  transition: 0.3s;
  color: #333;
}

.wa-item span {
  font-weight: bold;
  font-size: 15px;
}

.wa-item small {
  color: #777;
  font-size: 12px;
}

.wa-item:hover {
  background: #e9f9ef;
  transform: translateY(-3px);
}

/* أنيميشن */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



.titledescriptiondesc h3::before,
.titledescriptiondesc h3::after {
   content: "";
  flex: 1;
  height: 2px;
  background-color: rgba(128, 128, 128, 0.48);
  margin: 0 15px;
  width: 770px;
  padding: 0 10px;
}
.name-img-market{
  display: flex;
  justify-content: center;
  align-items: center;
  gap:20px;
}
.name-img-market .img img{
  width:100px;
  height:100px;
  border-radius:50%;
  border:2px solid #000000;
}
.img-container{
  width:100%;
  position:relative;
  overflow:hidden;
  }

.main-img{
width:100%;
display:block;
}

#zoomBox{
position:absolute;
top:0;
right:105%;
width:450px;
height:450px;
border:1px solid #ccc;
background-repeat:no-repeat;
background-size:200%;
display:none;
z-index:10;
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
#brandsection{
  z-index: -1;
}

#outOfStockBtn{
  background-color: #89CFF0;
}
#notifyBtn{
  background-color:white;
  color:#89CFF0;
  border:2px solid #89CFF0;
  cursor: pointer;
}

#mainNav ul{
  text-align:right;
}



.category-card img{
  height:100% !important;
  width:100% !important;
      border: 1px solid rgb(221, 221, 221);
  border-radius: 8px;
}
.category-cardspare img{
  width:100% !important;
      border: 1px solid rgb(221, 221, 221);
  border-radius: 50%;
  aspect-ratio:1/1;
}

#accountSection{
  max-width: 1700px;
  width: 100%;
  margin:0 auto;
}
.containerauth{
  display: flex;
  justify-content: center;
}

.stylesuth{
  display: flex;
  justify-content: space-between;
  gap:10px;
  width: 100%;
    padding: 20px;
}
#content{
  width:100%;
}
#content input{
  width:100%;
  gap:10px;
  margin-bottom:10px;
}
#content h3{
  margin-bottom:10px;
}
.btns{
  width:200px;
  gap:10px;
}
#addrForm,.btns{
  display: flex;
  flex-direction: column;
}
/* ألوان أساسية */
:root {
    --primary: #007bff;
    --bg: #f9f9f9;
    --input-bg: #fff;
    --input-border: #ccc;
    --input-focus: #007bff;
    --text-color: #333;
    --shadow: rgba(0, 0, 0, 0.1);
}



#addrList{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  gap: 20px;
  margin-top: 20px;
}

/* الكارت */
.address-card{
  position: relative;
  background: linear-gradient(135deg,#ffffff,#f5f7ff);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transition: all .3s ease;
  border: 1px solid #eee;
  font-family: 'Segoe UI', Tahoma, sans-serif;
}

/* حركة عند المرور */
.address-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.12);
}

/* اسم المدينة */
.address-card b{
  font-size: 18px;
  color: #2c3e50;
  display: block;
  margin-bottom: 6px;
}

/* النص */
.address-card{
  color: #555;
  line-height: 1.6;
}

/* زر الحذف */
.delete-addr{
  position: absolute;
  top: 10px;
  right: 12px;
  background: #ff4d4d;
  color: white;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: .3s;
}

/* تأثير الهوفر */
.delete-addr:hover{
  background: #e60000;
  transform: scale(1.05);
}
#ordersList{
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  direction: rtl;
}

/* الصف */
.order-card{
  display: grid;
  align-items: center;
  gap: 15px;
  padding: 12px;
  border-bottom: 1px solid #eee;
  transition: 0.2s;
}

/* hover */
.order-card:hover{
  background: #f8f9ff;
}

/* صورة المنتج */
.item-img{
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #ddd;
}

/* اسم المنتج */
.item-row b{
  font-size: 15px;
  color: #333;
}

/* الكمية */
.item-row{
  display: flex;
  gap: 4px;
  font-size: 14px;
  color: #555;
}

/* زر الإلغاء */
.btn-red{
  background: #ff4d4d;
  border: none;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: .2s;
}

.btn-red:hover{
  background: #e60000;
}

#ordersList{
  text-align: center;
  font-size:40px;
}
.cart-row{
  display: grid;
  grid-template-columns: 80px 1fr 120px 150px 120px 100px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid #eee;
  Width: 100%;
}

.cart-row:hover{
  background: #f8f9ff;
}

/* الصورة */
.img-col img{
  width: 55px;
  height: 55px;
  object-fit: cover;
  border-radius: 6px;
}

/* الأزرار */
.qty-col button{
  width: 28px;
  border: none;
  background: #89CFF0;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

.qty-col button:hover{
  background: #0056b3;
}

/* زر الحذف */
.deleteItem{
  background: #ff4d4d;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.deleteItem:hover{
  background: #e60000;
}
.qty-col{
  display: flex;
  justify-content: space-between;
  align-content: center;
  border: 2px solid #89CFF0;
  border-radius: 10px;
}
.qty-col span{
  margin-top: 5px;
}
.inputGroup{
  display:none !important;
}
#addrForm input{
  text-align: right;
}

#maintenanceForm  button{
  width: 100% !important;
}

@media (max-width:1073px){

.image-box{
  max-width:400px;
}

.sub-images img{
  width:60px;
  height:60px;
}

}


.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}




.in-stock {
  color: green;
  font-weight: bold;
  margin-top: 5px;
}
.out-of-stock {
  color: red;
  font-weight: bold;
  margin-top: 5px;
}
.out-stock-btn{
  gap: 6px;
  direction: rtl;
  border-radius: 20px;
  width: 100%;
  background-color: #e67e22 !important;
  text-align: center;
}
.add-to-cart-small-btn{
  position: relative;
  z-index: 5;
  cursor: pointer;
}

#orderForm button{
  margin-top:10px;
}

#branchSelect{
  width:100%;
  margin-bottom:10px;
}

#orderFormCart{
  padding:20px;
}
#orderFormCart button{
  width:100%;
}

/* .product-filter-layout{
  display:flex;
  max-width:1900px;
  margin:0 auto;
  box-sizing:border-box;
  align-items:flex-start;
} */


.clear-filter-btn{
  background:transparent;
  border:1px solid rgba(255,255,255,.4);
  color:#fff;
  padding:4px 12px;
  border-radius:8px;
  cursor:pointer;
  font-size:12px;
  transition:.2s;
}
.clear-filter-btn:hover{ background:rgba(255,255,255,.15); }

.filter-group{ margin-bottom:20px; }
.filter-group h4{
  margin:0 0 10px;
  font-size:14px;
  color:#ddd;
}

.filter-checkboxes{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:220px;
  overflow-y:auto;
}
.filter-checkboxes label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  cursor:pointer;
}
.filter-checkboxes input{ cursor:pointer; accent-color:#27ae60; }

.price-inputs{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.price-inputs input{
  width:100%;
  padding:8px;
  border-radius:8px;
  border:1px solid #ccc;
  outline:none;
  font-size:13px;
}
.price-inputs span{ color:#aaa; }

.apply-price-btn{
  width:100%;
  padding:8px;
  background:#27ae60;
  color:#fff;
  border:none;
  border-radius:8px;
  cursor:pointer;
  font-size:13px;
  transition:.2s;
}
.apply-price-btn:hover{ background:#1e8449; }

/* ريسبونسيف: الفلتر فوق المنتجات على الموبايل */
@media (max-width:768px){
  .product-filter-layout{ flex-direction:column; }
  .filter-sidebar{
    width:100%;
    position:static;
    box-sizing:border-box;
  }
  .filter-checkboxes{ max-height:150px; }
}

/* شبكة الجاليري */
.videos-container{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:16px;
  padding:20px;
  max-width:1400px;
  margin:0 auto;
}

.gallery-item{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  background:#000;
  aspect-ratio:3/4;
  box-shadow:0 4px 14px rgba(0,0,0,.15);
  transition:transform .25s, box-shadow .25s;
}
.gallery-item:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 22px rgba(0,0,0,.25);
}
.gallery-item video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* أيقونة التشغيل فوق الفيديو */
.gallery-item .play-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.25);
  transition:background .25s;
  pointer-events:none;
}
.gallery-item:hover .play-overlay{ background:rgba(0,0,0,.1); }
.gallery-item .play-overlay i{
  color:#fff;
  font-size:46px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
}

/* الـ Lightbox */
.gallery-lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.9);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
  padding:20px;
  box-sizing:border-box;
}
.gallery-lightbox.open{ display:flex; }
.gallery-lightbox video{
  max-width:90vw;
  max-height:85vh;
  border-radius:12px;
  outline:none;
}
.gallery-lightbox .close-lightbox{
  position:absolute;
  top:20px;
  right:25px;
  color:#fff;
  font-size:38px;
  cursor:pointer;
  line-height:1;
  z-index:2;
}
.gallery-lightbox .nav-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  color:#fff;
  font-size:40px;
  cursor:pointer;
  padding:10px;
  user-select:none;
  opacity:.8;
  transition:opacity .2s;
}
.gallery-lightbox .nav-arrow:hover{ opacity:1; }
.gallery-lightbox .nav-prev{ right:15px; }
.gallery-lightbox .nav-next{ left:15px; }

@media (max-width:600px){
  .videos-container{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
  .gallery-item .play-overlay i{ font-size:34px; }
  .gallery-lightbox .nav-arrow{ font-size:30px; }
}





.whatsapp-btnF {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(145deg, #25D366, #128C7E);
    box-shadow:
        0 10px 30px rgba(37, 211, 102, 0.25),
        inset 0 1px 1px rgba(255, 255, 255, 0.25);

    cursor: pointer;
    transition: all 0.35s cubic-bezier(.2,.8,.2,1);
    position: relative;
    overflow: hidden;
}

.main-whatsapp {
    font-size: 28px;
    color: #fff;
    position: relative;
    z-index: 2;
    transition: transform 0.35s ease;
}

/* Light shine */
.whatsapp-btnF::before {
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255,255,255,.22),
        transparent 70%
    );
    transform: translateX(-100%);
    transition: transform .6s ease;
}

/* Hover */
.whatsapp-btnF:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow:
        0 15px 40px rgba(37, 211, 102, 0.4),
        0 0 25px rgba(37, 211, 102, 0.15);
}

.whatsapp-btnF:hover::before {
    transform: translateX(100%);
}

.whatsapp-btnF:hover .main-whatsapp {
    transform: rotate(-8deg) scale(1.15);
}

/* Click */
.whatsapp-btnF:active {
    transform: scale(.95);
}


#string{
  display:block !important;
}



.cart-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden;
  transition: .3s; z-index: 9998;
}
.cart-overlay.open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed; top: 0; left: 0;      /* left عشان RTL — عدّلها right لو حبيت */
  width: 380px; max-width: 90vw; height: 100%;
  background: #fff; z-index: 9999;
  transform: translateX(-100%);
  transition: transform .3s ease;
  display: flex; flex-direction: column;
  box-shadow: 2px 0 12px rgba(0,0,0,.15);
}
.cart-drawer.open { transform: translateX(0); }

.cart-drawer-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px; border-bottom: 1px solid #eee;
}
.cart-close { background: none; border: none; font-size: 28px; cursor: pointer; line-height: 1; }

.cart-drawer-items { flex: 1; overflow-y: auto; padding: 12px 16px; }

.cart-drawer-footer { padding: 16px; border-top: 1px solid #eee; }
.cart-drawer-total { font-weight: 700; margin: 0 0 12px; }
.cart-checkout-btn {
  width: 100%; padding: 12px; background: #27ae60; color: #fff;
  border: none; border-radius: 8px; cursor: pointer; font-size: 16px;
}
.cart-checkout-btn:disabled { background: #aaa; cursor: not-allowed; }





/* الحقول */
#authSection input {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 1px solid var(--input-border);
    border-radius: 10px;
    background-color: var(--input-bg);
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}










/* ==========================================================================
   Sew Tec Damietta — Professional Header  (انسخ الـ CSS ده كامل)
   ========================================================================== */
:root{
  --stx-ink:        #16181d;
  --stx-ink-soft:   #5b616e;
  --stx-surface:    #ffffff;
  --stx-line:       #e8eaee;
  --stx-bg-soft:    #f4f5f7;
  --stx-accent:     #e11d2a;   /* لون البراند الأحمر — غيّره من هنا بس */
  --stx-accent-2:   #b91620;
  --stx-accent-tint:#fdecec;
  --stx-topbar:     #16181d;
  --stx-radius:     12px;
  --stx-shadow:     0 8px 28px rgba(20,23,30,.10);
  --stx-font:       "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
}
 
.site-header, .site-header *{ box-sizing: border-box; }
.site-header{ font-family: var(--stx-font); }
 
/* ====================== الشريط العلوي ====================== */
.stx-topbar{ background:var(--stx-topbar); color:#cfd2d9; font-size:13px; }
.stx-topbar-inner{ max-width:1280px; margin:0 auto; padding:8px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; }
.stx-topbar-info{ display:flex; align-items:center; gap:18px; }
.stx-topbar-info span{ display:flex; align-items:center; gap:7px; white-space:nowrap; }
.stx-topbar-info i{ color:var(--stx-accent); font-size:14px; }
.stx-topbar-links{ display:flex; align-items:center; gap:16px; }
.stx-topbar-links a{ color:#cfd2d9; text-decoration:none; transition:color .2s; white-space:nowrap; }
.stx-topbar-links a:hover{ color:#fff; }
 
/* ====================== الهيدر الرئيسي ====================== */
.stx-main{ background:var(--stx-surface); border-bottom:1px solid var(--stx-line);
  position:sticky; top:0; z-index:900; }
.stx-main-inner{ max-width:1280px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; gap:24px; }
 
/* اللوجو */
.stx-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0; }
.stx-brand .cont-img-web, .stx-brand #logoImg{
  width:52px; height:52px; border-radius:14px; overflow:hidden;
  border:1px solid var(--stx-line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; background:#fff; }
.stx-brand img{ width:100%; height:100%; object-fit:cover; display:block; }
.stx-brand .stx-brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.stx-brand .stx-brand-name{ font-size:20px; font-weight:800; color:var(--stx-ink); letter-spacing:.2px; }
.stx-brand .stx-brand-sub{ font-size:12px; font-weight:600; color:var(--stx-accent); letter-spacing:2px; text-transform:uppercase; }
 
/* البحث */
.search-box{ flex:1; position:relative;  }
.stx-search-shell{ display:flex; align-items:stretch; height:48px; background:var(--stx-bg-soft);
  border:1.5px solid var(--stx-line); border-radius:999px; overflow:hidden;
  transition:border-color .2s, box-shadow .2s, background .2s; }
.stx-search-shell:focus-within{ background:#fff; border-color:var(--stx-accent);
  box-shadow:0 0 0 4px var(--stx-accent-tint); }
#categoriesDropdown{ border:0; background:transparent; padding:0 16px; padding-inline-end:30px;
  font-family:var(--stx-font); font-size:14px; font-weight:600; color:var(--stx-ink);
  cursor:pointer; outline:none; max-width:150px; border-inline-end:1px solid var(--stx-line); appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%235b616e' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 14px center; }
#productSearchInput{ flex:1; border:0; background:transparent; padding:0 16px; outline:none;
  font-family:var(--stx-font); font-size:15px; color:var(--stx-ink); }
#productSearchInput::placeholder{ color:var(--stx-ink-soft); }
.stx-search-btn{ border:0; background:#89CFF0; color:#fff; cursor:pointer; width:56px;
  display:flex; align-items:center; justify-content:center; font-size:16px; transition:background .2s; }
.stx-search-btn:hover{ background:var(--stx-accent-2); }
#productSearchResults{ position:absolute; top:calc(100% + 8px); inset-inline:0; background:#fff;
  border:1px solid var(--stx-line); border-radius:14px; box-shadow:var(--stx-shadow); overflow:hidden; z-index:50; }
#productSearchResults:empty{ display:none; }
 
/* أيقونات الأكشن */
.stx-actions{ display:flex; align-items:center; gap:6px; flex-shrink:0; margin-inline-start:auto; }
.stx-icon-btn{ position:relative; width:46px; height:46px; border-radius:12px; border:0; background:transparent;
  color:var(--stx-ink); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:19px;
  transition:background .2s, color .2s; }
.stx-icon-btn:hover{ background:var(--stx-accent-tint); color:var(--stx-accent); }
.stx-icon-btn .icon-cart{ width:22px; height:auto; fill:currentColor; }
.btn-cart{ overflow:visible; }
.btn-cart .quantity{ position:absolute; top:6px; inset-inline-start:6px; min-width:18px; height:18px; padding:0 4px;
  background:var(--stx-accent); color:#fff; font-size:11px; font-weight:700; border-radius:999px;
  display:flex; align-items:center; justify-content:center; line-height:1; border:2px solid #fff; }
.btn-cart[data-quantity="0"] .quantity{ display:none; }
 
/* ====================== شريط التنقل + المنسدلات ====================== */
.stx-nav{ background:#fff; border-bottom:1px solid var(--stx-line); }
.stx-nav-inner{ max-width:1280px; margin:0 auto; padding:0 20px; }
.nav-menu{ list-style:none; margin:0; padding:0; display:flex; align-items:center; flex-wrap:wrap; gap:2px; }
 
/* عنصر القايمة */
.nav-item{ position:relative; }
 
/* صف الروابط السريعة (contmen) */
.contmen{ display:flex; align-items:center; flex-wrap:wrap; gap:2px; }
 
/* الرابط الأساسي في القايمة */
.nav-menu .nav-link{ display:block; padding:14px 16px; text-decoration:none; 
  font-size:15px; font-weight:600; position:relative; cursor:pointer; transition:color .2s; white-space:nowrap; }
.nav-menu .nav-link::after{ content:""; position:absolute; inset-inline:16px; bottom:8px; height:2px;
  background:var(--stx-accent); transform:scaleX(0); transform-origin:center; transition:transform .25s ease; }
.nav-menu .nav-link.active{ color:var(--stx-accent); }
.nav-menu .nav-link:hover::after, .nav-menu .nav-link.active::after{ transform:scaleX(1); }
 
/* القايمة المنسدلة — العرض/الإخفاء بيتحكم فيه الـ JS بتاعك */
.dropdown-menu{ position:absolute; top:100%; inset-inline-start:0; min-width:220px; margin:6px 0 0;
  list-style:none; padding:8px; background:#fff; border:1px solid var(--stx-line); border-radius:14px;
  box-shadow:var(--stx-shadow); z-index:100; }
.dropdown-menu li{ list-style:none; }
.dropdown-item{ display:block; padding:10px 14px; border-radius:9px; text-decoration:none; color:var(--stx-ink);
  font-size:14px; font-weight:600; transition:background .15s, color .15s; }
.dropdown-item:hover{ background:var(--stx-accent-tint); color:var(--stx-accent); }
.dropdown-empty{ display:block; padding:10px 14px; color:var(--stx-ink-soft); font-size:13px; }
 
/* ====================== الموبايل ====================== */
.hamburger{ display:none; cursor:pointer; }
.hamburger .checkbox{ display:none; }
.hamburger svg{ display:block; }
.hamburger .line{ stroke:var(--stx-ink); }
.righticon-mobile{ display:none; }
 
@media (max-width: 992px){
  .stx-topbar-links{ display:none; }
  #categoriesDropdown{ display:none; }
}
@media (max-width: 768px){
  .stx-main-inner{ flex-wrap:wrap; gap:12px; padding:12px 16px; }
  .stx-brand .stx-brand-text{ display:none; }
  .search-box{ order:3; flex:1 1 100%; max-width:none; }
  .stx-search-shell{ height:44px; }
  .stx-actions{ gap:2px; }
  .stx-icon-btn{ width:42px; height:42px; font-size:18px; }
 
  /* الهامبرجر مبقاش محتاجينه — القايمة ظاهرة وبتعمل scroll */
  .hamburger{ display:none; }
 
  /* القايمة: شريط أفقي ظاهر دايمًا + scroll يمين وشمال */
  .stx-nav-inner{ padding:0; }
  .nav-menu{
    flex-direction:row; flex-wrap:nowrap; align-items:stretch; gap:0;
    max-height:none; overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
    scrollbar-width:none;
  }
  .nav-menu::-webkit-scrollbar{ display:none; }
  .nav-item{ flex:0 0 auto; }
  .contmen{ flex-direction:row; flex-wrap:nowrap; gap:0; }
  .nav-menu .nav-link{ padding:14px 16px; white-space:nowrap; }
  .nav-menu .nav-link::after{ display:none; }
 
  /* المنسدلة تفتح كـ bottom-sheet عشان الـ scroll الأفقي ميقصّهاش */
  .dropdown-menu{
    position:fixed; inset-inline:0; bottom:0; top:auto; z-index:1000;
    margin:0; padding:8px 10px 18px; border:0; border-radius:18px 18px 0 0;
    background:#fff; box-shadow:0 -10px 30px rgba(0,0,0,.18);
    max-height:60vh; overflow-y:auto;
  }
  .dropdown-menu::before{
    content:""; display:block; width:44px; height:4px; border-radius:99px;
    background:var(--stx-line); margin:4px auto 12px;
  }
  .dropdown-item{ padding:14px 18px; border-radius:10px; }
}




:root{
  --stx-ink:        #16181d;
  --stx-line:       #e8eaee;
  --stx-accent:     #e11d2a;
  --stx-accent-2:   #b91620;
  --stx-font:       "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
 
  /* ألوان خاصة بالفوتر الغامق */
  --ft-bg:      #14161b;
  --ft-bg-2:    #1b1e25;
  --ft-text:    #b8bcc6;
  --ft-head:    #ffffff;
  --ft-line:    #2a2e37;
}
 
.footer, .footer *{ box-sizing:border-box; }
.footer{
  font-family:var(--stx-font);
  background:var(--ft-bg);
  color:var(--ft-text);
  border-top:3px solid var(--stx-accent);
    direction: rtl;
}
 
.footer-container{
  max-width:1280px; margin:0 auto; padding:100px 24px 28px;
  display:grid; gap:40px;
  grid-template-columns:1.4fr 1fr 1.2fr 1.2fr;
}
 
/* ---- عمود البراند ---- */
.ft-brand-name{ font-size:22px; font-weight:800; color:var(--ft-head); margin:0 0 10px; }
.ft-brand-name span{ color:var(--stx-accent); }
.ft-brand-desc{ font-size:14px; line-height:1.9; margin:0 0 20px; max-width:300px; }
.social-icons{ display:flex; gap:10px; flex-wrap:wrap; }
.social-icons a{
  width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:var(--ft-bg-2); color:var(--ft-text); font-size:17px; text-decoration:none;
  border:1px solid var(--ft-line); transition:.2s;
}
.social-icons a:hover{ background:var(--stx-accent); color:#fff; border-color:var(--stx-accent); transform:translateY(-2px); }
 
/* ---- عناوين الأعمدة ---- */
.ft-col h4,
.footer-dropdown-header > span{
  font-size:16px; font-weight:700; color:var(--ft-head); margin:0 0 18px;
  position:relative; padding-bottom:12px; display:inline-block;
}
.ft-col h4::after,
.footer-dropdown-header > span::after{
  content:""; position:absolute; bottom:0; inset-inline-start:0;
  width:34px; height:3px; border-radius:2px; background:var(--stx-accent);
}
 
/* ---- روابط سريعة ---- */
.ft-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.ft-links a{
  color:var(--ft-text); text-decoration:none; font-size:14.5px; font-weight:500;
  display:inline-flex; align-items:center; gap:9px; transition:color .2s, transform .2s;
}
.ft-links a i{ color:var(--stx-accent); font-size:11px; }
.ft-links a:hover{ color:#fff; transform:translateX(-4px); }
 
/* ---- عمود فروعنا (الـ dropdown) ---- */
.footer-dropdown-header{ cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.footer-dropdown-header .arrow{ color:var(--ft-text); transition:transform .3s; margin-top:4px; display:none; }
.footer-dropdown-content{ display:flex; flex-direction:column; gap:14px; }
.footer-dropdown-content a{
  color:var(--ft-text); text-decoration:none; font-size:13.5px; line-height:1.8;
  display:flex; gap:9px; padding:10px 12px; border-radius:10px;
  background:var(--ft-bg-2); border:1px solid var(--ft-line); transition:.2s;
}
.footer-dropdown-content a::before{
  content:"\f3c5"; font-family:"Font Awesome 6 Free"; font-weight:900;
  color:var(--stx-accent); font-size:14px; margin-top:2px; flex-shrink:0;
}
.footer-dropdown-content a:hover{ border-color:var(--stx-accent); color:#fff; }
 
/* ---- عمود التواصل ---- */
.footer-contact h4{ font-size:16px; font-weight:700; color:var(--ft-head); margin:0 0 18px;
  position:relative; padding-bottom:12px; display:inline-block; }
.footer-contact h4::after{ content:""; position:absolute; bottom:0; inset-inline-start:0;
  width:34px; height:3px; border-radius:2px; background:var(--stx-accent); }
.footer-contact p{ margin:0 0 12px; font-size:14px; line-height:1.7; display:flex; gap:11px; align-items:flex-start; }
.footer-contact p i{ color:var(--stx-accent); font-size:15px; margin-top:3px; width:16px; text-align:center; flex-shrink:0; }
.footer-contact p a{ color:inherit; text-decoration:none; }
.footer-contact p a:hover{ color:#fff; }
 
/* ---- الشريط السفلي ---- */
.ft-bottom{ border-top:1px solid var(--ft-line); }
.ft-bottom-inner{
  max-width:1280px; margin:0 auto; padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:13px; color:#8a8f9c;
}
.ft-bottom-inner a{ color:var(--stx-accent); text-decoration:none; font-weight:600; }
.ft-pay{ display:flex; gap:8px; align-items:center; font-size:20px; color:#6a6f7b; }
 
/* ====================== موبايل ====================== */
@media (max-width: 992px){
  .footer-container{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width: 640px){
  .footer-container{ grid-template-columns:1fr; gap:26px; padding:40px 20px 24px; }
 
  /* فروعنا تبقى أكورديون بالضغط */
  .footer-dropdown{ border-bottom:1px solid var(--ft-line); padding-bottom:16px; }
  .footer-dropdown-header .arrow{ display:block; }
  .footer-dropdown-content{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
  .footer-dropdown.open .footer-dropdown-content{ max-height:400px; }
  .footer-dropdown.open .arrow{ transform:rotate(180deg); }
 
  .ft-bottom-inner{ flex-direction:column; text-align:center; }
}
 


/* ============================================================
   ستايل نموذج الصيانة — انسخ الجزء ده كله
   >>> لتغيير اللون: بدّل قيمة --brand و --brand-deep بس <<<
   ============================================================ */
#maintenance{
  /* ------ لوحة الألوان ------ */
  --brand:#0e9aa7;        /* اللون الأساسي (غيّره لأي لون تحبه) */
  --brand-deep:#0a6d77;   /* درجة أغمق منه للنص/الهوفر */
  --brand-tint:#e7f5f6;   /* درجة فاتحة جدًا للـ focus */
  --accent:#e04338;       /* أحمر الهوية — استخدام بسيط جدًا */
  --ink:#17313a; --ink-soft:#61727a;
  --field:#f5f8f9; --line:#dde6e9; --paper:#fff;
 
  direction:rtl;
  font-family:"Tajawal",system-ui,"Segoe UI",Arial,sans-serif;
  width:100%;max-width:620px;
  background:var(--paper);
  border-top:5px solid var(--brand);      /* شريط الهوية العلوي */
  border-radius:18px;
  box-shadow:0 12px 34px -20px rgba(23,49,58,.4);
  overflow:hidden;color:var(--ink);
}
#maintenance *{box-sizing:border-box}
 
/* ---- الهيدر (فاتح) ---- */
#maintenance .mnt-head{padding:22px 28px 4px}
#maintenance .mnt-head-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
#maintenance .mnt-brand{display:flex;align-items:center;gap:11px}
#maintenance .mnt-mark{
  width:42px;height:42px;border-radius:11px;background:var(--brand);
  display:grid;place-items:center;color:#fff;font-family:"Cairo";font-weight:800;font-size:16px;
}
#maintenance .mnt-brand b{font-family:"Cairo";font-weight:700;font-size:16px;color:var(--ink);line-height:1.1;display:block}
#maintenance .mnt-brand small{display:block;font-weight:500;font-size:10.5px;letter-spacing:3px;color:var(--brand);margin-top:2px}
#maintenance .mnt-no{
  text-align:left;font-family:"Cairo";font-weight:700;font-size:13.5px;letter-spacing:1px;color:var(--brand-deep);
  background:var(--brand-tint);border:1px solid #cdeaec;padding:7px 11px;border-radius:9px;white-space:nowrap;
}
#maintenance .mnt-no em{display:block;color:var(--accent);font-size:10px;font-weight:700;font-style:normal;letter-spacing:.5px;margin-bottom:1px}
 
#maintenance h2{font-family:"Cairo";font-weight:800;font-size:23px;margin:20px 0 0;letter-spacing:-.2px}
#maintenance h2::after{content:"";display:block;width:46px;height:3px;border-radius:3px;background:var(--accent);margin-top:8px}
#maintenance .mnt-sub{color:var(--ink-soft);font-size:13px;margin:8px 0 0}
 
/* ---- خط الحياكة (فاصل) ---- */
#maintenance .mnt-perf{position:relative;height:22px;margin-top:16px;background:var(--paper)}
#maintenance .mnt-perf::before{content:"";position:absolute;inset:0;top:50%;transform:translateY(-50%);
  height:0;border-top:2px dashed var(--line);margin:0 12px}
#maintenance .mnt-perf i{position:absolute;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;background:#eef2f4}
#maintenance .mnt-perf i.r{right:-11px}#maintenance .mnt-perf i.l{left:-11px}
 
/* ---- جسم الفورم ---- */
#maintenance form{padding:6px 28px 28px}
#maintenance .input-group{position:relative;margin-bottom:15px}
 
#maintenance .input{
  width:100%;font-family:inherit;font-size:14.5px;color:var(--ink);
  background:var(--field);border:1.5px solid var(--line);border-radius:11px;
  padding:23px 15px 8px;transition:border-color .15s,background .15s,box-shadow .15s;outline:none;
}
#maintenance textarea.input{resize:vertical;min-height:110px;line-height:1.7;padding-top:25px}
#maintenance .input:hover{border-color:#c4d2d7}
#maintenance .input:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 3.5px var(--brand-tint)}
 
#maintenance .user-label{position:absolute;right:16px;top:16px;font-size:14.5px;color:#9aa8af;font-weight:500;pointer-events:none;transition:.15s ease}
#maintenance .input:focus + .user-label,
#maintenance .input:not(:placeholder-shown) + .user-label{top:8px;font-size:11px;color:var(--brand-deep);font-weight:700}
 
#maintenance select.input{padding:14px 15px;cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa8af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 15px center}
#maintenance select.input:required:invalid{color:#9aa8af}
 
#maintenance .form-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}
#maintenance .form-row .input-group{margin-bottom:15px}
 
#maintenance #productImageContainer{display:flex;justify-content:center;margin:-2px 0 12px}
#maintenance #productImage{max-width:160px;max-height:160px;object-fit:contain;border:1.5px solid var(--line);border-radius:12px;padding:8px;background:#fff}
 
#maintenance .or-divider{display:flex;align-items:center;gap:13px;margin:2px 0 15px;color:#a0adb3;font-size:12px;font-weight:700}
#maintenance .or-divider::before,#maintenance .or-divider::after{content:"";flex:1;height:2px;
  background:repeating-linear-gradient(to left,var(--line) 0 6px,transparent 6px 12px)}
 
#maintenance button[type="submit"]{
  width:100%;font-family:"Cairo";font-weight:700;font-size:15px;color:#fff;
  border:none;border-radius:12px;padding:15px;margin-top:8px;cursor:pointer;
  background:var(--brand);box-shadow:0 8px 18px -10px rgba(14,154,167,.7);
  transition:background .18s,transform .12s}
#maintenance button[type="submit"]:hover{background:var(--brand-deep)}
#maintenance button[type="submit"]:active{transform:translateY(1px)}
 
@media(max-width:480px){
  #maintenance .mnt-head,#maintenance form{padding-inline:20px}
  #maintenance h2{font-size:21px}
  #maintenance .form-row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){#maintenance *{transition:none!important}}


  .containerauth {
    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --border: #e2e8f0;
    --text: #1e293b;
    --muted: #94a3b8;
    --red: #ef4444;
    --red-dark: #dc2626;

    direction: rtl;
    font-family: "Segoe UI", "Cairo", sans-serif;
    display: flex;
    max-width: 860px;
    margin: 40px auto;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    color: var(--text);
  }

  /* ---------- اللوحة الجانبية (الترحيب) ---------- */
  .auth-side {
    flex: 1;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
  }
  .auth-side::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    top: -60px;
    left: -60px;
  }
  .auth-side::after {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    bottom: -50px;
    right: -40px;
  }
  .auth-side .logo-circle {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 8px;
    z-index: 1;
  }
  .auth-side h2 {
    font-size: 26px;
    font-weight: 700;
    margin: 0;
    z-index: 1;
  }
  .auth-side p {
    font-size: 15px;
    line-height: 1.7;
    opacity: 0.9;
    margin: 0;
    z-index: 1;
  }
  .auth-side ul {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    z-index: 1;
  }
  .auth-side ul li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 14px;
    opacity: 0.95;
  }
  .auth-side ul li::before {
    content: "✓";
    background: rgba(255, 255, 255, 0.2);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
  }

  /* ---------- ناحية الفورم ---------- */

  #authSection,
  #accountSection {
    flex: 1.1;
    padding: 40px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
  }

  .containerauth h3,
  .containerauth h4 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--text);
  }

  .containerauth input {
    width: 100%;
    padding: 14px;
    font-size: 15px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: #f8fafc;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    font-family: inherit;
  }
  .containerauth input:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
  }

  .containerauth .accBtn {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 13px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    font-family: inherit;
  }
  .containerauth .accBtn:hover {
    background: var(--primary-dark);
  }
  .containerauth .accBtn:active {
    transform: scale(0.99);
  }
  .containerauth .btn-red {
    background: var(--red);
  }
  .containerauth .btn-red:hover {
    background: var(--red-dark);
  }

  .containerauth p {
    font-size: 14px;
    color: var(--muted);
    margin: 4px 0 0;
  }

  /* ---------- قسم الحساب ---------- */
  .stylesuth {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  #content {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    min-height: 60px;
  }
  .btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .btns .accBtn {
    width: 100%;
  }

  /* ---------- موبايل ---------- */
  @media (max-width: 720px) {
    .containerauth {
      flex-direction: column;
      max-width: 420px;
    }
    .auth-side {
      padding: 30px;
    }
  }



    /* ============================================================
     زرار التواصل الموحّد + المساعد الذكي — Typical
     زرار واحد عائم → يفتح قائمة (مساعد ذكي + واتساب).
     نقطة الاتصال بالـ AI: دالة askAI() تحت (معلّمة بوضوح).
     ============================================================ */
 
  :root {
    --brand-blue: #4aa8d8;
    --brand-blue-soft: #eaf5fb;
    --brand-purple: #6d3bd4;
    --wa-green: #25D366;
    --price: #d85a30;
    --ink: #1f2733;
    --ink-soft: #5b6675;
    --line: #e6ebf1;
    --surface: #ffffff;
    --bg: #f5f8fb;
    --shadow: 0 12px 40px rgba(31, 39, 51, 0.16);
    --radius: 18px;
  }
 

  .demo-note {
    max-width: 620px;
    margin: 3rem auto;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.9);
    border-radius: 16px;
    padding: 1.6rem 1.8rem;
    text-align: center;
    backdrop-filter: blur(6px);
  }
  .demo-note h1 { font-size: 1.3rem; margin-bottom: .5rem; }
  .demo-note p { color: var(--ink-soft); line-height: 1.9; font-size: .95rem; }
  .demo-note .hint { margin-top: 1rem; font-size: .85rem; color: var(--brand-purple); font-weight: 600; }
 
  /* ===================== الحاوية العائمة ===================== */
  .contact-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    z-index: 9998;
      direction: rtl;
  }
 
  /* القائمة المنبثقة */
  .contact-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transform: translateY(12px) scale(.96);
    pointer-events: none;
    transition: opacity .22s ease, transform .25s cubic-bezier(.2,.8,.2,1);
  }
  .contact-menu.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
 
  .contact-item {
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px 14px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(31,39,51,0.1);
    width: 220px;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
    font-family: inherit;
  }
  .contact-item:hover { transform: translateX(-4px); box-shadow: 0 6px 20px rgba(31,39,51,0.15); }
  .contact-item .ci-icon {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 20px;
  }
  .contact-item .ci-icon.ai { background: linear-gradient(135deg, var(--brand-purple), var(--brand-blue)); }
  .contact-item .ci-icon.wa { background: var(--wa-green); }
  .contact-item .ci-text { display: flex; flex-direction: column; text-align: right; }
  .contact-item .ci-text strong { font-size: 13px; color: var(--ink); font-weight: 700; }
  .contact-item .ci-text span { font-size: 11px; color: var(--ink-soft); }
 
  /* الزرار الأساسي */
  .contact-main {
    width: 62px; height: 62px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--brand-purple), var(--brand-blue));
    box-shadow: 0 8px 24px rgba(109,59,212,0.4);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    position: relative;
    transition: transform .25s ease;
  }
  .contact-main:hover { transform: translateY(-3px) scale(1.04); }
  .contact-main:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
  .contact-main i { font-size: 26px; transition: opacity .2s, transform .3s; }
  .contact-main .icon-close { position: absolute; opacity: 0; transform: rotate(-90deg); }
  .contact-main.active .icon-chat { opacity: 0; transform: rotate(90deg); }
  .contact-main.active .icon-close { opacity: 1; transform: rotate(0); }
  .contact-main .badge {
    position: absolute; top: -2px; right: -2px;
    background: var(--price); color: #fff;
    font-size: 11px; font-weight: 700;
    padding: 1px 6px; border-radius: 10px;
    border: 2px solid #fff;
  }
 
  /* ===================== نافذة الشات ===================== */
  .chat-panel {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 560px;
    max-height: calc(100vh - 48px);
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 9999;
    transform: translateY(16px) scale(.96);
    opacity: 0;
    pointer-events: none;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
  }
  .chat-panel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
 
  .chat-header {
    background: linear-gradient(135deg, var(--brand-purple), var(--brand-blue));
    color: #fff; padding: 16px 18px;
    display: flex; align-items: center; gap: 12px;
  }
  .chat-header .avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    font-size: 20px;
  }
  .chat-header .title { flex: 1; }
  .chat-header .title strong { display: block; font-size: 1rem; font-weight: 700; }
  .chat-header .title span { font-size: .78rem; opacity: .85; display: flex; align-items: center; gap: 5px; }
  .chat-header .title span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; }
  .chat-header .close {
    background: rgba(255,255,255,0.15); border: none; color: #fff; cursor: pointer;
    width: 32px; height: 32px; border-radius: 8px; font-size: 20px; line-height: 1;
    display: flex; align-items: center; justify-content: center; transition: background .2s;
  }
  .chat-header .close:hover { background: rgba(255,255,255,0.28); }
 
  .chat-body {
    flex: 1; overflow-y: auto; padding: 18px 16px; background: var(--bg);
    display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth;
  }
  .chat-body::-webkit-scrollbar { width: 6px; }
  .chat-body::-webkit-scrollbar-thumb { background: #cdd6e0; border-radius: 3px; }
 
  .msg { max-width: 82%; display: flex; flex-direction: column; gap: 6px; }
  .msg .bubble { padding: 11px 15px; border-radius: 16px; font-size: .92rem; line-height: 1.7; word-wrap: break-word; }
  .msg.bot { align-self: flex-start; }
  .msg.bot .bubble { background: #fff; color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
  .msg.user { align-self: flex-end; }
  .msg.user .bubble { background: linear-gradient(135deg, var(--brand-purple), var(--brand-blue)); color: #fff; border-bottom-right-radius: 4px; }
 
  .product-card-chat {
    background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(31,39,51,0.05); max-width: 82%; align-self: flex-start;
    animation: pop .3s ease;
  }
  @keyframes pop { from { opacity:0; transform: translateY(8px);} to {opacity:1; transform:none;} }
  .product-card-chat .pc-img { height: 120px; background: var(--brand-blue-soft); display: flex; align-items: center; justify-content: center; }
  .product-card-chat .pc-img img { max-height: 100%; max-width: 100%; object-fit: contain; }
  .product-card-chat .pc-img .placeholder { font-size: 40px; color: var(--brand-blue); opacity: .5; }
  .product-card-chat .pc-body { padding: 12px 14px; }
  .product-card-chat .pc-name { font-weight: 600; font-size: .9rem; margin-bottom: 6px; line-height: 1.5; }
  .product-card-chat .pc-price { color: var(--price); font-weight: 700; font-size: .92rem; margin-bottom: 10px; }
  .product-card-chat .pc-btn { display: block; text-align: center; background: var(--brand-purple); color: #fff; text-decoration: none; padding: 9px; border-radius: 10px; font-size: .85rem; font-weight: 600; transition: background .2s; }
  .product-card-chat .pc-btn:hover { background: #5a2fb8; }
 
  .typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 16px; background:#fff; border:1px solid var(--line); border-radius: 16px; border-bottom-right-radius:4px; }
  .typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-blue); animation: bounce 1.2s infinite; }
  .typing span:nth-child(2){ animation-delay:.2s; }
  .typing span:nth-child(3){ animation-delay:.4s; }
  @keyframes bounce { 0%,60%,100%{transform:translateY(0);opacity:.4;} 30%{transform:translateY(-6px);opacity:1;} }
 
  .quick-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; background: var(--bg); }
  .quick-chips button { background: #fff; border: 1px solid var(--brand-purple); color: var(--brand-purple); padding: 7px 13px; border-radius: 20px; font-family: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; transition: all .2s; }
  .quick-chips button:hover { background: var(--brand-purple); color: #fff; }
 
  .chat-input { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); background: #fff; align-items: flex-end; }
  .chat-input textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 22px; padding: 11px 16px; font-family: inherit; font-size: .9rem; max-height: 90px; line-height: 1.5; outline: none; transition: border-color .2s; }
  .chat-input textarea:focus { border-color: var(--brand-purple); }
  .chat-input .send { width: 44px; height: 44px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--brand-purple), var(--brand-blue)); cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color:#fff; transition: transform .15s; }
  .chat-input .send:hover { transform: scale(1.08); }
  .chat-input .send:disabled { opacity: .5; cursor: not-allowed; transform: none; }
  .chat-input .send i { font-size: 18px; transform: scaleX(-1); }
 
  @media (max-width: 480px) {
    .chat-panel { left: 8px; bottom: 8px; height: calc(100vh - 16px); max-height: none; }
    .contact-float { right: 16px; bottom: 16px; }
  }


  .stringgg {
  --primary: #4f46e5;
  --primary-dark: #4338ca;
  --border: #e2e8f0;
  --text: #1e293b;
  --muted: #94a3b8;
  --bg: #ffffff;

  direction: rtl;
  font-family: "Segoe UI", "Cairo", sans-serif;
  max-width: 640px;
  margin: 30px auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  color: var(--text);
}

#stringForm {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: auto !important;
}

/* عنوان الفورم */
#stringForm::before {
  content: "طلب سن خياطة";
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  border-bottom: 2px solid var(--primary);
  padding-bottom: 12px;
  display: block;
  width: fit-content;
  margin: 0 auto 4px;
}

/* ---------- Floating Label ---------- */
.stringgg .input-group {
  position: relative;
  margin: 0;
}

.stringgg .input-group .input {
  width: 100%;
  padding: 14px 14px;
  font-size: 15px;
  color: var(--text);
  background: #f8fafc;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  box-sizing: border-box;
  font-family: inherit;
}

.stringgg .input-group .input:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
}

.stringgg .user-label {
  position: absolute;
  top: 15px;
  right: 12px;
  color: var(--muted);
  font-size: 15px;
  pointer-events: none;
  background: transparent;
  padding: 0 6px;
  transition: 0.15s ease all;
}

/* يطفو فوق عند الكتابة أو التركيز */
.stringgg .input-group .input:focus ~ .user-label,
.stringgg .input-group .input:not(:placeholder-shown) ~ .user-label {
  top: -9px;
  right: 10px;
  font-size: 12px;
  color: var(--primary);
  background: var(--bg);
}

/* ---------- الزرار ---------- */
#stringForm button[type="submit"] {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 14px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  margin-top: 6px;
}

#stringForm button[type="submit"]:hover {
  background: var(--primary-dark);
}

#stringForm button[type="submit"]:active {
  transform: scale(0.99);
}

@media (max-width: 520px) {
  .stringgg { padding: 20px; }
}

.mnt-mark img{
  width: 100%;
}

.cont-maintence{
display: flex;
  justify-content: center;
  align-content: center;
  padding: 15px;
}


.mnt-stub h2{
  color:white;
}



  :root {
    --ink:        #14202e;   /* النص الأساسي */
    --muted:      #6b7a8d;   /* نص باهت */
    --line-bg:    #e2e8f0;   /* الخط قبل الوصول */
    --done:       #0d7d74;   /* الحالات المكتملة (تيل) */
    --done-soft:  #d3ede9;   /* خلفية أيقونة مكتملة */
    --current:    #f0a500;   /* الحالة الحالية (كهرماني) */
    --cancel:     #d64545;   /* الإلغاء */
    --card:       #ffffff;
    --page:       #f4f6f9;
    --shadow:     0 1px 3px rgba(20,32,46,.06), 0 8px 24px rgba(20,32,46,.06);
  }

 
  /* ===== الكارت الأساسي ===== */
  .track-card {
    max-width: 760px;
    margin: 0 auto;
    background: var(--card);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 26px 26px 30px;
  }
 
  /* رأس الكارت: المنتج + الحالة الحالية */
  .track-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 22px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--line-bg);
    flex-wrap: wrap;
  }
  .track-thumb {
    width: 60px; height: 60px;
    border-radius: 12px;
    background: #eef2f6 center/cover no-repeat;
    display: grid; place-items: center;
    font-size: 26px; flex-shrink: 0;
  }
  .track-head .info { flex: 1; min-width: 160px; }
  .track-head .product { font-weight: 700; font-size: 17px; }
  .track-head .order-no { color: var(--muted); font-size: 13px; margin-top: 2px; }
  .track-head .state-pill {
    font-weight: 700; font-size: 14px;
    padding: 8px 16px; border-radius: 999px;
    background: #fff6e0; color: #a86e00;
    white-space: nowrap;
  }
  .track-head .state-pill.is-done   { background: var(--done-soft); color: var(--done); }
  .track-head .state-pill.is-cancel { background: #fbe3e3; color: var(--cancel); }
 
  /* ===== الخط الزمني (أفقي على الديسكتوب) ===== */
  .timeline {
    display: flex;
    justify-content: space-between;
    position: relative;
  }
  /* الخط الرمادي الخلفي */
  .timeline::before {
    content: "";
    position: absolute;
    top: 21px; right: 21px; left: 21px;
    height: 4px;
    background: var(--line-bg);
    border-radius: 4px;
    z-index: 0;
  }
  /* الخط الملوّن اللي بيتملّي حسب التقدّم */
  .timeline::after {
    content: "";
    position: absolute;
    top: 21px; right: 21px;
    height: 4px;
    background: var(--done);
    border-radius: 4px;
    z-index: 1;
    width: var(--progress, 0%);
    transition: width .6s cubic-bezier(.4,0,.2,1);
  }
  .timeline.is-cancel::after { background: var(--cancel); }
 
  .step {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    gap: 10px;
  }
  .step .node {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--line-bg);
    color: var(--muted);
    display: grid; place-items: center;
    font-size: 18px; font-weight: 700;
    transition: all .4s ease;
  }
  .step .label { font-size: 13px; font-weight: 500; color: var(--muted); max-width: 92px; line-height: 1.4; }
  .step .time  { font-size: 11px; color: #9aa7b5; }
 
  /* حالة مكتملة */
  .step.done .node  { background: var(--done); border-color: var(--done); color: #fff; }
  .step.done .label { color: var(--ink); font-weight: 700; }
 
  /* الحالة الحالية */
  .step.current .node {
    background: var(--current); border-color: var(--current); color: #fff;
    box-shadow: 0 0 0 6px rgba(240,165,0,.18);
    animation: pulse 1.8s infinite;
  }
  .step.current .label { color: var(--ink); font-weight: 700; }
 
  /* حالة ملغاة */
  .timeline.is-cancel .step.done .node { background: var(--cancel); border-color: var(--cancel); }
 
  @keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(240,165,0,.35); }
    70%  { box-shadow: 0 0 0 12px rgba(240,165,0,0); }
    100% { box-shadow: 0 0 0 0 rgba(240,165,0,0); }
  }
 
  /* ===== الموبايل: الخط بيبقى رأسي ===== */
  @media (max-width: 560px) {
    .timeline { flex-direction: column; gap: 26px; }
    .timeline::before { top: 21px; bottom: 21px; right: 21px; left: auto; width: 4px; height: auto; }
    .timeline::after  {
      top: 21px; right: 21px; left: auto;
      width: 4px; height: var(--progress, 0%);
      transition: height .6s cubic-bezier(.4,0,.2,1);
    }
    .step { flex-direction: row; text-align: right; gap: 14px; align-items: center; }
    .step .label { max-width: none; }
    .step .meta { display: flex; flex-direction: column; gap: 2px; }
  }
 
  @media (prefers-reduced-motion: reduce) {
    .step.current .node { animation: none; }
    .timeline::after { transition: none; }
  }
 
  /* ===== لوحة التجربة (احذفها عند الدمج) ===== */
  .demo-bar {
    max-width: 760px; margin: 22px auto 0;
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  }
  .demo-bar button {
    font-family: inherit; font-size: 13px; font-weight: 500;
    padding: 8px 14px; border-radius: 10px;
    border: 1px solid var(--line-bg); background: #fff; color: var(--ink);
    cursor: pointer; transition: .2s;
  }
  .demo-bar button:hover { border-color: var(--done); color: var(--done); }
  .demo-note { text-align: center; color: var(--muted); font-size: 12px; margin-top: 10px; }

.privacy-policy {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  line-height: 1.9;
  color: #333;
  font-family: "Tajawal", "Segoe UI", sans-serif;
}

.privacy-policy h1 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #1a1a1a;
}

.privacy-policy h2 {
  font-size: 1.35rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: #222;
  border-right: 4px solid #2563eb;
  padding-right: 0.75rem;
}

.privacy-policy p {
  margin-bottom: 1rem;
}

.privacy-policy ul {
  padding-right: 1.5rem;
  margin-bottom: 1rem;
}

.privacy-policy li {
  margin-bottom: 0.5rem;
}
.privacy-policy .note {
  background: #f0f6ff;
  border-right: 4px solid #2563eb;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 6px;
  color: #1e3a5f;
}

.privacy-policy blockquote {
  margin-inline: 0;
}


.contact-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  font-family: "Cairo", "Segoe UI", sans-serif;
  color: #333;
}

.contact-head { text-align: center; margin-bottom: 2.5rem; }
.contact-head h1 { font-size: 2rem; margin-bottom: 0.75rem; color: #1a1a1a; }
.contact-head p { color: #666; line-height: 1.8; max-width: 600px; margin: 0 auto; }

/* كروت وسائل التواصل */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 3rem;
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 1.75rem 1rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  text-decoration: none;
  color: #333;
  transition: transform .2s ease, box-shadow .2s ease;
}
.contact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.cc-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #eaf2ff; color: #2563eb;
  font-size: 1.4rem; margin-bottom: 6px;
}
.contact-card.wa .cc-icon { background: #e7f9ee; color: #25d366; }

.cc-title { font-weight: 700; font-size: 1.05rem; color: #1a1a1a; }
.cc-sub { font-size: 0.9rem; color: #666; direction: ltr; }

/* فورم الرسالة */
.contact-form-box {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.contact-form-box h2 {
  font-size: 1.4rem; margin-bottom: 1.5rem; color: #1a1a1a;
  border-right: 4px solid #2563eb; padding-right: 0.75rem;
}

.cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.cf-group { display: flex; flex-direction: column; margin-bottom: 1rem; }
.cf-group label { margin-bottom: 6px; font-size: 0.9rem; color: #555; }
.cf-group input,
.cf-group textarea {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s ease;
}
.cf-group input:focus,
.cf-group textarea:focus { border-color: #2563eb; }
.cf-group textarea { resize: vertical; }

.cf-send {
  display: inline-flex; align-items: center; gap: 8px;
  background: #25d366; color: #fff;
  border: none; border-radius: 8px;
  padding: 12px 24px; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: background .2s ease;
}
.cf-send:hover { background: #1eb855; }

@media (max-width: 600px) {
  .cf-row { grid-template-columns: 1fr; }
}


  :root{
    --navy:#0C1C33;
    --navy-2:#12294A;
    --amber:#F0A044;
    --amber-dark:#D9862B;
    --bg:#F6F8FB;
    --surface:#FFFFFF;
    --ink:#1A2537;
    --muted:#6B7A90;
    --border:#E2E8F1;
    --danger:#E24C4C;
    --success:#1F9D6B;
    --radius:16px;
    --shadow:0 20px 60px -20px rgba(12,28,51,.25);
  }
 

  /* ===== سكشن تواصل معنا ===== */
  .contact{
    max-width:1120px;
    margin:0 auto;
    padding:80px 24px;
  }
 
  .contact__head{
    text-align:center;
    max-width:640px;
    margin:0 auto 48px;
  }
  .contact__eyebrow{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    letter-spacing:.08em;
    color:var(--amber-dark);
    background:rgba(240,160,68,.12);
    padding:6px 16px;
    border-radius:999px;
    margin-bottom:16px;
  }
  .contact__title{
    font-size:clamp(28px,4vw,40px);
    font-weight:800;
    color:var(--navy);
    line-height:1.25;
  }
  .contact__subtitle{
    color:var(--muted);
    font-size:17px;
    margin-top:12px;
  }
 
  .contact__grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
    border:1px solid var(--border);
  }
 
  /* --- بانل البيانات (الجانب الداكن) --- */
  .contact__info{
    background:
      radial-gradient(120% 90% at 100% 0%, rgba(240,160,68,.18) 0%, transparent 55%),
      linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);
    color:#fff;
    padding:48px 40px;
    position:relative;
  }
  .contact__info h3{
    font-size:22px;
    font-weight:700;
    margin-bottom:8px;
  }
  .contact__info p.lead{
    color:rgba(255,255,255,.68);
    font-size:15px;
    margin-bottom:36px;
  }
 
  .info-item{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-bottom:26px;
  }
  .info-item__icon{
    flex-shrink:0;
    width:44px;height:44px;
    display:grid;place-items:center;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    color:var(--amber);
  }
  .info-item__icon svg{width:20px;height:20px}
  .info-item__label{
    font-size:13px;
    color:rgba(255,255,255,.55);
    margin-bottom:2px;
  }
  .info-item__value{
    font-size:15px;
    font-weight:600;
    color:#fff;
    direction:ltr;
    text-align:right;
    unicode-bidi:plaintext;
  }
  .info-item__value a{color:inherit;text-decoration:none}
  .info-item__value a:hover{color:var(--amber)}
 
  .info-divider{
    height:1px;
    background:rgba(255,255,255,.1);
    margin:32px 0;
  }
  .info-socials{display:flex;gap:12px}
  .info-socials a{
    width:40px;height:40px;
    display:grid;place-items:center;
    background:rgba(255,255,255,.08);
    border-radius:10px;
    color:#fff;
    transition:.2s;
  }
  .info-socials a:hover{background:var(--amber);color:var(--navy)}
  .info-socials svg{width:18px;height:18px}
 
  /* --- الفورم --- */
  .contact__form{
    padding:48px 40px;
  }
  .field{margin-bottom:20px}
  .field--row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
  }
  .field label{
    display:block;
    font-size:14px;
    font-weight:600;
    color:var(--ink);
    margin-bottom:8px;
  }
  .field label .req{color:var(--danger)}
 
  .field input,
  .field select,
  .field textarea{
    width:100%;
    font-family:inherit;
    font-size:15px;
    color:var(--ink);
    background:var(--bg);
    border:1.5px solid var(--border);
    border-radius:12px;
    padding:13px 16px;
    transition:border-color .18s, background .18s, box-shadow .18s;
  }
  .field textarea{resize:vertical;min-height:130px}
  .field select{
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7A90' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:left 16px center;
    padding-left:44px;
  }
  .field input::placeholder,
  .field textarea::placeholder{color:#9AA7B8}
 
  .field input:focus,
  .field select:focus,
  .field textarea:focus{
    outline:none;
    border-color:var(--amber);
    background:#fff;
    box-shadow:0 0 0 4px rgba(240,160,68,.15);
  }
 
  .field.invalid input,
  .field.invalid select,
  .field.invalid textarea{
    border-color:var(--danger);
    background:#FEF6F6;
  }
  .field__error{
    display:none;
    font-size:13px;
    color:var(--danger);
    margin-top:6px;
    font-weight:500;
  }
  .field.invalid .field__error{display:block}
 
  .submit-btn{
    width:100%;
    font-family:inherit;
    font-size:16px;
    font-weight:700;
    color:var(--navy);
    background:var(--amber);
    border:none;
    border-radius:12px;
    padding:15px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    transition:background .18s, transform .1s;
  }
  .submit-btn:hover{background:var(--amber-dark);color:#fff}
  .submit-btn:active{transform:translateY(1px)}
  .submit-btn svg{width:18px;height:18px}
  .submit-btn:disabled{opacity:.65;cursor:not-allowed}
 
  /* --- حالة النجاح --- */
  .form-success{
    display:none;
    text-align:center;
    padding:40px 20px;
    animation:pop .35s ease;
  }
  .form-success.show{display:block}
  .form-success__icon{
    width:72px;height:72px;
    margin:0 auto 20px;
    display:grid;place-items:center;
    background:rgba(31,157,107,.12);
    color:var(--success);
    border-radius:50%;
  }
  .form-success__icon svg{width:36px;height:36px}
  .form-success h3{font-size:22px;font-weight:700;color:var(--navy);margin-bottom:8px}
  .form-success p{color:var(--muted)}
  @keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
 
  /* ===== موبايل ===== */
  @media (max-width:820px){
    .contact{padding:56px 16px}
    .contact__grid{grid-template-columns:1fr}
    .contact__info{padding:40px 28px}
    .contact__form{padding:36px 28px}
    .field--row{grid-template-columns:1fr}
  }
 
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
  }

  
/* =========================================================
   ✅ الجزء ده تنقله لمشروعك (آخر ملف style.css)
   ========================================================= */
:root{
  --sx-ink:#14161b; --sx-ink-2:#5b6472; --sx-line:#eceef2; --sx-bg:#f5f6f8;
  --sx-card:#fff; --sx-brand:#16181d; --sx-accent:#e67e22; --sx-green:#1f9d57;
  --sx-shadow:0 6px 22px rgba(17,20,26,.08); --sx-shadow-hover:0 16px 40px rgba(17,20,26,.16);
  --sx-radius:16px;
}
body{ background:var(--sx-bg); font-family:'Cairo',sans-serif; margin:0; }
 
/* ---------- Breadcrumb ---------- */
.breadcrumb{
  max-width:1280px; margin:22px auto 6px; padding:12px 18px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:14px; color:var(--sx-ink-2); font-weight:600;
}
.breadcrumb span{ cursor:pointer; transition:color .2s; }
.breadcrumb .breadcrumb-icon{ font-size:11px; color:#b9c0cc; }
 
/* ---------- التخطيط العام ---------- */
.product-filter-layout{ max-width:1280px; margin:0 auto; padding:20px 24px 60px; box-sizing:border-box; }
.cont-product-fillter{ display:flex; gap:24px; align-items:flex-start; width:100%; }
#filterSidebar{ order:-1; }
 
/* ---------- 🆕 شريط الأدوات (عدد النتائج + الترتيب + طريقة العرض) ---------- */
.products-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:12px 18px; margin-bottom:20px; 
}
.ptb-right{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.ptb-count{ font-size:14px; font-weight:700; color:var(--sx-ink); background:var(--sx-bg); padding:8px 14px; border-radius:10px; }
.ptb-sort{ display:flex; align-items:center; gap:10px; }
.ptb-sort label{ font-size:13px; font-weight:600; color:var(--sx-ink-2); display:flex; align-items:center; gap:6px; white-space:nowrap; }
.ptb-sort label i{ color:var(--sx-accent); }
.ptb-sort select{
  font-family:inherit; font-size:14px; font-weight:600; color:var(--sx-ink);
  padding:9px 34px 9px 14px; border:1px solid var(--sx-line); border-radius:10px;
  background:var(--sx-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235b6472' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E") no-repeat left 12px center;
  appearance:none; -webkit-appearance:none; cursor:pointer; outline:none; transition:.2s;
}
.ptb-sort select:hover{ border-color:#d7dbe1; }
.ptb-sort select:focus{ border-color:var(--sx-accent); }
.ptb-left{ display:flex; align-items:center; gap:10px; }
.ptb-view-label{ font-size:13px; font-weight:600; color:var(--sx-ink-2); }
.view-toggle-group{ display:flex; background:var(--sx-bg); border-radius:10px; padding:4px; gap:4px; }
.view-toggle{ width:38px; height:34px; border:none; border-radius:8px; cursor:pointer; background:transparent; color:var(--sx-ink-2); font-size:15px; display:grid; place-items:center; transition:.2s; }
.view-toggle:hover{ color:var(--sx-ink); }
.view-toggle.active{ background:var(--sx-brand); color:#fff; box-shadow:0 3px 8px rgba(20,22,27,.2); }
 
/* ---------- جريد المنتجات ---------- */
#productsList{ flex:1; min-width:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:20px; }
 
/* ---------- كارت المنتج ---------- */
#productsList .product{
  width:auto; background:var(--sx-card); border-bottom:1px solid #dedede; padding:14px;
  display:flex; flex-direction:column-reverse; gap:14px;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease; cursor:pointer; overflow:hidden; position:relative;
}
#productsList .right-img-subcategorey-product{
  position:relative; border-radius:12px;
  overflow:hidden; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
}
#productsList .right-img-subcategorey-product img{ width:100%;object-fit:contain; box-sizing:border-box; transition:transform .35s ease; }
#productsList .product:hover .right-img-subcategorey-product img{ transform:scale(1.06); }
#productsList .view-btn{
  position:absolute; top:10px; left:10px; width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.85); backdrop-filter:blur(6px); color:var(--sx-ink); box-shadow:0 4px 14px rgba(0,0,0,.14);
  display:grid; place-items:center; font-size:15px; opacity:0; transform:translateY(-6px);
  transition:opacity .25s ease, transform .25s ease, background .2s, color .2s;
}
#productsList .product:hover .view-btn{ opacity:1; transform:translateY(0); }
#productsList .view-btn:hover{ background:var(--sx-brand); color:#fff; }
#productsList .left-info-subcategorey-product{ display:flex; flex-direction:column; gap:9px; text-align:right; }
#productsList .left-info-subcategorey-product h5{
  margin:0; font-size:15px; font-weight:700; line-height:1.5; color:var(--sx-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:45px;
}
#productsList .left-info-subcategorey-product > p:not([class]){ margin:0; font-size:19px; font-weight:800; color:var(--sx-ink); letter-spacing:-.3px; }
#productsList .left-info-subcategorey-product > p:not([class])::after{ content:""; display:block; width:34px; height:3px; margin-top:8px; background:var(--sx-accent); border-radius:3px; }
#productsList .in-stock, #productsList .out-of-stock{ width:fit-content; margin:0; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700; direction:rtl; display:inline-flex; align-items:center; gap:6px; }
#productsList .in-stock{ background:rgba(31,157,87,.12); color:var(--sx-green); }
#productsList .in-stock::before{ content:"\f058"; font-family:"Font Awesome 6 Free"; font-weight:900; }
#productsList .out-of-stock{ background:rgba(230,126,34,.14); color:var(--sx-accent); text-align:right; }
#productsList .out-of-stock::before{ content:"\f057"; font-family:"Font Awesome 6 Free"; font-weight:900; }
#productsList .addToCartBtn{
  margin-top:4px; width:100%; padding:12px; border:none; cursor:pointer; border-radius:11px;
  font-family:inherit; font-size:14px; font-weight:700; color:#fff; background:linear-gradient(135deg,#1d1f25,#2c2f38);
  display:flex; align-items:center; justify-content:center; gap:8px; transition:transform .15s ease, box-shadow .25s ease, background .25s;
}
#productsList .addToCartBtn::before{ content:"\f07a"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:13px; }
#productsList .addToCartBtn:hover{ background:linear-gradient(135deg,#2c2f38,#3a3e49); box-shadow:0 8px 20px rgba(20,22,27,.28); }
#productsList .addToCartBtn:active{ transform:scale(.97); }
 
/* ---------- 🆕 عرض القائمة (List view) ---------- */
#productsList.list-view{ display:flex; flex-direction:column; gap:14px; }
#productsList.list-view .product{ flex-direction:row-reverse; align-items:center; gap:20px; padding:16px; }
#productsList.list-view .right-img-subcategorey-product{ width:150px; height:150px; aspect-ratio:auto; flex-shrink:0; }
#productsList.list-view .left-info-subcategorey-product{ flex:1; }
#productsList.list-view .left-info-subcategorey-product h5{ min-height:0; font-size:17px; }
#productsList.list-view .addToCartBtn{ width:auto; padding:11px 26px; align-self:flex-start; }
#productsList.list-view .view-btn{ opacity:1; transform:none; }
 
/* ---------- الفلتر الجانبي ---------- */
.filter-sidebar{ width:270px; flex-shrink:0;   padding:20px;  position:sticky; top:20px;  }
.filter-sidebar-header{ display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid rgba(255,255,255,.1); }
.filter-sidebar-header h3{ margin:0; font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; }
.clear-filter-btn{ background:transparent; border:1px solid rgba(255,255,255,.22); color:#cfd4dc; padding:5px 12px; border-radius:8px; cursor:pointer; font-family:inherit; font-size:12px; font-weight:600; transition:.2s; }
.clear-filter-btn:hover{ background:var(--sx-accent); border-color:var(--sx-accent); color:#fff; }
.filter-group{ padding:16px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.filter-group:last-child{ border-bottom:none; }
.filter-group h4{ margin:0 0 12px; font-size:13px; font-weight:700; color:#aeb6c2; text-transform:uppercase; letter-spacing:.5px; }
.filter-checkboxes{ display:flex; flex-direction:column; gap:4px; }
.filter-checkboxes label{ display:flex; align-items:center; gap:10px; cursor:pointer; padding:8px 10px; border-radius:9px; font-size:14px;  transition:background .2s; }
.filter-checkboxes label:hover{ background:rgba(255,255,255,.06); }
.filter-checkboxes input[type="checkbox"]{ appearance:none; -webkit-appearance:none; width:19px; height:19px; border-radius:6px; border:2px solid black; background:transparent; cursor:pointer; position:relative; flex-shrink:0; transition:.2s; }
.filter-checkboxes input[type="checkbox"]:checked{ background:var(--sx-accent); border-color:var(--sx-accent); }
.filter-checkboxes input[type="checkbox"]:checked::after{ content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; inset:0; display:grid; place-items:center; font-size:11px; color:#fff; }
.price-inputs{ display:flex; align-items:center; gap:8px; }
.price-inputs span{ color:#7d8593; }
.price-inputs input{ width:100%; padding:10px 12px; border-radius:9px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#fff; font-family:inherit; font-size:14px; outline:none; transition:.2s; }
.price-inputs input::placeholder{ color:#8a92a0; }
.price-inputs input:focus{ border-color:var(--sx-accent); background:rgba(255,255,255,.1); }
.apply-price-btn{ width:100%; margin-top:12px; padding:11px; border:none; cursor:pointer; border-radius:9px; font-family:inherit; font-size:14px; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--sx-accent),#d46a12); transition:transform .15s, box-shadow .25s; }
.apply-price-btn:hover{ box-shadow:0 8px 20px rgba(230,126,34,.35); }
.apply-price-btn:active{ transform:scale(.97); }

/* ---------- 🆕 صفحات المنتجات (Pagination) ---------- */
.pagination{ display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; margin-top:34px; }
.pagination button{ min-width:44px; height:44px; padding:0 12px; border-radius:12px; border:1px solid var(--sx-line); background:var(--sx-card); color:var(--sx-ink); font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; display:grid; place-items:center; transition:.2s; }
.pagination button:hover:not(:disabled):not(.active){ border-color:var(--sx-accent); color:var(--sx-accent); transform:translateY(-2px); }
.pagination button.active{ background:var(--sx-brand); color:#fff; border-color:var(--sx-brand); }
.pagination button:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; }
.pagination .pg-dots{ min-width:auto; border:none; background:transparent; box-shadow:none; cursor:default; color:var(--sx-ink-2); }



.filter-open-btn{ display:none; align-items:center; gap:8px; padding:9px 18px; border:none; border-radius:10px; cursor:pointer; font-family:inherit; font-size:14px; font-weight:700; color:#fff; background:linear-gradient(135deg,#1d1f25,#2c2f38); box-shadow:0 4px 12px rgba(20,22,27,.2); }
.filter-open-btn i{ color:var(--sx-accent); }
.filter-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; visibility:hidden; transition:.3s; z-index:1200; }
.filter-handle{ display:none; width:46px; height:5px; border-radius:99px; background:rgba(255,255,255,.28); margin:2px auto 14px; }
.filter-close-btn{ display:none; position:absolute; top:14px; left:16px; width:34px; height:34px; border-radius:50%; border:none; background:rgba(255,255,255,.12); color:#fff; font-size:22px; line-height:1; cursor:pointer; }
 
@media (max-width:900px){
  .cont-product-fillter{ flex-direction:column; }
  #productsList{ order:1; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); }

  .ptb-view-label, .view-toggle-group{ display:none; }
  .ptb-left{ display:flex; }
  .filter-open-btn{ display:inline-flex; }

  .filter-overlay{ display:block; }
  .filter-overlay.show{ opacity:1; visibility:visible; }
  .filter-handle{ display:block; }
  .filter-close-btn{ display:grid; place-items:center; }

  .filter-sidebar{
    position:fixed; left:0; right:0; bottom:0; top:auto; width:auto;
    max-height:82vh; overflow-y:auto; z-index:1300;
    border-radius:22px 22px 0 0; padding:12px 20px 26px;
    transform:translateY(100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
  }
  .filter-sidebar.open{ transform:translateY(0); }
}
@media (max-width:520px){
  #productsList .product{ padding:10px; }
  #productsList .left-info-subcategorey-product h5{ font-size:14px; min-height:42px; }
  #productsList .left-info-subcategorey-product > p:not([class]){ font-size:17px; }
  #productsList .view-btn{ opacity:1; transform:none; }
  .products-toolbar{ padding:10px 12px; }
  .ptb-count{ font-size:13px; padding:6px 10px; }
    .pagination button{ min-width:40px; height:40px; }

}
/* ========================= آخر الجزء المنقول ========================= */
#sxToast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#16181d;color:#fff;padding:12px 22px;border-radius:12px;font-family:'Cairo';font-weight:600;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:.3s;z-index:999}
#sxToast.show{opacity:1;transform:translateX(-50%) translateY(0)}

    .spare-search-group input {
      padding: 12px; border-radius: 8px; border: 1px solid #ccc; font-size: 16px; margin:0 auto;   width: 100%;
    }











    /* ============================================
   Product Cards — Minimal / Premium
   ============================================ */

:root {
  /* Colors */
  --card-bg: #ffffff;
  --card-media-bg: #f7f7f8;
  --card-border: #ececee;
  --card-border-hover: #e0e0e3;

  --text-primary: #1d1d1f;
  --text-secondary: #6e6e73;
  --price-color: #1d1d1f;

  --btn-bg: #f5f5f7;
  --btn-bg-hover: #ebebed;
  --btn-bg-active: #e2e2e5;
  --btn-text: #1d1d1f;
  --btn-border: #e4e4e7;

  /* Radius */
  --radius-card: 14px;
  --radius-media: 10px;
  --radius-btn: 9px;

  /* Spacing */
  --space-xs: 6px;
  --space-sm: 10px;
  --space-md: 14px;
  --space-lg: 18px;
  --grid-gap: 18px;

  /* Shadows */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 6px 18px rgba(0, 0, 0, 0.07);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 180ms;
}

/* ============================================
   Grid Container
   ============================================ */

#itemsContainer,
#itemsSkeleton {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: var(--grid-gap);
  padding: var(--space-lg) 0;
  width: 100%;
  box-sizing: border-box;
}

/* ============================================
   Product Card
   ============================================ */

.item-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.item-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--card-border-hover);
}

.item-card:active {
  transform: translateY(0);
}

/* --- Image --- */

.item-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: var(--radius-media);
  padding: var(--space-sm);
  margin-bottom: var(--space-md);
  box-sizing: border-box;
  transition: transform var(--dur) var(--ease);
}

.item-card:hover img {
  transform: scale(1.015);
}

/* --- Name --- */

.item-card h4 {
  margin: 0 0 var(--space-xs);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.75em;
}

/* --- Price --- */

.item-card p {
  margin: 0 0 var(--space-md);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--price-color);
  letter-spacing: 0.1px;
}

/* --- Add to cart button --- */

.item-card .addToCartBtn {
  margin-top: auto;
  width: 100%;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--btn-text);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.item-card .addToCartBtn:hover {
  background: var(--btn-bg-hover);
  border-color: var(--card-border-hover);
}

.item-card .addToCartBtn:active {
  background: var(--btn-bg-active);
}

.item-card .addToCartBtn:focus-visible {
  outline: 2px solid #b9b9c0;
  outline-offset: 2px;
}

/* ============================================
   Search Result Cards
   (نفس اللغة البصرية — الحاوية بتاخد display:flex من الـ JS)
   ============================================ */

#productSearchResults {
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-hover);
  box-sizing: border-box;
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: var(--space-sm);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  box-sizing: border-box;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--card-border-hover);
}

.product-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: var(--radius-media);
  padding: var(--space-xs);
  margin-bottom: var(--space-sm);
  box-sizing: border-box;
}

.product-card h3 {
  margin: 0 0 4px;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card p {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--price-color);
}

#productSearchResults .no-results {
  margin: 0;
  padding: var(--space-md);
  width: 100%;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* ============================================
   Skeleton (نفس مقاسات الكارت)
   ============================================ */

#itemsSkeleton .skeleton-card,
#itemsSkeleton > div {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  min-height: 300px;
  position: relative;
  overflow: hidden;
}

#itemsSkeleton > div::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.035), transparent);
  animation: skeleton-shine 1.4s infinite;
}

@keyframes skeleton-shine {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* ============================================
   Responsive
   ============================================ */

/* Laptop */
@media (max-width: 1280px) {
  #itemsContainer,
  #itemsSkeleton {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
  }
}

/* Tablet */
@media (max-width: 900px) {
  #itemsContainer,
  #itemsSkeleton {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
  }

  .item-card { padding: 12px; }
  .item-card h4 { font-size: 0.9rem; }
}

/* Mobile */
@media (max-width: 600px) {
  #itemsContainer,
  #itemsSkeleton {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px 0;
  }

  .item-card {
    padding: 10px;
    border-radius: 12px;
  }

  .item-card img {
    aspect-ratio: 4 / 3;
    padding: 6px;
    margin-bottom: 10px;
  }

  .item-card h4 {
    font-size: 0.82rem;
    line-height: 1.4;
    min-height: 2.3em;
    margin-bottom: 4px;
  }

  .item-card p {
    font-size: 0.8rem;
    margin-bottom: 10px;
  }

  .item-card .addToCartBtn {
    padding: 8px 8px;
    font-size: 0.78rem;
  }

  .item-card:hover {
    transform: none;
    box-shadow: var(--shadow-card);
  }

}

/* Small phones */
@media (max-width: 340px) {
  #itemsContainer,
  #itemsSkeleton { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .item-card,
  .item-card img,
  .product-card,
  .item-card .addToCartBtn {
    transition: none;
  }
  #itemsSkeleton > div::after { animation: none; }
}



/* =========================================================
   1) الهيرو + بانل الأقسام العائم
   ========================================================= */
.spare-wrap{ position: relative; overflow-x: clip; }




.spare-hero .main-slider .swiper-pagination{
  bottom: calc(var(--cats-overlap) + 10px);
}


/* إلغاء أي Grid قديم على الكونتينر */
.spare-cats-float #spareCategoriesContainer{
  display: block;
  width: 100%;
}

.spare-categories-slider{
  width: 100%;
  overflow: hidden;
  padding: 2px 2px 4px;
}
.spare-categories-slider .swiper-wrapper{
  display: flex;
  align-items: stretch;
  box-sizing: content-box;
}
.spare-categories-slider .swiper-slide{ height: auto; flex-shrink: 0; }




.spare-categories-slider .category-cardspare:active{ transform: scale(.98); }

/* أسهم بانل الأقسام (ديسكتوب فقط) */
.spare-cats-nav{
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid #e4e8ee;
  background: #fff;
  color: #334155;
  font-size: 20px; line-height: 1;
  cursor: pointer;
  z-index: 12;
  box-shadow: 0 4px 12px rgba(15,23,42,.14);
  transition: opacity .2s ease, background .2s ease;
}
@media (min-width: 992px){
  .spare-cats-nav{ display:flex; align-items:center; justify-content:center; }
}
.spare-cats-nav.prev{ right: -14px; }   /* RTL: السابق يمين */
.spare-cats-nav.next{ left: -14px; }
.spare-cats-nav:hover{ background:#f8fafc; }
.spare-cats-nav.swiper-button-disabled,
.spare-cats-nav.swiper-button-lock{ opacity:0; pointer-events:none; }

/* =========================================================
   2) البحث + عنوان الصفوف
   ========================================================= */

#textspare{
  position: relative;
  margin: 34px 0 18px;
  padding-inline-start: 12px;
  font-size: 20px;
  font-weight: 800;
  color: #1f2937;
}
#textspare::before{
  content:"";
  position:absolute; inset-inline-start:0; top:50%;
  transform: translateY(-50%);
  width:4px; height:20px; border-radius:4px; background:#009688;
}

/* =========================================================
   3) صفوف الأقسام: كل قسم Row مستقل
   ========================================================= */
#categoryPartsContainer{ display: block; width: 100%; }

.category-row{
  display: block;
  width: 100%;
  margin: 0 0 34px;
}
.category-row:last-child{ margin-bottom: 10px; }

.category-row-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.category-row-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: #243040;
  white-space: nowrap;
  overflow: hidden;
  flex-direction: column;
  font-size: 60px;
  background-color: white;
  width: 300px;
  height: 100px;
  margin: 0 auto;
  position: relative;
  bottom: 140px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}
.category-row-title img{
  width: 34px; height: 34px;
  border-radius: 9px;
  object-fit: cover;
  background: #f1f5f9;
  flex-shrink: 0;
}

.category-row-all{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #d9e0e8;
  background: #fff;
  color: #009688;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.category-row-all:hover{ background:#009688; border-color:#009688; color:#fff; }

.category-row-empty{
  margin: 0;
  padding: 14px 0 4px;
  font-size: 14px;
  color: #94a3b8;
  text-align: center;
}
.category-row-header{
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 0px 0px 14px;
  background-color: #89CFF0;
  height: 350px;
  position: relative;
  width: 100%;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  z-index: -1;
}
.category-products-slider{
overflow: hidden;
  position: relative;
  margin-top: -200px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
}
.category-products-slider .swiper-wrapper{
  display: flex;
  align-items: stretch;
  box-sizing: content-box;
}
.category-products-slider .swiper-slide{ height: auto; flex-shrink: 0; }

.product-card{
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: #fff;
  border: 1px solid #ecf0f4;
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(15,23,42,.06);
  cursor: pointer;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.product-card-img{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
}
.product-card-img img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.product-card-name{
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: #243040;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}
.product-card-code{ margin:0; font-size:12px; color:#8a94a2; }
.product-card-price{ margin:auto 0 0; font-size:14px; font-weight:800; color:#009688; }

@media (hover: hover) and (min-width: 992px){
  .product-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 14px 26px rgba(15,23,42,.13);
    border-color: #cfd8e3;
  }
  .product-card:hover .product-card-img img{ transform: scale(1.07); }
}
.product-card:active{ transform: scale(.985); }

/* أسهم صفوف المنتجات — مستقلة لكل صف */
.cat-nav{
  display: none;
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid #e4e8ee;
  background: #fff;
  color: #334155;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 4px 14px rgba(15,23,42,.15);
  transition: opacity .2s ease, background .2s ease;
}
@media (min-width: 992px){
  .cat-nav{ display:flex; align-items:center; justify-content:center; }
}
.cat-nav.prev{ right: 6px; }
.cat-nav.next{ left: 6px; }
.cat-nav:hover{ background:#f8fafc; }
.cat-nav.swiper-button-disabled,
.cat-nav.swiper-button-lock{ opacity:0; pointer-events:none; }

/* =========================================================
   4) Responsive
   ========================================================= */
@media (max-width: 768px){
  .spare-cats-float{ left: 10px; right: 10px; padding: 10px 12px; border-radius: 16px; }
  .spare-categories-slider .category-cardspare h4{ font-size: 13px; }

  #textspare{ font-size: 18px; margin-top: 26px; }
  .category-row{ margin-bottom: 26px; }
  .category-row-title img{ width: 30px; height: 30px; }
  .category-row-all{ padding: 5px 11px; font-size: 12px; }
  .product-card{ padding: 8px; border-radius: 12px; }
  .product-card-name{ font-size: 13px; }
}
@media (max-width: 480px){
  .spare-cats-float{ left: 8px; right: 8px; }
  .spare-categories-slider .category-cardspare{ padding: 6px; border-radius: 12px; }
  .spare-categories-slider .category-cardspare h4{ font-size: 12px; }

  .category-row-header{ margin-bottom: 11px; }
  .product-card-name{ font-size: 12.5px; }
  .product-card-price{ font-size: 13px; }
}


  .page-intro {
            background: #fff;
            border-radius: 22px;
            padding: 35px;
            margin-bottom: 22px;
            border: 1px solid #edf0f4;
            position: relative;
            overflow: hidden;
        }

        .page-intro::after {
            content: "";
            position: absolute;
            width: 240px;
            height: 240px;
            border-radius: 50%;
            background: #eef5ff;
            left: -80px;
            top: -100px;
        }

        .page-intro-content {
            position: relative;
            z-index: 2;
        }

        .page-intro h1 {
            font-size: 32px;
            margin-bottom: 12px;
        }

        .page-intro p {
            color: #727987;
            font-size: 15px;
            line-height: 1.8;
            max-width: 700px;
        }

        /* ================= SEARCH ================= */

       

        .search-input {
            flex: 1;
            height: 54px;
            border: 1px solid #e1e5ea;
            border-radius: 14px;
            padding: 0 20px;
            outline: none;
            background: #fafbfc;
            font-size: 14px;
        }

        .search-input:focus {
            border-color: #1769e0;
            background: #fff;
        }

        .search-btn {
            height: 54px;
            padding: 0 28px;
            border: 0;
            border-radius: 14px;
            background: #1769e0;
            color: white;
            cursor: pointer;
            font-weight: 700;
        }








        /* ================= Premium Product Card ================= */

/* تساوي ارتفاع الكروت داخل السلايدر */
.category-products-slider .swiper-wrapper { align-items: stretch; }
.category-products-slider .swiper-slide { height: auto; display: flex; }

.product-card {
  --pc-accent: #00897b;
  --pc-ink: #13212b;
  --pc-muted: #6b7b88;
  --pc-line: #edf1f5;

  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 1px solid var(--pc-line);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  text-align: right;
  box-shadow: 0 2px 10px rgba(18, 36, 50, .05);
  transition: transform .28s cubic-bezier(.22, .61, .36, 1),
              box-shadow .28s ease,
              border-color .28s ease;
  -webkit-tap-highlight-color: transparent;
}

.product-card:focus-visible {
  outline: 2px solid var(--pc-accent);
  outline-offset: 2px;
}

@media (hover: hover) {
  .product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px -14px rgba(18, 36, 50, .28);
    border-color: #e0e7ee;
  }
}

/* ---------- الصورة ---------- */
.product-card-img {
  position: relative;
  flex: 0 0 auto;
  height: 230px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

}

.product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

@media (hover: hover) {
  .product-card:hover .product-card-img img { transform: scale(1.07); }
}

/* ---------- Badge المخزون ---------- */
.product-card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #16a34a, #0d9268);
  box-shadow: 0 4px 10px -4px rgba(16, 163, 74, .7);
  direction:rtl;
}

.product-card-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
}

.product-card-badge.is-out {
  background: linear-gradient(135deg, #94a3b8, #64748b);
  box-shadow: 0 4px 10px -4px rgba(100, 116, 139, .6);
}

/* ---------- زر المفضلة ---------- */
.product-card-fav {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #e6edf3;
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #94a3b0;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(18, 36, 50, .08);
  transition: color .2s ease, transform .2s ease, border-color .2s ease;
}

.product-card-fav:hover { color: #e11d48; border-color: #fbcfe1; transform: scale(1.08); }
.product-card-fav.is-active { color: #e11d48; border-color: #fbcfe1; background: #fff; }

/* ---------- Quick View ---------- */
.product-card-quick {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 3;
  transform: translate(-50%, 14px);
  opacity: 0;
  pointer-events: none;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  color: #fff;
  background: rgba(19, 33, 43, .88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  white-space: nowrap;
  cursor: pointer;
  transition: opacity .3s ease, transform .3s ease;
}

@media (hover: hover) {
  .product-card:hover .product-card-quick {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
  }
}

@media (hover: none) {
  .product-card-quick { display: none; }
}

/* ---------- الجسم ---------- */
.product-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  padding: 12px 14px 14px;
}

.product-card-brand {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--pc-accent);
}

.product-card-name {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--pc-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.45em * 2);   /* يمنع اختلاف الأطوال من تبويظ الارتفاع */
}

.product-card-compat {
  margin: 2px 0 0;
  align-self: flex-start;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid #d8ece8;
  border-radius: 8px;
  background: #eef8f6;
  color: #0f7a6c;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card-code {
  margin: 0;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--pc-muted);
  letter-spacing: .2px;
}

/* ---------- السعر ---------- */
.product-card-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;      /* يثبّت السعر أسفل الكارت مهما اختلف المحتوى */
  padding-top: 8px;
}

.product-card-price {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--pc-ink);
}

.product-card-price-old {
  margin: 0;
  font-size: 12.5px;
  color: #9aa7b2;
  text-decoration: line-through;
}

.product-card-discount {
  margin-inline-start: auto;
  padding: 3px 7px;
  border-radius: 6px;
  background: #fee4e2;
  color: #d92d20;
  font-size: 11px;
  font-weight: 800;
}

/* ---------- الأزرار ---------- */
.product-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  direction: rtl;
}

.product-card-cart {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #00a595, #00796b);
  cursor: pointer;
  box-shadow: 0 8px 16px -10px rgba(0, 121, 107, .95);
  transition: filter .2s ease, transform .2s ease, box-shadow .2s ease, background .25s ease;
}

.product-card-cart:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.product-card-cart:active:not(:disabled) { transform: translateY(0); }
.product-card-cart.is-added { background: linear-gradient(135deg, #16a34a, #0d9268); }

.product-card-cart:disabled {
  background: #e8edf2;
  color: #9aa7b2;
  cursor: not-allowed;
  box-shadow: none;
}


/* ---------- Tablet ---------- */
@media (min-width: 576px) and (max-width: 1023px) {
  .product-card-img { height: 190px; }
  .product-card-name { font-size: 14.5px; }
}

/* ---------- Mobile (slidesPerView ≈ 2.15) ---------- */
@media (max-width: 575px) {
  .product-card { border-radius: 16px; }
  .product-card-img { height: 150px; padding: 10px; }
  .product-card-body { padding: 10px 11px 12px; gap: 5px; }
  .product-card-brand { font-size: 10px; }
  .product-card-name { font-size: 13.5px; }
  .product-card-compat { font-size: 10.5px; padding: 3px 6px; }
  .product-card-code { font-size: 10.5px; }
  .product-card-price { font-size: 15.5px; }
  .product-card-price-old { font-size: 11px; }
  .product-card-fav { width: 30px; height: 30px; font-size: 14px; top: 8px; left: 8px; }
  .product-card-badge { font-size: 10px; padding: 4px 8px; top: 8px; right: 8px; }
  .product-card-cart { padding: 9px 8px; font-size: 12px; border-radius: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-card-img img,
  .product-card-quick { transition: none !important; }
  .product-card:hover { transform: none; }
}


.stock-badge {
position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #16a34a, #0d9268);
  box-shadow: 0 4px 10px -4px rgba(16, 163, 74, .7);
}

.stock-badge.in-stock  { background: #16a34a; }
.stock-badge.out-stock { background: #dc2626; }


.cont-title-icon,.cont-phone-icon{
  display:flex;
  align-items:center;
  gap:8px;  
}