/* ==========================================================================
   Боковая панель с контентом (FAQ на support.html, функции платформы на business.html).
   Подключается после style.css. Логика — js/panel.js.
   ========================================================================== */

/* --- Боковая панель FAQ -------------------------------------------------- */

.overlay--modal { z-index: 120; }

.modal {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 125;
  width: 69.44%;
  max-width: 1000px;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: 1.125rem;
  line-height: 1.5rem;
  background-color: var(--c-white);
  transform: translateX(100%);
}
.modal[hidden] { display: none; }
.modal--opened {
  transform: none;
  animation: slideInRight .6s var(--ease-out);
}
.modal--opened .modal__content { animation: fadeInUp .8s var(--ease-out) both; }
.modal--closing { animation: slideOutRight .5s ease-in both; }

@keyframes slideInRight {
  from { transform: translate3d(100%, 0, 0); }
  to { transform: none; }
}
@keyframes slideOutRight {
  from { transform: none; }
  to { transform: translate3d(100%, 0, 0); }
}

.page--modal-opened { overflow: hidden; }

.modal__inner { padding: 40px 40px 72px 80px; }

.modal__header { max-width: 640px; margin-bottom: 34px; padding-right: 56px; }

.modal__close {
  position: absolute;
  top: 40px;
  right: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  transition: opacity .2s;
}
.modal__close svg { width: 40px; height: 40px; fill: none; pointer-events: none; }
.modal__close:hover { opacity: .32; }
.modal__close:focus-visible { outline: 2px solid var(--c-text); outline-offset: 2px; border-radius: 50%; }

.modal__close-mobile { display: none; }

.modal__title {
  margin: 0;
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 3.125rem;
}

.modal__content { max-width: 640px; }
.modal__content p { margin: 0 0 20px; }
.modal__content p:last-child { margin-bottom: 0; }

/* Аккордеон вопросов */
.modal__list {
  margin: 41px 0 0;
  padding: 0;
  list-style: none;
}
.modal__list > li { margin-bottom: 24px; }
.modal__list > li:last-child { margin-bottom: 0; }

.modal__list h3 { margin: 0; }

.modal__title-link {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  font-family: inherit;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.75rem;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
/* Стрелка-уголок слева от вопроса */
.modal__title-link::before {
  content: "";
  position: absolute;
  top: 4px;
  left: -34px;
  display: block;
  width: 10px;
  height: 10px;
  border: 1px solid;
  border-color: transparent transparent var(--c-text) var(--c-text);
  transform: rotate(-45deg);
  transition: top .3s, border-color .3s;
}
.modal__title-link[aria-expanded="true"]::before {
  top: 12px;
  border-color: var(--c-text) var(--c-text) transparent transparent;
}
.modal__title-link:hover { opacity: .72; }
.modal__title-link:focus-visible { outline: 2px solid var(--c-text); outline-offset: 4px; }

/* Ответ скрыт до раскрытия вопроса */
.modal__list li > :not(h3) {
  display: none;
  margin: 0;
  font-size: 18px;
  line-height: 24px;
}
.modal__list li.is-opened > :not(h3) {
  display: block;
  animation: answerIn .35s var(--ease-out);
}
.modal__list li.is-opened > p { padding: 8px 0 16px; }
.modal__list li.is-opened > ol { padding: 8px 0 0 18px; }
.modal__list li.is-opened > ul { padding: 8px 0 0; list-style: none; }
.modal__list li.is-opened > ol > li { margin-bottom: 24px; }
.modal__list li.is-opened > ul > li {
  position: relative;
  margin-bottom: 24px;
  padding-left: 18px;
}
.modal__list li.is-opened > ul > li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #000;
}

@keyframes answerIn {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1199px) {
  .modal { width: 81.77%; }
  .modal__inner { padding: 40px 120px 64px 64px; }
  .modal__inner--support { padding-left: 102px; }
}

@media (max-width: 767px) {
  .modal {
    width: 100%;
    font-size: .875rem;
    line-height: 1.375rem;
  }
  .modal__inner,
  .modal__inner--support { padding: 72px 16px 39px 56px; }
  .modal__header { max-width: 580px; margin-bottom: 22px; padding-right: 0; }
  .modal__close { display: none; }
  .modal__close-mobile {
    position: absolute;
    top: 24px;
    left: 16px;
    display: flex;
    align-items: center;
    padding: 0;
    font-family: inherit;
    font-size: .875rem;
    line-height: 1.5rem;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .modal__close-mobile svg { width: 24px; height: 24px; margin-right: 16px; fill: none; }
  .modal__close-mobile:hover { opacity: .32; }
  .modal__title { font-size: 1.75rem; line-height: 2.4375rem; }
  .modal__content { max-width: 580px; }
  .modal__content p { margin-bottom: 16px; }
  .modal__list { margin-top: 27px; }
  .modal__title-link { font-size: .875rem; line-height: 1.1875rem; }
  .modal__title-link::before { top: 2px; left: -30px; }
  .modal__title-link[aria-expanded="true"]::before { top: 8px; }
  .modal__list li > :not(h3) { font-size: 14px; line-height: 22px; }
  .modal__list li.is-opened > p { padding: 8px 0; }
}

/* Список без аккордеона: все ответы видны сразу */
.modal__list--static li > :not(h3) { display: block; padding: 8px 0 16px; }
.modal__list--static h3 { font-weight: 500; font-size: 1.25rem; line-height: 1.75rem; }

@media (max-width: 767px) {
  .modal__list--static li > :not(h3) { padding: 8px 0; }
  .modal__list--static h3 { font-size: .875rem; line-height: 1.1875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .modal--opened,
  .modal--closing,
  .modal--opened .modal__content,
  .modal__list li.is-opened > :not(h3) { animation: none; }
}