/* ═══════════════════════════════════════════════════════════════════
   css/conversion-kit.css
   Styles for the conversion layer rendered by js/conversion-kit.js.

   These live in a real stylesheet rather than being injected at runtime:
   the site's Content-Security-Policy sets `style-src 'self' 'nonce-…'`
   with no 'unsafe-inline', so a <style> element created in JavaScript is
   inserted into the DOM but never applied (element.sheet stays null).
   A same-origin file satisfies 'self', is cached, and cannot silently fail.

   Logical properties throughout, so one file serves the RTL and LTR pages.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ accessibility corrections measured on the live site ═══════════
   Contrast ratios below were read from the published pages with the
   WCAG formula, not estimated. Each rule raises a real failure to the
   AA threshold (4.5:1 for normal text, 3:1 for large text) while
   keeping the colour recognisably the same.
   ══════════════════════════════════════════════════════════════════ */

/* WhatsApp calls-to-action ship as Tailwind `bg-green-500` with white text:
   2.28:1, so the label on the site's second-most-important button was the
   hardest text on the page to read — including the one that renders the phone
   number. green-700 keeps the WhatsApp identity and reaches 5.0:1. */
a.bg-green-500,
button.bg-green-500 {
  background-color: #15803d !important;
}
a.bg-green-500:hover,
a.bg-green-500:focus-visible,
button.bg-green-500:hover,
button.bg-green-500:focus-visible {
  background-color: #166534 !important;
}

/* Category chips on the blog and article cards: small bold labels on their own
   tinted background, all between 3.0:1 and 4.4:1. Scoped to the chip pattern so
   the same Tailwind colours keep their normal value elsewhere. */
