/* =========================================================================
   material-info.css — «Подробно о материале» (калькулятор stroyid.ru), 06.10.2026
   Значок «i» на карточке типа дома + окно с табами. Внешних CDN нет.
   ========================================================================= */

/* ---------- кнопка «Подробнее про материал» — сразу под ценой (.hth-from) ---------- */
html body .calc-page #houseTypeHero .hth-card .hth-info{
  position:static;
  display:inline-flex;align-items:center;gap:5px;
  align-self:flex-start;justify-self:start;
  width:auto;height:auto;margin:7px 0 0;padding:4px 10px 4px 6px;
  border-radius:999px;
  border:1px solid rgba(31,95,166,.22);
  background:#fff;
  color:#1f5fa6;
  font-size:10.5px;line-height:1.25;font-weight:600;white-space:nowrap;text-align:left;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
  -webkit-tap-highlight-color:transparent;
}
html body .calc-page #houseTypeHero .hth-card .hth-info svg{width:16px;height:16px;flex:none;}
html body .calc-page #houseTypeHero .hth-card .hth-info .hth-info-txt{display:inline;}
html body .calc-page #houseTypeHero .hth-card .hth-info:hover,
html body .calc-page #houseTypeHero .hth-card .hth-info:focus-visible{
  background:#1f5fa6;color:#fff;border-color:#1f5fa6;outline:none;
}

/* ---------- окно ---------- */
#miModal{
  position:fixed;inset:0;z-index:1160;
  display:none;align-items:center;justify-content:center;
  padding:20px 14px;box-sizing:border-box;
  background:rgba(15,23,42,.55);
  color:#10233f;
}
#miModal.is-open{display:flex;}
body.mi-open{overflow:hidden;}
body.mi-open #bottomBar,
body.mi-open #calcMetricsBar{visibility:hidden !important;}

#miModal .mi-card{
  display:flex;flex-direction:column;
  width:100%;max-width:780px;
  /* Фиксированная высота: окно не меняет размер при переключении табов,
     прокручивается только .mi-body. На невысоких экранах ужимается по высоте. */
  height:min(640px, calc(100vh - 40px));height:min(640px, calc(100dvh - 40px));
  max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);
  background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 24px 60px rgba(10,20,40,.32);
  box-sizing:border-box;
}
#miModal .mi-head{
  flex:none;
  display:grid;grid-template-columns:96px minmax(0,1fr) 34px;gap:14px;align-items:center;
  padding:16px 16px 14px;
  border-bottom:1px solid #e9eff6;
}
#miModal .mi-cover{
  width:96px;height:72px;border-radius:12px;
  background:#e8f0f8 center/cover no-repeat;
}
#miModal .mi-cover.is-empty{background:linear-gradient(145deg,#eef4fa,#dde8f3);}
#miModal .mi-head-txt{min-width:0;}
#miModal .mi-kicker{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#64748b;}
#miModal .mi-title{margin:2px 0 0;font-size:21px;line-height:1.2;font-weight:800;color:#10233f;}
#miModal .mi-lead{margin:5px 0 0;font-size:13px;line-height:1.5;color:#475569;}
#miModal .mi-close{
  align-self:start;width:34px;height:34px;border:0;border-radius:10px;
  background:#f1f5f9;color:#475569;font-size:18px;line-height:1;cursor:pointer;
}
#miModal .mi-close:hover{background:#e2e8f0;color:#0f172a;}

#miModal .mi-tabs{
  flex:none;
  display:flex;gap:6px;
  padding:10px 16px;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;
  border-bottom:1px solid #e9eff6;
  background:#fbfdff;
}
#miModal .mi-tabs::-webkit-scrollbar{display:none;}
#miModal .mi-tab{
  appearance:none;-webkit-appearance:none;
  flex:none;display:inline-flex;align-items:center;gap:6px;
  margin:0;padding:8px 13px;
  border:1px solid #dbe6f2;border-radius:999px;
  background:#fff;color:#334155;
  font:inherit;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#miModal .mi-tab.is-active{background:#1f5fa6;border-color:#1f5fa6;color:#fff;}
#miModal .mi-tab:focus-visible{outline:2px solid rgba(31,95,166,.35);outline-offset:2px;}
#miModal .mi-tab-ico{font-size:14px;line-height:1;}

