body,html{overflow-x:hidden}body,h1,h2,h3,h4,h5,h6,span{font-weight:400;font-family:"El Messiri",sans-serif}.info,.noResult{align-items:center}#loadingMessage,.btn-order,.load-more-wrapper,.steps-container,body,h1,h2,h3,h4,h5,h6,span{font-family:"El Messiri",sans-serif}.copyright_text,.load-more-wrapper,.noResult,.product-card,.three-body{text-align:center}#backToTop,#loadMoreBtn,.btn-order,.card,.phone-icon{cursor:pointer}*{box-sizing:border-box!important;transition:.5s;margin:0;padding:0}html{scroll-behavior:smooth;direction:rtl}body{background:#fff;font-size:14px;line-height:1.80857;color:#000;transition:background-color .3s,color .3s}a{color:#1f1f1f;text-decoration:none!important;outline:0!important}h1,h2,h3,h4,h5,h6,span{letter-spacing:0;position:relative;padding:0 0 10px;line-height:normal;color:#111;margin:0}.copyright_section{width:100%;float:left;background-color:#252525;height:auto}.copyright_text{width:100%;float:left;color:#fff;font-size:16px;margin:20px 0}.copyright_text a,body.dark-theme .box_main,body.dark-theme .shirt_text,body.dark-theme h1,body.dark-theme h2,body.dark-theme h3,body.dark-theme h4,body.dark-theme h5,body.dark-theme h6,body.dark-theme p,body.dark-theme span{color:#fff}.copyright_text a:hover{color:#f26522}.margin_top90{margin-top:90px}.btn-order:hover{opacity:.95}.btn-order .animation{border-radius:100%;animation:.6s linear infinite ripple}.noResult{display:none;width:100%;justify-content:center;font-size:30px;color:#4747479c;padding:60px 0}body.dark-theme{background-color:#111;color:#fff}body.dark-theme .card{background:#000;box-shadow:0 0 30px 10px #252525}.fashion_section .card{position:relative}#products_section .card::after{position:absolute;content:"";width:80%;height:35px;right:-75px;background:red;transform:rotate(45deg)}header{background:linear-gradient(to right,#cecece 0,#1e1e1e 45%,#1e1e1e 80%);background-size:200% 100%;animation:5s linear infinite moveGradient}@keyframes moveGradient{0%,100%{background-position:100% 0}50%{background-position:0 0}}.whatsapp-float{position:fixed;bottom:10px;left:5px;z-index:1000;width:60px;height:60px;display:flex;justify-content:center;align-items:center}.whatsapp-float i{position:relative;z-index:1;color:#fff;background:#1bcf5d;padding:6px;border-radius:50%}.pr1,.pr2{font-size:21px}.phone-list{display:none;position:absolute;top:35px;background-color:#fff;border:1px solid #ddd;border-radius:5px;box-shadow:0 4px 8px rgba(0,0,0,.1);padding:10px;z-index:999}.pr2,.three-body{position:relative}.phone-list a{display:block;text-decoration:none;color:#333; font-size: 20px; padding:2px;border-bottom:1px solid #ddd}.phone-list a:last-child{border-bottom:none}.phone-list a:hover{background-color:#f0f0f0}.pr2{color:#6e6e6e;width:fit-content;margin:auto}.pr2::before{content:"";position:absolute;top:42%;left:-5px;width:110%;height:1px;background-color:#6e6e6e;transform:rotate(-10deg)}.pr1{color:green;padding:0;font-weight:700;margin-bottom:-10px;margin-top:-8px}.info{margin:0}.so{margin:auto}.so a{font-size:35px;padding:0 3px;color:#000}.fa-facebook-messenger{background:linear-gradient(45deg,#00c6ff,#0072ff,#ff00a6,#ff8b00);-webkit-background-clip:text;color:transparent;border-radius:999px;padding:5px;font-size:35px}.btn-order,.info{padding:5px 10px}.fa-whatsapp{font-size:40px;color:#25d366}.fa-phone-volume{color:#fff;animation:1s infinite bounce;font-size:20px}@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));grid-gap:8px;align-items:start}.cards .card{width:95%;box-shadow:0 0 10px 5px #e6e6e6;border:1px solid #d45617;border-radius:10px;overflow:hidden;padding-bottom:5px;margin:0 auto;display:flex;flex-direction:column;justify-content:space-between;height:auto}.cards .card .image{width:100%;height:150px;display:flex;justify-content:center;align-items:center;overflow:hidden}.cards .card .image img{max-width:100%;max-height:100%;object-fit:contain}.cards .card .shirt_text{text-align:center;font-size:16px;margin:15px 0 2px;padding:0 5px;word-wrap:break-word;transition:font-size .2s ease-in-out}.info{display:flex;width:100%;justify-content:center;gap:5px;flex-wrap:wrap}#backToTop,.step-icon{width:50px;height:50px;color:#fff}.btn-order,.step{align-items:center}.btn-order{outline:0;display:inline-flex;justify-content:center;background:#0d8a18;min-width:110px;border:0;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.1);box-sizing:border-box;color:#fff;font-size:20px;font-weight:600;text-transform:uppercase;overflow:hidden;align-self:center;margin-top:auto}#backToTop,.pr2div,.step,.step-icon{display:flex}.pr2div{justify-content:center}.steps-container{max-width:600px;margin:20px auto;background:#fff;padding:20px;border-radius:10px;box-shadow:0 4px 8px #640459}.step{margin-bottom:20px;border-right:4px solid #6a0dad;padding:10px}.step-icon{background:#6a0dad;align-items:center;justify-content:center;border-radius:50%;font-size:22px;margin-left:15px}.step-text{flex:1}.step-title{font-size:18px;font-weight:700;margin-bottom:5px}.step-desc{font-size:14px;color:#555}@media (max-width:600px){.steps-container{width:300px}.step{flex-direction:column;align-items:flex-start;border-right:none;border-bottom:4px solid #6a0dad;padding-bottom:15px}.step-icon{margin-bottom:10px}}#loadingMessage{font-size:18px;color:#000;margin-top:20px;animation:1.5s infinite blink}@keyframes blink{50%{opacity:.5}}.products-container{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;padding:20px}.product-card{background:#fff;padding:15px;width:200px;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,.1);transition:transform .3s}.product-card:hover{transform:translateY(-5px)}.three-body{margin:auto;width:100%;--uib-size:35px;--uib-speed:0.8s;--uib-color:#5D3FD3;display:inline-block;height:var(--uib-size);width:var(--uib-size);animation:spin78236 calc(var(--uib-speed) * 2.5) infinite linear}.three-body__dot{position:absolute;height:100%;width:30%}.three-body__dot:after{content:'';position:absolute;height:0%;width:100%;padding-bottom:100%;background-color:var(--uib-color);border-radius:50%}#backToTop,.fashion_taital,.fashion_taital::after{background:linear-gradient(45deg,#f60,#f06)}.three-body__dot:first-child{bottom:5%;left:0;transform:rotate(60deg);transform-origin:50% 85%}.three-body__dot:first-child::after{bottom:0;left:0;animation:wobble1 var(--uib-speed) infinite ease-in-out;animation-delay:calc(var(--uib-speed) * -.3)}.three-body__dot:nth-child(2){bottom:5%;right:0;transform:rotate(-60deg);transform-origin:50% 85%}.three-body__dot:nth-child(2)::after{bottom:0;left:0;animation:wobble1 var(--uib-speed) infinite calc(var(--uib-speed) * -.15) ease-in-out}.three-body__dot:nth-child(3){bottom:-5%;left:0;transform:translateX(116.666%)}.three-body__dot:nth-child(3)::after{top:0;left:0;animation:wobble2 var(--uib-speed) infinite ease-in-out}@keyframes spin78236{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes wobble1{0%,100%{transform:translateY(0) scale(1);opacity:1}50%{transform:translateY(-66%) scale(.65);opacity:.8}}@keyframes wobble2{0%,100%{transform:translateY(0) scale(1);opacity:1}50%{transform:translateY(66%) scale(.65);opacity:.8}}.fashion_taital{font-size:32px;font-weight:700;-webkit-background-clip:text;-webkit-text-fill-color:transparent;opacity:0;transform:translateY(-20px);transition:opacity 1s ease-out,transform 1s ease-out;position:relative;display:inline-block}.visible{opacity:1;transform:translateY(0)}.fashion_taital::before{content:"✨";position:absolute;left:-30px;font-size:24px;opacity:0;transform:translateX(-10px);transition:opacity .8s ease-in-out,transform .8s ease-in-out}.fashion_taital::after{content:"";position:absolute;width:0;height:4px;left:50%;bottom:1px;transform:translateX(-50%);transition:width 1s ease-in-out}.visible::before{opacity:1;transform:translateX(0)}.visible::after{width:50%}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}#backToTop{position:fixed;bottom:20px;right:20px;border:none;border-radius:50%;align-items:center;justify-content:center;font-size:24px;box-shadow:0 4px 6px rgba(0,0,0,.2);opacity:0;visibility:hidden;transition:opacity .3s,transform .3s}#backToTop.show{opacity:1;visibility:visible;transform:translateY(0)}#backToTop:hover{transform:scale(1.1);background:linear-gradient(45deg,#f06,#f60)}#theme-toggle-button{font-size:10px;position:relative;display:inline-block;width:7em;cursor:pointer;margin-bottom:12px}#toggle{opacity:0;width:0;height:0}#button,#cloud,#container,#moon,#patches,#stars,#sun{transition-property:all;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:.25s}#toggle:checked+svg #container{fill:#2b4360}#toggle:checked+svg #button{transform:translate(28px,2.333px)}#cloud,#sun,#toggle:checked+svg #moon,#toggle:checked+svg #stars{opacity:1}#moon,#stars,#toggle:checked+svg #cloud,#toggle:checked+svg #sun{opacity:0}body.dark-mode{background-color:#121212;color:#f1f1f1}body.dark-mode a,body.dark-mode h1,body.dark-mode h2,body.dark-mode h3,body.dark-mode h4,body.dark-mode h5,body.dark-mode h6,body.dark-mode span{color:#fff!important}body.dark-mode .card{background-color:#121212!important;border:1px solid rgba(255,255,255,.891)!important;box-shadow:none!important}body.dark-mode #phoneList,body.dark-mode .steps-container{background-color:#000!important}body.dark-mode .steps-container,body.dark-mode .steps-container *{color:#fff!important;border-color:#fff!important}.container-r,.container-r span{border-radius:50%;background-color:#9b59b6;background-image:linear-gradient(#9b59b6,#84cdfa,#5ad1cd)}body.dark-mode button{background-color:orange!important;color:#fff!important}.btn_main{padding:0 15px 0PX;width:100%;margin-top:auto}.card{transition:transform .2s}.card:active{transform:scale(.97)}.container-r{position:relative;height:96px;width:96px;animation:1.2s linear infinite rotate_3922}.container-r span{position:absolute;height:100%;width:100%}.container-r span:first-of-type{filter:blur(5px)}.container-r span:nth-of-type(2){filter:blur(10px)}.container-r span:nth-of-type(3){filter:blur(25px)}.container-r span:nth-of-type(4){filter:blur(50px)}.container-r::after{content:"";position:absolute;top:10px;left:10px;right:10px;bottom:10px;background-color:#fff;border:5px solid #fff;border-radius:50%}@keyframes rotate_3922{from{transform:rotate(0)}to{transform:rotate(360deg)}}.load-more-wrapper{margin-top:30px;margin-bottom:30px;display:none}#loadMoreBtn{background-color:#4caf50;color:#fff;border:none;padding:12px 30px;font-size:16px;border-radius:30px;transition:background-color .3s,transform .2s;box-shadow:0 4px 10px rgba(0,0,0,.1)}#loadMoreBtn:hover{background-color:#45a049;transform:scale(1.05)}#loadMoreBtn:active{transform:scale(.98)}


  :root {
  --text-color: #333;
  --card-bg: #ffffff;
  --transition: all 0.35s ease;
}



