/* Единая шапка MercadoRu.
   Классы с префиксом mr-, чтобы не конфликтовать с инлайновыми стилями страниц.
   Бургер и выбор языка работают без JS — на скрытых чекбоксах. */

.mr-hdr {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid #e7e9f0;
  padding: 0; margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
.mr-in {
  max-width: 1040px; margin: 0 auto; padding: 0 20px;
  height: 62px; display: flex; align-items: center; gap: 14px;
}
.mr-logo {
  display: flex; align-items: center; gap: 9px; flex: 0 0 auto;
  font-weight: 800; font-size: 19px; color: #1c2050; text-decoration: none; white-space: nowrap;
}
.mr-badge {
  width: 28px; height: 28px; border-radius: 50%; background: #FFE600;
  color: #1c2050; font-weight: 800; font-size: 15px;
  display: grid; place-items: center; flex: 0 0 auto;
}
.mr-menu {
  display: flex; align-items: center; gap: 20px;
  margin: 0 0 0 auto; padding: 0; list-style: none;
}
.mr-menu a {
  color: #1f2333; font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap;
}
.mr-menu a:hover { color: #3483FA; }
.mr-menu a.on { color: #1c2050; border-bottom: 2px solid #FFE600; padding-bottom: 2px; }

.mr-cta {
  flex: 0 0 auto; background: #229ED9; color: #fff; font-weight: 700; font-size: 15px;
  text-decoration: none; padding: 10px 18px; border-radius: 11px; white-space: nowrap;
  transition: transform .08s ease;
}
.mr-cta:hover { transform: translateY(-1px); }

/* ---------- выбор языка: пилюля справа от кнопки + выпадающий список ---------- */
.mr-lang { position: relative; flex: 0 0 auto; }
.mr-lang-cb { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mr-lang-btn {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: #5b6172;
  padding: 7px 9px; border: 1px solid #e7e9f0; border-radius: 10px; background: #fff;
  -webkit-user-select: none; user-select: none;
  transition: border-color .15s ease, color .15s ease;
}
.mr-lang-btn:hover { color: #1c2050; border-color: #cfd4e2; }
.mr-lang-cb:focus-visible + .mr-lang-veil + .mr-lang-btn { outline: 2px solid #3483FA; outline-offset: 2px; }
.mr-globe {
  width: 14px; height: 14px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.6;
}
.mr-caret { font-size: 9px; line-height: 1; transition: transform .2s ease; }
.mr-lang-cb:checked ~ .mr-lang-btn .mr-caret { transform: rotate(180deg); }
.mr-lang-cb:checked ~ .mr-lang-btn { color: #1c2050; border-color: #cfd4e2; }

.mr-lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 120;
  min-width: 156px; padding: 6px; background: #fff;
  border: 1px solid #e7e9f0; border-radius: 12px;
  box-shadow: 0 12px 30px rgba(18, 22, 48, .13);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px) scale(.97); transform-origin: top right;
  transition: opacity .18s ease, transform .18s cubic-bezier(.2, .8, .3, 1), visibility .18s;
}
.mr-lang-cb:checked ~ .mr-lang-menu {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}
.mr-lang-menu a {
  display: block; padding: 9px 11px; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: #1f2333; text-decoration: none; white-space: nowrap;
}
.mr-lang-menu a:hover { background: #f6f7fb; color: #1c2050; }
.mr-lang-menu a.on { background: #FFF6BF; color: #1c2050; }
/* этой страницы на языке нет — уводим на главную, показываем это приглушением */
.mr-lang-menu a.soft { color: #9aa0b0; }
.mr-lang-menu a.soft:hover { color: #5b6172; }

/* прозрачная подложка: тап мимо списка закрывает его, тоже без JS */
.mr-lang-veil { display: none; position: fixed; inset: 0; z-index: 110; }
.mr-lang-cb:checked + .mr-lang-veil { display: block; }

/* плоский ряд языков — только внутри мобильного меню */
.mr-lang-li { display: none; }
.mr-lang-flat { display: flex; gap: 6px; }
.mr-lang-flat a {
  font-size: 13px; font-weight: 700; color: #5b6172;
  padding: 6px 10px; border-radius: 8px; text-decoration: none;
}
.mr-lang-flat a.on { color: #1c2050; background: #FFE600; }
.mr-lang-flat a.soft { color: #9aa0b0; }

/* бургер: чекбокс + label, без JS */
.mr-toggle { position: absolute; opacity: 0; pointer-events: none; }
.mr-burger {
  display: none; margin-left: auto; flex: 0 0 auto; cursor: pointer;
  font-size: 22px; line-height: 1; color: #1c2050; padding: 6px 8px;
  border: 1px solid #e7e9f0; border-radius: 10px; background: #fff;
  -webkit-user-select: none; user-select: none;
}

@media (max-width: 1000px) {
  .mr-burger { display: block; }
  .mr-menu {
    display: none; position: absolute; top: 62px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid #e7e9f0;
    padding: 8px 20px 14px; margin: 0;
  }
  .mr-toggle:checked ~ .mr-menu { display: flex; }
  .mr-menu li { border-top: 1px solid #f0f1f6; }
  .mr-menu li:first-child { border-top: none; }
  .mr-menu a:not(.mr-l) { display: block; padding: 13px 0; font-size: 16px; }
  .mr-menu a.on { border-bottom: none; color: #3483FA; }
  .mr-lang-li { display: block; padding: 12px 0 2px; border-top: 1px solid #f0f1f6; }
  .mr-lang { display: none; }              /* на телефоне язык живёт в бургере */
}
@media (max-width: 460px) {
  .mr-in { height: 58px; gap: 10px; padding: 0 14px; }
  .mr-logo { font-size: 17px; }
  .mr-cta { font-size: 14px; padding: 9px 13px; }
  .mr-menu { top: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .mr-lang-menu, .mr-caret { transition: none; }
}
@media print { .mr-hdr { display: none; } }
