/* Разработчик: оболочка мастера кровли. Классы шагов — из calc_porezki/static/css/main.70e5902f.css */
.mi-roof-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(15,23,42,.55);
  z-index:100000;
  overflow:auto;
  padding:20px 12px 40px;
  box-sizing:border-box;
}
.mi-roof-overlay.is-open{display:block;}
.mi-roof-overlay .roof-calculator{margin:20px auto;background:#fff;border-radius:12px;padding:8px 8px 20px;}
.mi-roof-close{
  position:absolute;right:16px;top:12px;
  width:36px;height:36px;border:0;border-radius:50%;
  background:#ebebeb;cursor:pointer;font-size:22px;line-height:36px;color:#5b5b5b;
}
.mi-roof-shell{position:relative;}
.mi-roof-btn{
  width:100%;height:43px;background:#1F2440;border:none;border-radius:10px;
  color:#fff;font-size:12px;font-family:Commissioner,sans-serif;font-weight:600;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  text-transform:uppercase;margin-top:8px;letter-spacing:.02em;
}
.mi-roof-btn:hover{opacity:.92;}
.mi-roof-slot{width:100%;margin-top:8px;}
#root button[data-mi-hide-roof],
#root_2 button[data-mi-hide-roof]{display:none!important;}
.mi-roof-overlay .step4-row{
  display:flex;justify-content:space-between;gap:12px;
  padding:6px 0;border-bottom:1px solid #eee;font-size:15px;
}
.mi-roof-overlay .step4-label{color:#555;}
.mi-roof-overlay .step4-value{color:#293486;font-weight:700;white-space:nowrap;}
.mi-roof-overlay .step4-total-row{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:12px;padding-top:12px;border-top:1px solid #333;
}
.mi-roof-overlay .step4-total-label,
.mi-roof-overlay .step4-total-value{
  color:#293486;font-family:"Exo 2",sans-serif;font-size:24px;font-weight:600;
}
.mi-roof-overlay .step4-disclaimer{color:#7f8c8d;font-size:13px;line-height:1.5;margin:12px 0 20px;}
.mi-roof-overlay .step4-note-gray{
  background:#f1f2f6;border-left:3px solid #f39c12;border-radius:6px;
  color:#2c3e50;font-size:13px;margin-bottom:16px;padding:8px 12px;
}
.mi-roof-overlay .step3-image-box{position:relative;}
.mi-roof-overlay .main-image-wrapper-annotated{position:relative;width:100%;display:flex;}
.mi-roof-overlay .annotation-label,
.mi-roof-overlay .annotation-arrow{pointer-events:auto;cursor:pointer;}
@media (max-width:800px){
  .mi-roof-overlay{padding:8px;}
  .mi-roof-overlay .roof-calculator{margin:8px auto;}
}

/* Форма имя/телефон — как «Связаться с менеджером» */
#miRoofSendModal{
  position:fixed;inset:0;z-index:100001;
  background:rgba(15,23,42,.65);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  align-items:center;justify-content:center;
  padding:20px;box-sizing:border-box;
  font-family:'Commissioner','Exo 2',sans-serif;
}
#miRoofSendModal .mi-roof-send-card,
#miRoofSendModal .step4-modal-content{
  background:#fff;
  border-radius:24px;
  padding:36px 32px 30px;
  max-width:440px;
  width:100%;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.35);
  position:relative;
  box-sizing:border-box;
  margin:0;
}
#miRoofSendModal .step4-modal-close{
  position:absolute;top:18px;right:18px;
  width:34px;height:34px;border:none;border-radius:50%;
  background:#f1f5f9;color:#64748b;
  font-size:20px;font-weight:700;line-height:34px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
}
#miRoofSendModal .step4-modal-title{
  color:#E45B25;font-size:17px;font-weight:800;
  text-transform:uppercase;text-align:center;
  margin:0 36px 24px;letter-spacing:.3px;line-height:1.25;
  font-family:'Commissioner','Exo 2',sans-serif;
}
#miRoofSendModal .mi-roof-send-field{margin-bottom:14px;}
#miRoofSendModal .mi-roof-send-field-phone{margin-bottom:20px;}
#miRoofSendModal .mi-roof-field-error{
  color:#e53935;font-size:12px;line-height:16px;
  font-family:'Commissioner',sans-serif;
  margin-top:6px;min-height:16px;
  opacity:0;visibility:hidden;
}
#miRoofSendModal .mi-roof-field-error.is-visible{
  opacity:1;visibility:visible;
}
#miRoofSendModal .step4-modal-input.is-invalid{
  border-color:#e53935;background:#fff8f8;
}
#miRoofSendModal .step4-modal-input{
  width:100%;height:48px;
  background:#FAFAFA;border:1px solid #E0E0E0;border-radius:10px;
  padding:0 16px;font-size:15px;line-height:48px;
  font-family:'Commissioner',sans-serif;color:#333;
  outline:none;box-sizing:border-box;
}
#miRoofSendModal .step4-modal-input:focus{
  border-color:#E45B25;
}
#miRoofSendModal .step4-modal-submit{
  width:100%;height:50px;
  background:#E45B25;color:#fff;
  font-size:16px;font-weight:600;border:none;border-radius:12px;
  cursor:pointer;margin:0 0 18px;
  font-family:'Commissioner',sans-serif;
  box-shadow:0 4px 14px rgba(228,91,37,.35);
}
#miRoofSendModal .step4-modal-submit:hover{background:#d14e1d;}
#miRoofSendModal .roof-calc-send-msg{
  margin:10px 0 0;min-height:0;
  font-size:13px;line-height:1.4;color:#64748b;text-align:center;
}
#miRoofSendModal .mi-roof-send-agreements{
  display:flex;flex-direction:column;gap:10px;
  margin-top:0;font-size:12px;color:#64748b;line-height:1.4;
}
#miRoofSendModal .mi-roof-agree{
  display:flex;align-items:flex-start;gap:10px;
  cursor:pointer;user-select:none;position:relative;
}
#miRoofSendModal .mi-roof-agree input{
  position:absolute;left:0;top:1px;
  width:18px;height:18px;margin:0;
  opacity:0;z-index:2;cursor:pointer;
}
#miRoofSendModal .mi-roof-agree-box{
  width:18px;min-width:18px;height:18px;min-height:18px;
  border-radius:4px;border:1px solid #d1d5db;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:1px;box-sizing:border-box;
}
#miRoofSendModal .mi-roof-agree input:checked + .mi-roof-agree-box{
  background:#E45B25;border-color:#E45B25;
}
#miRoofSendModal .mi-roof-agree-box svg{display:none;}
#miRoofSendModal .mi-roof-agree input:checked + .mi-roof-agree-box svg{display:block;}
#miRoofSendModal .mi-roof-agree a{color:#157BD7;text-decoration:underline;}
#miRoofSendModal .step4-modal-success-view{
  flex-direction:column;align-items:center;text-align:center;padding:16px 0;
}
#miRoofSendModal .step4-modal-success-icon-wrap{
  width:56px;height:56px;border-radius:50%;
  background:#ecfdf5;border:2px solid #a7f3d0;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;color:#10b981;font-size:24px;font-weight:700;
}
#miRoofSendModal .step4-modal-success-title{
  font-size:18px;font-weight:700;color:#065f46;margin-bottom:8px;
}
#miRoofSendModal .step4-modal-success-text{
  font-size:14px;color:#475569;margin-bottom:22px;line-height:1.5;
}
@media (max-width:480px){
  #miRoofSendModal{padding:12px;}
  #miRoofSendModal .mi-roof-send-card,
  #miRoofSendModal .step4-modal-content{padding:28px 18px 22px;border-radius:20px;}
  #miRoofSendModal .step4-modal-title{font-size:16px;margin:0 32px 18px;}
}