/* ---- плашка внизу ---- */
/* Нижние 40-60 пикселей экрана телефона принадлежат не нам: нижняя адресная строка
   Яндекс.Браузера, тулбар Chrome, жестовая полоса Android, полоса home в iOS.
   Плашка стоит на bottom:0, поэтому кнопки уезжали ровно туда. Низ поднимаем на
   безопасную зону; работает вместе с viewport-fit=cover в мете (_book_brand.php). */
.lag-bar{position:fixed;left:0;right:0;bottom:0;z-index:9992;background:linear-gradient(135deg,#c64d53,#6d5bd0);
  color:#fff;padding:14px 18px;padding-bottom:max(14px,env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;
  box-shadow:0 -6px 24px rgba(0,0,0,.18);transform:translateY(115%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.lag-bar.on{transform:translateY(0)}
.lag-bar .tx{font-size:14.5px;line-height:1.45;max-width:640px}
.lag-bar .tx b{display:block;font-size:16px;margin-bottom:2px}
.lag-bar .bt{display:flex;gap:9px;flex-wrap:wrap}
.lag-bar .b{border:0;border-radius:11px;padding:11px 20px;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap}
.lag-bar .b1{background:#fff;color:#c64d53}
.lag-bar .b2{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.5)}
.lag-bar .x{position:absolute;top:4px;right:6px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:rgba(255,255,255,.85);font-size:21px;line-height:1;cursor:pointer}
.lag-bar{padding-right:44px}
.lag-bar .lag-s{display:none}
/* Телефон. Было 165px, пятая часть экрана: длинный текст в четыре строки плюс
   кнопки отдельным рядом. Стало около 95px: короткий текст в одну строку,
   заголовок без переноса, кнопки ниже.
   Правый зазор под крестик задаём тексту, а не всей плашке: шорткат padding
   в этой медиа затирал padding-right:44px, и крестик 34x34 ложился на слова. */
@media(max-width:600px){
  .lag-bar{padding:9px 13px;padding-bottom:max(9px,env(safe-area-inset-bottom,0px));gap:7px}
  .lag-bar .tx{font-size:13px;line-height:1.35;width:100%;padding-right:34px;box-sizing:border-box}
  .lag-bar .tx b{font-size:14.5px;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lag-bar .lag-l{display:none}
  .lag-bar .lag-s{display:inline}
  .lag-bar .bt{flex:1 1 100%;gap:8px;flex-wrap:nowrap}
  /* line-height задаём явно: от body приходит 1.6, и кнопка вырастала до 42px */
  .lag-bar .b{flex:1;text-align:center;padding:10px;font-size:13.5px;line-height:1.2;border-radius:10px}
}

/* ---- модалка с формой ---- */
.lag-mod{position:fixed;inset:0;z-index:10050;background:rgba(20,16,30,.62);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
.lag-mod.on{display:flex}
.lag-box{background:var(--card,#fff);border-radius:20px;max-width:400px;width:100%;padding:26px 24px 22px;
  box-shadow:0 22px 64px rgba(0,0,0,.32);animation:lagPop .26s ease;position:relative}
@keyframes lagPop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.lag-box h3{font-family:var(--head,Georgia,serif);font-size:20px;margin:0 0 7px;color:var(--text,#241c33);text-align:center}
.lag-box .sub{color:var(--muted,#8b8499);font-size:13.5px;line-height:1.5;margin:0 0 16px;text-align:center}
.lag-box .x{position:absolute;top:10px;right:13px;background:none;border:0;color:var(--muted,#8b8499);font-size:24px;line-height:1;cursor:pointer}
.lag-f{display:flex;flex-direction:column;gap:9px}
.lag-f input[type=text],.lag-f input[type=email],.lag-f input[type=password]{
  width:100%;border:1px solid var(--border,#e6e6ec);border-radius:12px;padding:12px 14px;font:inherit;font-size:15px;
  background:var(--bg,#fff);color:var(--text,#241c33);box-sizing:border-box}
.lag-f input:focus{outline:none;border-color:#c64d53;box-shadow:0 0 0 3px rgba(198,77,83,.13)}
.lag-pw{position:relative}
.lag-pw .see{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:0;
  color:var(--muted,#8b8499);font-size:12.5px;cursor:pointer;padding:2px 4px}
.lag-go{background:linear-gradient(135deg,#c64d53,#6d5bd0);color:#fff;border:0;border-radius:12px;padding:13px;
  font:inherit;font-size:15.5px;font-weight:700;cursor:pointer;margin-top:3px}
.lag-go:disabled{opacity:.6;cursor:default}
.lag-err{background:#fdeced;color:#b3373d;border-radius:10px;padding:10px 12px;font-size:13.5px;line-height:1.45;display:none}
.lag-err.on{display:block}
.lag-err a{color:#b3373d;font-weight:700}
.lag-or{display:flex;align-items:center;gap:10px;color:var(--muted,#8b8499);font-size:12.5px;margin:14px 0 10px}
.lag-or:before,.lag-or:after{content:'';flex:1;height:1px;background:var(--border,#e9e9ef)}
.lag-foot{text-align:center;font-size:13px;color:var(--muted,#8b8499);margin-top:13px}
.lag-foot a{color:#c64d53;font-weight:600;text-decoration:none}
.lag-legal{text-align:center;font-size:11.5px;color:var(--muted,#a9a3b5);margin-top:11px;line-height:1.45}
.lag-legal a{color:inherit;text-decoration:underline}
.lag-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}