/* ==========================================================================
   Mila Cosmetics — RTL + Arabic typography
   The rules above the "typography" section are generated from the site's own
   compiled Tailwind utilities: every physical-direction utility used in the app
   (ml-/mr-/pl-/pr-/left-/right-/rounded-l-/border-l-/text-left/translate-x…)
   gets a mirrored twin scoped to [dir="rtl"], so the layout flips cleanly
   without touching the app bundle.
   ========================================================================== */

/* ---- mirrored spacing, insets, radii, borders, alignment ---- */
html[dir="rtl"] .-right-1{left:calc(var(--spacing)*-1);right:auto}
html[dir="rtl"] .-right-1\.5{left:calc(var(--spacing)*-1.5);right:auto}
html[dir="rtl"] .-right-2{left:calc(var(--spacing)*-2);right:auto}
html[dir="rtl"] .-right-5{left:calc(var(--spacing)*-5);right:auto}
html[dir="rtl"] .-right-6{left:calc(var(--spacing)*-6);right:auto}
html[dir="rtl"] .-right-24{left:calc(var(--spacing)*-24);right:auto}
html[dir="rtl"] .right-0{left:calc(var(--spacing)*0);right:auto}
html[dir="rtl"] .right-3{left:calc(var(--spacing)*3);right:auto}
html[dir="rtl"] .right-4{left:calc(var(--spacing)*4);right:auto}
html[dir="rtl"] .right-8{left:calc(var(--spacing)*8);right:auto}
html[dir="rtl"] .right-\[-12\%\]{left:-12%;right:auto}
html[dir="rtl"] .-left-3{right:calc(var(--spacing)*-3);left:auto}
html[dir="rtl"] .-left-24{right:calc(var(--spacing)*-24);left:auto}
html[dir="rtl"] .-left-32{right:calc(var(--spacing)*-32);left:auto}
html[dir="rtl"] .left-0{right:calc(var(--spacing)*0);left:auto}
html[dir="rtl"] .left-3{right:calc(var(--spacing)*3);left:auto}
html[dir="rtl"] .left-4{right:calc(var(--spacing)*4);left:auto}
html[dir="rtl"] .left-5{right:calc(var(--spacing)*5);left:auto}
html[dir="rtl"] .left-6{right:calc(var(--spacing)*6);left:auto}
html[dir="rtl"] .left-\[-12\%\]{right:-12%;left:auto}
html[dir="rtl"] .ml-1{margin-right:calc(var(--spacing)*1);margin-left:0}
html[dir="rtl"] .ml-1\.5{margin-right:calc(var(--spacing)*1.5);margin-left:0}
html[dir="rtl"] .ml-auto{margin-right:auto;margin-left:0}
html[dir="rtl"] .rounded-l{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}
html[dir="rtl"] .rounded-tl{border-top-right-radius:.25rem}
html[dir="rtl"] .rounded-r{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}
html[dir="rtl"] .rounded-tr{border-top-left-radius:.25rem}
html[dir="rtl"] .rounded-br{border-bottom-left-radius:.25rem}
html[dir="rtl"] .rounded-bl{border-bottom-right-radius:.25rem}
html[dir="rtl"] .border-r{border-left-style:var(--tw-border-style);border-left-width:1px;border-right-width:0}
html[dir="rtl"] .border-l{border-right-style:var(--tw-border-style);border-right-width:1px;border-left-width:0}
html[dir="rtl"] .pr-4{padding-left:calc(var(--spacing)*4);padding-right:0}
html[dir="rtl"] .pr-9{padding-left:calc(var(--spacing)*9);padding-right:0}
html[dir="rtl"] .pr-10{padding-left:calc(var(--spacing)*10);padding-right:0}
html[dir="rtl"] .pl-4{padding-right:calc(var(--spacing)*4);padding-left:0}
html[dir="rtl"] .text-left{text-align:right}
html[dir="rtl"] .text-right{text-align:left}
@media (hover:hover){
html[dir="rtl"] .group-hover\:translate-x-1:is(:where(.group):hover *){--tw-translate-x:-calc(var(--spacing)*1);translate:var(--tw-translate-x)var(--tw-translate-y)}
}
@media (hover:hover){
html[dir="rtl"] .hover\:translate-x-1:hover{--tw-translate-x:-calc(var(--spacing)*1);translate:var(--tw-translate-x)var(--tw-translate-y)}
}
@media (min-width:40rem){
html[dir="rtl"] .sm\:-right-8{left:calc(var(--spacing)*-8);right:auto}
}
@media (min-width:40rem){
html[dir="rtl"] .sm\:-left-10{right:calc(var(--spacing)*-10);left:auto}
}

/* ---- Arabic typography ---- */
html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  font-family: 'IBM Plex Sans Arabic', 'Manrope', ui-sans-serif, system-ui, sans-serif;
}
html[dir="rtl"] .font-display {
  font-family: 'Noto Naskh Arabic', 'Fraunces', Georgia, serif;
  line-height: 1.45;
}
/* Arabic is a joined script: letter-spacing breaks the joins, italics are alien */
html[dir="rtl"] [class*="tracking-"] { letter-spacing: 0 !important; }
html[dir="rtl"] .italic { font-style: normal; }
/* Naskh sits optically smaller than Fraunces at the same size */
html[dir="rtl"] .font-display { font-size: 1.02em; }

/* ---- directional icons (arrow-right / chevron-right) ---- */
html[dir="rtl"] .mila-flip-x { transform: scaleX(-1); }

/* ---- side drawer enters from the left in RTL ---- */
html[dir="rtl"] .animate-slide-in { animation-name: mila-slide-in-rtl; }
@keyframes mila-slide-in-rtl { from { transform: translate(-100%) } to { transform: translate(0) } }