/* /local/css/marka-calc.css */
/* Подбор марки бетона по виду работ — v2.3 (универсальный поиск + оформление заказа) */

/* Баннер над калькулятором (fund3c) */
.fund3c-banner{
  background:#dc2626;
  color:#fff;
  font-weight:800;
  padding:12px 16px;
  border-radius:12px 12px 0 0;
  margin:0;
  line-height:1.2;
  font-size:18px;
  letter-spacing:.2px;
}

/* Корпус калькулятора подбора марки */
.cgtool[data-tool="concrete-grade-sugg-v2"]{
  --accent:#dc2626;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --panel:#ffffff;

  /* токены под шаги 3–4 / psb-delivery */
  --mc-primary:#dc2626;
  --mc-border-soft:#e5e7eb;
  --mc-text:#111827;
  --mc-muted:#6b7280;
  --mc-field-height:46px;

  --del-accent:#dc2626;
  --del-ink:#111827;
  --del-muted:#6b7280;
  --del-border:#e5e7eb;
  --del-bg:#ffffff;

  max-width:100%;
  border:1px solid var(--line);
  border-top:none;
  border-radius:0 0 16px 16px;
  padding:16px;
  background:#ffffff;
  box-sizing:border-box;
}

.cgtool[data-tool="concrete-grade-sugg-v2"] *{
  box-sizing:border-box;
}

.cgtool .card{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
}

.cgtool h4{
  margin:0 0 10px;
  font-size:16px;
}

.cgtool .note{
  color:#64748b;
  font-size:12px;
  line-height:1.35;
}

.cgtool .field{
  position:relative;
  z-index:20; /* поле с подсказками выше всего вокруг */
}

.cgtool input[type="text"]{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  outline:none;
  background:#ffffff;
  font-size:14px;
  line-height:1.3;
  color:var(--ink);
  transition:border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}

.cgtool input[type="text"]:focus{
  border-color:#cbd5e1;
  box-shadow:0 0 0 3px rgba(220,38,38,.12);
  background:#ffffff;
}

/* Подсказки */
.cgtool .suggest{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(2,6,23,.08);
  z-index:9999;
  display:none;
  max-height:320px;
  overflow:auto;
}

.cgtool .sg-item{
  padding:10px 12px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.cgtool .sg-item:hover,
.cgtool .sg-item.active{
  background:#f8fafc;
}

.cgtool .sg-left{
  color:#0f172a;
  font-size:14px;
}

.cgtool .sg-left mark{
  background:#fde68a;
  color:inherit;
  padding:0 1px;
  border-radius:3px;
}

.cgtool .sg-right{
  color:#64748b;
  font-size:12px;
  white-space:nowrap;
}

/* Результат подбора марки */
.cgtool .result-wide{
  margin-top:16px;
}

.cgtool .result-cap{
  background:var(--accent);
  color:#ffffff;
  font-weight:800;
  padding:10px 14px;
  border-radius:12px 12px 0 0;
  letter-spacing:.2px;
}

.cgtool .result-panel{
  border:1px solid var(--line);
  border-top:none;
  border-radius:0 0 12px 12px;
  background:#ffffff;
  padding:16px;
  box-shadow:0 8px 24px rgba(2,6,23,.06);
  display:grid;
  gap:12px;
  position:relative;
  z-index:1;
}

.cgtool .grade-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  position:relative;
  z-index:1;
}

.cgtool .grade-badge{
  font-weight:900;
  font-size:28px;
  letter-spacing:.5px;
  padding:10px 14px;
  border-radius:12px;
  background:#f1f5f9;
  display:inline-block;
  border:1px solid #e2e8f0;
  position:relative;
  will-change:transform;
  z-index:1;
}

/* Фокус и курсор для кликабельного бейджа */
.cgtool .grade-badge:focus{
  outline:2px solid rgba(220,38,38,.35);
  outline-offset:2px;
}
.cgtool .grade-badge[data-href]{
  cursor:pointer;
}

