/* ===== Токены (fallback) ===== */
:root{
  --pp-primary: #153983;                 /* правильный фирменный синий */
  --pp-text: #0e1a2b;
  --pp-muted: #5b6676;
  --pp-bg: #eaedf2;
  --pp-green: #5BBF7A;
  --pp-shadow: 0 8px 20px rgba(10,20,40,.08);
  --pp-radius: 18px;
}
main {
  margin-top: 80px;
}
/* Крошка «назад» */
.pp-topbar{ padding-block: 8px 16px; }
.pp-back{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px;
  border:1px solid #d7deea; background:#fff;
  font-weight:700; color:var(--pp-primary); text-decoration:none;
}
.pp-back img{ width:18px; height:auto; }
/* Сетка страницы */
.pp-grid{
  display:grid;
  grid-template-columns: 450px 1fr; /* Фиксированная колонка для фото */
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

/* Галерея слева (теперь просто контейнер для одного фото) */
.pp-gallery{ display:block; }
.pp-thumbs{ display:grid; gap:16px; }
.pp-thumb{
  padding:0; border:0; cursor:pointer; background:#fff;
  border-radius: 12px; box-shadow: var(--pp-shadow); overflow:hidden;
}
.pp-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pp-thumb.is-active{ outline:2px solid var(--pp-primary); outline-offset:2px; }

.pp-main{
  background:#f0f3f6; border-radius: 12px; box-shadow: var(--pp-shadow);
  min-height: 420px; display:grid; place-items:center; overflow:hidden;
}
.pp-main img{ width:100%; height:auto; display:block; }

/* Правая часть */
.pp-head{
  display:flex;
  justify-content: space-between;    /* заголовок слева, бейдж справа */
  align-items:center;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;                    /* на узких — перенос */
}
.pp-title{
  font-family: var(--ni-head, "Unbounded", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 900; color: var(--pp-primary); margin:0;
}
.pp-badge{
  background: var(--pp-primary);
  color:#fff;
  font-weight:700;
  border-radius:999px;
  padding:6px 12px;
  font-size:14px;
}
.pp-subtitle{ color:var(--pp-muted); margin-bottom:8px; }

.pp-rating{ display:flex; align-items:center; gap:10px; margin: 8px 0 16px; }
.pp-stars{ color:var(--pp-primary); letter-spacing:2px; font-weight:900; }
.pp-rev{ color:var(--pp-muted); }

/* Описание (details) */
.pp-details{
  border-top:1px dashed #d5dce7;
  padding-top:12px; margin: 8px 0 14px;
}
.pp-details__sum{
  /* ВНИМАНИЕ: шрифт у summary базовый, НЕ Unbounded */
  list-style:none;
  cursor:pointer; color:var(--pp-primary);
  font-weight:800; margin-bottom:6px;
}
.pp-details__sum::-webkit-details-marker{ display:none; }
.pp-desc{ color:var(--pp-text); line-height:1.7; }

/* Длительность курса */
.pp-h2{
  /* Подзаголовок — базовый шрифт, НЕ Unbounded */
  font-weight:800; color:var(--pp-primary); font-size:18px;
  margin: 10px 0 12px;
}
.pp-planform{ display:grid; gap:14px; }
.pp-plan{
  --ring: #cfd7ea;
  display:grid; grid-template-columns: 1fr auto;
  align-items:center; gap:16px;
  padding:16px 20px; border-radius: 16px;
  border:2px solid var(--ring); background:#fff; box-shadow: var(--pp-shadow);
  cursor:pointer; user-select:none;
  min-height: 64px;                   /* крупнее в целом */
}
.pp-plan input{ display:none; }
.pp-plan__ui{ display:flex; align-items:center; gap:14px; }
.pp-plan__dot{
  width:20px; height:20px; border-radius:999px;
  border:2px solid var(--pp-primary);
  box-shadow: inset 0 0 0 5px #fff;  /* заметный внутренний «просвет» */
  background: transparent;
}
.pp-plan.is-active{ --ring: var(--pp-primary); }
.pp-plan.is-active .pp-plan__dot{ background: var(--pp-primary); }
.pp-plan__name{ font-size:16px; font-weight:700; color:var(--pp-text); }
.pp-plan__price{ font-size:18px; font-weight:800; color:var(--pp-text); }

/* CTA */
.pp-cta{
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;        /* прижимаем кнопку вправо */
}
.pp-add{
  width: auto;                      /* не 100% */
  background: var(--pp-green); color:#fff; border:none;
  padding:14px 22px; border-radius: 999px; font-weight:900; font-size:16px;
  box-shadow: 0 10px 24px rgba(91,191,122,.35); cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  min-width: 220px;                 /* по желанию — можно убрать */
}
.pp-add:hover{ transform: translateY(-1px); box-shadow: 0 14px 32px rgba(91,191,122,.45); }

/* ================== ACCORDIONS (drop-in) ================== */
.pp-accordions{ margin-top:22px; }

/* секция аккордеона */
.pp-acc{ padding:14px 0; }
.pp-acc + .pp-acc{ border-top:1px solid #e4e9f3; }

/* заголовок секции */
.pp-acc__sum{
  display:flex; align-items:center; justify-content:space-between;
  list-style:none; cursor:pointer;
  color: var(--pp-primary); font-weight:800;
  font-size: clamp(18px, 1.6vw, 22px);
  padding:0;
}
.pp-acc__sum::-webkit-details-marker{ display:none; }
.pp-acc__sum:focus-visible{
  outline:2px solid var(--pp-primary);
  outline-offset:4px; border-radius:8px;
}

/* стрелка справа */
.pp-acc__sum::after{
  content:""; width:10px; height:10px; margin-left:10px;
  border-right:2px solid #2b3240; border-bottom:2px solid #2b3240;
  transform: rotate(45deg); transition: transform .2s ease;
}
.pp-acc[open] .pp-acc__sum::after{ transform: rotate(225deg); }

/* контент секции */
.pp-acc__panel{ padding-top:12px; color: var(--pp-text); line-height:1.7; }

/* ===== Список «Действие» с пунктирной вертикалью ===== */
.pp-actlist{
  --indent: 44px;   /* общий левый отступ блока списка */
  --line-x: 16px;   /* позиция вертикали внутри этого отступа */

  list-style:none;
  margin:12px 0 0;
  padding-left: var(--indent);
  position:relative;
  display:grid;
  row-gap:14px;
}
.pp-actlist::before{
  content:"";
  position:absolute;
  left: var(--line-x);
  top:6px; bottom:6px;
  border-left: 2px dashed rgba(21,57,131,.45); /* var(--pp-primary) с прозрачностью */
}
.pp-actlist li{
  position:relative;
  padding-left:0; /* текст сразу после вертикали */
  color: var(--pp-text);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height:1.65;
}
/* ФИКС: точка-маркер по оси вертикали, а не в тексте */
.pp-actlist li::before{
  content:"";
  position:absolute;
  left: calc(var(--line-x) - var(--indent)); /* <-- ключевая правка */
  top:0.85em; transform: translate(-50%,-50%);
  width:9px; height:9px; border-radius:999px;
  background: var(--pp-primary);
  box-shadow: 0 0 0 3px #fff; /* белая окантовка поверх линии */
}
@media (max-width: 992px) {
  .pp-grid {
  display: flex;
  flex-direction: column;
  }
  .pp-main img {
    width: 50%;
  }
}

@media (max-width: 768px) {
  .pp-main img {
    width: 80%;
  }
}


/* --- Стили для блока промокода --- */
.pp-promo {
    margin-top: 24px;
    padding: 16px;
    background: #f7f9fc;
    border-radius: 12px;
    border: 1px solid #e4e9f3;
}

/* Форма для ввода промокода */
.promo-form {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap; /* Для мобильных */
}
.promo-input {
    flex-grow: 1;
    height: 44px;
    border: 1px solid #d7deea;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 16px;
    background: #fff;
    min-width: 150px;
}
.promo-form .ni-btn {
    flex-shrink: 0; /* Чтобы кнопка не сжималась */
    height: 44px;
}
.promo-message {
    margin-top: 8px;
    font-size: 14px;
    text-align: center;
    width: 100%;
    flex-basis: 100%; /* Сообщение всегда на новой строке */
}
.promo-message.is-error { color: #d9534f; }
.promo-message.is-success { color: #5BBF7A; }

/* Сообщение о примененном промокоде */
.promo-applied {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-radius: 8px;
    background-color: #e8f5e9;
    color: #2e7d32;
    font-weight: 500;
}
.promo-remove {
    font-size: 24px;
    line-height: 1;
    text-decoration: none;
    color: #2e7d32;
    opacity: 0.7;
    margin-left: 16px;
    font-weight: bold;
}
.promo-remove:hover {
    opacity: 1;
}

/* Блок для врача */
.promo-doctor-share {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.promo-doctor-share__label {
    color: var(--pp-muted);
}
.promo-doctor-share strong {
    font-size: 18px;
    color: var(--pp-primary);
    background-color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #d7deea;
}