/* ==================== RTL STYLES FOR ARABIC ==================== */
/* Professional RTL layout using logical properties */

/* Apply Arabic Font */
body.rtl,
[lang="ar"] {
    font-family: var(--font-arabic);
}

/* Maintain English fonts for specific elements */
body.rtl .brand-name,
body.rtl .logo,
[lang="ar"] .brand-name,
[lang="ar"] .logo {
    font-family: var(--font-headline);
}

/* ==================== LAYOUT & DIRECTION ==================== */

/* Text Alignment */
body.rtl {
    text-align: right;
    direction: rtl;
}

/* Flex Direction Reversal */
body.rtl .navbar,
body.rtl .nav-links,
body.rtl .breadcrumbs,
body.rtl .pagination,
body.rtl .action-buttons {
    flex-direction: row-reverse;
}

/* Grid - Keep as is (cards should not flip) */
body.rtl .auction-grid,
body.rtl .lot-grid,
body.rtl .card-grid {
    direction: ltr;
    /* Keep grid LTR */
}

body.rtl .auction-grid>*,
body.rtl .lot-grid>*,
body.rtl .card-grid>* {
    direction: rtl;
    /* But content inside is RTL */
}

/* ==================== SPACING & MARGINS ==================== */

/* Use logical properties for margins and padding */
body.rtl .ml-auto {
    margin-inline-start: auto;
    margin-inline-end: 0;
}

body.rtl .mr-auto {
    margin-inline-end: auto;
    margin-inline-start: 0;
}

/* Form Elements */
body.rtl input,
body.rtl textarea,
body.rtl select {
    text-align: right;
}

body.rtl input[type="number"] {
    text-align: left;
    /* Keep numbers LTR */
}

/* Labels */
body.rtl label {
    text-align: right;
}

/* ==================== NAVIGATION ==================== */

body.rtl .nav-item:not(:last-child) {
    margin-inline-end: 2rem;
    margin-inline-start: 0;
}

body.rtl .dropdown-menu {
    right: auto;
    left: 0;
}

/* Mobile Menu */
body.rtl .mobile-menu {
    right: auto;
    left: 0;
}

/* ==================== BUTTONS & ICONS ==================== */

/* Icon positioning */
body.rtl .btn-icon-left {
    margin-inline-end: 0.5rem;
    margin-inline-start: 0;
}

body.rtl .btn-icon-right {
    margin-inline-start: 0.5rem;
    margin-inline-end: 0;
}

/* Chevrons and Arrows - Flip */
body.rtl .icon-chevron-right::before {
    content: '\2039';
    /* Left chevron */
}

body.rtl .icon-chevron-left::before {
    content: '\203A';
    /* Right chevron */
}

body.rtl .icon-arrow-right {
    transform: scaleX(-1);
}

body.rtl .icon-arrow-left {
    transform: scaleX(-1);
}

/* ==================== CARDS & COMPONENTS ==================== */

/* Auction Cards */
body.rtl .auction-card,
body.rtl .lot-card {
    text-align: right;
}

body.rtl .card-badge {
    right: auto;
    left: 1rem;
}

body.rtl .card-actions {
    justify-content: flex-start;
}

/* ==================== RTL SUPPORT ==================== */

/* Helper for RTL detection */
body.rtl {
    direction: rtl;
    text-align: right;
}

/* Typography Overrides */
body.rtl p,
body.rtl h1,
body.rtl h2,
body.rtl h3,
body.rtl h4,
body.rtl h5,
body.rtl h6,
body.rtl .text-left {
    text-align: right;
}

body.rtl .text-right {
    text-align: left;
}

/* Layout Utilities (Logical Properties) */
/* 
   Ideally, we should use logical properties (margin-inline-start) everywhere, 
   but for existing CSS that uses margin-left/right, we need overrides.
*/

body.rtl .ml-1 {
    margin-left: 0;
    margin-right: var(--space-1);
}

body.rtl .ml-2 {
    margin-left: 0;
    margin-right: var(--space-2);
}

body.rtl .ml-3 {
    margin-left: 0;
    margin-right: var(--space-3);
}

body.rtl .ml-4 {
    margin-left: 0;
    margin-right: var(--space-4);
}

body.rtl .mr-1 {
    margin-right: 0;
    margin-left: var(--space-1);
}

