/* ==========================================================================
   PodUp — Forgot password
   Scoped under .pu-reset. Same tokens, type scale and media card as the login
   page, so the two read as one flow. Colours live only in the token block.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body { margin: 0; background: #0A0A0A; overflow-x: hidden; }

.pu-reset {
  /* Accent — the one CTA colour the page is built around */
  --pu-accent:        #B0842C;
  --pu-accent-hover:  #B0842C;
  --pu-cta-bg:        linear-gradient(90deg, #E2C147 0%, #C8A23C 49.52%, #F1D483 100%);
  --pu-cta-ink:       #241C05;
  --pu-cta-shadow:    0 8px 22px -10px rgba(201, 162, 39, .55);
  --pu-cta-shadow-hi: 0 14px 28px -12px rgba(224, 190, 93, .65);
  --pu-focus:         0 0 0 4px rgba(224, 190, 93, .22);

  /* Surfaces & text */
  --pu-page:        #0A0A0A;
  --pu-surface:     #141414;
  --pu-field:       #1B1B1B;
  --pu-field-hover: #232323;
  --pu-line:        #2B2B2B;
  --pu-line-strong: #3D3A33;
  --pu-heading:     #FFFFFF;
  --pu-ink:         #D1D1D1;
  --pu-ink-soft:    #D1D1D1;
  --pu-muted:       #D1D1D1;
  --pu-placeholder: #6A655D;
  --pu-error-bg:    rgba(240, 68, 56, .12);
  --pu-error-line:  rgba(240, 68, 56, .32);
  --pu-error-ink:   #FDA29B;

  /* Media panel */
  --pu-stage-bg: radial-gradient(120% 120% at 20% 0%, #3A2E10 0%, #14110A 55%, #050505 100%);
  --pu-stage-scrim:
    linear-gradient(180deg, rgba(8, 6, 2, .52) 0%, rgba(8, 6, 2, .14) 35%, rgba(6, 5, 2, .90) 100%),
    linear-gradient(100deg, rgba(242, 218, 151, .12) 0%, rgba(201, 162, 39, .20) 100%);
  --pu-stage-w: 600px;
  --pu-stage-h: 600px;

  /* System */
  --pu-radius:    8px;
  --pu-radius-lg: 24px;
  --pu-font:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pu-display:   "Outfit", "Inter", sans-serif;

  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .86fr);
  padding: 14px;
  background: var(--pu-page);
  font-family: var(--pu-font);
  color: var(--pu-ink);
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------- Form side */

.pu-reset .pu-reset__pane {
  display: flex;
  flex-direction: column;
  padding: 26px 32px 22px;
  min-width: 0;
}

.pu-reset .pu-reset__brand { display: inline-flex; align-items: center; text-decoration: none; align-self: flex-start; }
.pu-reset .pu-reset__logo { display: block; height: 40px; width: auto; }

.pu-reset .pu-reset__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}
.pu-reset .pu-reset__card { width: 100%; max-width: 392px; }

.pu-reset .pu-reset__title {
  font-family: var(--pu-display);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.08;
  margin: 0 0 8px;
  color: var(--pu-heading);
}
.pu-reset .pu-reset__subtitle {
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.55;
  color: #D1D1D1;
}
.pu-reset .pu-reset__subtitle strong { color: var(--pu-ink); font-weight: 600; overflow-wrap: anywhere; }

.pu-reset .pu-reset__link {
  color: var(--pu-accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--pu-accent) 38%, transparent);
  padding-bottom: 1px;
  transition: border-color .15s ease, color .15s ease;
}
.pu-reset .pu-reset__link:hover { color: var(--pu-accent-hover); border-color: currentColor; }

/* Back to login */