.cgtool .meta{
  color:#64748b;
  font-size:13px;
}

/* ===== KPI характеристик (серый фон) ===== */
.cgtool .specs{
  display:grid;
  grid-template-columns:repeat(5,minmax(110px,1fr));
  gap:10px 12px;
}

.cgtool .spec{
  border-radius:12px;
  padding:10px 12px;
  font-size:13px;
  background:#f8fafc;
  border:1px dashed #cbd5e1;
}

.cgtool .spec b{
  display:block;
  font-size:12px;
  color:#6b7280;
  font-weight:600;
  margin-bottom:2px;
}

/* значение внутри карточки KPI (B12.5, 12.5, F75–F100, W4, П2–П3) */
.cgtool .spec span,
.cgtool .spec [data-out]{
  font-weight:700;
  color:#0f172a;
}

/* ===== Информационное сообщение под KPI (применение) — стиль как mc-note ===== */
/* Сам контейнер: либо элемент с классом .empty, либо узел с data-out="desc" */
.cgtool .empty,
.cgtool [data-out="desc"]{
  margin-top:10px;
  padding:8px 12px 8px 40px;
  border-radius:12px;
  border:1px solid var(--mc-border-soft);
  background:#f8fafc;
  color:var(--mc-muted);
  font-size:12px;
  line-height:1.5;
  position:relative;
}

/* Иконка "i" слева */
.cgtool .empty::before,
.cgtool [data-out="desc"]::before{
  content:"";
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  border-radius:50%;
  background:no-repeat center/18px 18px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%23e0f2fe'/><circle cx='12' cy='12' r='9' fill='%230369a1'/><path d='M11 10.3h2V17h-2zm0-3.8h2v2.4h-2z' fill='%23eff6ff'/></svg>");
}

/* Если .empty реально пустой — скрываем, чтобы не было «осиротевшей» иконки */
.cgtool .empty:empty{
  display:none;
}

@media (max-width:980px){
  .cgtool .specs{
    grid-template-columns:repeat(3,minmax(110px,1fr));
  }
}
@media (max-width:640px){
  .cgtool .grade-badge{
    font-size:24px;
  }
  .cgtool .specs{
    grid-template-columns:repeat(2,minmax(110px,1fr));
  }
}

/* ===== Анимация кнопки марки (бейдж в результатах) ===== */
@keyframes cg-badge-pop{
  0%{transform:scale(.92);box-shadow:0 0 0 0 rgba(220,38,38,0);}
  55%{transform:scale(1.06);box-shadow:0 10px 24px rgba(220,38,38,.18);}
  100%{transform:scale(1);box-shadow:0 6px 18px rgba(15,23,42,.08);}
}
@keyframes cg-badge-breathe{
  0%{transform:scale(1);}
  100%{transform:scale(1.02);}
}
@keyframes cg-badge-ping{
  0%{opacity:.35;transform:scale(1);}
  100%{opacity:0;transform:scale(1.25);}
}

.cgtool .grade-badge.is-anim{
  animation:cg-badge-pop .68s cubic-bezier(.2,.7,.2,1) 0s 1 both,
           cg-badge-breathe 2.6s ease-in-out .9s 3 alternate;
}

.cgtool .grade-badge.is-anim::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:14px;
  pointer-events:none;
  z-index:0;
  border:2px solid var(--accent);
  opacity:0;
  animation:cg-badge-ping 1.2s ease-out .35s 2 forwards;
}

@media (prefers-reduced-motion:reduce){
  .cgtool .grade-badge.is-anim{animation:none;}
  .cgtool .grade-badge.is-anim::after{display:none;}
}

/* === INFObox (запасной, если пригодится отдельно) === */
.cg-infobox{
  margin-top:12px;
  margin-bottom:16px;
  background:#f8fafc;
  border:1px dashed #e5e7eb;
  border-radius:12px;
  padding:12px 14px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  color:#0f172a;
}

