/*
 * Elraed RTL Frontend Styles
 * Complete RTL transformation for public-facing website
 */

/* ============================
   GLOBAL RTL FOUNDATION
   ============================ */

/* Force RTL direction for everything */
html,
body {
    direction: rtl !important;
    text-align: right !important;
}

/* Set Arabic fonts as primary */
html,
body,
input,
textarea,
select,
button {
    font-family: 'Cairo', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Fix text alignment for RTL */
body,
.site,
.content-area,
.site-content,
.widget-area,
.site-footer {
    direction: rtl !important;
    text-align: right !important;
    background-color: var(--bg-primary);
}

/* ============================
   NAVIGATION & MENUS
   ============================ */

/* Main navigation */
.main-navigation,
.primary-menu,
.menu,
nav,
.nav-menu {
    direction: rtl !important;
}

.main-navigation ul {
    text-align: right !important;
}

.main-navigation li {
    float: right !important;
    margin: 0 0 0 20px !important;
}

.main-navigation a {
    text-align: right !important;
}

/* Dropdown menus */
.main-navigation .sub-menu,
.dropdown-menu {
    left: auto !important;
    right: 0 !important;
    text-align: right !important;
}

.main-navigation .sub-menu .sub-menu {
    left: auto !important;
    right: 100% !important;
}

/* TutorStarter theme specific dropdown fixes */
.menu-item .sub-menu {
    left: auto !important;
    right: 0 !important;
    transform: translateX(0) !important;
}

.menu-item:hover > .sub-menu,
.menu-item:focus-within > .sub-menu {
    left: auto !important;
    right: 0 !important;
}

/* Fix nested dropdown positioning for TutorStarter */
.menu-item .sub-menu > .menu-item .sub-menu {
    left: auto !important;
    right: calc(100% + 14px) !important;
    top: 0 !important;
}

/* Profile menu dropdown fixes */
.tutor-header-profile-menu ul,
.tutor-header-submenu {
    left: 0 !important;
    right: auto !important;
}

.navbar-utils .tutor-header-profile-menu ul {
    right: auto !important;
    left: 0 !important;
}

/* Navbar dropdown positioning */
.navbar-nav .menu-item .sub-menu {
    left: auto !important;
    right: 0 !important;
}

/* TutorStarter specific navbar right positioning fix */
.navbar.navbar-right .menu-item .sub-menu .sub-menu {
    left: auto !important;
    right: calc(100% + 20px) !important;
}

/* Menu arrows for dropdowns */
.main-navigation .menu-item-has-children > a::after,
.dropdown-toggle {
    transform: rotate(180deg) !important;
    float: left !important;
    margin-left: 5px !important;
    margin-right: auto !important;
}

/* Hamburger menu */
.menu-toggle,
.mobile-menu-toggle {
    float: right !important;
}

/* ============================
   LAYOUT & STRUCTURE
   ============================ */

/* Container and wrapper elements */
.container,
.wrap,
.wrapper {
    direction: rtl !important;
}

/* Sidebar positioning */
.sidebar,
.widget-area {
    float: right !important;
    clear: right !important;
    direction: rtl !important;
}

/* Main content area */
.content-area,
.site-main,
.main-content {
    float: left !important;
    clear: left !important;
    direction: rtl !important;
}

/* Two column layouts */
.has-sidebar .content-area {
    margin-left: 0 !important;
    margin-right: 320px !important;
}

/* ============================
   FORMS & INPUTS
   ============================ */

/* Form elements */
input[type="text"],
input[type="search"],
textarea,
select {
    direction: rtl !important;
    text-align: right !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Search forms */
.search-form {
    direction: rtl !important;
}

.search-form input[type="search"] {
    padding-left: 50px !important;
    padding-right: 15px !important;
}

/* Contact forms and form plugins */
.wpcf7-form,
.contact-form,
.form-wrapper {
    direction: rtl !important;
}

.wpcf7-form input,
.wpcf7-form textarea,
.wpcf7-form select {
    text-align: right !important;
}

/* ============================
   BUTTONS & LINKS
   ============================ */

/* Button alignment */
.button,
.btn,
input[type="submit"],
button {
    direction: rtl !important;
    text-align: center !important;
}

/* Button groups */
.button-group,
.btn-group {
    direction: rtl !important;
}

.button-group .button:first-child,
.btn-group .btn:first-child {
    border-radius: 0 4px 4px 0 !important;
}

.button-group .button:last-child,
.btn-group .btn:last-child {
    border-radius: 4px 0 0 4px !important;
}

/* ============================
   CONTENT & TYPOGRAPHY
   ============================ */

/* Text alignment */
h1, h2, h3, h4, h5, h6,
.entry-title,
.post-title,
.page-title {
    text-align: right !important;
    direction: rtl !important;
}

/* Paragraphs and content */
p,
.entry-content,
.post-content,
.page-content,
.content {
    text-align: right !important;
    direction: rtl !important;
}

/* Lists */
ul,
ol {
    padding-left: 0 !important;
    padding-right: 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    direction: rtl !important;
}

li {
    text-align: right !important;
}

/* Blockquotes */
blockquote {
    padding-left: 0 !important;
    padding-right: 20px !important;
    border-left: none !important;
    border-right: 4px solid #ddd !important;
    text-align: right !important;
    direction: rtl !important;
}

/* ============================
   IMAGES & MEDIA
   ============================ */

/* Image alignment */
.alignright {
    float: left !important;
    margin: 0 0 10px 20px !important;
}

.alignleft {
    float: right !important;
    margin: 0 20px 10px 0 !important;
}

.aligncenter {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Caption alignment */
.wp-caption {
    direction: rtl !important;
}

.wp-caption-text {
    text-align: right !important;
}

/* Gallery */
.gallery {
    direction: rtl !important;
}

.gallery-item {
    float: right !important;
}

/* ============================
   WIDGETS & SIDEBAR
   ============================ */

/* Widget containers */
.widget {
    direction: rtl !important;
    text-align: right !important;
}

.widget-title,
.widget h3 {
    text-align: right !important;
}

/* Widget lists */
.widget ul,
.widget ol {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.widget li {
    text-align: right !important;
}

/* Calendar widget */
.widget_calendar table {
    direction: rtl !important;
}

.widget_calendar th,
.widget_calendar td {
    text-align: center !important;
}

/* ============================
   COMMENTS
   ============================ */

/* Comment list */
.comment-list,
.comments-area {
    direction: rtl !important;
}

.comment-body {
    direction: rtl !important;
    text-align: right !important;
}

.comment-author {
    float: right !important;
}

.comment-meta {
    text-align: right !important;
}

/* Comment form */
.comment-form {
    direction: rtl !important;
}

.comment-form input,
.comment-form textarea {
    text-align: right !important;
}

/* Reply links */
.comment-reply-link {
    float: left !important;
}

/* ============================
   FOOTER
   ============================ */

.site-footer,
.footer {
    direction: rtl !important;
    text-align: right !important;
}

.footer-widget {
    direction: rtl !important;
    text-align: right !important;
}

.footer-menu {
    direction: rtl !important;
}

.footer-menu li {
    float: right !important;
    margin: 0 0 0 20px !important;
}

/* ============================
   RESPONSIVE & MOBILE
   ============================ */

/* Mobile menu adjustments */
@media (max-width: 768px) {
    .mobile-menu,
    .responsive-menu {
        direction: rtl !important;
        text-align: right !important;
    }
    
    .mobile-menu li {
        text-align: right !important;
    }
    
    /* Mobile search */
    .mobile-search {
        direction: rtl !important;
    }
    
    /* Mobile sidebar */
    .mobile-sidebar {
        direction: rtl !important;
        text-align: right !important;
    }
}

/* ============================
   PLUGIN COMPATIBILITY
   ============================ */

/* WooCommerce RTL fixes */
.woocommerce,
.woocommerce-page {
    direction: rtl !important;
}

.woocommerce .price,
.woocommerce .amount {
    direction: ltr !important;
    display: inline-block !important;
}

.woocommerce .products li {
    float: right !important;
}

.woocommerce .cart-collaterals {
    direction: rtl !important;
}

/* Elementor RTL fixes */
.elementor-widget,
.elementor-element {
    direction: rtl !important;
}

.elementor-text-editor {
    text-align: right !important;
}

.elementor-button {
    direction: rtl !important;
}

/* Contact Form 7 RTL */
.wpcf7 {
    direction: rtl !important;
}

.wpcf7 input,
.wpcf7 textarea {
    text-align: right !important;
}

/* Gutenberg blocks RTL */
.wp-block {
    direction: rtl !important;
}

.wp-block-paragraph {
    text-align: right !important;
}

.wp-block-heading {
    text-align: right !important;
}

/* ============================
   ADDITIONAL RTL DROPDOWN FIXES
   ============================ */

/* Fix dropdown arrow positioning */
.navbar-nav > .menu-item > .sub-menu:after {
    left: auto !important;
    right: 43px !important;
}

/* Fix submenu arrows and positioning */
.menu-item .sub-menu:before {
    left: auto !important;
    right: 10px !important;
}

.menu-item .sub-menu > .menu-item .sub-menu:before {
    left: auto !important;
    right: -10px !important;
    top: 10px !important;
    border: 5px solid transparent !important;
    border-left-color: #000 !important;
    border-right-color: transparent !important;
}

/* Fix mobile menu positioning */
@media (max-width: 767px) {
    .tutor-header-profile-menu-items .tutor-header-submenu {
        right: auto !important;
        left: -15px !important;
    }
    
    .tutor-header-submenu:before {
        right: auto !important;
        left: 70px !important;
    }
}

/* Fix search field popup positioning */
.search-field-popup form button.close-btn {
    left: 5px !important;
    right: auto !important;
}

/* Fix navbar search field positioning */
.navbar.has-search-field .search-field input[type=search] {
    background-position: right 8px center !important;
    padding-left: 10px !important;
    padding-right: 34px !important;
}

/* Additional TutorStarter Theme RTL Fixes */
.rtl .navbar-nav > .menu-item:not(:last-child) {
    margin-right: 0 !important;
    margin-left: 30px !important;
}

.rtl .navbar-nav > .menu-item.icon > a:before {
    /* left: -8px !important;
    right: auto !important; */
}

.rtl .navbar.navbar-right .menu-item:not(.icon) a:after {
    background: #1950d1 !important;
}

/* Fix user profile submenu in mobile */
@media (max-width: 767px) {
    .rtl .tutor-header-profile-menu-items .tutor-header-submenu {
        right: auto !important;
        left: -15px !important;
    }
    
    .rtl .tutor-header-submenu:before {
        right: auto !important;
        left: 70px !important;
    }
}

/* Fix dropdown menu item icons */
.rtl .navbar-nav .menu-item.icon > a:before {
    left: -5px !important;
    /* right: auto !important;
    margin-left: 5px !important; */
    margin-right: auto !important;
}

/* Fix submenu arrow directions */
.rtl .menu-item .sub-menu > .menu-item .sub-menu:before {
    left: auto !important;
    right: -10px !important;
    border-left-color: #000 !important;
    border-right-color: transparent !important;
}

/* ============================
   THEME-SPECIFIC FIXES
   ============================ */

/* TutorStarter theme specific */
.tutor-course-loop-wrap {
    direction: rtl !important;
}

.tutor-course-loop-wrap .tutor-course {
    text-align: right !important;
}

.tutor-course-header {
    direction: rtl !important;
}

.tutor-course-price {
    float: left !important;
}

.tutor-instructor-info {
    direction: rtl !important;
    text-align: right !important;
}

/* Course pagination */
.tutor-pagination {
    direction: rtl !important;
}

.tutor-pagination .page-numbers {
    float: right !important;
    margin: 0 0 0 5px !important;
}

/* Course ratings */
.tutor-star-rating-group {
    direction: rtl !important;
}

/* ============================
   UTILITIES & HELPERS
   ============================ */

/* RTL utility classes */
.rtl-text-right {
    text-align: right !important;
}

.rtl-text-left {
    text-align: left !important;
}

.rtl-float-right {
    float: right !important;
}

.rtl-float-left {
    float: left !important;
}

.rtl-margin-right {
    margin-left: 0 !important;
    margin-right: 20px !important;
}

.rtl-margin-left {
    margin-right: 0 !important;
    margin-left: 20px !important;
}

.rtl-padding-right {
    padding-left: 0 !important;
    padding-right: 20px !important;
}

.rtl-padding-left {
    padding-right: 0 !important;
    padding-left: 20px !important;
}

/* Clear fix for RTL floats */
.rtl-clearfix::after,
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ============================
   SCROLLBAR RTL
   ============================ */

/* Custom scrollbar for RTL */
html {
    scrollbar-face-color: #f1f1f1;
    scrollbar-track-color: #f1f1f1;
    scrollbar-arrow-color: #666;
    scrollbar-shadow-color: #dfdfdf;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ============================
   ANIMATION ADJUSTMENTS
   ============================ */

/* Slide animations for RTL */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

.slide-in-rtl {
    animation: slideInRight 0.5s ease-out;
}

.slide-in-ltr {
    animation: slideInLeft 0.5s ease-out;
}

/* ============================
   DEBUGGING & VISUAL AIDS
   ============================ */

/* Visual indicator for RTL elements (remove in production) */
body.debug-rtl * {
    outline: 1px dotted rgba(255, 0, 0, 0.3) !important;
}

body.debug-rtl .rtl {
    background: rgba(0, 255, 0, 0.1) !important;
}