/* =========================================================
   UMMAH COMPASS — BIDI / RTL-LTR SYSTEM
   Final cleaned version
   ========================================================= */

/* ---------------------------------------------------------
   1) Direction source of truth
   --------------------------------------------------------- */
html[dir="rtl"] body { direction: rtl; }
html[dir="ltr"] body { direction: ltr; }

/* Logical text alignment for shared UI text blocks */
.meta,
.label,
.hint,
.tools-sheet-title,
.tools-sheet-label,
.tools-sheet-more-label,
.tab-dropdown-item,
.no-city-message,
.field label,
.brand-text,
.next-prayer > div,
.home-kicker,
.home-prayer-city-v3f,
.home-next-main-v3f,
.home-next-countdown-v3f,
.home-inline-note-v3f {
  text-align: start;
}

/* ---------------------------------------------------------
   2) Numeric / mixed-script islands always LTR
   --------------------------------------------------------- */
.prayer-live-clock,
.prayer-live-clock-time,
.prayer-live-clock-date,
#prayerLiveTime,
#homeLiveTime,
#countdownValue,
#nextPrayerValue,
.time-value,
.value,
.hijri-pill,
#langSelect,
.countdown,
.digital-clock {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Sacred Arabic always RTL */
.quran-ayah-text,
.bismillah-text,
.arabic {
  direction: rtl;
  text-align: right;
}

/* ---------------------------------------------------------
   3) Shared prayer / card layout patterns
   --------------------------------------------------------- */
.card-head,
.brand,
.header-actions,
.bottom-nav,
.prayer-sub-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Default structure: title/content block then utility block */
.card-head > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.card-head > :last-child {
  flex: 0 0 auto;
}

/* Prayer header: keep text block on visual right in RTL and utility on left */
html[dir="rtl"] .card-head {
  flex-direction: row;
}
html[dir="rtl"] .card-head > :first-child {
  text-align: right !important;
  margin-inline-end: auto;
}
html[dir="rtl"] .prayer-live-clock {
  text-align: left !important;
  margin-inline-start: auto;
  margin-inline-end: 0;
}
html[dir="rtl"] .prayer-live-clock-time,
html[dir="rtl"] .prayer-live-clock-date,
html[dir="rtl"] #prayerLiveTime {
  text-align: left !important;
}

html[dir="ltr"] .card-head {
  flex-direction: row;
}
html[dir="ltr"] .card-head > :first-child {
  text-align: left;
}
html[dir="ltr"] .prayer-live-clock,
html[dir="ltr"] .prayer-live-clock-time,
html[dir="ltr"] .prayer-live-clock-date,
html[dir="ltr"] #prayerLiveTime {
  text-align: right;
}

/* Time cards */
html[dir="rtl"] .time-card {
  direction: rtl;
  text-align: right;
  flex-direction: row-reverse;
}
html[dir="rtl"] .time-name {
  text-align: right;
}
html[dir="rtl"] .time-value {
  text-align: left;
}

/* ---------------------------------------------------------
   4) Home screen specific normalization
   --------------------------------------------------------- */
html[dir="rtl"] #homeScreenContent .home-prayer-head-v3f,
html[dir="ltr"] #homeScreenContent .home-prayer-head-v3f {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
}

html[dir="rtl"] #homeScreenContent .home-prayer-head-v3f > :first-child {
  text-align: right !important;
}
html[dir="ltr"] #homeScreenContent .home-prayer-head-v3f > :first-child {
  text-align: left !important;
}

html[dir="rtl"] #homeScreenContent .home-live-clock-v3f {
  text-align: left !important;
  align-items: flex-start !important;
}
html[dir="ltr"] #homeScreenContent .home-live-clock-v3f {
  text-align: right !important;
  align-items: flex-end !important;
}

html[dir="rtl"] #homeScreenContent .home-next-prayer-v3f,
html[dir="ltr"] #homeScreenContent .home-next-prayer-v3f {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
}
html[dir="rtl"] #homeScreenContent .home-next-main-v3f {
  text-align: right !important;
}
html[dir="rtl"] #homeScreenContent .home-next-countdown-v3f {
  text-align: left !important;
}
html[dir="ltr"] #homeScreenContent .home-next-main-v3f {
  text-align: left !important;
}
html[dir="ltr"] #homeScreenContent .home-next-countdown-v3f {
  text-align: right !important;
}

/* ---------------------------------------------------------
   5) Header / nav / grouped controls
   --------------------------------------------------------- */
