/* === Arabic (RTL) overrides === */
/* Loaded only when locale is Arabic (see resources/views/partials/head.blade.php). */

/* Cairo for RTL: app.css sets * { font-family: Arial }, which beats body-only rules.
   Establish Cairo on the root, then let descendants inherit (Font Awesome classes excluded). */
html[dir='rtl'] {
  font-family: 'Cairo', 'Poppins', sans-serif;
}

html[dir='rtl'] *:not(.fa, .fab, .far, .fas, .fa-solid, .fa-regular, .fa-brands, .fa-classic, .fa-sharp) {
  font-family: inherit;
}

html[dir='rtl'] body {
  direction: rtl;
  text-align: start;
}

/* Mixed Arabic/English: reduce bidi glitches (numbers/punctuation still isolated below) */
html[dir='rtl'] :where(h1, h2, h3, h4, p, a, span, li, button, label) {
  unicode-bidi: plaintext;
}

/* Mirror hero overlay gradient */
html[dir='rtl'] .overlay {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));
}

/* Header: row + rtl — logo on the right, header-actions on the left (do not use row-reverse) */
html[dir='rtl'] .header {
  flex-direction: row;
  direction: rtl;
}

html[dir='rtl'] .header .header-actions {
  flex-direction: row;
}

html[dir='rtl'] .header .nav {
  direction: rtl;
}

/* Kill legacy absolute left from app.css so logo is not pulled to the visual left */
html[dir='rtl'] .header .logo {
  left: auto;
  right: auto;
}

/* Mobile: keep logo at inline-start (right in RTL) */
@media (max-width: 1024px) {
  html[dir='rtl'] .header .logo {
    margin-inline-end: auto;
    margin-inline-start: 0;
  }
}

html[dir='rtl'] .nav a {
  letter-spacing: normal;
}

/* Base hero anchors (app.css) — mirror when desktop shell rules are not active */
html[dir='rtl'] .stats {
  left: auto;
  right: 80px;
}

html[dir='rtl'] .partners {
  left: auto;
  right: 60px;
}

html[dir='rtl'] .moving-strip {
  left: auto;
  right: 60px;
}

/* Partners logo sliders: mirror animation direction for RTL */
html[dir='rtl'] .partners-track {
  animation-name: scrollLogosRtl;
}

@keyframes scrollLogosRtl {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(50%);
  }
}

html[dir='rtl'] .slide-tracke {
  animation-name: scrollRtl;
}

@keyframes scrollRtl {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(50%);
  }
}

/* Desktop hero (app-shell.css ≥1025px): stats/partners/strip were anchored left */
@media (min-width: 1025px) {
  html[dir='rtl'] .hero .stats {
    left: auto !important;
    right: var(--layout-pad-x);
  }

  html[dir='rtl'] .hero .partners {
    left: auto !important;
    right: var(--layout-pad-x);
  }

  html[dir='rtl'] .hero .moving-strip {
    left: auto !important;
    right: var(--layout-pad-x);
  }

  /* Mirror right-side text + student cluster to the left in RTL */
  html[dir='rtl'] .hero .buttom-right {
    right: auto !important;
    left: clamp(1.75rem, 7vw, 7.75rem);
    text-align: right;
  }

  html[dir='rtl'] .hero .right-bottom-section {
    right: auto !important;
    /* Add room for negative-positioned avatar stack (mirrored from LTR) */
    left: calc(clamp(1.75rem, 7vw, 7.75rem) + 65px);
  }

  html[dir='rtl'] .hero .right-sec {
    transform-origin: bottom left;
  }

  /* Reduce “Step into a world…” block size slightly in RTL too */
  html[dir='rtl'] .hero .buttom-right {
    max-width: 24.9375rem;
    width: min(24.9375rem, calc(100% - 3rem));
    font-size: clamp(0.83125rem, 1.2825vw, 1.009375rem);
  }
}

@media (min-width: 1025px) and (max-width: 1200px) {
  html[dir='rtl'] .hero .right-sec {
    transform-origin: bottom left;
  }
}

@media (min-width: 1201px) and (max-width: 1400px) {
  html[dir='rtl'] .hero .right-sec {
    transform-origin: bottom left;
  }
}