#miModal .mi-body{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:16px 18px 20px;
  -webkit-overflow-scrolling:touch;
  outline:none;
}
#miModal .mi-state{padding:28px 6px;text-align:center;color:#64748b;font-size:14px;}
#miModal .mi-state.is-error{color:#9a3412;}

/* ---------- содержимое таба ---------- */
#miModal .mi-rich{font-size:14px;line-height:1.6;color:#1e293b;}
#miModal .mi-rich > :first-child{margin-top:0;}
#miModal .mi-rich h3{margin:18px 0 8px;font-size:17px;line-height:1.3;color:#10233f;}
#miModal .mi-rich h4{margin:16px 0 6px;font-size:15px;line-height:1.3;color:#10233f;}
#miModal .mi-rich p{margin:0 0 10px;}
#miModal .mi-rich ul,#miModal .mi-rich ol{margin:0 0 12px;padding-left:20px;}
#miModal .mi-rich li{margin:3px 0;}
#miModal .mi-rich img{display:block;max-width:100%;height:auto;border-radius:12px;}
#miModal .mi-rich figure{margin:12px 0 14px;}
#miModal .mi-rich figcaption{margin-top:6px;font-size:12px;line-height:1.45;color:#64748b;}
#miModal .mi-rich table{
  width:100%;border-collapse:collapse;margin:6px 0 14px;font-size:13px;
  border:1px solid #e3eaf2;border-radius:12px;overflow:hidden;display:table;
}
#miModal .mi-rich th,#miModal .mi-rich td{padding:9px 11px;border-top:1px solid #edf2f7;text-align:left;vertical-align:top;}
#miModal .mi-rich tr:first-child th,#miModal .mi-rich tr:first-child td{border-top:0;}
#miModal .mi-rich th{width:42%;color:#475569;font-weight:600;background:#f8fbfe;}
#miModal .mi-rich thead th{width:auto;background:#eef4fb;color:#10233f;font-weight:800;}
#miModal .mi-rich tbody tr:nth-child(even) td{background:#fbfdff;}
#miModal .mi-rich .mi-note,
#miModal .mi-rich .mi-warn,
#miModal .mi-rich .mi-tip{
  margin:12px 0;padding:11px 13px;border-radius:12px;font-size:13px;line-height:1.55;
}
#miModal .mi-rich .mi-note{background:#f1f7fe;border:1px solid #d6e6f8;color:#1e3a5f;}
#miModal .mi-rich .mi-tip{background:#f0faf4;border:1px solid #cfead9;color:#1f4d33;}
#miModal .mi-rich .mi-warn{background:#fff8ec;border:1px solid #f3e2bf;color:#6b4a12;}
#miModal .mi-rich .mi-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:8px 0 14px;}
#miModal .mi-rich .mi-grid2 > div{padding:11px 13px;border:1px solid #e3eaf2;border-radius:12px;background:#fbfdff;}

/* плюсы / минусы */
#miModal .mi-pc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px;}
#miModal .mi-pc-col{padding:13px 14px;border-radius:14px;border:1px solid #e3eaf2;}
#miModal .mi-pc-pros{background:#f3fbf6;border-color:#cfead9;}
#miModal .mi-pc-cons{background:#fdf6f4;border-color:#f2d7cf;}
#miModal .mi-pc h4{margin:0 0 8px;font-size:14px;font-weight:800;}
#miModal .mi-pc-pros h4{color:#166534;}
#miModal .mi-pc-cons h4{color:#9a3412;}
#miModal .mi-pc ul{margin:0;padding:0;list-style:none;}
#miModal .mi-pc li{position:relative;margin:6px 0;padding-left:22px;font-size:13.5px;line-height:1.45;}
#miModal .mi-pc-pros li::before{content:"✓";position:absolute;left:0;top:0;color:#16a34a;font-weight:800;}
#miModal .mi-pc-cons li::before{content:"✕";position:absolute;left:1px;top:0;color:#dc2626;font-weight:800;font-size:12px;}

