/* Стили для интерактивной формы заполнения платежки */

/* Основной контейнер формы */
.uplatnica-form {
  width: min(100%, 210mm);
  min-height: 83mm;
  display: flex;
  font-family: Arial, sans-serif;
  font-size: 10pt;
  position: relative;
  padding: 4mm;
  box-sizing: border-box;
  border: 1px solid #CFD8DC;
  background: #FFFFFF;
  margin: 0 auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
}

.uplatnica-form .left,
.uplatnica-form .right {
  width: 50%;
  padding-right: 4mm;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.uplatnica-form .right {
  position: relative;
}

/* Стили для полей формы */
.uplatnica-form .form-field {
  margin-bottom: 1mm;
  position: relative;
}

/* Больше отступа между полями в левой части */
.uplatnica-form .left .form-field {
  margin-bottom: 1mm;
}

/* Дополнительный отступ сверху для поля прималац */
.uplatnica-form .receiver-field {
  margin-top: 1mm;
}

.uplatnica-form .form-label {
  font-size: 10pt;
  text-transform: lowercase;
  display: block;
  margin-bottom: 0.1mm;
  color: #607D8B;
  font-weight: normal;
}

/* Фиксированная высота для заголовков в таблице */
.uplatnica-form .form-table .form-label {
  min-height: 18pt;
  display: flex;
  align-items: flex-end;
  line-height: 1.1;
}

.uplatnica-form .form-input {
  border: 1px solid #CFD8DC;
  min-height: 7mm;
  padding: 0.5mm 1mm 0.1mm 1mm;
  box-sizing: border-box;
  width: 100%;
  font-size: 11pt;
  font-family: Arial, sans-serif;
  background: #FFFFFF;
  color: #2E3A45;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  line-height: 1.2;
  border-radius: 4px;
}

.uplatnica-form .form-input::placeholder {
  color: #9BA8B7;
  opacity: 1;
}

.uplatnica-form .form-input:focus {
  border-color: #4FC3F7;
  box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.15);
}

.uplatnica-form .form-input.error {
  border-color: #E53935;
  background-color: #FFEBEE;
}

.uplatnica-form .form-input.valid {
  border-color: #43A047;
}

/* Специальные размеры полей */
.uplatnica-form .tall .form-input {
  height: 17mm;
  resize: none;
  overflow: hidden;
  line-height: 1.3;
  padding-top: 1mm;
}

.uplatnica-form .small .form-input {
  height: 8mm;
}

.uplatnica-form .big .form-input {
  height: 12mm;
  font-size: 12pt;
  font-weight: bold;
}

/* Таблица для кода платежа, валюты и суммы */
.uplatnica-form .form-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1mm;
}

.uplatnica-form .form-table td {
  padding-right: 4mm;
  vertical-align: top;
}

.uplatnica-form .form-table td:nth-child(1) {
  width: 20%;
}

.uplatnica-form .form-table td:nth-child(2) {
  width: 20%;
}

.uplatnica-form .form-table td:nth-child(3) {
  width: 50%;
}

.uplatnica-form .form-table td:last-child {
  padding-right: 0;
}

/* Флексбокс для номера модели и позива на номер */
.uplatnica-form .ref-row {
  display: flex;
  gap: 4mm;
  margin-top: 3mm;
  flex: 1;
}

.uplatnica-form .ref-row > .form-field {
  width: 15%;
  flex-shrink: 0;
}

.uplatnica-form .ref-number {
  flex: 1;
}

/* Кнопка очистки формы в правом нижнем углу */
.uplatnica-form .right > .d-flex.justify-content-end {
  margin-top: auto;
  padding-top: 2mm;
}

/* Поля подписей */
.uplatnica-form .signature-field {
  margin-top: 8mm;
}

.uplatnica-form .signature-line {
  border-bottom: 1px solid #000;
  height: 8mm;
  margin-top: 2mm;
}

/* QR код - скрыт на форме ввода, отображается только на печатной форме и для скачивания */
.uplatnica-form .qr-container {
  display: none;
}

.uplatnica-form .qr-placeholder {
  display: none;
}

/* Сообщения об ошибках */
.uplatnica-form .error-message {
  color: #E53935;
  font-size: 8pt;
  margin-top: 1mm;
  display: none;
}

.uplatnica-form .form-input.error + .error-message {
  display: block;
}

/* Подсказки для полей */
.uplatnica-form .field-hint {
  color: #607D8B;
  font-size: 8pt;
  margin-top: 1mm;
  font-style: italic;
}

/* Кнопки управления формой */
.form-controls {
  text-align: center;
  margin-top: 20px;
}

.form-controls .btn {
  margin: 0 5px;
}

/* Стили для предпросмотра */
.form-preview-mode .form-input {
  border: 1px solid #ddd;
  background: #f8f9fa;
  color: #000;
  pointer-events: none;
}

.form-preview-mode .form-label {
  color: #333;
}

/* Печать - скрываем форму и показываем обычную версию */
@media print {
  .uplatnica-form {
    display: none;
  }
  
  .form-controls {
    display: none;
  }
}

/* Адаптивность для мобильных устройств */
@media (max-width: 600px) {
  .uplatnica-form {
    flex-direction: column;
  }
  
  .uplatnica-form .left,
  .uplatnica-form .right {
    width: 100%;
    padding-right: 0;
  }
  
  .uplatnica-form .qr-placeholder {
    position: relative;
    margin: 10px auto 0;
  }

  /* Уменьшаем высоту полей "платилац", "сврха", "прималац" до ~2 строк */
  .uplatnica-form .tall .form-input {
    height: 12mm;
  }
}