.category-card {
  background: #fff; /* أو أي لون تبيه في الوضع العادي */
  transition: background 0.3s ease;
}
.category-card p {
    color: black;
}
/* الوضع المظلم */
body.dark-mode .category-card {
  background: #000 !important; /* أسود في المود المظلم */
  color: #fff; /* لو تحب تغير الكتابة للأبيض */
}
body.dark-mode .category-card p {
    color: white;
}


#backToTop {
background: linear-gradient(45deg, #00c6ff, #014db8);
}
#backToTop:hover{transform:scale(1.1);background:linear-gradient(45deg,#003b8e,#00c6ff)}



.cards .card {
  border: 1px solid #00c6ff;
}



#cart-sidebar {
  position: fixed;
  top: 0;
  right: -400px;
  width: 350px;
  height: 100%;
  background: #fff;
  box-shadow: -3px 0 10px rgba(0,0,0,0.3);
  padding: 15px;
  transition: right 0.3s ease;
  z-index: 10000;
  overflow-y: auto;
}

#cart-sidebar.active {
  right: 0;
}

.cart-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.cart-item img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  margin-right: 10px;
}

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

.cart-item .quantity {
  display: flex;
  align-items: center;
  gap: 5px;
}

.cart-item button {
  background: none;
  border: none;
  cursor: pointer;
  color: red;
}


