/* =====================================================
   LOGIN PAGE — no header/footer; matches site tokens
===================================================== */

.bg-wave-bottom {
  top: 520px;
}

.bg-wave-top {
  left: 53%;
}

.deco-g1{
  left: 47.1vw;
  top: 180px;
  width: 35.4vw;
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

.deco-g1 *,
.deco-g1::before,
.deco-g1::after{
    animation: none !important;
    transition: none !important;
    transform: none !important;
}


/* =====================================================
   LOGIN-ONLY WAVE ICONS
   ---------------------------------------------------
   Six themed transparent icons are pinned to fixed points
   along the bg-wave curve (right side of the form) and
   gently pulse in turn using the site-wide `deco-pulse`
   keyframe. No travel/flow — just shimmer.
   Scoped under .page-login so signup / forgot-password
   (which also load this file) are not affected.
===================================================== */

/* Trail fills the wave box (.bg-wave-top) exactly, so every % position
   below is measured against the wave image's own coordinate space. */
.login-wave-trail {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;            /* above the faint wave lines, behind the form */
}

.login-wave-trail__img {
  position: absolute;
  /* Width is a % of the wave box, so the bubbles grow/shrink in lock-step
     with the wave image instead of staying a fixed px size. */
  width: 4.3%;
  aspect-ratio: 1 / 1;        /* enforce a circular bubble */
  height: auto;
  /* Negative half-width margins center each bubble on its top/left anchor
     point WITHOUT using transform (transform is reserved for the pulse
     animation). Both margins use % of the box width, which equals half the
     bubble height too because aspect-ratio keeps it square. */
  margin-left: -2.15%;
  margin-top:  -2.15%;
  padding: 0.8vw;             /* breathing room between icon and rim, scales too */
  box-sizing: border-box;
  object-fit: contain;        /* keep the themed icon centred & undistorted */

  /* ── Bubble rim ── */
  border-radius: 50%;
  border: 1px solid rgba(125, 230, 230, 0.55);

  /* ── Glassy bubble fill ──
     Layer 1: small bright "shine" spot at the upper-left (the classic
     bubble highlight you see in the reference image).
     Layer 2: soft radial body with a hint of teal so it reads as a
     coloured glass sphere rather than a flat circle. */
  background:
    radial-gradient(
      circle at 28% 22%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0)   22%
    ),
    radial-gradient(
      circle at 35% 30%,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(0, 200, 200, 0.08)  55%,
      rgba(255, 255, 255, 0)   90%
    );
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  /* ── Depth ──
     Outer: soft teal halo so each bubble glows against the dark BG.
     Inner top-left: bright rim highlight (light source).
     Inner bottom-right: subtle darkening (the bubble's underside). */
  box-shadow:
    0 8px 22px rgba(0, 200, 200, 0.28),
    0 0 18px  rgba(125, 230, 230, 0.18),
    inset 1px  1px 2px rgba(255, 255, 255, 0.45),
    inset -1px -2px 3px rgba(0, 30, 60, 0.10);

  opacity: 0.95;
  transform-origin: center;
  will-change: transform;
  /* Same site-wide pulse used on deco circles / wave halos: scale 1 → 1.1 → 1.
     6s cycle with a 1s stagger between siblings creates a rolling "shimmer
     in turn" effect that travels along the wave curve. */
  animation: deco-pulse 6s ease-in-out infinite;
}

/* ── Positions along the bg-wave curve — ONE rule, no breakpoints ──
   All values are % of the wave box (.bg-wave-top), measured to each
   bubble's CENTRE (the negative margins above handle the centring).
   Because the wave box is sized in vw, these percentages keep every
   bubble glued to the same point on the wave at ANY screen width — the
   bubbles move and scale with the image automatically.
   Order follows the visible curve from top-right down to lower-left, so
   the staggered pulse reads as light rolling along the wave.
   To nudge a bubble onto an exact crest/trough, just tweak its % here. */
.login-wave-trail__img:nth-child(1) { 
  left: 82.7%;
  top: 39%; 
}
.login-wave-trail__img:nth-child(2) { 
  left: 74.5%;
  top: 43%;
}
.login-wave-trail__img:nth-child(3) { 
  left: 69%;
  top: 51%; 
}
.login-wave-trail__img:nth-child(4) { 
  left: 63%;
  top: 58%; 
}
.login-wave-trail__img:nth-child(5) { 
  left: 51%;
  top: 57%; 
}
.login-wave-trail__img:nth-child(6) { 
  left: 42%;
  top: 47%; 
}

@media (min-width: 1920px) and (max-width: 2205px) {
  .page-login .login-wave-trail__img:nth-child(6) { 
    left: 43.5%; 
  }
}
/* The wave box shifts up a little on smaller desktops; because the
   bubbles live inside it, they follow automatically — no bubble
   overrides needed here. */
@media (max-width: 1500px) {
  .bg-wave-top {
    top: -480px;
  }
  .page-bg {
    opacity: 1;
  }
}

/* ── Mobile ── visual column hides on small screens (see further down in
   this file), so the icons hide along with it. */