.cg-infobox .cg-ico{
  flex:0 0 28px;
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fee2e2;
  border:1px solid #fecaca;
}

.cg-infobox .cg-ico svg{
  width:16px;
  height:16px;
  display:block;
}

.cg-infobox .cg-text{
  font-size:13px;
  line-height:1.45;
  color:#0f172a;
}

.cg-infobox .cg-text b{
  font-weight:700;
}

.cg-infobox .muted{
  color:#64748b;
}

/* =====================================================
 *  Кнопки / KPI в стиле mix-calc (для блока «Альтернатива» и заказа)
 * ===================================================== */

.cgtool[data-tool="concrete-grade-sugg-v2"] .mc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:12px;
  font-weight:700;
  font-size:13px;
  border:1px solid #e5e7eb;
  cursor:pointer;
  user-select:none;
  transition:background-color .16s ease,box-shadow .16s ease,transform .06s ease,border-color .16s ease;
  white-space:nowrap;
  background:#ffffff;
  color:#111827;
}

.cgtool[data-tool="concrete-grade-sugg-v2"] .mc-btn-primary{
  border-color:#dc2626;
  background:#dc2626;
  color:#ffffff;
}

.cgtool[data-tool="concrete-grade-sugg-v2"] .mc-btn-secondary{
  background:#f8fafc;
}

.cgtool[data-tool="concrete-grade-sugg-v2"] .mc-btn:hover{
  box-shadow:0 2px 8px rgba(15,23,42,.16);
}

.cgtool[data-tool="concrete-grade-sugg-v2"] .mc-btn:active{
  transform:translateY(1px);
  box-shadow:0 2px 6px rgba(15,23,42,.18);
}

.cgtool[data-tool="concrete-grade-sugg-v2"] .mc-btn[aria-disabled="true"],
.cgtool[data-tool="concrete-grade-sugg-v2"] .mc-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}

/* Кнопка выбора марки в KPI (внутри .mixcalc-order) */
.cgtool[data-tool="concrete-grade-sugg-v2"] .mc-kpi-grade-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  background:#f9fafb;
  border:1px solid #e2e8f0;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
  gap:6px;
  transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .08s ease;
}

.cgtool[data-tool="concrete-grade-sugg-v2"] .mc-kpi-grade-btn:hover{
  background:#eff6ff;
  border-color:#cbd5e1;
  box-shadow:0 4px 16px rgba(15,23,42,.16);
  transform:translateY(-1px);
}

.cgtool[data-tool="concrete-grade-sugg-v2"] .mc-kpi-grade-btn:active{
  transform:translateY(0);
  box-shadow:0 2px 8px rgba(15,23,42,.14);
}

.cgtool[data-tool="concrete-grade-sugg-v2"] .mc-kpi-grade-btn:focus-visible{
  outline:2px solid rgba(220,38,38,.55);
  outline-offset:2px;
}

/* Лёгкая анимация подсветки марки в KPI */
@keyframes mcGradePulse{
  0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(220,38,38,.35);}
  60%{transform:scale(1.03);box-shadow:0 0 0 8px rgba(220,38,38,0);}
  100%{transform:scale(1);box-shadow:none;}
}

.cgtool[data-tool="concrete-grade-sugg-v2"] .mc-kpi-grade-btn.is-anim{
  animation:mcGradePulse .9s ease-out 0s 1;
}

/* =====================================================
 *  Блок «Оформление заказа» (KPI + аккордеон) под marka
 * ===================================================== */

.cgtool[data-tool="concrete-grade-sugg-v2"] .mixcalc-order{
  margin-top:20px;
  padding:14px 14px 16px;
  border-radius:16px;
  border:1px solid #e5e7eb;
  background:#ffffff;
}

.cgtool[data-tool="concrete-grade-sugg-v2"] .mixcalc-order__title{
  margin:0 0 10px;
  font-size:16px;
  font-weight:800;
  color:#111827;
}

/* KPI заказа */
.cgtool[data-tool="concrete-grade-sugg-v2"] .mixcalc-order__kpis{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
  margin-bottom:10px;
}