.form-control {
    display: block;
    width: 68%;
    padding: .375rem 5px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid #717171;
    border-radius: var(--bs-border-radius);
    transition: border-color .15s 
ease-in-out, box-shadow .15s 
ease-in-out;
}

#theme-toggle-button {
      font-size: 7px;
    position: relative;
    display: inline-block;
    width: 7em;
    cursor: pointer;
    margin-bottom: 12px;
    left: 8px;
}
#cart-container {
  margin-top: 10PX;
}

.form-control:focus {
  border: 1px solid #00c6ff;
  box-shadow: 1PX 1PX 3PX #00c6ff;
}


    .hero-title {
  font-size: 2.8rem;   /* نفس حجم h1 */

}


.search66 {
  border: none;
  outline: none;
  text-align: center;
}
.search66:hover{
  border: 1px solid #0054ca;
}
.menu-search{
  position: relative;
}

.search-suggestions{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  overflow: hidden;
  display: none;
  z-index: 10001;
}

.search-suggestions div{
  cursor: pointer;
  font-weight: 600;
  margin-top: 5px;
  color: #003b8e;
}

.search-suggestions div:last-child{
  border-bottom: none;
}

.search-suggestions div:hover{
  background: #f5f7ff;
}

.new-badge{
    position:absolute;
    top:10px;
    right:10px;
    background:#22c55e;
    color:#fff;
    font-size:12px;
    font-weight:bold;
    padding:5px 12px;
    border-radius:20px;
    overflow:hidden;
    z-index:3;
}

/* طبقة اللمعة */
.new-badge::after{
    content:"";
    position:absolute;
    top:0;
    right:-75%;
    width:50%;
    height:100%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.8),
        transparent
    );
    transform:skewX(-25deg);
    animation:shineBadge 4s infinite;
}