.pu-reset .pu-reset__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  background: none;
  font: 500 14px/1 var(--pu-font);
  color: var(--pu-muted);
  text-decoration: none;
  cursor: pointer;
  transition: color .15s ease;
}
.pu-reset .pu-reset__back:hover { color: var(--pu-accent); }
.pu-reset .pu-reset__back:focus-visible { outline: 2px solid var(--pu-accent); outline-offset: 3px; border-radius: 6px; }
.pu-reset .pu-reset__back svg { width: 16px; height: 16px; transition: transform .15s ease; }
.pu-reset .pu-reset__back:hover svg { transform: translateX(-2px); }

/* Fields */

.pu-reset .pu-reset__field { margin-bottom: 22px; }

.pu-reset .pu-reset__label {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--pu-ink-soft);
  margin-bottom: 7px;
}

.pu-reset .pu-reset__input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  font: 500 15px/1 var(--pu-font);
  color: var(--pu-ink);
  background: var(--pu-field);
  border: 1px solid transparent;
  border-radius: var(--pu-radius);
  outline: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.pu-reset .pu-reset__input::placeholder { color: var(--pu-placeholder); font-weight: 400; }
.pu-reset .pu-reset__input:hover { background: var(--pu-field-hover); }
.pu-reset .pu-reset__input:focus {
  background: var(--pu-surface);
  border-color: var(--pu-accent);
  /* box-shadow: var(--pu-focus); */
}

/* Buttons */

.pu-reset .pu-reset__submit {
  position: relative;
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: 100px;
  background: var(--pu-cta-bg);
  background-size: 150% 100%;
  color: var(--pu-cta-ink);
  font: 600 16px/1 var(--pu-font);
  letter-spacing: .01em;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--pu-cta-shadow);
  transition: background-position .45s ease, transform .12s ease, box-shadow .2s ease;
}
.pu-reset .pu-reset__submit:hover { background-position: 100% 0; box-shadow: var(--pu-cta-shadow-hi); }
.pu-reset .pu-reset__ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  border: 1px solid var(--pu-line);
  border-radius: var(--pu-radius);
  background: var(--pu-surface);
  font: 600 15px/1 var(--pu-font);
  color: var(--pu-ink);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pu-reset .pu-reset__ghost:hover:not(:disabled) { background: #1F1F1F; border-color: var(--pu-line-strong); }
.pu-reset .pu-reset__ghost:focus-visible { outline: 2px solid var(--pu-accent); outline-offset: 2px; }
.pu-reset .pu-reset__ghost:disabled { color: var(--pu-muted); cursor: default; }
.pu-reset .pu-reset__ghost[data-busy="true"] { pointer-events: none; color: transparent; position: relative; }
.pu-reset .pu-reset__ghost[data-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2.5px solid color-mix(in srgb, var(--pu-accent) 35%, transparent);
  border-top-color: var(--pu-accent);
  border-radius: 50%;
  animation: pu-spin .7s linear infinite;
}

.pu-reset .pu-reset__seal {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--pu-accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--pu-accent) 26%, transparent);
  color: var(--pu-accent);
}
.pu-reset .pu-reset__seal svg { width: 25px; height: 25px; }

.pu-reset .pu-reset__hint {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--pu-muted);
  text-align: center;
}

.pu-reset .pu-reset__stack { display: grid; gap: 12px; }
.pu-reset .pu-reset__submit:active { transform: translateY(1px); }
.pu-reset .pu-reset__submit:focus-visible { outline: 2px solid var(--pu-accent); outline-offset: 3px; }
.pu-reset .pu-reset__submit[data-busy="true"] { pointer-events: none; color: transparent; }
.pu-reset .pu-reset__submit[data-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  border: 2.5px solid color-mix(in srgb, var(--pu-cta-ink) 35%, transparent);
  border-top-color: var(--pu-cta-ink);
  border-radius: 50%;
  animation: pu-spin .7s linear infinite;
}
@keyframes pu-spin { to { transform: rotate(360deg); } }

/* Error */

.pu-reset .pu-reset__error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 11px 14px;
  border-radius: 11px;
  background: var(--pu-error-bg);
  border: 1px solid var(--pu-error-line);
  color: var(--pu-error-ink);
  font-size: 13.5px;
  font-weight: 500;
}

