/* ==========================================================================
   SpeedX — auth.css
   Shared styling for the member access pages (forgot password, and any other
   .aspx auth screen that links this file). Uses the same tokens as the
   public site so the two never drift apart.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Local webfonts
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "InterLocal";
  src: url("../fonts/inter-v12-latin-regular.woff2") format("woff2"),
       url("../fonts/inter-v12-latin-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "InterLocal";
  src: url("../fonts/inter-v12-latin-500.woff2") format("woff2"),
       url("../fonts/inter-v12-latin-500.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "InterLocal";
  src: url("../fonts/inter-v12-latin-700.woff2") format("woff2"),
       url("../fonts/inter-v12-latin-700.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  --navy-900: #030f24;
  --navy-800: #06182f;
  --navy-700: #0a2547;
  --navy-600: #0f3363;

  --gold-700: #a9761a;
  --gold-600: #c8901f;
  --gold-500: #e5ab33;
  --gold-400: #f2c25c;

  --white: #ffffff;
  --ink: #0b1626;

  --on-dark: rgba(255, 255, 255, 0.94);
  --on-dark-soft: rgba(255, 255, 255, 0.66);
  --on-dark-faint: rgba(255, 255, 255, 0.42);
  --rule-dark: rgba(255, 255, 255, 0.14);

  --ok: #47c98b;

  --font-body: "InterLocal", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Sora", "InterLocal", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.28s;
}

/* --------------------------------------------------------------------------
   3. Reset and page shell
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: var(--navy-900);
  color: var(--on-dark);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
}

/* The master page wraps everything in a form; it must not create a
   layout box of its own. */
form#Form1 {
  display: block;
  min-height: 100vh;
}

/* --------------------------------------------------------------------------
   4. Two-panel layout
   -------------------------------------------------------------------------- */
.auth-page {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  min-height: 100vh;
}

/* Brand panel ------------------------------------------------------------- */
.auth-aside {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
  padding: 3rem 4rem;
  overflow: hidden;
}

.auth-aside-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.auth-aside-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.auth-aside::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(80% 60% at 20% 15%, rgba(15, 51, 99, 0.55), transparent 62%),
    linear-gradient(160deg, rgba(3, 15, 36, 0.9) 10%, rgba(3, 15, 36, 0.82) 55%, rgba(3, 15, 36, 0.95) 100%);
}

.auth-aside-copy {
  max-width: 30ch;
}

.auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.1rem;
  color: var(--gold-400);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
}

.auth-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  flex: none;
  background: var(--gold-500);
}

.auth-aside h2 {
  margin: 0 0 1rem;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.9rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.auth-aside h2 em {
  color: var(--gold-500);
  font-style: normal;
}

.auth-aside-copy p {
  margin: 0;
  color: var(--on-dark-soft);
  font-size: 0.97rem;
}

.auth-points {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.auth-points li {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 0.9rem;
  align-items: center;
  color: var(--on-dark-soft);
  font-size: 0.88rem;
}

.auth-points i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(229, 171, 51, 0.35);
  border-radius: 50%;
  color: var(--gold-400);
}

.auth-points svg {
  width: 17px;
  height: 17px;
}

/* Form panel -------------------------------------------------------------- */
.auth-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3rem 2.5rem;
  background: var(--navy-800);
  background-image: linear-gradient(180deg, var(--navy-800), var(--navy-900));
}

/* --------------------------------------------------------------------------
   5. Form card
   -------------------------------------------------------------------------- */
.auth-card {
  width: 100%;
  max-width: 470px;
  padding: 2.5rem 2.25rem;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: 0 30px 80px rgba(3, 15, 36, 0.55);
  animation: auth-rise 0.55s var(--ease) both;
}

@keyframes auth-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Logo — rounded plate keeps the navy wordmark legible on a dark card. */
.auth-logo {
  display: block;
  width: max-content;
  margin: 0 auto 1.75rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-lg);
  background: var(--white);
}

.auth-logo img {
  width: 168px;
  height: auto;
  border-radius: var(--radius-lg);
}

