/* RTL Extended Styles - Additional component-specific RTL fixes
   Applied in conjunction with rtl.css for comprehensive right-to-left support
   Covers hover states, animations, and advanced component positioning
*/

/* ==================== HERO SECTION EXTENDED ==================== */
html[dir="rtl"] .hero-area {
  text-align: right;
}

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

html[dir="rtl"] .hero-social a i {
  margin-right: 0;
  margin-left: 0.5rem;
}

/* ==================== BUTTON HOVER STATES ==================== */
html[dir="rtl"] .theme-btn {
  transition: all 0.3s ease;
}

html[dir="rtl"] .theme-btn:hover {
  transform: translateX(-3px);
}

html[dir="rtl"] .read-more:hover {
  opacity: 0.8;
}

/* ==================== SERVICE CARD HOVER EFFECTS ==================== */
html[dir="rtl"] .service-three-item {
  transition: all 0.5s ease;
}

html[dir="rtl"] .service-three-item:hover .content p {
  color: white;
}

html[dir="rtl"] .service-three-item:hover .read-more {
  color: white;
}

/* ==================== PRICING CARD HOVER EFFECTS ==================== */
html[dir="rtl"] .pricing-plan-item {
  transition: all 0.5s ease;
}

html[dir="rtl"] .pricing-plan-item:hover {
  transform: translateY(-10px);
}

html[dir="rtl"] .pricing-plan-item.popular {
  transform: scale(1.05);
}

/* ==================== BLOG CARD HOVER EFFECTS ==================== */
html[dir="rtl"] .blog-item {
  transition: all 0.5s ease;
}

html[dir="rtl"] .blog-item:hover {
  transform: translateY(-10px);
}

html[dir="rtl"] .blog-item:hover .details-btn {
  opacity: 1;
  visibility: visible;
}

/* ==================== TEAM MEMBER CARD ==================== */
html[dir="rtl"] .team-member {
  text-align: center;
}

html[dir="rtl"] .team-member .content {
  text-align: center;
}

html[dir="rtl"] .team-member:hover .team-social {
  opacity: 1;
  visibility: visible;
}

/* ==================== WORK STEP CARDS ==================== */
html[dir="rtl"] .work-step-item {
  transition: all 0.5s ease;
}

html[dir="rtl"] .work-step-item .step-number {
  font-size: 48px;
  font-weight: 700;
  color: rgba(2, 5, 10, 0.1);
}

html[dir="rtl"] .work-step-item:hover {
  background: var(--wispaar-primary-color);
}

html[dir="rtl"] .work-step-item:hover * {
  color: white;
}

/* ==================== WHY CHOOSE ITEM HOVER ==================== */
html[dir="rtl"] .why-choose-item {
  transition: all 0.5s ease;
}

html[dir="rtl"] .why-choose-item:hover {
  padding-right: 1rem;
}

/* ==================== FLEX DIRECTION FIXES ==================== */
html[dir="rtl"] .d-flex {
  direction: rtl;
}

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

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

html[dir="rtl"] .flex-column {
  flex-direction: column;
}

html[dir="rtl"] .align-items-start {
  align-items: flex-start;
}

html[dir="rtl"] .align-items-end {
  align-items: flex-end;
}

html[dir="rtl"] .align-items-center {
  align-items: center;
}

/* ==================== MARGIN & PADDING ADJUSTMENTS ==================== */

html[dir="rtl"] [style*="margin-right"] {
  margin-right: 115px !important;
}

html[dir="rtl"] [style*="padding-left"] {
  padding-left: 10px !important;
}

html[dir="rtl"] [style*="padding-right"] {
  padding-left: inherit !important;
  padding-right: 0 !important;
}

/* ==================== BORDER FIXES ==================== */
html[dir="rtl"] .border-left {
  border-left: none !important;
  border-right: 1px solid #dee2e6 !important;
}

html[dir="rtl"] .border-right {
  border-right: none !important;
  border-left: 1px solid #dee2e6 !important;
}

/* ==================== ANIMATION DIRECTION ==================== */
html[dir="rtl"] .animated {
  animation-direction: normal;
}

html[dir="rtl"] @-webkit-keyframes slideInLeft {
  from { opacity: 0; transform: translateX(100px); }
  to { opacity: 1; transform: translateX(0); }
}

html[dir="rtl"] @keyframes slideInLeft {
  from { opacity: 0; transform: translateX(100px); }
  to { opacity: 1; transform: translateX(0); }
}

