/* ==========================================================================
   Gooey Search Bar — صفحة "خدماتنا مقترح2" (post 4439)
   منقول عن مكوّن 21st.dev — GooeySearchBar
   كل الثوابت الهندسية منقولة حرفياً من variants في الأصل:
     buttonVariants  step1 width:100      step2 width:180  x:-30
     iconVariants    hidden x:-50 op:0    visible x:16 op:1
     resultItem      initial y:0 scale:.3 blur(10px)
                     animate  y:(i+1)*50 scale:1 blur(0)
                     exit     y:-4 scale:.8
   ========================================================================== */

/* ---------- الغلاف ---------- */
.cf-root .cf-gs-wrap{
  position:relative !important;
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
  width:100% !important;
  height:44px !important;
  margin:0 0 34px !important;
  padding:0 !important;
  z-index:25;
  --cf-gs-offset:46px;  /* موضع أول نتيجة = ارتفاع الشريط 44 + 2 */
  --cf-gs-pitch:40px;   /* الخطوة = ارتفاع النتيجة 38 + 2 — الأصل 50px */
  /* الخطوة بين النتائج — الأصل 50px */
  --cf-gs-shift:0px;  /* مطابق لإزاحة الزر عند الفتح */
}

/* الحاوية المصدر: مخفية على الواجهة، ظاهرة داخل المحرر */
body:not(.elementor-editor-active) .cf-root .cf-gs-src{display:none !important;}
.elementor-editor-active .cf-root .cf-gs-src{
  position:relative;width:100%;max-width:600px;margin:12px auto 0;padding:12px;
  border:1px dashed rgba(255,255,255,.35);border-radius:12px;
}

.cf-root .cf-gs-mount{
  position:absolute !important;
  top:0 !important;left:50% !important;
  width:0 !important;height:0 !important;
  margin:0 !important;padding:0 !important;
  overflow:visible !important;
}

/* ---------- الحاوية ذات فلتر الصمغ ---------- */
.cf-root .cf-gs-inner{
  position:absolute;
  /* يُرسى على حافة cf-gs-mount لا على منتصفها — إليمنتور يفرض حشواً 30px على .e-con */
  top:0;left:0;
  width:320px;
  height:44px;
  transform:translateX(-50%);
  transition:height .35s cubic-bezier(.34,1,.64,1);
}
/* الصمغ محصور في الشريط والأيقونة فقط — النتائج خارجه لتبقى حوافها حادة */
.cf-root .cf-gs-goo{
  position:absolute;
  top:0;left:0;
  width:100%;
  height:44px;
  z-index:3;
  filter:url(#cf-goo-effect);
}
.cf-root .cf-gs-wrap.no-goo .cf-gs-goo{filter:none;}

/* الفلتر نفسه محقون من السكربت — يبقى خارج التدفق */
.cf-root .cf-gs-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;}