/* внешний вид: фото */
#miModal .mi-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;}
#miModal .mi-gal-cell{margin:0;}
#miModal .mi-gal-item{display:block;width:100%;padding:0;border:0;border-radius:12px;overflow:hidden;background:#eef3f8;cursor:zoom-in;aspect-ratio:4/3;}
#miModal .mi-gal-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s;}
#miModal .mi-gal-item:hover img{transform:scale(1.03);}
#miModal .mi-gal-cell figcaption{margin-top:5px;font-size:12px;line-height:1.4;color:#64748b;}
#miModal .mi-lb{position:fixed;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:44px 56px;background:rgba(8,14,26,.92);}
#miModal .mi-lb[hidden]{display:none;}
#miModal .mi-lb-fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;}
#miModal .mi-lb-fig img{display:block;max-width:100%;max-height:calc(100dvh - 120px);border-radius:10px;object-fit:contain;}
#miModal .mi-lb-fig figcaption{margin-top:10px;color:#e2e8f0;font-size:13px;text-align:center;}
#miModal .mi-lb-btn{position:absolute;width:42px;height:42px;border:0;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;cursor:pointer;}
#miModal .mi-lb-btn:hover{background:rgba(255,255,255,.26);}
#miModal .mi-lb-prev{left:8px;top:50%;transform:translateY(-50%);}
#miModal .mi-lb-next{right:8px;top:50%;transform:translateY(-50%);}
#miModal .mi-lb-close{right:10px;top:10px;font-size:18px;}
#miModal .mi-lb.is-single .mi-lb-prev,#miModal .mi-lb.is-single .mi-lb-next{display:none;}

/* источники */
#miModal .mi-sources{
  margin-top:16px;padding-top:12px;border-top:1px dashed #dbe6f2;
  font-size:12px;line-height:1.5;color:#64748b;
}
#miModal .mi-sources b{display:block;margin-bottom:4px;color:#475569;font-size:12px;}
#miModal .mi-sources ol{margin:0;padding-left:18px;}

/* ---------- телефон: окно-шторка снизу ---------- */
@media (max-width:640px){
  /* Боковые отступы, чтобы окно не прилипало к краям экрана; снизу небольшой зазор. */
  #miModal{padding:0 10px 10px;align-items:flex-end;}
  /* Фиксированная высота — окно не прыгает при смене таба (прокручивается .mi-body). */
  #miModal .mi-card{max-width:none;border-radius:18px;height:88vh;height:88dvh;max-height:88dvh;}
  #miModal .mi-head{grid-template-columns:64px minmax(0,1fr) 34px;gap:11px;padding:14px 12px 12px;}
  #miModal .mi-cover{width:64px;height:52px;border-radius:10px;}
  #miModal .mi-title{font-size:18px;}
  #miModal .mi-lead{font-size:12.5px;}
  #miModal .mi-tabs{padding:9px 12px;}
  #miModal .mi-body{padding:14px 14px 22px;}
  #miModal .mi-pc,#miModal .mi-rich .mi-grid2{grid-template-columns:minmax(0,1fr);}
  #miModal .mi-rich th{width:46%;}
  #miModal .mi-gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  #miModal .mi-lb{padding:44px 8px;}
}

/* =========================================================================
   Карточки типа дома (#houseTypeHero, «Списком») — вид как у карточек выбора
   фундамента (sid-choice): цельное фото со скруглением и отступами (112×72,
   radius 10), текст по центру, кнопка «Подробнее про материал» — ОТДЕЛЬНОЙ
   строкой под названием, цена .hth-from — справа по вертикали.
   Файл грузится последним из calc-CSS — перебивает formredesign/v11/reorg.
   Внешних CDN нет. (08.10.2026)
   ========================================================================= */
html body .calc-page #houseTypeHero.is-view-list .hth-card{
  grid-template-columns:152px minmax(0,1fr) !important;
  align-items:center !important;
  column-gap:12px !important;
  gap:12px !important;
  min-height:88px !important;
  padding:8px 10px !important;
  position:relative !important;
  overflow:visible !important;
  border-radius:12px !important;
}
/* Фото — цельный скруглённый thumbnail с отступами, как у фундамента */
html body .calc-page #houseTypeHero.is-view-list .hth-ico,
html body .calc-page #houseTypeHero.is-view-list .hth-ico.hth-ico-img{
  width:152px !important;
  min-width:140px !important;
  height:136px !important;
  min-height:0 !important;
  align-self:center !important;
  aspect-ratio:auto !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:10px !important;
  overflow:hidden !important;
}
html body .calc-page #houseTypeHero.is-view-list .hth-ico img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
/* Тело: слева колонкой — название, под ним кнопка «Подробнее»; цена справа */
html body .calc-page #houseTypeHero.is-view-list .hth-body{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;
  gap:5px !important;
  min-width:0 !important;
  padding:4px 150px 4px 2px !important;
}
html body .calc-page #houseTypeHero.is-view-list .hth-name{
  display:block !important;
  width:100% !important;
}
html body .calc-page #houseTypeHero.is-view-list .hth-desc{
  display:block !important;
  width:100% !important;
}
/* Кнопка «Подробнее про материал» — всегда отдельной строкой под заголовком */
html body .calc-page #houseTypeHero.is-view-list .hth-info{
  align-self:flex-start !important;
  margin:0 !important;
}
/* Узкий телефон: кнопка не вылезает за карточку — при нехватке места текст
   переносится внутри «таблетки» (на обычной ширине остаётся в одну строку) */
