/* Shared component styles for /sa/ Arabic pages.
   The regional markup uses component classes (.grid-3, .tiers, .steps, …)
   that the per-page base stylesheets predate. Linked into every lang="ar"
   page under /sa/ by scripts/apply_arabic_rtl.py. */

.grid-3 { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:22px; }
a.card { display:block; color:inherit; text-decoration:none; transition:border-color .2s; }
a.card:hover { border-color:rgba(155,138,251,.45); }
.cta-row { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.btn { display:inline-block; padding:14px 28px; border-radius:980px; text-decoration:none; font-weight:500; font-size:15px; }
.btn-block { display:block; text-align:center; }
.tiers { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:18px; margin-top:32px; align-items:start; }
/* Base pricing CSS grids the whole section; the markup wraps tiers in .tiers */
section.pricing { display:block; margin-top:0; }
.hero-inner { width:100%; display:flex; flex-direction:column; align-items:center; }
.page-header-inner { max-width:880px; margin:0 auto; }
.updated { font-size:13px; color:rgba(255,255,255,.45); margin-top:10px; }

/* Saif card + avatar */
.saif-avatar {
  width:160px; height:160px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(135deg, rgba(110,86,207,.4), rgba(155,138,251,.2));
  border:2px solid rgba(155,138,251,.4);
  display:flex; align-items:center; justify-content:center;
  font-size:48px; font-weight:700; color:rgba(255,255,255,.85); overflow:hidden;
}
.saif-avatar img { width:100%; height:100%; object-fit:cover; }
.saif-body { min-width:0; }
.saif-address { font-size:13px; color:rgba(255,255,255,.55); line-height:1.8; }
.quote { font-size:20px; font-weight:600; line-height:1.6; margin-bottom:12px; }

/* Contact page */
.contact-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:28px; max-width:1100px; margin:0 auto; padding:0 24px 80px; align-items:start; }
.contact-grid form { background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:32px; display:flex; flex-direction:column; gap:18px; }
.contact-grid .form-group { display:flex; flex-direction:column; gap:8px; }
.contact-grid label { font-size:13px; color:rgba(255,255,255,.7); }
.contact-grid input, .contact-grid select, .contact-grid textarea {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:12px 14px; color:#fff; font:inherit; font-size:15px; width:100%;
}
.contact-grid textarea { min-height:120px; resize:vertical; }
.btn-submit { border:none; cursor:pointer; align-self:flex-start; }
.form-privacy { font-size:12px; color:rgba(255,255,255,.45); line-height:1.7; }
.honeypot { display:none !important; }
.contact-side { display:flex; flex-direction:column; gap:18px; }
.contact-card { background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:24px; }
.contact-card h3 { font-size:17px; margin-bottom:12px; }
.contact-card p { font-size:14px; color:rgba(255,255,255,.7); line-height:1.7; }
.contact-card .links { display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; }
.contact-card .links a { font-size:14px; color:#9b8afb; text-decoration:none; font-weight:500; }
.contact-card .links a:hover { color:#fff; }
.saif-mini { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.saif-mini .saif-avatar { width:52px; height:52px; font-size:16px; border-width:1px; }
.saif-mini .name { font-weight:600; font-size:15px; }
.role { font-size:13px; color:rgba(255,255,255,.55); }
.region-list { list-style:none; display:flex; flex-direction:column; gap:8px; font-size:14px; color:rgba(255,255,255,.75); }
.hq-badge { font-size:11px; background:rgba(155,138,251,.15); border:1px solid rgba(155,138,251,.4); color:#d6ccff; padding:2px 8px; border-radius:980px; margin-inline-start:8px; white-space:nowrap; }
.contact-card address { font-style:normal; font-size:14px; color:rgba(255,255,255,.75); line-height:1.8; }
.postal-code { font-size:12px; color:rgba(255,255,255,.5); }

/* Steps / stats / integration chips */
.steps { display:flex; flex-direction:column; gap:18px; margin-top:26px; }
/* Older page CSS numbers steps via ::before counters; pages shipping an
   explicit .step-num would render two numbers and squeeze the text column. */
.step:has(> .step-num)::before { content:none !important; display:none !important; }
.step { display:grid; grid-template-columns:56px 1fr; gap:18px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:24px; }
.step-num { width:44px; height:44px; border-radius:50%; background:rgba(110,86,207,.18); border:1px solid rgba(155,138,251,.4); color:#c9bfff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; }
.step h3 { font-size:17px; margin-bottom:8px; }
.step p { font-size:14px; color:rgba(255,255,255,.7); line-height:1.7; }
.step-meta { font-size:12px; color:rgba(255,255,255,.45); margin-top:10px; }
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:16px; margin:26px 0; }
.stat { background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:6px; }
.stat strong { font-size:20px; color:#fff; }
.stat span { font-size:13px; color:rgba(255,255,255,.6); line-height:1.6; }
.src-note { font-size:12px; color:rgba(255,255,255,.4); line-height:1.7; }
.integration-bank { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.bank-chip { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:980px; font-size:13px; color:rgba(255,255,255,.8); }
.bank-chip .ar { font-size:11px; color:rgba(255,255,255,.45); }

/* Consulting tier cards */
.tier-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:18px; margin-top:26px; }
.tier-card { background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:28px; }
.usd { font-size:13px; color:rgba(255,255,255,.45); }

/* Footer social row (AR footer variant) */
.footer-social { display:flex; gap:14px; align-items:center; margin-top:10px; }
.footer-social a { color:rgba(255,255,255,.55); display:inline-flex; }
.footer-social a:hover { color:#fff; }

@media (max-width:900px) {
  .contact-grid { grid-template-columns:1fr; padding:0 18px 60px; }
  .saif-card { grid-template-columns:1fr; text-align:center; }
  .saif-card .saif-avatar { margin:0 auto; }
  .saif-card .links { justify-content:center; }
}
@media (max-width:600px) {
  .step { grid-template-columns:1fr; gap:12px; }
  .contact-grid form { padding:24px 20px; }
}