/* ---------- الزر ---------- */
.cf-root .cf-gs-btn{
  position:absolute;
  top:0;left:50%;
  width:100px;                 /* step1 — الأصل */
  height:44px;
  margin-left:-50px;           /* توسيط عرض 100 */
  border:0;
  border-radius:22px;
  background:#551C3D;
  color:#F5E1E0;
  font-family:'Cairo',sans-serif;
  font-size:15px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;
  transform:translateX(0) scale(1);
  transition:width .75s cubic-bezier(.34,1.30,.64,1),
             margin-left .75s cubic-bezier(.34,1.30,.64,1),
             transform .35s cubic-bezier(.34,1.30,.64,1);
}
.cf-root .cf-gs-btn:hover{transform:scale(1.05);}
.cf-root .cf-gs-wrap.is-open .cf-gs-btn:hover{transform:translateX(0) scale(1);}
.cf-root .cf-gs-btn:active{transform:scale(.95);}
.cf-root .cf-gs-btn:focus-visible{outline:2px solid #EC7676;outline-offset:3px;}

/* step2 — width:180 و x:-30 كما في buttonVariants */
.cf-root .cf-gs-wrap.is-open .cf-gs-btn{
  width:180px;
  margin-left:-90px;
  transform:translateX(0);
  cursor:default;
}

.cf-root .cf-gs-btn-text{
  font-family:'Cairo',sans-serif;
  font-size:15px;font-weight:600;color:#F5E1E0;
  letter-spacing:normal;line-height:1;
  pointer-events:none;
}

.cf-root .cf-gs-input{
  width:100%;height:100%;
  background:transparent;border:0;outline:0;
  padding:0 18px;
  font-family:'Cairo',sans-serif;
  font-size:15px;font-weight:500;
  color:#F5E1E0;
  text-align:right;
  direction:rtl;
}
.cf-root .cf-gs-input::placeholder{color:#B1A4AB;opacity:1;}

/* ---------- الأيقونة المنفصلة (separate-element) ---------- */
.cf-root .cf-gs-sep{
  position:absolute;
  top:0;left:50%;
  width:44px;height:44px;   /* مطابق لارتفاع الشريط */
  margin-left:-22px;
  border-radius:50%;
  background:#EB7776;
  color:#F5E1E0;
  display:flex;align-items:center;justify-content:center;
  z-index:2;
  opacity:0;
  transform:translateX(-60px);   /* hidden — الأصل */
  transition:transform .85s cubic-bezier(.34,1.30,.64,1) .1s,
             opacity   .85s cubic-bezier(.34,1.30,.64,1) .1s;
}
.cf-root .cf-gs-wrap.is-open .cf-gs-sep{
  opacity:1;
  transform:translateX(-126px);  /* visible — الأصل */
}
.cf-root .cf-gs-sep svg{display:block;width:15px;height:15px;fill:currentColor;}
.cf-root .cf-gs-sep .cf-gs-spin{width:18px;height:18px;animation:cf-gs-rot 1s linear infinite;}
@keyframes cf-gs-rot{to{transform:rotate(360deg);}}

/* أيقونة البحث الداخلية — مطابقة لـ SearchIcon */
.cf-root .cf-gs-sep .cf-gs-mag{
  opacity:0;transform:scale(.8) translateX(-4px);filter:blur(5px);
  transition:opacity 1s cubic-bezier(.34,1.30,.64,1) .1s,
             transform 1s cubic-bezier(.34,1.30,.64,1) .1s,
             filter 1s cubic-bezier(.34,1.30,.64,1) .1s;
}
.cf-root .cf-gs-wrap.is-open .cf-gs-sep .cf-gs-mag{
  opacity:1;transform:scale(1) translateX(0);filter:blur(0px);
}
.cf-root .cf-gs-wrap.no-goo .cf-gs-sep .cf-gs-mag{filter:none;}

/* ---------- النتائج ---------- */
.cf-root .cf-gs-results{
  position:absolute;
  top:0;left:50%;
  width:180px;
  margin-left:-90px;    /* محاذاة تامة مع الشريط المتمركز */
  z-index:1;
  transform:scale(1);
  opacity:1;
  transition:transform .5s ease 1.25s, opacity .5s ease 1.25s;
}
.cf-root .cf-gs-wrap.no-goo .cf-gs-results{transition-delay:.5s;}
.cf-root .cf-gs-results.is-gone{transform:scale(0);opacity:0;}

.cf-root .cf-gs-result{
  position:absolute;
  top:0;left:10px;                 /* 10px داخلياً من كل جهة */
  width:160px;height:38px;         /* الشريط 180×44 */
  border-radius:19px;
  background:#EB7776;
  color:#F5E1E0;
  display:flex;align-items:center;
  padding:0 14px;
  gap:8px;
  direction:rtl;
  cursor:pointer;
  /* initial — الأصل */
  transform:translateY(0) scale(.3);
  filter:blur(10px);
  transition:transform .75s cubic-bezier(.34,1.56,.64,1),
             filter .75s ease-in-out;
}
.cf-root .cf-gs-result.is-in{
  transform:translateY(var(--y)) scale(1);   /* animate — y:(i+1)*50 */
  filter:blur(0px);
}
.cf-root .cf-gs-result.is-out{
  transform:translateY(-4px) scale(.8);
  color:#000000;                              /* exit — الأصل */
}
.cf-root .cf-gs-wrap.no-goo .cf-gs-result{filter:none;}
.cf-root .cf-gs-wrap.no-goo .cf-gs-result.is-out{transform:translateY(0) scale(.8);}
.cf-root .cf-gs-result:focus-visible{outline:2px solid #EC7676;outline-offset:2px;}

.cf-root .cf-gs-r-title{
  display:flex;align-items:center;gap:8px;
  font-family:'Cairo',sans-serif;
  font-size:14px;font-weight:500;
  color:inherit;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cf-root .cf-gs-r-title span{opacity:0;transition:opacity .3s ease;}
.cf-root .cf-gs-result.is-in .cf-gs-r-title span{opacity:1;}
.cf-root .cf-gs-info{
  flex:0 0 14px;width:14px;height:14px;display:block;
  fill:currentColor;opacity:0;transition:opacity .3s ease;
}
.cf-root .cf-gs-result.is-in .cf-gs-info{opacity:1;}

.cf-root .cf-gs-empty{
  position:absolute;top:0;left:10px;
  width:160px;height:38px;border-radius:19px;
  background:#EB7776;color:#F5E1E0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Cairo',sans-serif;font-size:13px;
  transform:translateY(var(--cf-gs-offset,46px)) scale(1);
}

/* ---------- التجاوب ---------- */
/* ---------- \u0633\u0637\u062d \u0627\u0644\u0645\u0643\u062a\u0628 \u0641\u0642\u0637: \u0634\u0631\u064a\u0637 \u0648\u0623\u064a\u0642\u0648\u0646\u0629 \u0623\u0643\u0628\u0631 \u2014 \u0627\u0644\u0646\u062a\u0627\u0626\u062c \u0628\u0645\u0642\u0627\u0633\u0647\u0627 ---------- */
@media (min-width:1025px){
  .cf-root .cf-gs-wrap{height:54px !important;--cf-gs-offset:56px;}
  .cf-root .cf-gs-inner{width:380px;height:54px;}
  .cf-root .cf-gs-goo{height:54px;}
  .cf-root .cf-gs-btn{width:120px;height:54px;margin-left:-60px;border-radius:27px;font-size:17px;}
  .cf-root .cf-gs-wrap.is-open .cf-gs-btn{width:220px;margin-left:-110px;transform:translateX(0);}
  .cf-root .cf-gs-wrap.is-open .cf-gs-btn:hover{transform:translateX(0) scale(1);}
  .cf-root .cf-gs-btn-text{font-size:17px;}
  .cf-root .cf-gs-input{font-size:17px;padding:0 22px;}
  .cf-root .cf-gs-sep{width:54px;height:54px;margin-left:-27px;transform:translateX(-75px);}
  .cf-root .cf-gs-wrap.is-open .cf-gs-sep{transform:translateX(-141px);}
  .cf-root .cf-gs-sep svg{width:18px;height:18px;flex:0 0 18px;}
  .cf-root .cf-gs-sep .cf-gs-spin{width:22px;height:22px;flex:0 0 22px;}
  .cf-root .cf-gs-results{width:220px;margin-left:-110px;}
  .cf-root .cf-gs-result,
  .cf-root .cf-gs-empty{left:30px;}
}

@media (max-width:1024px){
  .cf-root .cf-gs-wrap{margin-bottom:30px !important;}
}
@media (max-width:767px){
  .cf-root .cf-gs-wrap{height:40px !important;margin-bottom:24px !important;--cf-gs-pitch:36px;--cf-gs-offset:42px;--cf-gs-shift:0px;}
  .cf-root .cf-gs-inner{width:260px;height:40px;}
  .cf-root .cf-gs-goo{height:40px;}
  .cf-root .cf-gs-btn{height:40px;border-radius:20px;font-size:14px;width:92px;margin-left:-46px;}
  .cf-root .cf-gs-wrap.is-open .cf-gs-btn{width:164px;margin-left:-82px;transform:translateX(0);}
  .cf-root .cf-gs-wrap.is-open .cf-gs-btn:hover{transform:translateX(0) scale(1);}
  .cf-root .cf-gs-btn-text{font-size:14px;}
  .cf-root .cf-gs-input{font-size:14px;padding:0 14px;}
  .cf-root .cf-gs-sep{width:40px;height:40px;margin-left:-20px;top:0;transform:translateX(-40px);}
  .cf-root .cf-gs-wrap.is-open .cf-gs-sep{transform:translateX(-106px);}
  .cf-root .cf-gs-results{width:164px;}
  .cf-root .cf-gs-result,
  .cf-root .cf-gs-empty{width:146px;left:9px;}
  .cf-root .cf-gs-results{margin-left:-82px;}    /* محاذاة مع الشريط المتمركز */
  .cf-root .cf-gs-result,
  .cf-root .cf-gs-empty{height:34px;border-radius:17px;padding:0 12px;}
  .cf-root .cf-gs-r-title{font-size:13px;}
}

/* ---------- تقليل الحركة ---------- */
@media (prefers-reduced-motion:reduce){
  .cf-root .cf-gs-inner,
  .cf-root .cf-gs-btn,
  .cf-root .cf-gs-sep,
  .cf-root .cf-gs-sep .cf-gs-mag,
  .cf-root .cf-gs-results,
  .cf-root .cf-gs-result,
  .cf-root .cf-gs-r-title span,
  .cf-root .cf-gs-info{transition:none !important;}
  .cf-root .cf-gs-result{filter:none !important;}
  .cf-root .cf-gs-sep .cf-gs-spin{animation:none !important;}
}