/* ============================================================
   RTL STYLES — Proper Arabic / Right-to-Left support
   Loaded only when App::getLocale() == 'ar'
   ============================================================ */

/* ---------- Base ---------- */
body {
  direction: rtl;
  text-align: right;
}

/* ---------- Header / Sidebar ---------- */
.header {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.header .logo h1 {
  text-align: center;
}

.header-toggle {
  right: auto;
  left: 12px;
}

@media (min-width: 1200px) {
  .header ~ main,
  .header ~ #footer {
    margin-left: 0;
    margin-right: 300px;
  }
}

@media (max-width: 1199px) {
  .header {
    left: auto;
    right: -100%;
  }
  .header.header-show {
    left: auto;
    right: 0;
  }
}

/* ---------- Navigation ---------- */
.navmenu a .navicon {
  margin-right: 0;
  margin-left: 10px;
}

.navmenu a .toggle-dropdown {
  margin-left: 0;
  margin-right: auto;
}

.navmenu a::after {
  left: auto;
  right: 10px;
}

.navmenu a:hover::after,
.navmenu .active::after {
  width: calc(100% - 20px);
}

/* ---------- Section Titles ---------- */
[dir="rtl"] .section-title {
  text-align: center;
}
[dir="rtl"] .section-title h2:after {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* ---------- About ---------- */
.about .content ul {
  padding-right: 0;
}

.about .content ul strong {
  margin-right: 0;
  margin-left: 10px;
}

.about .content ul i {
  margin-right: 0;
  margin-left: 5px;
}

/* ---------- Stats ---------- */
.stats .stats-item i {
  float: right;
}

.stats .stats-item .purecounter {
  margin-left: 0;
  margin-right: 60px;
}

.stats .stats-item p {
  margin: 0 60px 0 0;
}

/* ---------- Skills ---------- */
.skills .progress .skill .val {
  float: left;
}

/* ---------- Resume ---------- */
[dir="rtl"] .resume-summary-card {
  text-align: right;
}

[dir="rtl"] .resume-summary-card::before {
  background: linear-gradient(-90deg, var(--accent-color), color-mix(in srgb, var(--accent-color), white 40%));
}

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

[dir="rtl"] .resume-contact-grid {
  justify-content: flex-end;
}

[dir="rtl"] .resume-subsection-header {
  justify-content: flex-start;
  flex-direction: row;
}

[dir="rtl"] .resume-subsection-header .resume-subsection-icon {
  margin-right: 0;
  margin-left: 10px;
}

[dir="rtl"] .resume-timeline-item {
  flex-direction: row;
}

[dir="rtl"] .resume-timeline-item::before {
  left: auto;
  right: 6px;
}

[dir="rtl"] .resume-timeline-item:hover .resume-timeline-content {
  transform: translateX(-4px);
}

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

[dir="rtl"] .resume-timeline-degree,
[dir="rtl"] .resume-timeline-institution,
[dir="rtl"] .resume-timeline-desc {
  text-align: right;
}

[dir="rtl"] .resume-date-badge {
  text-align: right;
}

[dir="rtl"] .resume-timeline-desc ul,
[dir="rtl"] .resume-timeline-desc ol {
  padding-right: 20px;
  padding-left: 0;
  list-style-type: disc;
  list-style-position: outside;
}

[dir="rtl"] .resume-timeline-desc ul ul,
[dir="rtl"] .resume-timeline-desc ol ol,
[dir="rtl"] .resume-timeline-desc ul ol,
[dir="rtl"] .resume-timeline-desc ol ul {
  padding-right: 20px;
  padding-left: 0;
}

[dir="rtl"] .motion-timeline-col::before {
  left: auto;
  right: 8px;
}

/* ---------- Services ---------- */
.services .service-item .icon {
  margin-right: 0;
  margin-left: 20px;
}

/* ---------- Contact ---------- */
.contact .info-item i {
  margin-right: 0;
  margin-left: 15px;
}

.contact .info-item h3,
.contact .info-item p {
  text-align: right;
}

.php-email-form input,
.php-email-form textarea {
  text-align: right;
}

/* ---------- Portfolio ---------- */
.showcase-more i {
  transform: rotate(180deg);
}

.showcase-more:hover {
  gap: 6px;
}

.showcase-more:hover i {
  transform: rotate(180deg) translateX(-4px);
}

.showcase-header {
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 70%, transparent 100%);
  text-align: right;
}

.showcase-btn {
  transform: translateY(20px);
}

.showcase-card:hover .showcase-btn {
  transform: translateY(0);
}

.portfolio-filters li {
  margin: 0;
}

/* ---------- Testimonials ---------- */
.testimonials .testimonial-item p {
  text-align: center;
}

.testimonials .testimonial-item .quote-icon-left {
  left: auto;
  right: -5px;
}

.testimonials .testimonial-item .quote-icon-right {
  right: auto;
  left: -5px;
  transform: scale(1, 1);
}

/* ---------- Footer ---------- */
.footer .copyright,
.footer .credits {
  text-align: center;
}

/* ---------- Page Title ---------- */
.page-title {
  text-align: right;
}

.page-title .breadcrumbs ol {
  padding-right: 0;
  justify-content: flex-start;
}

.page-title .breadcrumbs ol li + li {
  padding-left: 0;
  padding-right: 10px;
}

.page-title .breadcrumbs ol li + li::before {
  padding-right: 0;
  padding-left: 10px;
}

/* ---------- Service Details ---------- */
[dir="rtl"] .service-details .services-list a {
  border-left: none;
  border-right: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
  padding: 8px 15px 8px 0;
}

[dir="rtl"] .service-details .services-list a.active {
  border-color: var(--accent-color);
}

