/* ========================================================================
   Note popup — карточка ноты из пирамиды парфюма.
   Десктоп: tooltip-card с указателем-стрелкой.
   Mobile (≤767px) или touch-устройства: bottom-sheet с подложкой.
   ======================================================================== */

/* В шаблоне Aspro <a> внутри .notes имеет pointer-events:none (якоря-заглушки).
   Возвращаем кликабельность — JS перехватчик откроет попап. */
.notes-top-wrap .notes a,
.notes-middle-wrap .notes a,
.notes-base-wrap .notes a{
  pointer-events:auto !important;
  cursor:pointer;
}
.notes-top-wrap .notes a:hover .notes-text,
.notes-middle-wrap .notes a:hover .notes-text,
.notes-base-wrap .notes a:hover .notes-text{
  color:#7c2a8f;
}

.note-popup{
  --np-purple:  #7c2a8f;
  --np-purple-7:#571762;
  --np-magenta: #cf2682;
  --np-ink:     #20151f;
  --np-text:    #463c45;
  --np-muted:   #8b8190;
  --np-line:    #ece6ef;
  --np-purple-050:#f7f0fa;
  --np-arrow-x: 50%;

  position:absolute;
  z-index:9000;
  width:340px; max-width:calc(100vw - 16px);
  background:#fff;
  border-radius:14px;
  box-shadow:0 14px 40px rgba(46,15,45,.22), 0 4px 12px rgba(46,15,45,.08);
  padding:18px 18px 16px;
  color:var(--np-text);
  font-size:14px; line-height:1.55;
  font-family:var(--theme-font-family), Arial, sans-serif;
  opacity:0; transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .14s ease, transform .14s ease;
}
.note-popup.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }

/* arrow */
.note-popup::after{
  content:""; position:absolute; left:var(--np-arrow-x); transform:translateX(-50%) rotate(45deg);
  width:12px; height:12px; background:#fff;
  box-shadow:1px 1px 0 rgba(46,15,45,.05);
}
.note-popup[data-place="top"]::after{ bottom:-6px; }
.note-popup[data-place="bottom"]::after{ top:-6px; box-shadow:-1px -1px 0 rgba(46,15,45,.05); }

.note-popup__close{
  position:absolute; right:8px; top:6px;
  width:30px; height:30px; border:0; background:transparent;
  font-size:22px; line-height:1; color:var(--np-muted);
  cursor:pointer; border-radius:50%;
  display:none; /* десктоп скрываем — для мобилки */
}
.note-popup__close:hover{ background:var(--np-purple-050); color:var(--np-purple); }

/* Десктоп: иконка-кнопка перехода в правом верхнем углу */
.note-popup__open,
.note-popup__open:link,
.note-popup__open:visited{
  position:absolute; right:10px; top:10px;
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--np-purple);
  color:#fff !important;            /* перебиваем глобальный a:hover из Aspro */
  text-decoration:none;
  box-shadow:0 4px 10px rgba(124,42,143,.32);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
  z-index:1;
}
.note-popup__open:hover,
.note-popup__open:focus{
  background:var(--np-purple-7);
  color:#fff !important;            /* иконка остаётся белой */
  transform:scale(1.09);            /* +9% — половина от прежних +18% */
  box-shadow:0 8px 22px rgba(124,42,143,.5);
}
.note-popup__open:active{ transform:scale(1.02); }
.note-popup__open svg{ display:block; color:#fff; }
.note-popup__open svg path{ stroke:#fff; }

.note-popup__head{ padding-right:38px; }
.note-popup__titles{
  min-width:0;
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
}
.note-popup__title{
  display:block;
  font-size:18px; font-weight:700; color:var(--np-ink); line-height:1.2;
  margin:0;
  text-decoration:none !important;
  transition:color .15s ease;
}
.note-popup__title:hover{ color:var(--np-purple) !important; }
.note-popup__badge{
  display:inline-block;
  font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.7px;
  background:var(--np-purple-050); color:var(--np-purple-7) !important;
  padding:4px 10px; border-radius:999px;
  text-decoration:none !important;
  transition:background .15s ease, color .15s ease;
}
.note-popup__badge:hover{
  background:var(--np-purple);
  color:#fff !important;
}
.note-popup__badge strong{ color:var(--np-magenta); font-weight:700; }

/* Десктоп: текстовая ссылка «Подробнее» скрыта (используем иконку сверху) */
.note-popup__actions{ display:none; }

.note-popup__odor{
  margin-top:12px;
  font-size:13.5px; line-height:1.55; color:var(--np-text);
}

.note-popup__actions{ margin-top:14px; }
.note-popup__link{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--np-purple); text-decoration:none; font-weight:600; font-size:13.5px;
  border-bottom:1px solid transparent; transition:border-color .15s;
}
.note-popup__link:hover{ border-bottom-color:var(--np-purple); color:var(--np-purple-7); }

/* backdrop (для мобильного режима) */
.note-popup__backdrop{
  position:fixed; inset:0; z-index:8990;
  background:rgba(20,8,22,.45);
  opacity:0; pointer-events:none;
  transition:opacity .18s;
}
.note-popup__backdrop.is-visible{ opacity:1; pointer-events:auto; }

/* === Mobile bottom-sheet === */
.note-popup.is-mobile{
  position:fixed !important;
  left:0 !important; right:0;
  bottom:0 !important;
  top:auto !important;
  width:auto; max-width:none;
  border-radius:18px 18px 0 0;
  padding:22px 20px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(100%);
  transition:transform .25s ease;
  box-shadow:0 -18px 40px rgba(46,15,45,.25);
}
.note-popup.is-mobile.is-visible{ transform:translateY(0); }
.note-popup.is-mobile::after{ display:none; }
.note-popup.is-mobile::before{
  content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:42px; height:4px; border-radius:2px; background:var(--np-line);
}
.note-popup.is-mobile .note-popup__close{ display:block; top:8px; right:8px; }
.note-popup.is-mobile .note-popup__open{ display:none; }
.note-popup.is-mobile .note-popup__actions{ display:block; }
.note-popup.is-mobile .note-popup__title{ font-size:19px; }
.note-popup.is-mobile .note-popup__odor{ font-size:14px; }

/* Респонс — при узком десктопе тоже ужать */
@media (max-width: 420px) {
  .note-popup{ width:auto; }
}

/* Когда открыт мобильный bottom-sheet — прячем чат-bubble и окно чата,
   чтобы они не перекрывали попап и не отвлекали. */
body.note-popup-open .dp-chat-bubble,
body.note-popup-open .dp-chat-window{
  opacity:0; pointer-events:none;
  transition:opacity .18s ease;
}