/* ==================== RTL (Arabic) OVERRIDES ==================== */
/* All rules scoped under html[dir="rtl"] so they only apply in Arabic */

/* ==================== GENERAL ==================== */
html[dir="rtl"] {
    --font-sans: 'Segoe UI', Tahoma, 'Noto Sans Arabic', 'Droid Arabic Kufi', 'Cairo', Geneva, Verdana, sans-serif;
    --text-2xs: clamp(0.5625rem, 0.9vw, 0.625rem);
    --text-xs: clamp(0.625rem, 1vw, 0.6875rem);
    --text-sm: clamp(0.6875rem, 1.1vw, 0.8125rem);
    --text-base: clamp(0.8125rem, 1.3vw, 0.9375rem);
    --text-lg: clamp(0.9375rem, 1.5vw, 1.0625rem);
    --text-xl: clamp(1.0625rem, 1.7vw, 1.1875rem);
    --text-2xl: clamp(1.1875rem, 1.9vw, 1.3125rem);
    --text-3xl: clamp(1.3125rem, 2.1vw, 1.5rem);
    --text-4xl: clamp(1.6rem, 3.5vw, 2rem);
    --text-section: clamp(1.3125rem, 2.1vw, 1.5rem);
    --weight-hero: 700;
    --weight-heading: 700;
    --weight-title: 600;
    --weight-subtitle: 500;
}

html[dir="rtl"] body {
    font-family: 'Segoe UI', Tahoma, 'Noto Sans Arabic', 'Droid Arabic Kufi', 'Cairo', Geneva, Verdana, sans-serif;
    text-align: right;
}

/* ==================== MASTER / HEADER / FOOTER ==================== */

/* Top Utility Bar */
html[dir="rtl"] .utility-items {
    padding-right: 0;
    padding-left: clamp(1rem, 3vw, 2.5rem);
}

html[dir="rtl"] .search-box {
    margin-left: 0;
    margin-right: var(--spacing-sm);
}

/* Utility Profile Dropdown */
html[dir="rtl"] .dropdown-toggle-utility::after {
    margin-left: 0;
    margin-right: var(--spacing-xs);
}

html[dir="rtl"] .utility-dropdown-menu {
    right: auto;
    left: 0;
}

html[dir="rtl"] .utility-nav-link::before {
    left: auto;
    right: 0;
}

html[dir="rtl"] .utility-nav-link:hover {
    padding-left: clamp(0.75rem, 1.4vw, 0.9375rem);
    padding-right: calc(1rem + 0.5rem);
}

html[dir="rtl"] .utility-nav-link i,
html[dir="rtl"] .utility-nav-link .fa,
html[dir="rtl"] .utility-nav-link .fas {
    margin-right: 0;
    margin-left: clamp(0.75rem, 1.2vw, 1rem);
}

html[dir="rtl"] .utility-logout:hover {
    padding-left: clamp(0.75rem, 1.4vw, 0.9375rem) !important;
    padding-right: calc(1rem + 0.5rem) !important;
}

html[dir="rtl"] .utility-logout::before {
    left: auto !important;
    right: 0 !important;
}

/* Main Header */
html[dir="rtl"] .header-content {
    padding: 0 clamp(1.5rem, 3.5vw, 3rem) 0 0;
}

html[dir="rtl"] .main-nav {
    padding-left: 0;
    padding-right: 15px;
}

/* Navigation Dropdowns */
html[dir="rtl"] .nav-item.has-dropdown > .nav-link::after {
    margin-left: 0;
    margin-right: 5px;
}

html[dir="rtl"] .dropdown-menu-custom {
    left: auto;
    right: 0;
}

html[dir="rtl"] .dropdown-menu-custom .dropdown-item i {
    margin-right: 0;
    margin-left: var(--spacing-sm);
}

/* Mobile Menu */
html[dir="rtl"] .mobile-submenu {
    padding-left: 0;
    padding-right: var(--spacing-lg);
}

