/*
 * Partner, Arabic only (included in base.html / base_nuxt.html for version.partner + ar).
 * Plain CSS, not built by gulp.
 *
 * Open account modal opens like on me.exante.eu/ar/: side sheet from the right,
 * close button top right, dark overlay. Form content stays RTL, phone is LTR.
 * html[lang] is used instead of html[dir]: Django pages (base.html) don't set dir.
 */

html[lang="ar"] #modal-open-acc .popup__overlay {
  justify-content: flex-end;
  align-items: stretch;
}

html[lang="ar"] #modal-open-acc .popup__overlay::after {
  background: rgba(39, 39, 42, 0.8);
}

html[lang="ar"] #modal-open-acc .popup__wrap {
  width: 640px;
  max-width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  overflow-y: auto;
  animation: partner-ar-sheet-in 0.2s ease-in-out;
}

html[lang="ar"] #modal-open-acc .popup__content-wrap {
  height: auto;
  min-height: 100%;
  padding: 80px 56px 40px;
}

html[lang="ar"] #modal-open-acc .popup__close-icon {
  top: 24px;
  right: 24px;
  left: auto;
}

/* lines are light gray for the centered modal, invisible on the white sheet */
html[lang="ar"] #modal-open-acc .popup__close-icon::before,
html[lang="ar"] #modal-open-acc .popup__close-icon::after {
  background: #007f39;
}

html[lang="ar"] #modal-open-acc .PhoneWrapper {
  direction: ltr;
}

/*
 * Individual / Corporate toggle: unselected button has a frame shifted by
 * left: -100% (hidden under the neighbour in LTR). In RTL the neighbour is on
 * the other side, so pieces of the frame stick out as green dots.
 */
html[lang="ar"] #modal-open-acc .MuiToggleButton-root:not(.Mui-selected)::before {
  display: none;
}

html[lang="ar"] #modal-open-acc .MuiFormControlLabel-label {
  padding-right: 12px;
}

html[lang="ar"] #modal-open-acc .SigninText {
  margin-right: 40px;
  margin-left: 0;
}

@media (max-width: 767px) {
  /* top: below close icon (24px + 57px) */
  html[lang="ar"] #modal-open-acc .popup__content-wrap {
    padding: 100px 20px 32px;
  }

  html[lang="ar"] #modal-open-acc .SigninText {
    margin-right: 20px;
  }
}

@keyframes partner-ar-sheet-in {
  from {
    transform: translateX(100%);
  }

  to {
    transform: none;
  }
}

/*
 * Language panel: LTR like on me.exante.eu/ar/ and the English partner site.
 * website_base-rtl.css mirrors it (opens from the left, flags on the right),
 * and its width depends on the language button position (on the left in RTL).
 */
html[lang="ar"] #modal-languages {
  direction: ltr;
}

html[lang="ar"] #modal-languages .popup__wrap {
  width: 640px;
  max-width: 100%;
  box-shadow: -4px 4px 26px 0 rgba(0, 0, 0, 0.07);
}

html[lang="ar"] #modal-languages .popup__close-icon {
  right: 20px;
  left: auto;
}

html[lang="ar"] #modal-languages .languages {
  text-align: left;
}

html[lang="ar"] #modal-languages .languages .languages__flag {
  margin-right: 15px;
  margin-left: 0;
}

@media all and (min-width: 640px) and (max-width: 959px) {
  html[lang="ar"] #modal-languages .languages .languages__flag {
    margin-right: 30px;
  }
}

@media all and (max-width: 639px) {
  html[lang="ar"] #modal-languages .popup__content {
    padding-left: 20px;
  }
}

/*
 * Mobile menu (drawer): closed state is moved off-screen with
 * translateX(100% + gap), which website_base-rtl.css doesn't mirror, so in RTL
 * the drawer and the logo/burger sticking out of it end up off-screen.
 * Move it to the left instead: logo on the right, burger on the left (like ME).
 */
@media all and (max-width: 639px) {
  html[lang="ar"] .navigation:not(.navigation--open) {
    transform: translateX(calc(-100% - 80px / 2));
  }
}

@media all and (min-width: 640px) and (max-width: 959px) {
  html[lang="ar"] .navigation:not(.navigation--open) {
    transform: translateX(calc(-100% - 80px));
  }
}

/*
 * Header menu (desktop): items are spread with space-between. Arabic labels are
 * short, so the first/last items stick to the logo/button with large gaps
 * between them. Spread them evenly instead.
 */
@media all and (min-width: 960px) {
  html[lang="ar"] .topbar .site-menu__items {
    justify-content: space-evenly;
  }
}

/*
 * Footer: Monetary Authority of Singapore notice spans the whole column in one
 * long line. Limit it to 2-3 lines. plaintext: direction by content, so the
 * untranslated english text is LTR (period at the end), arabic one is RTL.
 */
html[lang="ar"] .foot .notice--singapore {
  max-width: 560px;
}

html[lang="ar"] .foot .notice--singapore p {
  unicode-bidi: plaintext;
}

/*
 * Mobile menu, language list: menu and language submenu are in one row and
 * switching shifts the row by translateX(-100%). In RTL the submenu is on the
 * left of the menu, so the shift has to go the other way (otherwise empty panel).
 */
html[lang="ar"] .navigation .navigation__wrap.navigation__wrap--change-lang .navigation__menu-wrap {
  transform: translateX(100%);
}

/*
 * Open account form: inputs (label + typed text) are LTR, like the phone field.
 * Country list of the phone field is rendered by MUI outside the modal
 * (#menu-phoneCountry): LTR so the flag is on the left and its margin-right
 * becomes the gap between flag and country name.
 */
html[lang="ar"] #modal-open-acc .InputWrapper,
html[lang="ar"] #modal-open-acc-corp .InputWrapper,
html[lang="ar"] #menu-phoneCountry {
  direction: ltr;
}