/* =============================================================================
   UzaDigit — auth page skin (sign in + create account)
   BK Networks Co. Ltd

   Drop-in. Add this file AFTER the app stylesheets on the login and register
   pages. It changes no markup: every rule targets classes the pages already
   render, so CSRF, the honeypot fields, validation and the password toggle are
   untouched.

   The app's own auth rules are all single-class with no !important, so plain
   two-class selectors here win without needing !important anywhere.
   ============================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap");

.auth-page {
  --uza-navy: #010E2F;
  --uza-navy-soft: #05173F;
  --uza-orange: #FF8700;
  --uza-orange-hover: #E67A00;
  --uza-ink: #FFFFFF;
  --uza-muted: #AEBBD1;
  --uza-line: rgba(255, 255, 255, 0.10);
  --uza-line-strong: rgba(255, 255, 255, 0.20);
  --uza-danger: #FF9E8A;
  --uza-success: #7FE3B4;
  --uza-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------- backdrop */

body.auth-page {
  position: relative;
  min-height: 100dvh;
  margin: 0;
  background: var(--uza-navy);
  color: var(--uza-ink);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

/* Warm glow above, cool depth below. Mirrors the landing page hero so the two
   read as one product. */
body.auth-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60rem 32rem at 78% -8%, rgba(255, 135, 0, 0.30), transparent 60%),
    radial-gradient(48rem 34rem at 10% 108%, rgba(168, 78, 43, 0.26), transparent 62%);
  z-index: 0;
}

/* Faint grid, matched to the hero's 68px rhythm */
body.auth-page::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 78%);
}

.auth-shell { position: relative; z-index: 1; min-height: 100dvh; }
.auth-panel { position: relative; z-index: 1; }

/* -------------------------------------------------------------------- card */

.auth-page .auth-panel__card {
  position: relative;
  isolation: isolate;
  background: rgba(6, 22, 58, 0.62);
  border: 1px solid var(--uza-line);
  border-radius: 22px;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
          backdrop-filter: blur(22px) saturate(120%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 40px 90px rgba(0, 0, 0, 0.55);
  transform-style: preserve-3d;
  transition: box-shadow 400ms var(--uza-ease);
}

/* Faint diagonal weave, the same trick the landing dashboard panels use */
.auth-page .auth-panel__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.035;
  background-image:
    linear-gradient(135deg, #fff 0.5px, transparent 0.5px),
    linear-gradient(45deg, #fff 0.5px, transparent 0.5px);
  background-size: 30px 30px;
}

/* --------------------------------------------------------- travelling edge */

.uza-beams { position: absolute; inset: -1px; border-radius: 23px; overflow: hidden; pointer-events: none; z-index: 2; }
.uza-beams i { position: absolute; display: block; }

.uza-beams .t, .uza-beams .b { height: 2px; width: 45%;
  background: linear-gradient(90deg, transparent, var(--uza-orange), transparent); }
.uza-beams .r, .uza-beams .l { width: 2px; height: 45%;
  background: linear-gradient(180deg, transparent, var(--uza-orange), transparent); }

.uza-beams .t { top: 0; left: -45%; animation: uza-run-x 5s var(--uza-ease) infinite; }
.uza-beams .r { top: -45%; right: 0; animation: uza-run-y 5s var(--uza-ease) 1.25s infinite; }
.uza-beams .b { bottom: 0; right: -45%; animation: uza-run-x-rev 5s var(--uza-ease) 2.5s infinite; }
.uza-beams .l { bottom: -45%; left: 0; animation: uza-run-y-rev 5s var(--uza-ease) 3.75s infinite; }

@keyframes uza-run-x     { 0% { left: -45%; opacity: 0 } 15%,60% { opacity: .85 } 100% { left: 100%; opacity: 0 } }
@keyframes uza-run-x-rev { 0% { right: -45%; opacity: 0 } 15%,60% { opacity: .85 } 100% { right: 100%; opacity: 0 } }
@keyframes uza-run-y     { 0% { top: -45%; opacity: 0 } 15%,60% { opacity: .85 } 100% { top: 100%; opacity: 0 } }
@keyframes uza-run-y-rev { 0% { bottom: -45%; opacity: 0 } 15%,60% { opacity: .85 } 100% { bottom: 100%; opacity: 0 } }

/* Corner embers */
.uza-beams .c { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,135,0,0.65); filter: blur(2px);
  animation: uza-ember 3s ease-in-out infinite; }
.uza-beams .c1 { top: 0; left: 0 }
.uza-beams .c2 { top: 0; right: 0; animation-delay: .6s }
.uza-beams .c3 { bottom: 0; right: 0; animation-delay: 1.2s }
.uza-beams .c4 { bottom: 0; left: 0; animation-delay: 1.8s }
@keyframes uza-ember { 0%,100% { opacity: .25 } 50% { opacity: .6 } }

/* ------------------------------------------------------------------ header */

.uza-authlogo {
  display: block;
  width: auto;
  height: 30px;
  margin: 0 0 1.25rem;
  /* the wordmark paints itself from these two */
  --logo-ink: #fff;
  --logo-accent: var(--uza-orange);
}

.auth-page .auth-copy { margin-bottom: 1.5rem; }
.auth-page .auth-copy__eyebrow {
  color: var(--uza-orange);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 .5rem;
}
.auth-page .auth-copy h1 {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  color: var(--uza-ink);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.12;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
  margin: 0 0 .5rem;
}
.auth-page .auth-copy p { color: var(--uza-muted); margin: 0; font-size: .95rem; line-height: 1.6; }

/* ------------------------------------------------------------------ fields */

.auth-page .auth-field > span,
.auth-page .auth-field-label {
  color: var(--uza-ink);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.auth-page .auth-field input,
.auth-page .auth-field select,
.auth-page .auth-phone-field input,
.auth-page .auth-phone-field select,
.auth-page .auth-password input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--uza-line);
  border-radius: 12px;
  color: var(--uza-ink);
  font-size: 1rem;                 /* 16px keeps iOS from zooming on focus */
  padding: .8rem .9rem;
  min-height: 48px;
  width: 100%;
  transition: background-color 200ms var(--uza-ease),
              border-color 200ms var(--uza-ease),
              box-shadow 200ms var(--uza-ease);
}
.auth-page .auth-field input::placeholder,
.auth-page .auth-phone-field input::placeholder { color: rgba(255,255,255,.38); }

