/* ════════════════════════════════════════════════════════════════
   ar.css  —  Arabic / RTL overrides for Staffona
   Loads AFTER style.css. Contains ONLY what differs from EN.
   ════════════════════════════════════════════════════════════════ */

/* ── Fonts ───────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

:root {
  --fh: 'Cairo', serif;
  --fb: 'Cairo', 'DM Sans', system-ui, sans-serif;
}

/* ── Direction ───────────────────────────────────────────────── */
html {
  overflow-y: scroll;
  overflow-x: hidden;
}

body {
  direction: rtl;
  text-align: right;
  overflow: hidden !important;
  position: relative;
}

/* ══════════════════════════════════════════════════════════════
   NAVIGATION
   ══════════════════════════════════════════════════════════════ */
/* HTML order: [logo][links][buttons]  + RTL flex → logo RIGHT ✓ */
.nav-in {
  direction: rtl;
}

/* Dropdown: stays centered in RTL */
.ndrop-menu {
  right: 50%;
  left: auto;
  transform: translateX(50%) translateY(-6px);
  text-align: right;
  direction: rtl;
}

.ndrop:hover .ndrop-menu,
.ndrop.open .ndrop-menu {
  transform: translateX(50%) translateY(0);
}

/* Mobile nav */
.mob-nav {
  direction: rtl;
  text-align: right;
}

.mob-links {
  direction: rtl;
}

.mob-links a:hover {
  padding-right: 28px;
  padding-left: inherit;
}

/* DM button icons */
.dm-moon,
.dm-sun {
  width: 16px;
  height: 16px;
}

/* ══════════════════════════════════════════════════════════════
   HOME PAGE HERO
   ══════════════════════════════════════════════════════════════ */
.hero-in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 80px 0;
}

.hero-l {
  position: relative;
  z-index: 2;
}

.hero-r {
  position: relative;
  z-index: 2;
}

/* Glow mirrored for RTL */
.hglow {
  right: auto;
  left: -120px;
}

/* Hero text */
.h-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(200, 151, 58, .1);
  border: 1px solid rgba(200, 151, 58, .27);
  border-radius: 100px;
  padding: 6px 16px 6px 10px;
  margin-bottom: 24px;
}

.h-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  animation: blink 2.2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
    transform: scale(1)
  }

  50% {
    opacity: .4;
    transform: scale(.7)
  }
}

.h-pill-t {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .04em;
}

.h-title {
  font-family: var(--fh);
  font-size: clamp(30px, 4.5vw, 54px);
  font-weight: 800;
  line-height: 1.12;
  color: #fff;
  margin-bottom: 20px;
}

.h-title span {
  color: var(--gold);
}

.h-desc {
  font-size: 16px;
  color: rgba(255, 255, 255, .62);
  line-height: 1.8;
  margin-bottom: 36px;
  max-width: 520px;
}

.h-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.h-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.ht-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
}

.ht-item svg {
  width: 15px;
  height: 15px;
  color: var(--gold);
  flex-shrink: 0;
}

/* Hero stats card */
.stats-card {
  background: rgba(255, 255, 255, .043);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--rx);
  overflow: hidden;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.stat-i {
  text-align: center;
  padding: 18px;
  background: rgba(255, 255, 255, .04);
  border-radius: var(--rm);
}

.srv-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.srv-i {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .04);
  border-radius: var(--r);
  direction: rtl;
}

.srv-i svg {
  width: 16px;
  height: 16px;
  color: var(--gold);
  flex-shrink: 0;
}

.srv-i span {
  font-size: 13.5px;
  color: rgba(255, 255, 255, .7);
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════
   SERVICE CARDS
   ══════════════════════════════════════════════════════════════ */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.svc-card {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: var(--rx);
  padding: 28px;
  transition: all var(--t);
  cursor: pointer;
  display: block;
  text-decoration: none;
}

.svc-card:hover {
  box-shadow: var(--s3);
  border-color: rgba(200, 151, 58, .35);
  transform: translateY(-3px);
}

.svc-ic {
  width: 48px;
  height: 48px;
  border-radius: var(--rm);
  background: var(--gpl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--gold);
}

.svc-ic svg {
  width: 24px;
  height: 24px;
}

.svc-t {
  font-family: var(--fh);
  font-size: 17px;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 8px;
  line-height: 1.35;
}

.svc-d {
  font-size: 13.5px;
  color: var(--sl);
  line-height: 1.75;
  margin-bottom: 16px;
}

.svc-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ══════════════════════════════════════════════════════════════
   WHY SECTION
   ══════════════════════════════════════════════════════════════ */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.why-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--rx);
  padding: 28px;
  transition: all var(--t);
}

