/**
 * Aladdin MBTI Theme - RTL Styles
 * 
 * Right-to-Left language support for Arabic
 * 
 * @package Aladdin_MBTI_Theme
 * @version 1.0.0
 * @author Dr. Aladdin Ali <dr.alaa@aladdin.my.id>
 * @copyright 2025 Dr. Aladdin Ali - Aladdin Pertanian Internasional
 */

/* ==========================================================================
   RTL Base Styles
   ========================================================================== */

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

/* Typography */
html[dir="rtl"] body {
    font-family: 'Noto Sans Arabic', 'Source Sans 3', 'Segoe UI', sans-serif;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    font-family: 'Amiri', 'Playfair Display', Georgia, serif;
}

/* ==========================================================================
   Layout Mirroring
   ========================================================================== */

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

/* Margins & Paddings */
html[dir="rtl"] .ms-auto {
    margin-right: auto;
    margin-left: 0;
}

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

/* Text Alignment */
html[dir="rtl"] .text-start {
    text-align: right;
}

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

/* ==========================================================================
   Header RTL
   ========================================================================== */

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

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

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

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

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

/* Mobile Menu */
html[dir="rtl"] .menu-toggle {
    order: -1;
}

html[dir="rtl"] .site-nav.open .nav-menu {
    text-align: right;
}

/* ==========================================================================
   Buttons RTL
   ========================================================================== */

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

html[dir="rtl"] .btn svg {
    margin-left: var(--space-2);
    margin-right: 0;
}

/* Icon Buttons - Flip arrows */
html[dir="rtl"] .btn-icon svg {
    transform: scaleX(-1);
}

/* ==========================================================================
   Forms RTL
   ========================================================================== */

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

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

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

html[dir="rtl"] .form-checkbox input,
html[dir="rtl"] .form-radio input {
    margin-left: var(--space-2);
    margin-right: 0;
}

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

/* ==========================================================================
   Cards RTL
   ========================================================================== */

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

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

/* ==========================================================================
   MBTI Components RTL
   ========================================================================== */

/* Question */
html[dir="rtl"] .mbti-question {
    text-align: right;
}

html[dir="rtl"] .mbti-question-number {
    float: right;
    margin-left: var(--space-4);
    margin-right: 0;
}

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

html[dir="rtl"] .mbti-answer input {
    margin-left: var(--space-3);
    margin-right: 0;
}

/* Dimensions */
html[dir="rtl"] .mbti-dimension-header {
    flex-direction: row-reverse;
}

html[dir="rtl"] .mbti-dimension-fill {
    right: 0;
    left: auto;
    background: linear-gradient(270deg, var(--brand-gold) 0%, var(--brand-green) 100%);
}

/* Profile */
html[dir="rtl"] .mbti-profile-header {
    flex-direction: row-reverse;
}

html[dir="rtl"] .mbti-profile-card::before {
    background: linear-gradient(270deg, var(--brand-gold), var(--brand-green), var(--brand-silver));
}

/* Progress */
html[dir="rtl"] .mbti-progress-fill {
    right: 0;
    left: auto;
    background: linear-gradient(270deg, var(--brand-gold) 0%, var(--brand-green) 100%);
}

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

/* Types Grid */
html[dir="rtl"] .mbti-types-grid {
    direction: rtl;
}

/* Result Summary */
html[dir="rtl"] .mbti-result-summary {
    text-align: right;
}

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

html[dir="rtl"] .mbti-section ul {
    padding-right: var(--space-6);
    padding-left: 0;
}

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

/* ==========================================================================
   TTS Player RTL
   ========================================================================== */

html[dir="rtl"] .tts-player {
    right: auto;
    left: var(--space-6);
}

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

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

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

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

html[dir="rtl"] .tts-slider {
    direction: rtl;
}

/* ==========================================================================
   Footer RTL
   ========================================================================== */

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

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

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

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

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

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

/* ==========================================================================
   Blockquote RTL
   ========================================================================== */

html[dir="rtl"] blockquote {
    border-left: none;
    border-right: 4px solid var(--brand-gold);
    padding-left: var(--space-4);
    padding-right: var(--space-6);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

/* ==========================================================================
   Lists RTL
   ========================================================================== */

html[dir="rtl"] ul,
html[dir="rtl"] ol {
    padding-right: var(--space-6);
    padding-left: 0;
}

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

/* ==========================================================================
   Tables RTL
   ========================================================================== */

html[dir="rtl"] table {
    direction: rtl;
}

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

/* ==========================================================================
   Breadcrumbs RTL
   ========================================================================== */

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

html[dir="rtl"] .breadcrumbs-separator {
    transform: scaleX(-1);
}

/* ==========================================================================
   Pagination RTL
   ========================================================================== */

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

html[dir="rtl"] .pagination-prev svg,
html[dir="rtl"] .pagination-next svg {
    transform: scaleX(-1);
}

/* ==========================================================================
   Modals & Dialogs RTL
   ========================================================================== */

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

html[dir="rtl"] .modal-close {
    right: auto;
    left: var(--space-4);
}

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

/* ==========================================================================
   Notifications RTL
   ========================================================================== */

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

html[dir="rtl"] .notification-icon {
    margin-left: var(--space-3);
    margin-right: 0;
}

html[dir="rtl"] .notification-close {
    right: auto;
    left: var(--space-3);
}

/* ==========================================================================
   Social Share RTL
   ========================================================================== */

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

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

/* ==========================================================================
   Language Switcher RTL
   ========================================================================== */

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

/* ==========================================================================
   Skip Link RTL
   ========================================================================== */

html[dir="rtl"] .skip-link {
    left: auto;
    right: 0;
    border-radius: 0 0 0 var(--radius-md);
}

/* ==========================================================================
   Sidebar RTL
   ========================================================================== */

html[dir="rtl"] .sidebar {
    border-left: none;
    border-right: 1px solid var(--border-light);
}

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

/* ==========================================================================
   Animations RTL
   ========================================================================== */

html[dir="rtl"] .animate-slide-right {
    animation-name: slideLeft;
}

html[dir="rtl"] .animate-slide-left {
    animation-name: slideRight;
}

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================================================
   Responsive RTL
   ========================================================================== */

@media (max-width: 768px) {
    html[dir="rtl"] .tts-player {
        right: var(--space-4);
        left: var(--space-4);
    }
    
    html[dir="rtl"] .footer-grid {
        text-align: center;
    }
    
    html[dir="rtl"] .footer-brand,
    html[dir="rtl"] .footer-nav-title,
    html[dir="rtl"] .footer-nav-list {
        text-align: center;
    }
}

/* ==========================================================================
   Print RTL
   ========================================================================== */

@media print {
    html[dir="rtl"] body {
        direction: rtl;
        text-align: right;
    }
    
    html[dir="rtl"] .mbti-result-summary {
        text-align: right;
    }
}