/* ===================== */
/* БАЗА */
/* ===================== */

body {
  font-family: sans-serif;
  line-height: 1.3;
  color: #222;
  background: #f7f7f7;
  margin: 0;
}

.container {
  max-width: 420px;
  margin: auto;
  padding: 16px;
}

/* ===================== */
/* ТЕКСТ / ФОРМА */
/* ===================== */

label {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

input,
textarea {
  padding: 10px;
  font-size: 16px;
  border: 2px solid #c7c7c7;
  border-radius: 10px;
  outline: none;
}

input:focus,
textarea:focus {
  border-color: #cfae09;
}

textarea {
  resize: none;
  min-height: 120px;
}

/* ===================== */
/* КНОПКИ */
/* ===================== */

.btn {
  width: 100%;
  height: 50px;
  padding: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  border: none;
  border-radius: 12px;
  background: #cfae09;
  cursor: pointer;
  transition: 0.2s;
}

.btn:hover {
  background: #e1be0f;
}

.btn-clear {
  background: #c7c7c7;
  color: #222;
}

.btn-clear:hover {
  background: #b5b5b5;
}

/* кнопки в ряд */
.list__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  list-style: none;
  padding: 0;
}

/* ===================== */
/* КНОПКА КОПИРОВАНИЯ */
/* ===================== */

.btn-copy {
  width: 46px;
  height: 46px;
  padding: 0;
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: none;
  cursor: pointer;
}

.btn-copy svg {
  width: 26px;
  height: 26px;
  fill: #cfae09;
  transition: 0.2s;
}

.btn-copy:hover svg {
  fill: #e1be0f;
}

/* ===================== */
/* СКАНЕР */
/* ===================== */

.scanner-container {
  margin-bottom: 16px;
}

/* кнопка сканера сверху */
#scanner-btn {
  width: 100%;
  height: 50px;
  margin-bottom: 10px;
}

/* основной блок камеры */
#qr-reader {
  position: relative;
  width: 100%;
  height: 260px;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid #cfae09;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  background: #000;
}

/* видео */
#qr-reader video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* overlay */
.scanner-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* успех */
.scanner-overlay.success {
  background: rgba(0, 255, 0, 0.25);
  opacity: 1;
}

/* ошибка */
.scanner-overlay.error {
  background: rgba(255, 0, 0, 0.25);
  opacity: 1;
}

/* ===================== */
/* СТАТИСТИКА */
/* ===================== */

.statistic {
  margin-top: 16px;
}

.statistic__text {
  font-size: 16px;
}

.statistic__text-data {
  font-size: 22px;
  font-weight: bold;
  color: #cfae09;
}

/* ===================== */
/* МОДАЛКИ */
/* ===================== */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

.modal.show {
  display: flex;
}

.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  width: 280px;
  text-align: center;
}

.modal-text {
  margin-bottom: 20px;
  font-weight: bold;
}

.confirm {
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  color: #fff;
  cursor: pointer;
}

.ok {
  background: #f33c3c;
}

.cancel {
  background: #16bc3a;
}

/* ===================== */
/* УДАЛЕНИЕ ДУБЛЕЙ */
/* ===================== */

.delete-btn {
  margin-top: 10px;
  background: #f33c3c;
}

.delete-btn:hover {
  background: #e25353;
}

/* ===================== */
/* РАМКА СКАНЕРА */
/* ===================== */

.scan-box {
  position: absolute;
  width: 70%;
  height: 50%;
  top: 25%;
  left: 15%;

  border: 2px solid #00ff88;
  border-radius: 10px;

  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4);

  z-index: 10; /* 🔥 ВАЖНО — выше видео */
  pointer-events: none;

  transform: translateZ(0); /* 🔥 фикс */
}

/* углы как в приложениях */
.scan-box::before,
.scan-box::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 3px solid #00ff88;
}

.scan-box::before {
  top: -2px;
  left: -2px;
  border-right: none;
  border-bottom: none;
}

.scan-box::after {
  bottom: -2px;
  right: -2px;
  border-left: none;
  border-top: none;
}

#qr-reader video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;

  transform: translateZ(0); /* 🔥 фикс для мобилок */
}