/* ============================================================================
   Панель подбора выделенного сервера (страница заказа cplv_dedicated).

   Серверов в категории 47 — простыня карточек без отбора нечитаема. Панель даёт
   сортировку и фильтры по линейке, процессору, памяти, диску и цене.

   Стиль совпадает с сайтом cp.lv: зелёный акцент #9ccd7e, скругление 1.25rem,
   те же поля ввода, что и в панели (Bootstrap 4 темы 2019).
   ============================================================================ */

/* Акция «за год установка бесплатно» — первое, что видно над каталогом. */
.cplv-yearpromo {
    display: inline-block;
    margin-bottom: .8rem;
    padding: .45rem 1.1rem;
    border-radius: 1.25rem;
    background: rgba(156, 205, 126, .16);
    border: 1px solid rgba(156, 205, 126, .55);
    color: #3f6b28;
    font-weight: 700;
    font-size: .92rem;
}

/* Карточки продуктов компактнее: их в категории полсотни, и чем короче карточка,
   тем больше их видно на экране без прокрутки. */
#cplv-products > [class*="col-"] > .cart-product {
    padding-top: 4px !important;
}

#cplv-products .cart-product .cart-product-section.py-4 {
    padding-top: 1rem !important;
    padding-bottom: .6rem !important;
}

#cplv-products .cart-product h4 {
    font-size: 1.05rem;
    margin-bottom: .2rem;
}

#cplv-products .cart-product .h1 {
    font-size: 1.6rem;
}

#cplv-products .cart-product .row.mx-3 {
    margin-left: .35rem !important;
    margin-right: .35rem !important;
    font-size: .84rem;
}

#cplv-products .cart-product .row.mx-3 > div {
    padding-top: .1rem !important;
    padding-bottom: .1rem !important;
}

#cplv-products .cart-product .my-3 {
    margin-top: .5rem !important;
    margin-bottom: .5rem !important;
}

/* Промокод: неброская ссылка на месте бывшего заголовка «Выберите продукт»,
   поле разворачивается по клику — купоном пользуется меньшинство, а место вверху дорогое. */
.cplv-promo__link {
    display: inline-block;
    font-size: .85rem;
    font-weight: 600;
    color: #5c6470;
    border-bottom: 1px dashed #b9c0ca;
    text-decoration: none;
}

.cplv-promo__link:hover,
.cplv-promo--open .cplv-promo__link {
    color: #2f6feb;
    border-bottom-color: #2f6feb;
    text-decoration: none;
}

.cplv-promo__form {
    display: flex;
    gap: .5rem;
    margin-top: .6rem;
    max-width: 380px;
}

.cplv-promo__input.form-control {
    border-radius: 1.25rem;
    border-color: #dfe3e8;
    height: auto;
    padding: .45rem .9rem;
    font-size: .95rem;
}

.cplv-promo__input.form-control:focus {
    border-color: #2f6feb;
    box-shadow: 0 0 0 4px rgba(47, 111, 235, .2);
}

.cplv-promo__btn {
    border-radius: 1.25rem;
    padding: .35rem 1.2rem;
    font-weight: 600;
    white-space: nowrap;
    background: #2f6feb;
    border: 1px solid #2f6feb;
    color: #fff;
}

.cplv-promo__btn:hover,
.cplv-promo__btn:focus {
    background: #1f57c8;
    border-color: #1f57c8;
    color: #fff;
}

/* Штатный блок купона в итогах («Использовать промокод») оформлен как шаг мастера:
   кружок с номером + крупный h3. Промокод шагом заказа не является — номер убираем,
   заголовок делаем обычной подписью. Блок приходит из стокового ajax.onestep_cloud_2019.tpl,
   который мы не копируем, поэтому только стилями. */
.input-coupon_js .cart-products-scount_js {
    display: none !important;
}

.input-coupon_js h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #5c6470;
    margin-bottom: 0;
}

/* Номера оставшихся шагов считаем сами: у купона номера больше нет, и без этого
   нумерация начиналась бы с двойки. */
#orderpage {
    counter-reset: cplvstep;
}

#orderpage .cart-products-scount_js {
    font-size: 0;
}

#orderpage .cart-products-scount_js::before {
    counter-increment: cplvstep;
    content: counter(cplvstep);
    font-size: 1rem;
}

.cplv-filters {
    background: #f7f8fa;
    border: 1px solid #e6e9ee;
    border-radius: 1rem;
    padding: 1rem 1.25rem .75rem;
    margin-bottom: 1.5rem;
}

.cplv-filters__row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
}

.cplv-filters__field {
    display: flex;
    flex-direction: column;
    flex: 1 1 150px;
    min-width: 140px;
    margin-bottom: 0;
}

.cplv-filters__field--wide { flex: 2 1 220px; }

.cplv-filters__label {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #7a8291;
    margin-bottom: .25rem;
}

.cplv-filters .form-control {
    border-radius: 1.25rem;
    border-color: #dfe3e8;
    height: auto;
    padding: .45rem .9rem;
    font-size: .95rem;
    background-color: #fff;
}

.cplv-filters .form-control:focus {
    border-color: #9ccd7e;
    box-shadow: 0 0 0 5px rgba(156, 205, 126, .25);
}

.cplv-filters__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .75rem;
    padding-top: .6rem;
    border-top: 1px solid #e6e9ee;
}

.cplv-filters__count {
    font-size: .9rem;
    color: #5c6470;
}