@keyframes shineBadge{

    /* بداية الحركة */
    0%{
        right:-75%;
    }

    /* نهاية الحركة بعد 1 ثانية */
    25%{
        right:125%;
    }

    /* بقاء مخفية لمدة 3 ثواني */
    100%{
        right:125%;
    }

}



/* الصندوق */
#searchSuggestions,
#searchSuggestionsDesktop {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  margin-top: 8px;
  overflow-y: auto;
  max-height: 280px;

}

/* العنصر */
.suggestion-item {
  padding: 0;
  border-bottom: 1px solid #e6e6e6;
  box-shadow: 0 5px 55px rgba(0, 0, 0, 0.057);
}



/* الهيكل */
.sug-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  transition: 0.2s;
}

.sug-item:hover {
  background: #f9f9f9;
}

/* الصورة (صغيرة ومضبوطة) */
.sug-thumb {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #f2f2f2;
}

/* النص */
.sug-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
}

/* الاسم */
.sug-title {
  font-size: 13px;
  font-weight: 600;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* الأسعار */
.sug-price-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

/* السعر الحالي */
.sug-price {
  font-size: 13px;
  font-weight: bold;
  color: #e63946;
}

/* السعر القديم */
.sug-old {
  font-size: 11px;
  color: #aaa;
  text-decoration: line-through;
}

/* 📱 الهاتف */
@media (max-width: 600px) {
  .sug-thumb {
    width: 38px;
    height: 38px;
  }

  .sug-title {
    font-size: 12px;
  }

  .sug-price {
    font-size: 12px;
  }
}

/* highlight */
.hl {
  background: #ffe066;
  padding: 1px 3px;
  border-radius: 3px;
}

/* العنصر المحدد بالكيبورد */
.suggestion-item.active {
  background: #eef2ff;
}

/* badge التخفيض */
.sug-badge {
  background: #e63946;
  color: #fff;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 5px;
  margin-bottom: 7px;
}


/* الجيل الجديد */


  /* Theme Switch */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 4em;
  height: 2.2em;
  border-radius: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2a2a2a;
  transition: 0.4s;
  border-radius: 30px;
  overflow: hidden;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.2em;
  width: 1.2em;
  border-radius: 20px;
  left: 0.5em;
  bottom: 0.5em;
  transition: 0.4s;
  transition-timing-function: cubic-bezier(0.81, -0.04, 0.38, 1.5);
  box-shadow: inset 8px -4px 0px 0px #fff;
}

.switch input:checked + .slider {
  background-color: #00a6ff;
}

.switch input:checked + .slider:before {
  transform: translateX(1.8em);
  box-shadow: inset 15px -4px 0px 15px #ffcf48;
}

.star {
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  width: 5px;
  transition: all 0.4s;
  height: 5px;
}

.star_1 {
  left: 2.5em;
  top: 0.5em;
}

.star_2 {
  left: 2.2em;
  top: 1.2em;
}

.star_3 {
  left: 3em;
  top: 0.9em;
}

.switch input:checked ~ .slider .star {
  opacity: 0;
}

.cloud {
  width: 3.5em;
  position: absolute;
  bottom: -1.4em;
  left: -1.1em;
  opacity: 0;
  transition: all 0.4s;
}

.switch input:checked ~ .slider .cloud {
  opacity: 1;
}


  /* ===== الهيدر ===== */
.main-header{
  position:fixed;
  top:40px;
  width:100%;
  height:70px;
  background:#f8f9fa;
  box-shadow:1px 1px 5px #cfcfcf;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 12px;
  z-index:1000;
}

.logo-img{width:45px}

.burger-btn{
  font-size:26px;
  background:none;
  border:none;
  cursor:pointer;
  color:var(--secondary-color);
}

.header-right{
  display:flex;
  align-items:center;
  gap:14px;
}

.phone-icon i,
#cart-btn i, .cart-btn-mobile i{
  font-size:22px;
  color:var(--secondary-color);
}

/* ===== السلة ===== */
#cart-btn, .cart-btn-mobile{
  background:none;
  border:none;
  position:relative;
  cursor:pointer;
}





#cart-count, .cart-count-mobile{
  position:absolute;
  top:-7px;
  right:-7px;
  background:var(--primary-color);
  color:#fff;
  font-size:12px;
  width:18px;
  height:18px;
  border-radius:50%;
  display:flex;
  justify-content:center;
}

/* ===== القائمة الجانبية ===== */
.side-menu{
  position:fixed;
  top:0;
  right:-280px;
  width:260px;
  height:100%;
  background:#fff;
  z-index:10000;
  padding:20px;
  transition:.4s;
  box-shadow:5px 0 20px rgba(0,0,0,.15);
}

.side-menu.active{right:0}

.close-menu{
  background:none;
  border:none;
  font-size:20px;
  cursor:pointer;
  margin-bottom:20px;
}

/* البحث */
.menu-search{
  display:flex;
  margin-bottom:25px;
}

.menu-search input{
  font-size: 14px;
  flex:1;
  padding:10px;
  border-radius:0 18px 18px 0;
  border:1px solid #a3a3a3;
  font-family:'El Messiri',sans-serif;
}

