/* ==========================================================================
   ОГЛАВЛЕНИЕ (course-subscribe-modal.css) — Модалка подписки на лендинге
   HTML: #course-subscribe-modal
   JS:   js/course-pages/course-page-paid.js

   1. Оверлей (затемнение фона)
   2. Панель и кнопка закрыть
   3. Форма: имя, телефон, email, кнопка «Получить доступ»
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ОВЕРЛЕЙ
   -------------------------------------------------------------------------- */
.course-subscribe {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) + 20);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(3, 4, 8, 0.72);
  backdrop-filter: blur(6px);
}

.course-subscribe[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   2. ПАНЕЛЬ И ЗАКРЫТЬ
   HTML: .course-subscribe__panel, .course-subscribe__close
   -------------------------------------------------------------------------- */
.course-subscribe__panel {
  position: relative;
  width: min(440px, 100%);
  padding: 1.75rem 1.5rem;
  border-radius: var(--radius-lg);
  background: #12121a;
  border: 1px solid rgba(255, 159, 61, 0.2);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.course-subscribe__close {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.course-subscribe__lead {
  margin: 0.5rem 0 1.25rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   3. ФОРМА ПОДПИСКИ
   HTML: [data-subscribe-form], .course-subscribe__submit
   -------------------------------------------------------------------------- */
.course-subscribe__field {
  display: block;
  margin-bottom: 0.85rem;
}

.course-subscribe__field span {
  display: block;
  margin-bottom: 0.35rem;
  font-size: var(--text-xs);
  font-weight: 600;
}

.course-subscribe__field input {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(237, 245, 244, 0.15);
  background: rgba(0, 0, 0, 0.35);
  color: var(--color-text);
  font: inherit;
}

.course-subscribe__submit {
  width: 100%;
  margin-top: 0.5rem;
}

.course-subscribe__error {
  margin: 0.65rem 0 0;
  font-size: var(--text-sm);
  color: #ffb4b4;
  line-height: 1.4;
}

.course-subscribe__error[hidden] {
  display: none;
}

.course-subscribe__submit.is-loading {
  opacity: 0.72;
  pointer-events: none;
}

.course-subscribe__note {
  margin: 1rem 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.course-subscribe__note a {
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   4. МОБИЛКА
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .course-subscribe {
    align-items: center;
    padding:
      max(0.75rem, env(safe-area-inset-top, 0px))
      0.75rem
      max(0.75rem, env(safe-area-inset-bottom, 0px));
  }
  .course-subscribe__panel {
    width: min(440px, 100%);
    max-height: min(90vh, 100%);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.35rem 1.15rem 1.25rem;
  }
  .course-subscribe__panel h3 {
    font-size: 1.05rem;
    line-height: 1.35;
    padding-right: 2rem;
  }
  .course-subscribe__lead {
    font-size: var(--text-sm);
    line-height: 1.5;
    margin-bottom: 1rem;
  }
  .course-subscribe__close {
    top: 0.5rem;
    right: 0.55rem;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .course-subscribe__field input {
    min-height: 48px;
    font-size: 16px;
  }
  .course-subscribe__submit {
    min-height: 52px;
    font-size: var(--text-base);
  }
}