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

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

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

.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);
}

/* Производительность процессора — внизу карточки. Полоска показывает долю от
   самого мощного сервера каталога: силу видно раньше, чем прочитано число. */
.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;
}