/**
 * MyTasbih Pro — RTL (Right-to-Left) Overrides
 *
 * Provides RTL layout support for the Arabic language variant (/ar).
 * Uses CSS logical properties where possible, with [dir="rtl"]
 * selectors for overrides that require physical property flipping.
 *
 * The base counter page already handles core RTL via body.rtl rules
 * in page-counter.css. This file covers Pro-specific components only.
 *
 * Requirements: 37.17
 *
 * @package MyTasbih
 * @subpackage Pro
 * @since 1.0.0
 */

/* ========================================
   General: Logical property defaults
   Applied to all Pro components in RTL
   ======================================== */

[dir="rtl"] .seo-content ul,
[dir="rtl"] .seo-content ol {
    padding-inline-start: 24px;
    padding-inline-end: 0;
}

/* ========================================
   Theme Picker (pro-themes.css)
   ======================================== */

[dir="rtl"] .mytasbih-theme-btn__lock {
    right: auto;
    left: -2px;
    inset-inline-end: auto;
    inset-inline-start: -2px;
}

[dir="rtl"] .mytasbih-theme-swatch__check {
    right: auto;
    left: 6px;
    inset-inline-end: auto;
    inset-inline-start: 6px;
}

/* ========================================
   Account Pages (pro-account.css)
   ======================================== */

[dir="rtl"] .account-header {
    text-align: center;
}

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

[dir="rtl"] .form-input {
    text-align: right;
}

[dir="rtl"] .social-login-btn {
    flex-direction: row-reverse;
}

/* ========================================
   Account Dashboard — Welcome Banner (pro-dashboard.css)
   ======================================== */

/* The hero photo carries its mosques + gold glow on the right half, and the
   dark gradient is anchored top-left. That suits the LTR layout, whose
   greeting/name/date sit on the left over the dark side. In RTL the text moves
   to the right, where it washes out over the bright domes. Mirror the photo so
   the mosques sit on the left, and flip the gradient (now darkest top-right) so
   the Arabic text lands on the dark, detail-free side — the same contrast LTR
   gets. The flip lives on a back pseudo-layer so only the image mirrors, never
   the text. isolation:isolate scopes the negative z-index to this card. */
[dir="rtl"] .dash-welcome {
    background-image: none;
    isolation: isolate;
}

[dir="rtl"] .dash-welcome::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('https://mytasbih.com/wp-content/uploads/2026/05/c846db63-10b5-42ed-aa57-0b37e19a4afe.webp') no-repeat center/cover;
    transform: scaleX(-1);
    border-radius: 18px;
    z-index: -1;
}

[dir="rtl"] .dash-welcome::before {
    background: linear-gradient(225deg, rgba(26,26,46,.7) 0%, rgba(22,33,62,.4) 60%, transparent 100%);
}

/* ========================================
   Multi-Counter Dashboard (pro-multi-counter.css)
   ======================================== */

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

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

[dir="rtl"] .mc-card__arabic {
    text-align: right;
}

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

[dir="rtl"] .mc-add-dialog__header {
    flex-direction: row-reverse;
}

/* ========================================
   Analytics Dashboard (pro-analytics.css)
   ======================================== */

[dir="rtl"] .an-page-header {
    flex-direction: row-reverse;
}

[dir="rtl"] .an-page-header__left {
    text-align: right;
}

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

[dir="rtl"] .an-header-actions {
    flex-direction: row-reverse;
}

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

[dir="rtl"] .an-breakdown-name {
    text-align: right;
}

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

[dir="rtl"] .an-export-btns {
    flex-direction: row-reverse;
}

/* ========================================
   Checkout (pro-checkout.css)
   ======================================== */

[dir="rtl"] .checkout-form label {
    text-align: right;
}

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

/* ========================================
   Modals & Panels — Close button flip
   ======================================== */

[dir="rtl"] .mytasbih-theme-picker__close {
    order: -1;
}

[dir="rtl"] .mytasbih-theme-picker__header {
    flex-direction: row-reverse;
}

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

/* ========================================
   Icon button lock indicators
   ======================================== */

[dir="rtl"] .icon-btn__lock {
    right: auto;
    left: -2px;
    inset-inline-end: auto;
    inset-inline-start: -2px;
}

[dir="rtl"] .icon-btn--locked .icon-btn__lock {
    right: auto;
    left: -2px;
}

