/* Arabic glyphs use the same OFL font as the app. Latin numerals stay 0-9. */
@font-face {
  font-family: 'Matelume Arabic';
  src: url('../fonts/NotoSansArabic-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
html[lang='ar'] body { font-family: 'Matelume Arabic', Arial, sans-serif; }
.language-switcher a[lang='ar'] { font-family: 'Matelume Arabic', Arial, sans-serif; }
html[dir='rtl'] { text-align: start; }
html[dir='rtl'] :is(.designer-grid,.designer-actions,.nav,.growth-grid,.foot-grid) { direction: rtl; }
html[dir='rtl'] :is(.room-image,.room-pin,.room-pin span,.compare,.viewer-stage,video,picture,img,canvas) { direction: ltr; }
html[dir='rtl'] :is(.compare-labels,.lb-count) { direction: ltr; }
html[dir='rtl'] :is(code,pre,[data-room-map],.map-name) { direction: ltr; unicode-bidi: isolate; }
small[lang='en'][dir='ltr'] { display: inline-block; unicode-bidi: isolate; white-space: nowrap; }
html[dir='rtl'] small[lang='en'][dir='ltr'] { margin-inline: .35em; }
html[dir='rtl'] :is(h1,h2,h3,p,li) { letter-spacing: normal; }
html[lang='ar'] .deferred-language-tag { direction: inherit; unicode-bidi: normal; margin-inline: .35em; white-space: nowrap; }
html[lang='ar'] .deferred-language-tag bdi { direction: ltr; unicode-bidi: isolate; }
html[lang='ar'] .deferred-language-dot { margin-inline: .15em; }
.language-switcher {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 14px;
  padding: 8px max(16px,4vw);
  font-size: .82rem;
  border-block-start: 1px solid currentColor;
}
.language-switcher a { display: inline-block; padding: 3px; }
.language-switcher [aria-current='page'] { font-weight: 750; text-decoration-thickness: 2px; }
.language-picker { position: relative; display: inline-block; margin-inline: 10px; font-size: .85rem; }
.language-picker summary { list-style: none; display: flex; align-items: center; gap: 7px; cursor: pointer; min-height: 40px; padding: 6px; }
.language-picker summary::-webkit-details-marker { display: none; }
.language-picker .language-switcher {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 100%;
  display: grid;
  gap: 4px;
  padding: 12px;
  min-width: 190px;
  max-width: calc(100vw - 24px);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 8px 24px #0002;
  z-index: 100;
}
.site-footer .language-picker .language-switcher { inset-block-start: auto; inset-block-end: 100%; }
.language-suggestion { display: flex; align-items: center; gap: 14px; padding: 12px 4vw; color: var(--ink); background: var(--surface); font-size: .85rem; }
.language-suggestion button { color: inherit; background: none; border: 1px solid var(--line); border-radius: 4px; min-width: 32px; min-height: 32px; cursor: pointer; }
body.has-language-suggestion .room-intro { padding-top: 28px; }
.has-language-suggestion .designer-gallery-intro { padding-top: 35px; }
.site-header > .language-switcher {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  white-space: nowrap;
  direction: ltr;
  max-width: 100%;
}
.site-header > .language-switcher a { flex: 0 0 auto; }
.translation-draft {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  z-index: 120;
  background: #fff0bd;
  color: #24261f;
  padding: 10px 18px;
  font: 14px/1.5 Arial,sans-serif;
}
.designer-home .designer-intro h1 { overflow-wrap: break-word; }
.addon-version { display: inline-block; margin-inline-start: .4em; white-space: nowrap; }
.v2-site :is(.btn,.button) { max-width: 100%; white-space: normal; overflow-wrap: break-word; text-align: center; }
.site-header .bar { flex-wrap: wrap; height: auto; min-height: 72px; padding-block: 10px; row-gap: 8px; }
.site-header .menu-panel[data-open='true'] { inset-block-start: 100%; }
.v2-site :is(h1,h2,h3),.site-footer a { overflow-wrap: anywhere; }
@media(max-width:360px) {
  .room-pin-phone { left: clamp(18px,var(--px),calc(100% - 18px)); }
}
@media(max-width:960px) {
  .story { grid-template-columns: minmax(0,1fr); }
  .story-steps { min-width: 0; }
  .step-media { max-width: 100% !important; width: 100% !important; }
}
@media(max-width:700px) {
  .site-footer .language-picker .language-switcher { inset-inline-start: 0; inset-inline-end: auto; }
  .site-header .bar { min-height: 64px; padding-block: 0; }
  .language-switcher { justify-content: flex-start; gap: 4px 10px; }
  .language-switcher a { min-height: 30px; }
  .site-header .language-picker summary span { display: none; }
  html[lang='ar'] .designer-home .designer-intro h1 { font-size: clamp(1.9rem,8vw,2.7rem); line-height: 1.45; }
  .designer-home .room-intro { padding-top: 154px; }
}