/* Раздел «Калькуляторы»: карточки текста с иконками, форма, результат, хаб. Подключается из views/calc_page.php и calc_hub.php. */
.calc-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0 0 1rem; color: var(--site-muted); font-size: .875rem; }
.calc-meta i { margin-right: .35rem; color: var(--tblr-primary); vertical-align: -2px; }

/* иконка в цветной плашке */
.calc-ico { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--tblr-primary-rgb), .1); color: var(--tblr-primary); font-size: 1.35rem; }

/* форма */
.calc-form { border: 1px solid var(--site-line); border-radius: 14px; box-shadow: 0 2px 12px rgba(15, 23, 42, .05); overflow: hidden; }
.calc-form .card-header { padding: 1rem 1.5rem; background: var(--tblr-bg-surface-secondary, #f8fafc); border-bottom: 1px solid var(--site-line); gap: .75rem; justify-content: flex-start; }
.calc-form .card-header .calc-ico { background: color-mix(in oklch, var(--c, var(--tblr-primary)) 16%, #fff); color: color-mix(in oklch, var(--c, var(--tblr-primary)) 78%, #000); }
.calc-form .card-header .card-title { margin: 0; font-size: 1.25rem; font-weight: 650; }
.calc-form .card-body { padding: 1.5rem; }
.calc-form .card-footer { padding: 1rem 1.5rem; background: transparent; border-top: 1px solid var(--site-line); }
.calc-form .form-control, .calc-form .form-select { border-radius: 10px; }
.calc-form .btn-primary { padding-left: 1.5rem; padding-right: 1.5rem; }

/* результат */
.calc-result { border: 1px solid rgba(var(--tblr-primary-rgb), .35); border-radius: 14px; box-shadow: 0 4px 18px rgba(var(--tblr-primary-rgb), .1); overflow: hidden; }
.calc-result .card-header { padding: 1rem 1.5rem; background: rgba(var(--tblr-primary-rgb), .06); border-bottom: 1px solid rgba(var(--tblr-primary-rgb), .2); gap: .75rem; }
.calc-result .card-header .card-title { margin: 0; font-size: 1.25rem; font-weight: 650; }
.calc-result .card-body { padding: 1.5rem; }
.calc-stat { height: 100%; padding: 1rem 1.125rem; border: 1px solid var(--site-line); border-radius: 12px; background: #fff; }
.calc-stat-l { color: var(--site-muted); font-size: .8125rem; margin-bottom: .25rem; }
.calc-stat-v { font-size: 1.25rem; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.calc-stat-v::first-line { white-space: nowrap; }
.calc-stat-main { background: var(--tblr-primary); border-color: var(--tblr-primary); }
.calc-stat-main .calc-stat-l { color: rgba(255, 255, 255, .85); }
.calc-stat-main .calc-stat-v { color: #fff; font-size: 1.5rem; }
.calc-result .table { margin-bottom: 0; }
.calc-result .table-responsive { border: 1px solid var(--site-line); border-radius: 10px; }
.calc-result thead th { background: #f8fafc; font-size: .75rem; text-transform: none; letter-spacing: 0; color: var(--site-muted); white-space: nowrap; }
.calc-result tbody tr:nth-child(even) td { background: #fafbfc; }
.calc-result tfoot th { background: rgba(var(--tblr-primary-rgb), .06); font-size: .9375rem; }

/* карточки текста: стиль карточек каталога документов (.cb-card из site.css) */
.calc-sec { min-height: 0; --cd: color-mix(in oklch, var(--c) 78%, #000); margin-bottom: 1rem; padding: 1.5rem; border-radius: 18px; cursor: default; }
.calc-sec:hover { transform: none; border-color: color-mix(in oklch, var(--c) 40%, #fff); box-shadow: 0 8px 24px color-mix(in oklch, var(--c) 14%, transparent); }
.calc-sec:hover .cb-ic { background: color-mix(in oklch, var(--c) 16%, #fff); color: var(--cd); transform: none; }
.calc-sec:hover .cb-wm { transform: none; opacity: .09; }
.calc-sec .cb-wm { font-size: 9rem; right: -1rem; bottom: -1.75rem; }
.calc-sec-head { position: relative; z-index: 1; display: flex; align-items: center; gap: .875rem; margin-bottom: 1rem; }
.calc-sec-head .cb-t { margin: 0; font-size: 1.25rem; }
.calc-sec-body { position: relative; z-index: 1; }
.calc-sec-body > :last-child { margin-bottom: 0; }
.calc-sec-body p { color: #374151; }
.calc-sec-body ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.calc-sec-body ul li { position: relative; padding: .625rem 0 .625rem 2.125rem; border-top: 1px solid color-mix(in oklch, var(--c) 14%, #fff); color: #374151; }
.calc-sec-body ul li:first-child { border-top: 0; }
.calc-sec-body ul li::before { content: "\ea67"; font-family: 'tabler-icons'; position: absolute; left: 0; top: .6rem; font-size: 1.25rem; color: var(--cd); }
.calc-sec-body ul li strong { color: var(--tblr-body-color); }
.calc-sec-body .table-responsive { border: 1px solid color-mix(in oklch, var(--c) 25%, #fff); border-radius: 12px; margin-bottom: 1rem; background: #fff; }
.calc-sec-body table { margin: 0; width: 100%; }
.calc-sec-body thead th { background: color-mix(in oklch, var(--c) 8%, #fff); font-size: .75rem; text-transform: none; letter-spacing: 0; color: var(--cd); }
.calc-sec-body a { color: var(--cd); text-decoration: none; border-bottom: 1px solid color-mix(in oklch, var(--c) 40%, transparent); }
.calc-sec-body a:hover { border-bottom-color: var(--cd); }

/* формула */
.calc-formula { display: flex; align-items: center; justify-content: center; gap: .75rem; margin: 1rem 0; padding: 1rem 1.25rem; border: 1px dashed color-mix(in oklch, var(--c) 50%, #fff); border-radius: 14px; background: #fff; font-size: 1.0625rem; font-weight: 600; text-align: center; line-height: 1.45; }
.calc-formula i { flex: none; font-size: 1.5rem; color: var(--cd); }

/* пример */
.calc-sec--example ul li::before { content: "\ea5e"; }

/* что дальше: сплошная синяя карточка, как «Все документы» */
.calc-sec--next { background: var(--tblr-primary); border-color: var(--tblr-primary); }
.calc-sec--next .cb-ic { background: rgba(255, 255, 255, .2); color: #fff; }
.calc-sec--next:hover .cb-ic { background: rgba(255, 255, 255, .2); color: #fff; }
.calc-sec--next .cb-wm { color: #fff; opacity: .14; }
.calc-sec--next:hover .cb-wm { opacity: .14; }
.calc-sec--next .cb-t, .calc-sec--next .calc-sec-body, .calc-sec--next .calc-sec-body p { color: #fff; }
.calc-sec--next .calc-sec-body a { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, .6); }
.calc-sec--next .calc-sec-body a:hover { border-bottom-color: #fff; }
.calc-sec--next .text-secondary, .calc-sec--next .text-secondary a { color: rgba(255, 255, 255, .8) !important; }

/* FAQ с заголовком-иконкой */
.calc-faq-head { display: flex; align-items: center; gap: .875rem; margin-bottom: 1rem; }
.calc-faq-head .calc-ico { background: color-mix(in oklch, var(--tblr-azure) 16%, #fff); color: color-mix(in oklch, var(--tblr-azure) 78%, #000); }
.calc-faq-head h2 { margin: 0; font-size: 1.25rem; font-weight: 650; }
.calc-note { display: flex; gap: .75rem; padding: 1rem 1.25rem; border-radius: 12px; background: #f8fafc; border: 1px solid var(--site-line); color: var(--site-muted); font-size: .875rem; }
.calc-note i { flex: none; font-size: 1.25rem; color: #9ca3af; margin-top: .1rem; }

/* боковая колонка */
.calc-docs .list-group-item { display: flex; gap: .75rem; align-items: center; }
.calc-docs .calc-ico { width: 2.25rem; height: 2.25rem; font-size: 1.15rem; }
.calc-docs .t { font-weight: 600; line-height: 1.3; }
.calc-rate { text-align: center; }
.calc-rate .big { font-size: 2.25rem; font-weight: 700; line-height: 1.1; color: var(--tblr-primary); }

/* хаб: карточки в стиле каталога документов */
.calc-group-head { display: flex; align-items: center; gap: .875rem; margin-bottom: 1rem; }
.calc-group-head .cb-ic { --c: var(--tblr-blue); --cd: color-mix(in oklch, var(--c) 78%, #000); background: color-mix(in oklch, var(--c) 16%, #fff); color: var(--cd); }
.calc-group-head h2 { margin: 0; font-size: 1.375rem; font-weight: 650; }
.calc-group-head p { margin: 0; color: var(--site-muted); font-size: .9375rem; }
.calc-tile .cb-d { display: block; flex-grow: 1; font-size: .9375rem; }
.calc-tile .cb-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; position: relative; z-index: 2; }
.calc-tile .cb-cnt { max-width: 70%; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 575.98px) {
  .calc-sec, .calc-form .card-body, .calc-result .card-body { padding: 1.125rem; }
  .calc-sec-head .cb-t { font-size: 1.125rem; }
  .calc-formula { font-size: .9375rem; padding: .875rem; }
}
@media print { .calc-sec, .calc-result { box-shadow: none; } }