/* iVstore — общие правила кнопок для всего сайта.
 *
 * Зачем файл вообще нужен. Тема задаёт цвет ссылок правилом
 * `.elementor-kit-210 a` — вес 0-1-1. Любая кнопка, сделанная ссылкой и
 * оформленная одним классом (вес 0-1-0), этим правилом перекрашивается в
 * фирменный лайм. На лаймовой кнопке это незаметно, а на синей кнопке
 * Telegram текст становится лаймовым на синем: контраст 1.7 при норме 4.5.
 *
 * Поэтому селекторы ниже намеренно удвоены — `.iv-btn.iv-btn` вместо
 * `.iv-btn`. Это поднимает вес до 0-2-0 и снимает зависимость от того,
 * какая таблица стилей загрузится последней. Приём известный и здесь
 * оправдан: иначе пришлось бы ставить !important, а его потом нечем
 * перебить в частных случаях.
 *
 * Как пользоваться на новых страницах:
 *   <a class="iv-btn iv-btn--primary">Оплатить</a>
 *   <button class="iv-btn iv-btn--ghost">Отмена</button>
 * Вариантов четыре: primary, ghost, tg, dc.
 */

:root{
  --iv-btn-h: 48px;              /* меньше 44 палец не берёт уверенно */
  --iv-btn-r: 100px;             /* та же «таблетка», что у кнопок на главной */
  --iv-btn-ease: .18s ease;
}

/* ————————————————————————— основа ————————————————————————— */

.iv-btn.iv-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:var(--iv-btn-h);
  padding:13px 26px;
  border:1px solid transparent;
  border-radius:var(--iv-btn-r);
  font:700 16px/1.25 Onest,system-ui,sans-serif;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:background-color var(--iv-btn-ease),
             border-color var(--iv-btn-ease),
             color var(--iv-btn-ease);
  -webkit-tap-highlight-color:transparent;
}

/* ——— главное действие ——— */
.iv-btn--primary.iv-btn--primary{
  background:var(--e-global-color-primary,#A5D400);
  border-color:var(--e-global-color-primary,#A5D400);
  color:var(--e-global-color-ongrn,#0B1400);
}
.iv-btn--primary.iv-btn--primary:hover,
.iv-btn--primary.iv-btn--primary:focus-visible{
  background:#B6EA0A;
  border-color:#B6EA0A;
  color:var(--e-global-color-ongrn,#0B1400);
}

/* ——— второстепенное ——— */
.iv-btn--ghost.iv-btn--ghost{
  background:transparent;
  border-color:var(--e-global-color-bordr,#232B38);
  color:var(--e-global-color-text,#EDF2F8);
}
.iv-btn--ghost.iv-btn--ghost:hover,
.iv-btn--ghost.iv-btn--ghost:focus-visible{
  background:var(--e-global-color-surf1,#141922);
  border-color:var(--e-global-color-muted,#93A0B2);
  color:var(--e-global-color-text,#EDF2F8);
}

/* ——— Telegram ———
   Берём тёмный оттенок из палитры (#0F7CB8), а не яркий #229ED9:
   белый текст на ярком даёт 3.0, на тёмном — 4.6, то есть проходит норму. */
.iv-btn--tg.iv-btn--tg{
  background:var(--e-global-color-tgblu,#0F7CB8);
  border-color:var(--e-global-color-tgblu,#0F7CB8);
  color:#fff;
}
.iv-btn--tg.iv-btn--tg:hover,
.iv-btn--tg.iv-btn--tg:focus-visible{
  background:#0C6699;
  border-color:#0C6699;
  color:#fff;
}

/* ——— Discord ——— */
.iv-btn--dc.iv-btn--dc{
  background:var(--e-global-color-dcblu,#5865F2);
  border-color:var(--e-global-color-dcblu,#5865F2);
  color:#fff;
}
.iv-btn--dc.iv-btn--dc:hover,
.iv-btn--dc.iv-btn--dc:focus-visible{
  background:var(--e-global-color-dcblh,#4854E0);
  border-color:var(--e-global-color-dcblh,#4854E0);
  color:#fff;
}

.iv-btn.iv-btn[disabled],
.iv-btn.iv-btn[aria-disabled="true"]{
  opacity:.5;
  cursor:not-allowed;
  pointer-events:none;
}

/* ————————————— уже существующие кнопки сайта —————————————
   Их разметку не трогаем, но защищаем от перекраски правилом ссылок
   и выдаём тот же отклик на наведение. */

.ivpay-btn.ivpay-btn{color:var(--e-global-color-text,#EDF2F8)}
.ivpay-btn--go.ivpay-btn--go{color:var(--e-global-color-ongrn,#0B1400)}
.ivpay-btn--go.ivpay-btn--go:hover{background:#B6EA0A;border-color:#B6EA0A}
.ivpay-btn--tg.ivpay-btn--tg{
  background:var(--e-global-color-tgblu,#0F7CB8);
  border-color:var(--e-global-color-tgblu,#0F7CB8);
  color:#fff}
.ivpay-btn--tg.ivpay-btn--tg:hover{background:#0C6699;border-color:#0C6699;color:#fff}
.ivpay-btn--ghost.ivpay-btn--ghost{color:var(--e-global-color-text,#EDF2F8)}
.ivpay-btn--ghost.ivpay-btn--ghost:hover{
  background:var(--e-global-color-surf1,#141922);
  border-color:var(--e-global-color-muted,#93A0B2);
  color:var(--e-global-color-text,#EDF2F8)}

/* ————————————————— видимый фокус с клавиатуры —————————————————
   Его не было ни у одной кнопки: пройти оформление заказа с клавиатуры
   было невозможно — не видно, где находишься. Обводка одна на всех и
   держится на любом фоне. */

.iv-btn:focus-visible,
.ivpay-btn:focus-visible,
.iv-b:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce #place_order:focus-visible,
.elementor-button:focus-visible,
.wp-block-button__link:focus-visible{
  outline:2px solid var(--e-global-color-primary,#A5D400);
  outline-offset:3px;
}

/* ——————————————————————— телефон ———————————————————————
   На узком экране кнопки во всю ширину: промахнуться мимо узкой цели
   пальцем легко, а места всё равно хватает. */
@media(max-width:600px){
  .iv-btn.iv-btn{width:100%;padding:14px 20px}
  .iv-btn.iv-btn--inline{width:auto}
}

@media(prefers-reduced-motion:reduce){
  .iv-btn.iv-btn{transition:none}
}