/* ===== MADAR polish pack ===== */

/* Palette */
:root{
  --madar-green:#0acd7f;
  --madar-green-600:#0abd76;
  --madar-green-700:#08a968;
  --madar-dark:#013334;
  --madar-alt:#083b3c;            /* section alt surface */
  --madar-white:#f9ffff;
  --madar-ink:#01241f;
}

/* Global surface */
body,.b.eh{background:var(--madar-dark);color:var(--madar-white);}

/* Navbar active/hover */
.xl:hover,.xl.mk{color:var(--madar-green)!important;}

/* Accent labels/headings */
.kk,.ek.yj,.mk{color:var(--madar-green)!important;}

/* Alt section backgrounds (by id or unique class) */
#about,
#packages,
#support,
.hj.rp.hr,            /* testimonials */
.pj.vp.mr,            /* clients */
.i.pg.qh.rm.ji.hp{    /* counters+map */
  background:var(--madar-alt);
}

/* Subtle cards on dark */
.hh\/20,.hh\/10,.nl,.il{
  background-color:rgba(10,205,127,.08)!important;
  border-color:rgba(249,255,255,.08)!important;
}

/* ----- Primary buttons (filled) ----- */
.vc,.lk,._l,.jk,.dk,
a.vc,button.vc{
  background:var(--madar-green)!important;
  background-image:none!important;
  border:1.5px solid var(--madar-green)!important;
  color:var(--madar-ink)!important;
}
.vc:hover,.rg:hover,.lk:hover,._l:hover,.jk:hover,.dk:hover{
  background:var(--madar-green-600)!important;
  border-color:var(--madar-green-600)!important;
}
/* .rg{
  background-color: var(--madar-white) !important;
} */
.vc:active,.rg:active,.lk:active,._l:active,.jk:active,.dk:active{
  background:var(--madar-green-700)!important;
  border-color:var(--madar-green-700)!important;
}

/* Pricing outline vs filled pairs */
.gh.sl{ /* filled */
  background:var(--madar-green)!important;border:1.5px solid var(--madar-green)!important;color:var(--madar-ink)!important;
}
.gh.sl:hover{background:var(--madar-green-600)!important;border-color:var(--madar-green-600)!important;}

.mh.tl{ /* outline */
  background:transparent!important;border:1.5px solid var(--madar-green)!important;color:var(--madar-green)!important;
}
.mh.tl:hover{background:var(--madar-green)!important;color:var(--madar-ink)!important;}

/* Pricing toggle track & knob */
.i.rg.gm{background:rgba(10,205,127,.32)!important;border-color:rgba(10,205,127,.5)!important;}
.i.rg.gm .h.vc{background:var(--madar-green)!important}

/* Link color inside dark cards (readability) */
a{color:#a7efcf;}
a:hover{color:var(--madar-green);}

/* Inputs on dark */
input.vd,textarea.vd,.vd.ph{
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  color:var(--madar-white)!important;
}
input.vd::placeholder,textarea.vd::placeholder{color:#bcd7d2!important;}

/* Focus ring brand */
:root{--tw-ring-color:rgba(10,205,127,.5)!important;}
a:focus-visible,button:focus-visible,input:focus,textarea:focus{
  outline:none!important;box-shadow:0 0 0 3px var(--tw-ring-color)!important;
}

/* Swiper arrows (testimonials) */
.swiper-button-prev,.swiper-button-next{
  background:rgba(10,205,127,.14)!important;border:1px solid rgba(10,205,127,.35)!important;
}
.swiper-button-prev:hover,.swiper-button-next:hover{
  background:var(--madar-green)!important;color:var(--madar-ink)!important;
}

/* Back-to-top fab */
button._a{background:var(--madar-green)!important;color:var(--madar-ink)!important;border-color:var(--madar-green)!important;}
button._a:hover{background:var(--madar-green-600)!important;border-color:var(--madar-green-600)!important;}

/* CTA background (keeps brand gradient) */
.madar-cta{
  background:
    radial-gradient(900px 480px at 85% 12%, rgba(10,205,127,.18), transparent 60%),
    radial-gradient(800px 420px at 10% 110%, rgba(10,205,127,.12), transparent 60%),
    var(--madar-dark);
}
.madar-cta .shape{opacity:.14;filter:hue-rotate(140deg) saturate(60%);}
.madar-cta .cta-card{background:transparent;border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 60px rgba(0,0,0,.25);}
/* Hide Alpine until ready */
[x-cloak]{display:none!important}

/* WhatsApp button – fixed style */
.madar-whatsapp{
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--madar-green); color:#01241f;
  font-weight:700; padding:.65rem 1rem .65rem .8rem;
  border-radius:9999px; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 24px rgba(10,205,127,.25); transition:.18s ease;
}
.madar-whatsapp:hover{ transform:translateY(-1px); background:#10e08d }

/* Toast popup */
.madar-toast{
  position:fixed; left:50%; top:20px; transform:translateX(-50%);
  z-index:9999; display:flex; align-items:center; gap:.6rem;
  padding:.75rem 1rem; border-radius:9999px;
  background:rgba(1,51,52,.96);
  border:1px solid rgba(10,205,127,.6);
  color:var(--madar-white); box-shadow:0 14px 40px rgba(0,0,0,.35);
  max-width:95vw; white-space:normal;
}
.madar-toast{ top:auto; bottom:20px; right:20px; left:auto; transform:none; }

/* Hero image follows the page direction */
#hero .hero-visual{
  position:absolute;          /* keep your original layout */
  top:0; bottom:0;
  transition:left .25s,right .25s,transform .25s;
}

/* Arabic = RTL -> image on the LEFT */
[dir="rtl"] #hero .hero-visual{
  left:0 !important;
  right:auto !important;
  transform-origin:left center;
}

/* English = LTR -> image on the RIGHT */
[dir="ltr"] #hero .hero-visual{
  right:0 !important;
  left:auto !important;
  transform-origin:right center;
}

/* Mobile: let it stack naturally */
@media (max-width:1024px){
  #hero .hero-visual{
    position:static !important;
    width:100%;
    left:auto !important; right:auto !important;
  }
}