html body .calc-page #houseTypeHero.is-view-list .hth-info{
  max-width:100% !important;
  box-sizing:border-box !important;
  white-space:normal !important;
}
/* Цена — справа по вертикали */
html body .calc-page #houseTypeHero.is-view-list .hth-from{
  position:absolute !important;
  top:50% !important;
  right:12px !important;
  transform:translateY(-50%) !important;
  margin:0 !important;
  align-items:flex-end !important;
  text-align:right !important;
  max-width:132px !important;
}
html body .calc-page #houseTypeHero.is-view-list .hth-from-what{
  text-align:right !important;
}
/* «✓» выбранного — по центру фото, как у фундамента */
html body .calc-page #houseTypeHero.is-view-list .hth-check{
  position:absolute !important;
  top:50% !important;
  left:86px !important;   /* 10px отступ карточки + 152/2 — центр фото */
  right:auto !important;
  transform:translate(-50%,-50%) !important;
  justify-self:auto !important;
  align-self:auto !important;
  margin:0 !important;
}

@media (max-width:720px){
  html body .calc-page #houseTypeHero.is-view-list .hth-body{
    padding:4px 10px 4px 2px !important;
  }
  html body .calc-page #houseTypeHero.is-view-list .hth-from{
    position:static !important;
    transform:none !important;
    align-items:flex-start !important;
    text-align:left !important;
    max-width:none !important;
    margin-top:2px !important;
  }
  html body .calc-page #houseTypeHero.is-view-list .hth-from-what{
    text-align:left !important;
  }
}

/* =========================================================================
   Галочка выбранного варианта (.sid-choice-check) — СТРОГО по центру фото,
   а не фиксированными top/right. Галочка лежит внутри .sid-choice-media,
   поэтому делаем медиа опорой (position:relative) и центрируем галочку по
   нему — работает и в «Списком», и в «Плиткой», при любом размере фото.
   Размер/вид значка (v11: 32px, зелёный, иконка FA) НЕ трогаем. (08.10.2026)
   ========================================================================= */
html body .calc-page .sid-choice-block.has-images .sid-choice-media{
  position:relative !important;
}
html body .calc-page .sid-choice-block.has-images .sid-choice-media .sid-choice-check{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
}

/* =========================================================================
   ЕДИНЫЙ СТИЛЬ: карточки выбора (.sid-choice-card — фундамент, кровля, окна…,
   включая .is-active и .is-disabled) = карточки материалов (.hth-card).
   Для ВСЕХ ширин: телефон, планшет, ПК. Значения сняты с вычисленного стиля
   .hth-card в браузере. :not(#_):not(#_) — перебивает правила v11/reorg
   (у них 1 id). Внешних CDN нет. (08.10.2026)
   ========================================================================= */