html[dir="rtl"] .brand,
html[dir="rtl"] .header-actions,
html[dir="rtl"] .bottom-nav,
html[dir="rtl"] .tools-sheet-more-item,
html[dir="rtl"] .tab-dropdown-item,
html[dir="rtl"] .prayer-sub-nav {
  flex-direction: row-reverse;
}
html[dir="rtl"] .brand-text,
html[dir="rtl"] .tools-sheet-header,
html[dir="rtl"] .tools-sheet-title,
html[dir="rtl"] .tools-sheet-more-label,
html[dir="rtl"] .tab-dropdown-item {
  text-align: right;
}
html[dir="rtl"] .brand-privacy-pills {
  justify-content: flex-end;
}
html[dir="rtl"] .tools-sheet-more-chev {
  transform: scaleX(-1);
}

/* ---------------------------------------------------------
   6) Calendar form RTL
   --------------------------------------------------------- */
html[dir="rtl"] .prayer-calendar-form,
html[dir="rtl"] .prayer-calendar-form .grid {
  direction: rtl;
}
html[dir="rtl"] .prayer-calendar-form input,
html[dir="rtl"] .prayer-calendar-form select,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea {
  text-align: right;
}
html[dir="ltr"] input,
html[dir="ltr"] select,
html[dir="ltr"] textarea {
  text-align: left;
}

/* ---------------------------------------------------------
   7) Qibla header/layout
   --------------------------------------------------------- */
html[dir="rtl"] .qibla-header {
  flex-direction: row-reverse;
}
html[dir="rtl"] .qibla-header .btn {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

/* ---------------------------------------------------------
   8) Adhan header / panel layout
   --------------------------------------------------------- */
html[dir="rtl"] .adhan-prayer-header,
html[dir="ltr"] .adhan-prayer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
html[dir="rtl"] .adhan-prayer-title,
html[dir="rtl"] .adhan-next-prayer {
  text-align: right;
}
html[dir="ltr"] .adhan-prayer-title,
html[dir="ltr"] .adhan-next-prayer {
  text-align: left;
}
html[dir="rtl"] .adhan-prayer-icon {
  margin-inline-start: 0;
  margin-inline-end: 8px;
}
html[dir="ltr"] .adhan-prayer-icon {
  margin-inline-end: 0;
  margin-inline-start: 8px;
}

/* ---------------------------------------------------------
   9) Typography RTL safeguards
   --------------------------------------------------------- */
html[dir="rtl"] {
  --display: var(--arabic);
}
html[dir="rtl"] .brand-tagline,
html[dir="rtl"] .brand-pill,
html[dir="rtl"] .brand-rotating-text,
html[dir="rtl"] .time-name,
html[dir="rtl"] .next-prayer .label,
html[dir="rtl"] .h1,
html[dir="rtl"] .h2,
html[dir="rtl"] .h3,
html[dir="rtl"] .meta,
html[dir="rtl"] .hint,
html[dir="rtl"] .app-footer,
html[dir="rtl"] .prayer-live-clock-date,
html[dir="rtl"] .prayer-dropdown-toggle,
html[dir="rtl"] .tools-sheet-label,
html[dir="rtl"] .tools-sheet-more-label,
html[dir="rtl"] .bottom-nav-label,
html[dir="rtl"] .brand-title,
html[dir="rtl"] .tools-sheet-title {
  font-family: var(--arabic) !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
}
html[dir="rtl"] .h1,
html[dir="rtl"] .h2,
html[dir="rtl"] .brand-title {
  font-weight: 700 !important;
}

/* ---------------------------------------------------------
   10) Utility helpers for future components
   --------------------------------------------------------- */
.rtl-row {
  display: flex;
  align-items: center;
}
html[dir="rtl"] .rtl-row {
  flex-direction: row-reverse;
}
html[dir="ltr"] .rtl-row {
  flex-direction: row;
}

/* ---------------------------------------------------------
   11) Next prayer final layout fix
   --------------------------------------------------------- */
.next-prayer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.next-prayer > :first-child,
.next-prayer > :last-child {
  flex: 0 0 auto;
  min-width: 0;
}

html[dir="rtl"] .next-prayer {
  flex-direction: row;
}
html[dir="rtl"] .next-prayer > :first-child {
  text-align: right;
}
html[dir="rtl"] .next-prayer > :last-child {
  text-align: left;
  direction: ltr;
  unicode-bidi: isolate;
}

html[dir="ltr"] .next-prayer {
  flex-direction: row;
}
html[dir="ltr"] .next-prayer > :first-child {
  text-align: left;
}
html[dir="ltr"] .next-prayer > :last-child {
  text-align: right;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---------------------------------------------------------
   12) Bottom nav visibility fix
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .bottom-nav {
    display: flex !important;
  }
}

@media (min-width: 769px) {
  .bottom-nav {
    display: none !important;
  }
}