/* ==========================================================================
   Workflow Cards — صفحة "خدماتنا مقترح2" (post 4439)
   منقول عن مكوّن 21st.dev — ServiceCarousel / ServiceCard
   الثوابت المنقولة حرفياً:
     rounded-3xl = 24px · gap = 16px (pl-4) · max-w-6xl = 1152px · px-4 = 16px
     cardVariants: hidden {opacity:0, y:50} → visible {opacity:1, y:0}
     duration 0.5s · delay = index * 0.1s · staggerChildren 0.1
     useInView: once + amount 0.2
     طبقة التدرج العلوية: bg-gradient-to-t from-background/20 to-transparent
   ========================================================================== */

.cf-root .cf-wf-wrap{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:40px !important;
  width:100% !important;
  max-width:1152px !important;      /* max-w-6xl */
  height:auto !important;
  margin:96px auto 0 !important;
  padding:0 16px !important;        /* px-4 */
  z-index:6;
}

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

/* ---------- الشبكة ---------- */
.cf-root .cf-wf-grid{
  display:grid !important;
  grid-template-columns:repeat(6, minmax(0, 1fr));   /* ست بطاقات في سطر */
  gap:16px !important;                               /* pl-4 */
  width:100% !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  align-items:stretch !important;
}

/* ---------- البطاقة ---------- */
.cf-root .cf-wf-card{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:14px !important;
  width:100% !important;
  height:225px !important;
  min-height:0 !important;
  padding:22px 14px !important;
  border-radius:24px !important;    /* rounded-3xl */
  overflow:hidden !important;
  border:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);   /* مطابق لإطار بطاقات الأسئلة */
  text-align:center;
  direction:rtl;

  /* دخول Scroll Reveal — hidden {opacity:0, y:50} */
  opacity:0;
  transform:translateY(50px);
  transition:opacity .5s ease, transform .5s ease;
  will-change:transform,opacity;
}
.cf-root .cf-wf-card.is-shown{
  opacity:1;
  transform:translateY(0);
}

/* تدرّج الخلفية — bg-gradient-to-r متبادل ضمن الهوية */
/* سلّم الستة — البطاقة 1 (أقصى اليمين) الأفتح، ثم تدرّج نحو الأغمق */
.cf-root .cf-wf-card{background-image:none !important;}
.cf-root .cf-wf-card:nth-child(1){background-color:rgba(246,246,246,.75) !important;}
.cf-root .cf-wf-card:nth-child(2){background-color:rgba(245,224,221,.75) !important;}
.cf-root .cf-wf-card:nth-child(3){background-color:rgba(243,200,194,.75) !important;}
.cf-root .cf-wf-card:nth-child(4){background-color:rgba(242,174,167,.75) !important;}
.cf-root .cf-wf-card:nth-child(5){background-color:rgba(239,145,140,.75) !important;}
.cf-root .cf-wf-card:nth-child(6){background-color:rgba(238,114,115,.75) !important;}


/* طبقة القراءة — from-background/20 to-transparent */
.cf-root .cf-wf-card::after{
  content:"";
  position:absolute;inset:0;
  background-image:linear-gradient(to top, rgba(61,20,46,.06), transparent);
  pointer-events:none;
  z-index:0;
}

/* ---------- الأيقونة ---------- */
.cf-root .cf-wf-ico{
  position:relative !important;
  z-index:1;
  flex:0 0 auto !important;
  width:60px !important;height:60px !important;   /* الأصل h-12 w-12 = 48 */
  min-height:0 !important;
  margin:0 !important;padding:0 !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  color:#3D142E;
}
.cf-root .cf-wf-ico svg{width:60px;height:60px;display:block;}

/* ---------- الرقم ---------- */
.cf-root .cf-wf-num{
  position:relative;z-index:1;
  /* الطباعة واللون انتقلا إلى الصنف العام «أرقام بطاقات سير العمل» */
  margin:0 !important;padding:0 !important;
  direction:ltr;
}

