﻿/*============================================================================
 RTL (Right to Left) Stylesheet for Watson Template
 This file contains all RTL adjustments without modifying the original CSS
 =============================================================================*/

/* ============ Persian/Arabic Fonts ============ */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');

body { font-family: 'Vazirmatn', "Roboto", sans-serif; }

h1, h2, h3, h4, h5, h6 { font-family: 'Vazirmatn', "Playfair Display", serif; }

/* توجه: جهت صفحه از تگ html (dir="rtl") تامین می‌شود تا با اسکریپت‌ها تداخلی نداشته باشد */

/* ============ Theme Options Menu (انتقال به چپ) ============ */
/* Theme Options: move panel to left, button to panel's right edge (final, fixed radius) */
.theme-options { right: auto !important; left: -180px !important; }
.theme-options.active { right: auto !important; left:0 !important; }
.theme-options .toggle-btn {
 left: auto !important;
 right: -40px !important;
 border-left: none !important;
 border-right:1px solid #d5d5d5 !important;
 border-radius:05px5px0 !important; /* rounded on right side */
}
/* keep inner menu default to avoid double slide */
.theme-options .theme-menu { left: auto; right: auto; }

/* ============ Header & Navigation ============ */
.header-main { left: auto; right:0; border-right: none; border-left:1px solid #202226; }
.header-main nav.nav-menu ul li { text-align: right; }
.header-main nav.nav-menu ul li a { padding-left:0; padding-right:70px; }
.header-main nav.nav-menu ul li a span.nav-menu-icon { left: auto; right:40px; }

/* Mobile Header */
header .header-mobile .header-toggle { float: left; border-left: none; border-right:1px solid #3b3c43; }
@media screen and (max-width:767px) {
 header .header-main { left: auto; right: -200px; }
 header .header-content.on .header-main { left: auto; right:0; }
}

/* ============ Main Content Area (فقط فاصله از سایدبار) ============ */
/* ساختار pt-page و انیمیشن‌ها دست نخورده می‌ماند */
.site-main { left:0; right:200px; }
@media screen and (max-width:767px) { #main { left:0; right:0; } }

/* ============ Page Heading ============ */
.page-heading { text-align: right; }
.page-heading .icon { float: right; margin-left:10px; margin-right:0; }
.page-heading h2 { text-align: right; }
/* .page-heading .icon { float: left; } */

/* ============ Subheading ============ */
.subheading h3:before { left: auto; right:0; }
.subheading h3:after { right: auto; left:0; }

/* ============ Progress Bar ============ */
.progress .progress-bar:after { right: auto; left: -12px; border-left:15px solid transparent; border-right:15px solid transparent; }
.progress .progress-value { right: auto; left:0; }

/* ============ Form Elements ============ */
.input__label { left: auto; right:12px; }
.input__field:focus + .input__label,
.input--filled .input__label { left: auto; right:0; }
input[type="text"], input[type="email"], textarea { direction: rtl; text-align: right; }

/* ============ About Section ============ */
.about-section .about h3,
.about-section .about h2 { text-align: right; }
.about-section .about p { text-align: justify; }
.about-section .about .signature { text-align: right; }
/* .about-section .about .about-info ul li span.title { margin-right:0; margin-left:15px; } */
.about-section .about .about-info ul li span.title:after { right: auto; left: -10px; }

/* ============ Testimonials ============ */
.testimonials .testimonial-item .testimonial-content { padding-left:20px; padding-right:100px; }
.testimonials .testimonial-item .testimonial-content:before { left: auto; right:5%; }
.testimonials .testimonial-item .testimonial-content:after { left: auto; right:15px; transform: translateX(-100%); }
.testimonials .testimonial-item .testimonial-meta { margin-left:0; margin-right:15px; }
.testimonials .testimonial-item .testimonial-meta img { float: right; margin-right:0; margin-left:10px; }

/* ============ Resume Section ============ */
.resume-section .content { text-align: right; }
.resume-section .content h4,
.resume-section .content h5 { text-align: right; }
.resume-section .content .info { text-align: justify; }
/* .resume-section ul.education, .resume-section ul.experience { padding: 0 50px; } */
.resume-section ul.education, .resume-section ul.experience { padding:050px00; }
.resume-section .education .content, .resume-section .experience .content { margin-right:10px; margin-left:0; }
.resume-section ul.education li, .resume-section ul.experience li { margin-right:10px; margin-left:0; }
/* .resume-section ul.education li span.line-left, .resume-section ul.experience li span.line-left { left: auto; right: -10px; } */
/* .resume-section ul.education li span.line-left:before,
.resume-section ul.education li span.line-left:after,
.resume-section ul.experience li span.line-left:before,
.resume-section ul.experience li span.line-left:after { left: auto; right: -4px; } */
.resume-section .education span.year, .resume-section .experience span.year { left: auto; right: -10px; }
.resume-section .education span.year span, .resume-section .experience span.year span { transform: translateX(120%); }
@media screen and (max-width:575px) {
 .resume-section ul.education, .resume-section ul.experience { padding:0; }
 .resume-section ul.education span.year, .resume-section ul.experience span.year { left: auto; right:42px; }
}

/* ============ Portfolio Section ============ */
.portfolio-section .page-heading h2 { text-align: right; }
.portfolio-section .item figure figcaption { text-align: right; }
/* move decorative bar on hover to start from right side */
.portfolio-section .item a figure:after { left: auto; right:25px; transform: translateX(50px); }
.portfolio-section .item a figure:hover:after { transform: translateX(0); }

/* ============ Owl Carousel Direction Fix ============ */
.owl-carousel { direction: ltr; }
.owl-carousel .owl-item { direction: rtl; }

/* ============ Ajax Portfolio (بدون تغییرات ساختاری ترنزیشن) ============ */
/* فقط مکان لودر را برای RTL تنظیم می‌کنیم */
.ajax-portfolio-popup .ajax-loader { left: auto; right: calc(100vw/2 -30px); }

/* ============ Blog Page ============ */
.blog-page .blog-comments .comment-list .comment .author-img { float: right; margin-right:0; margin-left:20px; }
.blog-page .blog-comments .comment-list .comment .comment-text .reply { float: left; }
.blog-page .blog-comments .comment-list .comment .comment-text .reply a { margin-left:0; margin-right:7px; }

/* ============ Blockquote ============ */
blockquote { border-left: none; border-right:4px solid #ffffff; padding-left:0; padding-right:20px; }

/* ============ Social Links ============ */
.header-main .nav-footer .social li { margin-right:0; margin-left:10px; }
.header-main .nav-footer .social li:last-child { margin-left:0; }

/* ============ Signature Image RTL ============ */
.about-section .about .signature { text-align: right; }

/* ============ Responsive Adjustments ============ */
@media screen and (max-width:991px) { .about-section .about-info ul li { text-align: center; } }
.portfolio-section .item figure figcaption {
    right: 0;
    left: auto;
    padding-right: 20px;
    padding-left: 0px;
}
.progress-title {
    text-align: right;
    direction: rtl;
}
.about-section .about .about-info ul li {
  
    text-align: right;
}

    .about-section .about .about-info ul li span.title {
        letter-spacing: 0px;
        margin-left: 15px;
        margin-right: 0;
    }
.about-section .about .about-info .resume-button {
    text-align: right;
}
.testimonials .testimonial-item .testimonial-content p {
    text-align: right;
    direction: rtl;
}
.testimonials .testimonial-item .testimonial-meta .meta-info {
    direction: rtl;
    text-align: right;
}