/* ==========================================================================
   JEKKO · Auth pages (Login / Register) — Variant A
   Drop into: wwwroot/css/jekko-auth.css
   Linked from _AuthLayout.cshtml. Self-contained (no Bootstrap needed).
   ========================================================================== */

:root {
  --jk-orange: #E8531A;
  --jk-orange-deep: #C9430F;
  --jk-orange-soft: #FCEDE5;
  --jk-ink: #20242a;
  --jk-ink-soft: #5c636c;
  --jk-ink-faint: #8a9099;
  --jk-line: #e6e5e2;
  --jk-line-strong: #d6d5d1;
  --jk-bg: #ffffff;
  --jk-bg-soft: #f6f5f2;
  --jk-dark: #2b2826;
  --jk-red: #c0392b;
  --jk-radius-sm: 6px;
  --jk-radius: 10px;
  --jk-radius-lg: 16px;
  --jk-font: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --jk-shadow-card: 0 1px 2px rgba(20,20,20,.04), 0 12px 32px -12px rgba(20,20,20,.16);
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--jk-font);
  color: var(--jk-ink);
  background: var(--jk-bg);
  -webkit-font-smoothing: antialiased;
}

.jk-page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* ============ TOP NAV ============ */
.jk-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 34px;
  border-bottom: 1px solid var(--jk-line);
  background: var(--jk-bg);
  flex: 0 0 auto;
}
.jk-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  color: var(--jk-ink);
  white-space: nowrap;
}
.jk-logo { height: 46px; width: auto; display: block; }
.jk-brand-text { font-size: 19px; font-weight: 400; letter-spacing: .2px; color: #444; }
.jk-navlinks { display: flex; align-items: center; gap: 30px; }
.jk-navlink {
  position: relative;
  text-decoration: none;
  color: var(--jk-ink-soft);
  font-size: 16px;
  font-weight: 400;
  padding: 20px 0;
  transition: color .12s linear;
}
.jk-navlink:hover { color: var(--jk-ink); }
.jk-navlink.is-active { color: var(--jk-ink); font-weight: 700; }
.jk-navlink.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--jk-orange);
  border-radius: 3px 3px 0 0;
}

/* ============ MAIN AREA ============ */
.jk-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

/* Login only: faint grey JEKKO lizard sitting to the LEFT of the card */
.jk-main--watermark { position: relative; overflow: hidden; }
.jk-main--watermark::before {
  content: "";
  position: absolute;
  top: 35%;
  left: 50%;
  /* Sit to the LEFT of the (centred) card, rotated -50deg so the whole lizard —
     tail included — lies diagonally beside the login fields. A small overlap with
     the card edge is fine; it must not hide behind the card. */
  transform: translate(-100%, -50%) translateX(-60px) rotate(-42deg);
  transform-origin: center;
  width: min(560px, 52vw);
  aspect-ratio: 417 / 248;
  background: url('../img/jekko-lizard.png') center / contain no-repeat;
  opacity: .14;
  pointer-events: none;
  z-index: 0;
}
.jk-main--watermark .jk-card { position: relative; z-index: 1; }

/* Hide the watermark when there isn't room beside the card */
@media (max-width: 900px) {
  .jk-main--watermark::before { display: none; }
}

/* ============ CARD ============ */
.jk-card {
  width: 100%;
  max-width: 440px;
  background: var(--jk-bg);
  border: 1px solid var(--jk-line);
  border-radius: var(--jk-radius-lg);
  box-shadow: var(--jk-shadow-card);
  overflow: hidden;
}
.jk-card--wide { max-width: 820px; }
.jk-card-body { padding: 38px 40px 34px; }
.jk-card--wide .jk-card-body { padding: 38px 44px 36px; }

.jk-h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -.4px;
  line-height: 1.1;
}
.jk-sub {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--jk-ink-soft);
  font-weight: 400;
}
.jk-sub-it { font-style: italic; }
.jk-divider { height: 1px; background: var(--jk-line); margin: 24px 0; border: 0; }