.menu-search button{
  border:none;
  border-radius:18px 0 0 18px;
  background:linear-gradient(45deg,var(--secondary-color),var(--primary-color));
  padding:10px 15px;
}



/* الروابط */
.menu-links a{
  font-size: 17px;
  display:block;
  padding:12px 0;
  color:var(--primary-color);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid #eee;
}

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

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

  .menu-phone{
  padding:12px 0;
}

.menu-phone-toggle{
  display:block;
  cursor:pointer;
  font-weight:600;
  color:var(--primary-color);
  text-decoration:none;
}

.menu-phone-list{
  margin-top:8px;
  padding-right:10px;
}

.menu-phone-list a{
  display:inline-block;
  background:#f1f3ff;
  padding:8px 14px;
  border-radius:10px;
  color:var(--secondary-color);
  font-weight:700;
  text-decoration:none;
}

/* لو عندك إخفاء افتراضي */
.phone-list{
  display:none;
}

/* تصميم سلة التسوق الجانبية */
#cart-sidebar {
  position: fixed;
  top: 0;
  right: -400px;
  width: 380px;
  height: 100vh;
  background: white;
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  transition: right 0.4s ease;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  z-index: 99999;
}

#cart-sidebar.active {
  right: 0;
}

#cart-sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

#close-cart {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #f8f9fa;
  border: none;
  border-radius: 50%;
  font-size: 18px;
  color: #555;
  z-index: 10;
  transition: all 0.3s ease;
}

#close-cart:hover {
  background: #ff4757;
  color: white;
  transform: rotate(90deg);
}

#cart-sidebar h3 {
  padding: 25px 20px 15px;
  margin: 0;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  font-size: 20px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(1, 77, 184, 0.2);
}

#cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  background: #f8f9fa;
}

.cart-item {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
  position: relative;
}

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

.cart-item img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
  margin-left: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

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

.cart-item .details strong {
  display: block;
  font-size: 16px;
  color: #2d3436;
  margin-bottom: 5px;
}

.cart-item .details span {
  color: var(--primary-color);
  font-weight: 600;
  font-size: 15px;
}

.cart-item .quantity {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

.cart-item .quantity button {
  width: 69px;
  height: 28px;
  border: none;
  background: #f1f2f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s ease;
}

.cart-item .quantity button:hover {
  background: var(--primary-color);
  color: white;
}

.cart-item .quantity span {
  margin: 0 10px;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

.cart-item > button:last-child {
  background: none;
  border: none;
  color: #a4b0be;
  font-size: 18px;
  cursor: pointer;
  padding: 5px;
  transition: all 0.3s ease;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item > button:last-child:hover {
  background: #ff6b6b;
  color: white;
  transform: scale(1.1);
}

#cart-total {
  padding: 20px;
  background: white;
  border-top: 1px solid #e0e0e0;
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-color);
  text-align: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

#checkout-btn {
  margin: 0 20px 70px;
  padding: 16px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(1, 77, 184, 0.3);
}

#checkout-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(1, 77, 184, 0.4);
}

#checkout-btn:active {
  transform: translateY(0);
}

/* تأثير التمرير */
#cart-items::-webkit-scrollbar {
  width: 6px;
}

#cart-items::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

#cart-items::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 10px;
}

#cart-items::-webkit-scrollbar-thumb:hover {
  background: var(--secondary-color);
}

/* تصميم للسلة الفارغة */
#cart-items:empty::before {
  content: "سلة التسوق فارغة";
  display: block;
  text-align: center;
  padding: 40px 20px;
  color: #a4b0be;
  font-style: italic;
}

/* ظلام الخلفية عند فتح السلة */
.cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}

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

/* تصميم متجاوب */
@media (max-width: 480px) {
  #cart-sidebar {
    width: 100%;
    right: -100%;
  }
  
  .cart-item {
    flex-direction: column;
    text-align: center;
    padding: 12px;
  }
  
  .cart-item img {
    margin: 0 0 10px 0;
  }
  
  .cart-item > button:last-child {
    position: absolute;
    top: 10px;
    left: 10px;
  }
}
.cart-item .quantity {
    display: flex
;
    align-items: center;
    margin-top: 8px;
    margin: 8px 23%;
}



  /* ===== افتراضي ===== */
.desktop-header{
  display: none;
}

/* ===== الحاسوب ===== */
@media (min-width: 992px){

  .desktop-header{
    display: flex;
    position: fixed;
    top: 0;
    width: 100%;
    height: 70px;
    background: #f8f9fa;
    box-shadow: 1px 1px 5px #cfcfcf;
    align-items: center;
    padding: 0 24px;
    z-index: 9999;
  }

  .main-header{
    display: none; /* إخفاء هيدر الهاتف */
  }

  .desktop-left{
    flex: 0 0 auto;
  }

  .desktop-center{
    flex: 1;
    display: flex;
    justify-content: center;
  }

  .desktop-search{
    width: 420px;
    position: relative;
  }

  .desktop-right{
    display: flex;
    align-items: center;
    gap: 18px;
  }

  .header-link{
    text-decoration: none;
    font-weight: 600;
    color: var(--primary-color);
    font-size: 16px;
  }

  .header-link:hover{
    color: var(--secondary-color);
  }
}