.auth-page .auth-field input:hover,
.auth-page .auth-phone-field input:hover { border-color: var(--uza-line-strong); }

.auth-page .auth-field input:focus,
.auth-page .auth-field select:focus,
.auth-page .auth-phone-field input:focus,
.auth-page .auth-phone-field select:focus,
.auth-page .auth-password input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--uza-orange);
  box-shadow: 0 0 0 4px rgba(255, 135, 0, 0.18);
}

/* Autofill leaves a white slab otherwise */
.auth-page .auth-field input:-webkit-autofill,
.auth-page .auth-password input:-webkit-autofill {
  -webkit-text-fill-color: var(--uza-ink);
  -webkit-box-shadow: 0 0 0 1000px #0A2050 inset;
  caret-color: var(--uza-ink);
}

.auth-page .auth-field select,
.auth-page .auth-phone-field select { color: var(--uza-ink); }
.auth-page .auth-field select option,
.auth-page .auth-phone-field select option { background: #05173F; color: #fff; }

.auth-page .auth-field__hint { color: var(--uza-muted); font-size: .8125rem; }
.auth-page .auth-field__hint--error { color: var(--uza-danger); }
.auth-page .auth-field__hint--success { color: var(--uza-success); }

/* Grid and flex children default to min-width:auto, so the country select --
   whose longest option is very wide -- was forcing its whole column past the
   card edge. Letting these shrink is what keeps the phone row inside. */
.auth-page .auth-form-grid { min-width: 0; }
.auth-page .auth-form-grid > * { min-width: 0; }
/* .auth-field is itself a grid in the app CSS, and its auto column was being
   sized to the select.s min-content (~426px), overflowing its own cell. */
.auth-page .auth-field { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.auth-page .auth-phone-field { min-width: 0; }
.auth-page .auth-field__hint { min-width: 0; overflow-wrap: anywhere; }

/* The country code and the number share one row: the select sizes to its
   content and the number takes the rest. Without this the blanket width:100%
   above gives the select everything and crushes the number to a few pixels. */
.auth-page .auth-phone-field { display: flex; gap: .5rem; align-items: stretch; }
.auth-page .auth-phone-field select { width: auto; flex: 0 1 auto; max-width: 11rem; min-width: 0; }
.auth-page .auth-phone-field input { width: auto; flex: 1 1 auto; min-width: 0; }

/* ---------------------------------------------------------- password toggle */

.auth-page .auth-password { position: relative; }
.auth-page .auth-password__toggle {
  background: none;
  border: 0;
  color: var(--uza-muted);
  font-weight: 600;
  font-size: .8125rem;
  min-height: 44px;
  padding-inline: .5rem;
  cursor: pointer;
  transition: color 160ms var(--uza-ease);
}
.auth-page .auth-password__toggle:hover { color: var(--uza-orange); }
.auth-page .auth-password__toggle-icon { color: inherit; }

/* --------------------------------------------------------------- check box */

.auth-page .auth-check {
  display: flex;            /* the app leaves this as a block, so the box wrapped */
  align-items: center;
  gap: .55rem;
  color: var(--uza-muted);
  font-size: .875rem;
  cursor: pointer;
  width: fit-content;
}
.auth-page .auth-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  width: 18px; height: 18px;
  flex: none;
  border: 1px solid var(--uza-line-strong);
  border-radius: 5px;
  background: rgba(255,255,255,.06);
  cursor: pointer;
  place-content: center;
  transition: background-color 160ms var(--uza-ease), border-color 160ms var(--uza-ease);
}
.auth-page .auth-check input[type="checkbox"]::after {
  content: "";
  width: 10px; height: 6px;
  border: 2px solid var(--uza-navy);
  border-top: 0; border-right: 0;
  transform: rotate(-45deg) scale(0);
  transition: transform 160ms var(--uza-ease);
}
.auth-page .auth-check input[type="checkbox"]:checked {
  background: var(--uza-orange);
  border-color: var(--uza-orange);
}
.auth-page .auth-check input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }
.auth-page .auth-check input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--uza-orange);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------- button */

