/* faymox rtl.css — Arabic (RTL) support. Load AFTER styles.css on RTL pages.
   Uses logical properties (margin-inline-*, padding-inline-*, inset-inline-*,
   text-align: start) so layout mirrors automatically with dir="rtl". */

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

/* ---- mirror physical margins from styles.css with logical ones ---- */
html[dir="rtl"] nav.links a {
  margin-left: 0;
  margin-inline-start: 18px;
}
html[dir="rtl"] footer.site-foot a {
  margin-left: 0;
  margin-inline-start: 14px;
}
@media (max-width: 480px) {
  html[dir="rtl"] nav.links a {
    margin-inline-start: 12px;
  }
}

/* ---- language switcher sits at the inline-end of the nav ---- */
.lang-switch {
  margin-inline-start: auto;
}

/* ---- search input: keep text starting from the right in RTL ---- */
html[dir="rtl"] #toolsearch {
  text-align: start;
}

/* ---- numbers, dates, times, codes: always LTR, never mirrored ---- */
input[type="number"],
input[type="date"],
input[type="time"],
input.ltr,
.num,
code,
output.ltr {
  direction: ltr;
  unicode-bidi: embed;
}
input[type="number"],
input[type="date"],
input[type="time"] {
  text-align: left;
}

/* ---- countdown / chip rows keep logical order ---- */
.time-chip,
.cd .cell {
  direction: rtl;
}

/* ---- qibla arrow: rotated by JS in degrees, must not be mirrored ---- */
#qb-arrow {
  direction: ltr;
  display: inline-block;
}

/* ---- utility: mirror an arrow/back icon in RTL contexts ---- */
.flip-rtl {
  transform: scaleX(-1);
  display: inline-block;
}

/* ---- prayer-time rows: label at inline-start, time at inline-end ---- */
.prow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  padding-inline: 16px;
  background: var(--bg-soft);
}
.prow .t {
  font-weight: 800;
  font-size: 1.25rem;
}
.results-grid {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

/* ---- countdown cells ---- */
.cd {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0;
}
.cd .cell {
  flex: 1;
  min-width: 110px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  background: var(--bg-soft);
}
.cd .cell .n {
  font-size: 2rem;
  font-weight: 800;
  display: block;
}
.cd .cell .l {
  color: var(--muted);
  font-size: 0.85rem;
}

/* ---- compass arrow ---- */
.compass {
  font-size: 4rem;
  text-align: center;
  margin: 10px 0;
}

/* ---- FAQ list ---- */
.faq-list {
  display: grid;
  gap: 14px;
  margin: 24px 0;
}
.faq-list .item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.faq-list .item h4 {
  margin: 0 0 6px;
}
.faq-list .item p {
  margin: 0;
  color: var(--muted);
}
ol.steps {
  line-height: 2;
  padding-inline-start: 1.4em;
}

/* ---- language switcher (also used on ar tool pages) ---- */
.lang-switch{display:flex;align-items:center;gap:10px;font-size:.92rem}
.lang-switch a{color:var(--muted);text-decoration:none}
.lang-switch a:hover{color:var(--accent)}
.lang-switch a[aria-current]{color:var(--text);font-weight:700}
.lang-switch .sep{color:var(--border)}