/*
 * DOMNO MEDIA V2.1
 *
 * Новые элементы работают внутри
 * существующего конфигуратора.
 *
 * Никакой дополнительной высоты
 * страницы они не создают.
 */


/* старый viewer никогда не показываем */

.domno-visual-viewer{
  display:none!important;
}


/* existing configView is host */

.domno-media-host{
  position:relative;
}


/* MEDIA TABS */

.domno-media-tabs{
  position:absolute;
  z-index:80;
  top:14px;
  left:14px;

  display:flex;
  align-items:center;
  gap:4px;

  padding:4px;

  border-radius:999px;

  background:
    rgba(245,244,238,.90);

  border:
    1px solid
    rgba(17,18,15,.10);

  box-shadow:
    0 7px 25px
    rgba(0,0,0,.06);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}

.domno-media-tabs[hidden]{
  display:none!important;
}

.domno-media-tab{
  border:0;
  margin:0;

  padding:
    8px 13px;

  border-radius:
    999px;

  background:
    transparent;

  color:#6e7067;

  font:inherit;

  font-size:11px;

  font-weight:700;

  cursor:pointer;

  white-space:nowrap;
}

.domno-media-tab.is-active{
  background:#11120f;
  color:#fff;
}

.domno-media-tab[hidden]{
  display:none!important;
}


/* PHOTO CONFIGURATOR */

.domno-render-stack{
  position:absolute;
  z-index:40;
  inset:0;

  overflow:hidden;

  border-radius:
    inherit;

  background:#d9d8d0;

  pointer-events:none;
}

.domno-render-stack[hidden]{
  display:none!important;
}

.domno-render-base,
.domno-render-layer{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:contain;

  object-position:center;

  display:block;
}

.domno-render-base{
  z-index:1;
}

.domno-render-layers{
  position:absolute;
  inset:0;
  z-index:2;
}

.domno-render-layer{
  opacity:0;

  animation:
    domnoLayerIn
    .28s ease
    forwards;
}

@keyframes domnoLayerIn{

  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}


/*
 * PLAN / GALLERY
 *
 * Overlay, not new page block.
 */

.domno-media-overlay{
  position:absolute;

  z-index:70;

  inset:0;

  overflow:hidden;

  border-radius:
    inherit;

  background:#f5f4ee;
}

.domno-media-overlay[hidden]{
  display:none!important;
}


/* PLAN */

.domno-plan-image{
  width:100%;
  height:100%;

  display:flex;

  align-items:center;
  justify-content:center;

  padding:36px;

  background:#f5f4ee;
}

.domno-plan-image img{
  max-width:100%;
  max-height:100%;

  width:auto;
  height:auto;

  object-fit:contain;
}

.domno-plan-pdf{
  width:100%;
  height:100%;

  display:flex;
  flex-direction:column;
}

.domno-plan-pdf iframe{
  width:100%;
  flex:1;

  min-height:0;

  border:0;
}

.domno-plan-pdf a{
  flex:0 0 54px;

  display:flex;

  align-items:center;
  justify-content:center;

  color:#11120f;

  text-decoration:none;

  font-weight:700;

  border-top:
    1px solid
    rgba(17,18,15,.10);
}


/* GALLERY */

.domno-gallery-main{
  position:absolute;

  inset:
    0 0 82px;

  overflow:hidden;

  background:#dddcd5;
}

.domno-gallery-main > img{
  width:100%;
  height:100%;

  object-fit:contain;
}

.domno-gallery-arrow{
  position:absolute;

  top:50%;

  transform:
    translateY(-50%);

  width:46px;
  height:46px;

  border:0;

  border-radius:50%;

  background:
    rgba(245,244,238,.94);

  color:#11120f;

  font-size:19px;

  cursor:pointer;
}

.domno-gallery-prev{
  left:16px;
}

.domno-gallery-next{
  right:16px;
}

.domno-gallery-counter{
  position:absolute;

  right:16px;
  bottom:16px;

  padding:
    7px 11px;

  border-radius:
    999px;

  background:
    rgba(17,18,15,.80);

  color:#fff;

  font-size:11px;

  font-weight:700;
}

.domno-gallery-thumbs{
  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:82px;

  display:flex;

  gap:7px;

  align-items:center;

  overflow-x:auto;

  padding:
    8px 12px;

  background:#f5f4ee;

  border-top:
    1px solid
    rgba(17,18,15,.08);
}

.domno-gallery-thumb{
  flex:
    0 0 84px;

  width:84px;
  height:62px;

  padding:0;

  border:
    2px solid
    transparent;

  border-radius:7px;

  overflow:hidden;

  cursor:pointer;

  background:#ddd;
}