/* ============ FORM ============ */
.jk-field { margin-bottom: 18px; }
.jk-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--jk-ink);
  margin-bottom: 7px;
  letter-spacing: .1px;
}
.jk-input-wrap { position: relative; display: flex; align-items: center; }
.jk-input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  font-family: var(--jk-font);
  font-size: 15px;
  color: var(--jk-ink);
  background: var(--jk-bg);
  border: 1px solid var(--jk-line-strong);
  border-radius: var(--jk-radius);
  outline: none;
  transition: border-color .12s linear, box-shadow .12s linear;
}
.jk-input::placeholder { color: var(--jk-ink-faint); }
.jk-input:hover { border-color: #bdbcb7; }
.jk-input:focus {
  border-color: var(--jk-orange);
  box-shadow: 0 0 0 3px rgba(232,83,26,.15);
}
.jk-input.has-toggle { padding-right: 46px; }
.jk-reveal {
  position: absolute;
  right: 6px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent;
  color: var(--jk-ink-faint);
  cursor: pointer;
  border-radius: 8px;
}
.jk-reveal:hover { color: var(--jk-ink); background: var(--jk-bg-soft); }

/* checkbox (works with the hidden field ASP.NET emits after the checkbox) */
.jk-row-between { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 22px; }
.jk-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.jk-check input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.jk-box {
  width: 18px; height: 18px;
  border: 1.5px solid var(--jk-line-strong);
  border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  transition: background .12s, border-color .12s;
}
.jk-check input[type="checkbox"]:checked ~ .jk-box { background: var(--jk-orange); border-color: var(--jk-orange); }
.jk-box svg { opacity: 0; transition: opacity .1s; }
.jk-check input[type="checkbox"]:checked ~ .jk-box svg { opacity: 1; }
.jk-check-label { font-size: 14px; color: var(--jk-ink-soft); }

.jk-btn {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: var(--jk-radius);
  background: var(--jk-orange);
  color: #fff;
  font-family: var(--jk-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .12s linear, transform .04s linear;
}
.jk-btn:hover { background: var(--jk-orange-deep); }
.jk-btn:active { transform: translateY(1px); }
.jk-btn svg { transition: transform .14s ease; }
.jk-btn:hover svg { transform: translateX(3px); }
.jk-btn--auto { width: auto; padding: 0 36px; }

.jk-links { display: flex; flex-direction: column; gap: 13px; margin-top: 26px; }
.jk-link {
  font-size: 14.5px;
  color: var(--jk-orange);
  text-decoration: none;
  width: fit-content;
  font-weight: 400;
}
.jk-link:hover { color: var(--jk-orange-deep); text-decoration: underline; }

/* ============ VALIDATION ============ */
.jk-validation { margin-bottom: 16px; }
.jk-validation ul { margin: 0; padding-left: 18px; }
.jk-validation li, .text-danger, .jk-error {
  color: var(--jk-red);
  font-size: 13px;
}
.jk-error { display: block; margin-top: 6px; }
.jk-input.input-validation-error { border-color: var(--jk-red); }
.jk-input.input-validation-error:focus { box-shadow: 0 0 0 3px rgba(192,57,43,.15); }

/* ============ REGISTER GRID ============ */
.jk-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 30px; }
.jk-consent { display: flex; flex-direction: column; gap: 15px; margin: 28px 0 26px; }
.jk-consent .jk-check { align-items: flex-start; }
.jk-consent .jk-box { margin-top: 1px; flex: 0 0 auto; }
.jk-consent .jk-check-label { font-size: 14.5px; line-height: 1.5; color: var(--jk-ink); }
.jk-consent .jk-link { display: inline; }

/* ============ FOOTER ============ */
.jk-footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--jk-line);
  padding: 18px 34px;
  display: flex;
  align-items: center;
  gap: 26px;
  background: var(--jk-bg);
}
.jk-footer .jk-copy { font-size: 13.5px; color: var(--jk-ink-soft); }
.jk-footer a { font-size: 13.5px; color: var(--jk-orange); text-decoration: none; }
.jk-footer a:hover { text-decoration: underline; }

/* ============ RESPONSIVE ============ */
@media (max-width: 680px) {
  .jk-grid2 { grid-template-columns: 1fr; }
  .jk-navlinks { gap: 18px; }
  .jk-nav, .jk-footer { padding-left: 18px; padding-right: 18px; }
  .jk-card-body { padding: 28px 24px; }
}