/* ========================================
   Offline indicator
   ======================================== */

[dir="rtl"] .offline-indicator {
    margin-inline-end: 4px;
    margin-inline-start: 0;
}

/* ========================================
   Navigation — Pro link badge
   ======================================== */

[dir="rtl"] .nav-link--pro .pro-badge {
    margin-inline-start: 4px;
    margin-inline-end: 0;
}

/* ========================================
   Upgrade Prompt Banner
   ======================================== */

[dir="rtl"] .upgrade-prompt {
    text-align: right;
}

[dir="rtl"] .upgrade-prompt__close {
    right: auto;
    left: 12px;
    inset-inline-end: auto;
    inset-inline-start: 12px;
}

/* ========================================
   Prayer Time Widget
   ======================================== */

[dir="rtl"] .prayer-widget {
    text-align: right;
}

[dir="rtl"] .prayer-widget__icon {
    margin-inline-end: 8px;
    margin-inline-start: 0;
}

/* ========================================
   Dhikr Library — Category badges
   ======================================== */

[dir="rtl"] .dhikr-lib__category-badge {
    margin-inline-start: 8px;
    margin-inline-end: 0;
}

[dir="rtl"] .dhikr-lib__item-source {
    text-align: right;
}

/* ========================================
   Adhkar Routine — Progress indicator
   ======================================== */

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

[dir="rtl"] .adhkar-progress__bar {
    transform-origin: right;
}

/* ========================================
   Qibla Compass
   ======================================== */

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

[dir="rtl"] .qf-info-strip {
    flex-direction: row-reverse;
}

[dir="rtl"] .qf-info-item {
    flex-direction: row-reverse;
    text-align: right;
}

[dir="rtl"] .qf-manual__hint {
    text-align: right;
}

[dir="rtl"] .qf-static-note {
    flex-direction: row-reverse;
    text-align: right;
}

/* ========================================
   Reminders
   ======================================== */

[dir="rtl"] .reminder-item__time {
    margin-inline-end: 12px;
    margin-inline-start: 0;
}

[dir="rtl"] .reminder-item__toggle {
    margin-inline-start: auto;
    margin-inline-end: 0;
}

/* ========================================
   History Log / Export (pro-history.css)
   ======================================== */

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

[dir="rtl"] .hs-header__left {
    text-align: right;
}

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

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

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

[dir="rtl"] .hs-entry-main {
    text-align: right;
}

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

[dir="rtl"] .hs-export-btns {
    flex-direction: row-reverse;
}

/* ========================================
   Achievements / Badges (pro-features.css)
   ======================================== */

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

[dir="rtl"] .achievement-badge__info {
    text-align: right;
}

/* ========================================
   Weekly Report Preferences
   ======================================== */

[dir="rtl"] .report-pref__label {
    margin-inline-end: 8px;
    margin-inline-start: 0;
}

/* ========================================
   Social Share — Enhanced cards
   ======================================== */

[dir="rtl"] .share-enhanced__stats {
    text-align: right;
}

/* ========================================
   Responsive: Ensure RTL works at all breakpoints
   (Req 37.18: 320px, 375px, 414px, 768px, 1024px, 1440px)
   ======================================== */

@media (max-width: 480px) {
    [dir="rtl"] .mc-dashboard__quicksets {
        padding-inline-start: 0;
        padding-inline-end: 0;
    }

    [dir="rtl"] .account-card {
        padding-inline-start: 20px;
        padding-inline-end: 20px;
    }
}

@media (min-width: 768px) {
    [dir="rtl"] .dashboard-grid {
        direction: rtl;
    }
}

/* ========================================
   Hero feature marquee (pro-landing.css)
   The auto-scroll uses a physical translateX(0 → -50%) that assumes an LTR
   track. In RTL the track lays out right-to-left, so that transform drags the
   cards off-screen and the rail goes blank once it scrolls (the reported
   "moves then becomes empty" bug). Pin the rail's scroll geometry to LTR so the
   two card sets loop seamlessly, and restore RTL on each card so the Arabic
   text and icon/title order still render correctly.
   ======================================== */

[dir="rtl"] .pro-rail {
    direction: ltr;
}

[dir="rtl"] .pro-rail .pro-float {
    direction: rtl;
}