/* Сетка: как .hth-grid — одна колонка, зазор 8px */
html body .calc-page .sid-choice-block.is-view-list .sid-choice-grid:not(#_):not(#_),
html body .calc-page .sid-choice-block.is-list .sid-choice-grid:not(#_):not(#_){
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:8px !important;
  row-gap:8px !important;
}

/* Оболочка карточки: белый фон, рамка 1px, скругление 12px — как .hth-card */
html body .calc-page .sid-choice-block .sid-choice-grid button.sid-choice-card:not(#_):not(#_),
html body .calc-page .sid-choice-block .sid-choice-grid button.sid-choice-card.is-disabled:not(#_):not(#_),
html body .calc-page .sid-choice-block .sid-choice-grid button.sid-choice-card:not(.is-active):hover:not(#_):not(#_){
  background:#fff !important;
  background-image:none !important;
  border:1px solid #dde7f2 !important;
  border-radius:12px !important;
  box-shadow:none !important;
  margin:0 !important;
  transform:none !important;
}
/* Выбранная — как .hth-card.is-active */
html body .calc-page .sid-choice-block .sid-choice-grid button.sid-choice-card.is-active:not(#_):not(#_),
html body .calc-page .sid-choice-block .sid-choice-grid button.sid-choice-card.is-active:hover:not(#_):not(#_){
  background:rgba(38,143,177,.035) !important;
  border-color:#268fb1 !important;
  box-shadow:0 0 0 2px rgba(38,143,177,.08) !important;
}
/* Недоступная — та же оболочка, только приглушена (как было) */
html body .calc-page .sid-choice-block .sid-choice-grid button.sid-choice-card.is-disabled:not(#_):not(#_){
  opacity:.5 !important;
  filter:grayscale(.35) !important;
}

/* Раскладка карточки с фото («Списком») — как .hth-card */
html body .calc-page .sid-choice-block.has-images.is-view-list button.sid-choice-card:not(#_):not(#_){
  display:grid !important;
  grid-template-columns:152px minmax(0,1fr) !important;
  align-items:center !important;
  column-gap:12px !important;
  min-height:88px !important;
  height:auto !important;
  padding:8px 10px !important;
}
html body .calc-page .sid-choice-block.has-images.is-view-list .sid-choice-media:not(#_):not(#_){
  width:152px !important;
  min-width:140px !important;
  height:136px !important;
  min-height:0 !important;
  margin:0 !important;
  align-self:center !important;
  border:0 !important;
  border-radius:10px !important;
  overflow:hidden !important;
  background:transparent !important;
}
html body .calc-page .sid-choice-block.has-images.is-view-list .sid-choice-body:not(#_):not(#_){
  padding:4px 12px 4px 2px !important;   /* справа 12px — как у цены .hth-from */
  column-gap:12px !important;
}

/* Текст — как у .hth-card */
html body .calc-page .sid-choice-block .sid-choice-name:not(#_):not(#_){
  font-size:15px !important;
  font-weight:600 !important;
  line-height:normal !important;
  color:#0f172a !important;
}
html body .calc-page .sid-choice-block .sid-choice-desc:not(#_):not(#_){
  font-size:12px !important;
  line-height:1.4 !important;
  color:var(--c-muted,#64748b) !important;
}
/* Цена — как .hth-from / .hth-from-what */
html body .calc-page .sid-choice-block .sid-choice-effect b:not(#_):not(#_),
html body .calc-page .sid-choice-block .sid-choice-row-effect b:not(#_):not(#_){
  font-size:12.5px !important;
  font-weight:600 !important;
  color:#268fb1 !important;
  line-height:1.25 !important;
}
html body .calc-page .sid-choice-block .sid-choice-effect small:not(#_):not(#_),
html body .calc-page .sid-choice-block .sid-choice-row-effect small:not(#_):not(#_){
  font-size:10.5px !important;
  font-weight:600 !important;
  color:var(--c-muted,#64748b) !important;
  line-height:1.25 !important;
}

/* Телефон (≤720px): цена под текстом слева — как у .hth-card */
@media (max-width:720px){
  html body .calc-page .sid-choice-block.has-images.is-view-list .sid-choice-body:not(#_):not(#_){
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:3px !important;
    padding:4px 10px 4px 2px !important;   /* как .hth-body на телефоне */
  }
  /* все строки текста — по левому краю, как у .hth-card (сбрасываем десктопные
     align-self:end/center от grid-раскладки) */
  html body .calc-page .sid-choice-block.has-images.is-view-list .sid-choice-body > *:not(#_):not(#_){
    align-self:flex-start !important;
    justify-self:start !important;
    text-align:left !important;
    grid-column:auto !important;
    grid-row:auto !important;
    margin-left:0 !important;
  }
  html body .calc-page .sid-choice-block.has-images.is-view-list .sid-choice-effect:not(#_):not(#_){
    flex-direction:column !important;
    align-items:flex-start !important;
    text-align:left !important;
    gap:1px !important;
    margin:2px 0 0 !important;
    padding:0 !important;
  }
}