/* MockupMaker bilingual interface */
.mm-language-toggle{
  min-height:34px;
  padding:3px 4px 3px 8px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  background:rgba(255,255,255,.075);
  color:#e8ebf2;
  display:inline-flex;
  align-items:center;
  gap:7px;
  direction:ltr;
  cursor:pointer;
  font:750 10px/1 Arial,Vazirmatn,sans-serif;
  white-space:nowrap;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.mm-language-toggle:hover{
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.27);
  transform:translateY(-1px);
}
.mm-language-toggle:focus-visible{outline:2px solid #f7cb73;outline-offset:2px}
.mm-language-label{color:#d8dde8;font:700 10px/1 Vazirmatn,Arial,sans-serif}
.mm-language-segments{
  height:26px;
  padding:2px;
  border-radius:7px;
  display:grid;
  grid-template-columns:29px 29px;
  align-items:center;
  background:#202532;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.mm-language-option{
  height:22px;
  border-radius:5px;
  display:grid;
  place-items:center;
  color:#858d9e;
  font:800 9px/1 Arial,sans-serif;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.mm-language-option.active{
  background:linear-gradient(135deg,#f7d875,#efa83d);
  color:#49320f;
  box-shadow:0 2px 7px rgba(0,0,0,.24);
}
body.night-mode .mm-language-toggle{background:rgba(255,255,255,.055)}

/* -------------------------------------------------------------------------
   Language switching must NEVER mirror the application layout.
   The Persian geometry is the single physical layout for both languages.
   Only long-form readable copy gets an English reading direction/alignment.
   Centered copy and all controls keep their existing placement/alignment.
   ------------------------------------------------------------------------- */

/* Help/reference paragraphs are the only main-app copy that benefits from
   left-to-right paragraph flow. These selectors target text nodes/blocks only;
   they do not change flex/grid direction or move any controls. */
body.mm-language-en .mm-help-intro p,
body.mm-language-en .mm-help-section p,
body.mm-language-en #mmGuidedTour .mm-tour-message,
body.mm-language-en #mmUpdateDescription{
  direction:ltr;
  text-align:left;
}

/* The footer has two explicit copyright lines. This is content visibility,
   not a layout change, so key it to language instead of document direction. */
html[lang="en"] .mm-footer-rights [lang="fa"]{display:none}

/* Keep text-only generated English copy tied to the language, not page flow. */
html[lang="en"] .pro-empty-drop.show::after{content:"Effect area on object"}

@media(max-width:1100px){
  .mm-language-label{display:none}
  .mm-language-toggle{padding:3px 4px}
}
@media(prefers-reduced-motion:reduce){
  .mm-language-toggle,.mm-language-option{transition:none}
}