/* ============================================================
   style-rtl.css — Persian/RTL overrides for AI Agent UI Kit
   Tailwind CSS v4 pre-compiled template
   Font: Vazirmatn (Google Fonts, weights 100–900)
   ============================================================ */

/* ------------------------------------------------------------
   1. FONT IMPORT
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700;800;900&display=swap');


/* ------------------------------------------------------------
   2. BASE FONT & DIRECTION
   ------------------------------------------------------------ */
[dir="rtl"] body,
[dir="rtl"] * {
  font-family: 'Vazirmatn', sans-serif;
}

[dir="rtl"] body {
  direction: rtl;
  text-align: right;
  line-height: 1.8;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
  line-height: 1.6;
  letter-spacing: 0;
}


/* ------------------------------------------------------------
   3. TAILWIND MARGIN FLIPS
   ------------------------------------------------------------ */

/* ml-* → margin-right */
[dir="rtl"] .ml-1 {
  margin-right: 0.25rem !important;
  margin-left: 0 !important;
}

[dir="rtl"] .ml-2 {
  margin-right: 0.5rem !important;
  margin-left: 0 !important;
}

[dir="rtl"] .ml-3 {
  margin-right: 0.75rem !important;
  margin-left: 0 !important;
}

[dir="rtl"] .ml-4 {
  margin-right: 1rem !important;
  margin-left: 0 !important;
}

[dir="rtl"] .ml-5 {
  margin-right: 1.25rem !important;
  margin-left: 0 !important;
}

[dir="rtl"] .ml-6 {
  margin-right: 1.5rem !important;
  margin-left: 0 !important;
}

[dir="rtl"] .ml-7 {
  margin-right: 1.75rem !important;
  margin-left: 0 !important;
}

[dir="rtl"] .ml-8 {
  margin-right: 2rem !important;
  margin-left: 0 !important;
}

[dir="rtl"] .ml-auto {
  margin-right: auto !important;
  margin-left: 0 !important;
}

/* mr-* → margin-left */
[dir="rtl"] .mr-1 {
  margin-left: 0.25rem !important;
  margin-right: 0 !important;
}

[dir="rtl"] .mr-2 {
  margin-left: 0.5rem !important;
  margin-right: 0 !important;
}

[dir="rtl"] .mr-3 {
  margin-left: 0.75rem !important;
  margin-right: 0 !important;
}

[dir="rtl"] .mr-4 {
  margin-left: 1rem !important;
  margin-right: 0 !important;
}

[dir="rtl"] .mr-5 {
  margin-left: 1.25rem !important;
  margin-right: 0 !important;
}

[dir="rtl"] .mr-6 {
  margin-left: 1.5rem !important;
  margin-right: 0 !important;
}

[dir="rtl"] .mr-auto {
  margin-left: auto !important;
  margin-right: 0 !important;
}


/* ------------------------------------------------------------
   4. TAILWIND PADDING FLIPS
   ------------------------------------------------------------ */

/* pl-* → padding-right */
[dir="rtl"] .pl-3 {
  padding-right: 0.75rem !important;
  padding-left: 0 !important;
}

[dir="rtl"] .pl-4 {
  padding-right: 1rem !important;
  padding-left: 0 !important;
}

[dir="rtl"] .pl-6 {
  padding-right: 1.5rem !important;
  padding-left: 0 !important;
}

[dir="rtl"] .pl-10 {
  padding-right: 2.5rem !important;
  padding-left: 0 !important;
}

/* pr-* → padding-left */
[dir="rtl"] .pr-2 {
  padding-left: 0.5rem !important;
  padding-right: 0 !important;
}

[dir="rtl"] .pr-4 {
  padding-left: 1rem !important;
  padding-right: 0 !important;
}

[dir="rtl"] .pr-6 {
  padding-left: 1.5rem !important;
  padding-right: 0 !important;
}

[dir="rtl"] .pr-10 {
  padding-left: 2.5rem !important;
  padding-right: 0 !important;
}


/* ------------------------------------------------------------
   5. BORDER DIRECTIONAL FLIPS
   ------------------------------------------------------------ */

/* border-l-3 (custom Tailwind class for sidebar active indicator) */
[dir="rtl"] [class*="border-l-3"] {
  border-left-style: none !important;
  border-left-width: 0 !important;
  border-right-style: solid !important;
  border-right-width: 3px !important;
}

/* border-r → border-left (sidebar/panel dividers) */
[dir="rtl"] .border-r {
  border-right-width: 0 !important;
  border-left-width: 1px !important;
  border-left-style: solid !important;
}

/* border-l → border-right */
[dir="rtl"] .border-l {
  border-left-width: 0 !important;
  border-right-width: 1px !important;
  border-right-style: solid !important;
}


/* ------------------------------------------------------------
   6. TEXT ALIGNMENT
   ------------------------------------------------------------ */
[dir="rtl"] .text-left {
  text-align: right !important;
}


/* ------------------------------------------------------------
   7. DROPDOWN MENUS (nav)
   ------------------------------------------------------------ */
[dir="rtl"] .dropdown-menu {
  left: auto !important;
  right: 0 !important;
}


/* ------------------------------------------------------------
   8. USER AVATAR DROPDOWN
   ------------------------------------------------------------ */
[dir="rtl"] .origin-top-right.absolute {
  right: auto !important;
  left: 0 !important;
  transform-origin: top left !important;
}


/* ------------------------------------------------------------
   9. LEFT SIDEBAR — RTL FLIP (mobile only)
      On desktop (lg:static) the flex row direction handles it.
   ------------------------------------------------------------ */
[dir="rtl"] aside.z-20 {
  left: auto !important;
  right: 0 !important;
  border-right: none !important;
  border-left: 1px solid;
}

