/* ===========================
   GoodRent Burger Menu Styles
   =========================== */

:root{
  --grbm-panel-width: 100vw;
  --grbm-bg-color: #000000;
  --grbm-bg-image: none;
  --grbm-z: 9999;
  --grbm-text: #ffffff;
  --grbm-accent: #ffffff;
  --grbm-backdrop: rgba(0,0,0,.5);
  --grbm-radius: 20px;
  --grbm-speed: .35s;
  --grbm-btn-radius: 12px; /* скругление квадратной кнопки */
}

body.grbm-open{ overflow: hidden; }

.grbm{ position: relative; z-index: var(--grbm-z); }

/* Кнопка-бургер: квадрат, мягкие углы. Иконка центрируется абсолютно (надёжно для iOS) */
.grbm__toggle{
  position: fixed;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;

  /* сброс влияния темы/браузера */
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 1;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  background-clip: padding-box;

  border-radius: var(--grbm-btn-radius) !important;
  background: rgba(0,0,0,.75);
  cursor: pointer;
  z-index: calc(var(--grbm-z) + 2);
  transition: background var(--grbm-speed) ease, transform var(--grbm-speed) ease, box-shadow var(--grbm-speed) ease;
  -webkit-tap-highlight-color: transparent;

  display: block; /* без флекса — центрируем дочерний .grbm__icon абсолютно */
}
.grbm__toggle:hover{ background: rgba(0,0,0,.85); }
.grbm__toggle:active{ transform: translateY(1px); }
.grbm__toggle:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }

/* Абсолютное центрирование «иконки» внутри кнопки */
.grbm__icon{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 18px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.grbm__bar{
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transform-origin: center;
  transition: transform var(--grbm-speed) ease, opacity var(--grbm-speed) ease, top var(--grbm-speed) ease, bottom var(--grbm-speed) ease;
}
.grbm__bar:nth-child(1){ top: 0; }
.grbm__bar:nth-child(2){ top: 8px; }
.grbm__bar:nth-child(3){ bottom: 0; }

/* Состояние «крестик» у этой же кнопки */
body.grbm-open .grbm__toggle .grbm__bar:nth-child(1){ top: 8px; transform: rotate(45deg); }
body.grbm-open .grbm__toggle .grbm__bar:nth-child(2){ opacity: 0; }
body.grbm-open .grbm__toggle .grbm__bar:nth-child(3){ bottom: auto; top: 8px; transform: rotate(-45deg); }

/* Подложка */
.grbm__backdrop{
  position: fixed; inset: 0;
  background: transparent;
  opacity: 0; pointer-events: none;
  transition: opacity var(--grbm-speed) ease;
  z-index: calc(var(--grbm-z) + 0);
}
body.grbm-open .grbm__backdrop{ background: var(--grbm-backdrop); opacity: 1; pointer-events: auto; }

/* Панель */
.grbm__panel{
  position: fixed; inset: 0;
  width: var(--grbm-panel-width);
  background: var(--grbm-bg-color);
  color: var(--grbm-text);
  transform: translateX(100%);
  transition: transform var(--grbm-speed) ease;
  background-image: var(--grbm-bg-image);
  background-size: cover;
  background-position: center;
  z-index: calc(var(--grbm-z) + 1);
}
.grbm__panel.has-bg{
  background-color: rgba(0,0,0,.55);
  background-blend-mode: multiply;
}
body.grbm-open .grbm__panel{ transform: translateX(0); }

.grbm__panel-inner{
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  height: 100%;
  padding: 16px 20px 24px;
}

/* Верхняя полоса */
.grbm__top{
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.grbm__logo-link{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.grbm__logo-img{ display:block; height:28px; width:auto; object-fit:contain; }
.grbm__logo-placeholder{
  display:inline-block; width:96px; height:24px;
  border-radius: 6px; background: rgba(255,255,255,.15);
}

/* Навигация */
.grbm__nav{ margin-top: 8px; }
.grbm__menu{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.grbm__link{
  display:inline-flex; align-items:center; gap:10px;
  font-size:18px; text-decoration:none; color:var(--grbm-accent);
  padding:10px 2px;
  border-bottom:1px solid rgba(255,255,255,.12);
  transition: transform var(--grbm-speed) ease, opacity var(--grbm-speed) ease;
}
.grbm__link:hover{ transform: translateX(4px); opacity:.9; }

/* Валютный виджет */
.grbm__widget{
  margin-top:18px; padding-top:14px;
  border-top:1px dashed rgba(255,255,255,.2);
}

/* Контакты */
.grbm__contacts{
  margin-top:20px; padding-top:14px;
  border-top:1px dashed rgba(255,255,255,.2);
}
.grbm__contacts-title{ font-size:14px; opacity:.8; margin-bottom:10px; }

.grbm__socials{ display:flex; gap:12px; }
.grbm__social{
  width:44px; height:44px; border-radius:12px;
  background: rgba(255,255,255,.12);
  display:grid; place-items:center; text-decoration:none;
  transition: transform var(--grbm-speed) ease, background var(--grbm-speed) ease;
}
.grbm__social:hover{ transform: translateY(-2px) scale(1.02); background: rgba(255,255,255,.2); }

/* Плейсхолдер внутри кнопки. Удали его и вставь свой <svg> */
.grbm__social-slot{
  width:22px; height:22px; display:block;
  border-radius:4px; background: rgba(255,255,255,.25);
}
.grbm__social svg{ width:22px; height:22px; display:block; fill:#fff; }

/* На десктопе кнопку обычно скрываем */
@media (min-width: 992px){
  .grbm__toggle{ display: none; }
}