/* The card is now the brand gradient, and auth-bg.webp is that same
   gradient — the panel disappeared into it. A pale ground gives the card
   the same separation it has on the marketing pages, where it sits on
   white. The artwork stays as a soft wash behind. */
.auth {
  position: relative;

  min-height: 100dvh;
  /* Even top and bottom: login and register render without the site
     header, so there is no fixed bar to clear. /signup still has one,
     which is why the padding is restored for it below. */
  padding: 40px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #eef1f9;
}
body:has(.site-header) .auth { padding-top: 104px; }
.auth::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../img/auth-bg.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: .8;
  pointer-events: none;
}
.auth > * { position: relative; z-index: 1; }


/* Same panel as the free-trial card on the marketing pages: the brand
   gradient with solid white fields on top, rather than a frosted sheet. */
.auth-card {
  width: 100%;
  max-width: 500px;
  padding: clamp(26px, 3.4vw, 40px) clamp(24px, 3.4vw, 40px);
  border-radius: var(--radius-2xl);

  background: var(--grad-panel);
  border: 0;
  box-shadow: var(--shadow-lg);
}

/* Sign-up carries more fields than login, so it gets a wider card and the
   name pair sits side by side comfortably. */
.page-register .auth-card { max-width: 620px; }

/* The logotype is navy artwork, so it needs a light plate to sit on rather
   than the gradient itself. */
.auth-brand {
  text-align: center;
  margin-bottom: clamp(16px, 2.6vh, 24px);
}
.auth-brand img { width: 260px; max-width: 82%; height: auto; object-fit: contain; margin: 0 auto; }

.auth-title {
  text-align: center;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--white);
  margin: 0 0 clamp(14px, 2.2vh, 22px);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(14px, 2.2vh, 22px);
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(var(--white-rgb), .45);
}
.auth-divider span { font-size: 13px; color: rgba(var(--white-rgb), .92); text-transform: uppercase; letter-spacing: .06em; }


.auth-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: clamp(14px, 2.4vh, 24px);
}
.auth-social a {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--white-rgb), .9);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) ease, box-shadow var(--duration-base) ease;
}
.auth-social a:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.auth-social img { width: 26px; height: 26px; object-fit: contain; }

.auth-card .form-floating > .form-control {
  height: 56px;
  padding: 20px 20px 6px;
  font-size: var(--text-base);
  color: var(--navy);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: none;
}
/* White ring, as on the trial card — a coloured glow is invisible here. */
.auth-card .form-floating > .form-control:focus {
  box-shadow: 0 0 0 3px rgba(var(--white-rgb), .55);
}

/* The label floats on `transform` alone — the one property Bootstrap
   transitions (with opacity). Animating font-size or align-items instead
   cannot tween, so the label jumps between states; that was the flicker.
   Height is 100% of the field, so `display: flex` centres the resting
   label without needing padding maths. */
.auth-card .form-floating > label {
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: var(--text-base);
  color: var(--muted);
  border: 0;
  transform-origin: 0 50%;
}

.auth-card .form-floating > .form-control:focus ~ label,
.auth-card .form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: var(--teal);
  opacity: 1;
  /* scale replaces a font-size change; translateY lifts it clear of the
     text. Both are transform components, so the move is one smooth tween. */
  transform: scale(.72) translateY(-15px);
}
.auth-card .form-floating > .form-control:focus ~ label::after,
.auth-card .form-floating > .form-control:not(:placeholder-shown) ~ label::after {
  background: transparent;
}

.auth-card .form-select {
  width: 100%;
  height: 56px;
  margin-bottom: clamp(8px, 1.2vh, 12px);
  padding: 0 40px 0 20px;
  font-size: var(--text-base);
  color: var(--navy);
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--white);
  box-shadow: none;
}
.auth-card .form-select:focus {
  box-shadow: 0 0 0 3px rgba(var(--white-rgb), .55);
}


.auth-terms {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(var(--white-rgb), .92);
  text-align: center;
  margin: 4px 0 clamp(12px, 2vh, 18px);
}
.auth-terms a { color: var(--white); font-weight: var(--weight-semibold); text-decoration: underline; }
.auth-terms-foot { margin-top: clamp(14px, 2.2vh, 22px); margin-bottom: 0; font-weight: var(--weight-medium); }


.auth-captcha { display: flex; justify-content: center; }
.auth-captcha .alert { font-size: 13px; }


.auth-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: clamp(12px, 2vh, 20px);
  font-size: var(--text-base);
  color: var(--white);
  cursor: pointer;
  user-select: none;
}
.auth-remember .form-check-input {
  width: 24px;
  height: 24px;
  margin: 0;
  border-radius: 7px;
  background-color: rgba(var(--white-rgb), .85);
  border: 1px solid rgba(var(--navy-rgb), .2);
  box-shadow: var(--shadow-sm);
  flex: 0 0 auto;
}
.auth-remember .form-check-input:checked {
  background-color: var(--teal);
  border-color: var(--teal);
}
.auth-remember .form-check-label { cursor: pointer; }