body.rtl .mr-2 {
    margin-right: 0;
    margin-left: var(--space-2);
}

body.rtl .mr-3 {
    margin-right: 0;
    margin-left: var(--space-3);
}

body.rtl .mr-4 {
    margin-right: 0;
    margin-left: var(--space-4);
}

body.rtl .pl-1 {
    padding-left: 0;
    padding-right: var(--space-1);
}

body.rtl .pl-2 {
    padding-left: 0;
    padding-right: var(--space-2);
}

body.rtl .pl-3 {
    padding-left: 0;
    padding-right: var(--space-3);
}

body.rtl .pl-4 {
    padding-left: 0;
    padding-right: var(--space-4);
}

body.rtl .pr-1 {
    padding-right: 0;
    padding-left: var(--space-1);
}

body.rtl .pr-2 {
    padding-right: 0;
    padding-left: var(--space-2);
}

body.rtl .pr-3 {
    padding-right: 0;
    padding-left: var(--space-3);
}

body.rtl .pr-4 {
    padding-right: 0;
    padding-left: var(--space-4);
}

/* Component Specific RTL Fixes */

/* Page & Section Headers — keep centered in RTL */
body.rtl .page-header,
body.rtl .page-header h1,
body.rtl .page-header h2,
body.rtl .page-header p,
body.rtl .page-header label,
body.rtl .section-header,
body.rtl .section-header h1,
body.rtl .section-header h2,
body.rtl .section-header p,
body.rtl .auction-header,
body.rtl .auction-header h1,
body.rtl .auction-header p,
body.rtl .auction-description {
    text-align: center;
}

/* Utility .text-center must override body.rtl text-align:right */
body.rtl .text-center {
    text-align: center;
}

/* Auth pages — keep centered in RTL */
body.rtl .auth-card,
body.rtl .auth-card h1,
body.rtl .auth-card p,
body.rtl .demo-credentials,
body.rtl .demo-credentials p {
    text-align: center;
}

/* Navigation — explicitly set flex-direction: row so that the native
   direction: rtl handles correct RTL flow. This must NOT be row-reverse,
   which would double-reverse the order and break the nav link sequence. */
body.rtl .header-content,
body.rtl .nav {
    flex-direction: row;
}

body.rtl .nav-link.active::after {
    left: auto;
    right: 0;
}

/* Inputs */
body.rtl .search-input {
    padding-left: var(--space-12);
    padding-right: var(--space-12);
    background-position: calc(100% - var(--space-3)) center;
}

body.rtl .form-error {
    border-left: none;
    border-right: 3px solid var(--theme-error);
}

/* Buttons with Icons */
body.rtl .btn svg {
    margin-right: -4px;
    margin-left: 8px;
    /* Flip margins for icons */
}

/* Product Cards */
body.rtl .card-footer {
    flex-direction: row-reverse;
}

/* Modals */
body.rtl .modal-header {
    flex-direction: row-reverse;
}

body.rtl .modal-footer {
    flex-direction: row-reverse;
    justify-content: flex-start;
    /* Or flex-end if we want buttons on left */
}

body.rtl .modal-close {
    margin-left: 0;
    margin-right: auto;
}

/* Tables */
body.rtl .table th,
body.rtl .table td {
    text-align: right;
}

/* Sidebar / Admin specific */
body.rtl .admin-sidebar {
    right: 0;
    left: auto;
    border-right: none;
    border-left: 1px solid rgba(47, 79, 62, 0.2);
    /* Was hardcoded gold rgba */
}

/* Footer */
body.rtl .footer-content {
    direction: rtl;
}

/* Watchlist/Cart Flyout (if applicable) */
body.rtl .flyout {
    left: 0;
    right: auto;
    transform: translateX(-100%);
}

body.rtl .flyout.active {
    transform: translateX(0);
}

/* Icons direction (arrows) */
body.rtl .icon-arrow-right {
    transform: scaleX(-1);
}

body.rtl .icon-chevron-right {
    transform: rotate(180deg);
}

/* Pagination */
body.rtl .pagination {
    flex-direction: row-reverse;
}

/* ==================== FORMS ==================== */

/* Form Groups */
body.rtl .form-group {
    text-align: right;
}

/* Checkboxes and Radio Buttons */
body.rtl input[type="checkbox"],
body.rtl input[type="radio"] {
    margin-inline-end: 0.5rem;
    margin-inline-start: 0;
}

