/* ========================================================================== HOMEMADE FOOD & TIFFIN MARKETPLACE — RTL.CSS Right-to-Left (RTL) Layout & Bidirectional Overrides Activated strictly when ========================================================================== */ /* ========================================================================== 1. GLOBAL RTL FOUNDATION ========================================================================== */ html[dir="rtl"] { text-align: right; } html[dir="rtl"] body { direction: rtl; unicode-bidi: embed; } /* Ensure data literals (phone numbers, currency, order IDs) maintain semantic order */ html[dir="rtl"] .ltr-data, html[dir="rtl"] .phone-number, html[dir="rtl"] .order-id-badge, html[dir="rtl"] .stat-num, html[dir="rtl"] .price-val { direction: ltr; display: inline-block; unicode-bidi: embed; } /* Blockquote & Quote Accents in RTL */ html[dir="rtl"] .story-quote { border-inline-start: 3px solid var(--color-primary); border-inline-end: none; } /* Section Header alignment */ html[dir="rtl"] .section-header:not(.center) { text-align: right; } /* ========================================================================== 2. NAVBAR & DESKTOP NAVIGATION ========================================================================== */ html[dir="rtl"] .site-header { direction: rtl; } html[dir="rtl"] .nav-menu { direction: rtl; } /* Active indicator in RTL */ html[dir="rtl"] .nav-link.active::after { inset-inline-start: 0.25rem; inset-inline-end: 0.25rem; } /* Dropdown Menu Positioning in RTL */ html[dir="rtl"] .has-dropdown .dropdown-menu { inset-inline-start: 0; inset-inline-end: auto; text-align: right; } html[dir="rtl"] .nav-utilities .has-dropdown .dropdown-menu { inset-inline-start: auto; inset-inline-end: 0; } /* ========================================================================== 3. MOBILE NAVIGATION DRAWER ========================================================================== */ /* In RTL, the full-screen drawer slides in smoothly from the left */ html[dir="rtl"] .mobile-drawer { inset: 0; left: 0; right: 0; top: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; transform: translateX(-100%); border: none; box-shadow: none; } html[dir="rtl"] .mobile-drawer.is-active { transform: translateX(0); } html[dir="rtl"] .mobile-drawer-header, html[dir="rtl"] .mobile-nav-link { text-align: right; } html[dir="rtl"] .mobile-submenu { padding-inline-start: 1rem; padding-inline-end: 0; } /* ========================================================================== 4. PUBLIC PAGE SECTIONS (HERO, CUISINES, TIMELINE) ========================================================================== */ /* Hero gradient mirror */ html[dir="rtl"] .hero-home-1 { background: radial-gradient(circle at 15% 30%, var(--color-soft-accent) 0%, transparent 55%); } /* Floating Card positioning in Hero */ html[dir="rtl"] .hero-floating-card { inset-inline-start: 5%; inset-inline-end: auto; } /* Process Step numbers in RTL */ html[dir="rtl"] .process-step { text-align: right; } /* ========================================================================== 5. FORMS & SEARCH CONTROLS ========================================================================== */ html[dir="rtl"] .form-label { text-align: right; } html[dir="rtl"] .form-control, html[dir="rtl"] .form-select, html[dir="rtl"] textarea.form-control { text-align: right; } /* Search input with leading icon */ html[dir="rtl"] .search-input-wrapper i { inset-inline-start: 1rem; inset-inline-end: auto; } html[dir="rtl"] .search-input-wrapper .form-control { padding-inline-start: 2.75rem; padding-inline-end: 1rem; } /* Password visibility toggle button */ html[dir="rtl"] .btn-password-toggle { inset-inline-start: 0.5rem; inset-inline-end: auto; } html[dir="rtl"] .input-password-wrapper .form-control { padding-inline-start: 2.75rem; padding-inline-end: 1rem; } /* Newsletter Input Group */ html[dir="rtl"] .newsletter-input-group { direction: rtl; } /* ========================================================================== 6. CUSTOMER & ADMIN DASHBOARDS ========================================================================== */ /* Dashboard layout flips: sidebar moves to the right in desktop RTL */ @media (min-width: 1025px) { html[dir="rtl"] .dashboard-sidebar { border-inline-start: none; border-inline-end: 1px solid var(--color-border); } } html[dir="rtl"] .dashboard-user-profile { text-align: right; } html[dir="rtl"] .dashboard-nav-btn { text-align: right; width: 100%; } /* Delivery Tracker Progression in RTL: Order Confirmed -> Being Prepared -> Picked Up -> Out for Delivery -> Delivered */ html[dir="rtl"] .delivery-tracker-flow { direction: rtl; } @media (min-width: 768px) { html[dir="rtl"] .delivery-tracker-flow::before { inset-inline-start: 16px; inset-inline-end: 16px; } } /* App Data Tables */ html[dir="rtl"] .app-table th { text-align: right; } html[dir="rtl"] .app-table td { text-align: right; } /* Metric Cards */ html[dir="rtl"] .metric-card { text-align: right; } /* ========================================================================== 7. DIRECTIONAL ICONS (FLIPPED IN RTL) ========================================================================== */ /* Only true directional arrows and step indicators flip */ html[dir="rtl"] .fa-arrow-right, html[dir="rtl"] .fa-arrow-left, html[dir="rtl"] .fa-chevron-right, html[dir="rtl"] .fa-chevron-left, html[dir="rtl"] .fa-angle-right, html[dir="rtl"] .fa-angle-left, html[dir="rtl"] .fa-long-arrow-right, html[dir="rtl"] .fa-long-arrow-left, html[dir="rtl"] .btn .fa-arrow-right, html[dir="rtl"] .btn .fa-chevron-right { transform: scaleX(-1); display: inline-block; } /* Non-directional icons (MUST NOT FLIP) */ html[dir="rtl"] .fa-star, html[dir="rtl"] .fa-user, html[dir="rtl"] .fa-moon, html[dir="rtl"] .fa-sun, html[dir="rtl"] .fa-right-left, html[dir="rtl"] .fa-heart, html[dir="rtl"] .fa-utensils, html[dir="rtl"] .fa-phone, html[dir="rtl"] .fa-envelope, html[dir="rtl"] .fa-clock, html[dir="rtl"] .fa-check, html[dir="rtl"] .fa-circle-check, html[dir="rtl"] .fa-map-marker-alt, html[dir="rtl"] .fa-bars, html[dir="rtl"] .fa-xmark { transform: none !important; } /* ========================================================================== 8. RESPONSIVE RTL SPECIFICS ========================================================================== */ @media (max-width: 767px) { html[dir="rtl"] .cuisine-editorial-strip { direction: rtl; } html[dir="rtl"] .dashboard-nav-list { direction: rtl; } }