/* ECS — blocks
كتل الصفحات: الوظائف والعملاء والخدمات وكيف نعمل وعن ECS والمقالات.
هذا الملف جزء من نظام الأنماط: الترتيب في src/modules/setup.php
هو ترتيب التتالي، فلا يُعاد ترتيبه إلا بعلم. */
/* ============================================================
22 — DATA BLOCKS
الكتل التي تحمل المعلومة التشغيلية: مصفوفة المسؤولية،
جداول المواصفات، صفوف التسليمات. هذه ما يقرأه المشتري فعلًا.
============================================================ */
/* --- الجداول: معالجتان مختلفتان حسب عدد الأعمدة ---
assets/ecs.js يعدّ الأعمدة ويضيف is-matrix أو is-2col،
وينسخ عناوين الأعمدة إلى data-label لعرض الموبايل. --- */
/* ============ المشترك ============ */
.ecs-table table{
width:100%; border-collapse:separate; border-spacing:0;
font-family: var(--ecs-sans); font-size: var(--fs-sm);
}
/* شريط الملخّص فوق مصفوفة المسؤولية */
.ecs-tsum{
display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px;
}
.ecs-tsum__i{
display:inline-flex; align-items:baseline; gap:7px;
padding:9px 15px; font-size: var(--fs-xs); line-height:1;
background: var(--ecs-white); border:1px solid var(--ecs-line);
color: var(--ecs-muted);
}
.ecs-tsum__i b{ font-size: var(--ecs-lg); font-weight:600; color: var(--ecs-ink) }
.ecs-tsum__i i{ font-style:normal; font-weight:600; color: var(--ecs-ink) }
.ecs-tsum__i.is-a{ border-color: var(--ecs-hv); background: var(--ecs-hv-soft) }
.ecs-tsum__i.is-a b{ color: var(--ecs-hv-d) }
/* ============ 1) مصفوفة المسؤولية (3 أعمدة) ============ */
.ecs-table.is-matrix table{
background: var(--ecs-white); border:1px solid var(--ecs-line);
}
.ecs-table.is-matrix th{
position:sticky; top:0; z-index:2;
text-align:start; padding:15px 20px;
background: var(--ecs-ink); color:#fff;
font-size: var(--fs-xxs); font-weight:600; letter-spacing:.05em;
white-space:nowrap;
}
.ecs-table.is-matrix th.c{ text-align:center }
.ecs-table.is-matrix td{
padding:0 20px; height:54px; vertical-align:middle;
border-top:1px solid var(--ecs-line);
color: var(--ecs-body); line-height:1.5;
}
.ecs-table.is-matrix tbody tr:first-child td{ border-top:0 }
.ecs-table.is-matrix td:first-child{
font-weight:500; color: var(--ecs-ink);
}
/* تظليل خفيف لعمود ECS يفصل الطرفين بصريًا */
.ecs-table.is-matrix td.c:nth-child(2),
.ecs-table.is-matrix th.c:nth-child(2){ background: rgba(242,160,7,.05) }
.ecs-table.is-matrix th.c:nth-child(2){ background: var(--ecs-ink) }
.ecs-table.is-matrix td.c{ text-align:center; width:132px; padding:0 }
.ecs-table.is-matrix tbody tr{ transition: background var(--ecs-tr) }
.ecs-table.is-matrix tbody tr:hover{ background: var(--ecs-hv-soft) }
.ecs-table.is-matrix tbody tr:hover td.c:nth-child(2){ background:transparent }
/* العلامات */
.ecs-table .y,
.ecs-table .n{
display:inline-flex; align-items:center; justify-content:center;
width:28px; height:28px; font-size: var(--fs-sm); font-weight:700; flex:none;
transition: transform var(--ecs-tr);
}
.ecs-table .y{ background: var(--ecs-hv); color: var(--ecs-hv-ink) }
.ecs-table .n{
background:transparent; border:0; color:#6E767E; font-size: var(--ecs-lg);
}
.ecs-table.is-matrix tbody tr:hover .y{ transform:scale(1.14) }
/* ============ 2) بطاقات الالتزام (عمودان) ============ */
.ecs-table.is-2col table,
.ecs-table.is-2col tbody{ display:block; border:0; background:transparent }
.ecs-table.is-2col thead{ display:none }
.ecs-table.is-2col tbody{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
background: var(--ecs-line); border:1px solid var(--ecs-line);
}
.ecs-table.is-2col tr{
display:flex; flex-direction:column-reverse; justify-content:flex-end;
background: var(--ecs-white); padding:22px 22px 20px;
transition: background var(--ecs-tr);
position:relative;
}
.ecs-table.is-2col tr::before{
content:""; position:absolute; top:0; inset-inline-start:0;
width:0; height:3px; background: var(--ecs-hv);
transition: width .32s cubic-bezier(.22,.61,.36,1);
}
.ecs-table.is-2col tr:hover::before{ width:46px }
.ecs-table.is-2col td{
display:block; padding:0; border:0;
}
/* القيمة — تظهر أعلى البطاقة بفضل column-reverse */
.ecs-table.is-2col td:last-child{
font-family: var(--ecs-sans); font-size: var(--ecs-h4); font-weight:600;
line-height:1.15; color: var(--ecs-hv-d); margin-bottom:9px;
white-space:nowrap;
}
.ecs-table.is-2col td:first-child{
font-size: var(--fs-sm); line-height:1.6; color: var(--ecs-muted); font-weight:400;
}
@media (max-width: 1024px){
.ecs-table.is-2col tbody{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width: 767px){
.ecs-table.is-2col tbody{ grid-template-columns:1fr }
.ecs-table.is-2col tr{ padding:18px 18px 16px }
.ecs-table.is-2col td:last-child{ font-size: var(--ecs-h4) }
/* المصفوفة تتحول إلى بطاقات مكدّسة بدل التمرير الأفقي */
.ecs-table.is-matrix table,
.ecs-table.is-matrix tbody,
.ecs-table.is-matrix tr,
.ecs-table.is-matrix td{ display:block; width:auto }
.ecs-table.is-matrix thead{ display:none }
.ecs-table.is-matrix table{ border:0; background:transparent }
.ecs-table.is-matrix tr{
background: var(--ecs-white); border:1px solid var(--ecs-line);
margin-bottom:10px; padding:14px 16px;
}
.ecs-table.is-matrix td{ border:0; height:auto; padding:0 }
.ecs-table.is-matrix td:first-child{
font-size: var(--fs-sm); margin-bottom:10px; padding-bottom:10px;
border-bottom:1px dashed var(--ecs-line);
}
.ecs-table.is-matrix td.c{
display:flex; align-items:center; justify-content:space-between;
width:auto; padding:5px 0; text-align:start;
}
.ecs-table.is-matrix td.c::before{
content: attr(data-label);
font-size: var(--fs-xs); font-weight:600; color: var(--ecs-muted);
}
.ecs-table.is-matrix td.c:nth-child(2){ background:transparent }
.ecs-tsum__i{ flex:1 1 auto; justify-content:center }
}
/* --- صف مواصفة: تسمية + قيمة --- */
.ecs-specs .elementor-icon-list-items{ margin:0; padding:0 }
.ecs-specs .elementor-icon-list-item{
display:flex; justify-content:space-between; align-items:baseline; gap:20px;
padding:14px 0; border-top:1px solid var(--ecs-line);
font-size: var(--fs-sm); color:var(--ecs-body);
}
.ecs-specs .elementor-icon-list-item:last-child{ border-bottom:1px solid var(--ecs-line) }
.ecs-specs .elementor-icon-list-icon{ display:none }
.ecs-specs .elementor-icon-list-text b,
.ecs-specs b{
font-family:'Barlow Condensed',sans-serif; font-variant-numeric:tabular-nums;
font-size: var(--ecs-lg); color:var(--ecs-ink); font-weight:700;
}
.ecs-dark .ecs-specs .elementor-icon-list-item{
border-top-color:var(--ecs-line-d); color:#C3D2E2;
}
.ecs-dark .ecs-specs .elementor-icon-list-item:last-child{ border-bottom-color:var(--ecs-line-d) }
.ecs-dark .ecs-specs b{ color:var(--ecs-hv) }
/* --- بطاقة دور: عنوان + وصف --- */
.ecs-role :is(h2,h3,h4,h5),
.ecs-role .elementor-heading-title{ margin-bottom:6px }
/* --- شريط أرقام داخل الترويسة --- */
.e-con.ecs-facts{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:0;
border-top:1px solid var(--ecs-line-d);
}
.e-con.ecs-facts > *{
padding:24px 22px 0;
border-inline-start:1px solid var(--ecs-line-d);
}
.e-con.ecs-facts > *:first-child{ border-inline-start:0; padding-inline-start:0 }
@media (max-width: 767px){
.e-con.ecs-facts{ grid-template-columns:1fr }
.e-con.ecs-facts > *{
border-inline-start:0; padding-inline-start:0;
border-top:1px solid var(--ecs-line-d); padding-block:18px 0;
}
.e-con.ecs-facts > *:first-child{ border-top:0 }
}
/* --- العنوان التمهيدي على ويدجت عنوان --- */
.ecs-eyebrow .elementor-heading-title{
display:inline-block;
font-family:var(--ecs-sans); font-size: var(--fs-xxs); font-weight:600; letter-spacing:.08em;
color:var(--ecs-hv-d);
border-bottom:2px solid var(--ecs-hv); padding-bottom:5px;
}
.ecs-dark .ecs-eyebrow .elementor-heading-title{ color:var(--ecs-hv) }
/* --- صف مواصفة: الفصل بين التسمية والقيمة داخل span إليمنتور --- */
.ecs-specs .elementor-icon-list-item{ width:100% }
.ecs-specs .elementor-icon-list-text{
display:flex; justify-content:space-between; align-items:baseline;
gap:20px; width:100%;
}
/* --- بطاقة دور مبنية بـ HTML --- */
.ecs-card__n{ display:block }
.ecs-role p:last-child{ margin-bottom:0 }
.ecs-role :is(h2,h3,h4,h5){ font-size: var(--ecs-lg); line-height:1.4 }
/* --- أسئلة الخدمة: details/summary، بلا جافاسكربت --- */
.ecs-qa{ border:1px solid var(--ecs-line); background:var(--ecs-white) }
.ecs-qa details{ border-top:1px solid var(--ecs-line) }
.ecs-qa details:first-child{ border-top:0 }
.ecs-qa summary{
list-style:none; cursor:pointer; position:relative;
padding:17px 58px 17px 24px;
font-family:var(--ecs-display); font-weight:700; font-size: var(--fs-md); line-height:1.5;
color:var(--ecs-ink); transition:var(--ecs-tr);
}
[dir="rtl"] .ecs-qa summary{ padding:17px 24px 17px 58px }
.ecs-qa summary::-webkit-details-marker{ display:none }
.ecs-qa summary::after{
content:""; position:absolute; top:23px; inset-inline-end:24px;
width:13px; height:13px; flex:none;
background:var(--ecs-hv);
clip-path:polygon(0 0,100% 0,50% 100%);
transition:transform .3s ease;
}
.ecs-qa details[open] summary::after{ transform:rotate(180deg) }
.ecs-qa summary:hover{ background:var(--ecs-hv-soft) }
.ecs-qa details[open] summary{ background:var(--ecs-hv-soft) }
.ecs-qa .a{
padding:0 24px 22px;
font-size: var(--fs-sm); line-height:1.85; color:var(--ecs-body);
}
.ecs-qa .a p{ margin:0 0 10px }
.ecs-qa .a p:last-child{ margin-bottom:0 }
/* ============================================================
23 — NAV MENU (قائمة ووردبريس مع قائمة منسدلة)
تُستعمل عبر [ecs_menu] داخل هيدر ElementsKit أو الثيم.
============================================================ */
.ecs-navmenu ul{ list-style:none; margin:0; padding:0 }
.ecs-navmenu > ul{
display:flex; align-items:center; gap:clamp(14px,1.6vw,26px);
}
.ecs-navmenu li{ position:relative }
.ecs-navmenu a{
display:block; padding:8px 0; white-space:nowrap;
font-family:var(--ecs-sans); font-size: var(--fs-sm); font-weight:600; line-height:1.5;
color:var(--ecs-ink); transition:var(--ecs-tr);
}
.ecs-navmenu a:hover{ color:var(--ecs-hv-d) }
.ecs-navmenu .current-menu-item > a,
.ecs-navmenu .current-page-ancestor > a{ color:var(--ecs-hv-d) }
/* سهم العنصر الأب */
.ecs-navmenu .menu-item-has-children > a::after{
content:""; display:inline-block; width:8px; height:8px;
margin-inline-start:7px; background:var(--ecs-hv);
clip-path:polygon(0 0,100% 0,50% 100%);
}
/* القائمة المنسدلة */
.ecs-navmenu .sub-menu{
position:absolute; top:100%; inset-inline-start:0;
min-width:252px; z-index:60; padding:6px 0;
background:var(--ecs-white); border:1px solid var(--ecs-line);
box-shadow:0 22px 40px -24px rgba(15,29,44,.45);
opacity:0; visibility:hidden; transform:translateY(7px);
transition:var(--ecs-tr);
}
.ecs-navmenu li:hover > .sub-menu,
.ecs-navmenu li:focus-within > .sub-menu{
opacity:1; visibility:visible; transform:none;
}
.ecs-navmenu .sub-menu a{
padding:11px 18px; font-size: var(--fs-sm); font-weight:500; white-space:normal;
border-inline-start:3px solid transparent;
}
.ecs-navmenu .sub-menu a:hover{
background:var(--ecs-hv-soft); border-inline-start-color:var(--ecs-hv);
}
@media (max-width: 900px){
.ecs-navmenu > ul{ flex-direction:column; align-items:stretch; gap:0 }
.ecs-navmenu > ul > li > a{
padding:14px 0; font-size: var(--fs-md); border-bottom:1px solid var(--ecs-line);
}
.ecs-navmenu .menu-item-has-children > a::after{ float:inline-end; margin-top:9px }
.ecs-navmenu .sub-menu{
position:static; min-width:0; padding:0 0 8px;
opacity:1; visibility:visible; transform:none;
background:transparent; border:0; box-shadow:none;
}
.ecs-navmenu .sub-menu a{ padding-block:10px; font-size: var(--fs-sm); border-inline-start:0 }
.ecs-navmenu .sub-menu a::before{
content:"—"; color:var(--ecs-hv); margin-inline-end:8px;
}
}
/* ============================================================
24 — CALCULATOR ([ecs_calc])
أداة لا مقالة. لوح داكن مضغوط: مُدخلات صغيرة، رقم واحد مهيمن،
وأرقام مساندة في سطر واحد، ثم زر يرسل الأرقام إلى الفريق.
============================================================ */
.ecs-calc{
background: var(--ecs-ink); color:#C3D2E2;
border:1px solid var(--ecs-line-d);
padding: clamp(20px, 2.4vw, 28px);
position:relative; isolation:isolate;
}
.ecs-calc::before{
content:""; position:absolute; top:0; inset-inline:0; height:3px; z-index:2;
background: repeating-linear-gradient(135deg,
var(--ecs-hv) 0 12px, transparent 12px 24px);
}
/* ---- المُدخلات ---- */
.ecs-calc__grid{
display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px 14px;
}
.ecs-calc label{
display:block; margin-bottom:6px;
font-family: var(--ecs-sans); font-size: var(--fs-xxs); font-weight:600;
letter-spacing:.04em; color:#8FA4BB;
}
.ecs-calc input,
.ecs-calc select{
width:100%; height:44px; padding:0 12px;
font-family: var(--ecs-sans); font-size: var(--fs-sm); font-weight:500;
color:#fff; background: var(--ecs-ink-2);
border:1px solid var(--ecs-line-d); border-radius:0;
transition: border-color var(--ecs-tr), background var(--ecs-tr);
appearance:none; -webkit-appearance:none;
}
.ecs-calc select{
background-image:
linear-gradient(45deg, transparent 50%, #8FA4BB 50%),
linear-gradient(135deg, #8FA4BB 50%, transparent 50%);
background-position: 14px calc(50% - 2px), 19px calc(50% - 2px);
background-size:5px 5px, 5px 5px;
background-repeat:no-repeat;
padding-inline-start:34px;
}
.ecs-calc input:focus,
.ecs-calc select:focus{
outline:0; border-color: var(--ecs-hv); background:#12202F;
}
.ecs-calc select option{ background: var(--ecs-ink); color:#fff }
/* ---- النتيجة ---- */
.ecs-calc__out{
margin-top:20px; padding-top:18px;
border-top:1px solid var(--ecs-line-d);
display:grid; grid-template-columns:auto 1fr; align-items:center; gap:0 24px;
}
.ecs-calc__big{ display:flex; align-items:baseline; gap:10px }
.ecs-calc__big b{
font-family: var(--ecs-sans); font-size: clamp(46px, 6vw, 66px);
font-weight:700; line-height:.85; color: var(--ecs-hv);
font-variant-numeric: tabular-nums;
transition: opacity .18s ease;
}
.ecs-calc__big span{
font-size: var(--fs-xs); line-height:1.45; color:#8FA4BB; max-width:12ch;
}
.ecs-calc.is-upd .ecs-calc__big b{ opacity:.35 }
/* الأرقام المساندة */
.ecs-calc__chips{
display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end;
}
.ecs-calc__chip{
display:inline-flex; align-items:baseline; gap:6px;
padding:8px 13px; font-size: var(--fs-xxs); line-height:1;
background: var(--ecs-ink-2); border:1px solid var(--ecs-line-d);
color:#8FA4BB; white-space:nowrap;
}
.ecs-calc__chip b{
font-size: var(--fs-sm); font-weight:600; color:#fff;
font-variant-numeric: tabular-nums;
}
.ecs-calc__chip--hv{ border-color: rgba(242,160,7,.45) }
.ecs-calc__chip--hv b{ color: var(--ecs-hv) }
/* ---- الإجراء ---- */
.ecs-calc__cta{
margin-top:18px; padding-top:16px;
border-top:1px solid var(--ecs-line-d);
display:flex; align-items:center; justify-content:space-between; gap:14px;
}
/* 4.32:1 عند 12px لا يمرّ AA — المتغيّر المعتمد يعطي 5.06 */
.ecs-calc__fine{ font-size: var(--fs-xxs); line-height:1.5; color: var(--ecs-muted); margin:0 }
.ecs-calc__go{
display:inline-flex; align-items:center; gap:9px; flex:none;
height:46px; padding:0 22px;
font-family: var(--ecs-sans); font-size: var(--fs-sm); font-weight:600;
background: var(--ecs-hv); color: var(--ecs-hv-ink);
border:0; text-decoration:none;
transition: background var(--ecs-tr), transform var(--ecs-tr);
}
.ecs-calc__go:hover{ background:#FFB524; transform:translateY(-1px); color: var(--ecs-hv-ink) }
.ecs-calc__go::after{
content:""; width:6px; height:6px; flex:none;
border-top:2px solid currentColor; border-inline-start:2px solid currentColor;
transform: rotate(-45deg);
}
@media (max-width: 900px){
.ecs-calc__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.ecs-calc__out{ grid-template-columns:1fr; gap:16px }
.ecs-calc__chips{ justify-content:flex-start }
}
@media (max-width: 560px){
.ecs-calc__grid{ grid-template-columns:1fr }
.ecs-calc__cta{ flex-direction:column; align-items:stretch }
.ecs-calc__go{ justify-content:center }
}
/* ============================================================
25 — FOOTER TOP EDGE
الفوتر كان يلتصق بمحتوى الصفحة بلا فاصل. نضيف الشريط المائل
نفسه الموجود أعلى الهيرو، وشبكة البلوبرنت نفسها بشفافية أقل،
فيصبح الفوتر امتدادًا لنفس اللغة البصرية لا كتلة معلّقة.
يعمل على أي فوتر ElementsKit بلا تعديل القالب.
============================================================ */
.e-con.ecs-ekfoot{ position:relative; isolation:isolate }
/* الشريط المائل الفاصل */
.e-con.ecs-ekfoot::before{
content:""; position:absolute; z-index:2;
top:0; inset-inline:0; height:6px; pointer-events:none;
background: repeating-linear-gradient(135deg,
var(--ecs-hv) 0 16px, var(--ecs-ink) 16px 32px);
}
/* شبكة البلوبرنت — تتلاشى نحو الأسفل */
.e-con.ecs-ekfoot::after{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background-image:
linear-gradient(var(--ecs-line-d) 1px, transparent 1px),
linear-gradient(90deg, var(--ecs-line-d) 1px, transparent 1px);
background-size:78px 78px, 78px 78px;
opacity:.26;
-webkit-mask-image: radial-gradient(120% 85% at 20% 0%, #000 0%, rgba(0,0,0,.3) 52%, transparent 86%);
mask-image: radial-gradient(120% 85% at 20% 0%, #000 0%, rgba(0,0,0,.3) 52%, transparent 86%);
}
/* المحتوى فوق الطبقتين */
.e-con.ecs-ekfoot > *{ position:relative; z-index:1 }
/* مسافة تنفّس أعلى الفوتر بعد الشريط */
.e-con.ecs-ekfoot{ padding-top: clamp(52px, 6vw, 76px) }
@media (max-width: 767px){
.e-con.ecs-ekfoot::after{ background-size:52px 52px, 52px 52px; opacity:.2 }
}
/* ============================================================
26 — JOB FAMILIES (عائلات الأدوار — صفحة الوظائف)
لوحتان متجاورتان، كل واحدة قائمة أدوار. اسم الدور أعلى السطر
ونطاقه تحته، مع وسم للأدوار التي تحتاج رخصة.
============================================================ */
.e-con.ecs-fams{
display:grid; grid-template-columns:1fr 1fr; gap:var(--ecs-gap);
align-items:start;
}
.e-con.ecs-fam{
background:var(--ecs-white); border:1px solid var(--ecs-line);
border-top:4px solid var(--ecs-ink);
padding:32px 28px 26px;
}
.e-con.ecs-fam--b{ border-top-color: var(--ecs-hv) }
.ecs-fam__n .elementor-heading-title{
font-family: var(--ecs-sans); font-size: var(--fs-xxs); font-weight:600;
letter-spacing:.06em; color: var(--ecs-hv-d); margin-bottom:6px;
}
.e-con.ecs-fam :is(h2,h3,h4,h5){ font-size: var(--ecs-h4); line-height:1.35; margin:0 0 8px }
.e-con.ecs-fam > .elementor-widget-text-editor p{
font-size: var(--fs-sm); color: var(--ecs-muted); margin:0 0 18px;
}
/* قائمة الأدوار */
.ecs-roles .elementor-icon-list-items{ display:block }
.ecs-roles .elementor-icon-list-item{
display:block; padding:11px 0;
border-bottom:1px dashed var(--ecs-line);
}
.ecs-roles .elementor-icon-list-item:last-child{ border-bottom:0; padding-bottom:0 }
.ecs-roles .elementor-icon-list-icon{ display:none }
.ecs-roles .elementor-icon-list-text{
display:block; padding:0; font-size: var(--fs-sm); line-height:1.55; color: var(--ecs-ink);
}
.ecs-roles b{ font-weight:600; color: var(--ecs-ink) }
.ecs-roles i{
display:block; font-style:normal; margin-top:3px;
font-size: var(--fs-xs); line-height:1.6; color: var(--ecs-muted);
}
.ecs-roles .lic{
display:inline-block; margin-inline-start:8px; vertical-align:2px;
font-size: var(--fs-xxs); font-weight:600; letter-spacing:.04em;
color: var(--ecs-hv-d); border:1px solid var(--ecs-hv);
padding:1px 7px; white-space:nowrap;
}
/* ملاحظة التحقق أسفل العائلتين */
.ecs-vet{
margin-top:26px; padding:20px 24px;
background: var(--ecs-ink); color:#C3D2E2;
}
.ecs-vet p{ margin:0; font-size: var(--fs-sm); line-height:1.75; color:#C3D2E2 }
.ecs-vet b{ color:#fff; font-weight:600 }
/* ---------- 26.2 الشريط التفاعلي (من assets/ecs.js) ----------
عائلة واحدة ظاهرة في المرة، وبحث فوري يعرض العائلتين معًا. */
.ecs-fambar{
display:flex; align-items:center; justify-content:space-between;
flex-wrap:wrap; gap:14px; margin:28px 0 18px;
}
.ecs-seg{
display:inline-flex; border:1px solid var(--ecs-line);
background: var(--ecs-white);
}
.ecs-seg__b{
display:inline-flex; align-items:center; gap:9px;
height:46px; padding:0 20px; border:0; cursor:pointer;
font-family: var(--ecs-sans); font-size: var(--fs-sm); font-weight:600;
color: var(--ecs-muted); background:transparent;
transition: color var(--ecs-tr), background var(--ecs-tr);
position:relative;
}
.ecs-seg__b + .ecs-seg__b{ border-inline-start:1px solid var(--ecs-line) }
.ecs-seg__b span{
display:inline-flex; align-items:center; justify-content:center;
min-width:24px; height:20px; padding:0 6px;
font-size: var(--fs-xxs); font-weight:600;
background: var(--ecs-paper); color: var(--ecs-muted);
transition: background var(--ecs-tr), color var(--ecs-tr);
}
.ecs-seg__b:hover{ color: var(--ecs-ink) }
.ecs-seg__b.is-on{ color: var(--ecs-ink); background: var(--ecs-paper) }
.ecs-seg__b.is-on::after{
content:""; position:absolute; bottom:-1px; inset-inline:0; height:3px;
background: var(--ecs-hv);
}
.ecs-seg__b.is-on span{ background: var(--ecs-hv); color: var(--ecs-hv-ink) }
/* سمة hidden يجب أن تُخفي فعلًا.
إليمنتور يضبط display على .elementor-icon-list-item، وقاعدة الصنف تغلب
قاعدة المتصفح لـ[hidden]. النتيجة على الموقع: البحث يعلن «دور واحد مطابق»
بينما 14 دورًا مُخفيًا يظلّ ظاهرًا أمام الزائر. التخصّص هنا يكفي بلا
!important لأنه أعلى من قاعدتَي إليمنتور وElementsKit معًا. */
.ecs-fams .ecs-roles .elementor-icon-list-item[hidden],
.ecs-fam .ecs-roles .elementor-icon-list-item[hidden],
.ecs-roles .elementor-icon-list-item[hidden]{ display:none }
.ecs-fsearch{ position:relative; display:flex; align-items:center; gap:12px }
.ecs-fsearch input{
width: clamp(200px, 26vw, 300px); height:46px;
padding:0 16px; font-family: var(--ecs-sans); font-size: var(--fs-sm);
color: var(--ecs-ink); background: var(--ecs-white);
border:1px solid var(--ecs-line); border-radius:0;
transition: border-color var(--ecs-tr);
appearance:none; -webkit-appearance:none;
}
.ecs-fsearch input:focus{ outline:0; border-color: var(--ecs-hv) }
.ecs-fsearch input::placeholder{ color:#6E7A88 }
.ecs-fsearch__n{
font-size: var(--fs-xs); color: var(--ecs-muted); white-space:nowrap;
}
/* اللوحة المخفية في وضع التبويب */
.e-con.ecs-fams.is-tabs > .ecs-fam{ display:none }
.e-con.ecs-fams.is-tabs > .ecs-fam.is-on{ display:flex }
.e-con.ecs-fams.is-tabs{ grid-template-columns:1fr }
/* العائلة الظاهرة وحدها → عمودان للأدوار، فينخفض الطول للنصف */
.ecs-fams.is-tabs .ecs-roles .elementor-icon-list-items{
display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
column-gap: 34px;
}
@media (min-width: 1100px){
.ecs-fams.is-tabs .ecs-roles .elementor-icon-list-items{
grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:28px;
}
}
.ecs-fams.is-tabs .ecs-roles .elementor-icon-list-item:nth-last-child(2){
border-bottom:0;
}
/* الظهور المتدرّج عند التبديل أو البحث */
.ecs-fam.is-anim .elementor-icon-list-item{
animation: ecsRoleIn .42s cubic-bezier(.22,.61,.36,1) both;
animation-delay: calc(var(--i, 0) * 26ms);
}
@keyframes ecsRoleIn{
from{ opacity:0; transform: translateY(9px) }
to { opacity:1; transform:none }
}
.ecs-fam.is-anim .ecs-fam__n,
.ecs-fam.is-anim > .elementor-widget-heading,
.ecs-fam.is-anim > .elementor-widget-text-editor{
animation: ecsRoleIn .38s cubic-bezier(.22,.61,.36,1) both;
}
/* لا نتيجة */
.ecs-fam__empty{
padding:26px 4px; font-size: var(--fs-sm); color: var(--ecs-muted);
}
.ecs-fam__empty b{ color: var(--ecs-ink) }
/* إبراز نص البحث */
.ecs-roles mark{
background: var(--ecs-hv-soft); color: var(--ecs-hv-d);
padding:0 2px; font-weight:600;
}
@media (prefers-reduced-motion: reduce){
.ecs-fam.is-anim .elementor-icon-list-item,
.ecs-fam.is-anim > *{ animation:none }
}
@media (max-width: 900px){
.ecs-fams.is-tabs .ecs-roles .elementor-icon-list-items{ grid-template-columns:1fr }
.ecs-fambar{ gap:12px }
.ecs-fsearch{ width:100% }
.ecs-fsearch input{ width:100%; flex:1 1 auto }
.ecs-seg{ width:100% }
/* عنصر flex لا ينكمش دون محتواه ما لم يُسمح له: النصّ الإنجليزي أطول من
العربي، فكان الشريط يخرج إلى 494px داخل شاشة 375px ويُقتطع نصفه. */
.ecs-seg__b{
flex:1 1 0; min-width:0; justify-content:center;
height:auto; min-height:46px; padding:9px 10px;
white-space:normal; line-height:1.25; text-align:center;
font-size: var(--fs-xs);
}
}
@media (max-width: 900px){
.e-con.ecs-fams{ grid-template-columns:1fr }
}
@media (max-width: 767px){
.e-con.ecs-fam{ padding:26px 20px 22px }
.e-con.ecs-fam :is(h2,h3,h4,h5){ font-size: var(--ecs-h4) }
}
/* ============================================================
27 — MEDIA & ABOUT
أماكن الصور والزمن والبيانات الرسمية. الغرض أن تبدو الصفحة
لشركة قائمة لها مقر وتاريخ ومواقع، لا صفحة مكتوبة على مكتب.
============================================================ */
/* ---------- 27.1 مكان صورة ---------- */
.e-con.ecs-fig{
position:relative; overflow:hidden; padding:0;
display:flex; flex-direction:column;
background: var(--ecs-ink-2);
border:1px solid var(--ecs-line-d);
aspect-ratio: 3 / 2;
}
.e-con.ecs-fig > .elementor-element{
flex:1 1 auto; width:100%; min-height:0; display:flex;
}
.e-con.ecs-fig .elementor-widget-container{
flex:1 1 auto; width:100%; min-height:0; display:flex; margin:0;
}
.e-con.ecs-fig img{
flex:1 1 auto; display:block;
width:100%; height:100%; min-height:0;
object-fit:cover; object-position:center;
}
/* حالة الفراغ — قبل رفع الصورة */
.e-con.ecs-fig img[src*="placeholder"]{
object-fit:contain; padding:22%; opacity:.16;
}
/* خط ضوء رفيع يعطي إحساس الإطار */
.e-con.ecs-fig::after{
content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
/* وسم ركن كهرماني */
.e-con.ecs-fig--mark::before{
content:""; position:absolute; z-index:3;
top:0; inset-inline-start:0; width:34px; height:4px;
background: var(--ecs-hv);
}
/* صورة تملأ نصف القسم المنقسم من حافة إلى حافة */
.e-con.ecs-split > .ecs-fig--bleed{
padding:0 !important;
aspect-ratio:auto; align-self:stretch;
min-height: clamp(400px, 54vw, 640px);
border:0; border-inline-start:1px solid var(--ecs-line-d);
}
@media (max-width: 900px){
.e-con.ecs-split > .ecs-fig--bleed{
min-height: clamp(280px, 62vw, 420px);
border-inline-start:0; border-top:1px solid var(--ecs-line-d);
}
}
.e-con.ecs-fig--p{ aspect-ratio: 4 / 5 }
.e-con.ecs-fig--s{ aspect-ratio: 1 / 1 }
.e-con.ecs-fig--w{ aspect-ratio: 16 / 9 }
.e-con.ecs-fig--t{ aspect-ratio: 21 / 9 }
/* ---------- 27.2 شبكة صور غير متماثلة ---------- */
.e-con.ecs-gal{
display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px; padding:0;
}
.e-con.ecs-gal > .ecs-fig{ aspect-ratio:1 / 1 }
.e-con.ecs-gal > .ecs-fig--a{ grid-column:span 2; grid-row:span 2 }
/* ---------- 27.3 الخط الزمني ---------- */
.e-con.ecs-time{
display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
gap:0; padding:0;
}
.e-con.ecs-tstep{
position:relative; padding:26px 0 0;
padding-inline-end:26px;
border-top:2px solid var(--ecs-line-d);
}
.e-con.ecs-tstep::before{
content:""; position:absolute; top:-6px; inset-inline-start:0;
width:10px; height:10px; background: var(--ecs-hv);
}
.ecs-tstep .ecs-t-year .elementor-heading-title{
font-family: var(--ecs-sans); font-size: var(--fs-num); font-weight:600;
line-height:1; color:#fff; margin-bottom:10px;
}
.ecs-tstep :is(h2,h3,h4,h5){ font-size: var(--fs-md); line-height:1.45; margin:0 0 8px; color:#fff }
.ecs-tstep p{ font-size: var(--fs-sm); line-height:1.7; color:var(--ecs-muted-d); margin:0 }
/* ---------- 27.4 شريط البيانات الرسمية ---------- */
.e-con.ecs-idbar{
display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
gap:1px; padding:0; background: var(--ecs-line);
border:1px solid var(--ecs-line);
}
.e-con.ecs-idcell{ background: var(--ecs-white); padding:22px 22px 20px }
.ecs-idcell .ecs-idlabel .elementor-heading-title{
font-family: var(--ecs-sans); font-size: var(--fs-xxs); font-weight:600;
letter-spacing:.07em; color: var(--ecs-hv-d); margin-bottom:8px;
}
.ecs-idcell .ecs-idval .elementor-heading-title{
font-size: var(--fs-md); line-height:1.45; color: var(--ecs-ink); font-weight:600;
}
.ecs-idcell p{ font-size: var(--fs-xs); line-height:1.65; color: var(--ecs-muted); margin:6px 0 0 }
/* ---------- 27.5 قائمة تحريرية بدل شبكة البطاقات ---------- */
.e-con.ecs-ed{
display:grid; grid-template-columns:1fr 1fr;
column-gap: calc(var(--ecs-gap) * 1.6); row-gap:0; padding:0;
}
.ecs-ed__row{
display:grid; grid-template-columns:auto 1fr; align-items:start;
gap:20px; padding:24px 0 22px;
border-top:1px solid var(--ecs-line);
}
.ecs-ed__row .n{
font-family: var(--ecs-sans); font-size: var(--fs-num); font-weight:600; line-height:.9;
color:transparent; -webkit-text-stroke:1px var(--ecs-line);
min-width:52px;
}
.ecs-ed__row :is(h2,h3,h4,h5){ font-size: var(--fs-md); line-height:1.4; margin:0 0 6px }
.ecs-ed__row p{ font-size: var(--fs-sm); line-height:1.75; color: var(--ecs-muted); margin:0 }
.ecs-ed__row:hover .n{ -webkit-text-stroke-color: var(--ecs-hv) }
/* ---------- 27.6 بطاقة المقر ---------- */
.ecs-addr .elementor-icon-list-item{
display:block; padding:12px 0; border-bottom:1px solid var(--ecs-line-d);
}
.ecs-addr .elementor-icon-list-item:last-child{ border-bottom:0 }
.ecs-addr .elementor-icon-list-icon{ display:none }
.ecs-addr .elementor-icon-list-text{ display:block; padding:0; font-size: var(--fs-sm); line-height:1.6 }
.ecs-addr b{ display:block; font-size: var(--fs-xxs); font-weight:600; letter-spacing:.06em;
color: var(--ecs-hv); margin-bottom:4px }
.ecs-addr span{ color:#C3D2E2 }
/* ---------- 27.7 سطر مصدر الصورة ---------- */
.ecs-cap p{
font-size: var(--fs-xxs); line-height:1.6; color: var(--ecs-muted);
margin:10px 0 0; padding-inline-start:12px;
border-inline-start:2px solid var(--ecs-line);
}
@media (max-width: 900px){
.e-con.ecs-time{ grid-template-columns:1fr 1fr }
.e-con.ecs-idbar{ grid-template-columns:1fr 1fr }
.e-con.ecs-ed{ grid-template-columns:1fr }
}
@media (max-width: 767px){
.e-con.ecs-gal{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.e-con.ecs-gal > .ecs-fig--a{ grid-column:span 2; grid-row:span 1; aspect-ratio:4/3 }
.e-con.ecs-time{ grid-template-columns:1fr }
.e-con.ecs-tstep{ padding-inline-end:0 }
.e-con.ecs-idbar{ grid-template-columns:1fr }
.ecs-ed__row .n{ font-size: var(--ecs-h3); min-width:42px }
}
/* ============================================================
29 — LEADERSHIP (مجلس الإدارة — عن ECS والرئيسية)
بلا صور: الحرفان الأولان في مربّع بدل صورة غير موجودة.
رئيس المجلس يُقلب لونه — تسلسل واضح بلا زخرفة إضافية.
============================================================ */
.e-con.ecs-leads{
display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
gap:1px; padding:0;
background: var(--ecs-line); border:1px solid var(--ecs-line);
}
.e-con.ecs-lead{
position:relative; display:flex; flex-direction:column;
background: var(--ecs-white); padding:28px 24px 26px;
transition: background var(--ecs-tr);
}
.e-con.ecs-lead::before{
content:""; position:absolute; top:0; inset-inline-start:0; z-index:1;
width:0; height:3px; background: var(--ecs-hv);
transition: width .34s cubic-bezier(.22,.61,.36,1);
}
.e-con.ecs-lead:hover::before{ width:100% }
.e-con.ecs-lead:not(.ecs-lead--chair):hover{ background: var(--ecs-hv-soft) }
/* المربّع والرقم */
.ecs-lead__top{
display:flex; align-items:flex-start; justify-content:space-between;
margin-bottom:22px;
}
.ecs-lead__mono{
display:grid; place-items:center; width:52px; height:52px; flex:none;
background: var(--ecs-ink); color:#fff;
font-family:'Barlow', system-ui, sans-serif; font-size:17px; font-weight:600;
letter-spacing:.06em; line-height:1;
}
.ecs-lead__n{
font-family:'Barlow', system-ui, sans-serif; font-size: var(--fs-xs);
font-weight:600; letter-spacing:.08em; color: var(--ecs-muted);
font-variant-numeric: tabular-nums;
}
/* الاسم */
.ecs-lead__name .elementor-heading-title{
font-size: var(--ecs-h4); line-height:1.3; color: var(--ecs-ink); margin:0;
}
.ecs-lead__latin .elementor-heading-title{
font-family:'Barlow', system-ui, sans-serif; font-size: var(--fs-sm);
font-weight:500; line-height:1.4; color: var(--ecs-muted); margin:3px 0 0;
letter-spacing:.01em;
}
/* المنصب: شرطة كهرمانية ثم المسمّى */
.ecs-lead__role .elementor-heading-title{
display:flex; align-items:center; gap:10px;
font-size: var(--fs-sm); font-weight:700; line-height:1.4;
color: var(--ecs-hv-d); margin:16px 0 10px;
}
.ecs-lead__role .elementor-heading-title::before{
content:""; width:18px; height:2px; flex:none; background: var(--ecs-hv);
}
.e-con.ecs-lead .elementor-widget-text-editor p{
font-size: var(--fs-sm); line-height:1.75; color: var(--ecs-muted); margin:0;
}
/* رئيس مجلس الإدارة */
.e-con.ecs-lead--chair{ background: var(--ecs-ink) }
.ecs-lead--chair .ecs-lead__mono{ background: var(--ecs-hv); color: var(--ecs-hv-ink) }
.ecs-lead--chair .ecs-lead__name .elementor-heading-title{ color:#fff }
.ecs-lead--chair .ecs-lead__role .elementor-heading-title{ color: var(--ecs-hv) }
@media (max-width: 1024px){
.e-con.ecs-leads{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width: 600px){
.e-con.ecs-leads{ grid-template-columns:1fr }
.e-con.ecs-lead{ padding:22px 20px }
.ecs-lead__top{ margin-bottom:16px }
}
/* ============================================================
28 — INTERACTION & POLISH
الطبقة التي تفصل الموقع المبني بعناية عن القالب الجاهز:
التركيز بلوحة المفاتيح، التحديد، التمرير، أشرطة التمرير،
ومعالجة العربية الطويلة. لا شيء هنا زخرفي بلا سبب.
============================================================ */
/* --- 28.1 حلقة تركيز تُرى على كل خلفية ---
حلقتان: كهرمانية تظهر فوق الداكن، وظلّ كحلي يظهر فوق الكهرماني. */
:focus-visible{
outline: 2px solid var(--ecs-hv);
outline-offset: 2px;
box-shadow: 0 0 0 5px rgba(15,29,44,.30);
}
.ecs-dark :focus-visible,
.ecs-hero :focus-visible,
.ecs-ekfoot :focus-visible{ box-shadow: 0 0 0 5px rgba(255,255,255,.28) }
:focus:not(:focus-visible){ outline:none; box-shadow:none }
/* --- 28.2 التحديد بلون العلامة --- */
::selection{ background: var(--ecs-hv); color: var(--ecs-hv-ink) }
.ecs-dark ::selection,
.ecs-hero ::selection{ background: var(--ecs-hv); color: var(--ecs-hv-ink) }
/* --- 28.3 التمرير --- */
html{ scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }
/* الوصلات المرساة لا تختفي تحت الهيدر الثابت */
:target,
h1[id], h2[id], h3[id], .e-con[id]{ scroll-margin-block-start: 104px }
:target{ animation: ecsTarget 1.6s ease-out 1 }
@keyframes ecsTarget{
0%, 22%{ background: var(--ecs-hv-soft) }
100% { background: transparent }
}
/* --- 28.4 شريط التمرير --- */
@supports (scrollbar-width: thin){
html{ scrollbar-width: thin; scrollbar-color: var(--ecs-steel) var(--ecs-paper) }
}
::-webkit-scrollbar{ width:11px; height:11px }
::-webkit-scrollbar-track{ background: var(--ecs-paper) }
::-webkit-scrollbar-thumb{
background: var(--ecs-steel); border:3px solid var(--ecs-paper);
}
::-webkit-scrollbar-thumb:hover{ background: var(--ecs-ink) }
/* --- 28.5 النماذج --- */
input, select, textarea, button{ font-family: inherit }
:root{ accent-color: var(--ecs-hv) }
input, textarea{ caret-color: var(--ecs-hv) }
input:-webkit-autofill{ -webkit-text-fill-color: var(--ecs-ink) }
/* --- 28.6 الروابط داخل المتن ---
خط تحت الرابط بمسافة تنفّس، لا خط ملاصق للحروف. */
.ecs-prose a,
.elementor-widget-text-editor a:not(.elementor-button){
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .28em;
text-decoration-color: var(--ecs-hv);
transition: text-decoration-color var(--ecs-tr), color var(--ecs-tr);
}
.ecs-prose a:hover,
.elementor-widget-text-editor a:not(.elementor-button):hover{
color: var(--ecs-hv-d); text-decoration-color: currentColor;
}
/* --- 28.7 العربية الطويلة لا تكسر الصناديق --- */
body{ overflow-wrap: break-word }
h1, h2, h3, h4{ text-wrap: balance }
p{ text-wrap: pretty }
/* أرقام بعرض ثابت أينما ظهر رقم — لا رقص عند التحديث */
.ecs-stat__n, .ecs-t-num, .ecs-step__n, .ecs-calc b,
.ecs-tsum__i b, .ecs-seg__b span, .ecs-ed__row .n{
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* --- 28.8 اللمس --- */
a, button, summary, [role="button"]{ -webkit-tap-highlight-color: rgba(242,160,7,.22) }
/* --- 28.9 رابط تخطّي إلى المحتوى (يُحقن من ecs.js) --- */
.ecs-skip{
position:absolute; inset-inline-start:0; top:0; z-index:9999;
transform: translateY(-120%);
background: var(--ecs-ink); color:#fff;
padding:13px 22px; font-size: var(--fs-sm); font-weight:600;
transition: transform .2s ease;
}
.ecs-skip:focus{ transform: translateY(0); color:#fff }
/* الصفحة الحالية في القائمة */
.ecs-nav a.is-here,
.ecs-navmenu a.is-here,
.ecs-ekhead a.is-here{ color: var(--ecs-hv) }
.ecs-nav a.is-here::after,
.ecs-navmenu a.is-here::after{ transform: scaleX(1) }
/* --- 28.10 زر العودة إلى الأعلى (يُحقن من ecs.js) --- */
.ecs-top{
position:fixed; inset-block-end:24px; inset-inline-end:24px; z-index:900;
width:46px; height:46px; display:grid; place-items:center;
background: var(--ecs-ink); color:#fff; border:0; cursor:pointer;
opacity:0; visibility:hidden; transform: translateY(10px);
transition: opacity .28s ease, transform .28s ease, visibility .28s, background var(--ecs-tr);
}
.ecs-top.is-on{ opacity:1; visibility:visible; transform:none }
.ecs-top:hover{ background: var(--ecs-hv); color: var(--ecs-hv-ink) }
.ecs-top::before{
content:""; width:9px; height:9px;
border-top:2px solid currentColor; border-inline-start:2px solid currentColor;
transform: rotate(45deg) translate(2px,2px);
}
@media (max-width: 767px){
.ecs-top{ inset-block-end:16px; inset-inline-end:16px; width:42px; height:42px }
}
/* --- 28.11 تقليل الحركة: احترام كامل --- */
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
.ecs-rv{ opacity:1 !important; transform:none !important }
}
/* --- 28.12 تباين أعلى عند طلب النظام --- */
@media (prefers-contrast: more){
:root{ --ecs-muted:#4A5666; --ecs-line:#B9BEB8; --ecs-line-d:#4A6486 }
}
/* ============================================================
30 — FORMS (Fluent Forms — كل نماذج الموقع)
------------------------------------------------------------
سكين الإضافة الافتراضي معطّل من functions.php
(fluentform/load_default_public)، فلا يبقى إلا ملف البنية
(أعمدة، إخفاء أزرار الراديو…) وهذا القسم يرسم الشكل كله.
السياق يحدد الألوان تلقائيًا:
- فاتح (افتراضي) حقول ورقية وزر كحلي
- داكن (.ecs-dark / .ecs-panel / .ecs-ff--dark)
حقول شفافة وزر كهرماني
بطاقة التقديم (.ecs-apply__body) تبقى فاتحة أينما وُضعت.
⚠️ الأسبقية: ملفات Fluent تُطبع في الفوتر بعد هذا الملف، فكل
قاعدة هنا تبدأ بـ .fluentform .frm-fluent-form لتتقدّم عليها.
============================================================ */
/* ---- 30.1 المتغيرات ---- */
.fluentform{
--ff-label: var(--ecs-ink);
--ff-text: var(--ecs-ink);
--ff-bg: var(--ecs-paper);
--ff-bg-focus: #FFFFFF;
--ff-line: var(--ecs-line);
--ff-line-hover: #AEB6BF;
--ff-focus: var(--ecs-ink);
--ff-ring: rgba(242,160,7,.34);
--ff-ph: #7B8696;
--ff-help: var(--ecs-muted);
--ff-danger: #B42318;
--ff-danger-bg: #FDF1EF;
--ff-danger-ink: #FFFFFF;
--ff-req: var(--ecs-hv-d);
--ff-chip-bg: #FFFFFF;
--ff-chip-on-bg: var(--ecs-ink);
--ff-chip-on-fg: #FFFFFF;
--ff-btn-bg: var(--ecs-ink);
--ff-btn-fg: #FFFFFF;
--ff-btn-sweep: var(--ecs-hv);
--ff-btn-fg-hover: var(--ecs-hv-ink);
--ff-ok-bg: #FFFFFF;
--ff-ok-text: var(--ecs-body);
--ff-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230F1D2C' stroke-width='1.6'/%3E%3C/svg%3E");
/* متغيرات Fluent نفسها — تغذّي قواعد البنية التي تستخدمها */
--fluentform-primary: var(--ecs-ink);
--fluentform-secondary: var(--ecs-muted);
--fluentform-danger: var(--ff-danger);
--fluentform-border-radius: 0;
}
.ecs-dark .fluentform,
.ecs-panel .fluentform,
.ecs-ff--dark .fluentform{
--ff-label: #C9D5E2;
--ff-text: #FFFFFF;
--ff-bg: rgba(255,255,255,.06);
--ff-bg-focus: rgba(255,255,255,.10);
--ff-line: var(--ecs-line-d);
--ff-line-hover: #45618A;
--ff-focus: var(--ecs-hv);
--ff-ring: rgba(242,160,7,.28);
--ff-ph: #7E93AC;
--ff-help: var(--ecs-muted-d);
--ff-danger: #FF9B8F;
--ff-danger-bg: rgba(255,155,143,.08);
--ff-danger-ink: var(--ecs-ink);
--ff-req: var(--ecs-hv);
--ff-chip-bg: transparent;
--ff-chip-on-bg: var(--ecs-hv);
--ff-chip-on-fg: var(--ecs-hv-ink);
--ff-btn-bg: var(--ecs-hv);
--ff-btn-fg: var(--ecs-hv-ink);
--ff-btn-sweep: #FFFFFF;
--ff-btn-fg-hover: var(--ecs-ink);
--ff-ok-bg: rgba(255,255,255,.04);
--ff-ok-text: #C3D2E2;
--ff-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23F2A007' stroke-width='1.6'/%3E%3C/svg%3E");
}
/* بطاقة التقديم فاتحة دائمًا حتى لو وُضعت فوق قسم داكن */
.ecs-apply__body .fluentform{
--ff-label: var(--ecs-ink); --ff-text: var(--ecs-ink);
--ff-bg: var(--ecs-paper); --ff-bg-focus:#FFFFFF;
--ff-line: var(--ecs-line); --ff-line-hover:#AEB6BF; --ff-focus: var(--ecs-ink);
--ff-ring: rgba(242,160,7,.34); --ff-ph:#7B8696; --ff-help: var(--ecs-muted);
--ff-danger:#B42318; --ff-danger-bg:#FDF1EF; --ff-danger-ink:#FFFFFF; --ff-req: var(--ecs-hv-d);
--ff-chip-bg:#FFFFFF; --ff-chip-on-bg: var(--ecs-ink); --ff-chip-on-fg:#FFFFFF;
--ff-btn-bg: var(--ecs-ink); --ff-btn-fg:#FFFFFF; --ff-btn-sweep: var(--ecs-hv); --ff-btn-fg-hover: var(--ecs-hv-ink);
--ff-ok-bg:#FFFFFF; --ff-ok-text: var(--ecs-body);
--ff-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230F1D2C' stroke-width='1.6'/%3E%3C/svg%3E");
}
/* ---- 30.2 الإيقاع ---- */
.fluentform .frm-fluent-form{ margin:0; font-family: var(--ecs-sans) }
.fluentform .frm-fluent-form fieldset{ min-width:0 }
.fluentform .frm-fluent-form .ff-el-group{ margin-bottom:18px }
.fluentform .frm-fluent-form .ff-t-container{ gap:16px }
.fluentform .frm-fluent-form .ff-t-cell > .ff-el-group:last-child{ margin-bottom:18px }
/* ---- 30.3 العنوان فوق الحقل ---- */
.fluentform .frm-fluent-form .ff-el-input--label{ display:block; margin-bottom:7px; line-height:1.4 }
.fluentform .frm-fluent-form .ff-el-input--label label{
font-size: var(--fs-xs); font-weight:700; color: var(--ff-label); margin:0;
}
.fluentform .frm-fluent-form .ff-el-input--label.ff-el-is-required.asterisk-right label::after{
content:" *"; color: var(--ff-req); margin:0 2px 0 0; font-weight:700;
}
/* ---- 30.4 الحقول ---- */
.fluentform .frm-fluent-form .ff-el-form-control{
display:block; width:100%; min-height:50px; margin:0;
padding:12px 14px; border:1px solid var(--ff-line); border-radius:0;
background: var(--ff-bg); color: var(--ff-text); box-shadow:none;
font-family:inherit; font-size:15.5px; line-height:1.5;
-webkit-appearance:none; appearance:none;
transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.fluentform .frm-fluent-form .ff-el-form-control:hover{ border-color: var(--ff-line-hover) }
.fluentform .frm-fluent-form .ff-el-form-control:focus{
outline:none; border-color: var(--ff-focus); background: var(--ff-bg-focus);
box-shadow: 0 0 0 3px var(--ff-ring);
}
.fluentform .frm-fluent-form .ff-el-form-control::placeholder{ color: var(--ff-ph); opacity:1 }
.fluentform .frm-fluent-form textarea.ff-el-form-control{ min-height:124px; resize:vertical }
/* القائمة المنسدلة: سهم مرسوم بدل سهم النظام */
.fluentform .frm-fluent-form select.ff-el-form-control{
padding-left:42px; cursor:pointer;
background-image: var(--ff-chevron); background-repeat:no-repeat;
background-position: left 15px center; background-size:12px 8px;
}
.fluentform .frm-fluent-form select.ff-el-form-control option{ color: var(--ecs-ink); background:#fff }
/* قبل الاختيار يظهر النص الإرشادي بلون الـ placeholder لا بلون القيمة */
.fluentform .frm-fluent-form select.ff-el-form-control:has(option[value=""]:checked){ color: var(--ff-ph) }
/* الهاتف والبريد: يُكتبان من اليسار لليمين (وإلا انقلب name@ إلى @name)،
مع بقاء المحاذاة يمينًا كباقي الحقول */
.fluentform .frm-fluent-form input[type="tel"],
.fluentform .frm-fluent-form input[inputmode="tel"],
.fluentform .frm-fluent-form input[type="email"]{ direction:ltr; text-align:right }
.fluentform .frm-fluent-form input[type="tel"],
.fluentform .frm-fluent-form input[inputmode="tel"]{ letter-spacing:.02em }
/* الأعداد: بلا أسهم زيادة ونقصان */
.fluentform .frm-fluent-form input[type="number"]{ -moz-appearance:textfield }
.fluentform .frm-fluent-form input[type="number"]::-webkit-outer-spin-button,
.fluentform .frm-fluent-form input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
/* لاحقة داخل الحقل («عامل») */
.fluentform .frm-fluent-form .ff_input-group{ flex-wrap:nowrap }
.fluentform .frm-fluent-form .ff_input-group > .ff-el-form-control{ flex:1 1 auto; width:1%; min-width:0 }
.fluentform .frm-fluent-form .ff_input-group > .ff_input-group-append > .ff_input-group-text,
.fluentform .frm-fluent-form .ff_input-group > .ff_input-group-prepend > .ff_input-group-text{
height:100%; padding:0 15px; border:1px solid var(--ff-line); border-inline-start:0; border-radius:0;
background:transparent; color: var(--ff-help); font-size: var(--fs-xs); font-weight:700; line-height:1;
transition: border-color .18s ease;
}
.fluentform .frm-fluent-form .ff_input-group:focus-within .ff_input-group-text{ border-color: var(--ff-focus) }
/* ---- 30.5 النص المساعد والأخطاء ---- */
.fluentform .frm-fluent-form .ff-el-help-message{
margin-top:7px; font-size: var(--fs-xs); font-style:normal; line-height:1.5; color: var(--ff-help);
}
.fluentform .frm-fluent-form .ff-el-is-error .ff-el-form-control{
border-color: var(--ff-danger); background-color: var(--ff-danger-bg);
}
.fluentform .frm-fluent-form .ff-el-is-error .ff-el-form-control:focus{ box-shadow: 0 0 0 3px rgba(180,35,24,.16) }
.fluentform .frm-fluent-form .error.text-danger{
display:flex; align-items:center; gap:7px; margin-top:7px;
font-size: var(--fs-xs); font-weight:600; line-height:1.4; color: var(--ff-danger);
}
.fluentform .frm-fluent-form .error.text-danger::before{
content:"!"; flex:0 0 16px; height:16px; display:grid; place-items:center;
border-radius:50%; background: var(--ff-danger); color: var(--ff-danger-ink);
font-size:11px; font-weight:800; line-height:1;
}
.fluentform .ff-errors-in-stack{ margin-top:14px; padding:12px 14px; border:1px solid var(--ff-danger); background: var(--ff-danger-bg) }
.fluentform .ff-errors-in-stack .error{ color: var(--ff-danger); font-size: var(--fs-xs) }
/* ---- 30.6 أزرار الاختيار (راديو بشكل شرائح) ---- */
.fluentform .frm-fluent-form .ff-el-group.ff_list_buttons .ff-el-input--content{
display:flex; flex-wrap:wrap; gap:8px;
}
.fluentform .frm-fluent-form .ff-el-group.ff_list_buttons .ff-el-input--content .ff-el-form-check{
margin:0 !important; width:auto !important; float:none !important;
}
.fluentform .frm-fluent-form .ff-el-group.ff_list_buttons .ff-el-input--content .ff-el-form-check label{ margin:0; display:block }
.fluentform .frm-fluent-form .ff-el-group.ff_list_buttons .ff-el-input--content .ff-el-form-check label > span,
.fluentform .frm-fluent-form .ff-el-group.ff_list_buttons .ff-el-input--content .ff-el-form-check:first-child label > span,
.fluentform .frm-fluent-form .ff-el-group.ff_list_buttons .ff-el-input--content .ff-el-form-check:last-child label > span{
display:inline-flex; align-items:center; min-height:44px; margin:0;
padding:10px 16px; border:1px solid var(--ff-line) !important; border-radius:0 !important;
background: var(--ff-chip-bg); color: var(--ff-text); box-shadow:none !important;
font-size: var(--fs-sm); font-weight:600; line-height:1.3; white-space:nowrap;
transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.fluentform .frm-fluent-form .ff-el-group.ff_list_buttons .ff-el-input--content .ff-el-form-check label:hover > span{
border-color: var(--ff-focus) !important; color: var(--ff-text);
}
.fluentform .frm-fluent-form .ff-el-group.ff_list_buttons .ff-el-input--content .ff-el-form-check label:focus-within > span{
background: var(--ff-chip-bg); outline:2px solid var(--ecs-hv); outline-offset:2px;
}
.fluentform .frm-fluent-form .ff-el-group.ff_list_buttons .ff-el-input--content .ff-el-form-check.ff_item_selected label > span,
.fluentform .frm-fluent-form .ff-el-group.ff_list_buttons .ff-el-input--content .ff-el-form-check:has(input:checked) label > span{
background: var(--ff-chip-on-bg); border-color: var(--ff-chip-on-bg) !important; color: var(--ff-chip-on-fg);
}
.fluentform .frm-fluent-form .ff-el-is-error.ff_list_buttons .ff-el-input--content .ff-el-form-check label > span{ border-color: var(--ff-danger) !important }
.fluentform .frm-fluent-form .ff-el-group.ff_list_buttons .error.text-danger{ flex-basis:100% }
/* ---- 30.7 زر الإرسال ---- */
.fluentform .frm-fluent-form .ff_submit_btn_wrapper{ margin:6px 0 0; text-align:right }
.fluentform .frm-fluent-form .ff_submit_btn_wrapper .ff-btn-submit{
position:relative; isolation:isolate; overflow:hidden;
display:inline-flex; align-items:center; justify-content:center; gap:12px;
min-height:54px; padding:15px 34px; margin:0;
border:0; border-radius:0; box-shadow:none; cursor:pointer;
background: var(--ff-btn-bg); color: var(--ff-btn-fg);
font-family:inherit; font-size: var(--fs-md); font-weight:700; line-height:1.2;
transition: color .28s ease, transform .18s ease, opacity .2s ease;
}
.fluentform .frm-fluent-form .ff_submit_btn_wrapper .ff-btn-submit::before{
content:""; position:absolute; inset:0; z-index:-1; background: var(--ff-btn-sweep);
transform:scaleX(0); transform-origin:right center;
transition: transform .42s cubic-bezier(.22,1,.36,1);
}
.fluentform .frm-fluent-form .ff_submit_btn_wrapper .ff-btn-submit::after{
content:"←"; display:inline-block; opacity:.6;
transition: transform .32s cubic-bezier(.22,1,.36,1), opacity .32s ease;
}
.fluentform .frm-fluent-form .ff_submit_btn_wrapper .ff-btn-submit:hover,
.fluentform .frm-fluent-form .ff_submit_btn_wrapper .ff-btn-submit:focus-visible{ color: var(--ff-btn-fg-hover) }
.fluentform .frm-fluent-form .ff_submit_btn_wrapper .ff-btn-submit:hover::before,
.fluentform .frm-fluent-form .ff_submit_btn_wrapper .ff-btn-submit:focus-visible::before{ transform:scaleX(1) }
.fluentform .frm-fluent-form .ff_submit_btn_wrapper .ff-btn-submit:hover::after{ transform:translateX(-6px); opacity:1 }
.fluentform .frm-fluent-form .ff_submit_btn_wrapper .ff-btn-submit:focus-visible{ outline:2px solid var(--ecs-hv); outline-offset:3px }
.fluentform .frm-fluent-form .ff_submit_btn_wrapper .ff-btn-submit:active{ transform:translateY(1px) }
/* ويدجت Fluent في إليمنتور يطبع لونًا أزرق افتراضيًا للزر بـ !important
على مستوى العنصر (form_submit_button_bg_color_normal = #1a7efb) حتى لو
لم يُضبط. هذه القاعدة أعلى أسبقية منه، فيبقى لون الزر من السياق. */
.elementor .elementor-widget-fluent-form-widget .fluentform-widget-wrapper .fluentform .frm-fluent-form .ff-el-group.ff_submit_btn_wrapper .ff-btn-submit{
background-color: var(--ff-btn-bg) !important; color: var(--ff-btn-fg) !important;
}
.elementor .elementor-widget-fluent-form-widget .fluentform-widget-wrapper .fluentform .frm-fluent-form .ff-el-group.ff_submit_btn_wrapper .ff-btn-submit:hover,
.elementor .elementor-widget-fluent-form-widget .fluentform-widget-wrapper .fluentform .frm-fluent-form .ff-el-group.ff_submit_btn_wrapper .ff-btn-submit:focus-visible{
color: var(--ff-btn-fg-hover) !important;
}
/* أثناء الإرسال: شريط تقدّم رفيع بدل السهم */
.fluentform .frm-fluent-form .ff_submit_btn_wrapper .ff-btn-submit.ff-working,
.fluentform .frm-fluent-form .ff_submit_btn_wrapper .ff-btn-submit:disabled{ pointer-events:none; opacity:.82 }
.fluentform .frm-fluent-form .ff_submit_btn_wrapper .ff-btn-submit.ff-working::after{
content:""; position:absolute; right:0; left:0; bottom:0; height:3px; opacity:1;
background: currentColor; transform:none; animation: ff-progress-anim 4s 0s infinite;
}
/* ---- 30.8 رسالة النجاح ---- */
.fluentform .ff-message-success{
position:relative; margin:0; padding:22px 64px 22px 22px;
border:1px solid var(--ff-line); border-top:3px solid var(--ecs-hv);
background: var(--ff-ok-bg); box-shadow:none; color: var(--ff-ok-text);
font-size: var(--fs-sm); line-height:1.7;
animation: ecs-ff-in .45s cubic-bezier(.22,1,.36,1) both;
}
.fluentform .ff-message-success::before{
content:""; position:absolute; top:22px; right:22px; width:28px; height:28px;
background: var(--ecs-hv) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%232A1D00' stroke-width='2'/%3E%3C/svg%3E") center/16px no-repeat;
}
.fluentform .ff-message-success p{ margin:0 0 6px }
.fluentform .ff-message-success p:last-child{ margin:0 }
.fluentform .ff-message-success strong{ display:block; font-size: var(--fs-md); color: var(--ff-text) }
@keyframes ecs-ff-in{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
/* ---- 30.9 الهاتف ---- */
@media (max-width: 767px){
/* 16px يمنع iOS من تكبير الصفحة عند لمس الحقل */
.fluentform .frm-fluent-form .ff-el-form-control{ font-size:16px; min-height:52px }
.fluentform .frm-fluent-form .ff-t-container{ gap:0 }
.fluentform .frm-fluent-form .ff-t-cell{ flex-basis:100% !important }
.fluentform .frm-fluent-form .ff_submit_btn_wrapper .ff-btn-submit{ width:100% }
.fluentform .frm-fluent-form .ff-el-group.ff_list_buttons .ff-el-input--content .ff-el-form-check label > span{ padding:10px 14px }
}
@media (prefers-reduced-motion: reduce){
.fluentform .frm-fluent-form .ff_submit_btn_wrapper .ff-btn-submit::before,
.fluentform .frm-fluent-form .ff_submit_btn_wrapper .ff-btn-submit::after{ transition:none }
.fluentform .ff-message-success{ animation:none }
}
/* ---- 30.10 بطاقة التقديم السريع (صفحة الوظائف) ----
إطار كحلي بسماكة 8px · شريط كهرماني · جسم أبيض. */
.e-con.ecs-apply{ background: var(--ecs-ink); padding:8px; gap:0; --gap:0px }
.ecs-apply__strip .elementor-heading-title{
display:flex; align-items:center; justify-content:center; gap:10px;
padding:12px 16px; background: var(--ecs-hv); color: var(--ecs-hv-ink);
font-family: var(--ecs-sans); font-size: var(--fs-sm); font-weight:700; text-align:center;
}
.e-con.ecs-apply__body{ background:#FFFFFF; padding:26px 24px 22px; gap:0; --gap:0px }
.ecs-apply__title .elementor-heading-title{
font-size: var(--ecs-lg); color: var(--ecs-ink); margin:0 0 18px; line-height:1.35;
}
/* داخل البطاقة: زر الإرسال وزر واتساب بعرض كامل ومتطابقان */
.ecs-apply__body .fluentform .frm-fluent-form .ff_submit_btn_wrapper .ff-btn-submit{ width:100% }
/* زر واتساب: خطّي كحلي. الكلاس على غلاف الويدجت، فنصفّر غلافه
(قاعدة .ecs-btn العامة تعطي الغلاف حشوًا وحدًّا) ونرسم الزر نفسه. */
.ecs-apply__or.ecs-btn{ padding:0; border:0; background:none; margin-top:10px; min-height:0 }
.ecs-apply .ecs-apply__or.ecs-btn .elementor-button{
width:100%; background:transparent; border-color: var(--ecs-ink); color: var(--ecs-ink);
}
.ecs-apply .ecs-apply__or.ecs-btn .elementor-button::before{ background: var(--ecs-ink) }
.ecs-apply .ecs-apply__or.ecs-btn .elementor-button:hover{ color:#fff }
.ecs-apply__fine{ margin-top:16px; text-align:center }
.ecs-apply__fine p{ margin:0; font-size: var(--fs-xs); line-height:1.8; color: var(--ecs-muted) }
.ecs-apply__fine b{ color: var(--ecs-hv-d); font-weight:700 }
@media (max-width: 767px){
.e-con.ecs-apply__body{ padding:22px 18px 18px }
}
/* ---- 30.11 قسم التواصل في الرئيسية: نموذج واسع + عمود بيانات ---- */
.e-con.ecs-contact{
display:grid !important; grid-template-columns: minmax(0,1.45fr) minmax(0,.55fr);
gap: clamp(28px, 4vw, 56px); align-items:start;
}
.ecs-contact__note{ margin-top:18px }
.ecs-contact__note p{ margin:0; font-size: var(--fs-xs); line-height:1.8; color: var(--ecs-muted-d) }
@media (max-width: 1024px){
.e-con.ecs-contact{ grid-template-columns: minmax(0,1fr) }
}
/* ============================================================
31 — RHYTHM & BUTTON WRAPPERS
============================================================ */
/* ---- 31.1 إيقاع الرئيسية: فراغ أقل بين الأقسام ----
كان كل قسم يحمل 88px أعلى وأسفل + 10px حشو داخلي افتراضي من إليمنتور،
أي نحو 200px فارغة بين آخر محتوى قسم وأول محتوى الذي يليه.
الآن 64px على الشاشات الكبيرة و40px على الهاتف، بلا الحشو الداخلي.
بدأ على الرئيسية و«اتصل بنا»، وعُمِّم على كل الصفحات في 1.23 (المتغير في القسم 00). */
.e-con.ecs-sec > .e-con-inner,
.e-con.ecs-sec--tight > .e-con-inner{ padding-top:0; padding-bottom:0 }
/* الأقسام القصيرة (القطاعات، الوظائف): 48px على الكبيرة، ولا أقل من 32px على الهاتف */
.e-con.ecs-sec--tight{ padding-block: max(32px, calc(var(--ecs-sect) * .75)) }
/* ---- 31.2 غلاف ويدجت الزر ----
إليمنتور يضع كلاس .ecs-btn على غلاف الويدجت، فكانت قواعد القسم 04
(حشو 15×22 وحدّ وخلفية الصيغة) ترسم إطارًا ثانيًا حول الزر: الأزرار
الممتلئة تبدو أكبر من مقاسها (93px بدل 58px) والخطية بإطارين.
الغلاف حاوية فقط، والشكل كله على .elementor-button (القسم 16). */
.elementor-widget-button.ecs-btn,
.elementor-widget-button.ecs-btn:hover{
padding:0; border:0; background:transparent; min-height:0; box-shadow:none;
}
@media (max-width: 767px){
.elementor-widget-button.ecs-btn .elementor-button{ width:100% }
}
/* ============================================================
32 — CONTACT PAGE (بطاقات التواصل · الأسئلة الشائعة)
============================================================ */
/* ---- 32.1 بطاقات التواصل: ويدجت Icon Box الأصلي بكلاس .ecs-ccard ----
الأيقونة والعنوان والنص والرابط تُعدَّل من إليمنتور. الوصف يحمل
القيمةملاحظة. البطاقة كلها تُنقر حين يكون لها رابط. */
.e-con.ecs-ccards{
display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr));
gap:12px; --gap:12px; align-items:stretch;
}
.elementor-widget-icon-box.ecs-ccard{ position:relative; height:100% }
/* أسبقية أعلى من widget-icon-box.css الذي يوسّط كل شيء في وضع «أعلى» */
.elementor .elementor-widget-icon-box.ecs-ccard .elementor-icon-box-wrapper,
.elementor .elementor-widget-icon-box.ecs-ccard .elementor-icon-box-content{ text-align:right }
.ecs-ccard .elementor-icon-box-wrapper{
display:flex !important; flex-direction:column; align-items:flex-start; gap:14px;
height:100%; padding:20px 20px 18px; text-align:right;
background: var(--ecs-paper); border:1px solid var(--ecs-line);
transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.ecs-ccard .elementor-icon-box-icon{ margin:0 !important; line-height:0; flex:none }
.ecs-ccard .elementor-icon{
display:grid; place-items:center; width:46px; height:46px;
background: var(--ecs-ink); color: var(--ecs-hv); fill: var(--ecs-hv);
font-size:19px; border:0; border-radius:0;
transition: background-color .2s ease, color .2s ease, fill .2s ease;
}
.ecs-ccard .elementor-icon svg{ width:1em; height:1em; fill: currentColor }
.ecs-ccard .elementor-icon i{ color: inherit }
.ecs-ccard .elementor-icon-box-content{ min-width:0; width:100% }
.ecs-ccard .elementor-icon-box-title{
margin:0 0 6px; font-family: var(--ecs-sans); font-size: var(--fs-xs);
font-weight:700; line-height:1.4; color: var(--ecs-muted);
}
.ecs-ccard .elementor-icon-box-title a,
.ecs-ccard .elementor-icon-box-title span{ color: inherit }
.ecs-ccard .elementor-icon-box-description{ margin:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px }
.ecs-ccard .elementor-icon-box-description b{
font-family: var(--ecs-display); font-size: var(--fs-md); font-weight:700;
line-height:1.35; color: var(--ecs-ink); overflow-wrap:anywhere;
}
.ecs-ccard .elementor-icon-box-description span{ font-size: var(--fs-xs); line-height:1.6; color: var(--ecs-muted) }
.ecs-ccard .elementor-icon-box-title a::after{ content:""; position:absolute; inset:0 }
.ecs-ccard:has(a):hover .elementor-icon-box-wrapper,
.ecs-ccard:focus-within .elementor-icon-box-wrapper{
background:#FFFFFF; border-color: var(--ecs-ink); box-shadow: inset 0 3px 0 var(--ecs-hv);
}
.ecs-ccard:has(a):hover .elementor-icon{ background: var(--ecs-hv); color: var(--ecs-ink); fill: var(--ecs-ink) }
.ecs-ccard a:focus-visible{ outline:2px solid var(--ecs-hv); outline-offset:2px }
/* رابط الهاتف والبريد في البطاقة لا يحتاج 44px (القسم 14): البطاقة كلها هي الهدف */
.ecs-ccard .elementor-icon-box-title a{ display:inline; min-height:0 }
@media (max-width: 520px){
.e-con.ecs-ccards{ grid-template-columns: minmax(0,1fr) }
.elementor .elementor-widget-icon-box.ecs-ccard .elementor-icon-box-wrapper{
flex-direction:row; align-items:center; gap:14px; padding:16px;
}
}
/* ---- 32.2 الأسئلة الشائعة: مقدمة جانبية + قائمة ---- */
.e-con.ecs-faqgrid{
display:grid !important; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
gap: clamp(28px, 4vw, 64px); align-items:start;
}
.ecs-faqgrid__intro .ecs-lede a{
color: var(--ecs-ink); font-weight:700; white-space:nowrap;
border-bottom:2px solid var(--ecs-hv); padding-bottom:1px;
}
.ecs-qa .a a{ color: var(--ecs-ink); font-weight:700; border-bottom:2px solid var(--ecs-hv) }
@media (max-width: 1024px){
.e-con.ecs-faqgrid{ grid-template-columns: minmax(0,1fr) }
}
/* ============================================================
33 — SERVICE TEMPLATE (صفحات الخدمات الثماني)
------------------------------------------------------------
البنية: هيرو ببطاقة الخدمة ← شريط أقسام ثابت ← قبل/بعد ←
نطاق الخدمة ← مصفوفة المسؤولية ← الإطار القانوني ← الخط
الزمني ← المستندات ← الأسئلة ← خدمات مرتبطة ← طلب العرض.
كل عنصر هنا ويدجت أصلي في إليمنتور أو HTML بسيط يُعدَّل نصه.
============================================================ */
/* ---- 33.1 الهيرو: نص + بطاقة الخدمة ---- */
.ecs-crumbs{ margin-bottom:22px }
.ecs-crumbs nav{
display:flex; flex-wrap:wrap; align-items:center; gap:8px;
font-size: var(--fs-xs); color:#8FA4BB;
}
.ecs-crumbs a{ color:#C3D2E2; border-bottom:1px solid transparent; transition: border-color var(--ecs-tr) }
.ecs-crumbs a:hover{ border-bottom-color: var(--ecs-hv) }
.ecs-crumbs b{ color:#fff; font-weight:600 }
.ecs-crumbs span{ opacity:.5 }
.e-con.ecs-shero__grid{
display:grid !important; grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr);
gap: clamp(28px, 4vw, 64px); align-items:end;
}
/* .elementor في المحدِّد: قاعدة إليمنتور .e-con.e-flex بنفس الأسبقية تُحمَّل بعدنا وتعيدها عمودًا */
.elementor .e-con.ecs-shero__cta{
--flex-direction:row; --flex-wrap:wrap; --gap:12px; --container-widget-width:auto;
display:flex !important; flex-flow:row wrap; align-items:center; gap:12px; margin-top:8px;
}
.elementor .e-con.ecs-shero__cta > .elementor-widget-button{ width:auto; max-width:100%; flex:none }
.ecs-shero__trust p{
margin:18px 0 0; font-size: var(--fs-xs); color:#8FA4BB; letter-spacing:.01em;
}
.ecs-shero__trust b{ color:#fff; font-weight:600 }
/* بطاقة الخدمة — ورقة مواصفات */
.e-con.ecs-spec{
position:relative; padding:24px 24px 18px;
background: rgba(255,255,255,.04); border:1px solid var(--ecs-line-d);
backdrop-filter: blur(2px);
}
.e-con.ecs-spec::before{
content:""; position:absolute; top:-1px; right:-1px; left:-1px; height:3px; background: var(--ecs-hv);
}
.ecs-spec__head .elementor-heading-title{
display:flex; justify-content:space-between; align-items:center; gap:12px;
font-family: var(--ecs-sans); font-size: var(--fs-xxs); font-weight:700;
letter-spacing:.06em; color:#8FA4BB; margin-bottom:6px;
}
.ecs-spec .ecs-specs .elementor-icon-list-item{ padding:12px 0; font-size: var(--fs-xs) }
.ecs-spec .ecs-specs .elementor-icon-list-item:first-child{ border-top:0 }
.ecs-spec .ecs-specs b{ font-size: var(--fs-md); text-align:left }
@media (max-width: 1024px){
.e-con.ecs-shero__grid{ grid-template-columns: minmax(0,1fr); align-items:start }
}
/* ---- 33.2 شريط الأقسام الثابت ---- */
.e-con.ecs-snav{
position:sticky; top:0; z-index:40;
background: rgba(255,255,255,.96); border-bottom:1px solid var(--ecs-line);
-webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px);
}
.ecs-snav__in{
display:flex; align-items:center; gap:4px; overflow-x:auto; scrollbar-width:none;
-webkit-overflow-scrolling: touch;
}
.ecs-snav__in::-webkit-scrollbar{ display:none }
.ecs-snav__in a{
position:relative; flex:none; display:inline-flex; align-items:center; min-height:54px;
padding:0 14px; font-size: var(--fs-sm); font-weight:600; color: var(--ecs-muted);
white-space:nowrap; transition: color var(--ecs-tr);
}
.ecs-snav__in a::after{
content:""; position:absolute; right:14px; left:14px; bottom:0; height:3px;
background: var(--ecs-hv); transform:scaleX(0); transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.ecs-snav__in a:hover,
.ecs-snav__in a.is-on{ color: var(--ecs-ink) }
.ecs-snav__in a.is-on::after{ transform:scaleX(1) }
.ecs-snav__in a.is-cta{
margin-inline-start:auto; min-height:40px; padding:0 18px;
background: var(--ecs-ink); color:#fff;
}
.ecs-snav__in a.is-cta::after{ display:none }
.ecs-snav__in a.is-cta:hover{ background: var(--ecs-hv); color: var(--ecs-hv-ink) }
/* الأقسام المستهدفة تتوقف تحت الشريط لا خلفه */
.e-con[id]{ scroll-margin-block-start: 70px }
/* ---- 33.3 قبل / بعد ---- */
.ecs-compare table{
width:100%; border-collapse:separate; border-spacing:0;
background: var(--ecs-white); border:1px solid var(--ecs-line); font-size: var(--fs-sm);
}
.ecs-compare th{
padding:15px 20px; text-align:start; font-size: var(--fs-xxs); font-weight:700; letter-spacing:.05em;
background: var(--ecs-paper); color: var(--ecs-muted); border-bottom:1px solid var(--ecs-line);
}
.ecs-compare th:last-child{ background: var(--ecs-ink); color: var(--ecs-hv) }
.ecs-compare td{ padding:16px 20px; vertical-align:top; line-height:1.65; border-top:1px solid var(--ecs-line) }
.ecs-compare tbody tr:first-child td{ border-top:0 }
.ecs-compare td:first-child{ font-weight:700; color: var(--ecs-ink); width:26% }
.ecs-compare td:nth-child(2){ color: var(--ecs-muted) }
.ecs-compare td:last-child{ background: rgba(242,160,7,.07); color: var(--ecs-ink); font-weight:600 }
.ecs-compare td:last-child::before{
content:""; display:inline-block; width:8px; height:8px; background: var(--ecs-hv);
margin-inline-end:9px; vertical-align:middle; transform:translateY(-1px);
}
@media (max-width: 767px){
.ecs-compare table, .ecs-compare tbody, .ecs-compare tr, .ecs-compare td{ display:block; width:100% }
.ecs-compare thead{ display:none }
.ecs-compare tr{ border-top:1px solid var(--ecs-line) }
.ecs-compare tbody tr:first-child{ border-top:0 }
.ecs-compare td{ border-top:0; padding:10px 16px }
.ecs-compare td:first-child{ width:auto; padding-top:16px; font-size: var(--fs-md) }
/* التسمية فوق القيمة: الخلية عمود مرن، والتسمية أول عناصره */
.ecs-compare td[data-label]{ display:flex; flex-direction:column; gap:3px }
.ecs-compare td[data-label]::after{
content: attr(data-label); order:-1;
font-size: var(--fs-xxs); font-weight:700; letter-spacing:.04em; color: var(--ecs-muted);
}
.ecs-compare td:last-child::before{ display:none }
.ecs-compare td:last-child{ padding-bottom:16px; box-shadow: inset -3px 0 0 var(--ecs-hv) }
.ecs-compare td:last-child::after{ color: var(--ecs-hv-d) }
}
/* ---- 33.4 نطاق الخدمة: بطاقة + مخرج ---- */
.ecs-card__out{
display:block; margin-top:auto; padding-top:14px; border-top:1px dashed var(--ecs-line);
font-size: var(--fs-xxs); font-weight:700; letter-spacing:.02em; color: var(--ecs-hv-d);
}
.ecs-card.ecs-scope{ display:flex; flex-direction:column; height:100% }
.ecs-card.ecs-scope p{ margin-bottom:14px }
/* ---- 33.5 الإطار القانوني ---- */
.e-con.ecs-laws{
display:grid !important; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:16px;
}
.ecs-law{
height:100%; padding:26px 24px 22px; display:flex; flex-direction:column;
background: rgba(255,255,255,.035); border:1px solid var(--ecs-line-d);
transition: border-color var(--ecs-tr), background-color var(--ecs-tr);
}
.ecs-law:hover{ border-color: rgba(242,160,7,.55); background: rgba(255,255,255,.055) }
.ecs-law__no{
display:inline-flex; align-self:flex-start; gap:6px; align-items:baseline;
padding:6px 11px; margin-bottom:16px; border:1px solid var(--ecs-hv);
color: var(--ecs-hv); font-size: var(--fs-xxs); font-weight:700; letter-spacing:.03em;
}
.ecs-law__no b{ font-family:'Barlow Condensed',sans-serif; font-size:17px; font-variant-numeric:tabular-nums }
.ecs-law :is(h2,h3,h4,h5){ color:#fff; font-size: var(--ecs-h4); margin:0 0 12px }
.ecs-law ul{ list-style:none; margin:0 0 16px; padding:0 }
.ecs-law li{
position:relative; padding:7px 18px 7px 0; font-size: var(--fs-sm); line-height:1.65; color:#C3D2E2;
border-top:1px solid rgba(255,255,255,.06);
}
.ecs-law li:first-child{ border-top:0 }
.ecs-law li::before{
content:""; position:absolute; right:0; top:15px; width:6px; height:6px; background: var(--ecs-hv);
}
.ecs-law li b{ color:#fff; font-weight:700 }
.ecs-law__we{
margin-top:auto; padding-top:14px; border-top:1px solid var(--ecs-line-d);
font-size: var(--fs-xs); line-height:1.7; color:var(--ecs-muted-d);
}
.ecs-law__we b{ color: var(--ecs-hv); font-weight:700 }
.ecs-laws__note p{ margin:18px 0 0; font-size: var(--fs-xxs); color:#7E93AC; line-height:1.7 }
/* ---- 33.6 الخط الزمني ---- */
.e-con.ecs-steps.ecs-tl{
grid-template-columns:none !important; grid-auto-flow:column; grid-auto-columns: minmax(0,1fr);
border:0; background:transparent; position:relative; counter-reset: tl;
}
.e-con.ecs-steps.ecs-tl::before{
/* يمر بمنتصف مربعات الأرقام (46px) تحت حشو الحاوية العلوي من إليمنتور */
content:""; position:absolute; top:calc(var(--padding-top, 0px) + 22px); right:0; left:0; height:2px;
background: repeating-linear-gradient(90deg, var(--ecs-line) 0 8px, transparent 8px 14px);
}
.e-con.ecs-tl > .e-con.ecs-step{
position:relative; border:0 !important; padding:0 0 0 24px !important; background:transparent;
}
.ecs-tl .ecs-t-num .elementor-heading-title{
position:relative; z-index:1; display:inline-grid; place-items:center;
width:46px; height:46px; margin-bottom:18px;
background: var(--ecs-ink); color: var(--ecs-hv);
font-family:'Barlow Condensed',sans-serif; font-size:19px; font-weight:700;
}
.ecs-tl .ecs-t-dur .elementor-heading-title{
display:inline-block; margin-bottom:10px; padding:4px 10px;
background: var(--ecs-hv-soft); color: var(--ecs-hv-d);
font-size: var(--fs-xxs); font-weight:700; letter-spacing:.02em;
}
.ecs-tl :is(h2,h3,h4,h5){ margin-bottom:8px }
.ecs-tl p{ font-size: var(--fs-sm); color: var(--ecs-muted); margin:0 }
@media (max-width: 1024px){
.e-con.ecs-steps.ecs-tl{ grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns: minmax(0,1fr) !important; gap:0 }
.e-con.ecs-steps.ecs-tl::before{ top:var(--padding-top, 0px); bottom:0; right:22px; left:auto; width:2px; height:auto;
background: repeating-linear-gradient(180deg, var(--ecs-line) 0 8px, transparent 8px 14px) }
.e-con.ecs-tl > .e-con.ecs-step{ padding:0 64px 28px 0 !important }
.ecs-tl .ecs-t-num{ position:absolute; right:0; top:0 }
.ecs-tl .ecs-t-num .elementor-heading-title{ margin:0 }
}
/* ---- 33.7 المستندات: Icon Box أفقي ---- */
.e-con.ecs-docs{
display:grid !important; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px;
}
.elementor-widget-icon-box.ecs-doc{ height:100% }
.elementor .elementor-widget-icon-box.ecs-doc .elementor-icon-box-wrapper{
display:flex !important; flex-direction:row; align-items:flex-start; gap:14px; height:100%;
padding:18px; text-align:right; background: var(--ecs-white); border:1px solid var(--ecs-line);
transition: border-color var(--ecs-tr);
}
.elementor .elementor-widget-icon-box.ecs-doc .elementor-icon-box-content{ text-align:right }
.ecs-doc:hover .elementor-icon-box-wrapper{ border-color: var(--ecs-ink) }
.ecs-doc .elementor-icon-box-icon{ margin:0 !important; line-height:0; flex:none }
.ecs-doc .elementor-icon{
display:grid; place-items:center; width:42px; height:42px; font-size:17px;
background: var(--ecs-hv-soft); color: var(--ecs-hv-d); fill: var(--ecs-hv-d);
}
.ecs-doc .elementor-icon svg{ width:1em; height:1em; fill: currentColor }
.ecs-doc .elementor-icon-box-title{
margin:0 0 4px; font-family: var(--ecs-display); font-size: var(--fs-md); font-weight:700;
line-height:1.4; color: var(--ecs-ink);
}
.ecs-doc .elementor-icon-box-description{ margin:0; font-size: var(--fs-xs); line-height:1.6; color: var(--ecs-muted) }
.ecs-doc .elementor-icon-box-description b{
display:table; margin:0 0 6px; padding:2px 8px; font-size: var(--fs-xxs);
background: var(--ecs-paper); border:1px solid var(--ecs-line); color: var(--ecs-ink); font-weight:700;
}
@media (max-width: 1024px){ .e-con.ecs-docs{ grid-template-columns: repeat(2, minmax(0,1fr)) } }
@media (max-width: 600px){ .e-con.ecs-docs{ grid-template-columns: minmax(0,1fr) } }
/* ---- 33.8 خدمات مرتبطة ---- */
.ecs-card.ecs-rel{ display:flex; flex-direction:column; height:100% }
.ecs-card.ecs-rel :is(h2,h3,h4,h5) a::after{ content:""; position:absolute; inset:0; z-index:1 }
.ecs-card.ecs-rel .ecs-more{ margin-top:auto }
/* ---- 33.9 على الهاتف ---- */
@media (max-width: 767px){
.elementor .e-con.ecs-shero__cta > .elementor-widget-button{ width:100%; flex:1 1 100% }
}
/* ============================================================
34 — GLOBAL POLISH (تفاصيل صغيرة على مستوى الموقع كله)
============================================================ */
::selection{ background: var(--ecs-hv); color: var(--ecs-hv-ink) }
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }
input[type="checkbox"], input[type="radio"], progress{ accent-color: var(--ecs-hv) }
/* الأرقام في الجداول والمواصفات بعرض ثابت، فتصطف الأعمدة */
.ecs-table td, .ecs-compare td, .ecs-specs b, .ecs-law li{ font-variant-numeric: tabular-nums }
/* شبكة هندسية خافتة على الأقسام الداكنة في قالب الخدمات — هوية صناعية بلا صور */
.e-con.ecs-shero,
.e-con.ecs-sec.ecs-dark:has(.ecs-laws){
background-image:
linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
background-size: 56px 56px;
background-position: center top;
}
/* ---- 34.2 صقل عام إضافي (1.24) ---- */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100% }
a, button, summary, .elementor-button{ -webkit-tap-highlight-color: transparent }
/* ضغطة محسوسة على الأزرار في اللمس والماوس */
.elementor-button:active, .ecs-snav__in a.is-cta:active{ transform: translateY(1px) }
/* الأسئلة تنفتح بانسياب في المتصفحات التي تدعم ذلك، وتبقى فورية في غيرها */
@supports (interpolate-size: allow-keywords){
.ecs-qa{ interpolate-size: allow-keywords }
.ecs-qa details::details-content{
block-size:0; overflow:clip;
transition: block-size .32s cubic-bezier(.22,1,.36,1), content-visibility .32s allow-discrete;
}
.ecs-qa details[open]::details-content{ block-size:auto }
}
@media (prefers-reduced-motion: reduce){
.ecs-qa details::details-content{ transition:none }
}
/* رقم أو بريد لاتيني داخل جملة عربية لا ينقلب ترتيبه */
.ecs-qa .a a, .ecs-lede a{ unicode-bidi:isolate }
/* ============================================================
35 — CAREERS (صفحة الوظائف — مسار الباحثين عن عمل)
------------------------------------------------------------
الهيرو وشريط الأقسام والخط الزمني والمستندات والأسئلة من القسم 33.
هنا ما يخص المتقدّم فقط: تنبيه الاحتيال · الطرق الثلاث · بطاقات
الحقوق · شبكة مستندات رباعية · الخاتمة · شريط التقديم على الهاتف.
============================================================ */
/* ---- 35.1 الهيرو: شريط الأرقام تحت الشبكة ---- */
.ecs-chero .e-con.ecs-facts{ margin-top:0 }
/* ---- 35.2 تنبيه الاحتيال ---- */
.ecs-warn{
display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:18px 26px; align-items:center;
padding:24px 26px; background: var(--ecs-hv-soft);
border:1px solid rgba(162,96,0,.22); box-shadow: inset -4px 0 0 var(--ecs-hv);
}
.ecs-warn__ic{
display:grid; place-items:center; width:52px; height:52px; background: var(--ecs-ink); color: var(--ecs-hv);
}
.ecs-warn__ic svg{ width:26px; height:26px; fill: currentColor }
.ecs-warn__t :is(h2,h3,h4,h5){ font-size: clamp(19px, 2vw, 24px); line-height:1.4; margin:0 0 6px; color: var(--ecs-ink) }
.ecs-warn__t p{ margin:0; font-size: var(--fs-sm); line-height:1.75; color:#4A3A1C }
.ecs-warn__c{ list-style:none; margin:0; padding:0; display:grid; gap:6px; min-width:230px }
.ecs-warn__c li{
padding:8px 12px; background:#FFFFFF; border:1px solid rgba(162,96,0,.18);
font-size: var(--fs-xs); color: var(--ecs-muted); line-height:1.5;
}
.ecs-warn__c b{ color: var(--ecs-ink); font-weight:700; unicode-bidi:isolate }
@media (max-width: 1024px){
.ecs-warn{ grid-template-columns:auto minmax(0,1fr) }
.ecs-warn__c{ grid-column:1 / -1; grid-template-columns:repeat(3, minmax(0,1fr)); min-width:0 }
}
@media (max-width: 600px){
.ecs-warn{ grid-template-columns:minmax(0,1fr); padding:20px 18px }
.ecs-warn__c{ grid-template-columns:minmax(0,1fr) }
}
/* ---- 35.3 من أين تبدأ: ثلاث طرق ---- */
.e-con.ecs-paths{
display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px;
}
/* .elementor-widget في المحدِّد: قاعدة إليمنتور لاتجاه عناصر الفلكس تسبقنا بنفس الأسبقية */
.elementor-widget.ecs-path{
--flex-direction:column;
position:relative; height:100%; display:flex; flex-direction:column;
padding:24px 22px 20px; background: var(--ecs-white); border:1px solid var(--ecs-line);
transition: border-color var(--ecs-tr), transform var(--ecs-tr), box-shadow var(--ecs-tr);
}
.ecs-path::before{ content:""; position:absolute; top:-1px; right:-1px; left:-1px; height:3px; background: var(--ecs-ink) }
.e-con.ecs-paths > :nth-child(3) .ecs-path::before,
.e-con.ecs-paths > .ecs-path:nth-child(3)::before{ background: var(--ecs-hv) }
@media (hover:hover){
.ecs-path:hover{ border-color: var(--ecs-ink); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,29,44,.08) }
}
.ecs-path__n{
font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size: var(--fs-sm);
color: var(--ecs-hv-d); margin-bottom:10px; font-variant-numeric:tabular-nums;
}
.ecs-path :is(h2,h3,h4,h5){ font-size: var(--ecs-h4); margin:0 0 10px }
.ecs-path__r{ margin:0 0 14px; font-size: var(--fs-sm); line-height:1.8; color: var(--ecs-ink); font-weight:600 }
.ecs-path__h{
margin:auto 0 0; padding-top:12px; border-top:1px dashed var(--ecs-line);
font-size: var(--fs-xs); line-height:1.6; color: var(--ecs-muted);
}
.ecs-fams__eyebrow{ margin-top:40px }
@media (max-width: 900px){ .e-con.ecs-paths{ grid-template-columns: minmax(0,1fr) } }
/* ---- 35.4 الحقوق: القاعدة + كيف تتأكد ---- */
.e-con.ecs-rights{
display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0;
}
.elementor-widget.ecs-right{
--flex-direction:column;
height:100%; display:flex; flex-direction:column; padding:26px 24px 22px;
background: var(--ecs-white); box-shadow: 0 0 0 1px var(--ecs-line);
}
.ecs-right__n{
display:inline-grid; place-items:center; align-self:flex-start; width:38px; height:38px; margin-bottom:14px;
background: var(--ecs-ink); color: var(--ecs-hv);
font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:16px; font-variant-numeric:tabular-nums;
}
.ecs-right :is(h2,h3,h4,h5){ font-size: var(--ecs-h4); margin:0 0 8px }
.ecs-right p{ margin:0 0 14px; font-size: var(--fs-sm); line-height:1.75; color: var(--ecs-muted) }
.ecs-right p b{ color: var(--ecs-ink); font-weight:700 }
.ecs-right .ecs-right__chk{
margin:auto 0 0; padding:10px 12px; background: var(--ecs-paper);
font-size: var(--fs-xs); line-height:1.65; color: var(--ecs-ink);
}
.ecs-right__chk b{ color: var(--ecs-hv-d) }
.ecs-rights__note p{ margin:16px 0 0; font-size: var(--fs-xxs); line-height:1.7; color: var(--ecs-muted) }
@media (max-width: 1024px){ .e-con.ecs-rights{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width: 600px){ .e-con.ecs-rights{ grid-template-columns: minmax(0,1fr) } }
/* ---- 35.5 المستندات: أربعة أعمدة ---- */
.e-con.ecs-docs.ecs-docs--4{ grid-template-columns: repeat(4, minmax(0,1fr)) }
@media (max-width: 1100px){ .e-con.ecs-docs.ecs-docs--4{ grid-template-columns: repeat(2, minmax(0,1fr)) } }
@media (max-width: 600px){ .e-con.ecs-docs.ecs-docs--4{ grid-template-columns: minmax(0,1fr) } }
/* ---- 35.6 التقديم: «بعد أن ترسل» ---- */
.ecs-apply__next .elementor-heading-title{
margin:26px 0 4px; font-family: var(--ecs-sans); font-size: var(--fs-xs); font-weight:700;
color: var(--ecs-hv-d);
}
/* ---- 35.7 الخاتمة: سطر واحد وزرّان ---- */
.e-con.ecs-cend__in{
display:grid !important; grid-template-columns: minmax(0,1fr) auto; gap:20px 40px; align-items:center;
}
.ecs-cend :is(h2,h3,h4,h5){ font-size: clamp(22px, 2.6vw, 32px); line-height:1.35; margin:0 }
@media (max-width: 900px){ .e-con.ecs-cend__in{ grid-template-columns: minmax(0,1fr) } }
/* ---- 35.8 شريط التقديم الثابت على الهاتف ----
حاوية إليمنتور عادية بزرّين. تظهر على الهاتف فقط، وتختفي حين تظهر
بطاقة التقديم نفسها على الشاشة (cbar() في ecs.js يضيف .is-off). */
.e-con.ecs-cbar{ display:none !important }
@media (max-width: 767px){
.elementor .e-con.ecs-cbar{
--flex-direction:row; --gap:9px;
display:grid !important; grid-template-columns: 1.4fr 1fr; gap:9px;
position:fixed; inset-inline:0; bottom:0; z-index:90; margin:0;
padding:9px 12px calc(9px + env(safe-area-inset-bottom));
background: rgba(15,29,44,.97); box-shadow:0 -10px 28px rgba(5,13,24,.3);
transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.elementor .e-con.ecs-cbar.is-off{ transform: translateY(110%) }
.ecs-cbar .elementor-widget-button{ width:100% }
.ecs-cbar .elementor-button{ width:100%; min-height:48px; padding-block:12px }
body:has(.ecs-cbar){ padding-bottom:78px }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce){
.elementor .e-con.ecs-cbar{ transition:none }
}
/* ---- 34.3 الطباعة (1.25) ----
صفحات مثل «كيف نعمل» تُطبع وتُرفق بملف المورّد. النسخة المطبوعة بلا
هيدر ولا فوتر ولا نماذج، والأقسام الداكنة تُطبع فاتحة، والأسئلة مفتوحة. */
@media print{
@page{ margin:14mm }
.ecs-snav, .e-con.ecs-cbar, .ecs-shero__cta, .elementor-widget-fluent-form-widget,
.ecs-ekhead, .ecs-ekfoot, .ecs-mobilebar, .ecs-crumbs{ display:none !important }
body{ background:#fff !important }
.ecs-dark, .ecs-hero, .e-con.ecs-spec{ background:#fff !important; background-image:none !important; color:var(--ecs-ink) !important }
.ecs-dark :is(h1,h2,h3,h4,p,li,b,span), .ecs-hero :is(h1,h2,h3,h4,p,li,b,span){ color:var(--ecs-ink) !important }
.ecs-rv, .ecs-rv--stagger > *{ opacity:1 !important; transform:none !important }
.ecs-qa details::details-content{ content-visibility:visible; block-size:auto }
table, .ecs-phase, .ecs-law, .ecs-right, .ecs-card, .ecs-rung, .ecs-bound{ break-inside:avoid }
.e-con.ecs-sec{ padding-block:18px !important }
}
/* ============================================================
36 — HOW WE WORK (صفحة «كيف نعمل» — نموذج التشغيل)
------------------------------------------------------------
المراحل كصفوف: مدة · ما يحدث · ما نحتاجه منكم · ما تستلمونه.
جدول التزامات بنقطة بداية لكل مدة · تقويم الشهر · حدود الدور ·
ما لا نفعله · مسار التصعيد.
============================================================ */
/* ---- 36.1 المراحل ---- */
.e-con.ecs-phases{ display:grid !important; grid-template-columns:minmax(0,1fr); gap:0; border-top:2px solid var(--ecs-ink) }
.elementor-widget.ecs-phase{
--flex-direction:row;
display:grid; grid-template-columns: 132px minmax(0,1.55fr) minmax(0,1fr) minmax(0,1fr);
gap:0 28px; align-items:start; padding:22px 0; border-bottom:1px solid var(--ecs-line);
transition: background-color var(--ecs-tr);
}
/* صفّ بلا عمودَي «نحتاج منكم / تستلمون منّا» يصير عمودين لا أربعة،
وإلا بقي نصف الصفّ فارغًا بلا سبب ظاهر. التخطيط يتبع المحتوى فلا يحتاج
المحرِّر إضافة صنف. ومن لا يدعم :has() يرى التخطيط الرباعي: تراجع مقبول. */
.elementor-widget.ecs-phase:not(:has(.ecs-phase__io)){
grid-template-columns: 132px minmax(0,1fr);
}
@media (hover:hover){ .elementor-widget.ecs-phase:not(.ecs-phase--head):hover{ background: var(--ecs-paper) } }
.elementor-widget.ecs-phase--head{ padding:12px 0; border-bottom:1px solid var(--ecs-line) }
.ecs-phase--head span{ font-size: var(--fs-xxs); font-weight:700; color: var(--ecs-muted) }
.ecs-phase__k{ display:flex; flex-direction:column; align-items:flex-start; gap:8px }
.ecs-phase__k b{
font-family:'Barlow Condensed',sans-serif; font-size:34px; line-height:1; color: var(--ecs-ink);
font-variant-numeric:tabular-nums;
}
.ecs-phase__k span{
padding:3px 9px; background: var(--ecs-hv-soft); color: var(--ecs-hv-d);
font-size: var(--fs-xxs); font-weight:700; line-height:1.6;
}
.ecs-phase__d :is(h2,h3,h4,h5){ font-size: var(--ecs-h4); margin:0 0 6px }
.ecs-phase__d p{ margin:0; font-size: var(--fs-sm); line-height:1.75; color: var(--ecs-muted) }
.ecs-phase__io{ font-size: var(--fs-sm); line-height:1.7; color: var(--ecs-ink); padding-top:4px }
.ecs-phase__io em{ display:none; font-style:normal }
.ecs-phase__out{ font-weight:700; box-shadow: inset -3px 0 0 var(--ecs-hv); padding-inline-start:12px }
@media (max-width: 900px){
.elementor-widget.ecs-phase{ grid-template-columns: minmax(0,1fr); gap:10px; padding:20px 0 }
.elementor-widget.ecs-phase--head{ display:none }
.ecs-phase__k{ flex-direction:row; align-items:center; gap:12px }
.ecs-phase__k b{ font-size:28px }
.ecs-phase__io{ padding:10px 12px; background: var(--ecs-paper) }
.ecs-phase__io em{ display:block; margin-bottom:2px; font-size: var(--fs-xxs); font-weight:700; color: var(--ecs-muted) }
.ecs-phase__out{ box-shadow: inset -3px 0 0 var(--ecs-hv) }
}
/* ---- 36.2 جدول الالتزامات ---- */
.ecs-sla table{
width:100%; border-collapse:separate; border-spacing:0; background: var(--ecs-white);
border:1px solid var(--ecs-line); font-size: var(--fs-sm);
}
.ecs-sla th{
padding:14px 20px; text-align:start; background: var(--ecs-ink); color:#fff;
font-size: var(--fs-xxs); font-weight:700;
}
.ecs-sla th:nth-child(2){ color: var(--ecs-hv) }
.ecs-sla td{ padding:15px 20px; border-top:1px solid var(--ecs-line); vertical-align:middle; line-height:1.6 }
.ecs-sla tbody tr:first-child td{ border-top:0 }
.ecs-sla td:first-child{ font-weight:600; color: var(--ecs-ink); width:44% }
.ecs-sla td:nth-child(2) b{
font-family: var(--ecs-display); font-size: var(--fs-md); font-weight:700; color: var(--ecs-ink);
font-variant-numeric:tabular-nums;
}
.ecs-sla td:nth-child(3){ color: var(--ecs-muted); font-size: var(--fs-xs) }
/* «من» تسبق نقطة البداية على الهاتف فقط: على الشاشة الكبيرة عنوان العمود يقولها */
/* تخطيط الصفوف من Hello Elementor (tr:nth-child(odd)) يُلغى هنا: الجدول يُقرأ بالخطوط لا بالخلفيات */
.ecs-sla table tbody > tr:nth-child(n) > td{ background-color:transparent }
@media (hover:hover){ .ecs-sla table tbody > tr:nth-child(n):hover > td{ background-color: var(--ecs-hv-soft) } }
@media (max-width: 767px){
.ecs-sla table, .ecs-sla tbody, .ecs-sla tr, .ecs-sla td{ display:block; width:100% }
.ecs-sla thead{ display:none }
.ecs-sla tr{ padding:14px 16px; border-top:1px solid var(--ecs-line) }
.ecs-sla tbody tr:first-child{ border-top:0 }
.ecs-sla td{ border:0; padding:2px 0 }
.ecs-sla td:first-child{ width:auto }
.ecs-sla td:nth-child(3)::before{ content:"من "; color: var(--ecs-hv-d); font-weight:700 }
}
/* ---- 36.3 تقويم الشهر ---- */
.ecs-month__rule{
display:grid; grid-template-columns:repeat(31, minmax(0,1fr)); gap:3px; margin-bottom:26px;
}
.ecs-month__rule i{
position:relative; display:grid; place-items:center; height:42px; font-style:normal;
background: rgba(255,255,255,.05); color:#7E93AC;
font-family:'Barlow Condensed',sans-serif; font-size:13px; font-variant-numeric:tabular-nums;
}
.ecs-month__rule i.is-m{ background: var(--ecs-hv); color: var(--ecs-hv-ink); font-weight:700 }
.ecs-month__rule s{
position:absolute; top:-11px; inset-inline-start:50%; transform: translateX(50%);
display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
background:#fff; color: var(--ecs-ink); text-decoration:none; font-size:12px; font-weight:700;
}
.ecs-month__marks{
list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px;
}
.ecs-month__marks li{
position:relative; padding:20px 18px 18px; border:1px solid var(--ecs-line-d); background: rgba(255,255,255,.035);
}
.ecs-month__n{
display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; margin-inline-end:8px;
background:#fff; color: var(--ecs-ink); font-size:13px; font-weight:700; vertical-align:middle;
}
.ecs-month__day{ font-size: var(--fs-xs); font-weight:700; color: var(--ecs-hv); vertical-align:middle }
.ecs-month__marks b{ display:block; margin:12px 0 4px; color:#fff; font-size: var(--fs-md) }
.ecs-month__marks p{ margin:0; font-size: var(--fs-sm); line-height:1.7; color:#AEC0D3 }
.ecs-month__q{ margin:18px 0 0; font-size: var(--fs-sm); color:#AEC0D3 }
.ecs-month__q b{ color: var(--ecs-hv) }
.e-con.ecs-monthsec{
background-image:
linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
background-size:56px 56px;
}
@media (max-width: 1024px){ .ecs-month__marks{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width: 767px){
.ecs-month__rule{ grid-template-columns:repeat(16, minmax(0,1fr)); gap:16px 2px } /* صفّان: 1–16 و17–31، والأرقام مقروءة */
.ecs-month__rule i{ height:30px; font-size:11px }
.ecs-month__rule s{ width:17px; height:17px; font-size:11px; top:-9px }
.ecs-month__marks{ grid-template-columns: minmax(0,1fr) }
}
/* ---- 36.4 حدود الدور ---- */
.e-con.ecs-bounds{ display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 }
.elementor-widget.ecs-bound{ --flex-direction:column; display:block; padding:28px 28px 24px }
.ecs-bound--ecs{ background: var(--ecs-ink); color:#C3D2E2 }
.ecs-bound--you{ background: var(--ecs-white); box-shadow: inset 0 0 0 1px var(--ecs-line) }
.ecs-bound :is(h2,h3,h4,h5){ font-size: var(--ecs-h4); margin:0 0 14px }
.ecs-bound--ecs :is(h2,h3,h4,h5){ color: var(--ecs-hv) }
.ecs-bound ul{ list-style:none; margin:0; padding:0 }
.ecs-bound li{
position:relative; padding:10px 26px 10px 0; font-size: var(--fs-sm); line-height:1.65;
border-top:1px solid var(--ecs-line);
}
.ecs-bound--ecs li{ border-top-color: var(--ecs-line-d); color:#fff }
.ecs-bound li:first-child{ border-top:0 }
.ecs-bound li::before{
content:""; position:absolute; right:0; top:17px; width:10px; height:6px;
border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform: rotate(-45deg);
}
.ecs-bound--ecs li::before{ color: var(--ecs-hv) }
.ecs-bound--you li::before{ color: var(--ecs-ink) }
@media (max-width: 767px){ .e-con.ecs-bounds{ grid-template-columns: minmax(0,1fr) } }
/* ---- 36.5 ما لا نفعله ---- */
.ecs-nots__eyebrow{ margin-top:36px }
.e-con.ecs-nots{ display:grid !important; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px }
.elementor-widget.ecs-not{
--flex-direction:column; display:flex; flex-direction:column; gap:10px; height:100%;
padding:18px 16px; background: var(--ecs-paper); border-top:3px solid var(--ecs-ink);
}
.ecs-not__n{
font-family:'Barlow Condensed',sans-serif; font-size: var(--fs-sm); font-weight:700; color: var(--ecs-hv-d);
}
.ecs-not__n::before{ content:"✕ "; color: var(--ecs-ink) }
.ecs-not p{ margin:0; font-size: var(--fs-sm); line-height:1.65; color: var(--ecs-ink); font-weight:600 }
@media (max-width: 1100px){ .e-con.ecs-nots{ grid-template-columns:repeat(3, minmax(0,1fr)) } }
@media (max-width: 600px){ .e-con.ecs-nots{ grid-template-columns: minmax(0,1fr) } }
/* ---- 36.6 مسار التصعيد: ثلاث درجات صاعدة ---- */
.e-con.ecs-ladder{ display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; align-items:start }
.elementor-widget.ecs-rung{
--flex-direction:column; position:relative; display:flex; flex-direction:column; align-items:flex-start;
padding:24px 22px 22px; background: var(--ecs-white); border:1px solid var(--ecs-line);
border-bottom:4px solid var(--ecs-ink);
}
.e-con.ecs-ladder > .ecs-rung:nth-child(1){ margin-top:56px }
.e-con.ecs-ladder > .ecs-rung:nth-child(2){ margin-top:28px }
.e-con.ecs-ladder > .ecs-rung:nth-child(3){ border-bottom-color: var(--ecs-hv) }
.ecs-rung__lv{ font-size: var(--fs-xxs); font-weight:700; color: var(--ecs-muted); margin-bottom:8px }
.ecs-rung :is(h2,h3,h4,h5){ font-size: var(--ecs-h4); margin:0 0 10px }
.ecs-rung__t{
padding:4px 10px; margin-bottom:12px; background: var(--ecs-ink); color: var(--ecs-hv);
font-size: var(--fs-xs); font-weight:700;
}
.ecs-rung p{ margin:0; font-size: var(--fs-sm); line-height:1.7; color: var(--ecs-muted) }
@media (max-width: 900px){
.e-con.ecs-ladder{ grid-template-columns: minmax(0,1fr) }
.e-con.ecs-ladder > .ecs-rung:nth-child(n){ margin-top:0 }
}
/* ============================================================
37 — ABOUT (صفحة «عن ECS») + إصلاحات عامة (1.26)
------------------------------------------------------------
الهيرو وشريط الأقسام والنموذج من القسم 33، ومجلس الإدارة من 29،
والجدار من 11. هنا: بطاقة الشركة · الفصل بين الإنتاج والعامل ·
مسطرة السنوات · خانة الصورة الاختيارية · مواقع العمل · الطريقة ·
لوحة الأرقام · سجل الأعمال · «تحقّقوا منّا» · بطاقة المقر.
============================================================ */
/* ---- 37.0 إصلاحات عامة على مستوى الموقع ---- */
/* إليمنتور 4 يحمّل widget-icon-list بعد القالب، فيعيد إظهار أيقونة ✓ التي
أخفتها قوائمنا (فظهرت نقطتان في .ecs-list، وعلامة زائدة في كل بطاقة مواصفات).
رفع الأسبقية درجة واحدة يعيد التصميم الأصلي في كل الصفحات. */
.elementor-widget:is(.ecs-list, .ecs-chips, .ecs-specs, .ecs-roles, .ecs-addr, .ecs-pts, .ecs-hq) .elementor-icon-list-icon{ display:none }
/* الفوتر على الهاتف: عمود الروابط كان متمركزًا من إعداد الهاتف في قالب الفوتر،
بينما الشعار والوصف إلى اليمين. محاذاة واحدة للكل. */
@media (max-width: 767px){
.elementor .elementor-element.ecs-ekfoot__grid > .e-con{ --align-items:stretch; align-items:stretch }
}
/* سطر الحقوق كان يرث ارتفاع سطر 13px، فيتراكب ويُقصّ حين يلتف على الهاتف */
.ecs-ekfoot__bottom .elementor-heading-title{ line-height:1.7 }
/* قيم عمود التواصل لا تنكسر في منتصفها («خلال 48 / ساعة») */
.ecs-contact .ecs-specs b{ white-space:nowrap }
/* خانة صورة اختيارية: تُخفى عن الزوار ما دامت صورة إليمنتور الافتراضية،
وتظهر وحدها حين تُستبدل بصورة حقيقية. داخل المحرر تبقى ظاهرة بعلامة. */
.e-con.ecs-photoband{ padding-top: var(--ecs-sect) !important; padding-bottom:0 !important }
.ecs-photoband img{ display:block; width:100%; height:auto; aspect-ratio: 21 / 8; object-fit:cover }
body:not(.elementor-editor-active) .e-con.ecs-photoband:has(img[src*="elementor/assets/images/placeholder"]){ display:none !important }
.elementor-editor-active .e-con.ecs-photoband:has(img[src*="placeholder"]) > .e-con-inner::before{
content:"خانة صورة: فريق ECS في موقع عمل — مخفية عن الزوار حتى تُضاف صورة حقيقية";
display:block; padding:10px 14px; background: var(--ecs-hv-soft); color: var(--ecs-hv-ink);
font-size:13px; font-weight:600;
}
/* ---- 37.1 الهيرو: بطاقة الشركة + أربعة أرقام ---- */
.elementor-widget.ecs-idcard{ padding:10px 0 14px; border-bottom:1px solid var(--ecs-line-d) }
.ecs-idcard b{ display:block; color:#fff; font-size: var(--ecs-lg); font-weight:700; line-height:1.45 }
.ecs-idcard span{
display:block; margin-top:4px; text-align:end;
font-family:'Barlow', system-ui, sans-serif; font-size: var(--fs-xs); color:#8FA4BB; letter-spacing:.02em;
}
.e-con.ecs-facts.ecs-facts--4{ grid-template-columns:repeat(4, minmax(0,1fr)) }
@media (max-width: 1024px){
.e-con.ecs-facts.ecs-facts--4{ grid-template-columns:repeat(2, minmax(0,1fr)) }
.e-con.ecs-facts.ecs-facts--4 > *{ border-inline-start:0; border-top:0; padding-inline-start:0; padding-block:18px 0 }
.e-con.ecs-facts.ecs-facts--4 > *:nth-child(even){ border-inline-start:1px solid var(--ecs-line-d); padding-inline-start:18px }
.e-con.ecs-facts.ecs-facts--4 > *:nth-child(n+3){ border-top:1px solid var(--ecs-line-d); margin-top:18px }
}
/* ---- 37.2 القصة: الإنتاج لكم، والعامل وملفه علينا ---- */
.e-con.ecs-origin{
display:grid !important; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
gap: clamp(24px, 4vw, 60px); align-items:center;
}
.elementor-widget.ecs-sep{ --flex-direction:column; display:block }
.ecs-sep__row{
display:grid; grid-template-columns:92px minmax(0,1fr); column-gap:20px; align-items:center;
padding:22px 22px;
}
.ecs-sep__who{
grid-row:1 / span 2; display:grid; place-items:center; height:64px;
font-size: var(--fs-md); font-weight:800; letter-spacing:.02em;
}
.ecs-sep__row b{ font-size: var(--ecs-h4); line-height:1.35; font-weight:700 }
.ecs-sep__row p{ margin:4px 0 0; font-size: var(--fs-sm); line-height:1.65 }
.ecs-sep__row--you{ background: var(--ecs-paper); box-shadow: inset 0 0 0 1px var(--ecs-line) }
.ecs-sep__row--you .ecs-sep__who{ background: var(--ecs-white); color: var(--ecs-ink); box-shadow: inset 0 0 0 1px var(--ecs-line) }
.ecs-sep__row--you b{ color: var(--ecs-ink) }
.ecs-sep__row--you p{ color: var(--ecs-muted) }
.ecs-sep__row--ecs{ background: var(--ecs-ink) }
.ecs-sep__row--ecs .ecs-sep__who{ background: var(--ecs-hv); color: var(--ecs-hv-ink); font-family:'Barlow', system-ui, sans-serif }
.ecs-sep__row--ecs b{ color:#fff }
.ecs-sep__row--ecs p{ color:#AEC0D3 }
.ecs-sep__cut{ position:relative; display:grid; place-items:center; height:46px }
.ecs-sep__cut::before{
content:""; position:absolute; inset-inline:0; top:50%; border-top:2px dashed var(--ecs-hv);
}
.ecs-sep__cut span{
position:relative; padding:3px 12px; background: var(--ecs-white);
font-size: var(--fs-xs); font-weight:700; color: var(--ecs-hv-d);
}
.ecs-origin__h .elementor-heading-title{
font-family: var(--ecs-sans); font-size: var(--fs-xs); font-weight:700; color: var(--ecs-hv-d); margin-bottom:6px;
}
/* النقاط الأربع: ترقيم تلقائي بدل الأيقونة */
.ecs-pts .elementor-icon-list-items{ counter-reset: ecs-pt; margin:0; padding:0 }
.ecs-pts .elementor-icon-list-item{
counter-increment: ecs-pt; display:flex; align-items:baseline; gap:14px;
padding:15px 0; border-top:1px solid var(--ecs-line);
font-size: var(--fs-md); font-weight:600; line-height:1.6; color: var(--ecs-ink);
}
.ecs-pts .elementor-icon-list-item:first-child{ border-top:0 }
.ecs-pts .elementor-icon-list-item::before{
content: counter(ecs-pt, decimal-leading-zero); flex:none; min-width:26px;
font-family:'Barlow Condensed', sans-serif; font-weight:700; font-size: var(--fs-sm); color: var(--ecs-hv-d);
font-variant-numeric: tabular-nums;
}
.ecs-pts .elementor-icon-list-text{ padding:0 }
/* مسطرة السنوات: عشرون سنة متصلة، التأسيس واليوم */
.elementor-widget.ecs-years{ margin-top: clamp(34px, 4vw, 52px) }
.ecs-years__rule{
position:relative; display:grid; grid-template-columns:repeat(20, minmax(0,1fr)); gap:3px; padding-top:30px;
}
.ecs-years__rule::after{
content:""; position:absolute; inset-inline:0; bottom:-7px; height:3px; background: var(--ecs-hv);
}
.ecs-years__rule i{
position:relative; display:grid; place-items:center; height:40px; font-style:normal;
background: var(--ecs-paper); color: var(--ecs-muted);
font-family:'Barlow Condensed', sans-serif; font-size:12.5px; font-variant-numeric:tabular-nums;
}
.ecs-years__rule i.is-m{ background: var(--ecs-ink); color:#fff; font-weight:700 }
.ecs-years__rule i.is-now{ background: var(--ecs-hv); color: var(--ecs-hv-ink) }
.ecs-years__rule s{
position:absolute; bottom:calc(100% + 7px); inset-inline-start:0; white-space:nowrap; text-decoration:none;
font-family: var(--ecs-sans); font-size: var(--fs-xxs); font-weight:700; color: var(--ecs-ink);
}
.ecs-years__rule i.is-now s{ inset-inline-start:auto; inset-inline-end:0 }
.ecs-years__cap{ margin:20px 0 0; font-size: var(--fs-sm); color: var(--ecs-muted) }
.ecs-years__cap b{ color: var(--ecs-ink) }
@media (max-width: 900px){
.e-con.ecs-origin{ grid-template-columns: minmax(0,1fr) }
}
@media (max-width: 767px){
.ecs-years__rule{ grid-template-columns:repeat(10, minmax(0,1fr)); gap:30px 2px }
.ecs-years__rule i{ height:32px; font-size:11px }
.ecs-sep__row{ grid-template-columns:70px minmax(0,1fr); column-gap:14px; padding:18px 16px }
.ecs-sep__who{ height:54px; font-size: var(--fs-sm) }
}
/* ---- 37.3 مواقع العمل ---- */
/* الشبكتان بخلفية الخط الشعري: المسافة فوقهما هامش لا حشوة، وإلا ظهرت الحشوة شريطًا رماديًا */
.e-con.ecs-sites, .e-con.ecs-ways{ padding:0 !important; margin-top:30px }
.e-con.ecs-sites{
display:grid !important; grid-template-columns:repeat(5, minmax(0,1fr)); gap:0;
background: var(--ecs-white); box-shadow: 0 0 0 1px var(--ecs-line);
}
.elementor-widget.ecs-site{
--flex-direction:column; position:relative; display:flex; flex-direction:column; height:100%;
padding:22px 20px 20px; box-shadow: -1px 0 0 var(--ecs-line);
transition: background var(--ecs-tr);
}
.ecs-site::before{
content:""; position:absolute; top:0; inset-inline-start:0; width:0; height:3px; background: var(--ecs-hv);
transition: width .34s cubic-bezier(.22,.61,.36,1);
}
@media (hover:hover){
.ecs-site:hover{ background: var(--ecs-hv-soft) }
.ecs-site:hover::before{ width:100% }
}
.ecs-site__n{
font-family:'Barlow Condensed', sans-serif; font-weight:700; font-size: var(--fs-num); line-height:1;
color: var(--ecs-ink); font-variant-numeric: tabular-nums;
}
.ecs-site__tag{
position:absolute; top:24px; inset-inline-end:18px; padding:3px 8px;
background: var(--ecs-paper); font-size: var(--fs-xxs); font-weight:700; color: var(--ecs-muted);
}
.ecs-site :is(h2,h3,h4,h5){ font-size: var(--ecs-h4); line-height:1.35; margin:16px 0 12px }
.ecs-site ul{ list-style:none; margin:0; padding:0 }
.ecs-site li{
padding:7px 0; border-top:1px dashed var(--ecs-line);
font-size: var(--fs-sm); line-height:1.5; color: var(--ecs-body);
}
.ecs-sites__foot p{ margin:16px 0 0; font-size: var(--fs-sm); color: var(--ecs-muted) }
.ecs-sites__foot a{ color: var(--ecs-ink); font-weight:700; border-bottom:2px solid var(--ecs-hv) }
@media (max-width: 1180px){
.e-con.ecs-sites{ grid-template-columns:repeat(3, minmax(0,1fr)) }
.elementor-widget.ecs-site{ box-shadow: -1px 0 0 var(--ecs-line), 0 1px 0 var(--ecs-line) }
}
@media (max-width: 767px){
.e-con.ecs-sites{ grid-template-columns:repeat(2, minmax(0,1fr)) }
.elementor-widget.ecs-site{ padding:18px 16px }
.ecs-site__tag{ top:20px; inset-inline-end:14px }
.ecs-site :is(h2,h3,h4,h5){ margin-top:12px }
}
@media (max-width: 420px){
.e-con.ecs-sites{ grid-template-columns: minmax(0,1fr) }
}
/* ---- 37.4 الطريقة: ستة مبادئ و«يظهر في» ---- */
.e-con.ecs-ways{
display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px;
background: var(--ecs-line); border:1px solid var(--ecs-line);
}
.elementor-widget.ecs-way{
--flex-direction:column; display:flex; flex-direction:column; height:100%;
padding:26px 24px 20px; background: var(--ecs-white);
}
.ecs-way__n{
font-family:'Barlow Condensed', sans-serif; font-weight:700; font-size: clamp(34px, 3vw, 46px); line-height:1;
color: var(--ecs-hv); margin-bottom:16px; font-variant-numeric: tabular-nums;
}
.ecs-way :is(h2,h3,h4,h5){ font-size: var(--ecs-h4); line-height:1.35; margin:0 0 8px }
.ecs-way p{ margin:0 0 18px; font-size: var(--fs-sm); line-height:1.8; color: var(--ecs-muted) }
.ecs-way__at{
margin-top:auto; padding-top:12px; border-top:1px dashed var(--ecs-line);
font-size: var(--fs-xs); color: var(--ecs-muted);
}
.ecs-way__at b{ color: var(--ecs-ink); font-weight:700 }
.ecs-golink .elementor-heading-title{ margin-top:22px; font-size: var(--fs-sm); line-height:1.6 }
.ecs-golink .elementor-heading-title a{
display:inline-block; font-family: var(--ecs-sans); font-weight:700; color: var(--ecs-ink);
border-bottom:2px solid var(--ecs-hv); padding-bottom:2px; transition: color var(--ecs-tr);
}
.ecs-golink .elementor-heading-title a:hover{ color: var(--ecs-hv-d) }
@media (max-width: 1024px){ .e-con.ecs-ways{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width: 600px){ .e-con.ecs-ways{ grid-template-columns: minmax(0,1fr) } }
/* ---- 37.5 الأرقام: لوحة ثمانية أرقام + بطاقة البقاء ---- */
.e-con.ecs-numsec{
background-image:
linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
background-size:56px 56px;
}
.e-con.ecs-nums{
display:grid !important; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
gap: clamp(22px, 3.4vw, 48px); align-items:start;
}
.e-con.ecs-numgrid{
display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0;
border-top:1px solid var(--ecs-line-d);
}
.elementor-widget.ecs-numt{
--flex-direction:column; display:flex; flex-direction:column; gap:6px;
padding:20px 0; border-bottom:1px solid var(--ecs-line-d);
}
.e-con.ecs-numgrid > .ecs-numt:nth-child(even){ padding-inline-start:24px; border-inline-start:1px solid var(--ecs-line-d) }
.ecs-numt b{
font-family: var(--ecs-display); font-size: var(--fs-num); font-weight:700; line-height:1.15;
color:#fff; font-variant-numeric: tabular-nums;
}
.e-con.ecs-numgrid > .ecs-numt:nth-child(4) b{ color: var(--ecs-hv) }
.ecs-numt span{ font-size: var(--fs-xs); color:#8FA4BB; line-height:1.5 }
.e-con.ecs-keep{ position:relative }
.e-con.ecs-keep::before{ content:""; position:absolute; top:-1px; right:-1px; left:-1px; height:3px; background: var(--ecs-hv) }
@media (max-width: 1024px){ .e-con.ecs-nums{ grid-template-columns: minmax(0,1fr) } }
@media (max-width: 767px){ .ecs-numt b{ font-size:24px } }
@media (max-width: 420px){
.e-con.ecs-numgrid > .ecs-numt:nth-child(even){ padding-inline-start:14px }
}
/* ---- 37.6 العملاء: ثمانية في صفّين + سجل الأعمال ---- */
.elementor .e-con.ecs-marks.ecs-marks--8{ --mk-n:4 }
@media (max-width: 767px){ .elementor .e-con.ecs-marks.ecs-marks--8{ --mk-n:2 } }
.e-con.ecs-past{
display:grid !important; grid-template-columns:auto auto minmax(0,1fr); align-items:center; gap:10px 26px;
padding:14px 20px; background: var(--ecs-paper);
}
.ecs-past__h .elementor-heading-title{
font-family: var(--ecs-sans); font-size: var(--fs-xxs); font-weight:700; letter-spacing:.04em; color: var(--ecs-muted);
}
.elementor .e-con.ecs-past__marks{
--flex-direction:row; --gap:22px; display:flex; flex-flow:row wrap; align-items:center; gap:22px;
}
.ecs-past__marks .ecs-mark{ width:auto; max-width:100% }
.ecs-past__marks .ecs-mark img{ zoom:.72; filter: grayscale(1); opacity:.55; display:block }
.ecs-past__t p{ margin:0; font-size: var(--fs-xs); line-height:1.7; color: var(--ecs-muted) }
@media (max-width: 767px){
.e-con.ecs-past{ grid-template-columns: minmax(0,1fr); padding:14px 16px }
}
/* ---- 37.7 تحقّقوا منّا ---- */
.e-con.ecs-verify{ display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px }
.elementor-widget.ecs-vcard{
--flex-direction:column; position:relative; display:flex; flex-direction:column; height:100%;
padding:22px 22px 18px; background: var(--ecs-white); border:1px solid var(--ecs-line);
}
.ecs-vcard::before{ content:""; position:absolute; top:-1px; right:-1px; left:-1px; height:3px; background: var(--ecs-ink) }
.ecs-vcard__k{ font-size: var(--fs-xxs); font-weight:700; letter-spacing:.04em; color: var(--ecs-hv-d); margin-bottom:8px }
.ecs-vcard :is(h2,h3,h4,h5){ font-size: var(--ecs-h4); line-height:1.4; margin:0 0 8px }
.ecs-vcard p{ margin:0 0 16px; font-size: var(--fs-sm); line-height:1.8; color: var(--ecs-muted) }
.ecs-vcard__st{
margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:9px;
padding:5px 11px; background: var(--ecs-paper); font-size: var(--fs-xs); font-weight:700; color: var(--ecs-ink);
}
.ecs-vcard__st::before{
content:""; width:9px; height:5px; border-left:2px solid currentColor; border-bottom:2px solid currentColor;
transform: rotate(-45deg) translateY(-2px);
}
.ecs-vcard__st.is-wip{ background: var(--ecs-hv-soft); color: var(--ecs-hv-ink) }
.ecs-vcard__st.is-wip::before{ /* دائرة نصف ممتلئة: قيد الإنجاز */
width:10px; height:10px; box-sizing:border-box; border:2px solid currentColor; border-radius:50%; transform:none;
background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}
.ecs-vcard:has(.is-wip){ border-style:dashed }
.ecs-vcard:has(.is-wip)::before{ background: var(--ecs-hv) }
@media (max-width: 1024px){ .e-con.ecs-verify{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width: 600px){ .e-con.ecs-verify{ grid-template-columns: minmax(0,1fr) } }
/* ---- 37.8 بطاقة المقر بجوار النموذج ---- */
.ecs-hqside__h .elementor-heading-title{
font-family: var(--ecs-sans); font-size: var(--fs-xs); font-weight:700; color: var(--ecs-hv); margin-bottom:4px;
}
.ecs-hq .elementor-icon-list-items{ margin:0; padding:0 }
.elementor-widget.ecs-hq .elementor-icon-list-item{
display:block; padding:12px 0; border-top:1px solid var(--ecs-line-d);
}
.elementor-widget.ecs-hq .elementor-icon-list-item:first-child{ border-top:0 }
.ecs-hq .elementor-icon-list-text{ display:block; padding:0 }
.ecs-hq b{ display:block; margin-bottom:3px; font-size: var(--fs-xxs); font-weight:700; color:#8FA4BB }
.ecs-hq span{ display:block; font-size: var(--fs-sm); line-height:1.65; color:#fff }
.ecs-hq span[dir="ltr"]{ text-align:end }
.elementor .ecs-hqside .e-con.ecs-shero__cta > .elementor-widget-button{ flex:1 1 180px }
.ecs-hqside .elementor-button{ width:100%; min-height:44px; justify-content:center }
/* ============================================================
38 — ARTICLES (المقالات: الصفحة والبطاقة والمقال والتصنيف)
------------------------------------------------------------
القالب في template-parts/single.php و archive.php، والشبكة من
[ecs_articles] في inc/blog.php. لا صور ستوك: غلاف كل مقال طباعي
(رقم أو كلمة كبيرة بلون التصنيف).
============================================================ */
/* ---- 38.1 الحاويات ---- */
.ecs-ahero__in, .ecs-abody, .ecs-acta__in, .ecs-related__in, .ecs-alist{
max-width: var(--ecs-maxw); margin-inline:auto; padding-inline: var(--ecs-gut); box-sizing:content-box;
}
main.ecs-article{ display:block; background: var(--ecs-paper) }
/* ---- 38.2 الغلاف الطباعي ---- */
.ecs-cover{
position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end;
aspect-ratio: 16 / 10; padding:22px 24px; background: var(--ecs-ink); color:#fff;
}
.ecs-cover::before{ /* شبكة هندسية خفيفة */
content:""; position:absolute; inset:0; z-index:-1;
background-image:
linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
background-size:36px 36px;
}
.ecs-cover::after{ /* شريط التحذير في الزاوية — من هوية الموقع */
content:""; position:absolute; top:0; inset-inline-end:0; width:46%; height:10px;
background: repeating-linear-gradient(-45deg, var(--ecs-hv) 0 12px, transparent 12px 24px);
}
.ecs-cover b{
display:block; font-family: var(--ecs-display); font-weight:900; line-height:1; letter-spacing:0;
font-size: clamp(38px, 5.4vw, 76px); font-variant-numeric: tabular-nums;
}
.ecs-cover span{ margin-top:10px; font-size: var(--fs-xs); font-weight:700; opacity:.8 }
.ecs-cover--labour-law{ background: var(--ecs-ink-2) }
.ecs-cover--labour-law b{ color: var(--ecs-hv) }
.ecs-cover--buyer-guide{ background: var(--ecs-hv); color: var(--ecs-hv-ink) }
.ecs-cover--buyer-guide::before{
background-image:
linear-gradient(rgba(15,29,44,.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(15,29,44,.08) 1px, transparent 1px);
}
.ecs-cover--buyer-guide::after{ background: repeating-linear-gradient(-45deg, var(--ecs-ink) 0 12px, transparent 12px 24px) }
.ecs-cover--payroll-insurance{ background:#FFFFFF; color: var(--ecs-ink); box-shadow: inset 0 0 0 1px var(--ecs-line) }
.ecs-cover--payroll-insurance::before{
background-image:
linear-gradient(rgba(15,29,44,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(15,29,44,.06) 1px, transparent 1px);
}
.ecs-cover--payroll-insurance b{ color: var(--ecs-ink) }
.ecs-cover--payroll-insurance span{ color: var(--ecs-hv-d); opacity:1 }
/* ---- 38.3 البطاقة والشبكة (بنتو: الأحدث يأخذ عمودين وصفّين) ---- */
.ecs-agrid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px }
.ecs-acard{ min-width:0 }
.ecs-acard__link{
display:flex; flex-direction:column; height:100%; background: var(--ecs-white);
border:1px solid var(--ecs-line); color:inherit; text-decoration:none;
transition: transform var(--ecs-tr), box-shadow var(--ecs-tr), border-color var(--ecs-tr);
}
@media (hover:hover){
.ecs-acard__link:hover{ transform: translateY(-3px); border-color: var(--ecs-ink); box-shadow: 0 16px 34px rgba(15,29,44,.1) }
.ecs-acard__link:hover .ecs-acard__go i{ transform: translateX(-4px) }
}
.ecs-acard__link:focus-visible{ outline:3px solid var(--ecs-hv); outline-offset:3px }
.ecs-acard__b{ display:flex; flex-direction:column; flex:1; padding:20px 22px 20px }
.ecs-acard__cat{ font-size: var(--fs-xxs); font-weight:700; color: var(--ecs-hv-d); letter-spacing:.02em; margin-bottom:8px }
.ecs-acard__t{ font-size: var(--ecs-h4); line-height:1.45; margin:0 0 10px; color: var(--ecs-ink) }
.ecs-acard__b p{ margin:0 0 16px; font-size: var(--fs-sm); line-height:1.8; color: var(--ecs-muted) }
.ecs-acard__meta{ margin-top:auto; font-size: var(--fs-xs); color: var(--ecs-muted) }
.ecs-acard__go{
display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding-top:14px; border-top:1px dashed var(--ecs-line);
font-size: var(--fs-sm); font-weight:700; color: var(--ecs-ink);
}
.ecs-acard__go i{ font-style:normal; color: var(--ecs-hv-d); transition: transform var(--ecs-tr) }
.ecs-acard.is-featured{ grid-column: span 2; grid-row: span 2 }
.ecs-acard.is-featured .ecs-cover{ aspect-ratio:auto; flex:1 1 auto; min-height:280px } /* الغلاف يملأ ارتفاع الصفّين */
.ecs-acard.is-featured .ecs-cover b{ font-size: clamp(56px, 8vw, 118px) }
.ecs-acard.is-featured .ecs-acard__b{ padding:26px 28px 24px }
.ecs-acard.is-featured .ecs-acard__t{ font-size: var(--ecs-h3); line-height:1.4 }
.ecs-acard.is-featured .ecs-acard__b p{ font-size: var(--fs-md) }
.ecs-agrid--row{ grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)) }
.ecs-agrid--row .ecs-acard{ grid-column:auto; grid-row:auto }
.ecs-agrid__empty{ padding:40px 0; color: var(--ecs-muted) }
@media (max-width: 1024px){
.ecs-agrid{ grid-template-columns:repeat(2, minmax(0,1fr)) }
.ecs-acard.is-featured{ grid-column: 1 / -1; grid-row:auto }
}
@media (max-width: 640px){
.ecs-agrid{ grid-template-columns: minmax(0,1fr) }
.ecs-acard.is-featured .ecs-cover{ aspect-ratio: 16 / 10 }
}
/* ---- 38.4 روابط التصنيفات ---- */
.ecs-achips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px }
.ecs-achips a{
display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 16px;
border:1px solid var(--ecs-line); background: var(--ecs-white); color: var(--ecs-ink);
font-size: var(--fs-sm); font-weight:600; transition: var(--ecs-tr);
}
.ecs-achips a span{ font-family:'Barlow Condensed',sans-serif; font-weight:700; color: var(--ecs-muted) }
.ecs-achips a:hover{ border-color: var(--ecs-ink) }
.ecs-achips a.is-on{ background: var(--ecs-ink); border-color: var(--ecs-ink); color:#fff }
.ecs-achips a.is-on span{ color: var(--ecs-hv) }
/* ---- 38.5 رأس المقال ---- */
nav.ecs-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 22px; font-size: var(--fs-xs); color:#8FA4BB }
.ecs-atag{
display:inline-flex; align-items:center; gap:10px; margin-bottom:18px; padding:6px 14px;
border:1px solid var(--ecs-line-d); color:#C3D2E2; font-size: var(--fs-xs); font-weight:600; text-decoration:none;
}
.ecs-atag::before{ content:""; width:7px; height:7px; background: var(--ecs-hv) }
a.ecs-atag:hover{ border-color: var(--ecs-hv); color:#fff }
.ecs-ahero{
position:relative; background: var(--ecs-ink); color:#fff;
padding: clamp(30px, 4vw, 52px) 0 clamp(36px, 4.4vw, 60px);
background-image:
linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
background-size:56px 56px;
}
.ecs-ahero__grid{
display:grid; grid-template-columns: minmax(0,1.45fr) minmax(0,.55fr); gap: clamp(24px, 4vw, 64px); align-items:end;
}
.ecs-ahero__t{
margin:0; color:#fff; font-size: clamp(28px, 3.6vw, 50px); line-height:1.3; text-wrap:balance;
}
.ecs-ahero__dek{ margin:18px 0 0; max-width:62ch; font-size: var(--ecs-lg); line-height:1.85; color:#C3D2E2 }
.ecs-ameta{ list-style:none; display:flex; flex-wrap:wrap; gap:8px 22px; margin:24px 0 0; padding:0; font-size: var(--fs-xs); color:#8FA4BB }
.ecs-ameta li{ position:relative }
.ecs-ameta li + li::before{ content:""; position:absolute; inset-inline-start:-12px; top:50%; width:4px; height:4px; background: var(--ecs-hv); transform: translateY(-50%) }
.ecs-ameta b{ color:#fff; font-weight:600 }
.ecs-ahero__cover{ aspect-ratio: 1 / 1; box-shadow: 0 0 0 1px var(--ecs-line-d) }
.ecs-ahero__cover b{ font-size: clamp(44px, 6vw, 92px) }
.ecs-ahero--list .ecs-ahero__t{ font-size: var(--ecs-h1) }
@media (max-width: 900px){
.ecs-ahero__grid{ grid-template-columns: minmax(0,1fr) }
.ecs-ahero__cover{ display:none }
}
/* شريط تقدّم القراءة — CSS فقط، حيث يدعم المتصفح الخط الزمني للتمرير */
.ecs-progress{ display:none }
@supports (animation-timeline: scroll()){
.ecs-progress{
display:block; position:fixed; inset-inline:0; top:0; z-index:100; height:3px; pointer-events:none;
}
.ecs-progress i{
display:block; height:100%; background: var(--ecs-hv); transform-origin: right center; transform: scaleX(0);
animation: ecs-read linear both; animation-timeline: scroll(root);
}
@keyframes ecs-read{ to{ transform: scaleX(1) } }
}
@media (prefers-reduced-motion: reduce){ .ecs-progress{ display:none } }
/* ---- 38.6 جسم المقال + الفهرس ---- */
.ecs-abody{
display:grid; grid-template-columns: minmax(0, 740px) 250px; grid-template-areas: "prose toc";
justify-content:center; gap: clamp(28px, 4vw, 64px); padding-block: clamp(34px, 4.4vw, 60px);
}
.ecs-abody > .ecs-prose{ grid-area: prose }
.ecs-abody > .ecs-toc{ grid-area: toc }
.ecs-abody:not(:has(.ecs-toc)){ grid-template-columns: minmax(0, 740px); grid-template-areas: "prose" }
.ecs-toc__in{ position:sticky; top:96px; padding:20px 0 0; border-top:3px solid var(--ecs-ink) }
.ecs-toc__h{ display:block; margin-bottom:12px; font-size: var(--fs-xs); font-weight:700; color: var(--ecs-hv-d) }
.ecs-toc ol{ list-style:none; margin:0; padding:0; counter-reset: ecs-toc }
.ecs-toc li{ counter-increment: ecs-toc }
.ecs-toc ol a{
display:grid; grid-template-columns:26px minmax(0,1fr); gap:6px; padding:8px 0; border-bottom:1px solid var(--ecs-line);
font-size: var(--fs-sm); line-height:1.55; color: var(--ecs-muted); text-decoration:none; transition: color var(--ecs-tr);
}
.ecs-toc ol a::before{
content: counter(ecs-toc, decimal-leading-zero); font-family:'Barlow Condensed',sans-serif; font-weight:700; color: var(--ecs-line);
transition: color var(--ecs-tr);
}
.ecs-toc ol a:hover, .ecs-toc ol a.is-on{ color: var(--ecs-ink) }
.ecs-toc ol a.is-on{ font-weight:700 }
.ecs-toc ol a.is-on::before{ color: var(--ecs-hv-d) }
.ecs-toc__cta{
display:flex; justify-content:center; align-items:center; min-height:46px; margin-top:18px;
background: var(--ecs-ink); color:#fff; font-size: var(--fs-sm); font-weight:700; text-decoration:none; transition: var(--ecs-tr);
}
.ecs-toc__cta:hover{ background: var(--ecs-hv); color: var(--ecs-hv-ink) }
@media (max-width: 1024px){
.ecs-abody{ grid-template-columns: minmax(0, 740px); grid-template-areas: "toc" "prose"; gap:26px }
.ecs-toc__in{ position:static; padding:16px 18px; background: var(--ecs-white); border:1px solid var(--ecs-line); border-top:3px solid var(--ecs-ink) }
.ecs-toc__cta{ display:none }
}
/* ---- 38.7 نص المقال ---- */
.ecs-prose{ min-width:0; font-size:17.5px; line-height:1.95; color: var(--ecs-body); counter-reset: ecs-h2 }
.ecs-prose > * + *{ margin-top:1.1em }
.ecs-prose p{ margin-bottom:0 } /* المسافة من القاعدة السابقة وحدها، لا من هامش Hello السفلي */
.ecs-prose > :first-child{ margin-top:0 }
.ecs-prose > p:first-child{ font-size: var(--ecs-lg); color: var(--ecs-ink); font-weight:600; line-height:1.9 }
.ecs-prose a{ color: var(--ecs-ink); font-weight:600; text-decoration:none; border-bottom:2px solid var(--ecs-hv); unicode-bidi:isolate }
.ecs-prose a:hover{ color: var(--ecs-hv-d) }
.ecs-prose strong, .ecs-prose b{ color: var(--ecs-ink) }
.ecs-prose h2{
counter-increment: ecs-h2; position:relative; margin:2.2em 0 .7em; padding-top:22px; border-top:1px solid var(--ecs-line);
font-size: clamp(22px, 2.3vw, 30px); line-height:1.4; color: var(--ecs-ink); scroll-margin-top:96px;
}
.ecs-prose h2::before{
content: counter(ecs-h2, decimal-leading-zero); display:block; margin-bottom:6px;
font-family:'Barlow Condensed',sans-serif; font-size: var(--fs-sm); font-weight:700; color: var(--ecs-hv-d); letter-spacing:.04em;
}
.ecs-prose h3{ margin:1.6em 0 .5em; font-size: var(--ecs-h4); line-height:1.45; color: var(--ecs-ink) }
.ecs-prose ul, .ecs-prose ol{ padding-inline-start:0; list-style:none }
.ecs-prose ul > li{ position:relative; padding-inline-start:22px; margin-top:.45em }
.ecs-prose ul > li::before{ content:""; position:absolute; inset-inline-start:2px; top:.8em; width:7px; height:7px; background: var(--ecs-hv) }
.ecs-prose ol{ counter-reset: ecs-ol }
.ecs-prose ol > li{ counter-increment: ecs-ol; position:relative; padding-inline-start:40px; margin-top:.6em }
.ecs-prose ol > li::before{
content: counter(ecs-ol); position:absolute; inset-inline-start:0; top:.25em; display:grid; place-items:center;
width:26px; height:26px; background: var(--ecs-ink); color:#fff; font-family:'Barlow Condensed',sans-serif; font-size:15px; font-weight:700; line-height:1;
}
.ecs-prose .ecs-kt__h{ margin:0 0 8px; font-size: var(--fs-xs); font-weight:700; color: var(--ecs-hv-d) }
.ecs-prose .ecs-sources .ecs-kt__h{ color: var(--ecs-muted) }
/* قائمة تحقق */
.ecs-prose ul.ecs-check > li{ padding-inline-start:32px }
.ecs-prose ul.ecs-check > li::before{
width:10px; height:6px; top:.72em; inset-inline-start:4px; background:none;
border-left:2px solid var(--ecs-ink); border-bottom:2px solid var(--ecs-ink); transform: rotate(-45deg);
}
/* علامات تحذير */
.ecs-prose ul.ecs-flags > li::before{
content:"!"; width:20px; height:20px; top:.35em; inset-inline-start:0; display:grid; place-items:center;
background: var(--ecs-hv); color: var(--ecs-hv-ink); font-weight:900; font-size:13px; line-height:1;
}
.ecs-prose ul.ecs-flags > li{ padding-inline-start:32px }
/* الخلاصة في أول المقال */
.ecs-prose .ecs-kt{
margin:1.6em 0; padding:22px 24px 20px; background: var(--ecs-white); border:1px solid var(--ecs-line);
box-shadow: inset -4px 0 0 var(--ecs-hv);
}
.ecs-prose .ecs-kt > :first-child{ margin-top:0 }
.ecs-prose .ecs-kt h2, .ecs-prose .ecs-kt h3, .ecs-prose .ecs-kt .ecs-kt__h{
counter-increment:none; margin:0 0 8px; padding:0; border:0; font-size: var(--fs-xs); font-weight:700; color: var(--ecs-hv-d);
}
.ecs-prose .ecs-kt h2::before{ content:none }
.ecs-prose .ecs-kt ul{ margin:0 }
.ecs-prose .ecs-kt li{ font-size: var(--fs-md); line-height:1.8; color: var(--ecs-ink) }
/* ملاحظة وتنبيه */
.ecs-prose .ecs-note, .ecs-prose .ecs-caution{ padding:16px 20px; font-size: var(--fs-md); line-height:1.85 }
.ecs-prose .ecs-note{ background: var(--ecs-hv-soft); box-shadow: inset -3px 0 0 var(--ecs-hv); color:#4A3A1C }
.ecs-prose .ecs-caution{ background: var(--ecs-ink); color:#C3D2E2 }
.ecs-prose .ecs-caution strong, .ecs-prose .ecs-caution b{ color: var(--ecs-hv) }
.ecs-prose .ecs-note > *, .ecs-prose .ecs-caution > *{ margin:0 }
.ecs-prose .ecs-note > * + *, .ecs-prose .ecs-caution > * + *{ margin-top:.5em }
/* أرقام بارزة */
.ecs-prose .ecs-astats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; background: var(--ecs-line); border:1px solid var(--ecs-line); margin:1.6em 0 }
.ecs-prose .ecs-astats > div{ padding:18px 18px 16px; background: var(--ecs-white) }
.ecs-prose .ecs-astats b{ display:block; font-family: var(--ecs-display); font-size: clamp(26px, 2.8vw, 36px); font-weight:800; line-height:1.1; color: var(--ecs-ink); font-variant-numeric: tabular-nums }
.ecs-prose .ecs-astats span{ display:block; margin-top:6px; font-size: var(--fs-xs); line-height:1.6; color: var(--ecs-muted) }
@media (max-width: 600px){ .ecs-prose .ecs-astats{ grid-template-columns: minmax(0,1fr) } }
/* الجداول */
.ecs-prose .wp-block-table{ margin:1.6em 0; overflow-x:auto; -webkit-overflow-scrolling:touch }
.ecs-prose table{ width:100%; min-width:520px; border-collapse:separate; border-spacing:0; background: var(--ecs-white); border:1px solid var(--ecs-line); font-size: var(--fs-sm); line-height:1.7 }
.ecs-prose th{ border:0; padding:12px 16px; background: var(--ecs-ink); color:#fff; text-align:start; font-size: var(--fs-xs); font-weight:700; vertical-align:bottom }
.ecs-prose td{ border:0; border-top:1px solid var(--ecs-line); padding:12px 16px; vertical-align:top }
.ecs-prose td:first-child{ font-weight:600; color: var(--ecs-ink) }
.ecs-prose table tbody > tr:nth-child(n) > td{ background-color:transparent } /* تخطيط Hello المتناوب */
.ecs-prose .wp-block-table figcaption{ margin-top:8px; font-size: var(--fs-xs); color: var(--ecs-muted) }
/* أسئلة في آخر المقال (كتلة التفاصيل الأصلية) */
.ecs-prose details{ background: var(--ecs-white); border:1px solid var(--ecs-line); margin-top:8px }
.ecs-prose details summary{
cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center;
padding:15px 18px; font-weight:700; color: var(--ecs-ink); font-size: var(--fs-md); line-height:1.6;
}
.ecs-prose details summary::-webkit-details-marker{ display:none }
.ecs-prose details summary::after{ content:"+"; flex:none; font-family:'Barlow',sans-serif; font-size:22px; line-height:1; color: var(--ecs-hv-d) }
.ecs-prose details[open] summary::after{ content:"−" }
.ecs-prose details[open] summary{ background: var(--ecs-hv-soft) }
.ecs-prose details > :not(summary){ margin:0; padding:4px 18px 16px; font-size: var(--fs-md) }
/* المصادر */
.ecs-prose .ecs-sources{ margin-top:2em; padding:18px 20px; background: var(--ecs-white); border:1px dashed var(--ecs-line); font-size: var(--fs-sm); line-height:1.8 }
.ecs-prose .ecs-sources > :first-child{ margin-top:0 }
.ecs-prose .ecs-sources h2, .ecs-prose .ecs-sources h3{ counter-increment:none; margin:0 0 6px; padding:0; border:0; font-size: var(--fs-xs); font-weight:700; color: var(--ecs-muted) }
.ecs-prose .ecs-sources h2::before{ content:none }
.ecs-prose .ecs-sources li{ margin-top:.3em }
/* نهاية المقال */
.ecs-aend{ margin-top:2.4em; padding-top:20px; border-top:3px solid var(--ecs-ink) }
.ecs-aend__note{ margin:0 0 16px; font-size: var(--fs-xs); line-height:1.8; color: var(--ecs-muted) }
.ecs-share{ display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.ecs-share span{ margin-inline-end:6px; font-size: var(--fs-xs); font-weight:700; color: var(--ecs-muted) }
.ecs-prose .ecs-share a, .ecs-share button{
display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border:1px solid var(--ecs-line); background: var(--ecs-white);
font: 600 var(--fs-sm)/1 var(--ecs-sans); color: var(--ecs-ink); cursor:pointer; transition: var(--ecs-tr);
}
.ecs-prose .ecs-share a:hover, .ecs-share button:hover{ border-color: var(--ecs-ink) }
.ecs-share button.is-done{ background: var(--ecs-ink); border-color: var(--ecs-ink); color:#fff }
/* ---- 38.8 الخدمة المرتبطة + مقالات أخرى ---- */
.ecs-acta{ padding-block: clamp(36px, 4.4vw, 60px); background: var(--ecs-ink); color:#fff;
background-image:
linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
background-size:56px 56px;
}
.ecs-acta__in{ display:grid; grid-template-columns: minmax(0,1fr) auto; gap:22px 48px; align-items:center }
.ecs-eyebrow-t{ display:inline-block; margin-bottom:10px; padding-bottom:4px; border-bottom:2px solid var(--ecs-hv); font-size: var(--fs-xs); font-weight:700; color: var(--ecs-hv) }
.ecs-acta :is(h2,h3,h4,h5){ margin:0 0 8px; color:#fff; font-size: var(--ecs-h3); line-height:1.35 }
.ecs-acta p{ margin:0; max-width:60ch; font-size: var(--fs-md); line-height:1.8; color:#C3D2E2 }
.ecs-acta__btns{ display:flex; flex-wrap:wrap; gap:10px }
.ecs-abtn{
display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 24px;
font-size: var(--fs-sm); font-weight:700; text-decoration:none; transition: var(--ecs-tr);
}
.ecs-abtn i{ font-style:normal }
.ecs-abtn--hv{ background: var(--ecs-hv); color: var(--ecs-hv-ink) }
.ecs-abtn--hv:hover{ background:#fff; color: var(--ecs-ink) }
.ecs-abtn--ghost{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); color:#fff }
.ecs-abtn--ghost:hover{ box-shadow: inset 0 0 0 1px #fff }
@media (max-width: 767px){ .ecs-acta__in{ grid-template-columns: minmax(0,1fr) } .ecs-abtn{ flex:1 1 200px; justify-content:center } }
.ecs-related{ padding-block: clamp(36px, 4.4vw, 60px) }
.ecs-related__head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:20px }
.ecs-related__head :is(h2,h3,h4,h5){ margin:0; font-size: var(--ecs-h3); color: var(--ecs-ink) }
.ecs-related__head a{ font-size: var(--fs-sm); font-weight:700; color: var(--ecs-ink); border-bottom:2px solid var(--ecs-hv) }
/* ---- 38.9 صفحة التصنيف ---- */
.ecs-alist{ padding-block: clamp(30px, 4vw, 52px) }
/* ---- 38.10 صفحة «المقالات» (إليمنتور) ---- */
.ecs-articles{ margin-top:4px }
.e-con.ecs-blogsec > .e-con-inner{ padding:0 }
/* ---- 38.11 الطباعة ---- */
@media print{
.ecs-toc, .ecs-share, .ecs-acta, .ecs-related, .ecs-progress, .ecs-ahero__cover{ display:none !important }
.ecs-ahero{ background:#fff !important; color:#000 !important; padding:0 0 12px }
.ecs-ahero__t{ color:#000 !important }
.ecs-abody{ display:block; padding:0 }
.ecs-prose{ font-size:12pt }
}