/*
 * Калькулятор жалюзи — только то, чего нет в теме ProStore.
 *
 * Правила игры (см. docs-tech/prostore-ui.md):
 *  - цвета акцента ТОЛЬКО через var(--theme-primary-color): их задаёт админка;
 *  - размеры в rem: тема меняет корневой font-size (10px десктоп, vw на
 *    ноутбуках, 9px на телефонах), и px-вёрстка не сжалась бы вместе с сайтом;
 *  - готовые компоненты (.ui-btn, .ui-input, .ui-check__*, .sku__price)
 *    даёт тема — здесь их НЕ переопределяем.
 */

.bc-calc { border-radius: 10px; overflow: hidden; }

/* Секции. В теме отступы .sku__group объявлены в её собственных контекстах
   и на нашей странице не срабатывают — контент прилипал к разделителю и
   краям карточки. Поэтому отступы свои, от темы берём только фон карточки. */
.bc-calc .sku__group { padding: 2.5rem; border-bottom: 1px solid #EDEDF9; }
.bc-calc .sku__group:last-child { border-bottom: 0; }
@media (max-width: 767px) {
  .bc-calc .sku__group { padding: 2rem 1.5rem; }
}

/* ---- раскладка: слева превью и цена, справа форма -------------------- */
.bc-calc__body { display: -ms-flexbox; display: flex; }
.bc-calc__left { -ms-flex: 0 0 42%; flex: 0 0 42%; max-width: 56rem;
                 border-right: 1px solid #EDEDF9; }
.bc-calc__right { -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
@media (max-width: 991px) {
  .bc-calc__body { display: block; }
  /* max-width левой колонки — для десктопа; в одну колонку он оставлял
     справа пустоту на 40% ширины (замер 929 px) */
  .bc-calc__left { max-width: none; border-right: 0; border-bottom: 1px solid #EDEDF9; }
}
/* планшет: превью слева, сводка и цена справа — иначе превью на всю
   ширину получалось выше экрана */
@media (min-width: 641px) and (max-width: 991px) {
  .bc-calc__left { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bc-calc__left > #bc-preview-group { grid-row: span 2; border-bottom: 0;
                                       border-right: 1px solid #EDEDF9; }
  .bc-calc__left > .sku__group:last-child { border-bottom: 0; }
}

/* ---- своя сетка: Bootstrap-.row темы дал бы float-конфликты ---------- */
.bc-grid { display: -ms-flexbox; display: flex; gap: 2rem; }
.bc-grid > * { -ms-flex: 1 1 0; flex: 1 1 0; min-width: 0; }
@media (max-width: 640px) { .bc-grid { display: block; } }

/* ---- счётчик количества (свои классы: на ui-number__* тема вешает
        собственный обработчик, и клик удваивался) ---------------------- */
.bc-qty { display: -ms-flexbox; display: flex; gap: .6rem; }
.bc-qty__input { text-align: center; margin: 0; -ms-flex: 1 1 auto; flex: 1 1 auto; }
.bc-qty__btn { -ms-flex: 0 0 auto; flex: 0 0 auto; width: 4.6rem; height: 4.6rem;
               border: 0; border-radius: 5px; background: #F7F8FB; color: #343434;
               font-size: 2rem; line-height: 1; cursor: pointer;
               font-family: var(--base-font-family); transition: background .25s; }
.bc-qty__btn:hover { background: #E9E8F1; }
.bc-qty__btn:active { transform: scale(.95); }

/* ---- карточки-опции: тема писала их под label, у button текст
        центрируется по умолчанию --------------------------------------- */
.bc-calc .ui-check__btn { width: 100%; text-align: left;
                          -ms-flex-align: center; align-items: center;
                          font-family: var(--base-font-family); }
.bc-calc .ui-check__btn-radio { margin-top: 0; }
.bc-calc .ui-check__btn-text { -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }
.bc-calc .ui-check__btn-price { margin-left: auto; padding-left: 1.5rem; }
.bc-calc .ui-check__btn.is-checked { border-color: var(--theme-primary-color); }
.bc-calc .ui-check__btn.is-checked .ui-check__btn-radio {
  background: var(--theme-primary-color); border-color: var(--theme-primary-color); }
.bc-calc .ui-check__btn.is-checked .ui-check__btn-radio:after { opacity: 1; }

/* ---- чипы фильтров и слоты времени как кнопки ------------------------ */
.bc-calc .ui-check__tag { border: 0; font-family: var(--base-font-family); cursor: pointer; }
.bc-calc .ui-check__tag.is-checked { background: var(--theme-primary-color); color: #fff; }
.bc-calc .ui-check__option { border: 0; font-family: var(--base-font-family);
                             cursor: pointer; width: 100%; }
.bc-calc .ui-check__option.is-checked {
  box-shadow: 0 0 0 2px var(--theme-primary-color); }

/* ---- превью в интерьере ---------------------------------------------- */
.bc-preview { position: relative; width: 100%; padding-top: 62.5%;
              background: var(--bg-no-image); border-radius: 5px; overflow: hidden; }
.bc-preview__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
                   object-fit: cover; }
/* два слоя: новая ткань грузится в скрытый, после onload — кросс-фейд */
.bc-preview__layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
                     object-fit: cover; opacity: 0;
                     transition: opacity .32s cubic-bezier(.4, 0, .2, 1); }
.bc-preview__layer--on { opacity: 1; }
.bc-preview__scene { position: absolute; left: 1.5rem; bottom: 1.5rem;
                     display: -ms-flexbox; display: flex; gap: .6rem; }

/* ---- сетка круглых образцов ------------------------------------------ */
.bc-swatches { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
               gap: 1.4rem; }
@media (max-width: 767px) {
  .bc-swatches { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.bc-swatch { display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
             border-radius: 50%; aspect-ratio: 1 / 1; background-size: cover;
             background-position: center;
             box-shadow: inset 0 0 0 1px rgba(52, 52, 52, .12);
             transition: transform .25s, box-shadow .25s; }
.bc-swatch:hover { transform: scale(1.06); }
.bc-swatch.is-checked { box-shadow: 0 0 0 2px var(--theme-primary-color);
                        transform: scale(1.06); }

/* ---- плашка срока изготовления ---------------------------------------- */
.bc-term { display: inline-flex; align-items: baseline; gap: 1rem; margin: 2rem 0 0;
           padding: 1.2rem 1.8rem; border-radius: 5px; background: var(--body-bg); }
.bc-term__num { font-size: 2.4rem; line-height: 1; font-weight: 500;
                color: var(--theme-primary-color); }
.bc-term__cap { font-size: 1.3rem; color: #BDC2D3; }

/* ---- сводка над ценой -------------------------------------------------- */
#bc-summary .bc-break__row { font-size: 1.5rem; line-height: 1.6; }
#bc-summary .bc-break__row + .bc-break__row { margin-top: .6rem; }

/* ---- расшифровка цены ------------------------------------------------- */
.bc-break { border-top: 1px solid #EDEDF9; margin-top: 1.5rem; padding-top: 1.5rem; }
.bc-break__row { display: -ms-flexbox; display: flex;
                 -ms-flex-pack: justify; justify-content: space-between;
                 gap: 1.5rem; font-size: 1.4rem; line-height: 2.2rem; }
.bc-break__key { color: #BDC2D3; }
.bc-break__val--acc { color: var(--theme-primary-color); font-weight: 500; }

/* ---- счётчик цены: ширина фиксируется, разряды не скачут -------------- */
.bc-total { font-variant-numeric: tabular-nums; }

/* ---- липкая панель цены на мобильных ----------------------------------
   Пока клиент выбирает ткань внизу формы, сумма и главная кнопка всегда
   видны (макет design/Mobile.dc.html). Кнопка — «В корзину», когда цена
   есть, иначе «Вызвать замерщика». */
.bc-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99;
          padding: 1.2rem 1.6rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
          background: #fff; box-shadow: 0 -4px 20px rgba(52, 52, 52, .10);
          display: none; -ms-flex-align: center; align-items: center; gap: 1.5rem; }
.bc-bar__price { -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.bc-bar__cap { display: block; font-size: 1.2rem; color: #BDC2D3; }
.bc-bar__sum { display: block; font-size: 2rem; font-weight: 600; color: #343434;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
               font-variant-numeric: tabular-nums; }
.bc-bar__btn { -ms-flex: 0 0 auto; flex: 0 0 auto; }
@media (max-width: 767px) {
  .bc-bar { display: -ms-flexbox; display: flex; }
  .bc-bar-spacer { height: 8rem; }
  /* плавающий чат темы — над панелью, а не под ней */
  .bc-page .chat { bottom: 9rem !important; }
}

/* ---- опция без подтверждённой цены и «входит в цену» ------------------ */
.bc-calc .ui-check__btn-price.bc-price--muted { color: #BDC2D3; font-weight: 400; }
.bc-calc .ui-check__btn-price.bc-price--ask { color: #BDC2D3; font-weight: 400;
                                               font-size: 1.3rem; text-align: right; }

/* ---- скелетоны загрузки ----------------------------------------------- */
@keyframes bc-shimmer { 0% { background-position: -32rem 0; }
                        100% { background-position: 32rem 0; } }
.bc-sk { background: linear-gradient(90deg, #EDEDF9 0%, #F7F7FB 50%, #EDEDF9 100%);
         background-size: 32rem 100%; animation: bc-shimmer 1.2s linear infinite;
         border-radius: 5px; }

/* ---- валидация: подсказка выезжает сверху вниз ------------------------ */
.bc-hint { font-size: 1.3rem; line-height: 1.45; color: #BDC2D3; margin-top: .8rem; }
.bc-hint--err { color: #F53C3C; }

/* окно «Вызвать замерщика»: свои отступы — у классов темы (sku__view/sku__group) на ПК padding 0 */
.bc-modal__box { position: relative; max-width: 44rem; margin: 0 auto; background: #fff;
  border-radius: 1rem; box-shadow: 0 1rem 4rem rgba(0, 0, 0, .2); overflow: hidden; }
.bc-modal__head { padding: 2.4rem 5.6rem 2rem 2.4rem; border-bottom: 1px solid #EEF0F5; }
.bc-modal__title { display: block; font-size: 1.9rem; line-height: 1.3; }
.bc-modal__head .bc-hint { margin-top: .6rem; }
.bc-modal__body { padding: 2rem 2.4rem 2.4rem; }
.bc-modal__slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.bc-modal__close { position: absolute; top: 1.2rem; right: 1.2rem; width: 3.6rem; height: 3.6rem;
  padding: 0; border: 0; border-radius: 50%; background: transparent; color: #9AA0AE;
  font-size: 2.8rem; line-height: 3.6rem; text-align: center; cursor: pointer; }
.bc-modal__close:hover, .bc-modal__close:focus { color: var(--theme-primary-color); }
.bc-consent { display: flex; align-items: flex-start; gap: 1rem; margin: 0; cursor: pointer;
  font-size: 1.3rem; line-height: 1.45; font-weight: 400; color: #8A90A0; }
.bc-consent input[type="checkbox"] { position: static !important; opacity: 1 !important; flex: 0 0 auto;
  width: 1.6rem; height: 1.6rem; margin: .15rem 0 0 !important; accent-color: var(--theme-primary-color); }
.ui-input.bc-invalid { box-shadow: 0 0 0 2px #F53C3C; }

@media (prefers-reduced-motion: reduce) {
  .bc-preview__layer, .bc-swatch, .bc-hint { transition: none; }
  .bc-sk { animation: none; }
}