/* Brand rule (Blueprint 2.2): the primary button is orange with NAVY text.
   White on orange is about 2.4:1 and is not approved. Navy on orange is 7.9:1. */
.auth-page .auth-button {
  position: relative;
  overflow: hidden;
  background: var(--uza-orange);
  color: var(--uza-navy);
  border: 0;
  border-radius: 999px;
  min-height: 52px;
  width: 100%;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(255, 135, 0, 0.28);
  transition: background-color 180ms var(--uza-ease),
              transform 180ms var(--uza-ease),
              box-shadow 240ms var(--uza-ease);
}
.auth-page .auth-button:hover {
  background: var(--uza-orange-hover);
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(255, 135, 0, 0.36);
  filter: none;
}
.auth-page .auth-button:active { transform: translateY(0); }
.auth-page .auth-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Light sweeps across the button on hover */
.auth-page .auth-button::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  pointer-events: none;
}
.auth-page .auth-button:hover::after { animation: uza-sweep 900ms var(--uza-ease); }
@keyframes uza-sweep { to { transform: translateX(100%); } }

/* ------------------------------------------------------------------ links */

.auth-page .auth-links { color: var(--uza-muted); font-size: .875rem; }
.auth-page .auth-links a,
.auth-page .auth-copy a {
  color: var(--uza-orange);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;      /* comfortable tap target on a phone */
  border-bottom: 1px solid rgba(255, 135, 0, 0.35);
  padding-block: 2px;
  transition: border-color 160ms var(--uza-ease), color 160ms var(--uza-ease);
}
.auth-page .auth-links a:hover,
.auth-page .auth-copy a:hover { color: #fff; border-color: #fff; }
.auth-page .auth-links .text-muted { color: var(--uza-muted); }

/* ----------------------------------------------------------------- alerts */

.auth-page .auth-alert {
  border-radius: 12px;
  border: 1px solid var(--uza-line);
  background: rgba(255,255,255,.06);
  color: var(--uza-ink);
  font-size: .875rem;
}
.auth-page .auth-alert--info { border-color: rgba(255,135,0,.35); background: rgba(255,135,0,.12); }
.auth-page .auth-alert--success { border-color: rgba(79,192,141,.4); background: rgba(79,192,141,.14); color: var(--uza-success); }

/* ------------------------------------------------------- motion + a11y */

@media (prefers-reduced-motion: reduce) {
  .uza-beams { display: none; }
  .auth-page .auth-panel__card { transform: none !important; }
  .auth-page .auth-button::after { display: none; }
  .auth-page .auth-button:hover { transform: none; }
}

/* The tilt is pointer-driven, so it only applies where there is a real cursor */
@media (hover: none), (pointer: coarse) {
  .auth-page .auth-panel__card { transform: none !important; }
}