/* ═══════════════════════════════════════════════════════════════════════════
   RTL (Right-to-Left) Styles for Arabic Language Support
   Comprehensive directional overrides for NileGameAcademy

   Strategy:
   - Use logical properties (margin-inline-*, padding-inline-*, inset-inline-*)
     in the main stylesheets wherever possible.
   - This file handles ONLY the physical-direction overrides that can't
     be solved with logical properties (transforms, gradients, border-sides).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base RTL ──────────────────────────────────────────────────────────── */
html[dir="rtl"] body {
    text-align: right;
    font-family: 'Cairo', 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Directional Icon Flips ────────────────────────────────────────────── */
html[dir="rtl"] .rtl-flip {
    transform: scaleX(-1);
}

/* ── Table / Form Alignment ────────────────────────────────────────────── */
html[dir="rtl"] table,
html[dir="rtl"] th,
html[dir="rtl"] td {
    text-align: right;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
}

html[dir="rtl"] input::placeholder,
html[dir="rtl"] textarea::placeholder {
    text-align: right;
}

/* ── Progress Bar Origins ──────────────────────────────────────────────── */
html[dir="rtl"] .progress-bar-fill {
    transform-origin: right;
}

/* ── Dashboard Sidebar Active Indicator ────────────────────────────────── */
html[dir="rtl"] .dashboard-sidebar .sidebar-link.active {
    border-right: none;
    border-left: 3px solid #2E79C7;
}

html[dir="rtl"] .dashboard-sidebar .sidebar-link:hover {
    transform: translateX(-2px);
}

/* ── Notification / Overlay Drawers ────────────────────────────────────── */
html[dir="rtl"] #notifications-drawer {
    left: 0 !important;
    right: auto !important;
    border-left-width: 0 !important;
    border-right-width: 1px !important;
    transform: translateX(-100%);
}

html[dir="rtl"] #notifications-drawer.drawer-open {
    transform: translateX(0) !important;
}

/* ── Toast Container ───────────────────────────────────────────────────── */
html[dir="rtl"] #toast-container {
    right: auto;
    left: 1rem;
    align-items: flex-start;
}

/* ── Search Input Icon Positioning ─────────────────────────────────────── */
html[dir="rtl"] .search-icon-wrapper {
    left: auto;
    right: 0;
}

/* ── Glass Shimmer Direction ───────────────────────────────────────────── */
html[dir="rtl"] .animate-glass-shimmer::after {
    background: linear-gradient(
        -105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.05) 45%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.05) 55%,
        transparent 70%
    );
}

/* ── Nav Item Hover Indicator (stays centered, no RTL fix needed) ────── */

/* ── Breadcrumb Arrow Direction ────────────────────────────────────────── */
html[dir="rtl"] .breadcrumb-arrow {
    transform: scaleX(-1);
}

/* ── Atmospheric Gradient Direction ────────────────────────────────────── */
html[dir="rtl"] .atmosphere-bg::before {
    /* Mirror the accent glow position for RTL */
    background-image: 
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(46, 121, 199, 0.05) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 15% 100%, rgba(200, 154, 67, 0.03) 0%, transparent 60%);
}

.dark html[dir="rtl"] .atmosphere-bg::before {
    background-image: 
        radial-gradient(ellipse 60% 45% at 50% 0%, rgba(46, 121, 199, 0.08) 0%, transparent 65%),
        radial-gradient(ellipse 45% 35% at 10% 100%, rgba(200, 154, 67, 0.04) 0%, transparent 55%);
}

/* ── Focus Mode Next Button ────────────────────────────────────────────── */
html[dir="rtl"] .focus-next-arrow {
    transform: scaleX(-1);
}

/* ── WhatsApp Floating Button ──────────────────────────────────────────── */
html[dir="rtl"] .whatsapp-tooltip {
    right: auto;
    left: 4rem;
}

/* ── Roadmap Line Direction ────────────────────────────────────────────── */
html[dir="rtl"] .roadmap-card-glass {
    /* Cards are positioned via flex/grid, no physical position override needed */
}

/* ── Mobile Bottom Nav Safe Area ───────────────────────────────────────── */
html[dir="rtl"] #mobile-bottom-nav {
    /* flex items are direction-aware by default */
}

/* ── Custom Scrollbar for RTL ──────────────────────────────────────────── */
html[dir="rtl"] ::-webkit-scrollbar-thumb {
    border-radius: 9999px;
}

/* ── Staggered Card Enter for RTL (slide from opposite side) ───────── */
html[dir="rtl"] .animate-card-enter {
    /* Cards use translateY, which is direction-neutral */
}