/* Form Validation Icons */
body.rtl .form-input-icon {
    right: auto;
    left: 1rem;
}

/* ==================== TABLES ==================== */

body.rtl table {
    direction: rtl;
}

body.rtl th,
body.rtl td {
    text-align: right;
}

body.rtl th:first-child,
body.rtl td:first-child {
    border-radius: 0 0.5rem 0.5rem 0;
}

body.rtl th:last-child,
body.rtl td:last-child {
    border-radius: 0.5rem 0 0 0.5rem;
}

/* ==================== MODALS & DIALOGS ==================== */

body.rtl .modal-header {
    text-align: right;
}

/* ==================== BREADCRUMBS ==================== */

body.rtl .breadcrumb {
    flex-direction: row-reverse;
}

body.rtl .breadcrumb-separator::before {
    content: '\2039';
    /* Left chevron for RTL */
}

/* ==================== COUNTDOWN TIMER ==================== */

body.rtl .countdown {
    direction: ltr;
    /* Keep numbers LTR */
    text-align: center;
}

body.rtl .countdown-label {
    direction: rtl;
    /* But labels RTL */
}

/* ==================== BID HISTORY ==================== */

body.rtl .bid-item {
    text-align: right;
}

body.rtl .bid-amount {
    direction: ltr;
    /* Keep currency LTR */
}

/* ==================== GALLERY & MEDIA ==================== */

/* Thumbnail Navigation */
body.rtl .gallery-nav-prev {
    right: auto;
    left: 1rem;
}

body.rtl .gallery-nav-next {
    left: auto;
    right: 1rem;
}

/* Media Grid */
body.rtl .media-grid {
    direction: ltr;
    /* Keep media grid LTR */
}

/* ==================== ADMIN DASHBOARD ==================== */

/* Sidebar */
body.rtl .admin-main {
    margin-right: 260px;
    margin-left: 0;
}

/* Sidebar Navigation Items */
body.rtl .sidebar-nav .nav-item:hover {
    transform: translateX(-4px);
}

/* Admin Tables */
body.rtl .admin-table th:first-child {
    border-radius: 0 0.5rem 0 0;
}

body.rtl .admin-table th:last-child {
    border-radius: 0.5rem 0 0 0;
}

/* Action Buttons in Tables */
body.rtl .table-actions {
    text-align: left;
    /* Keep actions on left in RTL */
}

/* ==================== FOOTER ==================== */

body.rtl .footer-links {
    text-align: right;
}

body.rtl .footer-social {
    justify-content: flex-start;
}

/* ==================== TOOLTIPS & POPOVERS ==================== */

body.rtl .tooltip {
    direction: rtl;
    text-align: right;
}

/* ==================== NUMBERS & CURRENCY ==================== */

/* Keep all numbers and currency LTR */
body.rtl .price,
body.rtl .bid-amount,
body.rtl .estimate,
body.rtl .currency,
body.rtl .number {
    direction: ltr;
    unicode-bidi: embed;
}

/* ==================== ANIMATIONS ==================== */

