/*
================================================================================
Sublinur Website - RTL (Right-to-Left) Styles for Arabic
================================================================================
*/

/* ============================================================================
   RTL Base Styles
   ============================================================================ */
[dir="rtl"],
.rtl {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] body,
.rtl body {
    font-family: var(--font-arabic);
}

/* ============================================================================
   Typography RTL
   ============================================================================ */
[dir="rtl"] .text-left,
.rtl .text-left {
    text-align: right;
}

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

/* ============================================================================
   Navigation RTL
   ============================================================================ */
[dir="rtl"] .nav-container,
.rtl .nav-container {
    flex-direction: row-reverse;
}

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

[dir="rtl"] .nav-logo,
.rtl .nav-logo {
    margin-left: auto;
    margin-right: 0;
}

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

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

/* Mobile Menu RTL */
[dir="rtl"] .mobile-menu-toggle,
.rtl .mobile-menu-toggle {
    margin-left: 0;
    margin-right: auto;
}

@media (max-width: 1023px) {
    [dir="rtl"] .nav-menu,
    .rtl .nav-menu {
        right: 0;
        left: auto;
    }
}

/* ============================================================================
   Buttons RTL
   ============================================================================ */
[dir="rtl"] .btn,
.rtl .btn {
    text-align: center;
}

/* Button Groups */
[dir="rtl"] .btn-group,
.rtl .btn-group {
    flex-direction: row-reverse;
}

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

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

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

/* ============================================================================
   Grid & Flex RTL
   ============================================================================ */
[dir="rtl"] .flex-between,
.rtl .flex-between {
    flex-direction: row-reverse;
}

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

/* Preserve column direction for grids */
[dir="rtl"] .flex-column,
.rtl .flex-column {
    flex-direction: column;
}

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

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

/* Checkbox and Radio RTL */
[dir="rtl"] .form-check,
.rtl .form-check {
    padding-left: 0;
    padding-right: 1.5rem;
}

[dir="rtl"] .form-check-input,
.rtl .form-check-input {
    margin-left: 0.5rem;
    margin-right: -1.5rem;
}

/* ============================================================================
   Footer RTL
   ============================================================================ */
[dir="rtl"] .footer-content,
.rtl .footer-content {
    text-align: right;
}

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

[dir="rtl"] .footer-section ul,
.rtl .footer-section ul {
    padding-left: 0;
    padding-right: 0;
}

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

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

/* ============================================================================
   Icons RTL (Flip certain icons)
   ============================================================================ */
[dir="rtl"] .icon-arrow-right,
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-chevron-right,
.rtl .icon-arrow-right,
.rtl .fa-arrow-right,
.rtl .fa-chevron-right {
    transform: scaleX(-1);
}