.why-card:hover {
  border-color: rgba(200, 151, 58, .3);
  background: rgba(255, 255, 255, .06);
}

.why-ic {
  font-size: 36px;
  margin-bottom: 14px;
  display: block;
}

.why-t {
  font-family: var(--fh);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.why-d {
  font-size: 13.5px;
  color: rgba(255, 255, 255, .5);
  line-height: 1.75;
}

/* ══════════════════════════════════════════════════════════════
   PROCESS STEPS  (AR: proc-steps / ps-*)
   ══════════════════════════════════════════════════════════════ */
.proc-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}

.proc-steps::before {
  content: '';
  position: absolute;
  top: 24px;
  right: 12.5%;
  left: 12.5%;
  height: 2px;
  background: var(--bd);
  z-index: 0;
}

.ps-i {
  text-align: center;
  padding: 0 8px;
  position: relative;
  z-index: 1;
  transition: transform var(--t);
}

.ps-i:hover {
  transform: translateY(-2px);
}

.ps-n {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  margin: 0 auto 18px;
  background: var(--gold);
  color: var(--navy);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--gold);
}

.ps-t {
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 6px;
}

.ps-d {
  font-size: 12.5px;
  color: var(--sl);
  line-height: 1.65;
}

.ps-badge {
  display: inline-block;
  background: var(--gpl);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 100px;
  margin-top: 8px;
}

.step-day {
  display: inline-block;
  background: rgba(200, 151, 58, .12);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  margin-top: 10px;
}

/* step-flow RTL connector line */
.step-flow::before {
  right: calc(12.5% + 12px);
  left: auto;
}

/* ══════════════════════════════════════════════════════════════
   CLIENTS / WHO WE SERVE GRID
   ══════════════════════════════════════════════════════════════ */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  background: var(--bd);
  border-radius: var(--rx);
  overflow: hidden;
}

.cg-item {
  background: var(--card);
  padding: 24px 20px;
  text-align: center;
}

.cg-flag {
  font-size: 32px;
  margin-bottom: 10px;
  display: block;
}

.cg-country {
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 4px;
}

.cg-desc {
  font-size: 12.5px;
  color: var(--sl);
}

/* ══════════════════════════════════════════════════════════════
   STATS BAND  (nb-n / nb-l used inline in AR pages)
   ══════════════════════════════════════════════════════════════ */
.nb-n {
  font-family: var(--fh);
  font-size: 32px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1.1;
}

.nb-l {
  font-size: 12px;
  color: var(--sl);
  margin-top: 4px;
  font-weight: 600;
  letter-spacing: .04em;
}

/* ══════════════════════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════════════════════ */
.faq-list {
  max-width: 720px;
  margin: 0 auto;
}

.faq-q {
  direction: rtl;
}

.faq-q-text {
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 700;
  color: var(--tx);
  flex: 1;
  text-align: right;
}

.faq-a-text {
  font-size: 14px;
  color: var(--sl);
  line-height: 1.8;
}

/* ══════════════════════════════════════════════════════════════
   FOOTER  (RTL alignment)
   ══════════════════════════════════════════════════════════════ */
.ftg {
  direction: rtl;
}

.flb {
  text-align: right;
  align-items: flex-start;
}

.flb>a {
  justify-content: flex-start;
}

.flb-fb {
  display: none !important;
}

.flci {
  direction: rtl;
  justify-content: flex-start;
  text-align: right;
}

.flct {
  text-align: right;
}

.flls li {
  text-align: right;
}

.ftbtm {
  direction: rtl;
}

