/* HERLEIN Stock login — copied from the visual structure used by /Herlein auth. */

.login-page {
  min-height: 100vh;
  padding: 24px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #0a2d72 0%, #071f50 50%, #04142f 100%);
  color: #fff;
}

.login-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(2,13,42,.16) 0%, transparent 22%, transparent 78%, rgba(2,13,42,.16) 100%);
}

/* /Herlein does not show the language switch on its auth composition.
   Stock still chooses the locale automatically from the browser. */
.login-page > .locale-switch {
  display: none !important;
}

.login-card {
  width: 100%;
  max-width: 430px;
  margin: 0;
  padding: 0;
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
}

/* Same logo slot used by /Herlein, with the Stock artwork fitted inside without cropping. */
.login-card > .brand {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1.55 / 1;
  height: auto;
  margin: 0 auto;
  display: block;
  overflow: visible;
  background: url('/Photos/herlein-stock-login-logo.png') center center / 112% auto no-repeat;
  filter: drop-shadow(0 0 2px rgba(190,225,255,.38)) drop-shadow(0 12px 34px rgba(37,199,255,.24)) brightness(1.05) saturate(1.06);
}

.login-card > .brand::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 33%;
  width: 340px;
  height: 250px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.26) 0%, rgba(173,220,255,.20) 14%, rgba(74,146,255,.15) 32%, rgba(23,90,221,.08) 52%, transparent 74%);
  filter: blur(10px);
}

.login-card > .brand > * {
  display: none !important;
}

.login-card .login-copy {
  position: relative;
  z-index: 3;
  margin: 8px 0 32px;
  text-align: center;
}

.login-card .login-copy h1 {
  display: none;
}

.login-card .login-copy p {
  margin: 0;
  color: rgba(219,234,254,.82);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .01em;
}

/* The React component keeps Stock auth/MFA logic in the same form.
   This is only the glass surface behind the field area, placed exactly after logo + subtitle. */
.login-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 274px;
  bottom: -32px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(18,52,122,.34) 0%, rgba(8,31,86,.26) 100%);
  box-shadow: 0 28px 90px rgba(2,13,42,.42), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(120,180,255,.10);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.login-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -32px;
  width: 110px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(103,232,249,.70);
  filter: blur(1px);
}

.login-card > label,
.login-card > .mfa-hint,
.login-card > .error-box,
.login-card > .primary {
  position: relative;
  z-index: 2;
}

.login-card > label:first-of-type {
  margin-top: 0;
}

.login-card label {
  display: block;
  margin: 0 24px 20px;
  color: rgba(219,234,254,.92);
  font-size: 15px;
  font-weight: 500;
}

.login-card label input {
  display: block;
  width: 100%;
  height: 56px;
  min-height: 56px;
  margin-top: 8px;
  padding: 0 48px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(5,23,62,.34) 0%, rgba(4,20,54,.24) 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px rgba(255,255,255,.02);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* One icon only: pseudo-elements avoid Safari repeating a data-URI input background. */
.login-card > label:nth-of-type(1)::before,
.login-card > label:nth-of-type(2)::before {
  content: "";
  position: absolute;
  z-index: 4;
  left: 16px;
  top: 38px;
  width: 20px;
  height: 20px;
  pointer-events: none;
  opacity: .52;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
}

.login-card > label:nth-of-type(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bfd6f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}

.login-card > label:nth-of-type(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bfd6f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

/* Eye affordance, one instance only. */
.login-card > label:nth-of-type(2) {
  padding-bottom: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bfd6f5' stroke-opacity='.68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696C3.14 8.62 7 5 12 5s8.86 3.62 9.938 6.652a1 1 0 0 1 0 .696C20.86 15.38 17 19 12 19s-8.86-3.62-9.938-6.652'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  background-position: right 16px top 38px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
}

.login-card > label:nth-of-type(2)::after {
  content: "Password dimenticata?";
  position: absolute;
  left: 0;
  bottom: 0;
  color: rgb(147,197,253);
  font-size: 15px;
  font-weight: 500;
}

.login-page:has(.locale-switch button:nth-child(1).active) .login-card > label:nth-of-type(2)::after {
  content: "¿Olvidaste tu contraseña?";
}

.login-page:has(.locale-switch button:nth-child(3).active) .login-card > label:nth-of-type(2)::after {
  content: "Forgot your password?";
}

.login-card input::placeholder {
  color: rgba(219,234,254,.36);
}

.login-card input:focus {
  border-color: rgba(147,197,253,.70);
  box-shadow: 0 0 0 2px rgba(147,197,253,.18), inset 0 1px 0 rgba(255,255,255,.07);
}

.login-card .primary {
  width: calc(100% - 48px);
  height: 64px;
  min-height: 64px;
  margin: 4px 24px 0;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.24);
  background: linear-gradient(180deg, #2f75ff 0%, #0d45ff 100%);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0 16px 38px rgba(15,71,255,.34), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(8,36,120,.24);
  transition: filter .18s ease, transform .18s ease;
}

.login-card .primary:hover {
  filter: brightness(1.08);
}

.login-card .primary:active {
  transform: translateY(1px);
}

.login-card .primary:disabled {
  opacity: .6;
}

.login-card .error-box {
  margin: 0 24px 16px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,125,134,.35);
  background: rgba(104,0,6,.50);
  color: #ffbec4;
  font-size: 14px;
}

.login-card .mfa-hint {
  margin: 0 24px 8px;
  color: rgba(219,234,254,.80);
  font-size: 14px;
}

@media (max-width: 480px) {
  .login-page {
    padding: 18px 16px 26px;
    align-items: center;
  }

  .login-card > .brand {
    max-width: 350px;
    background-size: 108% auto;
  }

  .login-card .login-copy {
    margin-bottom: 28px;
  }

  .login-card::before {
    top: 270px;
    bottom: -28px;
  }

  .login-card::after {
    bottom: -28px;
  }

  .login-card label {
    margin-left: 24px;
    margin-right: 24px;
  }

  .login-card .primary {
    width: calc(100% - 48px);
    margin-left: 24px;
    margin-right: 24px;
  }
}