html[dir="rtl"] .mobile-menu .nav-item.has-dropdown > .nav-link::after {
    margin-left: 0;
    margin-right: var(--spacing-sm);
    float: left;
}

html[dir="rtl"] .menu-loading i {
    margin-right: 0;
    margin-left: var(--spacing-sm);
}

/* Header Right */
html[dir="rtl"] .header-right {
    padding-right: 0;
    margin-right: 0;
    padding-left: 0;
    margin-left: 0;
}

html[dir="rtl"] .right-logo-container {
    margin-left: 0;
    margin-right: var(--spacing-lg);
}

html[dir="rtl"] .right-logo-container .right-logo {
    transform: scaleX(-1);
}

/* Mobile Menu Panel - slide from left in RTL */
html[dir="rtl"] .mobile-menu {
    right: auto;
    left: -100%;
    box-shadow: 0.125rem 0 0.625rem rgba(0, 0, 0, 0.15), 0.25rem 0 1.25rem rgba(0, 0, 0, 0.1);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html[dir="rtl"] .mobile-menu.active {
    right: auto;
    left: 0;
}

html[dir="rtl"] .mobile-menu-close {
    right: auto;
    left: var(--spacing-lg);
}

html[dir="rtl"] .mobile-submenu .submenu-link {
    padding: clamp(0.75rem, 1.2vw, 0.875rem) clamp(1.5rem, 2.5vw, 2rem) clamp(0.75rem, 1.2vw, 0.875rem) 0;
}

html[dir="rtl"] .mobile-submenu .submenu-link:active {
    padding-left: 0;
    padding-right: clamp(1.75rem, 3vw, 2.25rem);
}

/* Notification Badge */
html[dir="rtl"] .notification-badge {
    right: auto;
    left: -8px;
}

/* Notification Dropdown */
html[dir="rtl"] .utility-notification-menu {
    right: auto;
    left: 0;
}

/* Language Dropdown */
html[dir="rtl"] .language-toggle::after {
    margin-left: 0;
    margin-right: 4px;
}

html[dir="rtl"] .utility-language-menu {
    right: auto;
    left: 0;
}

html[dir="rtl"] .language-option:hover {
    padding-left: 16px;
    padding-right: 20px;
}

/* ==================== FOOTER ==================== */
html[dir="rtl"] .footer-label {
    margin-right: 0;
}

/* ==================== HOMEPAGE ==================== */

/* Service Link Arrow */
html[dir="rtl"] .service-link:hover i {
    transform: translateX(-0.15rem);
}

/* Guide Card Left Border */
html[dir="rtl"] .guide-card::before {
    left: auto;
    right: 0;
}

/* View All Button Arrow */
html[dir="rtl"] .btn-view-all i {
    transform: scaleX(-1);
}

html[dir="rtl"] .btn-view-all:hover i {
    transform: scaleX(-1) translateX(4px);
}

/* ==================== LOGIN PAGE ==================== */

/* Alert border */
html[dir="rtl"] .alert {
    border-left: none;
    border-right: 4px solid;
}

html[dir="rtl"] .alert-error {
    border-right-color: #ef4444;
}

html[dir="rtl"] .alert-success {
    border-right-color: #22c55e;
}

html[dir="rtl"] .alert-warning {
    border-right-color: #f59e0b;
}

html[dir="rtl"] .alert-info {
    border-right-color: #3b82f6;
}

html[dir="rtl"] .alert-close {
    margin-left: 0;
    margin-right: auto;
}

/* Login form icon positioning */
html[dir="rtl"] .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-form .input-group i {
    left: auto;
    right: clamp(1rem, 2vw, 1.25rem);
}

html[dir="rtl"] .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-form .form-control {
    padding-left: clamp(1rem, 2vw, 1.25rem);
    padding-right: clamp(3rem, 5.5vw, 3.5rem);
}

/* Login select dropdown arrow */
html[dir="rtl"] .kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-form .input-group select.form-control {
    background-position: left clamp(1rem, 2vw, 1.25rem) center;
    padding-right: clamp(3rem, 5.5vw, 3.5rem);
    padding-left: clamp(2.75rem, 5.5vw, 3.25rem);
}

/* Validation error padding */
html[dir="rtl"] .validation-error {
    padding-left: 0;
    padding-right: clamp(0.5rem, 1vw, 0.75rem);
}

/* ==================== QUESTIONNAIRE ==================== */

/* Toast animations for RTL - override the default direction */
@keyframes slideInRtl {
    from {
        transform: translateX(-25rem);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRtl {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-25rem);
        opacity: 0;
    }
}

html[dir="rtl"] .toast-notification {
    animation-name: slideInRtl;
}

html[dir="rtl"] .toast-notification.toast-hiding {
    animation-name: slideOutRtl;
}

/* Dynamic response hover */
html[dir="rtl"] .dynamic-response-option:hover {
    transform: translateX(-0.125rem);
}

/* Radio/Checkbox margin */
html[dir="rtl"] .dynamic-response-option .form-check-input {
    margin-right: 0;
    margin-left: var(--spacing-md);
}

/* Alert warning icon */
html[dir="rtl"] .alert-warning i {
    margin-right: 0;
    margin-left: var(--spacing-sm);
}

/* Next button */
html[dir="rtl"] .btn-next {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] .btn-next i {
    transform: scaleX(-1);
}

/* Service arrow */
html[dir="rtl"] .service-card:hover .service-arrow {
    transform: translateX(-0.2rem);
}

html[dir="rtl"] .service-arrow {
    transform: scaleX(-1);
}

/* ==================== MY TASKS ==================== */

/* Active filters */
html[dir="rtl"] .active-filters-display {
    border-left: none;
    border-right: 4px solid var(--primary-blue);
}

html[dir="rtl"] .filters-label {
    margin-right: 0;
    margin-left: var(--spacing-xs);
}

html[dir="rtl"] .help-icon {
    margin-left: 0;
    margin-right: var(--spacing-xs);
}

/* Button icons */
html[dir="rtl"] .btn-primary::before {
    left: auto;
    right: clamp(0.75rem, 1.5vw, 1rem);
}

html[dir="rtl"] .btn-secondary::before {
    left: auto;
    right: clamp(0.75rem, 1.5vw, 1rem);
}

html[dir="rtl"] .btn-primary,
html[dir="rtl"] .btn-secondary {
    padding-left: var(--btn-padding-sm);
    padding-right: clamp(2rem, 3.5vw, 2.5rem);
}

/* Grid focused row */
html[dir="rtl"] .grid-focused-row {
    border-left: none !important;
    border-right: 3px solid var(--primary-blue) !important;
}

/* ==================== CONTENT CATEGORY ==================== */

html[dir="rtl"] .content-card-new-badge {
    margin-left: 0;
    margin-right: 0.5rem;
}

html[dir="rtl"] .content-view-link:hover {
    transform: translateX(-4px);
}

html[dir="rtl"] .content-modal-header-content {
    padding-right: 0;
    padding-left: 1rem;
}

/* ==================== USEFUL GUIDES ==================== */

/* Filter select dropdown arrow */
html[dir="rtl"] .filter-select {
    background-position: left 1rem center;
    padding-right: clamp(1rem, 1.8vw, 1.25rem);
    padding-left: 2.5rem;
}

/* Checkboxes */
html[dir="rtl"] .select-all-checkbox {
    margin-right: 0;
    margin-left: 0.75rem;
}

html[dir="rtl"] .multi-select-option input[type="checkbox"] {
    margin-right: 0;
    margin-left: 0.75rem;
}

html[dir="rtl"] .multi-select-btn i {
    margin-left: 0;
    margin-right: 0.5rem;
}

/* Guide view link */
html[dir="rtl"] .guide-view-link:hover {
    transform: translateX(-4px);
}

html[dir="rtl"] .guide-modal-header-content {
    padding-right: 0;
    padding-left: 1rem;
}

/* Select2 RTL compatibility */
html[dir="rtl"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    margin: 0.25rem 0 0.25rem 0.25rem !important;
}

html[dir="rtl"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* ==================== SIGNUP PAGE ==================== */

/* Required label asterisk */
html[dir="rtl"] .kt-form label.required::after {
    margin-left: 0;
    margin-right: 2px;
}

/* Date picker icon positioning */
html[dir="rtl"] .kt-form .form-group .input-group:has(.dxeButtonEdit) i {
    left: auto;
    right: clamp(1rem, 2vw, 1.25rem);
}

html[dir="rtl"] .kt-form .form-group .input-group .dxeButtonEdit {
    padding-left: clamp(1rem, 2vw, 1.25rem) !important;
    padding-right: clamp(3rem, 5.5vw, 3.5rem) !important;
}

/* ==================== TOAST ==================== */

html[dir="rtl"] .toast-container {
    right: auto;
    left: clamp(1rem, 2vw, 1.5rem);
}

html[dir="rtl"] .toast-notification {
    border-left: none;
    border-right: 0.25rem solid var(--primary-blue, #3E74D2);
    animation-name: slideInRtl;
}

html[dir="rtl"] .toast-notification.toast-error {
    border-right-color: #DC2626;
    border-left-color: transparent;
}

html[dir="rtl"] .toast-notification.toast-success {
    border-right-color: #10B981;
    border-left-color: transparent;
}

html[dir="rtl"] .toast-notification.toast-warning {
    border-right-color: #F59E0B;
    border-left-color: transparent;
}

html[dir="rtl"] .toast-notification.toast-info {
    border-right-color: #3B82F6;
    border-left-color: transparent;
}

/* ==================== CLOSE BUTTON (MODAL) ==================== */
html[dir="rtl"] .btn-close-custom {
    right: auto;
    left: 20px;
}

/* ==================== FONT AWESOME ARROWS ==================== */
/* Flip all arrow icons that indicate direction */
html[dir="rtl"] .fa-arrow-right::before {
    content: "\f060"; /* fa-arrow-left */
}

html[dir="rtl"] .fa-arrow-left::before {
    content: "\f061"; /* fa-arrow-right */
}

html[dir="rtl"] .fa-chevron-right::before {
    content: "\f053"; /* fa-chevron-left */
}

html[dir="rtl"] .fa-chevron-left::before {
    content: "\f054"; /* fa-chevron-right */
}

html[dir="rtl"] .fa-angle-right::before {
    content: "\f104"; /* fa-angle-left */
}

html[dir="rtl"] .fa-angle-left::before {
    content: "\f105"; /* fa-angle-right */
}

html[dir="rtl"] .fa-external-link-alt::before {
    transform: scaleX(-1);
}

/* ==================== SWIPER (HERO SLIDER) ==================== */
html[dir="rtl"] .swiper {
    direction: rtl;
}

/* ==================== RESPONSIVE RTL OVERRIDES ==================== */

/* Large Desktop */
@media (max-width: 1400px) {
    html[dir="rtl"] .header-content {
        padding: 0 clamp(1.5rem, 2.5vw, 1.875rem) 0 0;
    }

    html[dir="rtl"] .utility-items {
        padding-left: clamp(1.5rem, 2.5vw, 1.875rem);
        padding-right: 0;
    }

    html[dir="rtl"] .main-nav {
        padding-left: 0;
        padding-right: 0.9375rem;
    }
}

/* Desktop */
@media (max-width: 1200px) {
    html[dir="rtl"] .header-content {
        padding: 0 clamp(1rem, 2vw, 1.25rem) 0 0;
    }

    html[dir="rtl"] .utility-items {
        padding-left: clamp(1rem, 2vw, 1.25rem);
        padding-right: 0;
    }

    html[dir="rtl"] .main-nav {
        padding-left: 0;
        padding-right: 0.9375rem;
    }
}

/* Tablet Landscape */
@media (max-width: 991px) {
    html[dir="rtl"] .header-content {
        padding: 0 clamp(0.75rem, 1.5vw, 0.9375rem) 0 0;
    }

    html[dir="rtl"] .utility-items {
        padding-left: clamp(0.75rem, 1.5vw, 0.9375rem);
        padding-right: 0;
    }

    html[dir="rtl"] .header-right {
        padding-left: clamp(0.75rem, 1.5vw, 0.9375rem);
        padding-right: 0;
    }

    html[dir="rtl"] .search-box {
        margin-right: clamp(0.5rem, 1vw, 0.625rem);
        margin-left: 0;
    }

    html[dir="rtl"] .utility-dropdown-menu {
        left: clamp(-0.5rem, -1vw, 0);
        right: auto;
    }
}

/* Tablet Portrait */
@media (max-width: 768px) {
    html[dir="rtl"] .header-content {
        padding: 0 clamp(0.5rem, 1vw, 0.625rem) 0 0;
    }

    html[dir="rtl"] .utility-items {
        padding-left: clamp(0.5rem, 1vw, 0.625rem);
        padding-right: 0;
    }

    html[dir="rtl"] .header-right {
        padding-left: clamp(0.5rem, 1vw, 0.625rem);
        padding-right: 0;
    }
}

/* Mobile */
@media (max-width: 576px) {
    html[dir="rtl"] .utility-items {
        padding-left: clamp(0.5rem, 1vw, 0.625rem);
        padding-right: 0;
    }

    html[dir="rtl"] .header-right {
        padding-left: clamp(0.5rem, 1vw, 0.625rem);
        padding-right: 0;
    }

    html[dir="rtl"] .toast-container {
        left: var(--spacing-sm);
        right: var(--spacing-sm);
    }

    html[dir="rtl"] .utility-notification-menu {
        right: auto;
        left: -10px;
    }

    html[dir="rtl"] .utility-dropdown-menu {
        left: clamp(-0.75rem, -1.5vw, -0.5rem);
        right: auto;
    }
}

/* Extra Small Mobile */
@media (max-width: 400px) {
    html[dir="rtl"] .header-content {
        padding: 0 clamp(0.375rem, 0.8vw, 0.5rem) 0 0;
    }
}

/* ==================== BOOTSTRAP RTL HELPERS ==================== */
/* Override Bootstrap margin/padding utilities that are directional */
html[dir="rtl"] .ms-1 { margin-right: 0.25rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-2 { margin-right: 0.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-3 { margin-right: 1rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; }
html[dir="rtl"] .me-1 { margin-left: 0.25rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-2 { margin-left: 0.5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-3 { margin-left: 1rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-auto { margin-left: auto !important; margin-right: 0 !important; }
html[dir="rtl"] .ps-1 { padding-right: 0.25rem !important; padding-left: 0 !important; }
html[dir="rtl"] .ps-2 { padding-right: 0.5rem !important; padding-left: 0 !important; }
html[dir="rtl"] .ps-3 { padding-right: 1rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pe-1 { padding-left: 0.25rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pe-2 { padding-left: 0.5rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pe-3 { padding-left: 1rem !important; padding-right: 0 !important; }

/* Text alignment */
html[dir="rtl"] .text-start { text-align: right !important; }
html[dir="rtl"] .text-end { text-align: left !important; }

/* Float */
html[dir="rtl"] .float-start { float: right !important; }
html[dir="rtl"] .float-end { float: left !important; }

/* Border */
html[dir="rtl"] .border-start { border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; border-left: 0 !important; }
html[dir="rtl"] .border-end { border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; border-right: 0 !important; }

