/* =====================================================================
   rtl.css — SpotlightEcom
   শুধু [dir="rtl"] থাকলেই কার্যকর। LTR-এ কোনো প্রভাব নেই।
   তাই ইংরেজি সাইট ১০০% অক্ষত থাকে।

   Tailwind CDN ব্যবহার করায় বিল্ড স্টেপ নেই — তাই এই ফাইলে
   হাতে লিখে directional utility গুলো উল্টানো হয়েছে।
   ===================================================================== */

/* ---------- ১) আরবি ফন্ট ---------- */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

[dir="rtl"] body,
[dir="rtl"] .font-sans {
  font-family: 'Tajawal', 'Inter', 'IBM Plex Sans', sans-serif;
}

/* আরবিতে Tajawal-এর x-height ছোট, তাই সামান্য বড় করা */
[dir="rtl"] body { font-size: 1.02em; line-height: 1.7; }

/* ---------- ২) টেক্সট অ্যালাইনমেন্ট ---------- */
[dir="rtl"] .text-left  { text-align: right !important; }
[dir="rtl"] .text-right { text-align: left  !important; }

/* ---------- ৩) মার্জিন উল্টানো ---------- */
[dir="rtl"] .ml-0   { margin-left: 0; margin-right: 0; }
[dir="rtl"] .ml-1   { margin-left: 0; margin-right: .25rem; }
[dir="rtl"] .ml-2   { margin-left: 0; margin-right: .5rem; }
[dir="rtl"] .ml-3   { margin-left: 0; margin-right: .75rem; }
[dir="rtl"] .ml-4   { margin-left: 0; margin-right: 1rem; }
[dir="rtl"] .ml-5   { margin-left: 0; margin-right: 1.25rem; }
[dir="rtl"] .ml-6   { margin-left: 0; margin-right: 1.5rem; }
[dir="rtl"] .ml-8   { margin-left: 0; margin-right: 2rem; }
[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }

[dir="rtl"] .mr-0   { margin-right: 0; margin-left: 0; }
[dir="rtl"] .mr-1   { margin-right: 0; margin-left: .25rem; }
[dir="rtl"] .mr-2   { margin-right: 0; margin-left: .5rem; }
[dir="rtl"] .mr-3   { margin-right: 0; margin-left: .75rem; }
[dir="rtl"] .mr-4   { margin-right: 0; margin-left: 1rem; }
[dir="rtl"] .mr-5   { margin-right: 0; margin-left: 1.25rem; }
[dir="rtl"] .mr-6   { margin-right: 0; margin-left: 1.5rem; }
[dir="rtl"] .mr-8   { margin-right: 0; margin-left: 2rem; }
[dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; }

/* ---------- ৪) প্যাডিং উল্টানো ---------- */
[dir="rtl"] .pl-0   { padding-left: 0; padding-right: 0; }
[dir="rtl"] .pl-1   { padding-left: 0; padding-right: .25rem; }
[dir="rtl"] .pl-2   { padding-left: 0; padding-right: .5rem; }
[dir="rtl"] .pl-3   { padding-left: 0; padding-right: .75rem; }
[dir="rtl"] .pl-4   { padding-left: 0; padding-right: 1rem; }
[dir="rtl"] .pl-5   { padding-left: 0; padding-right: 1.25rem; }
[dir="rtl"] .pl-6   { padding-left: 0; padding-right: 1.5rem; }
[dir="rtl"] .pl-8   { padding-left: 0; padding-right: 2rem; }
[dir="rtl"] .pl-10  { padding-left: 0; padding-right: 2.5rem; }
[dir="rtl"] .pl-12  { padding-left: 0; padding-right: 3rem; }

[dir="rtl"] .pr-0   { padding-right: 0; padding-left: 0; }
[dir="rtl"] .pr-1   { padding-right: 0; padding-left: .25rem; }
[dir="rtl"] .pr-2   { padding-right: 0; padding-left: .5rem; }
[dir="rtl"] .pr-3   { padding-right: 0; padding-left: .75rem; }
[dir="rtl"] .pr-4   { padding-right: 0; padding-left: 1rem; }
[dir="rtl"] .pr-5   { padding-right: 0; padding-left: 1.25rem; }
[dir="rtl"] .pr-6   { padding-right: 0; padding-left: 1.5rem; }
[dir="rtl"] .pr-8   { padding-right: 0; padding-left: 2rem; }
[dir="rtl"] .pr-10  { padding-right: 0; padding-left: 2.5rem; }
[dir="rtl"] .pr-12  { padding-right: 0; padding-left: 3rem; }

/* ---------- ৫) absolute পজিশন উল্টানো ---------- */
[dir="rtl"] .left-0   { left: auto; right: 0; }
[dir="rtl"] .left-1   { left: auto; right: .25rem; }
[dir="rtl"] .left-2   { left: auto; right: .5rem; }
[dir="rtl"] .left-3   { left: auto; right: .75rem; }
[dir="rtl"] .left-4   { left: auto; right: 1rem; }

