/**
 * ps-rtl.css
 * Right-to-Left (RTL) language support
 * Uses CSS logical properties for proper RTL handling
 * Apply when html[dir="rtl"] is set
 */

html[dir="rtl"] {
  direction: rtl;
  /* NOTE: don't set text-align:right globally — it breaks centered layouts.
     Arabic text already flows right-to-left via direction:rtl.
     Only override text-align on specific non-centred containers. */
}

html[dir="rtl"] body {
  direction: rtl;
}

/* ── Text Direction (only for non-centered content) ── */
html[dir="rtl"] .text-left {
  text-align: right;
}

/* ── Flexbox — only reverse explicitly marked containers ── */
html[dir="rtl"] .flex-row-ltr {
  flex-direction: row-reverse;
}

/* ── Navigation ── */
html[dir="rtl"] .ps-nav {
  flex-direction: row-reverse;
}

html[dir="rtl"] .ps-nav-center {
  flex-direction: row-reverse;
}

html[dir="rtl"] .ps-nav-item {
  flex-direction: row-reverse;
}

/* ── Margin & Padding with Logical Properties ── */
html[dir="rtl"] {
  /* Use margin-inline for left/right margins */
  /* Use padding-inline for left/right paddings */
}

html[dir="rtl"] .ml-auto {
  margin-left: auto;
  margin-right: 0;
}

html[dir="rtl"] .mr-auto {
  margin-right: auto;
  margin-left: 0;
}

html[dir="rtl"] .pl-4 {
  padding-right: 1rem;
  padding-left: 0;
}

html[dir="rtl"] .pr-4 {
  padding-left: 1rem;
  padding-right: 0;
}

/* ── Dropdown Menus ── */
html[dir="rtl"] .ps-dd {
  left: auto;
  right: -8px;
}

html[dir="rtl"] .ps-dd-row {
  justify-content: space-between;
  flex-direction: row-reverse;
}

/* ── Buttons & Links — keep centered by default ── */
/* Only override alignment on explicitly left-aligned buttons */

/* ── Form Elements ── */
html[dir="rtl"] .field {
  text-align: right;
}

html[dir="rtl"] .field label {
  margin-bottom: 8px;
  display: block;
  text-align: right;
}

html[dir="rtl"] input[type="radio"],
html[dir="rtl"] input[type="checkbox"] {
  margin-left: 8px;
  margin-right: 0;
}

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

/* ── Select Elements ── */
html[dir="rtl"] select {
  background-position: left 14px center !important;
  padding-left: 14px;
  padding-right: 40px;
}

/* ── Icons & Images ── */
html[dir="rtl"] .icon {
  transform: scaleX(-1);
}

html[dir="rtl"] .icon-no-flip {
  transform: scaleX(1);
}

