/* ===========================================
   GBE LOGISTICS - RTL & ARABIC SUPPORT
   =========================================== */

/* Arabic Font */
@font-face {
    font-family: 'Arsenica Arabic';
    src: url('https://alfont.com/wp-content/fonts/new-arabic-fonts//alfont_com_Arsenica-Arabic-Antiqua-Extrabold-TRIAL.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Arabic body font - use IBM Plex Sans Arabic for readability */
.lang-ar {
    --font-arabic: 'IBM Plex Sans Arabic', 'Arsenica Arabic', 'Plus Jakarta Sans', -apple-system, sans-serif;
    --font-arabic-display: 'Arsenica Arabic', 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', -apple-system, sans-serif;
}

.lang-ar body,
.lang-ar input,
.lang-ar select,
.lang-ar textarea,
.lang-ar button,
.lang-ar .btn {
    font-family: var(--font-arabic) !important;
}

/* Display headings use Arsenica Arabic */
.lang-ar h1,
.lang-ar h2,
.lang-ar .hero h1,
.lang-ar .slogan-loader,
.lang-ar .track-title,
.lang-ar .section-title {
    font-family: var(--font-arabic-display) !important;
}

/* RTL Layout Flips */
[dir="rtl"] {
    text-align: right;
}

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

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

[dir="rtl"] .nav-link::after {
    left: auto;
    right: 0;
}

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

/* Hero RTL */
[dir="rtl"] .hero-content {
    text-align: right;
}

[dir="rtl"] .hero-actions {
    justify-content: flex-start;
}

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

/* Slogan RTL */
[dir="rtl"] .slogan-loader {
    direction: rtl;
}

/* Cards & Grid RTL */
[dir="rtl"] .service-card {
    text-align: right;
}

[dir="rtl"] .feature-item {
    text-align: right;
}

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

/* Forms RTL */
[dir="rtl"] .form-label {
    text-align: right;
}

[dir="rtl"] .form-label .required {
    margin-left: 0;
    margin-right: 2px;
}

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

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

/* Buttons RTL */
[dir="rtl"] .btn {
    flex-direction: row-reverse;
}

[dir="rtl"] .btn svg {
    margin-left: 0;
    margin-right: 0;
}

/* Dropdown RTL */
[dir="rtl"] .dropdown-menu {
    left: auto;
    right: 0;
}

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

/* Footer RTL */
[dir="rtl"] .footer-grid {
    direction: rtl;
}

[dir="rtl"] .footer-brand {
    text-align: right;
}

[dir="rtl"] .footer-links {
    text-align: right;
}

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

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

/* Progress Steps RTL */
[dir="rtl"] .progress-steps {
    flex-direction: row-reverse;
}

[dir="rtl"] .progress-line {
    left: auto;
    right: 0;
}

/* Ship page RTL */
[dir="rtl"] .shipping-header {
    text-align: right;
}

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

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

/* Track page RTL */
[dir="rtl"] .back-link {
    left: auto;
    right: var(--space-xl);
    flex-direction: row-reverse;
}

[dir="rtl"] .back-link:hover {
    transform: translateX(4px);
}

[dir="rtl"] .lang-toggle {
    right: auto;
    left: var(--space-xl);
}

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

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

/* Alerts RTL */
[dir="rtl"] .alert {
    flex-direction: row-reverse;
    text-align: right;
}

/* Tables RTL */
[dir="rtl"] .table th,
[dir="rtl"] .table td {
    text-align: right;
}

/* Stats RTL */
[dir="rtl"] .stat-card {
    text-align: right;
}

/* Scroll indicators RTL */
[dir="rtl"] .scroll-reveal {
    transform: translateX(20px);
}

[dir="rtl"] .scroll-reveal.visible {
    transform: translateX(0);
}

/* Flex gap fix for RTL */
[dir="rtl"] .flex {
    flex-direction: row-reverse;
}

[dir="rtl"] .flex-col {
    flex-direction: column;
}

/* Mobile Menu RTL */
@media (max-width: 768px) {
    [dir="rtl"] .nav-menu {
        flex-direction: column;
        transform: translateX(-100%);
        left: 0;
        right: auto;
    }

    [dir="rtl"] .nav-menu.active {
        transform: translateX(0);
    }

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

    [dir="rtl"] .menu-toggle {
        margin-left: 0;
        margin-right: auto;
    }

    [dir="rtl"] .nav-actions {
        flex-direction: column;
        transform: translateX(-100%);
        left: 0;
        right: auto;
    }

    [dir="rtl"] body.menu-open .nav-actions,
    [dir="rtl"] .nav-menu.active ~ .nav-actions {
        transform: translateX(0);
    }
}

/* Language Toggle Button */
.lang-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(0, 71, 186, 0.08);
    border: 1px solid rgba(0, 71, 186, 0.15);
    border-radius: var(--radius-full, 9999px);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gbe-blue, #0047BA);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.lang-toggle-btn:hover {
    background: rgba(0, 71, 186, 0.15);
    border-color: rgba(0, 71, 186, 0.3);
}

.lang-toggle-btn .globe-icon {
    width: 16px;
    height: 16px;
}

/* Dark mode lang toggle */
[data-theme="dark"] .lang-toggle-btn {
    background: rgba(96, 165, 250, 0.1);
    border-color: rgba(96, 165, 250, 0.2);
    color: #60a5fa;
}

[data-theme="dark"] .lang-toggle-btn:hover {
    background: rgba(96, 165, 250, 0.2);
}

/* Marquee / Ticker */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.marquee-container::before,
.marquee-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}

.marquee-container::before {
    left: 0;
    background: linear-gradient(to right, var(--white, #fff), transparent);
}

.marquee-container::after {
    right: 0;
    background: linear-gradient(to left, var(--white, #fff), transparent);
}

[data-theme="dark"] .marquee-container::before {
    background: linear-gradient(to right, #0f172a, transparent);
}

[data-theme="dark"] .marquee-container::after {
    background: linear-gradient(to left, #0f172a, transparent);
}

[dir="rtl"] .marquee-track {
    animation-direction: reverse;
}