[dir="rtl"] .right-0  { right: auto; left: 0; }
[dir="rtl"] .right-1  { right: auto; left: .25rem; }
[dir="rtl"] .right-2  { right: auto; left: .5rem; }
[dir="rtl"] .right-3  { right: auto; left: .75rem; }
[dir="rtl"] .right-4  { right: auto; left: 1rem; }

/* ---------- ৬) বর্ডার উল্টানো ---------- */
[dir="rtl"] .border-l  { border-left-width: 0; border-right-width: 1px; }
[dir="rtl"] .border-r  { border-right-width: 0; border-left-width: 1px; }
[dir="rtl"] .border-l-2 { border-left-width: 0; border-right-width: 2px; }
[dir="rtl"] .border-r-2 { border-right-width: 0; border-left-width: 2px; }
[dir="rtl"] .border-l-4 { border-left-width: 0; border-right-width: 4px; }
[dir="rtl"] .border-r-4 { border-right-width: 0; border-left-width: 4px; }

/* ---------- ৭) গোল কোণা উল্টানো ---------- */
[dir="rtl"] .rounded-l-lg {
  border-radius: 0 .5rem .5rem 0;
}
[dir="rtl"] .rounded-r-lg {
  border-radius: .5rem 0 0 .5rem;
}
[dir="rtl"] .rounded-tl-lg { border-radius: 0; border-top-right-radius: .5rem; }
[dir="rtl"] .rounded-tr-lg { border-radius: 0; border-top-left-radius: .5rem; }

/* ---------- ৮) ফ্লেক্স দিক ---------- */
[dir="rtl"] .flex-row         { flex-direction: row-reverse; }
[dir="rtl"] .flex-row-reverse { flex-direction: row; }

/* space-x Tailwind-এ margin দিয়ে হয়, তাই উল্টাতে হয় */
[dir="rtl"] .space-x-1 > :not([hidden]) ~ :not([hidden]),
[dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden]),
[dir="rtl"] .space-x-3 > :not([hidden]) ~ :not([hidden]),
[dir="rtl"] .space-x-4 > :not([hidden]) ~ :not([hidden]),
[dir="rtl"] .space-x-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
}

/* ---------- ৯) আইকন মিরর ---------- */
/* তীর চিহ্ন RTL-এ উল্টো দিকে দেখাতে হয় */
[dir="rtl"] .rtl-flip,
[dir="rtl"] .material-symbols-outlined.rtl-flip {
  transform: scaleX(-1);
}

/* ---------- ১০) ইনপুট ---------- */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: right;
}

/* ফোন নম্বর, ইমেইল, দাম — সবসময় LTR */
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="url"],
[dir="rtl"] .force-ltr {
  direction: ltr;
  text-align: right;
}

/* দাম ও সংখ্যা — সৌদিতে পশ্চিমা সংখ্যা ব্যবহার হয় */
[dir="rtl"] .price,
[dir="rtl"] .num {
  direction: ltr;
  display: inline-block;
  unicode-bidi: embed;
}

/* ---------- ১১) ম্যাপ পিকার (Leaflet) ---------- */
/* Leaflet নিজে RTL সাপোর্ট করে না — কন্ট্রোল LTR রাখতে হয় */
[dir="rtl"] .leaflet-container {
  direction: ltr;
}
[dir="rtl"] .leaflet-control-container {
  direction: ltr;
}
/* সার্চ ফলাফলের ড্রপডাউন RTL-এ ফিরিয়ে আনা */
[dir="rtl"] .geo-results {
  direction: rtl;
  text-align: right;
}

/* ---------- ১২) Stripe পেমেন্ট ফর্ম ---------- */
/* Stripe iframe নিজে locale সামলায় — বাইরের র‍্যাপার ঠিক রাখলেই হয় */
[dir="rtl"] .stripe-wrap { direction: rtl; }

/* ---------- ১৩) স্ক্রলবার ও ক্যারাউজেল ---------- */
[dir="rtl"] .hide-scrollbar { direction: rtl; }

/* হিরো গ্রেডিয়েন্ট উল্টানো */
[dir="rtl"] .hero-gradient {
  background: linear-gradient(270deg, #feee00 0%, #f6e600 100%);
}

/* ---------- ১৪) ভাষা সুইচার ---------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1;
  padding: .375rem .625rem;
  border-radius: .5rem;
  transition: background-color .15s ease;
  white-space: nowrap;
}
.lang-switch:hover { background: rgba(0, 0, 0, .06); }
.lang-switch:focus-visible {
  outline: 2px solid #212121;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .lang-switch { transition: none; }
}