.cplv-filters__count b { color: #404040; }

.cplv-filters__reset {
    border-radius: 1.25rem;
    border: 1px solid #dfe3e8;
    background: #fff;
    color: #404040;
    font-weight: 600;
    padding: .3rem 1rem;
}

.cplv-filters__reset:hover {
    background: #9ccd7e;
    border-color: #9ccd7e;
    color: #fff;
}

/* строка «ничего не найдено» — на месте карточек */
.cplv-filters__empty {
    padding: 2rem 1rem;
    text-align: center;
    color: #7a8291;
    background: #fff;
    border: 1px dashed #dfe3e8;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
}

/* карточка, отсеянная фильтром */
.cplv-hidden { display: none !important; }

@media (max-width: 575.98px) {
    .cplv-filters { padding: .85rem .9rem .6rem; }
    .cplv-filters__field { flex: 1 1 100%; }
}

/* Карточки одной высоты в ряду: у серверов OVH описания дисков и канала разной
   длины, и без выравнивания ряд выглядит рваным. */
#cplv-products > [class*="col-"] {
    display: flex;
}

#cplv-products > [class*="col-"] > .cart-product {
    width: 100%;
    margin-bottom: 1.5rem;
}

/* Разовая плата за установку под ценой — мелко и приглушённо: это уточнение
   к цене, а не второй ценник. */
.cplv-setup {
    margin-top: .35rem;
    min-height: 1.35rem;
    line-height: 1.35rem;
}

.cplv-setup__line {
    font-size: .78rem;
    font-weight: 600;
    color: #7a8291;
}

/* установка не берётся — это уже не сноска, а повод выбрать сервер */
.cplv-setup__line--free {
    display: inline-block;
    padding: .1rem .6rem;
    border-radius: 1rem;
    background: rgba(156, 205, 126, .18);
    color: #4d7a33;
    letter-spacing: .01em;
}

/* и сама карточка с промо выделяется рамкой */
#cplv-products > [class*="col-"] > .cart-product.cplv-promo {
    border-color: #9ccd7e;
    box-shadow: 0 0 0 1px rgba(156, 205, 126, .45);
}

/* Выбранный продукт. Стоковая тема заливает карточку синим и красит весь текст
   в белый — рядом с зелёными промо-плашками получается три ярких цвета сразу.
   Меняем на спокойную серую подсветку и возвращаем тексту обычные цвета.
   Селектор с id и !important нужны, чтобы перебить и стоковое
   `.cart-product.selected * {color:#fff}`, и брендинг темы: он красит выбранную
   карточку фирменным зелёным через !important. */
#cplv-products > [class*="col-"] > .cart-product.selected:not(.outofstock) {
    background-color: rgba(64, 64, 64, .07) !important;
    border-color: #b9c0ca !important;
    box-shadow: 0 6px 22px -12px rgba(37, 45, 51, .45) !important;
}

#cplv-products > [class*="col-"] > .cart-product.selected:not(.outofstock) * {
    color: #404040 !important;
}

/* цену и подписи возвращаем в их обычные цвета — вместе с вложенными span'ами,
   иначе правило выше (`* {color:#404040}`) перекрашивает саму сумму */
#cplv-products > [class*="col-"] > .cart-product.selected:not(.outofstock) .text-primary,
#cplv-products > [class*="col-"] > .cart-product.selected:not(.outofstock) .text-primary * {
    color: #3891f2 !important;
}

#cplv-products > [class*="col-"] > .cart-product.selected:not(.outofstock) .text-muted,
#cplv-products > [class*="col-"] > .cart-product.selected:not(.outofstock) .text-muted * {
    color: #7a8291 !important;
}

#cplv-products > [class*="col-"] > .cart-product.selected:not(.outofstock) .cplv-setup__line--free {
    color: #4d7a33;
}

#cplv-products > [class*="col-"] > .cart-product.selected:not(.outofstock) .cplv-bench__head span,
#cplv-products > [class*="col-"] > .cart-product.selected:not(.outofstock) .cplv-bench__note {
    color: #7a8291;
}

/* Кнопка «Заказ». Зелёный на этой странице теперь означает «без платы за установку»,
   поэтому главное действие уводим в синий — иначе промо и кнопка спорят за внимание. */
/* !important обязателен: брендинг темы красит .btn-success фирменным зелёным
   тоже через !important, без него наш цвет не применится. */
button[onclick^="submitOrder"].btn,
.orderpage-summary button[onclick^="submitOrder"] {
    background-color: #2f6feb !important;
    border-color: #2f6feb !important;
    color: #fff !important;
}

button[onclick^="submitOrder"].btn:hover,
button[onclick^="submitOrder"].btn:focus,
button[onclick^="submitOrder"].btn:active {
    background-color: #1f57c8 !important;
    border-color: #1f57c8 !important;
    color: #fff !important;
    box-shadow: 0 0 0 4px rgba(47, 111, 235, .25) !important;
}

/* Производительность процессора — внизу карточки. Полоска показывает долю от
   самого мощного сервера каталога: силу видно раньше, чем прочитано число. */
.cplv-bench {
    margin: auto 1rem .9rem;
    padding-top: .7rem;
    border-top: 1px solid #eef0f3;
}

.cplv-bench__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    font-size: .78rem;
    color: #7a8291;
}

.cplv-bench__head b {
    font-size: 1rem;
    color: #404040;
    letter-spacing: -.01em;
}

.cplv-bench__bar {
    height: 6px;
    margin-top: .35rem;
    border-radius: 3px;
    background: #eef0f3;
    overflow: hidden;
}

.cplv-bench__bar i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #c7e3b2, #9ccd7e);
}

.cplv-bench__note {
    margin-top: .25rem;
    font-size: .68rem;
    color: #9aa1ad;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* карточка — колонка, чтобы блок производительности прижимался к низу */
#cplv-products > [class*="col-"] > .cart-product {
    display: flex;
    flex-direction: column;
}