@media (max-width: 768px) {
  .page-login .login-wave-trail {
    display: none;
  }
}

/* Honour reduced-motion: keep the icons in place but stop the pulse. */
@media (prefers-reduced-motion: reduce) {
  .page-login .login-wave-trail__img {
    animation: none;
  }
}

.login-main {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(32px, 5vh, 64px) 0 clamp(40px, 6vh, 72px);
}

.login-wrap {
  width: 100%;
}

/* ~40% form / ~60% hero — matches reference composition */
.login-split {
  display: grid;
  grid-template-columns: minmax(0, 5.2fr) minmax(0, 7.8fr);
  align-items: center;
  column-gap: clamp(32px, 5vw, 88px);
  row-gap: 40px;
}

.login-split__form {
  display: flex;
  justify-content: flex-start;
  min-width: 0;
}

.login-split__visual {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  padding: 8px 0 0;
}

.login-hero-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: right center;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.2));
}

.login-card {
  width: 100%;
  max-width: 450px;
  height: auto;
  min-height: 0;
  border-radius: 20px;
  border: 3px solid var(--teal);
  background: #5a6a89;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
  padding: clamp(28px, 4vw, 40px);
}

.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 28px;
}

.login-brand-logo {
  width: 80%;
  height: auto;
}

.login-brand-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.login-brand-title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--white);
  margin: 0;
}

.login-brand-sub {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

.login-intro {
  text-align: center;
  margin-bottom: 22px;
}

.login-intro-lead {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  color: var(--white);
  margin: 0 0 6px;
}

.login-intro-or {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 6px;
}

.login-link {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  color: var(--azure);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.login-link:hover {
  color: var(--teal);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.login-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.login-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  font-size: 16px;
  pointer-events: none;
  line-height: 1;
  z-index: 1;
}

.login-field input {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: #1a2a3a;
  background: rgba(255, 255, 255, 0.96);
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  padding: 14px 16px 14px 44px;
  outline: none;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-field input::placeholder {
  color: #6b8aaa;
}

.login-field input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 200, 200, 0.2);
}

.login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.login-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  user-select: none;
}

.login-remember input {
  width: 18px;
  height: 18px;
  accent-color: var(--teal);
  cursor: pointer;
}

.login-forgot {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--azure);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.login-forgot:hover {
  color: var(--teal);
}

/* Forget-password page only: main heading weight */
.login-intro-lead--page-title {
  font-weight: 700;
}

/* Sign-up page: accent heading (matches mockup blue title) */
.login-intro-lead--signup {
  font-weight: 600;
  color: var(--azure);
}

/* Forget-password page: instruction under links */
.login-forget-hint {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  text-align: center;
  margin: 0 0 20px;
}

.login-social {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
}

.login-social-label {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--white);
  margin: 0 0 14px;
}

.login-ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.login-ms-btn img {
  width: 43%;
  height: auto;
}

.login-ms-btn .fa-microsoft {
  font-size: 20px;
}

.login-back {
  display: block;
  text-align: center;
  margin-top: 24px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
}

.login-back:hover {
  color: var(--azure);
}

@media (max-width: 1024px) {
  .login-split {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .login-split__form {
    justify-content: center;
  }

  /* Hero illustration only on wide desktop; hidden when stacked (login / signup / forgot-password) */
  .login-split__visual {
    display: none;
  }

  .login-main {
    padding-top: 24px;
  }
}

@media (max-width: 768px) {
  .login-main {
    align-items: flex-start;
    padding-top: 20px;
    padding-bottom: max(32px, env(safe-area-inset-bottom, 0px));
  }

  .login-card {
    max-width: 100%;
    padding: 26px 22px;
  }

  .login-brand-logo {
    width: min(300px, 90%);
  }

  .login-intro-lead,
  .login-intro-or {
    font-size: clamp(17px, 4vw, 20px);
  }

  .login-link {
    font-size: clamp(16px, 3.8vw, 19px);
  }

  .login-forget-hint {
    font-size: 15px;
    line-height: 1.5;
  }
}

@media (max-width: 480px) {
  .login-main {
    padding-left: max(0px, env(safe-area-inset-left, 0px));
    padding-right: max(0px, env(safe-area-inset-right, 0px));
  }

  .login-wrap.container {
    padding-left: max(var(--gutter, 20px), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter, 20px), env(safe-area-inset-right, 0px));
  }

  .login-card {
    border-radius: 16px;
    padding: 22px 16px;
  }

  .login-brand {
    margin-bottom: 22px;
  }

  .login-field input {
    padding: 13px 14px 13px 40px;
  }

  .login-input-icon {
    left: 12px;
    font-size: 15px;
  }

  .login-options {
    flex-direction: column;
    align-items: flex-start;
  }

  .login-ms-btn img {
    width: min(200px, 72%);
  }
}

@media (min-width: 1400px) {
  .login-split {
    column-gap: clamp(48px, 6vw, 100px);
  }
}

.login-card-cta {
  display: flex;
  justify-content: center;
}

.login-form-error {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 12px;
  text-align: center;
}

.login-form-success {
  color: #1b7a4e;
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 12px;
  text-align: center;
}