/* ==========================================================================
   Wadifa Pro — design system (custom, lean, RTL-aware). Goal: fast CWV + clean UX.
   ========================================================================== */
:root{
  --brand:#16a34a;        /* emerald green */
  --brand-2:#0f7d3a;
  --brand-soft:#e9f8ef;
  --brand-ink:#0b3d22;
  --accent:#f59e0b;       /* amber, used sparingly */
  --ink:#0f172a;          /* headings */
  --body:#475569;         /* text */
  --muted:#8494a7;
  --line:#e6ebf1;
  --bg:#f7f9fb;
  --card:#ffffff;
  --ring:0 0 0 4px rgba(22,163,74,.15);
  --sh-sm:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.05);
  --sh:0 6px 20px rgba(15,23,42,.08);
  --sh-lg:0 18px 40px rgba(15,23,42,.12);
  --r:14px; --r-sm:10px; --r-lg:22px;
  --step:clamp(.9rem,.85rem + .3vw,1rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--body);
  font-family:"Segoe UI",system-ui,"Cairo","Tajawal",Tahoma,Arial,sans-serif;
  font-size:var(--step);line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;display:flex;flex-direction:column}
.wf-main{flex:1 0 auto}
.wf-footer{flex-shrink:0}
/* reusable breadcrumb (visible nav paired with BreadcrumbList schema) */
.wf-crumb{max-width:1100px;margin:14px auto 0;padding:9px 14px;background:#f5f7f9;border:1px solid var(--line);border-radius:10px;font-size:.86rem;overflow-x:auto;white-space:nowrap;text-align:start!important}
.wf-crumb ol{list-style:none;display:flex;flex-wrap:nowrap;gap:0;padding:0;margin:0}
.wf-crumb li{display:inline-flex;align-items:center}
.wf-crumb li+li::before{content:"›";padding:0 8px;color:#94a3b8}
.wf-crumb a{color:var(--brand);text-decoration:none;font-weight:700}
.wf-crumb a:hover{text-decoration:underline}
.wf-crumb li[aria-current]{color:#64748b;font-weight:700}
@media(max-width:600px){.wf-crumb{font-size:.8rem;padding:8px 10px;border-radius:8px}}
h1,h2,h3,h4{color:var(--ink);line-height:1.25;margin:0;font-weight:800;letter-spacing:-.01em}
p{margin:0 0 1rem}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}

.wf-container{width:min(1180px,92%);margin-inline:auto}
.wf-section{padding:clamp(38px,6vw,72px) 0}
.wf-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--brand-2);
  background:var(--brand-soft);padding:5px 12px;border-radius:999px}
.wf-h2{font-size:clamp(1.5rem,1rem + 2.2vw,2.2rem)}
.wf-lead{font-size:clamp(1rem,.95rem + .5vw,1.18rem);color:var(--body)}
.wf-center{text-align:center}
/* follow reading direction (right in AR, left in FR) — overrides theme's forced text-align:left */
.wf-cat,.wf-job,.wf-qa .a,.wf-card,.wf-cat h3,.wf-cat p,.wf-job h3,.wf-card h3,.wf-card p{text-align:start}
/* RTL safety net: the theme bundle sets body{text-align:left}, which direction:rtl alone can't
   undo — Arabic pages then render left-aligned wherever a component doesn't override (e.g. the
   "المزيد" dropdown). Scoped to the AR document; FR (<html> without dir) keeps the theme default. */
html[dir="rtl"] body{text-align:right}
.wf-headline{max-width:640px;margin-inline:auto;margin-bottom:clamp(24px,4vw,40px)}

/* buttons */
.wf-btn{--_bg:var(--brand);--_fg:#fff;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:700;cursor:pointer;border:1px solid transparent;border-radius:var(--r-sm);
  padding:.72em 1.3em;background:var(--_bg);color:var(--_fg);transition:transform .12s,box-shadow .12s,background .12s;white-space:nowrap}
.wf-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(22,163,74,.28)}
.wf-btn:active{transform:translateY(0)}
.wf-btn--lg{padding:.85em 1.6em;font-size:1.05rem}
.wf-btn--ghost{--_bg:#fff;--_fg:var(--brand-2);border-color:var(--brand)}
.wf-btn--ghost:hover{--_bg:var(--brand-soft);box-shadow:none}
.wf-btn--soft{--_bg:var(--brand-soft);--_fg:var(--brand-2)}
.wf-btn--amber{--_bg:var(--accent);--_fg:#3b2600}

/* card / chip */
.wf-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm)}
.wf-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:5px 12px;font-size:.82rem;font-weight:600;color:var(--body);box-shadow:var(--sh-sm)}
.wf-chip b{color:var(--brand-2)}
.wf-tag{display:inline-block;border:1px solid var(--line);border-radius:8px;padding:2px 9px;font-size:.82rem;margin:2px;color:var(--body)}
.wf-tag--green{border-color:rgba(22,163,74,.3);color:var(--brand-2);font-weight:600;background:var(--brand-soft)}

/* ===== Header ===== */
.wf-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line)}
.wf-nav{display:flex;align-items:center;gap:14px;height:66px}
.wf-brand{display:flex;align-items:center;gap:10px;font-weight:900;color:var(--ink);font-size:1.15rem}
/* width:auto let the flex parent squash the 224x171 mark to a 42px square; pin both axes. */
.wf-brand .logo{height:42px;width:55px;flex:none;display:flex;align-items:center;background:none;box-shadow:none;border-radius:0}
.wf-brand .logo img,.wf-brand .logo svg{height:42px;width:55px;display:block}
/* The wordmark span holds an inline title plus a block <small>. Mixing the two broke the
   inline box (it rendered 96px tall and spilled out of the 66px header), and the Arabic
   subtitle — longer than "Wadifa Info" — wrapped onto three lines. Stack them explicitly. */