/* Slide animations should reverse */
@keyframes slideInRight-rtl {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slideInLeft-rtl {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

body.rtl .slide-in-right {
    animation: slideInLeft-rtl 0.3s ease-out;
}

body.rtl .slide-in-left {
    animation: slideInRight-rtl 0.3s ease-out;
}

/* ==================== SCROLLBAR ==================== */

body.rtl ::-webkit-scrollbar {
    left: 0;
    right: auto;
}

/* ==================== RESPONSIVE ADJUSTMENTS ==================== */

@media (max-width: 768px) {
    body.rtl .admin-sidebar {
        right: -260px;
        left: auto;
    }

    body.rtl .admin-sidebar.active {
        right: 0;
    }

    body.rtl .admin-main {
        margin-right: 0;
    }

    body.rtl .mobile-menu-toggle {
        left: 1rem;
        right: auto;
    }
}

/* ==================== ACCESSIBILITY ==================== */

/* Focus indicators */
body.rtl *:focus {
    outline-offset: 2px;
}

/* Screen reader text */
body.rtl .sr-only-rtl {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ==================== PRINT STYLES ==================== */

@media print {
    body.rtl {
        direction: rtl;
    }
}

/* ==================== UTILITY CLASSES ==================== */

/* Text alignment utilities for RTL */
body.rtl .text-left {
    text-align: right;
}

body.rtl .text-right {
    text-align: left;
}

body.rtl .text-start {
    text-align: right;
}

body.rtl .text-end {
    text-align: left;
}

/* Float utilities */
body.rtl .float-left {
    float: right;
}

body.rtl .float-right {
    float: left;
}

/* Margin utilities */
body.rtl .ms-auto {
    margin-inline-start: auto;
}

body.rtl .me-auto {
    margin-inline-end: auto;
}

/* Padding utilities */
body.rtl .ps-0 {
    padding-inline-start: 0;
}

body.rtl .ps-1 {
    padding-inline-start: 0.25rem;
}

body.rtl .ps-2 {
    padding-inline-start: 0.5rem;
}

body.rtl .ps-3 {
    padding-inline-start: 1rem;
}

body.rtl .ps-4 {
    padding-inline-start: 1.5rem;
}

body.rtl .ps-5 {
    padding-inline-start: 3rem;
}

body.rtl .pe-0 {
    padding-inline-end: 0;
}

body.rtl .pe-1 {
    padding-inline-end: 0.25rem;
}

body.rtl .pe-2 {
    padding-inline-end: 0.5rem;
}

body.rtl .pe-3 {
    padding-inline-end: 1rem;
}

body.rtl .pe-4 {
    padding-inline-end: 1.5rem;
}

body.rtl .pe-5 {
    padding-inline-end: 3rem;
}

/* ==================== ALIGNMENT FIXES ==================== */

/* Hero Section - Keep centered in RTL */
body.rtl .hero-content,
body.rtl .hero-title,
body.rtl .hero-subtitle {
    text-align: center;
}

/* Trust Section (Features) - Keep centered in RTL */
body.rtl .trust-item,
body.rtl .trust-item h3,
body.rtl .trust-item p {
    text-align: center;
}

/* Page/Section Headers - Keep centered in RTL */
body.rtl .page-header,
body.rtl .page-header h1,
body.rtl .page-header > p,
body.rtl .page-subtitle,
body.rtl .section-header,
body.rtl .section-header h2,
body.rtl .section-header p {
    text-align: center;
}

/* Info page titles - Keep centered in RTL */
body.rtl .container-md > h1,
body.rtl .container-md > h1 + .text-lg {
    text-align: center;
}


/* ==================== PHONE & NUMERIC DATA — ALWAYS LTR ==================== */
/*
   Numbers, phone numbers, prices, IDs, and emails must always read
   left-to-right regardless of the surrounding RTL context.
   unicode-bidi: isolate  → each element treated as an independent bidi run
   direction: ltr         → forces LTR rendering inside that run
*/

/* ── All tel / number / email inputs ───────────────────────── */
body.rtl input[type="tel"],
body.rtl input[type="number"],
body.rtl input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="email"] {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
}

/* ── Table cells — use plaintext so content auto-detects direction ── */
/*   plaintext = each paragraph determines its own direction from
     its first strong bidi character; phone numbers start with + or a
     digit → LTR; Arabic text → RTL.  Works without any class needed. */
body.rtl td,
body.rtl .table td,
[dir="rtl"] td {
    unicode-bidi: plaintext;
}

/* ── Explicit numeric / phone value elements ────────────────── */
body.rtl .phone-value,
body.rtl .tel-value,
body.rtl .email-value,
body.rtl .number-value,
body.rtl .price-value,
body.rtl .bid-value,
body.rtl .lot-number,
body.rtl .stat-value,
body.rtl .badge,
body.rtl [data-numeric],
[dir="rtl"] .phone-value,
[dir="rtl"] .tel-value,
[dir="rtl"] .email-value,
[dir="rtl"] .number-value,
[dir="rtl"] .price-value,
[dir="rtl"] .bid-value,
[dir="rtl"] .lot-number,
[dir="rtl"] .stat-value,
[dir="rtl"] .badge,
[dir="rtl"] [data-numeric] {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block; /* isolate requires block/inline-block formatting */
}

/* ── Utility class: force any element LTR ───────────────────── */
.dir-ltr,
body.rtl .dir-ltr,
[dir="rtl"] .dir-ltr {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    text-align: left !important;
    display: inline-block;
}

/* deploy trigger */