/* ── Borders ── */
html[dir="rtl"] .border-l {
  border-left: none;
  border-right: 1px solid var(--border, #2e2a24);
}

html[dir="rtl"] .border-r {
  border-right: none;
  border-left: 1px solid var(--border, #2e2a24);
}

/* ── Float/Positioning ── */
html[dir="rtl"] .float-left {
  float: right;
}

html[dir="rtl"] .float-right {
  float: left;
}

/* ── Grid ── */
html[dir="rtl"] .grid {
  direction: rtl;
}

html[dir="rtl"] .grid-cols-1,
html[dir="rtl"] .grid-cols-2,
html[dir="rtl"] .grid-cols-3,
html[dir="rtl"] .grid-cols-4 {
  direction: rtl;
}

/* ── Modal/Overlay Content ── */
html[dir="rtl"] .modal,
html[dir="rtl"] [role="dialog"] {
  text-align: right;
  direction: rtl;
}

/* ── Message/Alert Boxes ── */
html[dir="rtl"] .alert,
html[dir="rtl"] .msg {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .alert-icon,
html[dir="rtl"] .msg-icon {
  margin-left: 12px;
  margin-right: 0;
}

/* ── List Items ── */
html[dir="rtl"] ul,
html[dir="rtl"] ol {
  padding-right: 20px;
  padding-left: 0;
  text-align: right;
}

html[dir="rtl"] li {
  margin-left: 0;
  margin-right: 12px;
}

/* ── Tables ── */
html[dir="rtl"] table {
  text-align: right;
}

html[dir="rtl"] th,
html[dir="rtl"] td {
  text-align: right;
}

/* ── Navbar Logo ── */
html[dir="rtl"] .ps-nav-logo {
  order: 2;
}

html[dir="rtl"] .ps-nav-logo em {
  font-style: italic;
}

/* ── Card Layout — only for horizontal icon+text cards ── */
html[dir="rtl"] .card-horizontal .card-icon {
  margin-left: 12px;
  margin-right: 0;
  order: 2;
}

/* ── Breadcrumbs ── */
html[dir="rtl"] .breadcrumb {
  flex-direction: row-reverse;
}

html[dir="rtl"] .breadcrumb::before {
  content: "/";
  margin: 0 8px;
  transform: scaleX(-1);
}

/* ── Skip to Content ── */
html[dir="rtl"] .sr-skip-to-content {
  left: auto;
  right: 0;
  border-radius: 0 0 0 8px;
}

/* ── Logical Property Support ── */
/* For browsers that support CSS logical properties (recommended approach) */
@supports (padding-inline: 1rem) {

  html[dir="rtl"] .ml-4 {
    margin-inline-start: 0;
    margin-inline-end: 1rem;
  }

  html[dir="rtl"] .mr-4 {
    margin-inline-start: 1rem;
    margin-inline-end: 0;
  }

  html[dir="rtl"] .pl-4 {
    padding-inline-start: 0;
    padding-inline-end: 1rem;
  }

  html[dir="rtl"] .pr-4 {
    padding-inline-start: 1rem;
    padding-inline-end: 0;
  }

  html[dir="rtl"] .border-l {
    border-inline-start: 1px solid var(--border, #2e2a24);
    border-inline-end: none;
  }

  html[dir="rtl"] .border-r {
    border-inline-start: none;
    border-inline-end: 1px solid var(--border, #2e2a24);
  }

  html[dir="rtl"] ul,
  html[dir="rtl"] ol {
    padding-inline-start: 20px;
    padding-inline-end: 0;
  }
}

/* ── Animation Direction ── */
@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

html[dir="rtl"] .slide-in-left {
  animation: slideInFromRight 0.3s ease-out;
}

html[dir="rtl"] .slide-in-right {
  animation: slideInFromLeft 0.3s ease-out;
}

/* ── Ensure Readability in RTL ── */
html[dir="rtl"] p {
  hyphens: auto;
  /* text-align inherits from parent — don't force right on centered content */
}

html[dir="rtl"] blockquote {
  border-right: 3px solid var(--gold, #c9a84c);
  border-left: none;
  padding-right: 12px;
  padding-left: 0;
  margin-right: 0;
  margin-left: 12px;
}

/* ── RTL Form Alignment ── */
html[dir="rtl"] .field-row {
  flex-direction: row-reverse;
}

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

/* ── Homepage — keep LTR layout for centered/grid elements ── */
html[dir="rtl"] .ps-home-lang,
html[dir="rtl"] .ps-selector-grid {
  direction: ltr;
}

/* Arabic text inside vertical cards still needs RTL */
html[dir="rtl"] .ps-selector-grid .ps-vcard {
  direction: rtl;
}

/* Keep centered text centered in RTL */
html[dir="rtl"] .ps-home .ps-tagline,
html[dir="rtl"] .ps-home .ps-select-label,
html[dir="rtl"] .ps-home .ps-greeting,
html[dir="rtl"] .ps-home .ps-title {
  text-align: center;
}