/* ==========================================================================
   Seven Bites — Sign in / Sign up / Forgot / Verify / New password
   Matches the showcase auth screens. Desktop: navy brand panel left, form
   card right. Phones: the form card only.
   ========================================================================== */

.au-page {
  padding-block: var(--sp-8) var(--sp-10);
}

.au {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  max-width: 1000px;
  border-radius: var(--r-xl);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-float);
  overflow: hidden;
}

/* ---------- Brand panel ---------- */

.au-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-5);
  padding: var(--sp-10);
  background:
    linear-gradient(160deg, rgba(10, 21, 32, 0.92), rgba(10, 21, 32, 0.78)),
    url("../../img/hero/hero-burger-900.webp") center / cover;
  color: var(--c-on-dark);
}

.au-brand__logo {
  width: 120px;
  height: auto;
}

.au-brand__title {
  font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem);
  font-weight: var(--fw-black);
  line-height: 1.1;
}

.au-brand__title span {
  color: var(--c-yellow);
}

.au-brand__perks {
  display: grid;
  gap: var(--sp-3);
  list-style: none;
}

.au-brand__perks li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-on-dark-2);
  font-size: var(--fs-sm);
}

.au-brand__perks .icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 50%;
  background: rgba(252, 210, 6, 0.14);
  color: var(--c-yellow);
}

/* ---------- Card ---------- */

.au-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
}

.au-badge {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-bottom: var(--sp-3);
  border-radius: 50%;
  background: var(--c-yellow-soft);
  color: var(--c-navy);
}

.au-badge .icon {
  width: 28px;
  height: 28px;
}

.au-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
}

.au-sub {
  margin-top: 4px;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.au-ok {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--c-green-soft);
  color: var(--c-green);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.au-ok .icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.au-ok a {
  text-decoration: underline;
}

.au-form {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* ---------- Fields ---------- */

.au-field label {
  display: block;
  margin-bottom: 4px;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.au-field label small {
  color: var(--c-muted);
  font-weight: var(--fw-regular);
}

.au-input {
  position: relative;
}

.au-input input,
.au-input select {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-md);
  border: 1.5px solid var(--c-border-strong);
  background: var(--c-surface-2);
  color: var(--c-text);
  font: inherit;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}

.au-input--pw input {
  padding-right: 48px;
}

.au-input input:focus,
.au-input select:focus {
  outline: none;
  border-color: var(--c-yellow);
  box-shadow: 0 0 0 3px rgba(252, 210, 6, 0.22);
  background: var(--c-surface);
}

.au-input input[aria-invalid="true"] {
  border-color: var(--c-red);
}

.au-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--c-muted);
  transform: translateY(-50%);
}

.au-eye:hover {
  color: var(--c-text);
}

.au-eye .icon {
  width: 20px;
  height: 20px;
}

.au-hint {
  margin-top: 4px;
  color: var(--c-muted);
  font-size: var(--fs-xs);
}

.au-error,
.au-form-error {
  margin-top: 4px;
  color: var(--c-red);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}

.au-form-error {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: #fde8e8;
  font-size: var(--fs-sm);
}

/* password strength */
.au-strength {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: calc(var(--sp-2) * -1);
}

.au-strength span {
  height: 4px;
  border-radius: 4px;
  background: var(--c-border);
  transition: background-color var(--t-base) var(--ease-out);
}

.au-strength small {
  grid-column: 1 / -1;
  color: var(--c-muted);
  font-size: var(--fs-xs);
}

.au-strength[data-level="0"] span:nth-child(-n + 1),
.au-strength[data-level="1"] span:nth-child(-n + 1) { background: var(--c-red); }
.au-strength[data-level="2"] span:nth-child(-n + 2) { background: var(--c-gold); }
.au-strength[data-level="3"] span:nth-child(-n + 3) { background: var(--c-yellow); }
.au-strength[data-level="4"] span { background: var(--c-green); }

/* row: remember + forgot */
.au-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.au-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.au-check input,
.au-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.au-check__box {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--c-border-strong);
  color: transparent;
}

.au-check__box .icon {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}

.au-check input:checked + .au-check__box {
  border-color: var(--c-yellow);
  background: var(--c-yellow);
  color: var(--c-navy);
}

.au-check input:focus-visible + .au-check__box,
.au-chip input:focus-visible + span {
  outline: 2px solid var(--c-navy);
  outline-offset: 2px;
}

.au-check a {
  color: var(--c-text);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
}