.auth-card h1 {
  margin: 0 0 0.6rem;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.4rem + 0.8vw, 2rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-align: center;
}

.auth-card > p.auth-sub {
  margin: 0 0 2rem;
  color: var(--on-dark-soft);
  font-size: 0.9rem;
  text-align: center;
}

/* Server-side status message.
   ASP.NET renders nothing at all while the Label is hidden, so this box only
   ever appears once there is a message to show. */
.auth-status {
  display: block;
  margin-bottom: 1.4rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(71, 201, 139, 0.35);
  border-radius: var(--radius-sm);
  background: rgba(71, 201, 139, 0.12);
  font-size: 0.86rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   6. Fields
   -------------------------------------------------------------------------- */
.auth-field {
  display: block;
  margin-bottom: 1.4rem;
}

.auth-field-label {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--on-dark);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-input {
  position: relative;
  display: block;
}

.auth-input .auth-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  display: flex;
  align-items: center;
  color: var(--on-dark-faint);
  transform: translateY(-50%);
  pointer-events: none;
  transition: color var(--dur) var(--ease);
}

.auth-input .auth-icon svg {
  width: 17px;
  height: 17px;
}

.auth-input input {
  width: 100%;
  padding: 0.9rem 1rem 0.9rem 2.9rem;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  background: rgba(3, 15, 36, 0.55);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.auth-input input::placeholder {
  color: rgba(255, 255, 255, 0.34);
}

.auth-input input:focus {
  border-color: var(--gold-500);
  background: rgba(3, 15, 36, 0.75);
  box-shadow: 0 0 0 4px rgba(229, 171, 51, 0.16);
}

.auth-input:focus-within .auth-icon {
  color: var(--gold-400);
}

/* Keep browser autofill from repainting the field white. */
.auth-input input:-webkit-autofill,
.auth-input input:-webkit-autofill:hover,
.auth-input input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--white);
  -webkit-box-shadow: 0 0 0 1000px #071a33 inset;
  caret-color: var(--white);
}

/* --------------------------------------------------------------------------
   7. Submit button
   -------------------------------------------------------------------------- */
.btn-submit {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0.5rem 0 1.25rem;
  padding: 0 1.5rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: var(--navy-900);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(200, 144, 31, 0.3);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.btn-submit:hover {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(200, 144, 31, 0.36);
}

.btn-submit:active {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   8. Secondary links
   -------------------------------------------------------------------------- */
.auth-alt {
  margin: 0;
  color: var(--on-dark-soft);
  font-size: 0.86rem;
  text-align: center;
}

.auth-alt a {
  color: var(--gold-400);
  font-weight: 600;
  transition: color var(--dur) var(--ease);
}

.auth-alt a:hover {
  color: var(--gold-500);
}

.auth-alt + .auth-alt {
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   9. Trust row
   -------------------------------------------------------------------------- */
.auth-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 2rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--rule-dark);
  list-style: none;
}

.auth-trust li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--on-dark-faint);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.auth-trust svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--gold-500);
}

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .auth-aside {
    padding: 2.5rem;
  }

  .auth-main {
    padding: 2.5rem 1.75rem;
  }
}

@media (max-width: 860px) {
  .auth-page {
    grid-template-columns: 1fr;
  }

  .auth-aside {
    display: none;
  }

  .auth-main {
    min-height: 100vh;
    padding: 2.5rem 1.25rem;
  }
}

@media (max-width: 480px) {
  .auth-card {
    padding: 2rem 1.35rem;
    border-radius: 16px;
  }

  .auth-logo img {
    width: 140px;
  }

  .auth-trust {
    gap: 0.85rem 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-card {
    animation: none;
  }

  * {
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   11. Panel-specific adjustments
   -------------------------------------------------------------------------- */
/* In the brand panel the mark aligns with the copy beneath it, rather than
   centring the way it does on the card. */
.auth-aside .auth-logo {
  margin: 0;
}

.auth-aside .auth-logo img {
  width: 150px;
}