/* ===== Модалки «Подтверждение входа» и «Вход/Регистрация» — 1:1 с оригиналом =====
   Точные правила из style.css оригинала (hystmodal), в scope #confirm-modal / #login-modal,
   чтобы не задеть другие модалки клона (пополнение, алерт). */

#confirm-modal, #login-modal { font-family: "Open Sans", sans-serif; font-size: 16px; }
/* затемнение фона — чёрное, как в оригинале (у базы синевато-серое) */
#confirm-modal.modal-overlay, #login-modal.modal-overlay { background: rgba(0, 0, 0, .6); }

/* окно: тёмное #171c25, без скруглений, до 600px, крестик снаружи-сверху */
#confirm-modal .modal-window,
#login-modal .modal-window {
  background: #171c25;
  border: none;
  border-radius: 0;
  width: min(600px, calc(100vw - 30px));
  max-width: 600px;
  animation: modal-in .2s ease;
}

/* крестик как в оригинале: SVG, 20×20, правый верхний угол */
#confirm-modal .modal-close,
#login-modal .modal-close {
  top: 15px; right: 15px;
  width: 20px; height: 20px;
  padding: 0; font-size: 0; border: none; background: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' stroke='%234f5561' stroke-linecap='square' stroke-miterlimit='50' stroke-width='2' d='M22 2L2 22'/%3E%3Cpath fill='none' stroke='%234f5561' stroke-linecap='square' stroke-miterlimit='50' stroke-width='2' d='M2 2l20 20'/%3E%3C/svg%3E");
  background-position: center; background-repeat: no-repeat; background-size: 100% 100%;
  opacity: .5; cursor: pointer;
}
#confirm-modal .modal-close:hover,
#login-modal .modal-close:hover { opacity: 1; }

/* заголовок: 17px, тонкий разделитель, оранжевая иконка */
#confirm-modal .modal-head,
#login-modal .modal-head {
  padding: 20px; font-size: 18px;
  border-bottom: 1px solid #1d232e; color: #fff;
}
#confirm-modal .modal-head p,
#login-modal .modal-head p { margin: 0; padding: 0; display: flex; align-items: center; }
#confirm-modal .modal-head p svg.icon,
#login-modal .modal-head p svg.icon { margin-right: 7px; font-size: 1.5rem; fill: #e19248; }

/* тело */
#confirm-modal .modal-body,
#login-modal .modal-body { padding: 25px 30px; color: #8d8d8d; }
#confirm-modal .modal-body h3,
#login-modal .modal-body h3 { font-size: 16px; font-weight: 300; margin: 0 0 18px; }
#confirm-modal .modal-body.modal-login-terms { padding-bottom: 10px; }

/* блок галочек и кнопки (p.inputs) — в оригинале текст здесь 14px
   (правило .modal-body > p { font-size:14px }) */
#confirm-modal p.inputs,
#login-modal p.inputs { margin: 0; font-size: 14px; }
#confirm-modal p.inputs label,
#login-modal p.inputs label {
  display: flex; align-items: center; cursor: pointer;
  justify-content: center; margin-bottom: 11px;
}
#confirm-modal p.inputs label.left,
#login-modal p.inputs label.left { justify-content: left; text-align: left; }
#confirm-modal p.inputs label span,
#login-modal p.inputs label span { font-weight: 300; }
#confirm-modal p.inputs label span a,
#login-modal p.inputs label span a { color: #d3863c; text-decoration: none; }
#confirm-modal p.inputs label span a:hover,
#login-modal p.inputs label span a:hover { color: #e0a05e; }

/* тумблеры-переключатели вместо обычных галочек */
#confirm-modal p.inputs input[type="checkbox"],
#login-modal p.inputs input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent; cursor: pointer;
  min-width: 39px; width: 39px; height: 23px; border-radius: 11.5px;
  display: inline-block; position: relative;
  border: 2px solid #474755;
  background: linear-gradient(180deg, #2D2F39 0%, #1F2027 100%);
  transition: all .2s ease; margin-right: 5px;
}
#confirm-modal p.inputs input[type="checkbox"]::after,
#login-modal p.inputs input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(44, 44, 44, .2);
  transition: all .2s cubic-bezier(0.5, 0.1, 0.75, 1.35);
}
#confirm-modal p.inputs input[type="checkbox"]:checked,
#login-modal p.inputs input[type="checkbox"]:checked { border-color: #a68709; }
#confirm-modal p.inputs input[type="checkbox"]:checked::after,
#login-modal p.inputs input[type="checkbox"]:checked::after { transform: translateX(16px); }

/* кнопка */
#confirm-modal p.inputs span.btn-center,
#login-modal p.inputs span.btn-center {
  text-align: center; display: flex; justify-content: center; gap: 12px; margin-top: 15px;
}
#confirm-modal p.inputs span.btn-center a.btn,
#login-modal p.inputs span.btn-center a.btn {
  display: inline-flex; justify-content: center; align-items: center;
  background: linear-gradient(90deg, #261214, #181412);
  border: 2px solid;
  border-image-source: linear-gradient(90deg, #e6964c 0%, #bb281e 100%);
  border-image-slice: 1;
  color: #fff; text-decoration: none; text-transform: uppercase;
  font-size: .9em; padding: 0 22px; height: 38px; cursor: pointer;
  transition: background .2s;
}
#confirm-modal p.inputs span.btn-center a.disabled.btn,
#login-modal p.inputs span.btn-center a.disabled.btn {
  color: #6f6f6f; cursor: not-allowed; filter: grayscale(100%); pointer-events: none;
}
#confirm-modal p.inputs span.btn-center a.btn:hover:not(.disabled),
#login-modal p.inputs span.btn-center a.btn:hover:not(.disabled) {
  background: linear-gradient(90deg, #e6964c, #bb281e);
}

/* поля входа/регистрации */
#login-modal .auth-form { margin-bottom: 14px; }