/* Desktop RTL: mirror the avatar cluster correctly (use left offsets inside) */
@media (min-width: 1025px) {
  html[dir='rtl'] .hero .right-bottom-section {
    direction: rtl;
  }

  html[dir='rtl'] .hero .right-bottom-section :where(.man, .girl, .black, .orange, .plus) {
    right: auto !important;
  }

  /* Mirror geometry: orange ring becomes the anchor at left=0 */
  html[dir='rtl'] .hero .right-bottom-section .orange { left: 0 !important; }
  /* Center plus (18x18) inside orange (40x40): (40-18)/2 = 11 */
  html[dir='rtl'] .hero .right-bottom-section .plus {
    left: 11px !important;
    top: 11px !important;
    bottom: auto !important;
  }
  html[dir='rtl'] .hero .right-bottom-section .black { left: -25px !important; }
  html[dir='rtl'] .hero .right-bottom-section .girl { left: -45px !important; }
  html[dir='rtl'] .hero .right-bottom-section .man { left: -65px !important; }

  /* Keep “أكثر من 100k+ …” clear of the avatar stack in RTL */
  html[dir='rtl'] .hero .right-bottom-section .text-image {
    display: inline-block;
    padding-left: 56px; /* reserve space for 40px ring + breathing room */
    box-sizing: border-box;
  }
}

