/**
 * PROMPT 259.3 — Full RTL/LTR runtime direction control
 * Do NOT hardcode direction: rtl on product chrome.
 * html[dir] is set by L5 on locale change.
 */

:root,
html {
  --mft-dir: ltr;
  --text-align: start;
  --float-start: left;
  --float-end: right;
  --padding-start: left;
  --padding-end: right;
  --margin-start: margin-left;
  --margin-end: margin-right;
  --inset-start: left;
  --inset-end: right;
}

html[dir="rtl"],
html.l5-rtl,
[dir="rtl"] {
  --mft-dir: rtl;
  --text-align: start;
  --float-start: right;
  --float-end: left;
  --padding-start: right;
  --padding-end: left;
  --inset-start: right;
  --inset-end: left;
}

html[dir="ltr"],
html.l5-ltr,
[dir="ltr"] {
  --mft-dir: ltr;
  --text-align: start;
  --float-start: left;
  --float-end: right;
  --padding-start: left;
  --padding-end: right;
  --inset-start: left;
  --inset-end: right;
}

/* Global chrome inherits document direction */
html,
body {
  direction: inherit;
}

html[dir="rtl"] body,
html[dir="ltr"] body {
  direction: inherit;
  text-align: start;
}

/* Navbar / dropdown / cards / forms follow dir without hard-coded rtl */
html[dir="rtl"] .navbar,
html[dir="rtl"] .navbar-inner,
html[dir="rtl"] .navbar-end,
html[dir="rtl"] .pill-nav-links,
html[dir="rtl"] .l5-lang-panel,
html[dir="rtl"] .hp-hero,
html[dir="rtl"] .hp-hero-copy,
html[dir="rtl"] .hp-section,
html[dir="rtl"] .shop-header,
html[dir="rtl"] .container,
html[dir="rtl"] .form-input,
html[dir="rtl"] .modal,
html[dir="rtl"] .checkout-panel {
  direction: rtl;
  text-align: start;
}

html[dir="ltr"] .navbar,
html[dir="ltr"] .navbar-inner,
html[dir="ltr"] .navbar-end,
html[dir="ltr"] .pill-nav-links,
html[dir="ltr"] .l5-lang-panel,
html[dir="ltr"] .hp-hero,
html[dir="ltr"] .hp-hero-copy,
html[dir="ltr"] .hp-section,
html[dir="ltr"] .shop-header,
html[dir="ltr"] .container,
html[dir="ltr"] .form-input,
html[dir="ltr"] .modal,
html[dir="ltr"] .checkout-panel {
  direction: ltr;
  text-align: start;
}

/* Hero copy: physical right only when document is RTL */
html[dir="rtl"] .hp-hero-copy,
html[dir="rtl"] body.home-page-cosmic .hp-hero-copy {
  text-align: start;
}

html[dir="ltr"] .hp-hero-copy,
html[dir="ltr"] body.home-page-cosmic .hp-hero-copy {
  text-align: start;
}

/* Soften hard-coded physical-right from home.css when LTR */
html[dir="ltr"] body.home-page-cosmic .hp-hero-copy,
html[dir="ltr"] body.home-page .hp-hero-copy {
  text-align: left !important;
}

html[dir="rtl"] body.home-page-cosmic .hp-hero-copy,
html[dir="rtl"] body.home-page .hp-hero-copy {
  text-align: right !important;
}

/* Forms / inputs placeholder alignment via dir */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  direction: rtl;
  text-align: start;
}

html[dir="ltr"] input,
html[dir="ltr"] textarea,
html[dir="ltr"] select {
  direction: ltr;
  text-align: start;
}

/* AI Assistant panel inherits page dir (override forced rtl in float CSS) */
html[dir="ltr"] #mftAsstPanel.mft-asst-panel,
html[dir="ltr"] .mft-asst-panel,
html[dir="ltr"] body .mft-asst-panel {
  direction: ltr !important;
  text-align: start;
}

html[dir="rtl"] #mftAsstPanel.mft-asst-panel,
html[dir="rtl"] .mft-asst-panel,
html[dir="rtl"] body .mft-asst-panel {
  direction: rtl !important;
  text-align: start;
}

/*
 * Assistant bubbles (PROMPT 259.3):
 * RTL: user on right (start), bot on left (end)
 * LTR: user on left (start), bot on right (end)
 * = align-self: flex-start for user, flex-end for bot in both writing modes
 */
html[dir="rtl"] .mft-asst-bubble.user,
html[dir="ltr"] .mft-asst-bubble.user {
  align-self: flex-start !important;
}

html[dir="rtl"] .mft-asst-bubble.bot,
html[dir="ltr"] .mft-asst-bubble.bot,
html[dir="rtl"] .mft-asst-typing,
html[dir="ltr"] .mft-asst-typing {
  align-self: flex-end !important;
}

html[dir="rtl"] .mft-asst-composer textarea,
html[dir="rtl"] #mftAsstIn {
  direction: rtl !important;
  text-align: right !important;
}

html[dir="ltr"] .mft-asst-composer textarea,
html[dir="ltr"] #mftAsstIn {
  direction: ltr !important;
  text-align: left !important;
}

/* Body class bridges (L5 toggles these on locale change) */
body.l5-rtl {
  direction: rtl;
}
body.l5-ltr {
  direction: ltr;
}