@media (max-width:1200px){
  .cgtool[data-tool="concrete-grade-sugg-v2"] .mixcalc-order__kpis{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}
@media (max-width:768px){
  .cgtool[data-tool="concrete-grade-sugg-v2"] .mixcalc-order__kpis{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media (max-width:520px){
  .cgtool[data-tool="concrete-grade-sugg-v2"] .mixcalc-order__kpis{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

.cgtool[data-tool="concrete-grade-sugg-v2"] .mixcalc-order__kpi{
  min-width:0;
  border-radius:12px;
  border:1px dashed #4ade80;
  padding:8px 10px;
  background:#ecfdf3;
  font-size:12px;
  line-height:1.3;
}

/* Подсветка KPI «Цена за 1 м³», если цена с ПМД */
.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order__kpi[data-kpi="price"]{
  position:relative;
}

/* число в отдельной строке, чтобы бейдж шёл под ним */
.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order__kpi[data-kpi="price"] span{
  display:block;
}

/* Плитка становится «тёплой», когда есть ПМД */
.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order__kpi[data-kpi="price"][data-pmd]{
  background:#fffbeb;
  border-color:#facc15;
}

/* Бейдж «ПМД: до −10°C» и т.п. с маленькой снежинкой-SVG */
.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order__kpi[data-kpi="price"][data-pmd]::after{
  content:attr(data-pmd-label);
  display:inline-flex;
  align-items:center;
  margin-top:4px;
  padding:2px 7px 2px 22px;
  border-radius:999px;
  border:1px solid #fed7aa;
  background:#fffbeb;
  font-size:10px;
  font-weight:700;
  color:#92400e;
  letter-spacing:.01em;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='9' fill='%23038cfc'/><path d='M10 4v12M4 10h12M6 6l8 8M14 6l-8 8' stroke='%23eff6ff' stroke-width='1.3' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;
  background-position:6px 50%;
  background-size:12px 12px;
}

.cgtool[data-tool="concrete-grade-sugg-v2"] .mixcalc-order__kpi b{
  display:block;
  margin-bottom:3px;
  font-size:11px;
  font-weight:800;
  color:#166534;
}

.cgtool[data-tool="concrete-grade-sugg-v2"] .mixcalc-order__kpi span{
  font-weight:800;
  color:#111827;
}

/* Кнопка марки внутри KPI заказа */
.cgtool[data-tool="concrete-grade-sugg-v2"] .mixcalc-order__kpi .mc-kpi-grade-btn{
  margin-top:3px;
}

/* Кнопки под KPI */
.cgtool[data-tool="concrete-grade-sugg-v2"] .mixcalc-order__actions{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* Аккордеон «Рассчитать доставку» */
.cgtool[data-tool="concrete-grade-sugg-v2"] .mixcalc-acc{
  margin-top:14px;
  padding-top:10px;
  border-top:1px dashed #e5e7eb;
}

.cgtool[data-tool="concrete-grade-sugg-v2"] .mixcalc-acc summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  background:#eef2ff;
  font-weight:700;
  color:#111827;
}

.cgtool[data-tool="concrete-grade-sugg-v2"] .mixcalc-acc summary::-webkit-details-marker{
  display:none;
}

.cgtool[data-tool="concrete-grade-sugg-v2"] .mixcalc-acc__chevron{
  width:18px;
  height:18px;
  flex:0 0 18px;
  transition:transform .18s ease;
  background:no-repeat center/16px 16px
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20' fill='none'><path d='M6 8l4 4 4-4' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.cgtool[data-tool="concrete-grade-sugg-v2"] .mixcalc-acc[open] .mixcalc-acc__chevron{
  transform:rotate(180deg);
}

.cgtool[data-tool="concrete-grade-sugg-v2"] .mixcalc-acc__body{
  padding-top:10px;
}

/* =====================================================
 *  Шаг 3: «Доставка бетона» (psb-delivery v11) в marka
 * ===================================================== */

.cgtool[data-tool="concrete-grade-sugg-v2"] .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"]{
  max-width:100%;
  border-radius:16px;
  border:1px solid var(--del-border);
  padding:16px 16px 14px;
  background:var(--del-bg);
  overflow:hidden;
}

/* Две колонки: слева форма, справа карта/результат */
.cgtool[data-tool="concrete-grade-sugg-v2"] .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"] .grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1.3fr);
  gap:16px 18px;
}

.cgtool[data-tool="concrete-grade-sugg-v2"] .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"] .grid>*{
  min-width:0;
}

@media (max-width:1040px){
  .cgtool[data-tool="concrete-grade-sugg-v2"] .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"] .grid{
    grid-template-columns:minmax(0,1fr);
  }
}

/* Карточки шага 3 */
.cgtool[data-tool="concrete-grade-sugg-v2"] .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"] .card{
  border-radius:14px;
  border:1px solid var(--del-border);
  background:#f9fafb;
  padding:13px 13px 12px;
}