/* Stats numbers stay LTR */
html[dir='rtl'] :where(.stats h3, .mobile-stats h3) {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Mobile hero */
html[dir='rtl'] .mobile-hero {
  direction: rtl;
  text-align: right;
}

html[dir='rtl'] .mobile-hero :where(h1, h2, p) {
  text-align: right;
}

html[dir='rtl'] .mobile-hero .mobile-stats {
  flex-direction: row-reverse;
}

html[dir='rtl'] .mobile-hero .mobile-stats > div {
  text-align: right;
}

html[dir='rtl'] .mobile-hero .mobile-search {
  direction: rtl;
}

html[dir='rtl'] .mobile-hero .mobile-search input {
  direction: rtl;
  text-align: right;
}

/* Category section intro: isolate from global unicode-bidi: plaintext (em dash + Arabic) */
html[dir='rtl'] .category-section .section-header {
  direction: rtl;
  unicode-bidi: isolate;
  text-align: center;
}

html[dir='rtl'] .category-section .section-header h2 {
  unicode-bidi: isolate;
}

html[dir='rtl'] .category-section .section-header .small-title,
html[dir='rtl'] .category-section .section-header .small-title span {
  unicode-bidi: isolate;
}

/*
 * Category grid: mirror LTR (narrow stack | wide block) using direction only.
 * Do NOT set grid-column — that puts .left-column (1fr content) in the 2fr track and
 * stretches the vertical cards into wide “banners”.
 */
html[dir='rtl'] .category-grid {
  direction: rtl;
}

/* Global app-rtl .row { row-reverse } + inherited rtl would cancel mirroring; keep normal row here */
html[dir='rtl'] .category-grid .bottom-grid .row {
  flex-direction: row;
}

/* Card image badges: LTR uses right:15px; mirror to top-start in RTL */
html[dir='rtl'] :where(.badgesr, .badgesrs, .badgesrx) {
  right: auto;
  left: 15px;
  justify-content: flex-start;
}

html[dir='rtl'] .card h3 {
  left: auto;
  right: 20px;
}

html[dir='rtl'] .large .content {
  left: auto;
  right: 20px;
  text-align: right;
  align-items: flex-end;
}

html[dir='rtl'] .large .content p {
  text-align: right;
}

html[dir='rtl'] .row {
  flex-direction: row-reverse;
}

/*
 * Card title row: keep normal flex row inside direction:rtl cards so the title
 * sits on the reading side and the duration pill stays opposite, with gap from app.css.
 * row-reverse collided title + pill in tight columns.
 */

html[dir='rtl'] :where(.descriptionr, .descriptionrs, .descriptionrx) {
  text-align: right;
}

/* See-all placement: grid column 3 + justify-self end (no absolute left/right) */

/* Chevron in markup is `>`; mirror for RTL reading flow */
html[dir='rtl'] .see-all-chevron {
  display: inline-block;
  transform: scaleX(-1);
}

html[dir='rtl'] :where(.section-headerr, .section-headerrs, .section-headerrx) {
  direction: rtl;
  unicode-bidi: isolate;
}

/* Section: learning journey */
html[dir='rtl'] .learning-journey .containerws {
  flex-direction: row-reverse;
}

html[dir='rtl'] .learning-journey .steps .step {
  flex-direction: row-reverse;
}

html[dir='rtl'] .right .blob {
  right: auto;
  left: -100px;
}

html[dir='rtl'] .right .small-img {
  right: auto;
  left: 17px;
}

html[dir='rtl'] .right .red {
  right: auto;
  left: 100px;
}

/* Section: community (herov) */
html[dir='rtl'] .herov {
  flex-direction: row-reverse;
}

html[dir='rtl'] .community-cta__arrow {
  transform: scaleX(-1);
}

html[dir='rtl'] .community-cta:hover .community-cta__circle {
  transform: translateX(-4px);
}

/* Section: why choose us */
html[dir='rtl'] .why .content {
  flex-direction: row-reverse;
}

html[dir='rtl'] .why .features.left .feature-item,
html[dir='rtl'] .why .features.right .feature-item {
  flex-direction: row-reverse;
}

html[dir='rtl'] .why .statsd {
  flex-direction: row-reverse;
}

html[dir='rtl'] .why .stat-boxd {
  flex-direction: row-reverse;
}

/* Challenge: mirror columns */
html[dir='rtl'] .challengel .containerl {
  flex-direction: row-reverse;
}

html[dir='rtl'] .challengel .infol {
  flex-direction: row-reverse;
}

@media (max-width: 1024px) {
  html[dir='rtl'] .challengel .containerl {
    flex-direction: column;
  }

  html[dir='rtl'] .challengel .infol {
    flex-direction: column;
  }
}

/* Insights: mirror three-column row + swap margin hacks */
html[dir='rtl'] .insights .contenti {
  flex-direction: row-reverse;
}

html[dir='rtl'] .insights .left-cards {
  margin-right: 0;
  margin-left: -100px;
}

html[dir='rtl'] .insights .right-cards {
  margin-left: 0;
  margin-right: -100px;
}

/* News: main + sidebar */
html[dir='rtl'] .news-container {
  direction: rtl;
}

html[dir='rtl'] .news-section .side-card {
  flex-direction: row-reverse;
}

html[dir='rtl'] .news-section .side-img .badge {
  left: auto;
  right: 8px;
}

/* Subscribe corner icon */
html[dir='rtl'] .subscribe-card .corner-fab {
  transform: scaleX(-1);
}

/* Testimonials: .quote / .bottom use flex (app.css); no LTR margin offsets here */

/* Card CTA shimmer (best sellers rows) */
html[dir='rtl'] :where(.btnr, .btnrs, .btnrx)::before {
  left: auto;
  right: -100%;
}

html[dir='rtl'] :where(.btnr, .btnrs, .btnrx):hover::before {
  left: auto;
  right: 0;
}

/* Best sellers grids: LTR column order matches EN; RTL text inside each card */
html[dir='rtl'] :where(.cardsr, .cardsrs, .cardsrx) {
  direction: ltr;
  unicode-bidi: isolate;
  justify-items: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

html[dir='rtl'] :where(.cardr, .cardrs, .cardrx) {
  direction: rtl;
  unicode-bidi: isolate;
}

/*
 * LTR wide desktop uses width:350px + left:-90px per card (overflow hack).
 * Mirroring with right:-90px shifted the whole row off-screen in RTL.
 * Neutralize offsets and fill grid tracks so four cards stay centered.
 */
@media (min-width: 1440px) {
  html[dir='rtl'] .best-sellersr .cardsr .cardr,
  html[dir='rtl'] .best-sellersrs .cardsrs .cardrs,
  html[dir='rtl'] .best-sellersrx .cardsrx .cardrx {
    left: 0;
    right: auto;
    width: 100%;
    max-width: 100%;
    min-height: 408px;
    height: auto;
  }
}

/* Get Started / heroy SVG wrapper */
html[dir='rtl'] .heroy .wrapper {
  margin-left: auto;
  margin-right: 100px;
}

/* ================= Other views (Direction / UIUX / Skills / Nextstep) ================= */

/* --- Skill listing hero (skillone/skilltwo): mirror absolute positions --- */
html[dir='rtl'] .herotwo {
  direction: rtl;
  overflow: hidden;
}

@media (min-width: 1025px) {
  html[dir='rtl'] .herotwo {
    padding-bottom: 140px;
  }
}

html[dir='rtl'] .hero-contenttwo {
  text-align: right;
}

html[dir='rtl'] .hero-contenttwo p {
  text-align: right;
}

html[dir='rtl'] .search-boxtwo input {
  direction: rtl;
  text-align: right;
}

/* Skill listing: sidebar grid mirroring + inline icon swaps (moved from app.css) */
html[dir='rtl'] .containertreefo {
  /* Make grid placement predictable regardless of document direction */
  direction: ltr;
  grid-template-columns: 1fr 280px;
  grid-template-areas: 'main sidebar';
}

@media (min-width: 1025px) {
  html[dir='rtl'] .containertreefo > .sidebar { grid-area: sidebar; }
  html[dir='rtl'] .containertreefo > .maintreefo { grid-area: main; }
}

/* Listing page: sidebar + cards RTL alignment */
html[dir='rtl'] .sidebar {
  direction: rtl;
  text-align: right;
}

html[dir='rtl'] .maintreefo {
  direction: rtl;
}

html[dir='rtl'] .sidebar-header,
html[dir='rtl'] .dropdown {
  flex-direction: row-reverse;
}

html[dir='rtl'] .menu li {
  flex-direction: row-reverse;
}

html[dir='rtl'] .page-headertreefo {
  direction: rtl;
  text-align: right;
}

html[dir='rtl'] .cardfo {
  direction: rtl;
}

html[dir='rtl'] .title-rowfo,
html[dir='rtl'] .levelsfo,
html[dir='rtl'] .info-rowfo {
  flex-direction: row-reverse;
}

html[dir='rtl'] .location-badgefo {
  direction: ltr;
  unicode-bidi: isolate;
}

html[dir='rtl'] .search-boxth input {
  padding: 10px 12px 10px 35px;
}

html[dir='rtl'] .search-boxth i {
  right: auto;
  left: 10px;
}

html[dir='rtl'] .menu li span {
  transform: scaleX(-1);
  display: inline-block;
}

html[dir='rtl'] .shape-orangetwo {
  right: auto;
  left: 100px;
}

html[dir='rtl'] .studentstwo {
  left: auto;
  right: 40px;
}

html[dir='rtl'] .besttwo {
  left: auto;
  right: 60px;
}

html[dir='rtl'] .coursetwo {
  right: auto;
  left: 40px;
}

html[dir='rtl'] .congratstwo {
  right: auto;
  left: 20px;
}

/* --- Direction page: slider + filters --- */
html[dir='rtl'] .gallery-section .filter-menu {
  flex-direction: row-reverse;
}

html[dir='rtl'] .gallery-section .slider-track {
  animation-name: scrollDirectionRtl;
}

@keyframes scrollDirectionRtl {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(50%);
  }
}

/* --- UI/UX page: tabs and content alignment --- */
html[dir='rtl'] .course-sectionfou {
  direction: rtl;
}

html[dir='rtl'] :where(.leftfou h1, .leftfou p, .descfou) {
  text-align: right;
}

html[dir='rtl'] .tabsfou {
  flex-direction: row-reverse;
}

html[dir='rtl'] :where(.branch-headerfou, .accordion-headersev .header-leftsev) {
  flex-direction: row-reverse;
}

/* --- Nextstep: mirror hero gradient + absolute badges + decoration --- */
html[dir='rtl'] .heroone {
  background:
    linear-gradient(
      to left,
      rgba(12, 37, 59, 0.9) 40%,
      rgba(12, 37, 59, 0.6) 70%,
      rgba(12, 37, 59, 0.2) 100%
    ),
    url('/images/home/hero-bg.jpg');
  background-size: cover;
  background-position: center;
}

html[dir='rtl'] .ratingone {
  left: auto;
  right: -30px;
}

html[dir='rtl'] .usersone {
  right: auto;
  left: -70px;
}

html[dir='rtl'] .booking-sectiontin::before {
  left: auto;
  right: 0;
}