/* Right-to-left pages only (/ar/, /fa/: <html dir="rtl">). Linked only from those two pages, after site.css.
   Grid and flex layouts (header, two-column sections, cards, footer, switcher grid) mirror by themselves
   under dir="rtl"; this file flips what site.css sets with physical left/right: arrows, margins, the
   language menu anchor, the safety bar, toggle knobs, video buttons, the hero/friends Fliva and the intro flight. */

/* Inline SVG illustrations keep their own left-to-right text (the Prost!/Saúde!/Cheers! bubbles, 18+). */
html[dir="rtl"] svg{direction:ltr}

html[dir="rtl"] .skip{left:auto;right:12px}

/* Buttons: the arrow points the way you read */
html[dir="rtl"] .btn .arrow{margin-left:0;margin-right:10px;-webkit-transform:scaleX(-1);transform:scaleX(-1)}

/* Header + language switcher: menu opens from the left edge, under the button */
html[dir="rtl"] .lang{margin-right:0;margin-left:6px}
html[dir="rtl"] .lang-menu .chev{margin-left:0;margin-right:4px}
html[dir="rtl"] .lang-list{right:auto;left:0}
html[dir="rtl"] .lang-list .code{margin-left:4px}

/* Hero */
html[dir="rtl"] .hero .cta .btn{margin-right:0;margin-left:16px}

/* Play mode: toggle sits on the start (right) side, knob "on" position mirrored, safety bar on the right */
html[dir="rtl"] .switch-card .toggle{margin-right:0;margin-left:16px}
html[dir="rtl"] .toggle::after{left:4px}
html[dir="rtl"] .safety{border-left:0;border-right:6px solid var(--night)}

/* Fair by design */
html[dir="rtl"] .fair-list svg{margin-right:0;margin-left:14px}

/* Not only flirting: Fliva moves to the other top corner of the illustration */
html[dir="rtl"] .friends-fliva{right:auto;left:-2%}

/* Stats */
html[dir="rtl"] .stats-big{padding:0 10px 0 12px}
html[dir="rtl"] .grow{margin:14px 8px 0 0}
html[dir="rtl"] .stats-list{text-align:right}

/* Video buttons: play on the start (right) side, sound on the left */
html[dir="rtl"] .hv-mute{right:auto;left:12px}
html[dir="rtl"] .hv-toggle{left:auto;right:12px}
html[dir="rtl"] .hv-frame:not(.started) .hv-toggle{right:auto;left:50%}

@media (min-width:600px){
  html[dir="rtl"] .lang{margin-left:12px}
  html[dir="rtl"] .switch-card .toggle{margin:0 0 16px}
  html[dir="rtl"] .char-icon{margin:0 -2px 14px 0}
  html[dir="rtl"] .fliva-intro{padding-right:12px;padding-left:24px}
}
@media (min-width:1024px){
  html[dir="rtl"] .hero-fliva{right:auto;left:7%}
  html[dir="rtl"] .watch{text-align:right}
  html[dir="rtl"] .watch-copy,html[dir="rtl"] .watch-meta{padding-left:0;padding-right:8%}
}

/* ---------- Fliva intro, mirrored: she flies in from the right, spins the other way, rests on the left
   (flex-end is the left edge under rtl), and flies out to the left. Same 7s timeline as site.css. ---------- */
html[dir="rtl"] .fi-fly{-webkit-animation-name:fi-fly-rtl;animation-name:fi-fly-rtl}
html[dir="rtl"] .fi-plane{-webkit-animation-name:fi-spin-rtl;animation-name:fi-spin-rtl}
html[dir="rtl"] .fi-bubble::before{right:auto;left:40px}
html[dir="rtl"] .fliva-intro.leave{-webkit-transform:translate3d(-60vw,-24px,0);transform:translate3d(-60vw,-24px,0)}
@-webkit-keyframes fi-fly-rtl{0%{-webkit-transform:translate3d(100vw,46px,0) rotate(9deg);-webkit-animation-timing-function:cubic-bezier(.33,1,.68,1)}22.9%{-webkit-transform:translate3d(0,0,0) rotate(0);-webkit-animation-timing-function:cubic-bezier(.45,0,.55,1)}32.9%{-webkit-transform:translate3d(0,-7px,0) rotate(0);-webkit-animation-timing-function:cubic-bezier(.45,0,.55,1)}42.9%{-webkit-transform:translate3d(0,0,0) rotate(0);-webkit-animation-timing-function:cubic-bezier(.45,0,.55,1)}65%{-webkit-transform:translate3d(0,-4px,0) rotate(1.5deg);-webkit-animation-timing-function:cubic-bezier(.45,0,.55,1)}90.7%{-webkit-transform:translate3d(0,0,0) rotate(0);-webkit-animation-timing-function:cubic-bezier(.55,0,.8,.45)}100%{-webkit-transform:translate3d(-60vw,-34px,0) rotate(-10deg)}}
@keyframes fi-fly-rtl{0%{transform:translate3d(100vw,46px,0) rotate(9deg);animation-timing-function:cubic-bezier(.33,1,.68,1)}22.9%{transform:translate3d(0,0,0) rotate(0);animation-timing-function:cubic-bezier(.45,0,.55,1)}32.9%{transform:translate3d(0,-7px,0) rotate(0);animation-timing-function:cubic-bezier(.45,0,.55,1)}42.9%{transform:translate3d(0,0,0) rotate(0);animation-timing-function:cubic-bezier(.45,0,.55,1)}65%{transform:translate3d(0,-4px,0) rotate(1.5deg);animation-timing-function:cubic-bezier(.45,0,.55,1)}90.7%{transform:translate3d(0,0,0) rotate(0);animation-timing-function:cubic-bezier(.55,0,.8,.45)}100%{transform:translate3d(-60vw,-34px,0) rotate(-10deg)}}
/* Fliva is drawn facing the viewer, so the art is not mirrored; only her spin turns the other way. */
@-webkit-keyframes fi-spin-rtl{0%,22.9%{-webkit-transform:rotate(0);-webkit-animation-timing-function:cubic-bezier(.42,0,.28,1)}42.9%,100%{-webkit-transform:rotate(-360deg)}}
@keyframes fi-spin-rtl{0%,22.9%{transform:rotate(0);animation-timing-function:cubic-bezier(.42,0,.28,1)}42.9%,100%{transform:rotate(-360deg)}}