/* popunite-page.css - Стили только для страницы "Попуните уплатницу" */
/* Не содержит стилей печатной формы - только для экранного отображения */

/* ============================================
   QR СКАНИРОВАНИЕ И ЗАГРУЗКА
   ============================================ */
#qr-scan-section {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

#qrDisplayArea {
  transition: border-color 0.3s ease;
}

#qrDisplayArea.active {
  border-color: #1976D2;
  border-style: solid;
}

#qrVideo, #qrImage {
  border-radius: 5px;
}

#qrStatus .alert {
  animation: slideDown 0.3s ease-in;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   ЗАГОЛОВОК ИНСТРУКЦИЙ
   ============================================ */
.form-instructions {
  font-size: 1.25rem;
  font-weight: 500;
  color: #607D8B;
  max-width: 210mm;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   КОНТЕЙНЕР ДЛЯ ПЕЧАТНЫХ ФОРМ
   ============================================ */

/* Контейнер скрыт на экране, печать идет через iframe (print-helper.js) */
#popunite-receipts-container {
  display: none;
}

/* 
 * Примечание: Все @media print правила удалены
 * Печать теперь осуществляется через iframe (см. print-helper.js)
 * Стили печатной формы находятся в uplatnica.css
 */

/* ============================================
   СТИЛИ QR БЛОКА (специфичные для страницы)
   ============================================ */
.qr-section {
  padding: 3px 3px;
  background-color: #E1F5FE;
  border: 1px solid #CFD8DC;
  border-radius: 4px;
  margin: 0;
  width: 100%;
  max-width: 100%;
  text-align: center;
  box-sizing: border-box;
}

.qr-title {
  font-size: 0.9rem;
}

#qrDownloadCanvas {
  margin-bottom: 5px;
}

.qr-canvas-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  overflow-x: auto;
}

.qr-canvas-wrapper canvas {
  max-width: 100%;
  height: auto;
}

/* ============================================
   АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ
   (специфичные стили страницы)
   ============================================ */

/* Колонка кнопок - фиксированная на десктопе, сжимается на мобильном */
.buttons-column {
  width: 220px;
  flex-shrink: 0;
}

/* QR колонка - занимает всё свободное пространство, но ограничена высотой */
.qr-column {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-start;
}

.qr-column .qr-section {
  width: 100%;
  max-height: 100%;
}

.qr-column .qr-canvas-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.qr-column canvas {
  max-width: 100%;
  max-height: 220px; /* Примерно высота 5 кнопок */
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

@media (max-width: 500px) {
  .buttons-column {
    width: 160px;
  }
  
  .qr-column canvas {
    max-height: 180px;
  }
}

@media (max-width: 991px) {
  /* Уменьшаем размер шрифта в инструкциях */
  .form-instructions {
    font-size: 1.1rem;
  }
}

@media (max-width: 768px) {
  /* Адаптация кнопок под мобильные экраны */
  #generateBtn,
  #downloadPdfBtn,
  #downloadQrBtn,
  #copyLinkBtn,
  #nativeShareButton {
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
  }
}