/* =========================================================================
   KNIGHT — auth (login / register). Split screen: dark editorial panel on the
   left, form on the right. Reuses the platform's customer endpoints; only the
   presentation is Knight. Falls back to a single column on mobile.
   ========================================================================= */

.k-auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  flex: 1;
  min-height: 560px;
}

/* LEFT — dark editorial panel */
.k-auth__aside {
  position: relative;
  overflow: hidden;
  background: var(--k-ink);
  color: var(--k-surface);
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.k-auth__aside::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(246, 244, 240, 0.04) 0 22px, transparent 22px 44px);
  pointer-events: none;
}
/* CMS background image: cover + dark scrim so the copy stays readable */
.k-auth__aside.has-image { background-size: cover; background-position: center; background-repeat: no-repeat; }
.k-auth__aside.has-image::before {
  background-image: linear-gradient(180deg, rgba(20, 19, 15, 0.55) 0%, rgba(20, 19, 15, 0.78) 100%);
}
.k-auth__aside > * { position: relative; }
.k-auth__aside-eyebrow {
  font-family: var(--k-font-body);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--k-accent) 65%, #fff);
}
.k-auth__aside-title {
  font-family: var(--k-font-display);
  font-weight: 900;
  font-size: clamp(34px, 3.6vw, 54px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 18px 0 20px;
}
.k-auth__aside-title span { color: var(--k-accent); }
.k-auth__aside-text {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(246, 244, 240, 0.62);
  margin: 0;
  max-width: 440px;
}
.k-auth__perks { display: flex; gap: 28px; flex-wrap: wrap; }
.k-auth__perk { display: flex; flex-direction: column; gap: 5px; }
.k-auth__perk-tag {
  font-family: var(--k-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--k-accent) 65%, #fff);
}
.k-auth__perk-label { font-size: 13px; color: rgba(246, 244, 240, 0.55); }

/* RIGHT — form column */
.k-auth__main { display: flex; flex-direction: column; min-height: 0; background: var(--k-bg); }
.k-auth__switch {
  display: flex;
  justify-content: flex-end;
  padding: 28px 40px 0;
  font-family: var(--k-font-body);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--k-muted);
}
.k-auth__switch a { color: var(--k-accent); text-decoration: none; font-weight: 700; }
.k-auth__switch a:hover { color: var(--k-ink); }

.k-auth__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.k-auth__card { width: 100%; max-width: 400px; }
.k-auth__eyebrow {
  font-family: var(--k-font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--k-accent);
}
.k-auth__title {
  font-family: var(--k-font-display);
  font-weight: 900;
  font-size: 34px;
  letter-spacing: -0.02em;
  margin: 12px 0 30px;
}

.k-auth__form { display: flex; flex-direction: column; gap: 18px; }
.k-auth__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.k-auth__field { display: flex; flex-direction: column; position: relative; }

/* Inline validation: red input border, broken by the error text. The text is
   centered on the bottom border and masks it with the panel background, so the
   red line appears interrupted exactly where the message sits. */
.k-auth__field.is-invalid .k-auth__input { border-color: #c0392b; }
.k-auth__field-err { position: absolute; right: 14px; bottom: 0; transform: translateY(50%); padding: 0 6px; background: var(--k-bg); font-family: var(--k-font-body); font-size: 11px; line-height: 1; color: #c0392b; white-space: nowrap; max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis; }
/* .k-auth__label → shared field micro-label in theme.css */
.k-auth__label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.k-auth__label-row .k-auth__label { margin-bottom: 0; }
.k-auth__forgot {
  font-family: var(--k-font-body);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--k-muted);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.k-auth__forgot:hover { color: var(--k-accent); }

.k-auth__input {
  width: 100%;
  height: 52px;
  border: 1px solid var(--k-line);
  border-radius: 10px;
  background: #fff;
  padding: 0 16px;
  font-family: var(--k-font-body);
  font-size: 15px;
  color: var(--k-ink);
  outline: none;
  transition: border-color 0.15s ease;
}
.k-auth__input:focus { border-color: var(--k-ink); }
.k-auth__input::placeholder { color: var(--k-muted-2); }

/* .k-auth__pw wrapper + .k-auth__pw-toggle → shared password primitives in theme.css */
.k-auth__pw .k-auth__input { padding-right: 64px; }

/* Password strength */
.k-auth__strength { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.k-auth__strength-track { flex: 1; height: 5px; background: color-mix(in srgb, var(--k-ink) 12%, transparent); border-radius: 100px; overflow: hidden; }
.k-auth__strength-fill { height: 100%; width: 0; border-radius: 100px; transition: width 0.25s ease, background 0.25s ease; }
.k-auth__strength-label { font-family: var(--k-font-body); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }

/* Checkbox rows */
.k-auth__check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; user-select: none; }
/* .k-auth__check input/box + checked states → shared checkbox primitive in theme.css */
.k-auth__check-label { font-size: 13px; line-height: 1.45; color: var(--k-ink-soft, rgba(20, 19, 15, 0.65)); }
.k-auth__check-label a { color: var(--k-accent); text-decoration: none; }
.k-auth__check-label a:hover { color: var(--k-ink); }

/* Submit */
.k-auth__submit {
  width: 100%;
  height: 54px;
  background: var(--k-accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--k-font-body);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
  transition: background 0.15s ease;
}
.k-auth__submit:hover { background: var(--k-ink); }
.k-auth__submit:disabled { opacity: 0.6; cursor: default; }

.k-auth__error {
  font-family: var(--k-font-body);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--k-accent);
}
.k-auth__notice {
  border: 1px solid var(--k-line);
  background: var(--k-surface);
  border-radius: 10px;
  padding: 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--k-ink);
}
.k-auth__notice.is-error { border-color: var(--k-accent); }

.k-auth__terms {
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--k-muted);
  margin: 26px 0 0;
}
.k-auth__terms a { color: var(--k-ink); }
.k-auth__terms a:hover { color: var(--k-accent); }

/* RESPONSIVE — hide the editorial panel, single column form */
@media (max-width: 860px) {
  .k-auth { grid-template-columns: 1fr; min-height: 0; }
  .k-auth__aside { display: none; }
  .k-auth__switch { padding: 20px 20px 0; }
  .k-auth__body { padding: 28px 20px 48px; }
}
@media (max-width: 460px) {
  .k-auth__grid2 { grid-template-columns: 1fr; }   /* Ime/Prezime stack on small phones */
}