/*
 * Панель «товар в корзине» (D-0096) — см. site/assets/sofa-cart-notice.js.
 *
 * Вид держим языком источника: прямые углы, фирменный красный #bd1c3c, тонкие
 * серые линии. Панель приходит справа сверху — там же, где живёт иконка
 * корзины, к которой летит фото: взгляд покупателя уже в этом углу.
 */

/* Панель выезжает ИЗ плавающего блока корзины (он живёт у правого края), а не падает
 * в угол экрана: покупатель уже смотрит туда — туда же летит фото товара, там же
 * счётчик. Позицию по вертикали скрипт подгоняет под сам блок. */
.sofa-added{
  position:fixed;z-index:1200;
  right:var(--sofa-added-right,max(18px,env(safe-area-inset-right)));
  top:var(--sofa-added-top,max(18px,env(safe-area-inset-top)));
  width:min(360px,calc(100vw - 36px));
  box-sizing:border-box;padding:18px 40px 16px 18px;
  background:#fff;border:1px solid #ececec;box-shadow:0 14px 40px rgba(20,22,34,.18);
  overflow:hidden;
  transform:translateX(calc(100% + 24px));opacity:0;
  transition:transform .34s cubic-bezier(.2,.9,.2,1),opacity .2s ease}
.sofa-added.is-in{transform:none;opacity:1}

/* Короткое уведомление (избранное): те же поля и та же анимация, но без товара и кнопок —
 * это подтверждение, а не приглашение к действию. */
.sofa-added.is-mini{width:min(280px,calc(100vw - 36px));padding:14px 40px 14px 18px}
.sofa-added.is-mini .sofa-added-t{font-size:14px}

.sofa-added-top{display:flex;gap:14px;align-items:flex-start}
.sofa-added-pic{flex:0 0 64px;width:64px;height:64px;border:1px solid #f2f2f2;
  display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff}
.sofa-added-pic img{max-width:100%;max-height:100%;display:block}
.sofa-added-txt{min-width:0;display:flex;flex-direction:column;gap:3px}
/* Заголовок с галкой: подтверждение читается до того, как прочитан текст. */
.sofa-added-t{font-size:15px;line-height:1.3;color:#1d2029;display:flex;align-items:center;gap:8px}
.sofa-added-t::before{
  content:"";flex:0 0 18px;width:18px;height:18px;border-radius:50%;background:#3aa76d;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-size:12px 12px;background-position:center;background-repeat:no-repeat}
.sofa-added-name{font-size:13px;line-height:1.4;color:#555;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sofa-added-sum{font-size:12px;line-height:1.4;color:#8b8b8b}

.sofa-added-acts{display:flex;align-items:center;gap:14px;margin-top:14px}
.sofa-added-go.btn.btn-default{
  flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:0 16px;font-size:13px;font-weight:700;border-radius:0}
.sofa-added-stay{
  flex:0 0 auto;border:0;background:none;padding:0;font-size:13px;color:#8b8b8b;
  cursor:pointer;border-bottom:1px dotted #c9c9c9;line-height:1.5;
  transition:color .16s ease,border-color .16s ease}
.sofa-added-stay:hover{color:#bd1c3c;border-color:#bd1c3c}

.sofa-added-x{
  position:absolute;top:8px;right:8px;width:26px;height:26px;padding:0;border:0;background:none;
  color:#b6b6b6;display:grid;place-items:center;cursor:pointer;transition:color .16s ease}
.sofa-added-x svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.sofa-added-x:hover{color:#1d2029}

/* Полоска жизни: видно, сколько панель ещё простоит. Под курсором — замирает. */
.sofa-added-life{
  position:absolute;left:0;right:0;bottom:0;height:2px;background:#bd1c3c;
  transform-origin:left;transform:scaleX(1)}
.sofa-added.is-in .sofa-added-life{transform:scaleX(0);transition:transform var(--life,6000ms) linear}

@media(max-width:600px){
  .sofa-added{left:12px;right:12px;top:auto;bottom:12px;width:auto}
  .sofa-added-acts{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .sofa-added{transition:none}
  .sofa-added.is-in .sofa-added-life{transition:none}
}