.domno-gallery-thumb.is-active{
  border-color:#11120f;
}

.domno-gallery-thumb img{
  width:100%;
  height:100%;

  object-fit:cover;
}


/* MOBILE */

@media(max-width:760px){

  .domno-media-tabs{
    top:10px;
    left:10px;
    right:10px;

    overflow-x:auto;

    width:auto;
  }

  .domno-media-tab{
    padding:
      7px 11px;

    font-size:
      10px;
  }

  .domno-plan-image{
    padding:15px;
  }

}


/* ==========================================
   DOMNO_MEDIA_PRICE_PLAN_FIX_V1
   ========================================== */

/*
 * Фото дома находится ПОД ценой
 * и блоком результата конфигурации.
 */
.domno-render-stack{
  z-index:20 !important;
}


/*
 * Цена + CTA всегда поверх
 * фотореалистичного рендера.
 */
.config-summary{
  position:relative !important;
  z-index:95 !important;
}

#cfgName,
#cfgPrice{
  position:relative;
  z-index:96;
}


/*
 * Медиа-переключатель выше рендера,
 * но ниже итоговой панели.
 */
.domno-media-tabs{
  z-index:80 !important;
}


/*
 * Планировка/галерея —
 * поверх экстерьера.
 */
.domno-media-overlay{
  z-index:70 !important;
}


/*
 * Если планировка есть,
 * она занимает только область
 * существующего конфигуратора
 * и не меняет высоту страницы.
 */
.domno-plan-panel,
.domno-gallery-panel{
  position:absolute !important;
  inset:0 !important;
}



/* ==========================================
   DOMNO_MEDIA_LIVE_PRICE_V1
   ========================================== */

#configView{
  position:relative;
}

.domno-media-live-price{
  position:absolute;

  right:22px;
  bottom:22px;

  z-index:200;

  display:flex;
  align-items:flex-end;
  gap:9px;

  padding:
    14px 18px;

  border-radius:6px;

  background:#bddb49;

  color:#11120f;

  box-shadow:
    0 8px 30px
    rgba(0,0,0,.08);

  pointer-events:none;
}

.domno-media-live-price[hidden]{
  display:none !important;
}

.domno-media-live-price span{
  padding-bottom:3px;

  font-size:11px;
  font-weight:700;
  line-height:1;
}

.domno-media-live-price strong{
  font-size:
    clamp(
      21px,
      2vw,
      30px
    );

  font-weight:800;

  line-height:.92;

  letter-spacing:-.04em;

  white-space:nowrap;
}


/*
 * Фото и планировка находятся ниже ценника.
 */

.domno-render-stack{
  z-index:20 !important;
}

.domno-media-overlay{
  z-index:70 !important;
}

.domno-media-tabs{
  z-index:90 !important;
}

.domno-media-live-price{
  z-index:200 !important;
}


/* MOBILE */

@media(max-width:760px){

  .domno-media-live-price{
    right:14px;
    bottom:14px;

    padding:
      12px 14px;

    gap:7px;
  }

  .domno-media-live-price strong{
    font-size:22px;
  }

  .domno-media-live-price span{
    font-size:10px;
  }

}



/* ==========================================
   DOMNO_SINGLE_PRICE_V1
   Единственная цена — в config-summary.
   ========================================== */

.domno-media-live-price{
  display:none !important;
}

/*
 * Основной блок расчёта всегда поверх
 * экстерьера / планировки / галереи.
 */
.config-summary{
  position:relative !important;
  z-index:150 !important;
}

#cfgName,
#cfgPrice{
  position:relative;
  z-index:151;
}



/* ==========================================
   DOMNO_SUMMARY_BOTTOM_V1
   ========================================== */

.config-summary.domno-summary-bottom{
  position:relative !important;

  z-index:20 !important;

  display:grid !important;

  grid-template-columns:
    minmax(220px,1fr)
    auto
    auto;

  align-items:center;

  gap:34px;

  width:100%;

  min-height:116px;

  margin:0 !important;

  padding:
    24px 28px !important;

  border-top:
    1px solid
    rgba(17,18,15,.10);

  background:#f4f2eb;

  box-shadow:none !important;
}


/*
 * Модель / пояснение
 */

.config-summary.domno-summary-bottom
#cfgName{
  margin:0;

  font-size:15px;

  font-weight:800;

  line-height:1.2;

  letter-spacing:-.02em;
}


/*
 * Цена
 */

