/* Arabic layout. Latin sequences, codes, and the brand name stay left to right. */

html[dir="rtl"] {
  --font-sans: "Cairo", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Cairo", "Bricolage Grotesque", system-ui, sans-serif;
}

html[dir="rtl"] body {
  line-height: 1.75;
  text-align: right;
}

html[dir="rtl"] .pw-topic,
html[dir="rtl"] .pw-topic h3,
html[dir="rtl"] .pw-topic p,
html[dir="rtl"] .pw-topic .pw-eyebrow,
html[dir="rtl"] .pw-article-card,
html[dir="rtl"] .pw-prose,
html[dir="rtl"] .pw-section-head,
html[dir="rtl"] .pw-lede {
  text-align: right;
}

html[dir="rtl"] .pw-tag {
  direction: ltr;
  unicode-bidi: isolate;
}

html[dir="rtl"] .pw-display,
html[dir="rtl"] .pw-brand-name,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3 {
  letter-spacing: 0;
  font-variation-settings: normal;
}

html[dir="rtl"] .pw-brand-name,
html[dir="rtl"] .pw-seq,
html[dir="rtl"] .pw-chain,
html[dir="rtl"] .pw-part,
html[dir="rtl"] .pw-chip,
html[dir="rtl"] .pw-otp-code,
html[dir="rtl"] .pw-otp-email,
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"] {
  direction: ltr;
  text-align: start;
}

html[dir="rtl"] .pw-search svg,
html[dir="rtl"] .pw-library-search svg {
  left: auto;
  right: 16px;
}

html[dir="rtl"] .pw-search input,
html[dir="rtl"] .pw-library-search input {
  padding: 12px 44px 12px 16px;
}

html[dir="rtl"] .pw-save-fab {
  right: auto;
  left: 12px;
}

html[dir="rtl"] .pw-article-card > div:first-child {
  padding-inline-end: 2.75rem;
}

html[dir="rtl"] .pw-scholar,
html[dir="rtl"] .pw-cal-overlay {
  justify-content: flex-start;
}

html[dir="rtl"] .pw-scholar-panel,
html[dir="rtl"] .pw-cal-sheet {
  box-shadow: 16px 0 40px rgba(13, 16, 51, .2);
}

html[dir="rtl"] .pw-drawer {
  animation-name: pw-drawer-rtl;
}

@keyframes pw-drawer-rtl {
  from { transform: translateX(-100%); }
  to { transform: none; }
}

html[dir="rtl"] .pw-fab {
  right: auto;
  left: 16px;
}

html[dir="rtl"] .pw-fab i {
  right: auto;
  left: 0;
}

html[dir="rtl"] .pw-bubble-user {
  align-self: flex-start;
  border-radius: 20px 20px 20px 4px;
}

html[dir="rtl"] .pw-bubble-ai {
  border-radius: 20px 20px 4px 20px;
}

html[dir="rtl"] .pw-btn .pw-i,
html[dir="rtl"] .pw-link-cobalt .pw-i,
html[dir="rtl"] .pw-preset .pw-i,
html[dir="rtl"] .pw-otp-submit span,
html[dir="rtl"] .pw-more {
  display: inline-block;
}

html[dir="rtl"] .pw-btn .pw-i,
html[dir="rtl"] .pw-link-cobalt .pw-i,
html[dir="rtl"] .pw-preset .pw-i,
html[dir="rtl"] .pw-otp-submit span {
  transform: scaleX(-1);
}

html[dir="rtl"] #pw-prev .pw-i {
  transform: none;
}

html[dir="rtl"] #pw-next .pw-i {
  transform: rotate(180deg);
}

html[dir="rtl"] .pw-play-btn .pw-i {
  margin-left: 0;
  margin-right: 3px;
  transform: scaleX(-1);
}

html[dir="rtl"] .pw-back {
  display: inline-flex;
}

html[dir="rtl"] .pw-prose,
html[dir="rtl"] .pw-callout,
html[dir="rtl"] .pw-quiz-title,
html[dir="rtl"] .pw-quiz-sub {
  text-align: start;
}

/* The date field already draws a calendar icon. In RTL the browser picker
   indicator sits on the same side, so hide it and keep the custom icon. */
html[dir="rtl"] .pw-quiz-datewrap input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

html[dir="rtl"] .pw-ladder-labels {
  direction: ltr;
}

html[dir="rtl"] .pw-compare-table {
  direction: rtl;
}

/* Homepage video library stays the English layout in every language. */
html[dir="rtl"] #video-hub {
  direction: ltr;
  text-align: left;
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
}

html[dir="rtl"] #video-hub .pw-section-head,
html[dir="rtl"] #video-hub .pw-section-head h2,
html[dir="rtl"] #video-hub .pw-section-head p,
html[dir="rtl"] #video-hub h3,
html[dir="rtl"] #video-hub h4,
html[dir="rtl"] #video-hub .pw-playlist-item,
html[dir="rtl"] #video-hub .pw-poster-title,
html[dir="rtl"] #video-hub .pw-lede {
  direction: ltr;
  text-align: left;
  letter-spacing: inherit;
  font-variation-settings: inherit;
}

html[dir="rtl"] #video-hub .pw-play-btn .pw-i,
html[dir="rtl"] #video-hub .pw-btn .pw-i {
  margin-left: 3px;
  margin-right: 0;
  transform: none;
}