.flb p {
  text-align: right;
  margin-left: auto;
  margin-right: 0;
}

.flb img {
  height: 68px;
}

/* Footer language switcher */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .35);
}

.lang-switch a {
  color: rgba(255, 255, 255, .5);
  transition: color var(--t);
}

.lang-switch a:hover {
  color: var(--gold);
}

.active-lang {
  color: var(--gold) !important;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHY / MISC RTL
   ══════════════════════════════════════════════════════════════ */
/* Label line: right side instead of left */
.lbl::before {
  display: none;
}

.lbl::after {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
}

/* Breadcrumb */
.breadcrumb {
  direction: rtl;
}

.bc-sep::before {
  content: '‹' !important;
}

/* Tags / pills */
.ph-tags {
  direction: rtl;
}

.ph-in {
  direction: rtl;
}

.cta-in {
  direction: rtl;
}

.cta-btns {
  direction: rtl;
}

/* Back to top: left side in RTL */
.btt {
  left: 20px;
  right: auto;
}

/* Cookie bar */
.cookie {
  direction: rtl;
  text-align: right;
}

/* Scroll reveal: mirror direction */
.rv-l {
  transform: translateX(-20px);
}

.rv-l.in {
  transform: none;
}

/* Forms */
input,
textarea,
select,
.fi,
.fta,
.fsel {
  direction: rtl;
  text-align: right;
}

.fl {
  text-align: right;
}

/* Table wrapper */
.tbl-wrap {
  overflow: visible;
  border-radius: var(--r);
  border: 1px solid var(--bd);
  margin: 20px 0;
}

.table-scroll,
.cmptbl-wrap {
  overflow: visible;
  width: 100%;
  max-width: 100%;
  max-height: none;
}

/* Tstrip RTL */
.tl,
.ts-lbl {
  padding-right: 0;
  border-right: none;
  margin-right: 0;
  padding-left: 22px;
  border-left: 1px solid var(--bd);
  margin-left: 22px;
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE  (AR pages default to dark, fixes for AR-only elements)
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .svc-card {
  background: rgba(255, 255, 255, .03);
  border-color: rgba(255, 255, 255, .07);
}

[data-theme="dark"] .cg-item {
  background: rgba(255, 255, 255, .03);
}

[data-theme="dark"] .stats-card {
  background: rgba(255, 255, 255, .043);
  border-color: rgba(255, 255, 255, .09);
}

[data-theme="dark"] .why-card {
  background: rgba(255, 255, 255, .04);
}

/* ══════════════════════════════════════════════════════════════
   LIGHT MODE  (all AR-specific overrides)
   ══════════════════════════════════════════════════════════════ */
/* Hero */
[data-theme="light"] .hero {
  background: linear-gradient(150deg, #F4F6FA 0%, #FFFFFF 55%, #F2F5FA 100%);
}

[data-theme="light"] .hgrid {
  background-image: linear-gradient(rgba(11, 31, 58, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 31, 58, .035) 1px, transparent 1px);
}

[data-theme="light"] .h-title {
  color: var(--navy);
}

[data-theme="light"] .h-title span {
  color: var(--gold);
}

[data-theme="light"] .h-desc {
  color: var(--sl);
}

[data-theme="light"] .h-pill {
  background: rgba(11, 31, 58, .06);
  border-color: rgba(11, 31, 58, .14);
}

[data-theme="light"] .h-pill-t {
  color: var(--navy);
}

[data-theme="light"] .h-trust {
  border-top-color: rgba(11, 31, 58, .12);
}

[data-theme="light"] .ht-item {
  color: var(--sl);
}

[data-theme="light"] .ht-item svg {
  color: var(--gold);
}

/* Stats card */
[data-theme="light"] .stats-card {
  background: rgba(255, 255, 255, .97);
  border-color: rgba(11, 31, 58, .12);
  box-shadow: 0 8px 40px rgba(11, 31, 58, .08);
}

[data-theme="light"] .stat-i {
  background: #F0F4FB;
}

[data-theme="light"] .stat-n {
  color: var(--navy);
}

[data-theme="light"] .stat-l {
  color: var(--sl);
}

[data-theme="light"] .srv-i {
  background: #F0F4FB;
}

[data-theme="light"] .srv-i span {
  color: var(--navy);
}

/* Service cards */
[data-theme="light"] .svc-card {
  background: #fff;
  border-color: rgba(11, 31, 58, .1);
  box-shadow: var(--s2);
}

[data-theme="light"] .svc-card:hover {
  border-color: rgba(200, 151, 58, .4);
}

[data-theme="light"] .svc-t {
  color: var(--navy);
}

[data-theme="light"] .svc-d {
  color: var(--sl);
}

[data-theme="light"] .svc-ic {
  background: rgba(11, 31, 58, .06);
}

/* Why section (stays navy in light) */
[data-theme="light"] .why-bg {
  background: var(--navy) !important;
}

[data-theme="light"] .why-card {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .08);
}

/* CTA stays navy */
[data-theme="light"] .cta-bg {
  background: var(--navy) !important;
}

/* Clients grid */
[data-theme="light"] .cg-item {
  background: #fff;
}

[data-theme="light"] .cg-country {
  color: var(--navy);
}

[data-theme="light"] .cg-desc {
  color: var(--sl);
}

/* Process steps */
[data-theme="light"] .ps-n {
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--gold);
}

[data-theme="light"] .ps-t {
  color: var(--navy);
}

[data-theme="light"] .ps-d {
  color: var(--sl);
}

/* FAQ */
[data-theme="light"] [data-theme="light"] .faq-q-text {
  color: var(--navy);
}

[data-theme="light"] .faq-a-text {
  color: var(--sl);
}

/* Buttons inside always-navy sections */
[data-theme="light"] .hero .btn-outline,
[data-theme="light"] .why-bg .btn-outline,
[data-theme="light"] .cta-bg .btn-outline,
[data-theme="light"] .csec .btn-outline {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .35) !important;
}

