/* Карточка попапа — легкая стеклянность */
#course-popup .popup-inner {
  position: relative;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
  padding: 24px 24px 20px;
}

/* Кнопка закрытия — круглая, аккуратная, с розовым glow */
#course-popup .popup-close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;

  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);

  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  box-shadow:
    0 10px 28px rgba(0,0,0,.16),
    inset 0 -1px 0 rgba(255,255,255,.45);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, opacity .2s ease;
}

#course-popup .popup-close svg {
  width: 18px; height: 18px;
  stroke: #0f172a;             /* тёмный, как на тексте */
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: transform .15s ease, opacity .15s ease;
}

#course-popup .popup-close:hover {
  transform: translateY(-1px);
  box-shadow:
    0 12px 34px rgba(0,0,0,.22),
    0 0 0 6px rgba(255,84,228,.12);   /* розовый glow под твой бренд */
  filter: brightness(1.03);
}

#course-popup .popup-close:hover svg {
  transform: scale(1.05);
}

#course-popup .popup-close:active {
  transform: translateY(0);
  box-shadow:
    0 8px 20px rgba(0,0,0,.18),
    inset 0 -1px 0 rgba(255,255,255,.35);
  filter: brightness(.98);
}

/* Фокус для клавиатурной навигации — двойной контур в фирменном цвете */
#course-popup .popup-close:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.9),
    0 0 0 7px rgba(255,84,228,.35);
}

/* Чтобы контент не нырял под кнопку на узких экранах */
@media (max-width: 560px) {
  #course-popup .popup-inner { padding: 20px 20px 16px; }
  #course-popup .popup-close { top: 10px; right: 12px; }
}