.wf-brand>span:not(.logo){display:flex;flex-direction:column;justify-content:center;line-height:1.15;white-space:nowrap}
.wf-brand small{display:block;font-size:.62rem;font-weight:600;color:var(--muted);letter-spacing:.02em;line-height:1.25;margin-top:2px;white-space:nowrap}
.wf-menu{display:flex;gap:4px;margin-inline-start:10px}
.wf-menu a{padding:9px 14px;border-radius:10px;font-weight:600;font-size:.95rem;color:var(--body);white-space:nowrap}
.wf-menu a:hover,.wf-menu a.is-active{background:var(--brand-soft);color:var(--brand-2)}
.wf-nav-spacer{flex:1}
.wf-icon-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid var(--line);
  border-radius:10px;font-weight:700;font-size:.85rem;background:#fff}
.wf-icon-btn:hover{border-color:var(--brand)}
.wf-burger{display:none;flex-direction:column;gap:5px;padding:8px;cursor:pointer;background:none;border:none}
.wf-burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
@media(max-width:992px){
  .wf-menu{position:fixed;inset-block-start:66px;inset-inline:0;flex-direction:column;background:#fff;
    border-bottom:1px solid var(--line);padding:10px;gap:2px;transform:translateY(-120%);transition:transform .25s;box-shadow:var(--sh)}
  .wf-menu.open{transform:translateY(0)}
  .wf-menu a{padding:12px 14px}
  .wf-burger{display:flex}
  .wf-hide-sm{display:none}
}

/* 993-1279px: the nav row overflows (menu links are nowrap + 4 social buttons), and in RTL the
   clipped item is the LEFTMOST one — the language switch, measured at x:-152 on a 1100px viewport.
   The socials are decoration and already vanish under 993px; the language switch is navigation and
   must survive every width. Hide the socials in this band too and tighten menu padding. */
@media(min-width:993px) and (max-width:1279px){
  .wf-nav .wf-icon-btn.wf-hide-sm{display:none}
  .wf-menu a{padding:9px 10px;font-size:.9rem}
  .wf-menu{gap:2px;margin-inline-start:4px}
}
/* The very bottom of the desktop band (993-1099) still overflowed ~40px from the menu links
   alone — squeeze harder there; the burger takes over below 993 anyway. */
@media(min-width:993px) and (max-width:1099px){
  .wf-menu a{padding:9px 7px;font-size:.84rem}
  .wf-brand small{display:none}
  .wf-nav{gap:8px}
}

/* ===== Hero ===== */
.wf-hero{position:relative;overflow:hidden;
  background:
    radial-gradient(60% 90% at 100% -10%,rgba(22,163,74,.12),transparent 60%),
    radial-gradient(50% 80% at 0% 0%,rgba(245,158,11,.10),transparent 55%),
    linear-gradient(180deg,#fff, var(--bg));
  padding:clamp(34px,6vw,72px) 0 clamp(20px,3vw,40px)}
.wf-hero h1{font-size:clamp(1.55rem,1.1rem + 2.2vw,2.5rem);text-align:center;max-width:min(820px,94%);margin-inline:auto;line-height:1.3;text-wrap:balance}
.wf-hero .wf-lead{text-align:center;max-width:620px;margin:16px auto 0}
.wf-hero-badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}

/* search */
.wf-search{margin-top:clamp(22px,4vw,34px);background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:clamp(14px,2.4vw,22px)}
.wf-search-grid{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.wf-search-grid > .wf-field{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;justify-content:flex-end}
.wf-search-grid > .wf-btn{flex:0 0 auto}
.wf-field label{display:block;font-weight:700;color:var(--ink);font-size:.9rem;margin-bottom:7px;text-align:start}
.wf-field .ctl{width:100%;height:52px;margin:0!important;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 14px;
  font:inherit;color:var(--ink);background:#fff;text-align:start;transition:border-color .12s,box-shadow .12s}
.wf-field .ctl:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
/* make select2 (auto-applied to the diploma dropdown) match the 52px inputs */
.wf-field .select2-container{width:100%!important}
.wf-field .select2-container--default .select2-selection--single{height:52px!important;border:1px solid var(--line)!important;border-radius:var(--r-sm)!important;background:#fff!important;display:flex;align-items:center}
.wf-field .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:1.4!important;color:var(--ink)!important;padding-inline:14px 30px!important;font:inherit;text-align:start}
.wf-field .select2-container--default .select2-selection--single .select2-selection__arrow{height:50px!important;top:1px}
.wf-field .select2-container--default.select2-container--focus .select2-selection--single,
.wf-field .select2-container--default.select2-container--open .select2-selection--single{border-color:var(--brand)!important;box-shadow:var(--ring)}
.wf-search .wf-btn{height:52px}
.wf-orline{display:flex;align-items:center;gap:12px;margin:14px 2px 2px;color:var(--muted);font-size:.82rem}
.wf-orline::before,.wf-orline::after{content:"";height:1px;background:var(--line);flex:1}
@media(max-width:820px){.wf-search-grid{flex-direction:column}.wf-search-grid > *,.wf-search-grid > .wf-field{width:100%;flex:1 1 auto}} /* 2026-09-23: .wf-field kept its 220px basis (higher specificity) = a 220px-tall empty band above the input on phones */

/* stats */
.wf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.wf-stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;text-align:center;box-shadow:var(--sh-sm)}
.wf-stat .n{font-size:clamp(1.5rem,1rem + 2vw,2.1rem);font-weight:900;color:var(--brand-2);line-height:1}
.wf-stat .t{font-size:.86rem;margin-top:6px;color:var(--muted)}
@media(max-width:560px){.wf-stats{grid-template-columns:1fr}}

/* category grid */
.wf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.wf-cat{position:relative;display:flex;align-items:center;gap:14px;padding:18px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);transition:transform .16s,box-shadow .16s,border-color .16s}
.wf-cat:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--brand)}
.wf-cat-lvl{display:inline-block;margin-top:7px;background:var(--brand-soft);color:var(--brand-2);border:1px solid rgba(22,163,74,.3);border-radius:999px;padding:2px 11px;font-size:.72rem;font-weight:800;letter-spacing:.02em}
.wf-cat .ic{flex:none;width:46px;height:46px;border-radius:12px;background:var(--brand-soft);color:var(--brand-2);
  display:grid;place-items:center;font-size:1.3rem}
