/* Окно о кратности заказа фотопечати — карточки недостающих фото (вариант 2) */
.pp-mult-deficit { font-family: inherit; color: #181818; }
.pp-mult-deficit__title { font-size: 16px; font-weight: 600; margin: 0 0 14px; }
.pp-mult-card { background: #ffffff; border: 1px solid #d1d5d8; border-radius: 10px; padding: 12px 14px; }
.pp-mult-card + .pp-mult-card { margin-top: 12px; }
.pp-mult-card__name { font-weight: 600; font-size: 15px; margin-bottom: 11px; }
.pp-mult-card__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pp-mult-metric { background: #efefef; border-radius: 8px; padding: 9px 6px; text-align: center; }
.pp-mult-metric__label { font-size: 12px; color: #7e7e7e; margin-bottom: 3px; }
.pp-mult-metric__val { font-size: 20px; font-weight: 600; line-height: 1.1; }
.pp-mult-metric--add { background: #fff3e0; }
.pp-mult-metric--add .pp-mult-metric__label { color: #b26a00; }
.pp-mult-metric--add .pp-mult-metric__val { color: #b26a00; }
/* Кнопка «Понятно» в окне кратности: у .b-form-but31 светлый фон и белый текст —
   на белой подложке не читается. Делаем тёмный шрифт (specificity id+class > .b-form-but31). */
#pp-mult-modal .js-pp-mult-close { color: #2f2f2f; }
@media (max-width: 480px) {
  .pp-mult-card__metrics { gap: 6px; }
  .pp-mult-metric__val { font-size: 18px; }
  .pp-mult-card__name { font-size: 14px; }
}

/* Строка-индикатор кратности под шапкой (цельно с баром).
   Выносится из потока, чтобы её показ/скрытие НЕ сдвигало сетку фото и НЕ добавляло
   прокрутку (раньше она была в потоке и при visible-тоггле двигала грид). */
.pp-mult-row { display:flex; align-items:center; justify-content:flex-end; gap:12px; padding:7px 18px; background:#efefef; border-top:1px solid #dcdcdc; cursor:pointer; position:relative; z-index:1001; }
.pp-mult-row__text { font-size:13px; line-height:1.2; color:#555; white-space:nowrap; }
.pp-mult-row__progress { display:block; width:220px; max-width:40vw; height:6px; background:#f0e2cf; border-radius:999px; overflow:hidden; flex:0 0 auto; }
.pp-mult-row__fill { display:block; width:0; height:100%; background:#e6a23c; border-radius:999px; transition:width .2s; }
@media only screen and (max-width:767px) { .pp-mult-row { padding:6px 12px; gap:8px; } .pp-mult-row__text { font-size:12px; } .pp-mult-row__progress { width:120px; } }

/* Mobile.cshtml: строка — сосед #MTopDiv внутри .l_m_cols. Делаем её absolute с
   left/right:0 (без top — остаётся на статическом месте сразу под шапкой), якорь —
   .l_m_cols (position:relative). Так показ/скрытие не занимает высоту в потоке. */
.l_m_cols { position: relative; }
.l_m_cols > .pp-mult-row { position: absolute; left: 0; right: 0; }

/* В iframe на широком экране строка позиционируется тем же inline JS-обработчиком
   скролла, что и шапка/тулбар (top задаётся в Mobile.cshtml), чтобы она ехала прямо под
   фиксированной шапкой и не сдвигала грид.
   ВАЖНО: используем position:absolute (а не fixed) с якорем .l_m_cols (position:relative).
   .l_m_cols — content-box, его ширина НЕ включает вертикальный скроллбар, поэтому строка с
   left:0;right:0 получает ту же ширину, что и шапка (которая в потоке = по ширине контента).
   При fixed строка тянулась бы на всю ширину вьюпорта (вкл. скроллбар) и торчала справа.
   top, задаваемый JS, у absolute отсчитывается от верха .l_m_cols — ровно как и у шапки
   (шапка в потоке с top=value от своего слота наверху контейнера), поэтому вертикаль не меняется. */
@media only screen and (min-width:768px) {
  .l_m_cols > .pp-mult-row__iframe { position: absolute; left: 0; right: 0; transition: top 0.1s ease-out 0.1s; }

  /* Тулбар действий (.m-top-sett-div__iframe, появляется при «Выделить все») имел ту же
     проблему: position:fixed; width:100% → ширина вьюпорта вкл. скроллбар, торчал справа за
     шапку. Делаем его absolute внутри .l_m_cols (offset-parent — .l_m_cols, т.к. .TopSettingsDivFull
     статичен), left:0;right:0 → ширина = ширине контента = ширине шапки. top по-прежнему задаёт
     inline JS на каждый postMessage, поэтому absolute так же едет за скроллом, как раньше fixed.
     Оверрайд поверх photoprint2.css (там у .m-top-sett-div__iframe position:fixed). */
  .l_m_cols .m-top-sett-div__iframe { position: absolute; left: 0; right: 0; width: auto; }

  /* На широких экранах контент шапки (.mTDWrapper) центрирован: max-width:1150px; margin:0 auto;
     padding:12px — поэтому кнопка «Заказать» (последний элемент) стоит у правого края этой
     центрированной коробки, а НЕ у края экрана.
     Полоску оставляем на ВСЮ ширину .l_m_cols (серая подложка должна совпадать с подложкой шапки,
     т.е. тянуться до краёв). А контент (текст+полосу) при flex-end сдвигаем внутрь правым отступом,
     равным отступу центрированной коробки шапки: (ширина - 1150)/2 + 12px её внутреннего padding.
     padding входит внутрь элемента, поэтому фон по-прежнему полный, а контент встаёт под «Заказать».
     max(12px, …) — чтобы на экранах уже 1150px (где коробка уже не центрируется) отступ не уходил в минус. */
  .l_m_cols > .pp-mult-row { padding-right: max(12px, calc((100% - 1150px) / 2 + 12px)); }
}

/* Index.cshtml (десктоп): строка — блок в колонке настроек .b-zakaz-form.
   Делаем absolute (без left/right/top — остаётся на статическом месте, ширина по контенту),
   чтобы её показ/скрытие не занимало высоту в потоке колонки и не сдвигало остальное. */
.b-zakaz-form .pp-mult-row { position: absolute; }

/* «Выделить все» — квадратный чекбокс, чтобы не путался с круглой отметкой в карточке фото.
   Оверрайд поверх photoprint2.css (.m-button-selectall-ico и .photo-select-selected). */
.m-button-selectall .m-button-selectall-ico {
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border-radius: 3px !important;
  -webkit-border-radius: 3px !important;
  border: 2px solid #b8b8b8;
  background: #fff;
  background-color: #fff;
  position: relative;
}

/* Активное состояние: оранжевая заливка с белой галочкой (рисуется на CSS, без PNG-спрайта). */
.m-button-selectall .m-button-selectall-ico.photo-select-selected {
  border-color: #ff5f00;
  background: linear-gradient(to right, #ff5f00 0%, #fc382e 100%);
}
.m-button-selectall .m-button-selectall-ico.photo-select-selected::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 5px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}