/* btn-ghost rules consolidated at end of file */

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE  — AR-specific breakpoints
   ══════════════════════════════════════════════════════════════ */
@media(max-width:1024px) {
  .hero-in {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px 0 40px;
  }

  .hero-r {
    display: none;
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .svc-grid {
    grid-template-columns: 1fr;
  }

  .proc-steps {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .proc-steps::before {
    display: none;
  }

  .clients-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:768px) {
  .why-grid {
    grid-template-columns: 1fr;
  }

  .clients-grid {
    grid-template-columns: 1fr;
  }

  .h-ctas {
    flex-direction: column;
    align-items: flex-start;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

@media(max-width:480px) {
  .proc-steps {
    grid-template-columns: 1fr;
  }

  .svc-grid {
    grid-template-columns: 1fr;
  }

  .h-title {
    font-size: clamp(26px, 8vw, 40px);
  }
}

/* ══════════════════════════════════════════════════════════════
   AR FINAL FIXES
   ══════════════════════════════════════════════════════════════ */

/* ── Contact section RTL ─────────────────────────────────────── */
.cin {
  direction: rtl;
}

.copt {
  direction: rtl;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--rm, 14px);
  padding: 13px 14px;
  text-decoration: none;
  transition: all .24s;
  margin-bottom: 9px;
  color: rgba(255, 255, 255, .88);
}

.copt:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(200, 151, 58, .4);
}

.copt-t {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.copt-d {
  font-size: 11px;
  color: rgba(255, 255, 255, .45);
}

.copic {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fp {
  direction: rtl;
}

.frow {
  direction: rtl;
}

/* ── Resources section RTL ──────────────────────────────────── */
.resg {
  direction: rtl;
}

.resc {
  direction: rtl;
  text-align: right;
}

.restag {
  text-align: right;
}

/* ── Light mode overrides for AR-specific contact section ───── */
[data-theme="light"] .csec .copt,
[data-theme="light"] .csec .copt-t,
[data-theme="light"] .csec .copt-d {
  /* csec forces navy bg, so keep white text */
  color: rgba(255, 255, 255, .85) !important;
}

[data-theme="light"] .csec .copt-t {
  color: #fff !important;
}

[data-theme="light"] .csec .copt-d {
  color: rgba(255, 255, 255, .4) !important;
}

[data-theme="light"] .csec .copic {
  background: rgba(200, 151, 58, .1) !important;
  border-color: rgba(200, 151, 58, .2) !important;
  color: var(--gold) !important;
}

/* ── Nav light mode corrections ─────────────────────────────── */
[data-theme="light"] .nav-wrap {
  background: rgba(255, 255, 255, .97) !important;
}

[data-theme="light"] .nav-links a {
  color: #1E293B;
}

[data-theme="light"] .nav-links a.active,
[data-theme="light"] .nav-links a:hover {
  color: var(--gold);
}

[data-theme="light"] .nav-email {
  color: var(--sl);
}

[data-theme="light"] .lang-btn {
  color: var(--sl);
  border-color: var(--bd);
}

[data-theme="light"] .hbg span {
  background: #1E293B !important;
}

[data-theme="light"] .ndrop-menu {
  background: #fff;
  border-color: var(--bd);
}

[data-theme="light"] .ndrop-menu a {
  color: #1E293B;
}

[data-theme="light"] .ndrop-menu a:hover {
  color: var(--gold);
  background: var(--bg2);
}

/* ── Footer light mode ──────────────────────────────────────── */
[data-theme="light"] .footer {
  background: var(--navy);
}

[data-theme="light"] .flci {
  color: rgba(255, 255, 255, .42);
}

[data-theme="light"] .flci:hover {
  color: var(--gold);
}

[data-theme="light"] .ftcopy {
  color: rgba(255, 255, 255, .22);
}

[data-theme="light"] .lang-switch {
  color: rgba(255, 255, 255, .35);
}

/* ── AR mobile: additional fixes ────────────────────────────── */
@media(max-width:768px) {
  .h-title {
    font-size: clamp(26px, 7.5vw, 38px);
  }

  .cin {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .hero-in {
    padding: 56px 0 36px;
  }
}

@media(max-width:480px) {
  .h-title {
    font-size: clamp(24px, 7vw, 32px);
  }

  .h-desc {
    font-size: 14px;
  }

  .hero-in {
    padding: 44px 0 28px;
  }

  .why-grid {
    grid-template-columns: 1fr;
  }

  .proc-steps {
    grid-template-columns: 1fr;
  }

  .svc-grid {
    grid-template-columns: 1fr;
  }

  .clients-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════
   AR CRITICAL FIXES v35b
   ══════════════════════════════════════════════════════════════ */

/* ── HERO: overflow:hidden stops hglow (800px) from causing horizontal scroll ── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: var(--nh);
}

[data-theme="dark"] .hero {
  background: var(--navy) !important;
}

[data-theme="light"] .hero {
  background: linear-gradient(150deg, #F4F6FA 0%, #FFFFFF 55%, #F2F5FA 100%) !important;
}

@media (min-width: 769px) {

  .sec[style*="overflow:hidden"],
  .sec .nbg,
  .sec .steps,
  .sec .law-grid,
  .sec .proc-steps,
  .sec [style*="grid-template-columns"][style*="overflow:hidden"] {
    overflow: visible !important;
    max-height: none !important;
  }
}

/* btn-ghost consolidated at end */
/* ══ AR MOBILE RESPONSIVE FIXES ════════════════════════════════ */
@media (max-width: 768px) {

  /* Keep horizontal scrolling on the wrapper only to avoid nested/double scrollbars */
  table {
    width: 100%;
  }

  .tbl-wrap,
  .table-scroll,
  .cmptbl-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: auto;
    width: 100%;
    max-width: 100%;
    max-height: none;
    overscroll-behavior: auto;
  }

  .tbl-wrap table,
  .table-scroll table,
  .cmptbl-wrap table {
    display: table;
  }

  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  [style*="display:grid"] {
    grid-template-columns: 1fr !important;
  }

  /* Pricing boxes */
  .cmptbl-wrap {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .cmptbl-wrap table {
    min-width: 480px;
  }

  /* Cards grid */
  .svc-grid {
    grid-template-columns: 1fr !important;
  }

  .roles-grid {
    grid-template-columns: 1fr !important;
  }

  /* Pricing / about "proc-steps" inline grid */
  .proc-steps {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Why cards */
  .why-cards {
    grid-template-columns: 1fr !important;
  }

  /* About qissa/values/mission grids */
  .about-grid {
    grid-template-columns: 1fr !important;
  }

  /* Footer */
  .ftg {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .proc-steps {
    grid-template-columns: 1fr !important;
  }

  .ftg {
    grid-template-columns: 1fr !important;
  }
}

/* ── Mobile hero: match light mode desktop ─────────────────────── */
/* On mobile in light mode, .ph-ar is always dark navy — that's correct */
/* But .hero on EN mobile in light mode should be light too */

/* ── Cards in normal sections: fix hardcoded white text in light mode ─
   Only applies to cards NOT inside dark-background sections.
   Cards inside .why-bg/.cta-bg are handled by the block below.
   Cards with inline navy background are excluded via :not selector.
   ──────────────────────────────────────────────────────────────── */
[data-theme="light"] .sec:not(.why-bg):not(.cta-bg):not(.csec) .card:not([style*="background:var(--navy)"]) [style*="color:#fff"],
[data-theme="light"] .sec:not(.why-bg):not(.cta-bg):not(.csec) .card:not([style*="background:var(--navy)"]) [style*="color:rgba(255,255,255"] {
  color: var(--tx) !important;
}

[data-theme="light"] .sec:not(.why-bg):not(.cta-bg):not(.csec) .card:not([style*="background:var(--navy)"]) p[style*="color:rgba(255,255,255"] {
  color: var(--sl) !important;
}

/* ── Steps: consistent gold-border circle style ───────────────── */
.step-n {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  margin: 0 auto 16px !important;
  background: var(--gpl) !important;
  border: 1.5px solid var(--gold) !important;
  color: var(--gold) !important;
  box-shadow: none !important;
}

/* ── Cards inside dark sections: keep text visible in light mode ─ */
[data-theme="light"] .why-bg .card,
[data-theme="light"] .cta-bg .card,
[data-theme="light"] .csec .card {
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(255, 255, 255, .1) !important;
}

[data-theme="light"] .why-bg .card *,
[data-theme="light"] .cta-bg .card *,
[data-theme="light"] .csec .card * {
  color: rgba(255, 255, 255, .85) !important;
}

[data-theme="light"] .why-bg .card strong,
[data-theme="light"] .why-bg .card [style*="color:var(--gold)"],
[data-theme="light"] .cta-bg .card strong {
  color: var(--gold) !important;
}


/* ══ FAQ ACCORDION — AR pages ════════════════════════════════════
   Two types exist:
   Type A (onclick="toggleFaq(this)"): ar-services, ar-pricing, ar-about, ar-laws
   Type B (no onclick, JS click listener): ar-compliance, ar-hr-outsourcing, etc.
   Both types use the same .faq-item / .faq-q /* matches both types of faq */
═══════════════════════════════════════════════════════════════ */ .faq-list {
  max-width: 720px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--bd);
}

/* Question row — RTL layout: text on right, toggle icon on left */
.faq-item .faq-q {
  padding: 16px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  direction: rtl;
  text-align: right;
  background: transparent;
  user-select: none;
  width: 100%;
}

/* Answer panel — hidden by default, JS drives max-height via inline style */
.faq-item .faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.3s;
  padding: 0;
  text-align: right;
  direction: rtl;
}

/* Open state (JS also sets inline max-height) */
.faq-item.open .faq-a {
  max-height: 600px;
  padding-bottom: 16px;
}

/* The + / × indicator — order:1 puts it at the LEFT (trailing end in RTL) */
.faq-item .faq-q::before {
  content: "+";
  font-size: 20px;
  font-weight: 400;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform 0.3s;
  line-height: 1;
  order: 1;
  margin-right: auto;
}

.faq-item.open .faq-q::before {
  transform: rotate(45deg);
}

/* Text spans inside .faq-q */
.faq-q-text {
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 700;
  color: var(--tx);
  flex: 1;
  text-align: right;
}

/* Answer text */
.faq-a-text {
  font-size: 14px;
  color: var(--sl);
  line-height: 1.8;
  display: block;
}

.faq-item .faq-a p,
.faq-item .faq-a>* {
  font-size: 14px;
  color: var(--sl);
  line-height: 1.8;
  margin: 0;
}

/* Direct text in .faq-q: no wrapper */
.faq-item .faq-q:not(:has(.faq-q-text)) {
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 700;
  color: var(--tx);
}

/* Light mode overrides */
[data-theme="light"] .faq-item {
  border-color: rgba(11, 31, 58, .10);
}

[data-theme="light"] .faq-q-text {
  color: var(--navy);
}

[data-theme="light"] .faq-a-text {
  color: var(--sl);
}

[data-theme="light"] .faq-item .faq-a p {
  color: var(--sl);
}

[data-theme="light"] .faq-item .faq-q {
  color: var(--navy);
}



/* ── Cards with explicit navy/dark background: keep white text ── */
[data-theme="light"] .card[style*="background:var(--navy)"],
[data-theme="light"] .card[style*="background: var(--navy)"] {
  color: #fff !important;
}

/* ── Inline navy background sections: btn-ghost stays white ─────
   Covers <section class="sec" style="background:var(--navy)..."> patterns
   ────────────────────────────────────────────────────────────── */
[data-theme="light"] [style*="background:var(--navy)"] .btn-ghost,
[data-theme="light"] [style*="background: var(--navy)"] .btn-ghost {
  color: rgba(255, 255, 255, .90) !important;
  border-color: rgba(255, 255, 255, .40) !important;
  background: transparent !important;
}

[data-theme="light"] [style*="background:var(--navy)"] .btn-ghost:hover,
[data-theme="light"] [style*="background: var(--navy)"] .btn-ghost:hover {
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .65) !important;
  color: #fff !important;
}

/* ══ BTN-GHOST FINAL — must be last in ar.css ══════════════════
   AR pages default to dark mode, so base .btn-ghost (white) is fine.
   In light mode: navy on light sections, white on dark-navy sections.
   ══════════════════════════════════════════════════════════════ */

/* Light mode default: navy text/border (for non-navy backgrounds) */
[data-theme="light"] .btn-ghost {
  color: var(--navy) !important;
  border-color: rgba(11, 31, 58, .30) !important;
  background: transparent !important;
}

[data-theme="light"] .btn-ghost:hover {
  background: rgba(11, 31, 58, .07) !important;
  border-color: rgba(11, 31, 58, .55) !important;
  color: var(--navy) !important;
}

/* Light mode override: stay WHITE on dark-navy background sections */
/* NOTE: .ph and .ph-ar go LIGHT in light mode — btn-ghost is navy there (default above) */
[data-theme="light"] .why-bg .btn-ghost,
[data-theme="light"] .cta-bg .btn-ghost,
[data-theme="light"] .csec .btn-ghost,
[data-theme="light"] .sec-navy .btn-ghost {
  color: rgba(255, 255, 255, .90) !important;
  border-color: rgba(255, 255, 255, .40) !important;
  background: transparent !important;
}

[data-theme="light"] .why-bg .btn-ghost:hover,
[data-theme="light"] .cta-bg .btn-ghost:hover,
[data-theme="light"] .csec .btn-ghost:hover,
[data-theme="light"] .sec-navy .btn-ghost:hover {
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .65) !important;
  color: #fff !important;
}

/* ── Mobile RTL footer override ─────────────────────────────────
   Prevents style.css @768px `.flb { text-align:left }` from
   overriding the Arabic right-aligned footer brand column.       */
@media(max-width:768px) {
  .flb {
    text-align: right !important;
    align-items: flex-end !important;
  }

  .flb>a {
    justify-content: flex-end !important;
  }

  .flb p {
    text-align: right !important;
  }

  .flci {
    flex-direction: row-reverse !important;
    justify-content: flex-start !important;
  }

  .flct {
    text-align: right !important;
  }

  .flls li {
    text-align: right !important;
  }

  .ftbtm {
    direction: rtl;
  }
}