/* ============================================================================
   cp.lv — кнопки панели в стиле сайта.

   Панель идёт на Bootstrap 4 темы 2019, сайт — на Snowlake. Раньше кнопки
   выглядели по-разному: синий bootstrap-primary с прямыми углами против зелёных
   скруглённых кнопок сайта. Здесь переопределяются только кнопки (и то, что с
   ними в паре: бейдж-статусы, поля ввода в фокусе), остальная вёрстка панели
   не трогается.

   Значения взяты из темы сайта (sites/cp.lv/assets/css):
     --color-green #9ccd7e, --color-dark #404040, .btn { border-radius: 1.25rem }
     hover = мягкая подсветка box-shadow 0 0 0 5px rgba(зелёный, .25)

   Подключается из templates/2019/custom/auth.tpl — он включён в header.tpl,
   то есть работает на всех страницах панели. Файл лежит в custom/ (папка в
   auto-upgrade exclude), стоковые файлы темы не правятся.
   ============================================================================ */

:root {
    --cplv-green: #9ccd7e;
    --cplv-green-dark: #86bb66;
    --cplv-dark: #404040;
    --cplv-border: #dfe3e8;
    --cplv-glow: 0 0 0 5px rgba(156, 205, 126, .25);
}

/* ---- базовая форма кнопки: скругление и вес как на сайте ---- */
.btn,
.btn.btn-sm,
.btn.btn-lg {
    border-radius: 1.25rem;
    font-weight: 600;
    letter-spacing: .01em;
    transition: background-color .15s ease, box-shadow .15s ease, color .15s ease;
}

/* ---- главные действия: зелёные, как «Заказать» на сайте ---- */
.btn-primary,
.btn-success,
.btn-info {
    background-color: var(--cplv-green);
    border-color: var(--cplv-green);
    color: #fff;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-info:hover, .btn-info:focus, .btn-info:active {
    background-color: var(--cplv-green-dark);
    border-color: var(--cplv-green-dark);
    color: #fff;
    box-shadow: var(--cplv-glow);
}

/* «Оплатить сейчас!» и прочие ключевые действия в списках — тот же зелёный */
.btn_pay, .btn-paynow, .btn-paynow2 {
    background-color: var(--cplv-green);
    border-color: var(--cplv-green);
    border-radius: 1.25rem;
    color: #fff;
}
.btn_pay:hover, .btn-paynow:hover, .btn-paynow2:hover {
    background-color: var(--cplv-green-dark);
    color: #fff;
}

/* ---- второстепенные действия: светлая кнопка с рамкой ---- */
.btn-secondary,
.btn-light,
.btn-default {
    background-color: #fff;
    border-color: var(--cplv-border);
    color: var(--cplv-dark);
}
.btn-secondary:hover, .btn-secondary:focus,
.btn-light:hover, .btn-light:focus,
.btn-default:hover, .btn-default:focus {
    background-color: #f7f8fa;
    border-color: #cfd4dc;
    color: var(--cplv-dark);
}