.cgtool[data-tool="concrete-grade-sugg-v2"] .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"] .card h4{
  margin:0 0 8px;
  font-size:15px;
  font-weight:700;
  color:var(--del-ink);
}

/* Подписи полей шага 3 */
.cgtool[data-tool="concrete-grade-sugg-v2"] .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"] label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--del-ink);
  margin:0 0 4px;
}

/* Сетка полей – без отрицательных margin, единая ширина */
.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"] .row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px 12px;
  width:100%;
  margin:0 !important;
  padding:0;
}

/* Убиваем глобальные clearfix от .row */
.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"] .row::before,
.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"] .row::after{
  content:none !important;
  display:none !important;
}

.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"] .field{
  width:100%;
  position:relative;
}

/* Поля шага 3 используют общий стиль высоты */
.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"]
  input[type="text"],
.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"]
  input[type="number"],
.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"]
  input[type="tel"],
.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"]
  input[type="email"],
.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"]
  select{
  width:100%;
  height:var(--mc-field-height);
  padding:10px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#ffffff;
  font-size:13px;
  line-height:1.3;
  color:#111827;
  outline:none;
  box-sizing:border-box;
}

/* Ошибка в поле */
.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"]
  input.is-error{
  background:#fef2f2;
  border-color:#fecaca;
}

/* Кнопки шага 3 */
.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"] .btns{
  margin-top:9px;
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"] .btns .btn{
  cursor:pointer;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#ffffff;
  font-size:13px;
  font-weight:700;
  color:#111827;
  white-space:nowrap;
}

.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"] .btns .btn-primary{
  background:#dc2626;
  border-color:#dc2626;
  color:#ffffff;
}

.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"] .btns .btn-ghost{
  background:#f8fafc;
}

/* Подсказки и ошибки шага 3 */
.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"] .muted{
  font-size:13px;
  color:var(--del-muted);
  margin-top:6px;
}

.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"] .err-msg{
  display:none;
  margin-top:6px;
  padding:9px 11px;
  border-radius:11px;
  border:1px solid #fecaca;
  background:#fff1f2;
  color:#b91c1c;
  font-size:12px;
}

.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"] .err-msg.show{
  display:block;
}

/* Карта и вывод маршрута/стоимости */
.cgtool[data-tool="concrete-grade-sugg-v2"] #psb-map.map{
  width:100%;
  height:360px;
  border-radius:14px;
  border:1px solid var(--del-border);
  overflow:hidden;
  min-width:0;
}

/* Блок "Маршрут" (Расстояние, В пути) */
.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"] .route-box,
.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"] [data-role="route-box"]{
  margin-top:8px;
  padding:8px 11px;
  border-radius:12px;
  border:1px dashed var(--del-border);
  background:#f9fafb;
  font-size:13px;
  color:var(--del-ink);
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
}

.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"] .route-box b,
.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"] [data-role="route-box"] b{
  font-weight:700;
  margin-right:4px;
}