[dir="rtl"] .service-details ul {
  padding-right: 0;
}

[dir="rtl"] .service-details ul i {
  margin-right: 0;
  margin-left: 8px;
}

/* ---------- Service Details - New Template (sd-* classes) ---------- */
[dir="rtl"] .sd-sidebar-header {
  flex-direction: row;
}

[dir="rtl"] .sd-sidebar-header h3 {
  text-align: right;
}

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

[dir="rtl"] .sd-list-item .sd-list-icon {
  margin-right: 0;
  margin-left: auto;
}

[dir="rtl"] .sd-list-arrow {
  transform: scaleX(-1);
}

[dir="rtl"] .sd-list-item:hover .sd-list-arrow,
[dir="rtl"] .sd-list-item.active .sd-list-arrow {
  transform: scaleX(-1) translateX(-3px);
}

[dir="rtl"] .sd-info-header {
  flex-direction: row;
}

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

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

[dir="rtl"] .sd-separator {
  background: linear-gradient(-90deg, var(--accent-color), transparent);
}

[dir="rtl"] .sd-description {
  text-align: right;
}

[dir="rtl"] .sd-description p {
  text-align: right;
}

[dir="rtl"] .sd-features-header {
  flex-direction: row;
}

/* ---------- Service Details Features ---------- */
[dir="rtl"] .sd-features-body ol > li {
  padding: 16px 56px 16px 18px;
  border-left: none;
  border-right: 3px solid var(--accent-color);
  text-align: right;
}

[dir="rtl"] .sd-features-body ol > li::before {
  left: auto;
  right: 14px;
}

[dir="rtl"] .sd-features-body ol > li:hover {
  transform: translateX(-4px);
}

[dir="rtl"] .sd-features-body ul {
  padding-right: 0;
}

[dir="rtl"] .sd-features-body ul > li {
  padding: 12px 44px 12px 16px;
  border-left: none;
  border-right: 3px solid var(--accent-color);
  text-align: right;
  list-style: none;
}

[dir="rtl"] .sd-features-body ul > li::before {
  left: auto;
  right: 12px;
}

[dir="rtl"] .sd-features-body ul > li:hover {
  transform: translateX(-4px);
}

[dir="rtl"] .sd-features-body ul > li p {
  text-align: right;
  margin: 0;
}

/* Fallback: bare <p>/<div> without list wrapper */
[dir="rtl"] .sd-features-body > p,
[dir="rtl"] .sd-features-body > div {
  padding: 12px 44px 12px 16px;
  border-left: none;
  border-right: 3px solid var(--accent-color);
  text-align: right;
}

[dir="rtl"] .sd-features-body > p::before,
[dir="rtl"] .sd-features-body > div::before {
  left: auto;
  right: 12px;
}

[dir="rtl"] .sd-features-body > p:hover,
[dir="rtl"] .sd-features-body > div:hover {
  transform: translateX(-4px);
}

/* ---------- Portfolio Details ---------- */
[dir="rtl"] .portfolio-details .portfolio-info ul {
  padding-right: 0;
}

[dir="rtl"] .gallery-expand {
  right: auto;
  left: 16px;
}

[dir="rtl"] .details-card-header {
  flex-direction: row;
}

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

[dir="rtl"] .detail-value {
  text-align: right;
}

[dir="rtl"] .detail-link {
  flex-direction: row;
  text-align: right;
}

[dir="rtl"] .detail-link:hover i {
  transform: translate(-2px, -2px);
}

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

[dir="rtl"] .desc-title::after {
  left: auto;
  right: 0;
  background: linear-gradient(-90deg, var(--accent-color), transparent);
}

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

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

/* ---------- Breadcrumbs ---------- */
.breadcrumbs ol {
  padding-right: 0;
}

/* ---------- Hero ---------- */
.hero .social-links a {
  margin-right: 0;
  margin-left: 20px;
}

.hero p span {
  border-bottom: 2px solid var(--accent-color);
}

/* ---------- Scroll Top ---------- */
.scroll-top {
  right: auto;
  left: 15px;
}

/* ---------- Nav menu dropdown ---------- */
.navmenu .dropdown ul {
  text-align: right;
}

/* ---------- Alert ---------- */
.alert-dismissible {
  padding-right: 1.25rem;
  padding-left: 4rem;
}

.alert-dismissible .close {
  right: auto;
  left: 0;
}

/* ---------- Portfolio filters in RTL ---------- */
.portfolio .portfolio-filters {
  padding-right: 0;
}

/* ---------- About section in RTL ---------- */
.about-bio-box {
  border-left: none;
  border-right: 3px solid var(--accent-color);
}

.about-bio-box:hover {
  transform: translateX(-4px);
}

.about-bio-signature::before {
  margin-right: 0;
  margin-left: 4px;
}

.about-bio-box::before {
  right: auto;
  left: 0;
}

.about-exp-badge {
  right: auto;
  left: -8px;
  flex-direction: row;
}

.about-cv-btn .about-cv-arrow {
  transform: rotate(180deg);
}

.about-cv-btn:hover .about-cv-arrow {
  transform: rotate(180deg) translateX(-4px);
}

.about-highlight-plus {
  margin-right: 0;
  margin-left: 4px;
}

.about-image-frame .about-image-glow {
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
}
.about-bio-box {
  border-left: none;
  border-right: 3px solid var(--accent-color);
}

.about-bio-box:hover {
  transform: translateX(-3px);
}

.about-info-card:hover .about-info-icon {
  transform: scale(1.05) rotate(5deg);
}

.about-image-shape-1 {
  right: auto;
  left: -20px;
}

.about-image-shape-2 {
  left: auto;
  right: -10px;
}