/* ============================================
   BB Docs SaaS - Arabic RTL Stylesheet
   BinaryBridge Inc.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

/* ============================================
   RTL BASE
   ============================================ */
html[dir="rtl"] body {
    font-family: 'IBM Plex Sans Arabic', 'Noto Kufi Arabic', 'DM Sans', sans-serif;
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] * {
    letter-spacing: 0 !important;
}

/* ============================================
   HEADER / NAV
   ============================================ */
html[dir="rtl"] .site-header .container {
    flex-direction: row-reverse;
}

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

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

html[dir="rtl"] .mobile-toggle {
    order: -1;
}

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

/* ============================================
   HERO
   ============================================ */
html[dir="rtl"] .hero::before {
    right: auto;
    left: -20%;
}

html[dir="rtl"] .hero::after {
    left: auto;
    right: -10%;
}

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

/* ============================================
   FEATURE CARDS
   ============================================ */
html[dir="rtl"] .feature-card {
    text-align: right;
}

/* ============================================
   PRICING
   ============================================ */
html[dir="rtl"] .pricing-toggle {
    flex-direction: row-reverse;
}

html[dir="rtl"] .pricing-features li {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .pricing-features li::before {
    margin-left: 0;
}

html[dir="rtl"] .price {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* ============================================
   PORTAL SIDEBAR
   ============================================ */
html[dir="rtl"] .portal-sidebar {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--bb-border);
}

html[dir="rtl"] .portal-main {
    margin-left: 0;
    margin-right: 260px;
}

html[dir="rtl"] .portal-sidebar-nav li a {
    flex-direction: row-reverse;
    text-align: right;
    border-right: none;
}

html[dir="rtl"] .portal-sidebar-nav li a:hover,
html[dir="rtl"] .portal-sidebar-nav li a.active {
    border-right: none;
    border-left: 3px solid var(--bb-red);
}

@media (max-width: 768px) {
    html[dir="rtl"] .portal-main { margin-right: 0; }
}

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

html[dir="rtl"] .form-label {
    text-align: right;
}

/* Email fields stay LTR */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"] {
    direction: ltr;
    text-align: left;
}

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

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

/* ============================================
   FAQ
   ============================================ */
html[dir="rtl"] .faq-question {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .faq-answer-inner {
    text-align: right;
}

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

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

html[dir="rtl"] .footer-col ul {
    padding-right: 0;
}

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

/* ============================================
   GRIDS - Reverse order for RTL
   ============================================ */
html[dir="rtl"] .grid {
    direction: rtl;
}

/* ============================================
   DASHBOARD
   ============================================ */
html[dir="rtl"] .flex-between {
    flex-direction: row-reverse;
}

html[dir="rtl"] .dash-card {
    text-align: right;
}

/* ============================================
   TESTIMONIALS
   ============================================ */
html[dir="rtl"] .testimonial-author {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .testimonial-text {
    text-align: right;
}

/* ============================================
   AUTH PAGES
   ============================================ */
html[dir="rtl"] .auth-card {
    text-align: right;
}

html[dir="rtl"] .auth-card .logo {
    justify-content: center;
}

html[dir="rtl"] .auth-card h2,
html[dir="rtl"] .auth-card .subtitle,
html[dir="rtl"] .auth-footer,
html[dir="rtl"] .auth-divider {
    text-align: center;
}

/* ============================================
   BADGES
   ============================================ */
html[dir="rtl"] .badge {
    flex-direction: row-reverse;
}

/* ============================================
   SECTION HEADERS - keep centered
   ============================================ */
html[dir="rtl"] .section-header {
    text-align: center;
}

html[dir="rtl"] .hero-content {
    text-align: center;
}

/* ============================================
   ALERTS
   ============================================ */
html[dir="rtl"] .alert {
    text-align: right;
}

/* ============================================
   MISC
   ============================================ */
html[dir="rtl"] .text-right {
    text-align: left;
}

html[dir="rtl"] .text-left {
    text-align: right;
}

html[dir="rtl"] [style*="justify-content:flex-start"] {
    justify-content: flex-end !important;
}

/* Progress bars stay LTR */
html[dir="rtl"] [style*="border-radius:3px"] {
    direction: ltr;
}