.cdc { font-size: 16px; --cdc-sticky-top: 120px; } /* отступ от верха окна: высота фиксированной шапки сайта + запас */
.cdc__title { margin: 0 0 16px; }
.cdc__sub { margin: 0 0 12px; font-size: 18px; }
.cdc__col { margin-bottom: 24px; }

/* Поля ввода */
.cdc__label { display: block; margin-bottom: 0; font-size: 14px; font-weight: 500; color: #4a5160; }
.cdc__input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 48px;
    margin-top: 4px;
    padding: 8px 14px;
    font-size: 16px;
    line-height: 1.3;
    color: #1d2230;
    background: #fff;
    border: 1px solid #c5cbd8;
    border-radius: 6px;
}
.cdc__input:focus { outline: none; border-color: #e30914; box-shadow: 0 0 0 3px rgba(227, 9, 20, .15); }
.cdc__input[readonly] { background: #eef0f4; color: #555c6b; cursor: not-allowed; }
.cdc__input.is-missing { background: #fffbee; border-color: #e0a000; }

/* Позиции */
.cdc__row {
    position: relative;
    margin-bottom: 14px;
    padding: 14px 52px 14px 14px;
    border: 1px solid #dde1ea;
    border-radius: 8px;
    background: #fafbff;
}
.cdc__cell-name { position: relative; }
.cdc__cell-name .cdc__input { margin-top: 0; }
.cdc__fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.cdc__remove {
    position: absolute; top: 10px; right: 10px;
    width: 34px; height: 34px;
    border: 0; border-radius: 6px; background: transparent;
    font-size: 24px; line-height: 1; color: #8a91a0; cursor: pointer;
}
.cdc__remove:hover { background: #ecebf3; color: #a12020; }

.cdc__suggest, .cdc__geo-suggest {
    position: absolute; z-index: 1000; left: 0; right: 0; top: 100%;
    margin: 4px 0 0; padding: 0; list-style: none;
    background: #fff; border: 1px solid #c5cbd8; border-radius: 6px;
    max-height: 360px; overflow: auto; box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.cdc__suggest li, .cdc__geo-suggest li { padding: 10px 14px; cursor: pointer; }
.cdc__suggest li:hover, .cdc__geo-suggest li:hover { background: #eef3ff; }

/* Кнопки */
.cdc__btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; margin: 0; padding: 8px 22px;
    font-size: 16px; line-height: 1.2; text-align: center;
    color: #fff; background: #e30914;
    border: 1px solid #e30914; border-radius: 6px; cursor: pointer;
}
.cdc__btn--ghost { color: #e30914; background: #fff; }

/* После клика мышью кнопка не остается «нажатой»: фокус показываем только при навигации с клавиатуры */
.cdc__btn:focus:not(:focus-visible) { color: #fff; background: #e30914; border-color: #e30914; box-shadow: none; outline: none; }
.cdc__btn--ghost:focus:not(:focus-visible) { color: #e30914; background: #fff; }
.cdc__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(227, 9, 20, .3); }

/* Наведение — только на устройствах с мышью (на телефоне hover «залипает» после касания) */
@media (hover: hover) {
    .cdc__btn:hover, .cdc__btn:focus:not(:focus-visible):hover { color: #fff; background: #b8070f; border-color: #b8070f; }
}
.cdc__btn:active, .cdc__btn:focus:not(:focus-visible):active { color: #fff; background: #b8070f; border-color: #b8070f; }
/* «Добавить позицию», «Рассчитать», «Рассчитать по корзине» — в одну строку */
.cdc__actions { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 10px; margin: 4px 0 0; }
.cdc__actions .cdc__btn { width: auto; flex: 0 1 auto; padding: 8px 14px; font-size: 15px; }

/* Карта */
.cdc__geo { margin-top: 16px; }
.cdc__geo-bar { position: relative; display: flex; gap: 10px; margin-bottom: 10px; }
.cdc__geo-bar .cdc__input { margin-top: 0; flex: 1; }
.cdc__map { height: clamp(260px, calc(100vh - 380px), 420px); border: 1px solid #c5cbd8; border-radius: 8px; z-index: 0; }
.cdc__route-info { margin-top: 10px; }
.cdc__geo-warn { color: #a15a00; }

/* Результат */
.cdc__result { scroll-margin-top: 150px; padding: 18px; border: 1px solid #dde1ea; border-radius: 8px; background: #fafbff; }
.cdc__totals { display: flex; gap: 32px; flex-wrap: wrap; margin-bottom: 10px; }
.cdc__totals span { display: block; color: #778; font-size: 13px; }
.cdc__totals b { font-size: 20px; }
.cdc__trips { padding-left: 20px; }
.cdc__table-wrap { overflow-x: auto; }
.cdc__table { border-collapse: collapse; width: 100%; }
.cdc__table th, .cdc__table td { border-bottom: 1px solid #e3e3ee; padding: 8px 10px; text-align: left; }
.cdc__warn { margin-top: 10px; padding: 10px 12px; background: #fff6e0; border: 1px solid #f0d58a; border-radius: 6px; }

@media (max-width: 575px) {
    .cdc__actions { flex-wrap: wrap; }
    .cdc__actions .cdc__btn { flex: 1 1 auto; }
    .cdc__fields { grid-template-columns: 1fr; }
    .cdc__map { height: 320px; }
}

/* Выбор барабана */
.cdc__drum { margin-top: 12px; }
/* Свой значок-стрелка вместо системного: отступ от правого края задается в background (right 24px) */
.cdc__select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 56px;
    cursor: pointer;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23555' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 10px center / 14px 9px;
}
.cdc__muted { color: #8a91a0; }
.cdc__drum-row td { padding-top: 4px; padding-bottom: 8px; font-size: 14px; color: #4a5160; background: #fcfcfe; }

/* Правая колонка (расстояние и карта) остается на месте, пока прокручивается список товаров */
@media (min-width: 992px) {
    .cdc__layout { display: flex; flex-wrap: wrap; }          /* колонки одной высоты (в том числе в Bootstrap 3) */
    .cdc__layout::before, .cdc__layout::after { display: none; }
}
.cdc__sticky { position: sticky; top: var(--cdc-sticky-top); }
@media (max-width: 767px) { .cdc__sticky { position: static; } }