﻿/**
 * RTL/LTR Support Styles
 * BotHub v2.0
 */

/* ==========================================================================
   RTL Base Styles
   ========================================================================== */

/* RTL Direction Override */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

[dir="ltr"] {
    direction: ltr;
    text-align: left;
}

/* ==========================================================================
   RTL Layout Adjustments
   ========================================================================== */

/* Flex Direction */
[dir="rtl"] .flex-row,
[dir="rtl"] .d-flex {
    flex-direction: row-reverse;
}

/* Float Reverse */
[dir="rtl"] .pull-left,
[dir="rtl"] .float-left {
    float: right !important;
}

[dir="rtl"] .pull-right,
[dir="rtl"] .float-right {
    float: left !important;
}

/* Text Alignment */
[dir="rtl"] .text-left {
    text-align: right !important;
}

[dir="rtl"] .text-right {
    text-align: left !important;
}

/* ==========================================================================
   RTL Margins & Paddings
   ========================================================================== */

[dir="rtl"] .ml-auto,
[dir="rtl"] .ms-auto {
    margin-right: auto !important;
    margin-left: 0 !important;
}

[dir="rtl"] .mr-auto,
[dir="rtl"] .me-auto {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* ==========================================================================
   RTL Navigation & Header (Base)
   ========================================================================== */

/* See end of file for complete header fixes */

[dir="rtl"] .nav-bar {
    right: auto;
    left: 0;
}

/* ==========================================================================
   RTL Sidebar (Base)
   ========================================================================== */

[dir="rtl"] .sidebar {
    float: right;
    border-left: none;
    border-right: 1px solid #ddd;
}

/* See end of file for complete main/side layout fixes */

/* ==========================================================================
   RTL Cards & Components
   ========================================================================== */

[dir="rtl"] .card-head i {
    margin-right: 0;
    margin-left: 8px;
}

[dir="rtl"] .card-head .more {
    float: left;
}

[dir="rtl"] .item .icon {
    margin-right: 0;
    margin-left: 10px;
}

[dir="rtl"] .view-list .rank {
    margin-right: 0;
    margin-left: 10px;
}

[dir="rtl"] .view-list .view {
    margin-left: 0;
    margin-right: auto;
}

/* ==========================================================================
   RTL Forms
   ========================================================================== */

[dir="rtl"] .input-group {
    flex-direction: row-reverse;
}

[dir="rtl"] .input-group-addon {
    border-radius: 0 4px 4px 0;
    border-left: 1px solid #ccc;
    border-right: none;
}

[dir="rtl"] .input-group .form-control:first-child {
    border-radius: 4px 0 0 4px;
}

[dir="rtl"] .form-control {
    text-align: right;
}

[dir="rtl"] select.form-control {
    background-position: left 10px center;
    padding-left: 30px;
    padding-right: 12px;
}

/* ==========================================================================
   RTL Buttons
   ========================================================================== */

[dir="rtl"] .btn i {
    margin-right: 0;
    margin-left: 5px;
}

[dir="rtl"] .btn-group {
    flex-direction: row-reverse;
}

/* ==========================================================================
   RTL Tables
   ========================================================================== */

[dir="rtl"] table {
    direction: rtl;
}

[dir="rtl"] th,
[dir="rtl"] td {
    text-align: right;
}

[dir="rtl"] th:first-child,
[dir="rtl"] td:first-child {
    text-align: right;
}

[dir="rtl"] th:last-child,
[dir="rtl"] td:last-child {
    text-align: left;
}

/* ==========================================================================
   RTL Breadcrumb
   ========================================================================== */

[dir="rtl"] .breadcrumb {
    flex-direction: row-reverse;
    padding-left: 0;
    padding-right: 15px;
}

[dir="rtl"] .breadcrumb li + li::before {
    content: "\\";
    padding-left: 10px;
    padding-right: 0;
}

[dir="rtl"] .board span {
    direction: rtl;
}

/* ==========================================================================
   RTL Search
   ========================================================================== */
/* Old search styles removed - using banner-search-* in brand.css */

[dir="rtl"] .search-type {
    flex-direction: row-reverse;
}

/* ==========================================================================
   RTL Footer
   ========================================================================== */

[dir="rtl"] .footer {
    direction: rtl;
    text-align: center;
}

[dir="rtl"] .footer-section {
    text-align: center;
}

[dir="rtl"] .footer-section ul li a {
    flex-direction: row-reverse;
}

[dir="rtl"] .footer-section ul li a:hover {
    transform: translateX(-3px);
}

/* ==========================================================================
   RTL Floating Buttons
   ========================================================================== */

[dir="rtl"] .suspend {
    left: 20px;
    right: auto;
}

[dir="rtl"] .suspend .more {
    right: auto;
    left: 60px;
}

/* ==========================================================================
   RTL Timeline
   ========================================================================== */

[dir="rtl"] .oz-timeline-item::before {
    left: auto;
    right: 0;
}

[dir="rtl"] .oz-timeline-item {
    padding-left: 0;
    padding-right: 20px;
}

/* ==========================================================================
   RTL Admin Panel
   ========================================================================== */

[dir="rtl"] .sidebar .list-group-item i {
    margin-right: 0;
    margin-left: 10px;
}

[dir="rtl"] .panel-heading {
    text-align: right;
}

[dir="rtl"] .content-wrapper {
    margin-left: 0;
    margin-right: 250px;
}

@media (max-width: 991px) {
    [dir="rtl"] .content-wrapper {
        margin-right: 0;
    }
}

/* ==========================================================================
   RTL Pagination
   ========================================================================== */

[dir="rtl"] .pagination {
    flex-direction: row-reverse;
}

[dir="rtl"] .pagination li:first-child a {
    border-radius: 0 4px 4px 0;
}

[dir="rtl"] .pagination li:last-child a {
    border-radius: 4px 0 0 4px;
}

/* ==========================================================================
   RTL Alerts & Messages
   ========================================================================== */

[dir="rtl"] .alert {
    text-align: right;
}

[dir="rtl"] .alert-dismissible {
    padding-left: 35px;
    padding-right: 15px;
}

[dir="rtl"] .alert-dismissible .close {
    right: auto;
    left: 0;
}

/* ==========================================================================
   RTL Dropdowns
   ========================================================================== */

[dir="rtl"] .dropdown-menu {
    text-align: right;
    left: auto;
    right: 0;
}

[dir="rtl"] .dropdown-menu-right {
    left: 0;
    right: auto;
}

/* ==========================================================================
   RTL Modal
   ========================================================================== */

[dir="rtl"] .modal-header .close {
    margin: -1rem auto -1rem -1rem;
}

[dir="rtl"] .modal-body {
    text-align: right;
}

/* ==========================================================================
   RTL List Groups
   ========================================================================== */

[dir="rtl"] .list-group-item {
    text-align: right;
}

[dir="rtl"] .list-group-item i {
    margin-right: 0;
    margin-left: 8px;
}

/* ==========================================================================
   Language Switcher Styles
   ========================================================================== */

.lang-switcher {
    display: inline-block;
    position: relative;
}

.lang-select {
    padding: 8px 30px 8px 15px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23333" d="M6 8L1 3h10z"/></svg>') no-repeat right 10px center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 140px;
}

.lang-select:focus {
    outline: none;
    border-color: #ff7f00;
}

[dir="rtl"] .lang-select {
    padding: 8px 15px 8px 30px;
    background-position: left 10px center;
}

.lang-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 10px;
    border-radius: 25px;
    backdrop-filter: blur(10px);
}

.lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.lang-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: #ff7f00;
    transform: scale(1.15);
    box-shadow: 0 4px 15px rgba(255, 127, 0, 0.3);
}

.lang-btn.active {
    background: linear-gradient(135deg, #ff7f00, #ff9500);
    border-color: #ff7f00;
    box-shadow: 0 4px 15px rgba(255, 127, 0, 0.4);
}

/* Header Language Switcher */
.header .lang-buttons {
    margin-left: 15px;
}

[dir="rtl"] .header .lang-buttons {
    margin-left: 0;
    margin-right: 15px;
}

.header .lang-btn {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.header .lang-btn:hover {
    background: #fff;
}

.header .lang-btn.active {
    background: #fff;
    border-color: #fff;
}

/* ==========================================================================
   Font Families for Different Languages
   ========================================================================== */

/* Arabic Font */
[lang="ar"] body,
[lang="ar"] input,
[lang="ar"] textarea,
[lang="ar"] select,
[lang="ar"] button {
    font-family: 'Segoe UI', 'Tahoma', 'Arial', sans-serif;
}

/* English Font */
[lang="en"] body,
[lang="en"] input,
[lang="en"] textarea,
[lang="en"] select,
[lang="en"] button {
    font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
}

/* English Font */
[lang="en"] body,
[lang="en"] input,
[lang="en"] textarea,
[lang="en"] select,
[lang="en"] button {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ==========================================================================
   Performance Optimizations
   ========================================================================== */

/* GPU Acceleration for animations */
.animate,
.transition {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Optimized transitions */
a, button, .btn, .card, .item {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Reduce repaints */
.fixed, .sticky {
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Lazy load images */
img.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease;
}

img.lazy-load.loaded {
    opacity: 1;
}

/* Skeleton loading */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ==========================================================================
   Responsive RTL Adjustments
   ========================================================================== */

@media (max-width: 767px) {
    [dir="rtl"] .nav {
        right: auto;
        left: 0;
    }
    
    [dir="rtl"] .main,
    [dir="rtl"] .side {
        float: none;
        width: 100%;
    }
    
    [dir="rtl"] .suspend {
        left: 10px;
    }
}

/* ==========================================================================
   Additional RTL Fixes
   ========================================================================== */

/* Card head more link position */
[dir="rtl"] .card .card-head .more {
    right: auto;
    left: 8px;
}

/* Board icon margins */
[dir="rtl"] .board .icon {
    margin: 0 4px 0 8px;
}

/* Links card head before pseudo element */
[dir="rtl"] .links .card-head::before {
    left: auto;
    right: 5px;
}

/* Part side float */
[dir="rtl"] .part-side {
    float: right;
}

/* Part main text margins */
[dir="rtl"] .part-main .text {
    margin-left: 0;
    margin-right: 10px;
}

/* View list view element */
[dir="rtl"] .view-list a .view {
    margin-right: 0;
    margin-left: 8px;
}

/* Site detail list */
[dir="rtl"] .site-detail li i {
    margin-right: 0;
    margin-left: 5px;
}

/* Search form */
[dir="rtl"] .search-form .input-group-btn {
    float: left;
}

[dir="rtl"] .search-form .form-control {
    border-radius: 0 4px 4px 0;
}

[dir="rtl"] .search-form .btn {
    border-radius: 4px 0 0 4px;
}

/* Article list arrows */
[dir="rtl"] .article-list li::before {
    content: "←";
    margin-right: 0;
    margin-left: 5px;
}

/* Timeline */
[dir="rtl"] .oz-timeline-item::before {
    left: auto;
    right: 0;
}

[dir="rtl"] .oz-timeline-time {
    text-align: left;
    padding-right: 15px;
    padding-left: 0;
}

[dir="rtl"] .oz-timeline-main {
    padding-left: 0;
    padding-right: 15px;
}

/* Fix breadcrumb separator */
[dir="rtl"] .breadcrumb > li + li::before {
    content: "\\";
    padding: 0 5px 0 10px;
}

/* ==========================================================================
   RTL Enhanced Typography & Spacing
   ========================================================================== */

/* Better Arabic Font Rendering - Uses brand fonts from brand.css */
[dir="rtl"] body {
    font-family: var(--font-family, 'IBM Plex Sans Arabic', 'Segoe UI', 'Tahoma', sans-serif) !important;
    letter-spacing: 0 !important;
    word-spacing: 2px !important;
}

/* RTL Headers */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, 
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
    font-family: var(--font-family-heading, 'Cairo', 'IBM Plex Sans Arabic', sans-serif) !important;
    line-height: 1.6 !important;
}

/* RTL Navigation */
[dir="rtl"] .header nav {
    flex-direction: row-reverse;
}

[dir="rtl"] .header nav a {
    font-size: 1.05rem !important;
}

/* RTL Sidebar Icons */
[dir="rtl"] .sidebar li a i,
[dir="rtl"] .left-sidebar li a i {
    margin-left: 12px !important;
    margin-right: 0 !important;
}

/* RTL Card Headers */
[dir="rtl"] .card-head,
[dir="rtl"] .card-header,
[dir="rtl"] .panel-heading {
    flex-direction: row-reverse;
    position: relative;
}

[dir="rtl"] .card-head i,
[dir="rtl"] .card-header i {
    margin-left: 8px !important;
    margin-right: 0 !important;
}

[dir="rtl"] .card .card-head .more {
    position: absolute !important;
    right: auto !important;
    left: 8px !important;
}

/* RTL Site Items */
[dir="rtl"] .site-item,
[dir="rtl"] .site-box,
[dir="rtl"] .url-box {
    text-align: right;
}

[dir="rtl"] .site-item img,
[dir="rtl"] .site-box img {
    margin-left: 16px !important;
    margin-right: 0 !important;
}

/* RTL Search */
[dir="rtl"] .search-box,
[dir="rtl"] .search-form {
    flex-direction: row-reverse;
}

[dir="rtl"] .search-box input,
[dir="rtl"] .search-form input {
    text-align: right;
    border-radius: 0 10px 10px 0 !important;
}

[dir="rtl"] .search-box button,
[dir="rtl"] .search-form button {
    border-radius: 10px 0 0 10px !important;
}

/* RTL Buttons with Icons */
[dir="rtl"] .btn i,
[dir="rtl"] .oz-btn i {
    margin-left: 8px !important;
    margin-right: 0 !important;
}

/* RTL Lists */
[dir="rtl"] .list-group-item,
[dir="rtl"] ul li {
    text-align: right;
}

/* RTL Ranking Numbers */
[dir="rtl"] .ranking-item .number,
[dir="rtl"] .top-item .number,
[dir="rtl"] .rank-num {
    margin-left: 12px !important;
    margin-right: 0 !important;
}

/* RTL Footer */
[dir="rtl"] .footer,
[dir="rtl"] footer {
    text-align: center !important;
}

/* ==========================================================================
   RTL HEADER & LOGO FIX
   ========================================================================== */

/* Make header container a flexbox */
.header .container {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

[dir="rtl"] .header .container {
    flex-direction: row-reverse !important;
    justify-content: flex-start !important;
}

[dir="rtl"] .header .logo {
    order: 2 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

[dir="rtl"] .header .nav {
    order: 1 !important;
    flex-direction: row-reverse !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    float: none !important;
}

[dir="rtl"] .header .nav li {
    margin-left: 0 !important;
    margin-right: 8px !important;
}

[dir="rtl"] .header .nav-bar {
    right: auto !important;
    left: 0 !important;
}

/* ==========================================================================
   RTL MAIN CONTENT & SIDEBAR
   ========================================================================== */

[dir="rtl"] .main {
    float: right !important;
}

[dir="rtl"] .side {
    float: left !important;
    padding-right: 8px !important;
    padding-left: 0 !important;
}

/* ==========================================================================
   RTL CARD HEADERS WITH BUTTONS
   ========================================================================== */

[dir="rtl"] .card .card-head {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
    align-items: center !important;
}

[dir="rtl"] .card .card-head .more,
[dir="rtl"] .card .card-head a.more,
[dir="rtl"] .card-head .oz-btn,
[dir="rtl"] .card-head .btn {
    position: static !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    order: -1 !important;
}

[dir="rtl"] .card .card-head > span:first-child,
[dir="rtl"] .card .card-head > i:first-child {
    order: 1 !important;
}

/* ==========================================================================
   RTL GRIDS AND ITEMS
   ========================================================================== */

[dir="rtl"] .top-grid,
[dir="rtl"] .cate-list,
[dir="rtl"] .card .card-body {
    direction: rtl !important;
}

[dir="rtl"] .top-grid .item,
[dir="rtl"] .cate-list .item {
    text-align: center !important;
}

/* ==========================================================================
   RTL VIEW LIST (Rankings)
   ========================================================================== */

[dir="rtl"] .view-list a {
    flex-direction: row-reverse !important;
}

[dir="rtl"] .view-list a .rank {
    margin-right: 0 !important;
    margin-left: 10px !important;
}

[dir="rtl"] .view-list a .icon {
    margin-right: 0 !important;
    margin-left: 8px !important;
}

[dir="rtl"] .view-list a .name {
    text-align: right !important;
}

[dir="rtl"] .view-list a .view {
    margin-right: 0 !important;
    margin-left: 6px !important;
}

/* ==========================================================================
   RTL ARTICLES / POSTS
   ========================================================================== */

[dir="rtl"] .card .card-body .post {
    flex-direction: row-reverse !important;
}

[dir="rtl"] .card .card-body .post .text {
    margin-left: 0 !important;
    margin-right: 10px !important;
    text-align: right !important;
}

[dir="rtl"] .card .card-body .post .info {
    flex-direction: row-reverse !important;
}

/* ==========================================================================
   RTL TIMELINE (Latest Added)
   ========================================================================== */

[dir="rtl"] .oz-timeline-main {
    text-align: right !important;
}

[dir="rtl"] .oz-timeline-main::before {
    left: auto !important;
    right: 6px !important;
}

[dir="rtl"] .oz-timeline-item {
    padding-left: 0 !important;
    padding-right: 20px !important;
}

[dir="rtl"] .oz-timeline-item::before {
    left: auto !important;
    right: 0 !important;
}

/* ==========================================================================
   RTL BOARD / NOTICE
   ========================================================================== */

[dir="rtl"] .board {
    flex-direction: row-reverse !important;
}

[dir="rtl"] .board .icon {
    margin-right: 0 !important;
    margin-left: 10px !important;
}

[dir="rtl"] .board marquee {
    direction: rtl !important;
}

/* ==========================================================================
   RTL BANNER SEARCH
   ========================================================================== */

[dir="rtl"] .banner-search-form {
    flex-direction: row-reverse;
}

[dir="rtl"] .search-input-group {
    flex-direction: row-reverse;
}

[dir="rtl"] .banner-search-input {
    text-align: right;
}

[dir="rtl"] .banner-search-btn {
    margin-left: 0;
}

@media (max-width: 480px) {
    [dir="rtl"] .search-input-group {
        flex-direction: column-reverse;
    }

    [dir="rtl"] .banner-search-input {
        border-radius: 0 0 8px 8px;
    }

    [dir="rtl"] .banner-search-btn {
        border-radius: 8px 8px 0 0;
    }
}
}

[dir="rtl"] .search-type {
    flex-direction: row-reverse !important;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    [dir="rtl"] {
        direction: rtl;
    }
    
    .lang-switcher,
    .lang-buttons,
    .suspend {
        display: none !important;
    }
}

/* ==========================================================================
   RTL Hero Banner - Advanced Search
   ========================================================================== */

[dir="rtl"] .hero-banner {
    direction: rtl;
}

[dir="rtl"] .hero-title {
    flex-direction: row-reverse;
}

[dir="rtl"] .hero-icon-group {
    flex-direction: row-reverse;
}

[dir="rtl"] .search-input-wrapper {
    flex-direction: row-reverse;
}

[dir="rtl"] .search-icon {
    left: auto;
    right: 18px;
}

[dir="rtl"] .search-input-advanced {
    padding: 16px 50px 16px 50px;
    text-align: right;
}

[dir="rtl"] .search-clear-btn {
    right: auto;
    left: 12px;
}

[dir="rtl"] .search-main-row {
    flex-direction: row-reverse;
}

[dir="rtl"] .search-filters-row {
    flex-direction: row-reverse;
}

[dir="rtl"] .filter-label {
    text-align: right;
}

[dir="rtl"] .filter-buttons {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

[dir="rtl"] .filter-btn {
    flex-direction: row-reverse;
}

[dir="rtl"] .search-quick-links {
    flex-direction: row-reverse;
}

[dir="rtl"] .quick-link {
    flex-direction: row-reverse;
}

[dir="rtl"] .hero-stats {
    flex-direction: row-reverse;
}

@media (max-width: 768px) {
    [dir="rtl"] .search-main-row {
        flex-direction: column;
    }
    
    [dir="rtl"] .search-filters-row {
        flex-direction: column;
    }
    
    [dir="rtl"] .filter-buttons {
        justify-content: center;
        flex-direction: row-reverse;
    }
    
    [dir="rtl"] .search-quick-links {
        flex-direction: row-reverse;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    [dir="rtl"] .quick-label {
        text-align: center;
    }
    
    [dir="rtl"] .hero-stats {
        flex-direction: row-reverse;
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   NEW BOT PAGE RTL SUPPORT
   ========================================================================== */

[dir="rtl"] .bot-breadcrumb {
    flex-direction: row-reverse;
}

[dir="rtl"] .bot-hero-content {
    flex-direction: row-reverse;
}

[dir="rtl"] .verified-badge {
    right: auto;
    left: -5px;
}

[dir="rtl"] .platform-badge {
    left: auto;
    right: -5px;
}

[dir="rtl"] .bot-hero-info {
    text-align: right;
}

[dir="rtl"] .bot-hero-title {
    flex-direction: row-reverse;
}

[dir="rtl"] .bot-hero-meta {
    flex-direction: row-reverse;
}

[dir="rtl"] .bot-hero-rating {
    flex-direction: row-reverse;
}

[dir="rtl"] .bot-hero-rating .rating-text,
[dir="rtl"] .bot-hero-rating .rating-count {
    margin-left: 0;
    margin-right: 5px;
}

[dir="rtl"] .bot-hero-actions {
    flex-direction: row-reverse;
}

[dir="rtl"] .stat-card {
    flex-direction: row-reverse;
}

[dir="rtl"] .stat-content {
    text-align: right;
}

[dir="rtl"] .detail-row {
    flex-direction: row-reverse;
}

[dir="rtl"] .detail-value {
    text-align: right;
}

[dir="rtl"] .tags-cloud {
    justify-content: flex-end;
}

[dir="rtl"] .quick-action-btn i {
    margin-left: 8px;
    margin-right: 0;
}

@media (max-width: 768px) {
    [dir="rtl"] .bot-hero-content {
        flex-direction: column;
        align-items: center;
    }
    
    [dir="rtl"] .bot-hero-info {
        text-align: center;
    }
    
    [dir="rtl"] .bot-hero-title {
        justify-content: center;
    }
    
    [dir="rtl"] .bot-hero-meta {
        justify-content: center;
    }
    
    [dir="rtl"] .bot-hero-actions {
        justify-content: center;
    }
}