/* ===== الهاتف ===== */
@media (max-width: 991px){
  .desktop-header{
    display: none;
  }
}

  /* ===== قسم البطل ===== */
  .hero-section {
    margin-top: 70px;
    background: linear-gradient(135deg, #f6ffee 0%, #efffdb 100%);
    padding: 50px 20px 25px;
    text-align: center;
    position: relative;
    overflow: hidden;
    font-family: 'Cairo', sans-serif;
  }

  @media (max-width: 991px){
.hero-section {
  margin-top: 110px;
}
}


  .hero-content {
    max-width: 750px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }

  .hero-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.3;
  }

  .hero-subtitle {
    font-size: 1.2rem;
    color: #444;
    margin-bottom: 20px;
  }

  .changing-word {
    display: inline-block;
    font-weight: bold;
    position: relative;
    color: var(--secondary-color);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  /* زر الدعوة للعمل */
  .cta-button {
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    padding: 14px 36px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(26, 35, 126, 0.3);
  }

  .cta-button:hover {
    background-color: #303f9f;
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(26, 35, 126, 0.4);
  }

  /* أشكال خلفية متحركة */
  .floating-shapes {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
  }

  .shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
  }

  .shape-1 {
    width: 160px;
    height: 160px;
    background-color: #1a237e;
    top: 10%;
    left: 10%;
    animation: float 14s infinite ease-in-out;
  }

  .shape-2 {
    width: 100px;
    height: 100px;
    background-color: #3949ab;
    bottom: 15%;
    right: 15%;
    animation: float 12s infinite ease-in-out reverse;
  }

  .shape-3 {
    width: 80px;
    height: 80px;
    background-color: #5c6bc0;
    top: 55%;
    right: 20%;
    animation: float 18s infinite ease-in-out;
  }

  @keyframes float {
    0%, 100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-25px) rotate(10deg);
    }
  }

  /* التصميم المتجاوب */
  @media (max-width: 768px) {
    .hero-title {
      font-size: 2.2rem;
    }
    .hero-subtitle {
      font-size: 1rem;
    }
  }

  @media (max-width: 480px) {
    .hero-title {
      font-size: 1.8rem;
    }
  }


  #preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  .loader svg {
    width: 160px;
    height: 160px;
    stroke: #4d8633;
    stroke-width: 10;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .loader path {
    stroke-dasharray: 4000;
    stroke-dashoffset: 4000;
    animation: draw 1.5s ease-in-out forwards;
  }

  @keyframes draw {
    to {
      stroke-dashoffset: 0;
    }
  }

  /* لمسة أنيقة في النهاية */
  .loader svg {
    animation: appear 2s ease-in-out forwards;
  }

  @keyframes appear {
    0% { opacity: 0.6; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
  }

.discount-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #eb0606;
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
  
    z-index: 1;
}

.card {
    position: relative;
}

.main-title {
  margin: 0px auto;
  margin-bottom: 40px;
  width: fit-content;
  font-size: 36px;
  font-weight: bold;
  color: #222;
  position: relative;
  padding-bottom: 10px;
  text-align: center;
}

.main-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 140%;
  height: 4px;
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
/* shimmer effect */
.shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 2.2s infinite linear;
    border-radius: 6px;
}

.shimmer-card {
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }

}

.step-icon {
    background: linear-gradient(45deg, var(--secondary-color), var(--primary-color));
}
.step {
  border-right: 4px solid var(--secondary-color);
}
@media (max-width: 600px) {
.step {
    border-bottom: 4px solid var(--secondary-color);
  border-right: none;

}
}
.steps-container {
  box-shadow: 0 4px 8px var(--secondary-color);
}
.main-title {
  color: var(--primary-color);
}
.pr1 {
  font-weight: bold;
color: var(--primary-color);
  display: inline-block;


}

  .btnOrd {
    display: block;
    width: 70%;
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
    color: white;
    border: none;
    padding: 5px 0;
    margin-top: 12px;
    margin: auto;
    margin-bottom: 5px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.btnOrd:hover {
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
.btnOrd:active {
    transform: scale(0.97);
}



/* ===== العنوان ===== */
.section-title {
  text-align: center;
  margin: 2rem 0;
  font-size: 2rem;
  color: var(--primary-color);
  position: relative;
  padding-bottom: 1rem;
  font-weight: 800;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  border-radius: 10px;
}

.section-title i {
  margin-right: 10px;
  color: var(--secondary-color);
}

/* ===== الحاوية ===== */
.categories-container {
  position: relative;
  max-width: 1280px;
  margin: 1rem auto;
  padding: 0 5px;
}

.categories-slider {
  display: flex;
  overflow-x: auto;
  overflow-y: visible; /* مهم */
  scroll-behavior: smooth;
  gap: 1.3rem;
  margin-top: -15px;
  padding: 1rem 0.5rem 0.4rem; /* فراغ من الأعلى */
}


.categories-slider::-webkit-scrollbar {
  display: none;
}

/* ===== الكارت ===== */
.category-card {
  flex: 0 0 150px;
  width: 150px;
  text-align: center;
  cursor: pointer;
  scroll-snap-align: start;
  transition: var(--transition);
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
}

/* دائرة الصورة (كبيرة وواضحة) */
.category-card .image-container {
  width: 120px;
  height: 120px;
  margin: auto;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
  transition: var(--transition);
}

/* الصورة */
.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

/* اسم التصنيف أسفل الدائرة */
.category-card p {
  margin-top: 10px;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1.25;
  word-break: break-word;
  font-size: clamp(12px, 1.2vw, 15px);
  transition: 0.3s;
}

/* ===== Hover احترافي ===== */
.category-card:hover .image-container {
  transform: translateY(-8px) scale(1.08);
  box-shadow: 0 16px 40px rgba(0,0,0,0.28);
}

.category-card:hover img {
  transform: scale(1.1);
}

.category-card:hover p {
  color: var(--secondary-color);
  transform: translateY(-3px);
}

/* ===== أزرار السلايدر ===== */
.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.432);
  border: none;
  box-shadow: 0 5px 15px rgba(0,0,0,0.25);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--primary-color);
  z-index: 10;
  transition: var(--transition);
}

