<div id="custom-pdf-modal" class="pdf-modal">
  <div class="pdf-modal-overlay"></div>
  <div class="pdf-modal-container">
    <button class="pdf-modal-close" aria-label="Закрыть">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
        <line x1="18" y1="6" x2="6" y2="18"></line>
        <line x1="6" y1="6" x2="18" y2="18"></line>
      </svg>
    </button>
    
    <div class="pdf-modal-loader">
      <div class="pdf-spinner"></div>
    </div>
    
    <iframe id="custom-pdf-iframe" src="" frameborder="0" allow="autoplay"></iframe>
  </div>
</div>

<style>
:root {
  /* НАСТРОЙКИ ДИЗАЙНА ФОНА И ОКНА */
  --pdf-overlay-bg: rgba(245, 245, 247, 0.8); /* Светлый размытый фон за попапом */
  --pdf-container-bg: #ffffff;               /* Фон самого контейнера под PDF */
  --pdf-transition-speed: 250ms;             /* Скорость анимации появления */
  --pdf-border-radius: 14px;                 /* Скругление углов окна */
  
  /* НАСТРОЙКИ ШИРИНЫ (Desktop / Tablet / Mobile) */
  --pdf-width-desktop: 50%; /*Ширина для Десктопа в % */
  --pdf-width-tablet: 85%;
  --pdf-width-mobile: 92%;
  
  /* НАСТРОЙКИ ВЫСОТЫ */
  --pdf-height-desktop: 85vh; /*Высота*/
  --pdf-height-mobile: 90vh;
}

/* Базовые стили модального окна */
.pdf-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pdf-transition-speed) ease;
}

.pdf-modal.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Задний фон-оверлей */
.pdf-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--pdf-overlay-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Контейнер для iframe */
.pdf-modal-container {
  position: relative;
  background: var(--pdf-container-bg);
  width: var(--pdf-width-desktop);
  height: var(--pdf-height-desktop);
  border-radius: var(--pdf-border-radius);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transform: scale(0.96);
  transition: transform var(--pdf-transition-speed) cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.pdf-modal.is-active .pdf-modal-container {
  transform: scale(1);
}

/* Кнопка закрытия (фиксированная геометрия круга) */
.pdf-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  width: 38px;
  height: 38px;
  min-width: 38px !important;
  max-width: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  color: #111111;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: background var(--pdf-transition-speed), transform var(--pdf-transition-speed);
  z-index: 10;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.pdf-modal-close:hover {
  background: #ffffff;
  transform: scale(1.05);
}

.pdf-modal-close svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  display: block;
}

/* Элемент iframe */
#custom-pdf-iframe {
  width: 100%;
  height: 100%;
  border: none;
  opacity: 0;
  transition: opacity var(--pdf-transition-speed) ease;
}

#custom-pdf-iframe.is-loaded {
  opacity: 1;
}

/* Минималистичный лоадер */
.pdf-modal-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pdf-container-bg);
  transition: opacity var(--pdf-transition-speed) ease;
  pointer-events: none;
  z-index: 2;
}

.pdf-modal-loader.is-hidden {
  opacity: 0;
}

.pdf-spinner {
  width: 28px;
  height: 28px;
  border: 2.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 50%;
  border-top-color: #111111;
  animation: pdf-spin 0.6s linear infinite;
}

@keyframes pdf-spin {
  to { transform: rotate(360deg); }
}

/* АДАПТИВНОСТЬ */
@media (max-width: 960px) {
  .pdf-modal-container {
    width: var(--pdf-width-tablet);
  }
}

@media (max-width: 640px) {
  .pdf-modal-container {
    width: var(--pdf-width-mobile);
    height: var(--pdf-height-mobile);
    border-radius: max(0px, calc(var(--pdf-border-radius) - 4px));
  }
  .pdf-modal-close {
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    min-width: 34px !important;
    min-height: 34px !important;
  }
  .pdf-modal-close svg {
    width: 16px !important;
    height: 16px !important;
  }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Связка хэшей кнопок и оригинальных ссылок
  const pdfMap = {
      // Якорь на попап далее ссыдка на документ 
    '#popupleto': 'https://drive.google.com/file/d/1ZOzy6qgZmYQpOUQgDbAdEpu8P-9rv2UM/view?usp=sharing',
  };

  const modal = document.getElementById('custom-pdf-modal');
  const iframe = document.getElementById('custom-pdf-iframe');
  const loader = modal.querySelector('.pdf-modal-loader');
  const closeBtn = modal.querySelector('.pdf-modal-close');
  const overlay = modal.querySelector('.pdf-modal-overlay');

  function formatDriveUrl(url) {
    if (url.includes('drive.google.com') && url.includes('/view')) {
      return url.replace(/\/view(.*)$/, '/preview');
    }
    return url;
  }

  function openPdfModal(rawUrl) {
    const embedUrl = formatDriveUrl(rawUrl);
    modal.classList.add('is-active');
    document.body.style.overflow = 'hidden';
    
    loader.classList.remove('is-hidden');
    iframe.classList.remove('is-loaded');
    iframe.src = embedUrl;
  }

  function closePdfModal() {
    modal.classList.remove('is-active');
    document.body.style.overflow = '';
    
    setTimeout(() => {
      iframe.src = '';
      iframe.classList.remove('is-loaded');
    }, 250);
  }

  iframe.addEventListener('load', function() {
    if (iframe.src && iframe.src !== window.location.href) {
      loader.classList.add('is-hidden');
      iframe.classList.add('is-loaded');
    }
  });

  document.addEventListener('click', function(e) {
    const button = e.target.closest('a[href^="#popup"]');
    if (!button) return;

    const targetHash = button.getAttribute('href');
    if (pdfMap[targetHash]) {
      e.preventDefault();
      openPdfModal(pdfMap[targetHash]);
    }
  });

  closeBtn.addEventListener('click', closePdfModal);
  overlay.addEventListener('click', closePdfModal);
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && modal.classList.contains('is-active')) {
      closePdfModal();
    }
  });
});
</script>