.auth-actions { display: flex; flex-direction: column; gap: 8px; }
.auth-actions .btn {
  width: 100%;
  letter-spacing: .12em;
  font-size: 14px;
  padding: clamp(15px, 2.1vh, 19px);
  border-radius: 40px;
}
/* Both button styles are translucent tints of this same gradient, so on the
   card they vanish. Solid white for the primary action, an outline for the
   secondary — the same trick .trial-card plays with .btn-soft. */
.auth-card .auth-actions .btn-glass,
.auth-card .auth-actions .btn-brand {
  --bs-btn-color: var(--navy);
  --bs-btn-hover-color: var(--navy);
  background: var(--white);
  color: var(--navy);
  border: 0;
  box-shadow: var(--shadow-sm);
}
.auth-card .auth-actions .btn-glass:hover,
.auth-card .auth-actions .btn-brand:hover { color: var(--navy); box-shadow: var(--shadow-md); }

.auth-forgot {
  display: block;
  text-align: center;
  margin-top: clamp(12px, 2vh, 20px);
  font-size: 14px;
  color: rgba(var(--white-rgb), .92);
}
.auth-forgot:hover { color: var(--white); }

/* On the gradient the plain red disappears, so errors get their own chip. */
.auth-error {
  display: block;
  margin-bottom: 10px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  background: rgba(var(--white-rgb), .94);
  color: var(--danger);
  font-size: 14px;
  font-weight: var(--weight-medium);
  text-align: center;
}
.auth-error:empty { margin: 0; padding: 0; background: none; }


/* SIGN UP — account-type chooser. Scoped to .auth: <section class="signup">
   on live-lessons is a different block and must not inherit this width cap. */
.auth .signup { width: 100%; max-width: 900px; }

.signup-card {
  position: relative;
  height: 100%;
  padding: 32px 32px;
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, rgba(var(--white-rgb), .74) 0%, rgba(var(--white-rgb), .44) 100%);
  border: 1px solid rgba(var(--white-rgb), .6);
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  text-align: center;
  transition: transform var(--duration-base) ease, box-shadow var(--duration-base) ease;
}
.signup-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), 0 30px 60px rgba(var(--navy-rgb), .14);
}

.signup-badge {
  width: 76px;
  height: 76px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(var(--white-rgb), .9), rgba(var(--white-rgb), .55));
  border: 1px solid rgba(var(--white-rgb), .7);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.signup-badge img { width: 44px; height: 44px; object-fit: contain; }

.signup-card h2 { font-weight: var(--weight-semibold); font-size: 27px; margin: 0 0 6px; }
.signup-card h3 {
  font-weight: var(--weight-regular);
  font-size: 13.5px;
  color: var(--body);
  margin: 0 0 24px;
  white-space: nowrap;
}


.signup-includes { margin-top: 22px; text-align: left; }
.signup-includes h4 { font-weight: var(--weight-semibold); font-size: var(--text-md); margin: 0 0 16px; }
.signup-includes ul { list-style: none; margin: 0; padding: 0; }
.signup-includes li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--text-base);
  color: var(--body);
  margin-bottom: 8px;
}
.signup-includes li img.tick { flex: 0 0 auto; width: 16px; height: 16px; }


#forgotModal .modal-content {
  padding: 40px 40px 32px;
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, rgba(var(--white-rgb), .96) 0%, rgba(var(--white-rgb), .9) 100%);
  border: 1px solid rgba(var(--white-rgb), .7);
  box-shadow: var(--shadow-lg);
}
#forgotModal .btn-close { position: absolute; top: 16px; right: 20px; }
#forgotModal .modal-brand { text-align: center; margin-bottom: 18px; }
#forgotModal .modal-brand img { width: 54px; height: 54px; margin: 0 auto; }
#forgotModal h4 { text-align: center; font-weight: var(--weight-semibold); font-size: var(--text-xl); margin: 8px 0 4px; }
#forgotModal p { text-align: center; font-size: 14px; color: var(--body); margin: 0 0 22px; }
#forgotModal .modal-backdrop { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }


@media (max-width: 991.98px) {
  .auth .signup { max-width: 460px; }
  .auth { min-height: auto; padding: 40px 20px; }
  body:has(.site-header) .auth { padding-top: 104px; }
}
@media (max-width: 575.98px) {
  .auth { padding: 32px 16px; }
  body:has(.site-header) .auth { padding-top: 92px; }
  .signup-card { padding: 36px 26px 38px; }
  /* narrow cards: let the strapline wrap rather than overflow */
  .signup-card h3 { white-space: normal; font-size: 14px; }
}

/* Touch targets. The checkbox stays 24px so it still looks like a checkbox;
   the label is what grows, and clicking it toggles the box either way, so the
   pair reaches 44px without the control itself looking oversized. The forgot
   link gets padding rather than height so the text does not move. */
@media (max-width: 767.98px) {
  .auth-remember { min-height: 44px; }
  .auth-remember .form-check-label { display: flex; align-items: center; min-height: 44px; }
  .auth-forgot { padding: 11px 0; }
}


@media (min-width: 992px) and (max-height: 700px) {
  .auth { min-height: 100dvh; padding: 24px 24px 20px; }
  body:has(.site-header) .auth { padding-top: 88px; }
  .auth-social { margin-bottom: 12px; }
  .auth-social a { width: 44px; height: 44px; }
  .auth-brand { margin-bottom: 12px; }
  .auth-brand img { width: 260px; }
}