.slider-nav:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-50%) scale(1.12);
}

.slider-nav.prev { left: 5px; }
.slider-nav.next { right: 5px; }

.slider-nav.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ===== انيميشن الدخول ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.category-card:nth-child(1) { animation-delay: 0.1s; }
.category-card:nth-child(2) { animation-delay: 0.2s; }
.category-card:nth-child(3) { animation-delay: 0.3s; }
.category-card:nth-child(4) { animation-delay: 0.4s; }
.category-card:nth-child(5) { animation-delay: 0.5s; }
.category-card:nth-child(6) { animation-delay: 0.6s; }
.category-card:nth-child(7) { animation-delay: 0.7s; }
.category-card:nth-child(8) { animation-delay: 0.8s; }

/* ===== تابلت ===== */
@media (max-width:1024px){
  .category-card{
    flex: 0 0 130px;
    width:130px;
  }

  .category-card .image-container{
    width:105px;
    height:105px;
  }
}

/* ===== هاتف ===== */
@media (max-width:768px){
  .category-card{
    flex: 0 0 120px;
    width:120px;
  }

  .category-card .image-container{
    width:95px;
    height:95px;
  }
}

/* ===== هاتف صغير ===== */
@media (max-width:480px){
  .category-card{
    flex: 0 0 95px;
    width:105px;
  }

  .category-card .image-container{
    width:110px;
    height:110px;
  }

  .category-card p{
    font-size: clamp(13px, 3vw, 13px);
  }
}

        /* تأثير Shimmer المحسن مع البوردر الأبيض */
        .shimmerct {
            position: relative;
            overflow: hidden;
            background: #f8f9fa;
        }
        
        .shimmerct::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: linear-gradient(
                90deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.6) 50%,
                rgba(255, 255, 255, 0) 100%
            );
            animation: shimmerEffect 2s infinite;
            transform: translateX(-100%);
            z-index: 1;
        }
        
        @keyframes shimmerEffect {
            100% {
                transform: translateX(100%);
            }
        }
        
        .shimmerct .shimmer {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: shimmerBackground 2s infinite;
            border-radius: 8px;
        }
        
        @keyframes shimmerBackground {
            0% {
                background-position: 200% 0;
            }
            100% {
                background-position: -200% 0;
            }
        }
        
        .shimmerct .image-container.shimmer {
            background: none !important;
            position: relative;
            width: 100px;
            height: 100px;
            margin: 0 auto 1.2rem;
        }
        
        .shimmerct .image-container.shimmer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border: 3px solid white;
            border-radius: 50%;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            z-index: 2;
        }
        
        .shimmerct .image-container.shimmer div {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: #e0e0e0;
            animation: pulse 1.5s infinite ease-in-out;
        }
        
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.7;
            }
        }

        .loadMoreBtn {
background: linear-gradient(45deg, var(--secondary-color), var(--primary-color));
        }


  .floating-contact{
    position:fixed;
    bottom:15px;
    left:15px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    z-index:1000;
}

/* الأزرار المخفية */
.contact-btn{
    width:50px;
    height:50px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:22px;
    text-decoration:none;
    transform:scale(0);
    opacity:0;
    transition:0.3s;
}

/* واتساب */
.whatsapp-btn{
    background:#25D366;
}

/* اتصال */
.phone-btn{
    background:#054297;
}

/* الزر الرئيسي */
.main-contact-btn{
    width:55px;
    height:55px;
    border-radius:50%;
    border:none;
    background:linear-gradient(45deg,var(--secondary-color),var(--primary-color));
    color:#fff;
    font-size:22px;
    cursor:pointer;
    box-shadow:0 5px 15px rgba(0,0,0,0.3);
}

