/* ARS-277 / ARS-278: language selector (header + footer). Native <details> menu, keyboard model added by lang.js. Logical properties only (RTL-safe). No flags. */
.lang { position: relative; font: 600 15px/1.2 var(--font-ui, inherit); color: inherit; }
.lang details, .lang details:last-child { position: relative; border: 0; padding: 0; }
.lang summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; min-height: 44px; min-width: 150px; padding: 0 14px; border: 1px solid #cfd3d8; border-radius: 10px; cursor: pointer; background: transparent; color: inherit; user-select: none; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after, .lang details[open] summary::after { content: none; }
.lang summary { font: inherit; justify-content: flex-start; }
.lang summary:hover { border-color: #8a929a; }
.lang summary:focus-visible, .lang li a:focus-visible { outline: 3px solid #20262e; outline-offset: 2px; }
.lang-code { display: none; }
.lang-chev { margin-inline-start: auto; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.lang details[open] .lang-chev { transform: rotate(-135deg) translate(-2px, -2px); }
.lang ul { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; z-index: 60; box-sizing: border-box; width: 236px; max-width: calc(100vw - 32px); max-height: min(414px, calc(100vh - 140px)); overflow: auto; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid #d5dccf; border-radius: 14px; box-shadow: 0 16px 30px #15171926; }
.lang-footer ul { inset-block-start: auto; inset-block-end: calc(100% + 6px); inset-inline-end: auto; inset-inline-start: 0; }
.lang li { margin: 0; padding: 0; }
.lang li a { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; min-height: 44px; margin: 0 !important; padding: 0 12px; border-radius: 8px; color: #20262e; font-size: 15px; font-weight: 500; text-decoration: none !important; }
.lang li a:hover, .lang li a:focus-visible { background: #f1f2f3; }
.lang li[aria-selected="true"] a { background: #eceef0; font-weight: 700; }
.lang-check { font-weight: 700; }
.lang-footer summary { min-width: 210px; }
.topbar .lang-header { margin-inline-start: auto; }
.footer-bottom .lang-footer { flex: none; }
.lang-notice { margin: 0 0 24px; padding: 12px 16px; border: 1px solid #d5dccf; border-inline-start: 4px solid #8a929a; border-radius: 8px; background: #f6f6ef; font-size: 15px; line-height: 1.5; }
.lang-notice a { margin-inline-start: 12px; font-weight: 600; }
.lang-note { font-size: .9em; opacity: .8; }
@media (max-width: 900px) {
  .lang-header summary { min-width: 64px; justify-content: center; padding: 0 10px; }
  .lang-header .lang-name { display: none; }
  .lang-header .lang-code { display: inline; }
  .lang-header .lang-chev { margin-inline-start: 4px; }
  .lang-header, .lang-header details, .lang-header details:last-child { position: static; }
  .lang-header ul { inset-block-start: calc(100% + 4px); inset-inline-end: 0; }
  .lang-footer summary { min-width: 0; width: 100%; }
  .footer-bottom .lang-footer { margin-block-start: 12px; }
}
/* ARS-277: very narrow phones (320 px): logo + selector + menu button must fit one row */
@media (max-width: 400px) {
  .topbar { gap: 8px; }
  .topbar .brand { width: auto !important; flex: 0 1 auto; min-width: 0; }
  .topbar .brand img { width: 120px !important; height: auto !important; }
}
@media (max-width: 340px) {
  .lang-header summary { min-width: 56px; padding: 0 8px; }
  .topbar .brand img { width: 104px !important; }
}
/* longer translations (German): grid children may shrink below their longest word/button on 320 px phones */
.price-layout > * { min-width: 0; }
@media (max-width: 400px) { .price-panel .toggle button, .price-panel [role="tab"], .price-panel .billing button { white-space: normal; } }
/* long compound words (German, Polish, Ukrainian) in big headings: hyphenate by the page language, never push the page wider */
:lang(de) :is(h1, h2, h3), :lang(pl) :is(h1, h2, h3), :lang(uk) :is(h1, h2, h3), :lang(pt) :is(h1, h2, h3) { overflow-wrap: break-word; hyphens: auto; }
/* the footer control sits at the end of the bottom row on wide pages: its menu grows from the control's end edge so it never leaves the screen (LTR and RTL) */
@media (min-width: 601px) { .lang-footer ul { inset-inline-start: auto; inset-inline-end: 0; } }