.wf-cat h3{font-size:1rem}
.wf-cat p{margin:2px 0 0;font-size:.8rem;color:var(--muted)}

/* job preview cards */
.wf-jobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.wf-job{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;
  box-shadow:var(--sh-sm);transition:transform .16s,box-shadow .16s,border-color .16s}
.wf-job:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--brand)}
.wf-job h3{font-size:1.05rem;color:#e11d48;margin-bottom:10px}
.wf-job .row{display:flex;gap:7px;align-items:flex-start;font-size:.9rem;margin-bottom:6px}
.wf-job .row b{color:var(--brand-2);font-weight:600}
.wf-job .foot{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}

/* faq */
.wf-faq{max-width:780px;margin-inline:auto;display:grid;gap:12px}
.wf-qa{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.wf-qa summary{cursor:pointer;list-style:none;padding:16px 18px;font-weight:700;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.wf-qa summary::-webkit-details-marker{display:none}
.wf-qa summary::after{content:"+";color:var(--brand);font-weight:900;font-size:1.35rem;transition:transform .2s}
.wf-qa[open] summary::after{transform:rotate(45deg)}
.wf-qa .a{padding:0 18px 16px;color:var(--body)}

/* ad slot */
.wf-ad{margin:clamp(22px,4vw,34px) auto;text-align:center;overflow:hidden;min-height:100px}
.wf-ad small{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#b8c2ce;margin-bottom:4px}

/* ===== Footer ===== */
.wf-footer{background:#0c1424;color:#9fb0c3;margin-top:12px;border-top:3px solid var(--brand)}
.wf-footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:28px;padding:44px 0 30px}
.wf-footer .cols,.wf-footer .cols>div,.wf-footer h4,.wf-footer .brand-col p,.wf-footer .brand-col{text-align:start!important}
.wf-footer h4{color:#fff;font-size:1rem;margin-bottom:14px}
.wf-footer a{color:#c4d0dd;font-size:.92rem;display:block;padding:4px 0}
.wf-footer .wf-brand{display:inline-flex}
.wf-footer a:hover{color:#fff}
.wf-footer .brand-col p{color:#8497b0;max-width:34ch;font-size:.92rem}
.wf-footer .wf-follow{margin-top:12px;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 14px;color:#fff!important;font-weight:700;font-size:.85rem}
.wf-footer .wf-follow:hover{background:var(--brand);border-color:var(--brand)}
.wf-footer .wf-follow+.wf-follow{margin-inline-start:8px}
.wf-footer .wf-follow-li:hover{background:#0A66C2;border-color:#0A66C2}
.wf-footer .wf-copy{text-align:center;border-top:1px solid rgba(255,255,255,.08);padding:18px 0;color:#8497b0;font-size:.88rem}
.wf-social{display:flex;gap:10px;margin-top:14px}
.wf-social a{width:38px;height:38px;border-radius:10px;background:#16233b;display:grid;place-items:center}
.wf-social a:hover{background:var(--brand)}
.wf-copy{border-top:1px solid #16233b;padding:16px 0;text-align:center;font-size:.85rem;color:#7787}
@media(max-width:1000px){.wf-footer .cols{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.wf-footer .cols{grid-template-columns:1fr 1fr;gap:22px}}
/* Footer was collapsing to a SINGLE column below 460px, making it 1340px tall for just 28
   links (48px per link) and pushing the whole page to 19.6 screens — which is why in-page
   ads sat at depths nobody reaches (wf_offre_end 27% viewable). Two columns halves that.
   Pure layout: every link stays in the DOM, nothing hidden, no SEO impact. */
@media(max-width:460px){
  .wf-footer .cols{grid-template-columns:1fr 1fr;gap:14px 16px}
  .wf-footer .cols>.brand-col{grid-column:1/-1}
  .wf-footer .cols a{padding:2px 0;font-size:.86rem}
  .wf-footer .cols h4{margin-bottom:6px}
}

/* site-wide engagement slide-in card (FB follow / bookmark) */
.wf-promo{position:fixed;bottom:20px;inset-inline-end:20px;z-index:9998;width:320px;max-width:calc(100vw - 32px);background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(15,23,42,.22);padding:18px;transform:translateY(26px);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s;text-align:start}
.wf-promo.show{transform:translateY(0);opacity:1;pointer-events:auto}
.wf-promo-x{position:absolute;top:10px;inset-inline-end:10px;width:28px;height:28px;border:none;background:#f1f5f9;border-radius:8px;color:#64748b;font-size:.95rem;cursor:pointer;display:grid;place-items:center;line-height:1}
.wf-promo-x:hover{background:#e2e8f0;color:#0f172a}
.wf-promo h4{margin:0 0 6px;font-size:1.02rem;color:#0f172a;padding-inline-end:28px}
.wf-promo p{margin:0 0 14px;font-size:.88rem;color:var(--muted);line-height:1.55}
.wf-promo-actions{display:flex;flex-direction:column;gap:9px}
.wf-promo-fb{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:#1877F2;color:#fff!important;border:none;border-radius:10px;padding:11px 14px;font-weight:800;font-size:.92rem;text-decoration:none;transition:.15s}
.wf-promo-fb:hover{background:#0f63d6}
.wf-promo-bm{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brand-soft);color:var(--brand-2)!important;border:1px solid rgba(22,163,74,.28);border-radius:10px;padding:10px 14px;font-weight:800;font-size:.88rem;text-decoration:none;cursor:pointer;transition:.15s}
.wf-promo-bm:hover{background:#e3f6ea}
@media(max-width:600px){.wf-promo{bottom:74px;inset-inline-end:12px;inset-inline-start:12px;width:auto}}

.wf-reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.wf-reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.wf-reveal{opacity:1;transform:none;transition:none}}

/* saved-concours deadline nudge — fixed OVERLAY (an in-flow banner that un-hides pushes the whole
   page down = CLS). Sits above the mobile anchor ad. */
.wf-due{display:flex;align-items:center;gap:10px;width:min(1100px,92%);
  position:fixed;inset-inline:0;bottom:16px;margin-inline:auto;z-index:55;
  background:linear-gradient(135deg,#fff7ed,#fffbf5);border:1px solid #fed7aa;border-radius:12px;
  padding:10px 14px;font-family:"Cairo","Tajawal",system-ui,"Segoe UI",Tahoma,sans-serif;
  box-shadow:0 10px 30px rgba(124,45,18,.18)}
@media(max-width:768px){.wf-due{bottom:104px}}
.wf-due[hidden]{display:none}
.wf-due .wf-due-ic{font-size:1.1rem;flex:none}
.wf-due .wf-due-txt{flex:1;min-width:0;color:#7c2d12;font-size:.86rem;font-weight:700;line-height:1.6;text-align:start}
.wf-due .wf-due-txt strong{color:#9a3412;font-weight:800}
.wf-due .wf-due-more{color:#9a6b4a;font-weight:700}
.wf-due .wf-due-go{flex:none;background:#ea580c;color:#fff;border-radius:8px;padding:6px 14px;
  font-size:.8rem;font-weight:800;text-decoration:none;white-space:nowrap}
.wf-due .wf-due-go:hover{background:#c2410c;color:#fff}
.wf-due .wf-due-x{flex:none;background:none;border:none;color:#9a6b4a;font-size:.9rem;
  font-weight:800;cursor:pointer;padding:4px 6px;line-height:1}
.wf-due .wf-due-x:hover{color:#7c2d12}
@media(max-width:560px){.wf-due{flex-wrap:wrap;gap:8px}.wf-due .wf-due-txt{flex:1 1 100%;order:2}
  .wf-due .wf-due-ic{order:1}.wf-due .wf-due-x{order:1;margin-inline-start:auto}
  .wf-due .wf-due-go{order:3;width:100%;text-align:center}}

/* competition stage badge (detail header + cards share these classes) */
.wf-badge{display:inline-block;border-radius:999px;padding:2px 11px;font-size:.72rem;font-weight:800;border:1px solid;white-space:nowrap}
.wf-badge-avis{background:#e9f8ef;border-color:#a7e3c0;color:#0f7d3a}
.wf-badge-conv{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.wf-badge-oral{background:#faf5ff;border-color:#e9d5ff;color:#7e22ce}
.wf-badge-res{background:#fffbeb;border-color:#fde68a;color:#b45309}

/* ---- nav "More" dropdown: keeps the navbar to ~6 core items; on mobile the items flow inline in the burger menu ---- */
.wf-more{position:relative}
.wf-more-btn{padding:9px 14px;border-radius:10px;font-weight:600;font-size:.95rem;color:var(--body);background:none;border:none;cursor:pointer;white-space:nowrap;font-family:inherit}
.wf-more-btn:hover{background:var(--brand-soft);color:var(--brand-2)}
.wf-more-dd{display:none;position:absolute;top:calc(100% + 8px);inset-inline-end:0;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.14);padding:6px;min-width:230px;z-index:70;flex-direction:column}
.wf-more.open .wf-more-dd{display:flex}
.wf-more-dd a{display:block}
/* Mobile: groups become ACCORDIONS instead of being flattened into one long list.
   The old rule (display:contents on .wf-more/.wf-more-dd) dumped all 21 links into a
   position:fixed menu ~1056px tall inside an 812px viewport with no scrolling, so the
   last ~6 links were unreachable. Collapsed groups keep the menu ~350px and reachable. */
@media(max-width:992px){
  .wf-more{display:block;width:100%}
  .wf-more-btn{display:flex;align-items:center;justify-content:space-between;width:100%;
    background:none;border:none;padding:12px 14px;font-family:inherit;font-weight:700;
    font-size:.95rem;color:var(--body);cursor:pointer;border-radius:10px;text-align:start}
  .wf-more-btn:hover{background:var(--brand-soft);color:var(--brand-2)}
  .wf-more-dd{display:none;position:static;border:none;box-shadow:none;padding:0 0 4px;
    min-width:0;background:transparent;flex-direction:column}
  .wf-more.open .wf-more-dd{display:flex}
  .wf-more-dd a{padding-inline-start:30px!important;font-size:.92rem}
  /* safety net: however long the menu gets, it must always be scrollable and reachable */
  .wf-menu{max-height:calc(100vh - 66px);overflow-y:auto;-webkit-overflow-scrolling:touch}
}

/* ==========================================================================
   Wadifa Info — design system layer (2026-10-14). Loaded LAST in _LayoutFront / _LayoutFrontFr.
   Refines wf-pro.css tokens instead of competing with them; only shared components are styled
   here, by their existing class names, so no view logic or URL changes.
   Font: IBM Plex Sans Arabic (SIL OFL 1.1, Content/fonts/plex/OFL.txt) — Arabic + Latin from one
   family, so mixed AR/FR lines share metrics. font-display:optional = never a layout shift.
   Icons: Lucide (ISC, Views/Shared/_WfIcons.cshtml) — .wf-i.
   ========================================================================== */

@font-face{font-family:"WF Plex";font-style:normal;font-weight:400;font-display:optional;src:url(/Content/fonts/plex/plex-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EEFF}
@font-face{font-family:"WF Plex";font-style:normal;font-weight:700;font-display:optional;src:url(/Content/fonts/plex/plex-arabic-700.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EEFF}
@font-face{font-family:"WF Plex";font-style:normal;font-weight:400;font-display:optional;src:url(/Content/fonts/plex/plex-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"WF Plex";font-style:normal;font-weight:700;font-display:optional;src:url(/Content/fonts/plex/plex-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"WF Plex";font-style:normal;font-weight:400;font-display:optional;src:url(/Content/fonts/plex/plex-latin-ext-400.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"WF Plex";font-style:normal;font-weight:700;font-display:optional;src:url(/Content/fonts/plex/plex-latin-ext-700.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- 1. Tokens ----------
   Moroccan green tuned for WCAG AA: white on --brand = 5.0:1 (old #16a34a was 3.3:1), --muted 4.8:1 on white. */
:root{
  --brand:#15803d; --brand-2:#116632; --brand-soft:#ecf7f0; --brand-line:#c7e6d2; --brand-ink:#0b3d22;
  --navy:#13233f; --ink:#0f1b2e; --body:#3b4a5e; --muted:#64748b; --faint:#94a3b8;
  --line:#e3e8ef; --line-2:#d3dbe5; --bg:#f6f8fa; --card:#fff;
  --accent:#b45309; --accent-soft:#fff7ea; --accent-line:#f3d19c;   /* amber: deadlines, urgency */
  --danger:#b42318; --danger-soft:#fdecec;
  --font:"WF Plex","Segoe UI",system-ui,-apple-system,Tahoma,Arial,sans-serif;
  /* type scale (1.125 minor third, 16px base) */
  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:.9375rem; --fs-md:1rem; --fs-lg:1.125rem; --fs-xl:1.375rem;
  --fs-2xl:clamp(1.45rem,1.1rem + 1.6vw,2rem); --fs-3xl:clamp(1.65rem,1.2rem + 2.2vw,2.5rem);
  /* spacing (4px grid) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;
  --r-xs:6px; --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(15,27,46,.06);
  --sh:0 4px 14px rgba(15,27,46,.07);
  --sh-lg:0 14px 36px rgba(15,27,46,.12);
  --ring:0 0 0 3px rgba(21,128,61,.28);
  --ease:cubic-bezier(.2,.7,.2,1); --t:.16s;
  --tap:44px;                                      /* WCAG 2.2 target size, with margin */
}

/* ---------- 2. Base ---------- */
body{font-family:var(--font);font-size:var(--fs-base);line-height:1.75;color:var(--body);background:var(--bg)}
html[lang="fr"] body,html[dir="ltr"] body{line-height:1.65}
h1,h2,h3,h4,h5{font-family:var(--font);color:var(--ink);font-weight:700;letter-spacing:0;line-height:1.35}
h1{font-size:var(--fs-2xl)} h2{font-size:var(--fs-xl)} h3{font-size:var(--fs-lg)} h4{font-size:var(--fs-md)}
html[dir="ltr"] h1,html[dir="ltr"] h2{letter-spacing:-.01em}
::selection{background:#cdebd8;color:var(--ink)}
/* Visible, high-contrast focus (WCAG 2.4.11/2.4.13): outline survives forced-colors, box-shadow does not. */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;box-shadow:none;border-radius:var(--r-xs)}
a:focus-visible,button:focus-visible{outline-offset:3px}
bdi,.wf-ltr{unicode-bidi:isolate}
.wf-i{width:1.1em;height:1.1em;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.17em}
.wf-i-lg{width:1.35em;height:1.35em}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---------- 3. Header & navigation ---------- */
.wf-header{background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);box-shadow:none}
.wf-brand{font-weight:700;color:var(--ink)}
.wf-brand small{color:var(--muted);font-weight:400;font-size:var(--fs-xs)}
.wf-menu a,.wf-more-btn{font-weight:600;font-size:var(--fs-sm);color:var(--body);border-radius:var(--r-sm);transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.wf-menu a:hover,.wf-more-btn:hover,.wf-menu a.is-active{background:var(--brand-soft);color:var(--brand-2)}
.wf-menu a[aria-current="page"]{color:var(--brand-2);background:var(--brand-soft)}
.wf-more-dd{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);padding:var(--s2)}
.wf-more-dd a{font-weight:500;font-size:var(--fs-sm);padding:9px 12px;border-radius:var(--r-sm);display:flex;align-items:center;gap:10px}
.wf-more-dd a .wf-i{color:var(--muted)}
.wf-more-dd a:hover .wf-i{color:var(--brand)}
.wf-icon-btn{min-width:var(--tap);min-height:var(--tap);border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);transition:border-color var(--t),background var(--t)}
.wf-icon-btn:hover{border-color:var(--brand-line);background:var(--brand-soft)}
.wf-burger{min-width:var(--tap);min-height:var(--tap)}

/* ---------- 4. Buttons, chips, tags, badges ---------- */
.wf-btn{font-family:var(--font);font-weight:700;font-size:var(--fs-md);min-height:var(--tap);border-radius:var(--r);background:var(--brand);color:#fff;box-shadow:none;transition:background var(--t) var(--ease),transform var(--t) var(--ease)}
.wf-btn:hover{background:var(--brand-2);transform:none}
.wf-btn:active{transform:translateY(1px)}
.wf-btn--ghost{background:#fff;color:var(--brand-2);border:1px solid var(--brand-line)}
.wf-btn--ghost:hover{background:var(--brand-soft)}
.wf-chip{border:1px solid var(--line);background:#fff;color:var(--body);border-radius:var(--r-pill);font-weight:600;font-size:var(--fs-sm);min-height:36px;transition:border-color var(--t),background var(--t)}
.wf-chip:hover{border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand-2)}
.wf-tag{display:inline-flex;align-items:center;border-radius:var(--r-xs);background:#f1f4f8;color:var(--body);border:1px solid transparent;font-size:var(--fs-xs);font-weight:600;padding:2px 8px;line-height:1.6}
.wf-tag-green,.wf-tag--green{background:var(--brand-soft);color:var(--brand-2);border-color:var(--brand-line)}
.wf-tag.cur{background:var(--brand);color:#fff}
.wf-eyebrow{background:var(--brand-soft);color:var(--brand-2);font-weight:600;font-size:var(--fs-xs);letter-spacing:.01em}
.wf-fresh-new{display:inline-flex;align-items:center;background:var(--brand);color:#fff;border-radius:var(--r-xs);font-size:var(--fs-xs);font-weight:700;padding:0 7px;line-height:1.7;vertical-align:.15em;margin-inline-start:4px}

/* ---------- 5. Forms ---------- */
/* one font everywhere: the theme forced the old subset font on every control */
input,select,textarea,button,.wf-field .ctl{font-family:var(--font)!important}
.wf-field .ctl,.wf-field select,.wf-field input{min-height:var(--tap);border:1px solid var(--line-2);border-radius:var(--r);background:#fff;color:var(--ink);font-size:var(--fs-md);transition:border-color var(--t),box-shadow var(--t)}
.wf-field .ctl:hover{border-color:#b9c4d2}
.wf-field .ctl:focus,.wf-field select:focus,.wf-field input:focus{border-color:var(--brand);box-shadow:var(--ring);outline:none}
.wf-field label{font-weight:600;font-size:var(--fs-sm);color:var(--ink)}
.wf-field .select2-container--default .select2-selection--single{min-height:var(--tap);border-color:var(--line-2);border-radius:var(--r)}
.select2-container--default.select2-container--open .select2-selection--single{border-color:var(--brand);box-shadow:var(--ring)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--brand)}
::placeholder{color:#7b8797;opacity:1}

/* ---------- 6. Offer list cards (index2 / Hireo .job-listing) ----------
   Was ~650px per card on a 375px phone (one fact per line, views shown twice). Now: title,
   one wrapped meta line, tags, then status. ~3 cards per screen. */
.listings-container.compact-list-layout{display:flex;flex-direction:column;gap:var(--s3);box-shadow:none;background:none}
.job-listing{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);padding:var(--s4) var(--s4) var(--s3);margin:0;transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.job-listing:hover{border-color:var(--brand-line);box-shadow:var(--sh)}
.job-listing .job-listing-details{display:block;padding:0}
.job-listing .wf-card-head{display:flex;gap:var(--s3);align-items:flex-start}
.job-listing .wf-emp-logo{width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--line);object-fit:contain;background:#fff;flex:none}
.job-listing .job-listing-title{font-size:var(--fs-md);font-weight:700;line-height:1.55;color:var(--ink);margin:0}
.job-listing:hover .job-listing-title{color:var(--brand-2)}
.job-listing .job-listing-description{padding:0;margin-top:var(--s2)}
.job-listing .job-listing-footer{padding:0;background:none;border:0}
.job-listing .job-listing-footer ul{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0;padding:0}
.job-listing .job-listing-footer ul li{display:inline-flex;align-items:center;gap:5px;margin:0;padding:0;font-size:var(--fs-sm);color:var(--body);line-height:1.6}
.job-listing .job-listing-footer ul li>i,.job-listing .job-listing-footer ul li>.wf-i{color:var(--muted);font-size:1rem;position:static;margin:0}
/* diploma + specialty rows keep their own line, tags wrap */
.job-listing .job-listing-footer ul li:has(.wf-tag){flex-basis:100%;flex-wrap:wrap;gap:5px}
.job-listing .wf-pop{gap:10px;color:var(--muted)}
.job-listing .wf-pop-i{display:inline-flex;align-items:center;gap:4px;background:none;padding:0;font-size:var(--fs-xs);color:var(--muted)}
/* deadline chips: one family, colour = urgency */
.wf-datechip{display:inline-flex;align-items:center;gap:5px;border-radius:var(--r-xs);font-size:var(--fs-xs);font-weight:700;padding:3px 8px;border:1px solid transparent;line-height:1.6}
.wf-datechip-orange{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.wf-datechip-red{background:var(--danger-soft);color:var(--danger);border-color:#f5b5b5}
.wf-datechip-expired{background:#f1f5f9;color:#475569}   /* 10-21 UX J3: --muted on #f1f4f8 was 4.31:1; now 6.92:1 */
.wf-datechip-blue,.wf-datechip-date{background:#f1f4f8;color:var(--body)}

/* homepage rows (.wf-job) share the card language */
.wf-job{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);background:#fff;transition:border-color var(--t),box-shadow var(--t)}
.wf-job:hover{border-color:var(--brand-line);box-shadow:var(--sh);transform:none}
.wf-job h3{font-size:var(--fs-md);font-weight:700;line-height:1.55}
.wf-card,.wf-cat{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm)}
.wf-cat:hover,.wf-card:hover{border-color:var(--brand-line);box-shadow:var(--sh);transform:none}

/* ---------- 7. Offer detail ---------- */
.wf-offre .single-page-header{background:linear-gradient(180deg,#14532d 0%,#166534 100%)}
.wf-offre .single-page-header .header-details h1{font-size:var(--fs-2xl);line-height:1.4;text-shadow:none}
.wf-offre .single-page-header .wf-meta li{font-size:var(--fs-sm)}
/* the guide / employer-hub / salary cards under the H1 keep their own dark text on light fill */
.wf-offre .single-page-header .header-details p>a[style]{color:var(--ink)!important;font-weight:700!important;font-size:var(--fs-sm);border-radius:var(--r-sm)!important}
.single-page-section h3,.single-page-section h2{font-size:var(--fs-lg)}
.single-page-section{line-height:1.85}
.job-overview{border:1px solid var(--line);border-radius:var(--r);box-shadow:none;overflow:hidden}
.job-overview .job-overview-headline{background:var(--navy);color:#fff;font-weight:700;font-size:var(--fs-md)}
.job-overview .job-overview-inner ul li span{font-weight:700;color:var(--ink)}

/* ---------- 8. Tables, pagination, breadcrumbs, FAQ ---------- */
.wf-main table,.single-page-section table{border-collapse:collapse;width:100%;font-size:var(--fs-sm)}
.wf-main table th,.single-page-section table th{background:#f1f4f8;color:var(--ink);font-weight:700;text-align:start}
.wf-main table th,.wf-main table td,.single-page-section table th,.single-page-section table td{border:1px solid var(--line);padding:8px 10px}
.pagination ul{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.pagination ul li a,.pagination ul li span{min-width:var(--tap);min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm);border:1px solid var(--line);background:#fff;color:var(--body);font-weight:600;transition:background var(--t),border-color var(--t)}
.pagination ul li a:hover{border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand-2)}
.pagination ul li a.current-page,.pagination ul li.active a{background:var(--brand);border-color:var(--brand);color:#fff}
.pagination ul li.disabled a{opacity:.45;pointer-events:none}
.wf-crumb{background:transparent;border:0;padding-inline:0;font-size:var(--fs-sm)}
.wf-crumb a{color:var(--brand-2);font-weight:600}
/* 10-21 UX W7: breadcrumb links were 16-19 px tall (WCAG 2.5.8 wants 24 px; they are not inline prose) */
.breadcrumb-item a,.wf-crumb a{display:inline-flex;align-items:center;min-block-size:24px}
.wf-qa{border:1px solid var(--line);border-radius:var(--r);background:#fff}
.wf-qa summary{font-weight:700;color:var(--ink);min-height:var(--tap)}

/* ---------- 9. Footer ---------- */
.wf-footer{background:var(--navy)}
.wf-footer h4{font-weight:700;font-size:var(--fs-sm);letter-spacing:.02em}
.wf-footer a{transition:color var(--t)}

/* ---------- 10. Ads stay visibly separate from content (no imitation of cards) ---------- */
.wf-ad{border-top:1px dashed var(--line-2);border-bottom:1px dashed var(--line-2);background:transparent;padding:var(--s2) 0}
.wf-ad small{color:var(--faint);font-size:var(--fs-xs)}

/* ---------- 11. Mobile ---------- */
@media (max-width:600px){
  :root{--fs-base:.9375rem}
  .job-listing{padding:var(--s3) var(--s3) var(--s2)}
  .job-listing .wf-emp-logo{width:36px;height:36px}
  .job-listing .job-listing-footer ul{gap:4px 12px}
  .wf-offre .single-page-header .header-details h1{font-size:1.35rem}
}

/* ---------- 12. Homepage ---------- */
.wf-htool .i,.wf-why-c .i{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r);background:var(--brand-soft);color:var(--brand-2);font-size:0}
.wf-htool .i .wf-i,.wf-why-c .i .wf-i{width:22px;height:22px}
.wf-htool:hover .i{background:var(--brand);color:#fff}
.wf-stat{border:1px solid var(--line);border-radius:var(--r);box-shadow:none}
.wf-stat .n{color:var(--brand-2);font-weight:700}
/* three stats stay one row on phones (were three full-width cards = a screen of scrolling) */
@media (max-width:560px){
  .wf-stats{grid-template-columns:repeat(3,1fr);gap:8px}
  .wf-stat{padding:12px 6px}
  .wf-stat .n{font-size:1.3rem}
  .wf-stat .t{font-size:var(--fs-xs);line-height:1.4}
}
/* scroll-reveal must never hide content: visible at once for reduced-motion users */
@media (prefers-reduced-motion:reduce){.wf-reveal{opacity:1;transform:none}}

/* ---------- 13. Page-scoped brand variables follow the AA token ----------
   Views declare their own --wf-brand (.wf-list, .wf-offre, .wf-page…) after this file; body + class wins. */
body .wf-list,body .wf-offre,body .wf-page,body .wf-calc,body .wf-terms{--wf-brand:var(--brand);--wf-brand-dark:var(--brand-2)}

/* ---------- 14. Icons without icon fonts ----------
   The site loaded 4 icon fonts (Material, Feather, Line-Awesome, Brand: ~355 KB TTF + 96 KB icons.css) for 25 glyphs.
   Same class names, now drawn by CSS masks from Lucide (ISC) / Simple Icons (CC0) SVGs: follow currentColor, no font file. */
[class^="icon-material-"],[class*=" icon-material-"],[class^="icon-feather-"],[class*=" icon-feather-"],[class^="icon-line-awesome-"],[class*=" icon-line-awesome-"],[class^="icon-brand-"],[class*=" icon-brand-"]{display:inline-block;width:1em;height:1em;line-height:1;vertical-align:-.14em;font-style:normal;flex:none}
[class^="icon-material-"]::before,[class*=" icon-material-"]::before,[class^="icon-feather-"]::before,[class*=" icon-feather-"]::before,[class^="icon-line-awesome-"]::before,[class*=" icon-line-awesome-"]::before,[class^="icon-brand-"]::before,[class*=" icon-brand-"]::before{content:"";display:block;width:100%;height:100%;background-color:currentColor;-webkit-mask:var(--wf-ic) center/contain no-repeat;mask:var(--wf-ic) center/contain no-repeat}
.icon-material-outline-business{--wf-ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z%22 /%3E%3Cpath d=%22M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2%22 /%3E%3Cpath d=%22M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2%22 /%3E%3Cpath d=%22M10 6h4%22 /%3E%3Cpath d=%22M10 10h4%22 /%3E%3Cpath d=%22M10 14h4%22 /%3E%3Cpath d=%22M10 18h4%22 /%3E%3C/svg%3E")}
.icon-material-outline-access-time{--wf-ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 /%3E%3Cpolyline points=%2212 6 12 12 16 14%22 /%3E%3C/svg%3E")}
.icon-material-outline-location-on{--wf-ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0%22 /%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%223%22 /%3E%3C/svg%3E")}
.icon-material-outline-keyboard-arrow-right{--wf-ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22m9 18 6-6-6-6%22 /%3E%3C/svg%3E")}
.icon-material-outline-keyboard-arrow-left{--wf-ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22m15 18-6-6 6-6%22 /%3E%3C/svg%3E")}
.icon-material-outline-date-range{--wf-ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M8 2v4%22 /%3E%3Cpath d=%22M16 2v4%22 /%3E%3Crect x=%223%22 y=%224%22 rx=%222%22 /%3E%3Cpath d=%22M3 10h18%22 /%3E%3C/svg%3E")}
.icon-material-outline-school{--wf-ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z%22 /%3E%3Cpath d=%22M22 10v6%22 /%3E%3Cpath d=%22M6 12.5V16a6 3 0 0 0 12 0v-3.5%22 /%3E%3C/svg%3E")}
.icon-material-outline-monetization-on{--wf-ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Crect x=%222%22 y=%226%22 rx=%222%22 /%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%222%22 /%3E%3Cpath d=%22M6 12h.01M18 12h.01%22 /%3E%3C/svg%3E")}
.icon-material-outline-history{--wf-ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8%22 /%3E%3Cpath d=%22M3 3v5h5%22 /%3E%3Cpath d=%22M12 7v5l4 2%22 /%3E%3C/svg%3E")}
.icon-material-outline-group{--wf-ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2%22 /%3E%3Ccircle cx=%229%22 cy=%227%22 r=%224%22 /%3E%3Cpath d=%22M22 21v-2a4 4 0 0 0-3-3.87%22 /%3E%3Cpath d=%22M16 3.13a4 4 0 0 1 0 7.75%22 /%3E%3C/svg%3E")}
.icon-material-outline-description{--wf-ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z%22 /%3E%3Cpath d=%22M14 2v4a2 2 0 0 0 2 2h4%22 /%3E%3Cpath d=%22M10 9H8%22 /%3E%3Cpath d=%22M16 13H8%22 /%3E%3Cpath d=%22M16 17H8%22 /%3E%3C/svg%3E")}
.icon-material-outline-content-copy{--wf-ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Crect x=%228%22 y=%228%22 rx=%222%22 ry=%222%22 /%3E%3Cpath d=%22M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2%22 /%3E%3C/svg%3E")}
.icon-material-outline-business-center{--wf-ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16%22 /%3E%3Crect x=%222%22 y=%226%22 rx=%222%22 /%3E%3C/svg%3E")}
.icon-material-outline-assignment{--wf-ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Crect x=%228%22 y=%222%22 rx=%221%22 ry=%221%22 /%3E%3Cpath d=%22M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2%22 /%3E%3Cpath d=%22M12 11h4%22 /%3E%3Cpath d=%22M12 16h4%22 /%3E%3Cpath d=%22M8 11h.01%22 /%3E%3Cpath d=%22M8 16h.01%22 /%3E%3C/svg%3E")}
.icon-material-outline-arrow-right-alt{--wf-ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M5 12h14%22 /%3E%3Cpath d=%22m12 5 7 7-7 7%22 /%3E%3C/svg%3E")}
.icon-material-outline-account-balance-wallet{--wf-ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1%22 /%3E%3Cpath d=%22M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4%22 /%3E%3C/svg%3E")}
.icon-line-awesome-whatsapp{--wf-ic:url("data:image/svg+xml,%3Csvg fill=%22%23000%22 role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z%22/%3E%3C/svg%3E")}
.icon-line-awesome-telegram{--wf-ic:url("data:image/svg+xml,%3Csvg fill=%22%23000%22 role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z%22/%3E%3C/svg%3E")}
.icon-brand-facebook-f{--wf-ic:url("data:image/svg+xml,%3Csvg fill=%22%23000%22 role=%22img%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z%22/%3E%3C/svg%3E")}
.icon-feather-share-2{--wf-ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Ccircle cx=%2218%22 cy=%225%22 r=%223%22 /%3E%3Ccircle cx=%226%22 cy=%2212%22 r=%223%22 /%3E%3Ccircle cx=%2218%22 cy=%2219%22 r=%223%22 /%3E%3Cline x1=%228.59%22 x2=%2215.42%22 y1=%2213.51%22 y2=%2217.49%22 /%3E%3Cline x1=%2215.41%22 x2=%228.59%22 y1=%226.51%22 y2=%2210.49%22 /%3E%3C/svg%3E")}
.icon-feather-download{--wf-ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4%22 /%3E%3Cpolyline points=%227 10 12 15 17 10%22 /%3E%3Cline x1=%2212%22 x2=%2212%22 y1=%2215%22 y2=%223%22 /%3E%3C/svg%3E")}
.icon-feather-delete{--wf-ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M10 5a2 2 0 0 0-1.344.519l-6.328 5.74a1 1 0 0 0 0 1.481l6.328 5.741A2 2 0 0 0 10 19h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2z%22 /%3E%3Cpath d=%22m12 9 6 6%22 /%3E%3Cpath d=%22m18 9-6 6%22 /%3E%3C/svg%3E")}
.icon-feather-arrow-up-circle{--wf-ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 /%3E%3Cpath d=%22m16 12-4-4-4 4%22 /%3E%3Cpath d=%22M12 16V8%22 /%3E%3C/svg%3E")}
.icon-feather-arrow-down-circle{--wf-ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 /%3E%3Cpath d=%22M12 8v8%22 /%3E%3Cpath d=%22m8 12 4 4 4-4%22 /%3E%3C/svg%3E")}
.icon-feather-x{--wf-ic:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M18 6 6 18%22 /%3E%3Cpath d=%22m6 6 12 12%22 /%3E%3C/svg%3E")}
.bookmark-icon::before{content:""!important;font-family:inherit!important;width:18px;height:18px;margin:0 auto;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z%22 /%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z%22 /%3E%3C/svg%3E") center/contain no-repeat}
.mfp-close::before{content:""!important;font-family:inherit!important;display:inline-block;width:20px;height:20px;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M18 6 6 18%22 /%3E%3Cpath d=%22m6 6 12 12%22 /%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M18 6 6 18%22 /%3E%3Cpath d=%22m6 6 12 12%22 /%3E%3C/svg%3E") center/contain no-repeat}
.bootstrap-select.btn-group .dropdown-menu li span.check-mark::before{content:""!important;font-family:inherit!important;width:16px;height:16px;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M20 6 9 17l-5-5%22 /%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E%3Cpath d=%22M20 6 9 17l-5-5%22 /%3E%3C/svg%3E") center/contain no-repeat}
#navigation ul li a::after,.bs-searchbox::after,.slider-handle.custom::before,.slick-prev::before,.slick-next::before,#streetView::before{content:none!important}

/* ---------- 15. Old subset font retired ----------
   The theme still names 'MyArabicFont' for controls; redefining it here (later rule wins) points it at Plex, so the
   62 KB arabic.woff2 is never downloaded again. */
@font-face{font-family:"MyArabicFont";font-style:normal;font-weight:400;font-display:optional;src:url(/Content/fonts/plex/plex-arabic-400.woff2) format("woff2")}