.d-none {
  display: none !important;
}
.cr-modal{position:fixed;inset:0;z-index:9999;display:none}
.cr-modal.open .cr-dialog{transform:translate(-50%,-50%) scale(1);opacity:1}
.cr-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.cr-dialog{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.98);opacity:.98;background:#fff;max-width:900px;width:92%;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.2);padding:30px;transition:.12s}
.cr-title{font-size:18px;font-weight:600;margin-bottom:10px;display: none}
.cr-close{position:absolute;top:8px;right:10px;border:0;background:transparent;font-size:22px;cursor:pointer}
.cr-field{display:block;margin:10px 0}
.cr-field span{display:block;margin-bottom:6px;font-size:13px}
.cr-field input,.cr-field textarea{width:100%;box-sizing:border-box;padding:10px;border:1px solid #ddd;border-radius:8px}
.cr-policy{display:block;margin-top:10px;font-size:13px}
.cr-actions{margin-top:12px}
.cr-submit{padding:10px 16px;border:0;border-radius:8px;background:#1f7ae0;color:#fff;cursor:pointer}
.cr-status{
  margin-top:8px;
  font-size: 30px;
  text-align: center;
  padding: 50px 0;
}

/* затемнение */
.cr-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;z-index:10000;
  align-items:center;justify-content:center;padding:20px}
.cr-modal.is-open{display:flex}

/* окно */
.cr-modal__dialog{background:#fff;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.2);
  width:100%;max-width:720px;padding:24px}

/* шапка/кнопка закрытия */
.cr-modal__close{position:absolute;top:10px;right:10px;border:0;background:#7c3aed;color:#fff;
  width:28px;height:28px;border-radius:999px;cursor:pointer;font-weight:700;line-height:28px;text-align:center}

/* поля/кнопка — базовая красота */
.cr-field{margin-bottom:14px}
.cr-input, .cr-textarea{width:100%;border:1px solid #e5e7eb;border-radius:10px;padding:12px 14px;
  font-size:16px}
.cr-textarea{min-height:100px;resize:vertical}
.cr-button{display:inline-block;border:0;border-radius:12px;padding:12px 18px;background:#2563eb;
  color:#fff;font-weight:600;cursor:pointer}
.cr-error{margin-top:10px;color:#b91c1c}

.cr-calculator-inline {
  width: 100%;
  height: 100%;
  display: block;
  padding: 1rem;
}

.step-title {
  text-align: center;
  font-size: 28px;
  margin-bottom: 32px;
}

.type-grid {
  display: flex;
  gap: 32px;
  justify-content: center;
}

.type-card {
  width: 100%;
  min-width: 280px;
  border: 2px solid #000;
  border-radius: 16px;
  background: #fff;
  padding: 24px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all .2s ease;
}

.type-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.1);
}

.type-card img {
  width: 148px;
  height: 148px;
  margin-bottom: 16px;
}

.type-card span {
  font-size: 20px;
}

.type-card a.button, .type-card button:not([type=submit]), .type-card input[type=button] {
  color: #1d1d1d;
}

/* ===== ОБЩИЙ КОНТЕЙНЕР КНОПОК ===== */
.cr-buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cr-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto 32px;
}

/* ===== КНОПКА ВЫБОРА (РАЗМЕР, ТОЛЩИНА, ПЕЧАТЬ И Т.Д.) ===== */
.cr-buttons button {
  position: relative;
  width: 100%;
  height: 72px;
  padding: 0 24px 0 72px;

  border-radius: 16px;
  border: 1px solid #6f6f6f;
  background: #f3f3f3;
  color: #000 !important;
  font-weight: 300 !important;

  font-size: 28px;
  text-align: right;
  cursor: pointer;

  transition: all 0.2s ease;
}

/* ===== КРУЖОК СЛЕВА ===== */
.cr-buttons button::after {
  content: '';
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #ff8c4b;
  background: #fff;
}

/* ===== АКТИВНЫЙ ВАРИАНТ ===== */
.cr-buttons button.is-active {
  background: #ffe3b0;
  border-color: #000;
  color: #000;
}

.cr-buttons button.is-active::before, .cr-buttons button:hover::after {
  background: #ffe0a6;
}

.cr-buttons button:hover::after {
  background: #fff !important;
}
.cr-buttons button:hover::before {
  content: '';
  width: 15px;
  height: 15px;
  background: #fd9256;
  border-radius: 50%;
  position: absolute;
  left: 30px;
  top: 28px;
  z-index: 1;
}


/* ===== ХОВЕР ===== */
.cr-buttons button:hover {
  background: #ffe0a6;
  border-color: #000;
  box-shadow: 0 .0625rem .1875rem 0 #e6e6e6;
}

.cr-step[data-step="5"] .cr-buttons button.cr-restart {
  text-decoration: underline;
  font-size: 24px !important;
}
.cr-step[data-step="5"] .cr-buttons button {
  font-size: 24px;
  color: #61A3C2 !important;
  border: none;
  background: none;
  padding: 0 24px;
  text-align: center;
  text-decoration: none;
  height: 50px;
  transition: all 0.25s ease 0s;
}
.cr-step[data-step="5"] .cr-buttons button:hover {
  color: #61A3C2 !important;
  border: none;
  background: none;
  box-shadow: none;
  text-decoration: underline;
}
.cr-step[data-step="5"] .cr-buttons button::after {
  display: none;
}
.cr-step[data-step="5"] .cr-buttons button:hover::after, .cr-step[data-step="5"] .cr-buttons button:hover::before {
  display: none !important;
}