/* عند الفتح */
.floating-contact.active .contact-btn{
    transform:scale(1);
    opacity:1;
}
.fa-whatsapp {
  color: white;
}

  /* التصميم العام */
  footer {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    padding: 40px 0 20px;
    font-family:"El Messiri",sans-serif;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
  }
  
  .footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
  }
  
  /* روابط التواصل الاجتماعي */
  .social-links {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 30px;
  }
  
  .social-links a {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    transition: all 0.3s ease;
  }
  
  .social-links a:hover {
    background: #3498db;
    transform: translateY(-3px);
  }
  
  /* روابط الموقع */
  .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
    padding: 0 15px;
  }
  
  .footer-link {
    color: #ecf0f1;
    text-decoration: none;
    font-size: 16px;
    position: relative;
    padding: 5px 0;
  }
  
  .footer-link:hover {
    color: #f1c40f;
  }
  
  .footer-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #f1c40f;
    transition: width 0.3s ease;
  }
  
  .footer-link:hover::after {
    width: 100%;
  }
  
  /* قسم حقوق النشر */
  .copyright-section {
    margin-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
  }
  
  .copyright-text {
    margin: 0;
    color: #bdc3c7;
    font-size: 14px;
  }
  
  #storeName {
    color: #f1c40f;
    font-weight: bold;
  }
  
  .payment-methods {
    margin-top: 10px;
    color: #95a5a6;
    font-size: 13px;
  }
  
  /* التجاوب مع الأجهزة المختلفة */
  @media (max-width: 768px) {
    .footer-links {
      flex-direction: column;
      gap: 15px;
    }
    
    .social-links {
      gap: 15px;
    }
    
    .social-links a {
      width: 40px;
      height: 40px;
      font-size: 16px;
    }
  }

  .actions {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 0 5px;
  margin-bottom: 5px;
}

.btnOrd, .btnCart {
  padding: 5px 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'El Messiri', sans-serif;
}

.btnOrd {
  background: linear-gradient(45deg, var(--secondary-color), var(--primary-color));
  color: white;
  margin-bottom: 0;
}

.btnCart {
  background: #f1f1f1;
  font-size: 14px;
  width: 44px;
}

.btnCart {
  background: #f1f1f1;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #333;
}

.btnCart.added {
  background: #28a745; /* أخضر */
  color: #fff;         /* الأيقونة باللون الأبيض */
}

.phone-icon {
     font-size: 24px;
    position: relative;
    z-index: 999;
    left: 12px;
    top: 6px;
}

  .call-popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
}

/* عند الفتح */
.call-popup.active{
  display:flex;
}

/* صندوق النافذة */
.call-popup-box{
  background:#fff;
  padding:28px 25px;
  border-radius:18px;
  width:280px;
  text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,0.25);
  animation:popupFade 0.35s ease;
}

/* أيقونة الهاتف */
.call-popup-icon{
  width:60px;
  height:60px;
  background:linear-gradient(45deg,var(--secondary-color),var(--primary-color));
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:auto;
  margin-bottom:12px;
  color:#fff;
  font-size:24px;
  box-shadow:0 5px 20px rgba(0,0,0,0.2);
}

/* العنوان */
.call-popup-box h3{
  font-size:18px;
  margin-bottom:15px;
  color:var(--primary-color);
}

/* أزرار الأرقام */
.call-number{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:10px 0;
  padding:12px;
  background:#f3f5ff;
  border-radius:10px;
  color:var(--primary-color);
  font-weight:700;
  text-decoration:none;
  transition:0.25s;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}


.call-number:hover{
  background:linear-gradient(45deg,var(--secondary-color),var(--primary-color));
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

/* زر الإغلاق */
.close-call-popup{
  margin-top:14px;
  border:none;
  padding:7px 16px;
  border-radius:8px;
  background:#eee;
  cursor:pointer;
  font-weight:600;
  transition:0.2s;
}

.close-call-popup:hover{
  background:#ddd;
}

/* حركة الدخول */
@keyframes popupFade{
  from{
    transform:scale(0.85);
    opacity:0;
  }
  to{
    transform:scale(1);
    opacity:1;
  }
}



.menu-links {
  display: flex;
  flex-direction: column;
}

/* عربي */
body.rtl .menu-links {
  direction: rtl;
  text-align: right;
}

/* فرنسي */
body.ltr .menu-links {
  direction: ltr;
  text-align: left;
}

body.ltr .step {
  display: flex;
  border-right:none}

body.ltr .step-icon {
  order: 2 !important;
}


body.ltr .step-text {
  order: 1 !important;
  margin-left: 10px;
}

/* عربي */
body.rtl .step-text {
  text-align: right;
  align-items: flex-start;
}

/* فرنسي */
body.ltr .step-text {
  text-align: left;
  align-items: flex-end;
}

/* فرنسي */
body.ltr .cards {
  direction: ltr;
}

/* فرنسي */
body.ltr #categorySlider {
  direction: ltr;
}

body.ltr #cart-items:empty::before {
  content: "Le panier est vide";
  display: block;
  text-align: center;
  padding: 40px 20px;
  color: #a4b0be;
  font-style: italic;
}