/* ====== Общие стили калькуляторов TutKnow ====== */
:root{
  --tk-primary:#00A2E8;
  --tk-primary-hover:#008bc7;
  --tk-border:#ddd;
  --tk-muted:#666;
  --tk-bg:#fff;
  --tk-shadow:0 6px 18px rgba(0,0,0,0.12);
}

/* Контейнеры */
.water-calc-wrapper{width:662px;max-width:100%;margin:30px auto;padding:0;box-sizing:border-box;overflow-x:hidden;}
.water-calculator {
  width:100%;
  margin:0;
  padding:20px;
  background:var(--tk-bg);
  border:1px solid var(--tk-border);
  border-radius:8px;
  /* box-shadow:var(--tk-shadow); ← убираем */
  font-family:Arial,Helvetica,sans-serif;
  box-sizing:border-box;
  overflow:hidden;
}
.water-calculator h3{margin-top:0;color:var(--tk-primary)}
.inline{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.inline>label{flex:1}

/* Формы */
.water-calculator label{display:block;margin-top:10px;font-weight:bold;font-size:14px;}

/* Поля формы (общие) */
.water-calculator input[type="text"],
.water-calculator input[type="number"],
.water-calculator select,
.water-calculator textarea {
  width:100%;
  padding:8px;
  margin-top:4px;
  border:1px solid #ccc;
  border-radius:4px;
  box-sizing:border-box;
  background:#fff;
  font-size:14px;
}

/* Узкие поля в триплетах (Двери/Окна/Запас) */
.water-calculator .triplet .it input{ width:100%; }

/* Спрятать стрелки у number, чтобы размеры/отступы не «плясали» */
.water-calculator input[type="number"]::-webkit-outer-spin-button,
.water-calculator input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
.water-calculator input[type="number"]{
  -moz-appearance:textfield; /* Firefox */
  appearance:textfield;
}

.btn-group{display:flex;gap:10px;flex-wrap:wrap}

/* ===== Кнопки (база через CSS-переменные) ===== */
.water-calculator button{
  margin-top:15px;
  padding:10px 15px;
  background: var(--btn-bg, var(--tk-primary));
  color: var(--btn-fg, #fff);
  border: var(--btn-border, none);
  border-radius:4px;
  cursor:pointer;
  font-size:14px;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.water-calculator button:hover{
  background: var(--btn-bg-hover, var(--tk-primary-hover));
}
.water-calculator button:focus{
  outline:none;
  box-shadow:0 0 0 3px var(--btn-focus, rgba(0,162,232,.25));
}

/* ===== Варианты ===== */
.water-calculator button.btn-ghost{
  --btn-bg:#f5f7fb;
  --btn-fg:#1f2937;
  --btn-border:1px solid #d9dfe6;
  --btn-bg-hover:#eef2f7;
  --btn-focus:rgba(31,41,55,.15);
}

.water-calculator button.btn-danger{
  --btn-bg:#ef4444;
  --btn-fg:#fff;
  --btn-border:1px solid #ef4444;
  --btn-bg-hover:#dc2626;
  --btn-focus:rgba(239,68,68,.25);
}

.water-calculator button.btn-primary{
  --btn-bg:#1e88ff;
  --btn-fg:#fff;
  --btn-border:1px solid #1e88ff;
  --btn-bg-hover:#1b7ae3;
  --btn-focus:rgba(30,136,255,.28);
}

.water-calculator button.btn-success{
  --btn-bg:#22c55e;
  --btn-fg:#fff;
  --btn-border:1px solid #22c55e;
  --btn-bg-hover:#16a34a;
  --btn-focus:rgba(34,197,94,.28);
}

/* Мобилки */
@media (max-width:600px){
  .water-calculator button{ width:100%; }
}

/* Сообщения */
.error-message{color:#d00;font-size:13px;margin-top:6px}
.info-message{color:#333;font-size:13px;margin-top:6px}
.small-note{font-size:12px;line-height: 1.3;color:var(--tk-muted);margin-top:6px}
.hidden{display:none !important;}
.no-print{}

/* Результаты */
.result-box{margin-top:12px;border:1px solid #dfd0af;border-radius:8px;padding:10px;background:#fffdf7}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.result-grid div{font-size:14px}
.badge{display:inline-block;padding:2px 8px;border-radius:12px;background:#f2f7ff;color:#0b79d0;font-weight:bold;font-size:12px}

/* Горизонтальная шкала */
.scale-wrap{margin-top:14px}
.scale-bar{position:relative;height:16px;border-radius:8px;overflow:hidden;background:linear-gradient(90deg,#69b3ff 0 20%,#43d17a 20% 60%,#ffb84d 60% 80%,#ff6b6b 80% 100%)}
.scale-marker{position:absolute;top:-6px;width:0;height:28px;border-left:3px solid #333}
.scale-labels{display:flex;justify-content:space-between;font-size:12px;color:#555;margin-top:6px}

/* Адаптив */
@media (max-width:600px){
  .water-calculator{padding:15px}
  .water-calculator button{width:100%}
}

/* Печать */
.print-title{margin-bottom:6px;color:#000!important}
@media print{
  body{background:#fff!important}
  .water-calc-wrapper{width:100%;margin:0}
  .water-calculator{box-shadow:none;border:none}
  .no-print{display:none!important}
}

/* бейджи категорий по цветам шкалы */
.badge{display:inline-block;padding:2px 10px;border-radius:12px;font-weight:bold;font-size:12px}
.badge--blue{background:#69b3ff;color:#fff}
.badge--green{background:#43d17a;color:#fff}
.badge--orange{background:#ffb84d;color:#fff}
.badge--red{background:#ff6b6b;color:#fff}

/* Большая цветная плашка-похвала/совет */
.callout-big{
  margin-top:12px;
  border-radius:10px;
  padding:14px 16px;
  font-size:16px;
  line-height:1.35;
  color:#fff;
  background:linear-gradient(90deg,#0078ff,#00c2a8);
  font-weight:700;
}

/* Маленькие советы к загрузке */
.upload-tips{
  font-size:12px;color:#374151;background:#f3f6fa;border:1px dashed #cfd6df;
  border-radius:8px;padding:8px 10px;margin-top:6px
}

.tech-tip{
  margin-top:8px;
  font-size:13.5px;   /* 13–14px как просил */
  line-height:1.35;
  color:#222;
  font-weight:400;    /* сам текст обычный */
}
.tech-tip .tip-label{ font-weight:800; } /* слово "Совет:" жирным */


/* Мини-диалог "Поделиться" */
.tk-share-overlay{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.35); z-index:9999;
}
.tk-share{
  background:#fff; border:1px solid #e5e8ee; border-radius:12px;
  width:min(560px,calc(100% - 24px)); padding:14px; box-shadow:0 10px 30px rgba(0,0,0,.15);
  outline:none;
}
.tk-share-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.tk-share-close{border:0;background:#f3f6fa;border-radius:8px;padding:6px 8px;cursor:pointer}
.tk-share-input{
  width:100%; padding:10px 12px; border:1px solid #dfe3ea; border-radius:8px;
  background:#f7fbff; font-size:14px; margin-bottom:10px;
}
.tk-share-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
}
.tk-share-grid a,
.tk-share-grid button{
  display:flex; align-items:center; justify-content:center;
  padding:10px; border:1px solid #e5e8ee; border-radius:10px;
  background:#f7fbff; color:#222; text-decoration:none; cursor:pointer; font-size:14px;
}
.tk-share-grid a:hover, .tk-share-grid button:hover{ background:#eef6ff }
@media(max-width:520px){ .tk-share-grid{ grid-template-columns:repeat(2,1fr); } }

/* === Поля формы: единая высота на мобильных === */
:root {
  --tk-field-h: 44px; /* базовая высота поля (iOS рекомендует 44px) */
}

@media (max-width: 640px) {
  /* выравниваем высоту инпутов и селектов */
  .water-calculator input[type="text"],
  .water-calculator input[type="number"],
  .water-calculator select {
    height: var(--tk-field-h);
    padding-top: 0;
    padding-bottom: 0;
    line-height: var(--tk-field-h);
    font-size: 16px; /* чтобы iOS не делал zoom при фокусе */
  }
}

.tk-calc-credit {
  text-align: right;
  font-size: 11px;
  margin-top: 12px;
}
.tk-calc-credit a {
  color: #666;
  text-decoration: none;
  font-size: 11px;
}
.tk-calc-credit a:hover {
  text-decoration: underline; /* по желанию */
}

.subtle{color:#666;font-size:12px;line-height:1.25;}

.result-line{display:flex; align-items:center; gap:8px;}