[dir="rtl"] .icon-arrow-left,
[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-chevron-left,
.rtl .icon-arrow-left,
.rtl .fa-arrow-left,
.rtl .fa-chevron-left {
    transform: scaleX(-1);
}

/* ============================================================================
   Lists RTL
   ============================================================================ */
[dir="rtl"] ul,
[dir="rtl"] ol,
.rtl ul,
.rtl ol {
    padding-left: 0;
    padding-right: 0;
}

[dir="rtl"] li,
.rtl li {
    text-align: right;
}

/* ============================================================================
   Modal RTL
   ============================================================================ */
[dir="rtl"] .modal-content,
.rtl .modal-content {
    text-align: right;
}

[dir="rtl"] .modal-close,
.rtl .modal-close {
    right: auto;
    left: var(--spacing-md);
}

/* ============================================================================
   Toast RTL
   ============================================================================ */
[dir="rtl"] .toast,
.rtl .toast {
    right: auto;
    left: 20px;
}

/* ============================================================================
   Breadcrumb RTL
   ============================================================================ */
[dir="rtl"] .breadcrumb,
.rtl .breadcrumb {
    flex-direction: row-reverse;
}

/* ============================================================================
   Margins & Paddings RTL Adjustments
   ============================================================================ */
/* Margin Right becomes Margin Left in RTL */
[dir="rtl"] .mr-1,
.rtl .mr-1 {
    margin-right: 0;
    margin-left: var(--spacing-sm);
}

[dir="rtl"] .mr-2,
.rtl .mr-2 {
    margin-right: 0;
    margin-left: var(--spacing-md);
}

[dir="rtl"] .mr-3,
.rtl .mr-3 {
    margin-right: 0;
    margin-left: var(--spacing-lg);
}

/* Margin Left becomes Margin Right in RTL */
[dir="rtl"] .ml-1,
.rtl .ml-1 {
    margin-left: 0;
    margin-right: var(--spacing-sm);
}

[dir="rtl"] .ml-2,
.rtl .ml-2 {
    margin-left: 0;
    margin-right: var(--spacing-md);
}

[dir="rtl"] .ml-3,
.rtl .ml-3 {
    margin-left: 0;
    margin-right: var(--spacing-lg);
}

/* Padding adjustments */
[dir="rtl"] .pr-1,
.rtl .pr-1 {
    padding-right: 0;
    padding-left: var(--spacing-sm);
}

[dir="rtl"] .pr-2,
.rtl .pr-2 {
    padding-right: 0;
    padding-left: var(--spacing-md);
}

[dir="rtl"] .pl-1,
.rtl .pl-1 {
    padding-left: 0;
    padding-right: var(--spacing-sm);
}

[dir="rtl"] .pl-2,
.rtl .pl-2 {
    padding-left: 0;
    padding-right: var(--spacing-md);
}

/* ============================================================================
   Specific Components RTL
   ============================================================================ */

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

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

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

/* Features Section RTL */
[dir="rtl"] .features-grid,
.rtl .features-grid {
    direction: rtl;
}

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

/* Products Section RTL */
[dir="rtl"] .products-grid,
.rtl .products-grid {
    direction: rtl;
}

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

[dir="rtl"] .product-info,
.rtl .product-info {
    text-align: right;
}

/* Timeline RTL */
[dir="rtl"] .timeline,
.rtl .timeline {
    direction: rtl;
}

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

/* FAQ RTL */
[dir="rtl"] .faq-question,
.rtl .faq-question {
    text-align: right;
}

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

/* Contact Form RTL */
[dir="rtl"] .contact-form,
.rtl .contact-form {
    direction: rtl;
}

[dir="rtl"] .contact-info,
.rtl .contact-info {
    text-align: right;
}

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

/* ============================================================================
   Tables RTL
   ============================================================================ */
[dir="rtl"] table,
.rtl table {
    direction: rtl;
}

[dir="rtl"] th,
[dir="rtl"] td,
.rtl th,
.rtl td {
    text-align: right;
}

/* ============================================================================
   Blockquote RTL
   ============================================================================ */
[dir="rtl"] blockquote,
.rtl blockquote {
    border-left: none;
    border-right: 4px solid var(--primary-color);
    padding-left: 0;
    padding-right: var(--spacing-md);
}

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

/* ============================================================================
   Tooltip RTL
   ============================================================================ */
[dir="rtl"] .tooltip,
.rtl .tooltip {
    direction: rtl;
    text-align: right;
}

/* ============================================================================
   Scrollbar RTL (for browsers that support it)
   ============================================================================ */
[dir="rtl"] ::-webkit-scrollbar,
.rtl ::-webkit-scrollbar {
    direction: rtl;
}

/* ============================================================================
   Responsive RTL Adjustments
   ============================================================================ */
@media (max-width: 767px) {
    [dir="rtl"] .mobile-menu-toggle,
    .rtl .mobile-menu-toggle {
        order: -1;
    }
    
    [dir="rtl"] .nav-logo,
    .rtl .nav-logo {
        order: 0;
    }
    
    [dir="rtl"] .language-switcher,
    .rtl .language-switcher {
        right: auto;
        left: var(--container-padding);
    }
}

/* ============================================================================
   Numbers in RTL (Keep LTR for numbers)
   ============================================================================ */
[dir="rtl"] .number,
[dir="rtl"] .price,
[dir="rtl"] .date,
.rtl .number,
.rtl .price,
.rtl .date {
    direction: ltr;
    display: inline-block;
}

/* ============================================================================
   Animations RTL
   ============================================================================ */
[dir="rtl"] .animate-on-scroll,
.rtl .animate-on-scroll {
    transform: translateY(30px);
}

[dir="rtl"] .animate-on-scroll.animate-in,
.rtl .animate-on-scroll.animate-in {
    transform: translateY(0);
}

/* Slide animations need to be flipped */
@keyframes slideInRight-rtl {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

[dir="rtl"] .slide-in-right,
.rtl .slide-in-right {
    animation: slideInLeft-rtl 0.5s ease-out;
}

[dir="rtl"] .slide-in-left,
.rtl .slide-in-left {
    animation: slideInRight-rtl 0.5s ease-out;
}

/* ============================================================================
   Print RTL
   ============================================================================ */
@media print {
    [dir="rtl"],
    .rtl {
        direction: rtl;
        text-align: right;
    }
}