/* ===== КНОПКА НАЗАД ===== */
.cr-back {
  margin-top: 16px;
  padding: 14px 32px;
  border-radius: 10px;
  border: none;
  background: #6aa7c8;
  color: #fff !important;
  font-size: 18px;
  cursor: pointer;
  width: 150px;
}

/* ===== ФИНАЛЬНЫЙ ШАГ ===== */

.result {
  text-align: center;
  padding: 24px 0;
}

.result-title {
  font-size: 36px;
  font-weight: 500;
  margin-bottom: 40px;
}

.result-line {
  font-size: 28px;
  margin-bottom: 24px;
}

.result-line b {
  font-weight: 700;
}
.result .show-request-form {
  background: #6aa7c8;
  color: #fff;
  padding: 20px 48px;
}

/* ссылка "посчитать ещё раз" */
.quiz-restart-link {
  background: none;
  border: none;
  padding: 0;
  margin: 24px 0 48px;

  font-size: 22px;
  color: #6aa7c8;
  text-decoration: underline;
  cursor: pointer;
}

/* основная кнопка */
.cr-submit {
  display: block;
  margin: 0 auto !important;
  padding: 20px 48px;
  text-align: center !important;
  border: none;
  background: #6aa7c8;
  color: #fff;

  cursor: pointer;
}

.cr-submit:hover {
  background: #5b98b8;
}

/* Блок контейнера карточек */
.cr-step h3 {
  text-align: center;
  font-size: 35px;
  font-weight: 400;
  color: #000000;
}
.cr-step[data-step="0"] .cr-buttons {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 0 20px;
  flex-direction: row;
  height: 220px;
}

.cr-step .cr-buttons button:hover {
  box-shadow: 0 .0625rem .1875rem 0 #e6e6e6;
}
.cr-step .cr-buttons button {
  transition: box-shadow .15s ease-out, -webkit-box-shadow .15s ease-out;
}
.cr-step[data-step="0"] .cr-buttons button {
  height: 100% !important;
  padding: 20px;
  margin: auto;
}
.cr-step[data-step="0"] .cr-buttons button::before, .cr-step[data-step="0"] .cr-buttons button::after {
  display: none !important;
}
/* Карточка типа пакета */
.type-card {
  flex: 1 1 calc(50% - 10px); /* две в ряд */
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid #666;
  border-radius: 12px;
  padding: 24px 12px;
  background: #fff;
  cursor: pointer;
  transition: 0.2s ease;
  text-align: center;
  box-sizing: border-box;
}

/* Hover и active для карточки */
.type-card:hover,
.type-card:focus {
  border-color: #333;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Изображение в карточке */
.type-card-image {
  max-width: 148px;
  width: 100%;
  min-height: 140px;
  height: auto;
  margin-bottom: 16px;
  object-fit: contain;
}

/* Текст под изображением */
.type-card-title {
  font-size: 18px;
  font-weight: 500;
  color: #000;
  margin-top: 8px;
  word-break: break-word;
}


.cr-result {
  text-align: center;
  margin-top: 20px;
}

.cr-result-title {
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 30px;
}

.cr-result-line {
  font-size: 24px;
  margin-bottom: 48px;
}

.cr-result-line b {
  font-weight: 700;
}

.cr-result-total {
  font-size: 28px;
  margin-bottom: 24px;
}

.cr-link {
  display: inline-block;
  margin: 20px 0;
  font-size: 18px;
  color: #5aa7c9;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

.cr-btn, .cr-step[data-step="5"] .cr-buttons button.cr-btn {
  display: inline-block;
  font-size: 22px;
  border-radius: 12px;
  background: #5aa7c9 !important;
  color: #fff !important;
  border: none;
  cursor: pointer;
  max-width: 250px;
}

.cr-btn:hover {
  opacity: 0.9;
  text-decoration: none!important;
}

/* ===== Форма заявки ===== */

.cr-field {
  display: block;
  margin: 24px auto;
  max-width: 520px;
  font-size: 16px;
  color: #333;
}

.cr-field input {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 14px 16px;
  font-size: 18px;
  border-radius: 10px;
  border: 1px solid #ddd;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

/* Фокус */
.cr-field input:focus {
  border-color: #5aa7c9;
  box-shadow: 0 0 0 3px rgba(90, 167, 201, 0.2);
}

/* Placeholder (если есть) */
.cr-field input::placeholder {
  color: #aaa;
}

/* ===== Кнопка отправки ===== */

.cr-submit {
  display: block;
  margin: 32px auto 0;
  padding: 16px 44px;
  font-size: 22px;
  font-weight: 500;
  border-radius: 12px;
  background: #5aa7c9;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.cr-submit:hover {
  opacity: 0.95;
  box-shadow: 0 8px 20px rgba(90, 167, 201, 0.35);
}

.cr-submit:active {
  transform: translateY(1px);
}