/* Footer */

.pu-reset .pu-reset__footer { display: flex; justify-content: center; gap: 26px; font-size: 13px; }
.pu-reset .pu-reset__footer a {
  color: var(--pu-muted);
  text-decoration: none;
  transition: color .15s ease;
}
.pu-reset .pu-reset__footer a:hover { color: var(--pu-accent); }

/* -------------------------------------------------------------- Media side */

.pu-reset .pu-reset__stage {
  position: relative;
  border-radius: var(--pu-radius-lg);
  overflow: hidden;
  background: var(--pu-stage-bg);
  isolation: isolate;

  width: var(--pu-stage-w);
  height: var(--pu-stage-h);
  max-width: 100%;
  justify-self: start;   /* swap to `center` to sit mid-column */
  align-self: center;
}

.pu-reset .pu-reset__video { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pu-reset .pu-reset__video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  width: auto;
  aspect-ratio: 16 / 9;
  min-width: 100%;
  min-height: 100%;
  border: 0;
}

.pu-reset .pu-reset__scrim { position: absolute; inset: 0; background: var(--pu-stage-scrim); }

.pu-reset .pu-reset__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 34px 34px 30px;
  color: #fff;
}

.pu-reset .pu-reset__headline {
  font-family: var(--pu-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.22;
  margin: 0 0 14px;
  max-width: 22ch;
  text-wrap: balance;
  color: #fff;
}
.pu-reset .pu-reset__copy {
  margin: 0;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .78);
  text-wrap: balance;
}

/* ------------------------------------------------------------- Responsive */

@media (max-width: 1080px) {
  .pu-reset {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .pu-reset .pu-reset__stage { display: none; }

  .pu-reset .pu-reset__pane {
    padding-left:  max(22px, env(safe-area-inset-left));
    padding-right: max(22px, env(safe-area-inset-right));
    padding-top: 24px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
  .pu-reset .pu-reset__body { padding: 28px 0 36px; }

  /* 16px keeps iOS Safari from zooming the page on field focus */
  .pu-reset .pu-reset__input { font-size: 16px; }
}

@media (max-width: 600px) {
  .pu-reset .pu-reset__card { max-width: 100%; }
  .pu-reset .pu-reset__logo { height: 34px; }
  .pu-reset .pu-reset__title { font-size: 28px; }
  .pu-reset .pu-reset__subtitle { margin-bottom: 24px; font-size: 14.5px; }
  .pu-reset .pu-reset__back { margin-bottom: 18px; }
  .pu-reset .pu-reset__footer { gap: 20px; }
}

@media (max-width: 360px) {
  .pu-reset .pu-reset__title { font-size: 26px; }
  .pu-reset .pu-reset__pane { padding-left: 18px; padding-right: 18px; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .pu-reset .pu-reset__body { padding: 20px 0 28px; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .pu-reset *, .pu-reset *::before, .pu-reset *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------ Laravel integration only */
/* Nothing above this line was changed. These rules exist only because:
   1) app.css (loaded earlier in the layout) sets "html body" background,
      which is more specific than this design's plain "body" selector and
      would otherwise win the cascade regardless of load order.
   2) the real flow is server-rendered, not the original mock's JS step
      switcher: ForgotPasswordController's default sendResetLinkEmail()
      either redirects back with session('status') on success, or with
      $errors on failure — both shown here as a single non-JS status
      banner using the existing --pu-accent token for the success case
      (the mock had no success-banner style since it faked success with
      a whole second "check your email" panel instead). */
html body { background: #0A0A0A; color: #EDEAE3; }
.pu-reset .pu-reset__status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 11px 14px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--pu-accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--pu-accent) 30%, transparent);
  color: var(--pu-accent-hover);
  font-size: 13.5px;
  font-weight: 500;
}
.pu-reset .pu-reset__status svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}