/* ==========================================================================
   LLumar Bahrain - Arabic / RTL overrides
   Layered on top of css/llumar.css. Bootstrap's own RTL build handles the
   grid and spacing utilities; this file only flips what llumar.css hard-codes
   to a physical side.
   ========================================================================== */

/* ---------- Arabic typography ---------- */
body {
  font-family: "Cairo", "Tajawal", "Segoe UI", Tahoma, sans-serif;
}

/* Cairo sits a little tighter than Inter; give headings room to breathe and
   drop the negative tracking, which hurts Arabic letterforms. */
h1, h2, h3, h4, h5,
.section-title,
.hero h1,
.p-card__title {
  letter-spacing: 0;
  line-height: 1.35;
}
.hero h1 { line-height: 1.3; }
.eyebrow { letter-spacing: .04em; }
.hero-stats .l,
.trust__label,
.footer h4,
.location-list span,
.contact-item .k,
.p-card__tag { letter-spacing: 0; }

/* ---------- Top bar ---------- */
.topbar i { margin-right: 0; margin-left: .4rem; }
.topbar .social a { margin-left: 0; margin-right: .85rem; }

/* ---------- Navbar underline grows from the right ---------- */
.navbar-ll .nav-link::after { transform-origin: right; }

/* ---------- Buttons / arrow links travel leftwards ---------- */
.btn:hover i,
.link-arrow:hover i { transform: translateX(-4px); }

/* ---------- Section rule ---------- */
.rule--start { margin-left: auto; margin-right: 0; }

/* ---------- Hero ---------- */
/* Mirror the perspective tilt so the card still leans "into" the page. */
.hero-visual .frame { transform: perspective(1400px) rotateY(7deg) rotateX(2deg); }
.hero-visual:hover .frame { transform: perspective(1400px) rotateY(3deg) rotateX(0deg); }

.badge-float--tl { left: auto; right: -34px; }
.badge-float--br { right: auto; left: -26px; }

@media (max-width: 991.98px) {
  .hero-visual .frame,
  .hero-visual:hover .frame { transform: none; }
  .badge-float--tl { right: -10px; }
  .badge-float--br { left: -6px; }
}
@media (max-width: 575.98px) {
  .badge-float--tl { right: 6px; }
  .badge-float--br { left: 6px; }
}

/* ---------- Product cards ---------- */
.p-card__tag { left: auto; right: 14px; }
.play-btn { right: auto; left: 16px; }

/* ---------- Process steps ---------- */
.step { padding-left: 0; padding-right: 4.6rem; }
.step__n { left: auto; right: 0; }
@media (max-width: 767.98px) {
  .step { padding-left: 0; padding-right: 4rem; }
}

/* ---------- Location card accent edge ---------- */
.location-card {
  border-left: 1px solid rgba(18,18,22,.08);
  border-right: 4px solid var(--ll-red);
}

/* ---------- Footer ---------- */
.footer-links a:hover { padding-left: 0; padding-right: 5px; }

/* ---------- Floating actions ---------- */
.fab-stack { right: auto; left: 20px; }

/* ---------- Google Maps info window ---------- */
.info_content { direction: rtl; text-align: right; }