/* ---------- العنوان ---------- */
.cf-root .cf-wf-t{
  position:relative;z-index:1;
  /* الطباعة واللون انتقلا إلى الصنف العام «عناوين بطاقات سير العمل» */
  letter-spacing:normal !important;
  margin:0 !important;padding:0 !important;
  max-width:100%;
  overflow-wrap:break-word;
}

/* ---------- تابلت ---------- */
/* ---------- الخط اللامع المتحرك على الحواف ---------- */
@property --cf-wf-a{ syntax:'<angle>'; initial-value:0deg; inherits:false; }

.cf-root .cf-wf-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1.5px;                 /* سمك الخط */
  background:conic-gradient(from var(--cf-wf-a),
      transparent 0turn,
      transparent .70turn,
      rgba(255,255,255,0) .72turn,
      rgba(255,255,255,.95) .795turn,
      #3D142E .815turn,
      rgba(255,255,255,.95) .835turn,
      rgba(255,255,255,0) .91turn,
      transparent 1turn);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;
  pointer-events:none;
  z-index:2;
  animation:cf-wf-edge 8.4s linear infinite;
  animation-play-state:paused;
}
.cf-root .cf-wf-grid.is-live .cf-wf-card::before{animation-play-state:running;}

/* التتابع: كل بطاقة تبدأ حيث تنتهي سابقتها (1.4s × 6 = 8.4s) */
.cf-root .cf-wf-card:nth-child(1)::before{animation-delay:0s;}
.cf-root .cf-wf-card:nth-child(2)::before{animation-delay:1.4s;}
.cf-root .cf-wf-card:nth-child(3)::before{animation-delay:2.8s;}
.cf-root .cf-wf-card:nth-child(4)::before{animation-delay:4.2s;}
.cf-root .cf-wf-card:nth-child(5)::before{animation-delay:5.6s;}
.cf-root .cf-wf-card:nth-child(6)::before{animation-delay:7s;}

@keyframes cf-wf-edge{
  0%    { --cf-wf-a:0deg;   opacity:0; }
  1.5%  { opacity:1; }
  15.2% { opacity:1; }
  16.7% { --cf-wf-a:360deg; opacity:0; }
  100%  { --cf-wf-a:360deg; opacity:0; }
}

@media (max-width:1024px){
  .cf-root .cf-wf-wrap{margin-top:80px !important;gap:32px !important;}
  .cf-root .cf-wf-grid{grid-template-columns:repeat(3, minmax(0, 1fr));gap:14px !important;}
  .cf-root .cf-wf-card{height:186px !important;padding:16px 12px !important;gap:10px !important;}
  .cf-root .cf-wf-ico{width:48px !important;height:48px !important;}
  .cf-root .cf-wf-ico svg{width:48px;height:48px;}
}

/* ---------- جوال: ثلاث بطاقات في الصف ---------- */
@media (max-width:767px){
  .cf-root .cf-wf-wrap{margin-top:64px !important;gap:24px !important;padding:0 8px !important;}
  .cf-root .cf-wf-grid{grid-template-columns:repeat(3, minmax(0, 1fr));gap:8px !important;}
  .cf-root .cf-wf-card{
    height:auto !important;
    min-height:126px !important;
    padding:12px 6px !important;
    gap:8px !important;
    border-radius:16px !important;
  }
  .cf-root .cf-wf-card::before{padding:1px;}
  .cf-root .cf-wf-ico{width:34px !important;height:34px !important;}
  .cf-root .cf-wf-ico svg{width:34px;height:34px;}
}

@media (max-width:389px){
  .cf-root .cf-wf-grid{gap:6px !important;}
  .cf-root .cf-wf-card{padding:9px 5px !important;min-height:110px !important;}
  .cf-root .cf-wf-ico{width:30px !important;height:30px !important;}
  .cf-root .cf-wf-ico svg{width:30px;height:30px;}
}

/* ---------- تقليل الحركة ---------- */
@media (prefers-reduced-motion:reduce){
  .cf-root .cf-wf-card{transition:none !important;opacity:1 !important;transform:none !important;}
  .cf-root .cf-wf-card::before{animation:none !important;opacity:0 !important;}
}