/* ЭлектроХод — кнопки и пилюльная пара (ДИЗАЙН-СИСТЕМА.md, п. 2.2).
   Один компонент на весь сайт, шапку и админку. Подключает Core\HtmlLayout сразу после tokens.css
   на каждой экранной странице — в том числе там, где нет style.css (шапка есть везде).
   Чисел здесь нет: только токены из assets/tokens.css.
   Вторые селекторы «.site-header .btn…» — тот же компонент, поднятый над постраничными правилами:
   кабинет, /track и /offline рисуют свою .btn, а кнопки шапки должны остаться общими. */

.btn,.site-header .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);
  padding:var(--btn-pad-y) var(--btn-pad-x);border:var(--bw) solid transparent;border-radius:var(--r-md);
  font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-btn);font-weight:var(--fw-semibold);
  white-space:nowrap;text-decoration:none;cursor:pointer;transition:var(--t-btn)}

/* основная: синий градиент var(--accent-2) → var(--accent-deep) под белым текстом; яркость при наведении не поднимаем (контраст) */
.btn--accent,.site-header .btn--accent{position:relative;overflow:hidden;background:var(--grad-btn);color:var(--on-accent)}
.btn--accent:hover,.site-header .btn--accent:hover{transform:translateY(var(--btn-hover-shift));box-shadow:var(--sh-btn-hover)}
/* блик — декоративный, только при наведении; геометрия и прозрачность прежние (п. 3.3) */
.btn--accent::after{content:"";position:absolute;top:0;left:var(--shine-from);width:var(--shine-w);height:100%;
  background:linear-gradient(var(--shine-angle),transparent,var(--shine),transparent);
  transform:skewX(var(--shine-skew));pointer-events:none}
.btn--accent:hover::after{animation:btnShine var(--t-shine) ease}
@keyframes btnShine{from{left:var(--shine-from)}to{left:var(--shine-to)}}

.btn--ghost,.site-header .btn--ghost{background:transparent;border-color:var(--border);color:var(--text)}
.btn--ghost:hover,.site-header .btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn--danger{background:transparent;border-color:var(--err);color:var(--err)}
.btn--danger:hover{background:var(--err-bg)}
.btn--sm,.site-header .btn--sm{padding:var(--btn-sm-pad-y) var(--btn-sm-pad-x);font-size:var(--fs-sm);line-height:var(--lh-btn-sm)}
.btn--block{width:100%}

/* без блика там, где однотипных кнопок много подряд (п. 2.2) */
.prod .btn::after,.prod__addbtn::after,.rep-add::after,.rent-model__cta::after{display:none!important}
.prod .btn:hover,.prod__addbtn:hover,.rep-add:hover,.rent-model__cta:hover{box-shadow:none}

/* кнопка внутри строки или карточки */
.rowbtn{display:inline-flex;align-items:center;justify-content:center;
  padding:var(--rowbtn-pad-y) var(--rowbtn-pad-x);border:var(--bw) solid var(--border);border-radius:var(--r-sm);
  background:transparent;color:var(--text);font-family:var(--font);font-size:var(--fs-xs);line-height:var(--lh-rowbtn);
  font-weight:var(--fw-semibold);white-space:nowrap;text-decoration:none;cursor:pointer}
.rowbtn--accent{background:var(--grad-btn);border-color:transparent;color:var(--on-accent)}
.rowbtn--danger{border-color:var(--err);color:var(--err)}
.rowbtn--danger:hover{background:var(--err-bg)}

/* «пилюльная» пара: две кнопки впритык в общей плашке; эталон — пара hero главной.
   Ширина: внутри карточек, панелей и форм — на всю ширину контейнера; на открытом месте страницы
   (hero, /order, модернизация, аренда) пара помечена .btn-pair--page и не шире 520px. */
.btn-pair{display:flex;gap:0;overflow:hidden;border-radius:var(--r-pair)}
.btn-pair--page{max-width:var(--pair-maxw)}
/* min-width:min-content — длинная надпись («Оставить заявку на аренду») не обрезается на телефоне,
   соседняя кнопка уступает ей место */
.btn-pair>.btn{flex:var(--pair-flex);min-width:min-content;height:var(--btn-sm-h);
  padding:var(--pair-pad-y) var(--pair-pad-x);border:var(--bw) solid transparent;border-radius:0;
  font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:var(--fw-semibold)}
/* тёмная половина в рамке — не сливается с фоном карточки; черта между половинами остаётся (правило ниже) */
.btn-pair>.btn--ghost{background:var(--card);color:var(--text);border-color:var(--border)}
.btn-pair>.btn:not(:last-child){border-right:var(--bw-strong) solid var(--pair-divider)}
/* короткая подпись половинки — только на телефоне */
.btn-pair__short{display:none}

@media(max-width:640px){
  .rowbtn{font-size:var(--fs-2xs)}
  .btn-pair--page{max-width:100%}
  .btn-pair__long{display:none}
  .btn-pair__short{display:inline}
}
@media(prefers-reduced-motion:reduce){
  .btn{transition:none}
  .btn--accent:hover{transform:none}
  .btn--accent::after{display:none}
}