.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"] [data-role="distance"],
.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"] [data-role="duration"]{
  font-weight:700;
  color:#111827;
}

/* Поверх подсказок Яндекса */
.ymaps-2-1-79-suggest,
.ymaps-2-1-79-suggest-item{
  z-index:2147483647 !important;
}

/* Текстовый вывод под картой */
.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order #psb-delivery[data-block="psb-delivery-v11"] [data-role="out"]{
  margin-top:8px;
  font-size:13px;
  color:#111827;
}

/* =====================================================
 *  Шаг 4: итог и оформление заказа (marka)
 * ===================================================== */

/* Рамка итогового блока */
.mixcalc-order .kzb-summary{
  margin-top:10px;
  padding:12px 12px 11px;
  border-radius:14px;
  border:1px solid #e5e7eb;
  background:#ffffff;
}

/* Малые карточки (карточка ПМД, блок контактов и т.п.) */
.mixcalc-order .kzb-mini-card{
  margin-top:10px;
  padding:10px 12px 12px;
  border-radius:14px;
  border:1px solid #e5e7eb;
  background:#f9fafb;
}

.mixcalc-order .kzb-mini-card h5{
  margin:0 0 8px;
  font-size:15px;
  font-weight:700;
  color:#111827;
}

/* Ряд с телефоном/почтой – grid, единая ширина полей */
.cgtool[data-tool="concrete-grade-sugg-v2"]
  .mixcalc-order .kzb-mini-card > .row{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px 16px;
  width:100%;
  margin:0 !important;
  padding:0;
}

/* Поля в шаге 4 — общий внешний вид */
.mixcalc-order .kzb-mini-card input[type="text"],
.mixcalc-order .kzb-mini-card input[type="number"],
.mixcalc-order .kzb-mini-card input[type="tel"],
.mixcalc-order .kzb-mini-card input[type="email"],
.mixcalc-order .kzb-mini-card select{
  width:100%;
  height:var(--mc-field-height);
  padding:10px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  outline:none;
  background:#ffffff;
  box-sizing:border-box;
  font-size:13px;
  line-height:1.3;
  color:#111827;
}

/* Ошибки */
.mixcalc-order .kzb-mini-card .kzb-invalid{
  border-color:#ef4444 !important;
  background:#fff5f5 !important;
}

/* Сообщение под телефоном */
.mixcalc-order .kzb-field-msg{
  display:none;
  margin-top:6px;
  font-size:12px;
  color:#b91c1c;
}

.mixcalc-order .kzb-field-msg.show{
  display:block;
}

/* Алерт «По прогнозу погоды…» */
.mixcalc-order .kzb-alert{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #fed7d7;
  background:#fff1f2;
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:14px;
  color:#991b1b;
}

.mixcalc-order .kzb-alert .ico{
  flex:0 0 18px;
  width:18px;
  height:18px;
  margin-top:2px;
  background:no-repeat center/contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18' fill='%23ef4444'><path d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 13.5h-2v-2h2v2Zm0-4h-2V7h2v4.5Z'/></svg>");
}

/* Кнопки шага 4 */
.mixcalc-order .btns{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.mixcalc-order .btns .btn{
  cursor:pointer;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#ffffff;
  font-weight:700;
  font-size:13px;
}

.mixcalc-order .btns .btn-primary{
  border-color:#dc2626;
  background:#dc2626;
  color:#ffffff;
}

.mixcalc-order .btns .btn-ghost{
  background:#f8fafc;
}

/* =====================================================
 *  Мобильные правки (кнопки)
 * ===================================================== */

@media (max-width:640px){
  .mixcalc-order .btns{
    flex-direction:column;
  }
  .mixcalc-order .btns .btn{
    width:100%;
    text-align:center;
  }

  .cgtool[data-tool="concrete-grade-sugg-v2"] .mixcalc-order__actions .mc-btn{
    width:100%;
    justify-content:center;
    text-align:center;
  }
}