/* Террасная доска Harvex: кнопка калькулятора, модальное окно, фурнитура. */

/* Кнопка «Рассчитать материалы» — в правом верхнем углу блока с ценой.
   Только на карточках террасной доски: разметку добавляет генератор. */
.price-block { position: relative; }

.mp-calc-btn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: #1f4d33;
  background: #eef5ee;
  border: 1px solid #bcd6c0;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.mp-calc-btn:hover,
.mp-calc-btn:focus-visible { background: #e0eee2; border-color: #8fbf96; }
.mp-calc-btn::before { content: "🧮"; margin-right: 6px; }

/* --- модальное окно калькулятора --- */
.mp-calc-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(18, 32, 22, .55);
}
.mp-calc-modal[hidden] { display: none; }
body.mp-calc-open { overflow: hidden; }

.mp-calc-box {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow: auto;
  padding: 22px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
}
.mp-calc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mp-calc-head h2 { margin: 0; font-size: 20px; line-height: 1.25; }
.mp-calc-close {
  flex: none; width: 32px; height: 32px;
  font-size: 22px; line-height: 1;
  color: #556; background: #f2f4f1;
  border: 0; border-radius: 8px; cursor: pointer;
}
.mp-calc-close:hover { background: #e6eae4; }
.mp-calc-sub { margin: 6px 0 16px; color: #667; font-size: 13px; }

.mp-calc-fields { display: grid; gap: 12px; }
.mp-calc-fields label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: #334; }
.mp-calc-fields input,
.mp-calc-fields select {
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  border: 1px solid #cfd8cf;
  border-radius: 8px;
  background: #fff;
}
.mp-calc-fields input:focus,
.mp-calc-fields select:focus { outline: 2px solid #8fbf96; outline-offset: 1px; }

.mp-calc-area { margin: 14px 0; font-size: 14px; color: #445; }
.mp-calc-out { list-style: none; margin: 0 0 14px; padding: 0; }
.mp-calc-out li {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 11px 0; border-top: 1px solid #e8ece7;
}
.mp-calc-out li:last-child { border-bottom: 1px solid #e8ece7; }
.mp-calc-out span { color: #556; }
.mp-calc-out strong { font-size: 19px; color: #1f4d33; }
.mp-calc-hint { margin: 0 0 16px; font-size: 12px; color: #778; line-height: 1.5; }
#terra-calc-apply { width: 100%; }

/* --- выбор длины в карточке --- */
.length-selection h3 { margin: 0 0 10px; font-size: 15px; }
.length-options { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-size-option {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px;
  font-size: 14px;
  border: 1px solid #cfd8cf;
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
}
.mp-size-option:hover { border-color: #8fbf96; }
.mp-size-option:has(input:checked) { border-color: #2f7a45; background: #eef5ee; font-weight: 600; }

/* --- список фурнитуры --- */
.mp-acc-list { list-style: none; margin: 0 0 12px; padding: 0; }
.mp-acc-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid #eceeea;
}
.mp-acc-name { color: #334; }
.mp-acc-price { flex: none; font-weight: 600; color: #1f4d33; white-space: nowrap; }
.mp-acc-note, .mp-accessory-note { font-size: 13px; color: #667; }

/* --- страница каталога --- */
.mp-terrasa-coll { margin: 34px 0 4px; }
.mp-terrasa-coll-note { margin: 0 0 16px; color: #667; font-size: 14px; }
.mp-terrasa-calc-teaser,
.mp-terrasa-acc {
  margin: 22px 0;
  padding: 18px 20px;
  background: #f4f8f4;
  border: 1px solid #dde8dd;
  border-radius: 12px;
}
.mp-terrasa-calc-teaser h2,
.mp-terrasa-acc h2 { margin: 0 0 8px; font-size: 18px; }
.mp-terrasa-calc-teaser p,
.mp-terrasa-acc p { margin: 0; color: #445; }

@media (max-width: 640px) {
  .mp-calc-btn { position: static; display: block; width: 100%; margin-bottom: 12px; }
  .mp-calc-out strong { font-size: 17px; }
}