/* rega-install.css — плашка «гид на телефон» (#rr-install), пара к rega-install.js.
   Подключается на главной и на хабе гида (EN+RU). Цвета — из переменных сайта. */
#rr-install {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 200;
  max-width: 440px; margin: 0 auto; display: flex;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 18px; padding: 13px 15px;
  box-shadow: 0 12px 38px rgba(10, 9, 8, 0.16);
  transform: translateY(170%);
  transition: transform .42s cubic-bezier(.2, .7, .2, 1);
}
#rr-install.on { transform: translateY(0); }
.rri-mark { width: 26px; height: 26px; flex: 0 0 auto; display: block; }
.rri-x {
  flex: 0 0 auto; background: transparent; border: none;
  color: var(--soft); font-size: 21px; line-height: 1; cursor: pointer; padding: 0 2px;
}

/* android — строка с brand-CTA (тёмная пилюля, uppercase mono, стрелка) */
#rr-install.android { flex-direction: row; align-items: center; gap: 12px; }
.rri-txt {
  flex: 1; font-family: "Bricolage Grotesque", sans-serif;
  font-size: 14px; line-height: 1.15; font-weight: 700;
  color: var(--ink); text-transform: lowercase;
}
.rri-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  border: none; cursor: pointer;
  background: var(--ink); color: var(--bg);
  border-radius: 999px; padding: 11px 16px;
  font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(10, 9, 8, 0.2);
  transition: gap .25s ease;
}
.rri-btn:hover { gap: 11px; }

/* ios — пошаговая карточка */
#rr-install.ios { flex-direction: column; align-items: stretch; gap: 13px; padding: 15px 16px 16px; }
.rri-head { display: flex; align-items: center; gap: 10px; }
.rri-title {
  flex: 1; font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800; font-size: 16px; line-height: 1.1;
  color: var(--ink); text-transform: lowercase; letter-spacing: -0.01em;
}
.rri-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rri-steps li {
  display: flex; align-items: center; gap: 11px;
  font-family: "JetBrains Mono", monospace; font-size: 12.5px; line-height: 1.3;
  color: var(--ink); text-transform: lowercase;
}
.rri-n {
  flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%;
  background: var(--acc); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.rri-share { color: var(--acc); vertical-align: -3px; }

/* desktop — QR «возьмите гид с собой» (комп → телефон) */
#rr-install.desktop {
  left: auto; right: 20px; bottom: 20px; margin: 0;
  flex-direction: row; align-items: stretch; gap: 15px;
  max-width: 360px; padding: 15px 16px;
}
.rri-qr { flex: 0 0 auto; width: 92px; height: 92px; }
.rri-qr svg { display: block; width: 100%; height: 100%; }
.rri-qrcol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.rri-qrtxt {
  margin: 0; font-family: "JetBrains Mono", monospace;
  font-size: 11.5px; line-height: 1.45;
  color: var(--soft); text-transform: lowercase;
}

@media (max-width: 380px) { .rri-txt { font-size: 13px; } .rri-steps li { font-size: 12px; } }