/* ========================================================================
   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:var(--theme-base-color, #620a84);
}

.note-popup{
  --np-purple:  var(--theme-base-color, #620a84);
  --np-purple-7:#4d0868;
  --np-magenta: #cf2682;
  --np-ink:     #20151f;
  --np-text:    #463c45;
  --np-muted:   #6b6b70;
  --np-line:    #ece6ef;
  --np-purple-050:#f7f0fa;
  --np-arrow-x: 50%;

  position:absolute;
  z-index:9000;
  width:320px; 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:4px; top:4px;
  width:44px; height:44px; 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;
}

/* ── «Мой вкус» v2, Ф1 (09.11.2026): строка вида, факты аккорда, шторка аккордов ─────────────── */
.note-popup__kind{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:500; line-height:1.3; color:var(--np-muted);
}
.note-popup__dot{ display:none; width:10px; height:10px; border-radius:50%; flex:none; }
.note-popup[data-kind="accord"] .note-popup__dot{ display:inline-block; }
.note-popup__titles{ gap:4px; }
.note-popup[data-kind="note"] .note-popup__badge{ margin-top:4px; }
.note-popup[data-kind="accord"] .note-popup__title,
.note-popup[data-kind="sheet"] .note-popup__title{ cursor:default; }
.note-popup[data-kind="accord"] .note-popup__title:hover,
.note-popup[data-kind="sheet"] .note-popup__title:hover{ color:var(--np-ink) !important; }
.note-popup[data-kind="accord"] .note-popup__open,
.note-popup[data-kind="sheet"] .note-popup__open,
.note-popup[data-kind="accord"] .note-popup__actions,
.note-popup[data-kind="sheet"] .note-popup__actions,
.note-popup[data-kind="accord"] .note-popup__odor,
.note-popup[data-kind="sheet"] .note-popup__odor{ display:none !important; }
.note-popup[data-kind="accord"] .note-popup__head,
.note-popup[data-kind="sheet"] .note-popup__head{ padding-right:0; }
.note-popup.is-mobile[data-kind="sheet"] .note-popup__head{ padding-right:40px; }
.note-popup__facts:empty, .note-popup__sheet:empty{ display:none; }
.note-popup__facts{ margin-top:12px; display:flex; flex-direction:column; gap:4px; font-size:13.5px; color:var(--np-text); }
.note-popup__fact b{ font-weight:600; color:var(--np-ink); }
.note-popup__sheet{ margin-top:12px; max-height:min(62vh, 520px); overflow-y:auto; overscroll-behavior:contain; }

/* отметка ноты/аккорда в тултипе — кнопки рисует taste.v1.js (.dpt-btn), здесь только раскладка */
.note-popup__taste{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.note-popup__taste:empty{ display:none; }
.note-popup__taste .dpt-status{ grid-column:1 / -1; }

@media (prefers-reduced-motion: reduce){
  .note-popup, .note-popup.is-mobile, .note-popup__backdrop, .note-popup__open{ transition:none !important; }
}

.note-popup__badge[hidden]{ display:none !important; }
.note-popup__fact-link{ margin-top:4px; color:var(--np-purple); font-weight:600; text-decoration:none; }
.note-popup__fact-link:hover{ text-decoration:underline; }

/* ── дизайн-ревью 09.11.2026: категория — чип без капса; переход на страницу ноты — ссылкой внизу, не кругом ── */
.note-popup__badge{
  text-transform:none; letter-spacing:0; font-size:13px; font-weight:500; line-height:18px;
  background:#f3ebf6; border-radius:6px; padding:3px 10px;
}
.note-popup__open{ display:none !important; }
.note-popup__head{ padding-right:0; }
.note-popup[data-kind="note"] .note-popup__actions{ display:block; margin-top:12px; }
.note-popup.is-mobile .note-popup__head{ padding-right:40px; }
.note-popup.is-mobile[data-kind="note"] .note-popup__link{
  display:flex; justify-content:center; min-height:44px; align-items:center; border:1px solid rgba(34,34,40,.32);
  border-radius:6px; font-weight:500; font-size:15px; color:var(--np-ink);
}
.note-popup__taste{ margin-top:16px; }
.note-popup[data-kind="sheet"] .note-popup__sheet{ max-height:min(70vh, 560px); }
/* аккорд: тултип сбоку от столбца полосок (09.11) */
.note-popup[data-place="left"]::after,
.note-popup[data-place="right"]::after{ left:auto; top:var(--np-arrow-y, 50%); transform:translateY(-50%) rotate(45deg); }
.note-popup[data-place="left"]::after{ right:-6px; box-shadow:1px -1px 0 rgba(46,15,45,.05); }
.note-popup[data-place="right"]::after{ left:-6px; box-shadow:-1px 1px 0 rgba(46,15,45,.05); }
.note-popup[data-place="left"], .note-popup[data-place="right"]{ transform:none; }
/* второй круг ревью: заголовок шторки — как заголовки сайта */
.note-popup[data-kind="sheet"] .note-popup__title{ font-weight:400; font-size:20px; line-height:28px; color:#222228; }
/* 10.11.2026, замечания владельца с телефона: шторка не выше экрана (100dvh — с учётом панели браузера),
   прокручивается только список аккордов / текст ноты; заголовок и × — на месте; страница под шторкой не двигается */
.note-popup.is-mobile{ max-height:calc(100vh - 16px); max-height:calc(100dvh - 16px); display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; }
.note-popup.is-mobile > *{ flex-shrink:0; }
.note-popup.is-mobile[data-kind="sheet"] .note-popup__sheet{ flex:1 1 auto; min-height:0; max-height:none; overflow-y:auto; }
.note-popup.is-mobile .note-popup__odor{ flex:0 1 auto; min-height:0; overflow-y:auto; }
html:has(body.note-popup-open), body.note-popup-open{ overflow:hidden; }