.text-xs.font-bold.text-green-600,
.text-sm.font-bold.text-green-600 { color: #15803d; }
.text-xs.font-bold.text-orange-600,
.text-sm.font-bold.text-orange-600 { color: #c2410c; }
.text-xs.font-bold.text-cyan-600,
.text-sm.font-bold.text-cyan-600 { color: #0e7490; }
.text-xs.font-bold.text-blue-600,
.text-sm.font-bold.text-blue-600 { color: #1d4ed8; }
.text-xs.font-bold.text-red-600,
.text-sm.font-bold.text-red-600 { color: #b91c1c; }
.text-xs.font-bold.text-sky-600,
.text-sm.font-bold.text-sky-600 { color: #0369a1; }

/* The two lead paragraphs under the client and partner logos sat at 4.34:1 on
   the section's slate tint — just under the threshold, and they are the lines
   that carry the social proof. */
p.text-slate-500.text-lg { color: #475569; }

/* slate-400 (#94a3b8) is a border and placeholder tone, not a text tone: on
   white it measures 2.56:1. It was carrying real content on 40+ pages — the
   article breadcrumbs, the author credit line, the "شارك:" share label, the
   glossary term counts and a comparison-table cell on /about. slate-500 reads
   the same way at 4.76:1. Only text elements are touched, so borders,
   dividers and icons using the same utility are unaffected. */
p.text-slate-400,
span.text-slate-400,
a.text-slate-400,
li.text-slate-400,
td.text-slate-400,
th.text-slate-400,
small.text-slate-400 { color: #64748b; }
/* The article breadcrumb sets the tone on its wrapper, so the links inside it
   inherit rather than carry the class — 44 pages where "الرئيسية" sat at
   2.56:1 and an element-scoped rule could not see it. */
div.text-slate-400 a,
nav.text-slate-400 a,
p.text-slate-400 a { color: #64748b; }

/* …but the same utility is also light text on the dark service cards, where
   darkening it made things worse (3.07:1, measured after the rule above
   shipped). Inside a dark container it goes the other way instead. */
.bg-slate-800 p.text-slate-400,
.bg-slate-800 span.text-slate-400,
.bg-slate-800 li.text-slate-400,
.bg-slate-900 p.text-slate-400,
.bg-slate-900 span.text-slate-400,
.bg-slate-900 li.text-slate-400,
.bg-slate-950 p.text-slate-400,
.bg-slate-950 span.text-slate-400,
.bg-blue-900 p.text-slate-400,
.bg-blue-900 span.text-slate-400,
.bg-blue-950 p.text-slate-400,
.bg-blue-950 span.text-slate-400,
[class*="from-slate-9"] p.text-slate-400,
[class*="from-slate-8"] p.text-slate-400,
[class*="from-blue-9"] p.text-slate-400,
[class*="to-slate-9"] p.text-slate-400,
.bg-blue-900 th.text-slate-400,
.bg-blue-900 td.text-slate-400,
.bg-slate-900 th.text-slate-400,
.bg-slate-800 th.text-slate-400 { color: #cbd5e1; }

/* Share links are a bare icon: 18-20px wide, the smallest targets left. */
a.text-blue-500.text-xl,
a.text-blue-800.text-xl,
a.text-blue-400.text-xl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 40px;
  min-block-size: 40px;
}

/* Article category chips use a different spelling from the blog's: the colour
   utility sits next to its own bg-*-50 rather than next to text-xs/font-bold. */
.bg-green-50.text-green-600 { color: #15803d; }
.bg-orange-50.text-orange-600 { color: #c2410c; }
.bg-cyan-50.text-cyan-600 { color: #0e7490; }
.bg-blue-50.text-blue-600 { color: #1d4ed8; }
.bg-red-50.text-red-600 { color: #b91c1c; }
.bg-sky-50.text-sky-600 { color: #0369a1; }
.bg-emerald-600.text-white { background-color: #047857; }
.bg-sky-600.text-white { background-color: #0369a1; }

/* Glossary letter links measured 8×20 — a two-character target. */
a.text-slate-300.text-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 40px;
  min-block-size: 40px;
}

/* "Read more" on the blog cards measured 86×27, and the equivalent links on
   the homepage service and article cards 30px: each is the only route from a
   card into the page behind it, and all were short of a comfortable tap. */
a.inline-block.text-blue-800,
a.text-blue-800.text-xl,
a.text-blue-400.font-bold {
  padding-block: 6px;
  min-block-size: 40px;
}
a.text-blue-400.font-bold {
  display: inline-flex;
  align-items: center;
}

/* Carousel dots render as a 22×32 box — below the size a thumb reliably hits.
   The pseudo-element enlarges only the hit area, so the dots look unchanged
   and stay narrower than their 42px pitch, which keeps them distinguishable. */
/* The dot rows carry 16 dots at a 32px pitch — 512px of controls in a 360px
   viewport, with `flex-wrap: nowrap` and a parent that clips. Twelve of the
   32 dots on the homepage sat outside the screen entirely and could not be
   reached at all on a phone. Wrapping puts every dot back in reach. */
@media (max-width: 767px) {
  .carousel-dots {
    flex-wrap: wrap;
    row-gap: 6px;
  }
}

.carousel-dot { position: relative; }
.carousel-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
}

/* ── floating click-to-call ──────────────────────────────────────── */
/* Sibling of .wa-fab inside #wa-widget, which is already a fixed flex
   column with its own gap and z-index. Nothing here positions the button:
   adding a second fixed container is what previously made the two controls
   overlap. Dimensions are matched to .wa-fab in css/site-shell.css. */
.efi-call-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%);
  box-shadow: 0 10px 26px rgb(30 58 138 / 0.42);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.efi-call-fab svg {
  inline-size: 1.65rem;
  block-size: 1.65rem;
  fill: currentColor;
  flex: none;
}
.efi-call-fab:hover,
.efi-call-fab:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgb(30 58 138 / 0.55);
}
.efi-call-fab:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .efi-call-fab { transition: none; }
  .efi-call-fab:hover, .efi-call-fab:focus-visible { transform: none; }
}

/* ── header click-to-call ────────────────────────────────────────── */
.efi-hdr-tel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
  padding: 6px 10px;
  border-radius: 8px;
  direction: ltr;
}
.efi-hdr-tel:hover { background: rgb(30 58 138 / 0.1); }
.efi-hdr-tel svg { inline-size: 18px; block-size: 18px; fill: currentColor; flex: none; }
@media (max-width: 900px) { .efi-hdr-tel { display: none; } }

/* ── post-submission next steps ──────────────────────────────────── */
/* Appended inside whatever success state a form shows, so it inherits that
   container's width and alignment. Colours are fixed rather than inherited:
   the homepage success line sits on a dark hero, the contact page's on white. */
.efi-next {
  margin-block-start: 18px;
  padding: 18px;
  border-radius: 16px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  color: #0f172a;
  text-align: start;
}
.efi-next__title { margin: 0 0 10px; font-size: 0.95rem; font-weight: 900; color: #0c4a6e; }
.efi-next__steps {
  margin: 0 0 14px;
  padding-inline-start: 1.35em;
  display: grid;
  gap: 6px;
  font-size: 0.85rem;
  line-height: 1.7;
  color: #334155;
}
.efi-next__urgent { margin: 0 0 10px; font-size: 0.85rem; font-weight: 800; color: #0f172a; }
.efi-next__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.efi-next__actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  font: 700 0.85rem/1 inherit;
  text-decoration: none;
  color: #fff;
}
.efi-next__actions a svg { inline-size: 18px; block-size: 18px; fill: currentColor; flex: none; }
.efi-next__actions a.wa { background: #25d366; color: #06301a; }
.efi-next__actions a.tel { background: #1e3a8a; }

/* ── contact details panel (contact pages) ───────────────────────── */
.efi-contact-panel {
  margin-block: 28px 0;
  padding: 24px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  text-align: start;
}
.efi-contact-panel h2 {
  margin: 0 0 16px;
  font-size: 1.15rem;
  font-weight: 900;
  color: #1e3a8a;
}
.efi-contact-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.efi-contact-list li {
  display: grid;
  grid-template-columns: minmax(7.5rem, max-content) 1fr;
  gap: 4px 14px;
  align-items: start;
  font-size: 0.92rem;
  line-height: 1.75;
}
.efi-contact-label { font-weight: 800; color: #475569; }
/* Each value is a phone, WhatsApp or e-mail link — the actions this panel
   exists for. At the panel's font size the anchors were only 26px tall, so
   they were the smallest tap targets on the page that converts. */
.efi-contact-list a {
  display: inline-block;
  color: #1d4ed8;
  font-weight: 700;
  text-decoration: none;
  padding-block: 7px;
  min-block-size: 40px;
}
.efi-contact-list a:hover { text-decoration: underline; }
.efi-contact-value { color: #0f172a; }
.efi-contact-value small { display: inline-block; color: #64748b; font-size: 0.8rem; }
.efi-contact-map {
  display: inline-block;
  margin-block-start: 6px;
  padding-block: 7px;
  min-block-size: 40px;
}
.efi-contact-promise {
  margin: 18px 0 0;
  padding-block-start: 14px;
  border-block-start: 1px dashed #cbd5e1;
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.75;
}
@media (max-width: 640px) {
  .efi-contact-panel { padding: 18px; }
  .efi-contact-list li { grid-template-columns: 1fr; }
}

/* ── calculator result capture ───────────────────────────────────── */
.efi-calc-capture {
  margin-block-start: 14px;
  padding: 18px;
  border-radius: 16px;
  background: rgb(56 189 248 / 0.08);
  border: 1px solid rgb(56 189 248 / 0.28);
  text-align: start;
}
.efi-calc-capture h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 800; color: inherit; }
.efi-calc-capture p { margin: 0 0 14px; font-size: 0.83rem; opacity: 0.85; line-height: 1.65; }
.efi-calc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-end: 16px; }
.efi-calc-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 12px;
  font: 700 0.85rem/1 inherit;
  text-decoration: none;
  color: #fff;
}
.efi-calc-actions a svg { inline-size: 18px; block-size: 18px; fill: currentColor; flex: none; }
.efi-calc-actions a.wa { background: #25d366; color: #06301a; }
.efi-calc-actions a.tel { background: #1e3a8a; }
.efi-calc-form { display: grid; gap: 9px; }
.efi-calc-form input,
.efi-calc-form button { font-family: inherit; font-size: 0.85rem; }
.efi-calc-form input {
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid rgb(148 163 184 / 0.4);
  background: rgb(255 255 255 / 0.06);
  color: inherit;
  inline-size: 100%;
}
.efi-calc-form input::placeholder { color: inherit; opacity: 0.5; }
.efi-calc-form button {
  padding: 12px 16px;
  border-radius: 10px;
  border: 0;
  background: #dc2626;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.efi-calc-form button[disabled] { opacity: 0.6; cursor: progress; }
.efi-calc-msg { font-size: 0.82rem; margin: 0; line-height: 1.6; }
.efi-calc-msg.ok { color: #16a34a; }
.efi-calc-msg.err { color: #dc2626; }

/* ── in-page lead capture ────────────────────────────────────────── */
.efi-capture {
  max-inline-size: 52rem;
  margin: 48px auto 56px;
  padding: clamp(20px, 4vw, 32px);
  border-radius: 18px;
  background: linear-gradient(150deg, #0b1c33 0%, #0d2748 60%, #123362 100%);
  border: 1px solid rgb(56 189 248 / 0.3);
  box-shadow: 0 18px 50px -20px rgb(0 0 0 / 0.6);
  color: #eef6ff;
  text-align: start;
}
/* Selectors are scoped to .efi-capture rather than written bare: the article
   pages style their own headings and paragraphs, and a bare `.efi-cap-title`
   lost to `.article-body h2` — which painted the heading dark navy on this
   block's dark navy background, leaving it unreadable. */
.efi-capture .efi-cap-title {
  margin: 0 0 8px;
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.35;
  text-wrap: balance;
  border: 0;
  padding: 0;
  background: none;
}
.efi-capture .efi-cap-body {
  margin: 0 0 18px;
  font-size: 0.9rem;
  line-height: 1.75;
  color: #a8c8e8;
}
.efi-cap-quick { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-block-end: 18px; }
.efi-cap-wa,
.efi-cap-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.86rem;
  text-decoration: none;
}
.efi-cap-wa { background: #25d366; color: #06301a; }
.efi-cap-tel { background: rgb(255 255 255 / 0.1); color: #eef6ff; border: 1px solid rgb(255 255 255 / 0.22); }
.efi-cap-link { font-size: 0.84rem; font-weight: 700; color: #7dd3fc; text-decoration: none; }
.efi-cap-link:hover { text-decoration: underline; }
.efi-cap-form { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.efi-cap-form input,
.efi-cap-form button { font-family: inherit; font-size: 0.87rem; }
.efi-cap-form input {
  padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid rgb(148 163 184 / 0.35);
  background: rgb(4 12 24 / 0.6);
  color: #eef6ff;
  inline-size: 100%;
}
.efi-cap-form input::placeholder { color: #7f9ec0; }
.efi-cap-form input:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgb(56 189 248 / 0.16);
}
.efi-cap-form button {
  padding: 12px 20px;
  border-radius: 11px;
  border: 0;
  background: #dc2626;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}
.efi-cap-form button[disabled] { opacity: 0.6; cursor: progress; }
.efi-cap-msg { grid-column: 1 / -1; margin: 0; font-size: 0.83rem; line-height: 1.6; color: #a8c8e8; }
.efi-cap-msg.ok { color: #34d399; }
.efi-cap-msg.err { color: #fb7185; }
@media (max-width: 520px) {
  .efi-capture { margin-inline: 16px; }
  .efi-cap-form { grid-template-columns: 1fr; }
}

/* ── legal identity bar (footer) ─────────────────────────────────── */
.efi-legal {
  margin-block-start: 14px;
  padding-block: 14px 4px;
  border-block-start: 1px solid rgb(255 255 255 / 0.12);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 0;
  font-size: 0.76rem;
  line-height: 1.9;
  opacity: 0.75;
  text-align: center;
}
.efi-legal__item { white-space: nowrap; }
/* A dot separator drawn by CSS keeps the markup free of decorative text. */
.efi-legal__item + .efi-legal__item::before {
  content: "·";
  margin-inline: 10px;
  opacity: 0.5;
}
/* Registry numbers are Latin digits inside Arabic prose: isolate each one so
   the bidirectional algorithm cannot merge it with the neighbouring label. */
.efi-legal bdi {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
@media (max-width: 700px) {
  .efi-legal { font-size: 0.72rem; line-height: 1.8; }
  .efi-legal__item { white-space: normal; }
  .efi-legal__item + .efi-legal__item::before { margin-inline: 7px; }
}

/* ── honeypot ────────────────────────────────────────────────────── */
/* The field is clipped, not removed, so a bot still fills it in.
 *
 * It must also be pinned. With no inset it sat at its static position inside
 * an RTL grid, one cell past the inline end of the form — a 1px box outside
 * the viewport, which made the whole document 37px wider than the screen and
 * gave every page carrying this block a horizontal scroll on mobile. A clip
 * hides a box; it does not stop it contributing to overflow. The ancestors
 * below are given a positioning context so `inset: 0` resolves against the
 * form rather than against whatever happens to be positioned further up.
 */
.efi-cap-form,
.efi-calc-form {
  position: relative;
}
.efi-hp {
  position: absolute !important;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: 0;
}