.config-summary.domno-summary-bottom
#cfgPrice{
  min-width:max-content;

  margin:0;

  font-size:
    clamp(
      27px,
      2.2vw,
      38px
    );

  font-weight:850;

  line-height:.95;

  letter-spacing:-.045em;

  white-space:nowrap;
}


/*
 * CTA
 */

.config-summary.domno-summary-bottom
a{
  min-width:280px;

  min-height:64px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  margin:0 !important;

  padding:
    0 24px !important;

  white-space:nowrap;
}


/*
 * Теперь configView сверху непосредственно
 * примыкает к нижней панели.
 */

#configView{
  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
}

.config-summary.domno-summary-bottom{
  border-bottom-left-radius:22px;
  border-bottom-right-radius:22px;
}


/* ==========================================
   MOBILE
   ========================================== */

@media(max-width:760px){

  .config-summary.domno-summary-bottom{
    grid-template-columns:
      minmax(0,1fr)
      auto;

    gap:
      12px 18px;

    min-height:0;

    padding:
      18px 16px 16px !important;
  }


  .config-summary.domno-summary-bottom
  #cfgName{
    grid-column:1;

    font-size:14px;
  }


  .config-summary.domno-summary-bottom
  #cfgPrice{
    grid-column:2;

    font-size:25px;

    text-align:right;
  }


  .config-summary.domno-summary-bottom
  a{
    grid-column:
      1 / -1;

    width:100%;

    min-width:0;

    min-height:58px;

    justify-content:center;

    padding:
      0 16px !important;
  }


  #configView{
    border-radius:
      18px 18px 0 0 !important;
  }


  .config-summary.domno-summary-bottom{
    border-radius:
      0 0 18px 18px;
  }

}



/* ==========================================
   DOMNO_RIGHT_SUMMARY_V2
   ========================================== */

/*
 * Правая часть конфигуратора теперь
 * является единой вертикальной колонкой.
 */

.domno-media-column{
  grid-column:2;

  min-width:0;
  width:100%;

  display:flex;
  flex-direction:column;

  align-self:stretch;
}


/*
 * Сам визуальный блок занимает
 * всю ширину правой колонки.
 */

.domno-media-column #configView{
  width:100%;

  flex:1 0 auto;

  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
}


/*
 * Нижняя коммерческая панель
 * только под изображением.
 */

.domno-media-column
.config-summary.domno-summary-bottom{

  width:100% !important;

  min-height:112px;

  margin:0 !important;

  padding:
    22px 28px !important;

  display:grid !important;

  grid-template-columns:
    minmax(220px,1fr)
    auto
    auto;

  align-items:center;

  gap:32px;

  background:#f4f2eb;

  border-top:
    1px solid
    rgba(17,18,15,.10);

  border-radius:
    0 0 22px 22px;

  box-shadow:none !important;

  position:relative !important;
  z-index:20 !important;
}


/* Модель */

.domno-media-column
.config-summary
#cfgName{

  margin:0;

  font-size:15px;
  font-weight:800;

  line-height:1.15;

  letter-spacing:-.02em;
}


/* Цена */

.domno-media-column
.config-summary
#cfgPrice{

  margin:0;

  min-width:max-content;

  font-size:
    clamp(
      28px,
      2.1vw,
      38px
    );

  font-weight:850;

  line-height:.95;

  letter-spacing:-.045em;

  white-space:nowrap;
}


/* CTA */

.domno-media-column
.config-summary a{

  min-width:300px;
  min-height:64px;

  margin:0 !important;

  padding:
    0 24px !important;

  display:flex;

  align-items:center;
  justify-content:space-between;

  white-space:nowrap;
}


/* ==========================================
   MOBILE
   ========================================== */

@media(max-width:900px){

  .domno-media-column{
    grid-column:
      1 / -1;

    width:100%;
  }

}


@media(max-width:760px){

  .domno-media-column
  .config-summary.domno-summary-bottom{

    grid-template-columns:
      minmax(0,1fr)
      auto;

    gap:
      12px 16px;

    min-height:0;

    padding:
      17px 16px 16px !important;

    border-radius:
      0 0 18px 18px;
  }


  .domno-media-column
  .config-summary
  #cfgName{

    grid-column:1;

    font-size:14px;
  }


  .domno-media-column
  .config-summary
  #cfgPrice{

    grid-column:2;

    font-size:25px;

    text-align:right;
  }


  .domno-media-column
  .config-summary a{

    grid-column:
      1 / -1;

    width:100%;

    min-width:0;
    min-height:58px;

    justify-content:center;

    padding:
      0 16px !important;
  }

}