/* Slide to the right when hidden (instead of left) */
[dir="rtl"] aside.z-20.-translate-x-full {
  transform: translateX(100%) !important;
}


/* ------------------------------------------------------------
   10. RIGHT SIDEBAR — RTL FLIP (mobile only, profile.html)
   ------------------------------------------------------------ */
[dir="rtl"] aside.z-40 {
  right: auto !important;
  left: 0 !important;
  border-left: none !important;
  border-right: 1px solid;
}

/* Slide to the left when hidden (instead of right) */
[dir="rtl"] aside.z-40.translate-x-full {
  transform: translateX(-100%) !important;
}


/* ------------------------------------------------------------
   11. HERO DECORATIVE SHAPES (index.html)
   ------------------------------------------------------------ */

/* Keep hero labels in original sides so pointer tips face center */
[dir="rtl"] .floating-1 {
  left: 4rem !important;
  right: auto !important;
}

[dir="rtl"] .floating-2 {
  left: 145px !important;
  right: auto !important;
}

[dir="rtl"] .floating-3 {
  right: 4rem !important;
  left: auto !important;
}

[dir="rtl"] .floating-4 {
  right: 298px !important;
  left: auto !important;
}


/* ------------------------------------------------------------
   12. PASSWORD TOGGLE BUTTON
   ------------------------------------------------------------ */
[dir="rtl"] .relative span.absolute {
  right: auto !important;
  left: 1rem !important;
}


/* ------------------------------------------------------------
   13. MODAL CLOSE BUTTON
   ------------------------------------------------------------ */
[dir="rtl"] .absolute.top-0.right-0.pt-4.pr-4 {
  right: auto !important;
  left: 0 !important;
  padding-right: 0 !important;
  padding-left: 1rem !important;
}


/* ------------------------------------------------------------
   14. PROFILE SALY ILLUSTRATION
   ------------------------------------------------------------ */
[dir="rtl"] img[alt="AI Agent illustration"] {
  right: auto !important;
  left: 1.25rem !important;
}


/* ------------------------------------------------------------
   15. ROUNDED CORNER FLIPS
   ------------------------------------------------------------ */
[dir="rtl"] .rounded-r-xl {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius: 0.75rem !important;
  border-bottom-left-radius: 0.75rem !important;
}

[dir="rtl"] .rounded-l-xl {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 0.75rem !important;
  border-bottom-right-radius: 0.75rem !important;
}


/* ------------------------------------------------------------
   16. RTL-SAFE FORM INPUTS
   ------------------------------------------------------------ */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: right;
  direction: rtl;
}


/* ------------------------------------------------------------
   17. HERO FLOATING CARDS (Cowal legal services)
   ------------------------------------------------------------ */
.hero-fcard {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.5rem;
  padding-inline-start: 0.5rem;
  /* icon side */
  padding-inline-end: 1.5rem;
  /* text side — extra breathing room */
  border-radius: 9999px;
  position: relative;
}

.hero-fcard__icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}

.hero-fcard__text {
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.hero-fcard__pin {
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.08));
  transform-origin: center;
}

/* Purple — تنظیم دادخواست و شکوائیه */
.hero-fcard--purple {
  background-color: rgba(134, 40, 51, 0.12);
}

.hero-fcard--purple .hero-fcard__icon {
  background: linear-gradient(135deg, #862833, #e2bba4);
}

.hero-fcard--purple .hero-fcard__text {
  color: #192a3b;
}

.hero-fcard--purple .hero-fcard__pin {
  color: #862833;
}

html.dark .hero-fcard--purple .hero-fcard__text {
  color: #e2bba4;
}

/* Cyan — مدیریت پرونده */
.hero-fcard--cyan {
  background-color: rgba(25, 42, 59, 0.12);
}

.hero-fcard--cyan .hero-fcard__icon {
  background: linear-gradient(135deg, #192a3b, #e2bba4);
}

.hero-fcard--cyan .hero-fcard__text {
  color: #192a3b;
}

.hero-fcard--cyan .hero-fcard__pin {
  color: #192a3b;
}

html.dark .hero-fcard--cyan .hero-fcard__text {
  color: #e2bba4;
}

/* Coral — تدوین اظهارنامه */
.hero-fcard--coral {
  background-color: rgba(134, 40, 51, 0.12);
}

.hero-fcard--coral .hero-fcard__icon {
  background: linear-gradient(135deg, #862833, #e2bba4);
}

.hero-fcard--coral .hero-fcard__text {
  color: #862833;
}

.hero-fcard--coral .hero-fcard__pin {
  color: #862833;
}

html.dark .hero-fcard--coral .hero-fcard__text {
  color: #e2bba4;
}

/* Amber — مشاوره هوشمند */
.hero-fcard--amber {
  background-color: rgba(226, 187, 164, 0.2);
}

.hero-fcard--amber .hero-fcard__icon {
  background: linear-gradient(135deg, #e2bba4, #862833);
}

.hero-fcard--amber .hero-fcard__text {
  color: #192a3b;
}

.hero-fcard--amber .hero-fcard__pin {
  color: #e2bba4;
}

html.dark .hero-fcard--amber .hero-fcard__text {
  color: #e2bba4;
}

/* Pin (teardrop) anchor positions — narrow attachment overlaps card edge,
   rounded bulb extends outward toward the hero center */
.hero-fcard__pin--br {
  bottom: -10px;
  right: -2px;
  transform: rotate(-90deg);
}

.hero-fcard__pin--bl {
  bottom: -10px;
  left: -2px;
  transform: rotate(0deg);
}

.hero-fcard__pin--tr {
  top: -10px;
  right: -2px;
  transform: rotate(180deg);
}

.hero-fcard__pin--tl {
  top: -10px;
  left: -2px;
  transform: rotate(90deg);
}