/* ===========================================================================
   English, French, Arabic
   ---------------------------------------------------------------------------
   Arabic letters come from IBM Plex Sans Arabic. The faces join the
   'Quicksand' family with an Arabic unicode-range, so every stack that
   names Quicksand (the theme, the abjad shell, the login page) draws Arabic
   with Plex and Latin with Quicksand - no font-family to change anywhere.
   ============================================================================ */

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-700-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* The same faces under their own name, for stacks that do not start with Quicksand. */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-arabic/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2');
}

/* Arabic reads a touch taller: a little more line height keeps the dots clear. */
html[lang="ar"] body { line-height: 1.6; }

/* Arabic is not written in capitals or with spaced-out letters. */
html[lang="ar"] .text-uppercase,
html[lang="ar"] [class*="uppercase"] { letter-spacing: 0 !important; }
html[lang="ar"] * { letter-spacing: 0; }

/* Things that read left to right whatever the page language. */
[dir="rtl"] .ltr-always,
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"] { direction: ltr; }
[dir="rtl"] input[type="email"]::placeholder,
[dir="rtl"] input[type="tel"]::placeholder,
[dir="rtl"] input[type="url"]::placeholder { text-align: right; }

/* Arrows and chevrons that point "forward" or "back" turn round. */
[dir="rtl"] .rtl-flip,
[dir="rtl"] .bx-chevron-right,
[dir="rtl"] .bx-chevron-left,
[dir="rtl"] .bx-arrow-back,
[dir="rtl"] .bx-right-arrow-alt,
[dir="rtl"] .bx-left-arrow-alt,
[dir="rtl"] .ti-chevron-right,
[dir="rtl"] .ti-chevron-left,
[dir="rtl"] .ti-arrow-right,
[dir="rtl"] .ti-arrow-left,
[dir="rtl"] .ri-arrow-right-line,
[dir="rtl"] .ri-arrow-left-line,
[dir="rtl"] .ri-arrow-right-s-line,
[dir="rtl"] .ri-arrow-left-s-line,
[dir="rtl"] .bi-chevron-right,
[dir="rtl"] .bi-chevron-left,
[dir="rtl"] .bi-arrow-right,
[dir="rtl"] .bi-arrow-left { display: inline-block; transform: scaleX(-1); }

/* The language buttons (phone sidebar sheet, sign-in pages). The profile menu uses a dropdown instead. */
.lang-switch { display: flex; gap: .35rem; padding: .35rem 1rem .6rem; flex-wrap: wrap; }
.lang-switch a {
  flex: 1 1 0;
  min-width: 4.5rem;
  text-align: center;
  padding: .35rem .5rem;
  border-radius: .5rem;
  border: 1px solid var(--default-border, #e5e7eb);
  color: var(--default-text-color, #1f2242);
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.3;
}
.lang-switch a:hover { background: rgba(var(--primary-rgb, 69, 117, 224), .06); }
.lang-switch a.active {
  background: rgb(var(--primary-rgb, 69, 117, 224));
  border-color: rgb(var(--primary-rgb, 69, 117, 224));
  color: #fff;
}