.au-link {
  color: var(--c-gold);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.au-link:hover:not(:disabled) {
  text-decoration: underline;
}

.au-link:disabled {
  color: var(--c-muted);
}

.au-form .btn--lg {
  gap: 8px;
}

.au-spin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(10, 21, 32, 0.25);
  border-top-color: var(--c-navy);
  animation: au-spin 0.8s linear infinite;
}

@keyframes au-spin {
  to { transform: rotate(360deg); }
}

/* or + social */
.au-or {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-3);
  color: var(--c-muted);
  font-size: var(--fs-xs);
}

.au-or::before,
.au-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

.au-social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.au-social__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 46px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--c-border-strong);
  background: var(--c-surface);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition: border-color var(--t-base) var(--ease-out);
}

.au-social__btn:hover {
  border-color: var(--c-navy);
}

.au-social__btn svg {
  width: 20px;
  height: 20px;
}

.au-switch {
  margin-top: var(--sp-4);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  text-align: center;
}

.au-switch a,
.au-switch .au-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--c-text);
  font-weight: var(--fw-bold);
}

.au-switch .icon {
  width: 15px;
  height: 15px;
}

.au-preview {
  display: flex;
  gap: var(--sp-2);
  margin-top: auto;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--c-tile);
  color: var(--c-text-2);
  font-size: var(--fs-xs);
}

.au-switch + .au-preview,
.au-form + .au-switch + .au-preview {
  margin-top: var(--sp-5);
}

.au-preview .icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--c-gold);
}

/* ---------- Sign-up steps ---------- */

.au-steps {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  list-style: none;
}

.au-steps li {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 6px;
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.au-steps li:not(:last-child)::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--c-border-strong);
}

.au-steps li.is-done::after {
  background: var(--c-yellow);
}

.au-steps span {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--c-border-strong);
}

.au-steps .icon {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}

.au-steps li.is-current,
.au-steps li.is-done {
  color: var(--c-text);
}

.au-steps li.is-current span {
  border-color: var(--c-yellow);
  background: var(--c-yellow);
  color: var(--c-navy);
}

.au-steps li.is-done span {
  border-color: var(--c-navy);
  background: var(--c-navy);
  color: var(--c-yellow);
}

.au-chips {
  display: flex;
  gap: var(--sp-2);
}

.au-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-pill);
  border: 1.5px solid var(--c-border-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
}

.au-chip input:checked + span {
  border-color: var(--c-yellow);
  background: var(--c-yellow);
  font-weight: var(--fw-semibold);
}

.au-perks {
  display: grid;
  gap: var(--sp-2);
}

.au-perks > div {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--c-yellow-tint);
  border: 1px solid var(--c-yellow-soft);
  font-size: var(--fs-xs);
}

.au-perks .icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 50%;
  background: var(--c-yellow);
  color: var(--c-navy);
}

.au-perks span {
  display: grid;
  color: var(--c-text-2);
}

.au-perks strong {
  color: var(--c-text);
  font-size: var(--fs-sm);
}

.au-actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.au-next {
  flex: 1;
}

.au-back {
  background: var(--c-surface);
  border: 1.5px solid var(--c-border-strong);
  color: var(--c-text);
  box-shadow: none;
}

.au-back .icon {
  width: 18px;
  height: 18px;
}

.au-skip {
  justify-self: center;
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
}

/* ---------- OTP boxes ---------- */

.au-otp {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-2);
}

.au-otp input {
  width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1.15;
  border-radius: var(--r-md);
  border: 1.5px solid var(--c-border-strong);
  background: var(--c-surface-2);
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  text-align: center;
  caret-color: var(--c-gold);
}

.au-otp input:focus {
  outline: none;
  border-color: var(--c-yellow);
  box-shadow: 0 0 0 3px rgba(252, 210, 6, 0.25);
  background: var(--c-surface);
}

/* ---------- Tablet & phones ---------- */

@media (max-width: 899.98px) {
  .au {
    grid-template-columns: minmax(0, 1fr);
    max-width: 480px;
  }
  .au-brand {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .au-page {
    padding-block: var(--sp-4) var(--sp-8);
  }
  .au {
    border: 0;
    box-shadow: none;
    background: none;
  }
  .au-card {
    padding: var(--sp-2) 0 0;
  }
}

/* "Don't have an account? Sign Up" — the action stands out in yellow */
.au-switch a[href^="signup"],
.au-switch a[href^="signin"] {
  margin-left: 4px;
  padding: 3px 14px;
  border-radius: var(--r-pill);
  background: var(--c-yellow);
  color: var(--c-navy);
  box-shadow: var(--sh-btn);
  transition: background-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}

.au-switch a[href^="signup"]:hover,
.au-switch a[href^="signin"]:hover {
  background: var(--c-yellow-hover);
  transform: translateY(-1px);
}