.roomy-language-picker {
  position: fixed;
  z-index: 250;
  top: 14px;
  right: 280px;
  font: 600 12px/1.2 'DM Sans', Arial, sans-serif;
  color: #172237;
}
.top-actions > .roomy-language-picker {
  position: relative;
  inset: auto;
  z-index: 1;
  flex: 0 0 auto;
}
.top-actions > .roomy-language-picker .roomy-language-menu {
  top: calc(100% + 7px);
  right: 0;
  bottom: auto;
}
.roomy-language-toggle {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(148, 158, 178, .32);
  border-radius: 12px;
  padding: 0 11px;
  background: rgba(255, 255, 255, .96);
  color: #172237;
  box-shadow: 0 9px 28px rgba(14, 20, 36, .14);
  backdrop-filter: blur(12px);
}
.roomy-language-flag {
  --roomy-flag-offset: 0;
  display: inline-block;
  width: 24px;
  height: 18px;
  flex: 0 0 24px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(17, 24, 39, .15);
  background-image: image-set(url('/vendor/intl-tel-input/img/flags.webp') 1x, url('/vendor/intl-tel-input/img/flags@2x.webp') 2x);
  background-repeat: no-repeat;
  background-size: calc(244 * 24px) 18px;
  background-position: calc(var(--roomy-flag-offset) * 24px) 0;
}
.roomy-language-flag-it { --roomy-flag-offset: -106; }
.roomy-language-flag-gb { --roomy-flag-offset: -75; }
.roomy-language-flag-fr { --roomy-flag-offset: -73; }
.roomy-language-flag-de { --roomy-flag-offset: -55; }
.roomy-language-flag-es { --roomy-flag-offset: -66; }
.roomy-language-flag-pt { --roomy-flag-offset: -179; }
.roomy-language-toggle b { font-size: 11px; letter-spacing: .08em; }
.roomy-language-toggle i { font-style: normal; color: #7c8598; }
.roomy-language-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  width: 190px;
  display: none;
  padding: 7px;
  border: 1px solid #e0e4ea;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 55px rgba(11, 18, 33, .2);
}
.roomy-language-picker.open .roomy-language-menu { display: grid; }
.roomy-language-menu button {
  display: grid;
  grid-template-columns: 25px 1fr 18px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 9px;
  padding: 9px 10px;
  background: transparent;
  color: #273247;
  text-align: left;
}
.roomy-language-menu button:hover,
.roomy-language-menu button.active { background: #f0eeff; color: #4437c6; }
.roomy-language-menu button span { font-size: 18px; }
.roomy-language-menu button b { font-size: 12px; }
.roomy-language-menu button i { visibility: hidden; color: #5546ca; font-style: normal; }
.roomy-language-menu button.active i { visibility: visible; }
@media (max-width: 1199px) {
  .roomy-language-picker { top: auto; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .roomy-language-menu { top: auto; bottom: calc(100% + 7px); }
  .top-actions > .roomy-language-picker { inset: auto; }
  .top-actions > .roomy-language-picker .roomy-language-menu { top: calc(100% + 7px); right: 0; bottom: auto; }
}