html[dir="rtl"] @-webkit-keyframes slideInRight {
  from { opacity: 0; transform: translateX(-100px); }
  to { opacity: 1; transform: translateX(0); }
}

html[dir="rtl"] @keyframes slideInRight {
  from { opacity: 0; transform: translateX(-100px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ================================================
   MODERN WISPAAR SCROLLBAR (RTL)
   Colors:
   --primary:   #d19d1e
   --secondary: #46007a
   ================================================ */

html[dir="rtl"] {
  --wispaar-primary-color: #d19d1e;
  --wispaar-secondary-color: #46007a;
}

/* Scrollbar width */
html[dir="rtl"] ::-webkit-scrollbar {
  width: 11px;
}

/* Track */
html[dir="rtl"] ::-webkit-scrollbar-track {
  background: linear-gradient(
    180deg,
    rgba(70, 0, 122, 0.95),
    rgba(70, 0, 122, 0.7)
  );
  border-radius: 10px;
  box-shadow: inset 0 0 10px rgba(209, 157, 30, 0.15);
}

/* Thumb */
html[dir="rtl"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(
    135deg,
    rgba(209, 157, 30, 1),
    rgba(209, 157, 30, 0.75)
  );
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: all 0.25s ease;
  box-shadow:
    0 0 6px rgba(209, 157, 30, 0.55),
    0 0 14px rgba(209, 157, 30, 0.35);
}

/* Hover */
html[dir="rtl"] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    135deg,
    rgba(209, 157, 30, 1),
    rgba(255, 225, 150, 0.85)
  );
  transform: scale(1.14);
  box-shadow:
    0 0 12px rgba(209, 157, 30, 0.9),
    0 0 22px rgba(209, 157, 30, 0.6);
}

/* Active */
html[dir="rtl"] ::-webkit-scrollbar-thumb:active {
  background: linear-gradient(
    135deg,
    rgba(209, 157, 30, 1),
    rgba(180, 130, 20, 1)
  );
  transform: scale(0.96);
}

/* Corner */
html[dir="rtl"] ::-webkit-scrollbar-corner {
  background: transparent;
}

/* ==================== GRADIENT FIXES ==================== */
html[dir="rtl"] [style*="linear-gradient"] {
  background-position: right;
}

/* ==================== TEXT SHADOW & EFFECTS ==================== */
html[dir="rtl"] .text-shadow {
  text-shadow: -2px 2px 4px rgba(0, 0, 0, 0.1);
}

/* ==================== RESPONSIVE ADJUSTMENTS ==================== */
@media (max-width: 768px) {
  html[dir="rtl"] .container {
    padding-right: 15px;
    padding-left: 15px;
  }

  html[dir="rtl"] .row {
    margin-right: -15px;
    margin-left: 0;
  }

  html[dir="rtl"] [class*="col-"] {
    padding-right: 15px;
    padding-left: 0;
  }

  html[dir="rtl"] .service-three-item {
    padding: 25px;
  }

  html[dir="rtl"] .pricing-plan-item {
    padding: 25px;
  }

  html[dir="rtl"] .blog-item {
    margin-bottom: 30px;
  }
}

@media (max-width: 480px) {
  html[dir="rtl"] .section-title h2 {
    font-size: 24px;
  }

  html[dir="rtl"] .hero-social {
    flex-direction: column;
    align-items: center;
  }

  html[dir="rtl"] .hero-social a {
    margin: 10px 0;
  }

  html[dir="rtl"] .work-step-item .step-number {
    font-size: 36px;
  }

  html[dir="rtl"] .pricing-plan-item {
    width: 100%;
  }
}

/* ==================== FOCUS & ACCESSIBILITY ==================== */
html[dir="rtl"] button:focus,
html[dir="rtl"] a:focus,
html[dir="rtl"] input:focus,
html[dir="rtl"] textarea:focus {
  outline: 2px solid var(--wispaar-primary-color);
  outline-offset: 2px;
}

html[dir="rtl"] .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==================== LOADING & PLACEHOLDER STATES ==================== */
html[dir="rtl"] .skeleton,
html[dir="rtl"] .placeholder {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==================== SHADOW & DEPTH ==================== */
html[dir="rtl"] .shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

html[dir="rtl"] .shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

html[dir="rtl"] .shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}

/* ==================== BADGE & LABEL ==================== */
html[dir="rtl"] .badge {
  text-align: center;
  padding: 0.25rem 0.5rem;
}

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

/* ==================== END EXTENDED RTL STYLES ==================== */