.btn-dark {
    background-color: var(--cplv-dark);
    border-color: var(--cplv-dark);
    color: #fff;
}
.btn-dark:hover { background-color: #2b2b2b; border-color: #2b2b2b; color: #fff; }

/* ---- контурные кнопки ---- */
.btn-outline-primary,
.btn-outline-success {
    color: var(--cplv-green-dark);
    border-color: var(--cplv-green);
    background-color: transparent;
}
.btn-outline-primary:hover,
.btn-outline-success:hover {
    background-color: var(--cplv-green);
    border-color: var(--cplv-green);
    color: #fff;
}

/* Опасные действия остаются красными — цвет здесь несёт смысл, меняем только форму */
.btn-danger, .btn-outline-danger { border-radius: 1.25rem; }

/* ---- элементы, которые смотрятся вместе с кнопками ---- */
/* фокус полей — той же зелёной подсветкой, а не bootstrap-синим */
.form-control:focus,
.custom-select:focus {
    border-color: var(--cplv-green);
    box-shadow: var(--cplv-glow);
}

/* ссылки-действия в таблицах и карточках */
a.btn-link, .btn-link { color: var(--cplv-green-dark); }
a.btn-link:hover, .btn-link:hover { color: var(--cplv-dark); }

/* статус счёта: зелёный «оплачен» в тон кнопкам */
.badge-Paid, .badge-Active { background-color: var(--cplv-green); color: #fff; }

/* ---------------------------------------------------------------------------
   Ниже те же правила, но с приоритетом: файл подключается раньше основного CSS
   темы, поэтому без усиления селектора тема перебивала цвет и скругление.
   Область ограничена кнопками — на остальную вёрстку панели это не влияет.
   --------------------------------------------------------------------------- */
body .btn, body .btn.btn-sm, body .btn.btn-lg,
body .btn_pay, body .btn-paynow, body .btn-paynow2 {
    border-radius: 1.25rem !important;
    font-weight: 600;
}
body .btn-primary, body .btn-success, body .btn-info,
body .btn_pay, body .btn-paynow, body .btn-paynow2 {
    background-color: var(--cplv-green) !important;
    border-color: var(--cplv-green) !important;
    color: #fff !important;
}
body .btn-primary:hover, body .btn-success:hover, body .btn-info:hover,
body .btn_pay:hover, body .btn-paynow:hover, body .btn-paynow2:hover {
    background-color: var(--cplv-green-dark) !important;
    border-color: var(--cplv-green-dark) !important;
    box-shadow: var(--cplv-glow);
}
body .btn-secondary, body .btn-light, body .btn-default {
    background-color: #fff !important;
    border-color: var(--cplv-border) !important;
    color: var(--cplv-dark) !important;
}
body .btn-secondary:hover, body .btn-light:hover, body .btn-default:hover {
    background-color: #f7f8fa !important;
    color: var(--cplv-dark) !important;
}
body .btn-dark { background-color: var(--cplv-dark) !important; border-color: var(--cplv-dark) !important; color: #fff !important; }
/* Контурные кнопки. Исключаем те, у которых уже есть цветовой класс темы сайта
   (.btn-green/.btn-red/.btn-dark/.btn-blue/.btn-sky): такими свёрстаны кнопки входа
   и соцсетей на страницах логина, регистрации и восстановления пароля — им нужен
   свой фон, а не прозрачный. */
body .btn-outline-primary:not(.btn-green):not(.btn-red):not(.btn-dark):not(.btn-blue):not(.btn-cobalt):not(.btn-sky),
body .btn-outline-success:not(.btn-green):not(.btn-red):not(.btn-dark):not(.btn-blue):not(.btn-cobalt):not(.btn-sky) {
    color: var(--cplv-green-dark) !important;
    border-color: var(--cplv-green) !important;
    background-color: transparent !important;
}
body .btn-outline-primary:not(.btn-green):not(.btn-red):not(.btn-dark):not(.btn-blue):not(.btn-cobalt):not(.btn-sky):hover,
body .btn-outline-success:not(.btn-green):not(.btn-red):not(.btn-dark):not(.btn-blue):not(.btn-cobalt):not(.btn-sky):hover {
    background-color: var(--cplv-green) !important;
    color: #fff !important;
}

/* ---- цветные кнопки темы сайта: вход и соцсети ----
   Значения те же, что в sites/cp.lv/assets/css (--color-red/blue/sky/dark/green). */
body .btn-green { background-color: var(--cplv-green) !important; border-color: var(--cplv-green) !important; color: #fff !important; }
body .btn-green:hover { background-color: var(--cplv-green-dark) !important; border-color: var(--cplv-green-dark) !important; color: #fff !important; }
body .btn-red { background-color: #d75959 !important; border-color: #d75959 !important; color: #fff !important; }
body .btn-red:hover { background-color: #c44e4e !important; border-color: #c44e4e !important; color: #fff !important; }
body .btn-cobalt { background-color: #4267b2 !important; border-color: #4267b2 !important; color: #fff !important; }
body .btn-cobalt:hover { background-color: #375593 !important; border-color: #375593 !important; color: #fff !important; }
body .btn-blue { background-color: #5ca7db !important; border-color: #5ca7db !important; color: #fff !important; }
body .btn-blue:hover { background-color: #4b95c8 !important; border-color: #4b95c8 !important; color: #fff !important; }
body .btn-sky { background-color: #5f86be !important; border-color: #5f86be !important; color: #fff !important; }
body .btn-sky:hover { background-color: #4f74a9 !important; border-color: #4f74a9 !important; color: #fff !important; }
body .form-control:focus, body .custom-select:focus {
    border-color: var(--cplv-green) !important;
    box-shadow: var(--cplv-glow) !important;
}
body .badge-Paid, body .badge-Active { background-color: var(--cplv-green) !important; color: #fff !important; }

/* Выбранный тариф в каталоге: тема красит его синим — переводим в фирменный зелёный,
   чтобы выделение совпадало с кнопкой заказа. */
body .cart-product.selected,
body .card.cart-product.selected {
    background-color: var(--cplv-green) !important;
    border-color: var(--cplv-green) !important;
}
body .cart-product.selected * { color: #fff !important; }
body .cart-product.selected .text-muted { color: rgba(255, 255, 255, .8) !important; }