/* ==========================================================================
   Bucket — صفحة "خدماتنا مقترح2" (post 4439)
   منقول عن مكوّن 21st.dev — Bucket
   الثوابت المنقولة حرفياً:
     حاوية 655×352 · aspect-ratio 655/352 · max-width 655px
     padding-bottom:65%  ·  رقاقة 240px · حشو 8px · فجوة 8px
     دخول : y -100 (جوال -70) · opacity 0 · scale .8
     ظهور: y 0 · opacity 1 · scale 1.25 (جوال 1)
     خروج: y 130 (جوال 100) · scale .8 · مدة .8s
     المنحنى: cubic-bezier(.455,.03,.515,.955) · المدة .5s · الدوران 2000ms
   ========================================================================== */

.cf-root .cf-bk-wrap{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:92px !important;                 /* gap-4 موسّعة — الرقاقة تطفو فوق حافة المسرح */
  width:100% !important;
  height:auto !important;
  margin:120px 0 0 !important;   /* متنفّس للرقاقة التي تطفو فوق حافة المسرح */
  padding:0 !important;
  z-index:5;
}

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

.cf-root .cf-bk-mount{
  position:relative !important;
  width:100% !important;
  max-width:655px !important;
  height:auto !important;
  margin:0 auto !important;
  padding:0 !important;
  isolation:isolate;
}

.cf-root .cf-bk-title-s{margin:0 !important;padding:0 !important;max-width:100%;}

/* ---------- المسرح ---------- */
.cf-root .cf-bk-stage{
  position:relative;
  width:100%;
  max-width:655px;
  aspect-ratio:655 / 352;
  isolation:isolate;
  margin:0 auto;
}
/* ظل أرضي تحت الصندوق — يُرسم خلفه (z-index أدنى من واجهة الصندوق) */
.cf-root .cf-bk-stage::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-12px;
  width:60%;
  height:30px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,
      rgba(25,7,17,.62) 0%,
      rgba(25,7,17,.34) 42%,
      rgba(25,7,17,0) 70%);
  filter:blur(7px);
  pointer-events:none;
  z-index:1;
}

.cf-root .cf-bk-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.cf-root .cf-bk-svg--back{z-index:0;}
.cf-root .cf-bk-svg--front{z-index:20;pointer-events:none;overflow:hidden;transform:translate3d(0,0,0);}

/* ---------- طبقة الرقاقات ---------- */
.cf-root .cf-bk-layer{
  position:absolute;
  inset:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.cf-root .cf-bk-slot{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-bottom:65%;              /* الأصل */
}

/* ---------- الرقاقة ---------- */
.cf-root .cf-bk-chip{
  position:absolute;
  width:240px;                     /* w-[240px] */
  padding:8px;                     /* p-2 */
  display:flex;
  align-items:center;
  gap:8px;                         /* gap-2 */
  border-radius:9999px;            /* rounded-full */
  background:#FFFFFF;
  border:1px solid #F5E1E0;
  box-shadow:0 1px 2px rgba(85,28,61,.10);
  transform-origin:bottom;         /* origin-bottom */
  pointer-events:auto;
  direction:rtl;
  z-index:10;
  will-change:transform,opacity;

  --cf-bk-in-y:-100px;             /* initial y — ديسكتوب */
  --cf-bk-out-y:130px;             /* exit y  — ديسكتوب */
  --cf-bk-scale:1.25;              /* animate scale — ديسكتوب */

  opacity:0;
  transform:translateY(var(--cf-bk-in-y)) scale(.8);
  transition:transform .5s cubic-bezier(.455,.03,.515,.955),
             opacity   .5s cubic-bezier(.455,.03,.515,.955);
}
.cf-root .cf-bk-chip.is-in{
  opacity:1;
  transform:translateY(0) scale(var(--cf-bk-scale));
}
.cf-root .cf-bk-chip.is-out{
  opacity:1;
  transform:translateY(var(--cf-bk-out-y)) scale(.8);
  transition:transform .8s cubic-bezier(.455,.03,.515,.955),
             opacity   .8s cubic-bezier(.455,.03,.515,.955);
}

.cf-root .cf-bk-ico{
  flex:0 0 40px;                   /* size-10 */
  width:40px;height:40px;
  border-radius:50%;
  background:#F5E1E0;
  color:#EC7676;
  display:flex;align-items:center;justify-content:center;
}
.cf-root .cf-bk-ico svg{width:20px;height:20px;display:block;} /* size-5 */

.cf-root .cf-bk-txt{
  display:flex;flex-direction:column;gap:2px;                    /* gap-0.5 */
  min-width:0;text-align:right;
}
.cf-root .cf-bk-t{
  font-family:'Cairo',sans-serif !important;
  font-size:14px !important;font-weight:600 !important;          /* text-sm font-medium */
  line-height:1.15 !important;
  color:#551C3D !important;
  margin:0 !important;padding:0 !important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cf-root .cf-bk-d{
  font-family:'Cairo',sans-serif !important;
  font-size:12px !important;font-weight:400 !important;          /* text-xs */
  line-height:1.35 !important;
  color:rgba(85,28,61,.62) !important;
  margin:0 !important;padding:0 !important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* قائمة مقروءة لقارئ الشاشة فقط */
.cf-root .cf-bk-sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0;
}

/* ---------- التجاوب ---------- */
@media (max-width:767px){
  .cf-root .cf-bk-wrap{margin-top:72px !important;gap:50px !important;}
  .cf-root .cf-bk-stage{width:86%;}
  .cf-root .cf-bk-stage::after{bottom:-8px;height:20px;filter:blur(5px);}
  .cf-root .cf-bk-chip{
    --cf-bk-in-y:-70px;            /* isMobile — الأصل */
    --cf-bk-out-y:100px;
    --cf-bk-scale:1;
    width:158px;
    padding:5px;
    gap:5px;
  }
  .cf-root .cf-bk-ico{flex:0 0 26px;width:26px;height:26px;}
  .cf-root .cf-bk-ico svg{width:13px;height:13px;}
  .cf-root .cf-bk-t{font-size:11px !important;line-height:1.1 !important;}
  .cf-root .cf-bk-d{font-size:10px !important;line-height:1.25 !important;}
  .cf-root .cf-bk-txt{gap:1px;}
}

/* ---------- تقليل الحركة ---------- */
/* ---------- 320 و 375 فقط: رقاقة أصغر + مرسى أقرب لفم الصندوق ---------- */
@media (max-width:389px){
  /* padding-bottom:65% من الأصل يتجاوز ارتفاع المسرح هنا فترسو الرقاقة فوقه */
  .cf-root .cf-bk-slot{padding-bottom:calc(41.7% + 50px);   /* توسيط الرقاقة بين العنوان وفم الصندوق */}
  .cf-root .cf-bk-chip{
    --cf-bk-in-y:-40px;
    --cf-bk-out-y:70px;
    width:56%;              /* أضيق من الصندوق (63%) وقريب من الفتحة (48%) */
    padding:4px;
    gap:4px;
  }
  .cf-root .cf-bk-ico{flex:0 0 22px;width:22px;height:22px;}
  .cf-root .cf-bk-ico svg{width:11px;height:11px;}
  .cf-root .cf-bk-t{font-size:9px !important;line-height:1.1 !important;}
  .cf-root .cf-bk-d{font-size:8px !important;line-height:1.2 !important;}
  .cf-root .cf-bk-txt{gap:0;}
}

@media (prefers-reduced-motion:reduce){
  .cf-root .cf-bk-chip{transition:none !important;}
}