/* ==========================================================================
   Login modal (base.html #loginModal) and other site-wide auth surfaces,
   direction A. Linked from base.html under SITE_UI_V2 only. Owned by the auth
   pages of the redesign; scope every rule under .ui2.

   CSS only: the markup and its AJAX script stay base.html's. Two things that
   script relies on are left alone on purpose —
   * #loginModalError is shown and hidden through its inline `display`, so no
     rule here sets `display` on it;
   * the submit button's innerHTML is swapped for a Bootstrap spinner while the
     request runs, so the spinner keeps its own look.
   The icons in the labels and on the button belong to the old design and are
   hidden rather than removed. The same card as the /login/ page
   (static/core/css/v2/auth.css): hairline fields, one filled red pill.
   ========================================================================== */

.ui2 #loginModal .modal-dialog { max-width: 420px; }
.ui2 #loginModal.fade .modal-dialog { transform: scale(0.97); transition: transform 0.2s ease-out; }
.ui2 #loginModal.show .modal-dialog { transform: none; }

.ui2 #loginModal .modal-content {
  border: 0;
  border-radius: 22px;
  background: #fff;
  color: var(--ink);
  font-family: var(--ui-font);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.ui2 #loginModal .modal-header { align-items: flex-start; gap: 12px; padding: 26px 28px 0; border: 0; }
.ui2 #loginModal .modal-title { margin: 0; color: var(--ink); font-size: 28px; line-height: 1.14; font-weight: 600; letter-spacing: -0.02em; }
.ui2 #loginModal .modal-header .btn-close {
  flex: none;
  width: 30px;
  height: 30px;
  margin: -2px -6px 0 auto;
  padding: 0;
  border-radius: 50%;
  background-color: var(--fill);
  background-size: 10px;
  opacity: 1;
  box-shadow: none;
  transition: background-color 0.2s;
}
.ui2 #loginModal .modal-header .btn-close:hover { background-color: var(--fill2); }
.ui2 #loginModal .btn-close:focus { box-shadow: none; }
.ui2 #loginModal .btn-close:focus-visible { outline: 2px solid rgba(139, 0, 0, 0.55); outline-offset: 2px; }

.ui2 #loginModal .modal-body { padding: 22px 28px 26px; }

/* The error the script fills in. */
.ui2 #loginModal #loginModalError {
  margin: 0 0 18px;
  padding: 12px 40px 12px 14px;
  border: 0;
  border-radius: 12px;
  background: rgba(197, 34, 31, 0.08);
  color: #8c1d18;
  font-size: 15px;
  line-height: 1.45;
}
.ui2 #loginModal #loginModalError .btn-close { top: 9px; right: 8px; width: 26px; height: 26px; padding: 0; border-radius: 50%; background-size: 8px; opacity: 0.55; }
.ui2 #loginModal #loginModalError .btn-close:hover { opacity: 0.9; }

/* Fields */
.ui2 #loginModal #loginModalForm > .mb-3 { margin-bottom: 18px !important; }
.ui2 #loginModal .form-label { display: block; margin: 0 0 6px; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.35; }
.ui2 #loginModal .form-label .bi { display: none; }
.ui2 #loginModal .form-control {
  height: 50px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.3;
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: box-shadow 0.2s;
}
.ui2 #loginModal .form-control::placeholder { color: var(--ink3); opacity: 1; }
.ui2 #loginModal .form-control:hover { border: 0; box-shadow: inset 0 0 0 1px #b9b9bf; }
.ui2 #loginModal .form-control:focus { border: 0; outline: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--hair), 0 0 0 3px rgba(139, 0, 0, 0.12); }

/* «Забыли пароль?» sits under the password, right-aligned, as on /login/. */
.ui2 #loginModal #loginModalForm > .mb-3:has(> a) { margin: -8px 0 22px !important; text-align: right; }
.ui2 #loginModal #loginModalForm > .mb-3 > a { color: var(--brand); font-size: 13px; text-decoration: none; }
.ui2 #loginModal #loginModalForm > .mb-3 > a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* The one filled button. */
.ui2 #loginModal .btn-primary {
  height: 50px;
  padding: 0 22px;
  border: 0;
  border-radius: 980px;
  background: var(--brand);
  color: #fff;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.2px;
  box-shadow: none;
  transform: none;
  transition: background-color 0.2s;
}
.ui2 #loginModal .btn-primary:hover { background: var(--brand-hover); color: #fff; transform: none; box-shadow: none; }
.ui2 #loginModal .btn-primary:active { background: var(--brand-press); }
.ui2 #loginModal .btn-primary:disabled { background: var(--brand); color: #fff; opacity: 0.6; }
.ui2 #loginModal .btn-primary:focus-visible { outline: 2px solid rgba(139, 0, 0, 0.55); outline-offset: 2px; box-shadow: none; }
.ui2 #loginModal .btn-primary > .bi { display: none; }
.ui2 #loginModal .btn-primary > .spinner-border { width: 16px; height: 16px; margin-right: 8px !important; border-width: 2px; vertical-align: -2px; }

/* The sign-up line under a hairline. */
.ui2 #loginModal .modal-body > .mt-3 { margin-top: 24px !important; padding-top: 18px; border-top: 1px solid var(--hair); }
.ui2 #loginModal .modal-body > .mt-3 p { margin: 0 !important; color: var(--ink2); font-size: 15px; line-height: 1.55; }
.ui2 #loginModal .modal-body > .mt-3 a { color: var(--brand); text-decoration: none; }
.ui2 #loginModal .modal-body > .mt-3 a:hover { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 733.98px) {
  .ui2 #loginModal .modal-dialog { max-width: none; margin: 12px; }
  .ui2 #loginModal .modal-content { border-radius: 20px; }
  .ui2 #loginModal .modal-header { padding: 22px 20px 0; }
  .ui2 #loginModal .modal-title { font-size: 24px; font-weight: 700; }
  .ui2 #loginModal .modal-body { padding: 18px 20px 22px; }
}