/* Баннер над калькулятором */
.fund3c-banner{
  background:#dc2626;
  color:#fff;
  font-weight:800;
  padding:12px 16px;
  border-radius:12px 12px 0 0;
  margin:24px 0 0; /* сверху 24px, сбоку 0, снизу 0 */
  line-height:1.2;
  font-size:18px;
  letter-spacing:.2px;
}

/* Корпус калькулятора */
.fund3c-calc{
  --accent:#dc2626;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --panel:#fff;

  max-width:100%;
  border:1px solid var(--line);
  border-top:none;
  border-radius:0 0 16px 16px;
  padding:16px;
  background:#fff;
  margin:0 0 24px; /* отступ снизу 24px */
}

.ms-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
}

.ms-title{
  margin:0 0 10px;
  font-size:16px;
  color:#0f172a;
  font-weight:700;
}

/* Внутренний калькулятор (структура и сетка) */
.conc-calc[data-calc="aspro-v20"]{
  max-width:100%;
}

.conc-calc[data-calc="aspro-v20"] .cc-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px 16px;
  align-items:flex-end;
}

@media (max-width:760px){
  .conc-calc[data-calc="aspro-v20"] .cc-grid{
    grid-template-columns:1fr;
  }
}

.conc-calc[data-calc="aspro-v20"] label{
  display:flex;
  flex-direction:column;
  gap:4px;
  white-space:normal;
  font-size:14px;
  color:#0f172a;
}

.conc-calc[data-calc="aspro-v20"] input,
.conc-calc[data-calc="aspro-v20"] select{
  width:100%;
  padding:12px 14px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  min-height:44px;
  outline:none;
  background:#fff;
  font-size:16px;
}

.conc-calc[data-calc="aspro-v20"] input:focus,
.conc-calc[data-ccalc="aspro-v20"] select:focus{
  border-color:#cbd5e1;
  box-shadow:0 0 0 3px rgba(220,38,38,.12);
}

/* Кнопки */
.conc-calc[data-calc="aspro-v20"] .cc-actions{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.psb-btn{
  display:inline-block;
  padding:12px 16px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  border:1px solid transparent;
  user-select:none;
  transition:background .2s ease, box-shadow .2s ease, transform .06s ease;
  min-height:44px;
}

.psb-btn-primary{
  background:#dc2626;
  color:#fff;
}

.psb-btn-primary:hover{
  filter:brightness(0.95);
  box-shadow:0 6px 20px rgba(220,38,38,.25);
}

.psb-btn-secondary{
  background:#f8fafc;
  color:#0f172a;
  border-color:#e5e7eb;
}

.psb-btn-secondary:hover{
  background:#f1f5f9;
  box-shadow:0 4px 16px rgba(15,23,42,.08);
}

.psb-btn:active{
  transform:translateY(1px);
}

.psb-btn[aria-disabled="true"],
.psb-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}

/* Сообщение */
.conc-calc[data-calc="aspro-v20"] [data-role="msg"]{
  margin-top:10px;
  display:none;
  padding:10px 12px;
  border:1px solid #cbd5e1;
  background:#f8fafc;
  color:#334155;
  border-radius:8px;
  font-size:13px;
}

/* Результат */
.cc-out{
  margin-top:14px;
}

.cc-out-cap{
  background:#dc2626;
  color:#fff;
  font-weight:800;
  padding:10px 14px;
  border-radius:12px 12px 0 0;
  letter-spacing:.2px;
}

.cc-out-panel{
  border:1px solid #e5e7eb;
  border-top:none;
  border-radius:0 0 12px 12px;
  background:#fff;
  padding:16px;
  box-shadow:0 8px 24px rgba(2,6,23,.06);
  display:grid;
  gap:12px;
}

.cc-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(140px,1fr));
  gap:8px;
}

@media (max-width:900px){
  .cc-kpis{
    grid-template-columns:repeat(2,minmax(140px,1fr));
  }
}

@media (max-width:520px){
  .cc-kpis{
    grid-template-columns:1fr;
  }
}

.cc-kpi{
  border:1px dashed #fecaca;
  border-radius:10px;
  padding:10px 12px;
  font-size:13px;
  background:#fee2e2;
}

.cc-kpi b{
  display:block;
  font-size:12px;
  color:#7f1d1d;
  font-weight:700;
  margin-bottom:4px;
}

.cc-kpi span{
  font-weight:800;
  color:#0f172a;
}

.cc-tables{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

@media (max-width:1100px){
  .cc-tables{
    grid-template-columns:1fr;
  }
}

.cc-table-wrap{
  width:100%;
}

.cc-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

.cc-table td{
  padding:6px 8px;
  border:1px solid #e5e7eb;
  word-break:break-word;
}

.cc-table tr:first-child td{
  background:#f8fafc;
  font-weight:700;
}

/* ===== Кнопка «Марка/класс (рекомендуемо)» ===== */
.reco-badge{
  font-weight:900;
  font-size:20px;
  letter-spacing:.3px;
  padding:10px 14px;
  border-radius:12px;
  background:#f1f5f9;
  display:inline-block;
  border:1px solid #e2e8f0;
  cursor:pointer;
  user-select:none;
  position:relative;
  will-change:transform;
  z-index:1;
}

.reco-badge:focus{
  outline:2px solid rgba(220,38,38,.35);
  outline-offset:2px;
}

@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)}}

.reco-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;
}

.reco-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){
  .reco-badge.is-anim{animation:none}
  .reco-badge.is-anim::after{display:none}
}

/* ==========================================================
 *  Блок «Альтернатива: заказать готовый бетон у завода»
 *  (визуал — если пригодится позже)
 * ========================================================== */

.conc-order{
  margin-top:18px;
  padding:14px 14px 16px;
  border-radius:16px;
  border:1px dashed #bbf7d0;
  background:#f0fdf4;
}

.conc-order__title{
  margin:0 0 10px;
  font-size:16px;
  font-weight:800;
  color:#166534;
}

.conc-order__kpis{
  display:grid;
  grid-template-columns:repeat(5,minmax(120px,1fr));
  gap:8px;
}

@media (max-width:1200px){
  .conc-order__kpis{
    grid-template-columns:repeat(3,minmax(140px,1fr));
  }
}

@media (max-width:720px){
  .conc-order__kpis{
    grid-template-columns:repeat(2,minmax(140px,1fr));
  }
}

@media (max-width:520px){
  .conc-order__kpis{
    grid-template-columns:1fr;
  }
}

.conc-order__kpi{
  min-width:0;
  border-radius:12px;
  border:1px dashed #4ade80;
  padding:8px 10px;
  background:#ecfdf3;
  font-size:12px;
  line-height:1.3;
}

.conc-order__kpi b{
  display:block;
  margin-bottom:3px;
  font-size:11px;
  font-weight:800;
  color:#166534;
}

.conc-order__kpi span{
  font-weight:800;
  color:#111827;
}

.conc-order__actions{
  margin-top:12px;
}