/* Font to match your other auth pages */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&display=swap");

/* =========================
   Scoped variables (rsp = reset page)
   ========================= */
.reset-page {
  --rsp-card:            rgba(255, 255, 255, 0.96);
  --rsp-text:            #0f172a;   /* slate-900 */
  --rsp-muted:           #475569;   /* slate-600 */
  --rsp-border:          #e5e7eb;   /* gray-200 */
  --lp-accent-alt:       #0f62fe;
  --rsp-accent:          #e71d36;   /* blue for focus & links */
  --rsp-accent-contrast: #ffffff;

  --rsp-radius:          14px;
  --rsp-field-height:    52px;
  --rsp-gap:             16px;
  --rsp-card-w:          420px;
  --rsp-card-pad:        22px;

  --rsp-shadow:          0 12px 28px rgba(15, 23, 42, 0.18);
  --rsp-font:            "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* =========================
   Scoped reset
   ========================= */
.reset-page, .reset-page * { box-sizing: border-box; }
.reset-page *:where(h1,h2,h3,h4,p,ul) { margin: 0; padding: 0; list-style: none; }

/* =========================
   Layout & background
   ========================= */
.reset-page {
  position: relative;
  isolation: isolate;
  min-height: 100svh;

  display: grid;
  grid-template-rows: auto;         /* single centered row */
  place-items: center;
  justify-items: center;
  row-gap: 18px;

  padding: 20px 16px 28px;
  font-family: var(--rsp-font);
}

/* Background image via image_tag; never intercept clicks */
.reset-page .reset-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* Soft overlay for readability (behind card) */
.reset-page::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background: linear-gradient(
    180deg,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.55) 20%,
    rgba(255,255,255,0.65) 100%
  ); */
  z-index: 1;
  pointer-events: none;
}

/* =========================
   Card
   ========================= */
.reset-page .reset-card {
  position: relative;
  z-index: 2;                       /* above overlay */
  width: 100%;
  max-width: var(--rsp-card-w);
  background: var(--rsp-card);
  border: 1px solid var(--rsp-border);
  border-radius: var(--rsp-radius);
  box-shadow: var(--rsp-shadow);
  padding: calc(var(--rsp-card-pad) + 4px);
  backdrop-filter: blur(4px);

  display: grid;
  align-content: start;
  row-gap: 18px;                    /* header ↔ errors ↔ form spacing */
}

/* =========================
   Headings
   ========================= */
.reset-page .reset-header { text-align: left; }   /* match login/registration left alignment */
.reset-page .reset-title   { font-size: 1.35rem; font-weight: 600; color: var(--rsp-text); }
.reset-page .reset-subtitle{ margin-top: 6px; font-size: 0.95rem; color: var(--rsp-muted); }

/* =========================
   Error summary (optional)
   ========================= */
.reset-page .reset-errors {
  border: 1px solid #fecaca;        /* red-200 */
  background: #fff1f2;              /* rose-50 */
  color: #7f1d1d;                   /* red-900 */
  border-radius: 10px;
  padding: 10px 12px;
}
.reset-page .errors-title { font-size: 0.95rem; font-weight: 600; margin-bottom: 6px; }
.reset-page .errors-list li { font-size: 0.9rem; line-height: 1.4; }

/* =========================
   Form & fields
   ========================= */
.reset-page .reset-form { display: grid; gap: var(--rsp-gap); }

.reset-page .reset-field {
  position: relative;
  height: var(--rsp-field-height);
}

/* Input */
.reset-page .reset-input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 2px solid var(--rsp-border);
  border-radius: 10px;
  font: inherit;
  color: var(--rsp-text);
  padding: 0.75rem 0.95rem;          /* balanced vertical padding (centered caret) */
  background: #fff;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.reset-page .reset-input:hover { border-color: #bfd3ff; }
.reset-page .reset-input:focus {
  border-color: var(--rsp-accent);
  box-shadow: 0 0 0 3px rgba(15, 98, 254, 0.15);
}

/* Reuse your palette */
.reset-page .reset-input.is-invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* =========================
   Floating label (robust)
   ========================= */
.reset-page .reset-field .reset-label {
  position: absolute;
  left: 0.75rem;
  top: 0.95rem;
  padding: 0 0.35rem;
  background: #fff;
  color: var(--rsp-muted);
  font-size: 0.95rem;
  pointer-events: none;
  transition: transform 160ms ease, top 160ms ease, left 160ms ease, font-size 160ms ease, color 160ms ease;
}

/* Float when field focused (works for invalid too) */
.reset-page .reset-field:focus-within .reset-label {
  top: -0.55rem;
  left: 0.6rem;
  font-size: 0.78rem;
  color: var(--rsp-accent);
}

/* Keep label floated when there’s content */
.reset-page .reset-field .reset-input:not(:placeholder-shown) + .reset-label {
  top: -0.55rem;
  left: 0.6rem;
  font-size: 0.78rem;
  color: var(--rsp-accent);
}

/* Per-field invalid visuals (if you add .is-invalid) */
.reset-page .reset-field.is-invalid .reset-input { border-color: #ef4444; }
.reset-page .reset-field.is-invalid:focus-within .reset-label,
.reset-page .reset-field.is-invalid .reset-input:not(:placeholder-shown) + .reset-label { color: #b91c1c; }

/* =========================
   Submit + meta link
   ========================= */
.reset-page .reset-submit {
  margin-top: 4px;
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 10px;
  background: var(--rsp-accent);
  color: var(--rsp-accent-contrast);
  font-weight: 600; font-size: 1rem;
  cursor: pointer;
  transition: filter .18s ease, transform .02s ease-in-out;
}
.reset-page .reset-submit:hover { filter: brightness(1.05); }
.reset-page .reset-submit:active { transform: translateY(1px); }

.reset-page .reset-meta {
  margin-top: 8px;
  text-align: center;
  color: var(--rsp-muted);
}
.reset-page .reset-link {
  color: var(--rsp-accent);
  text-decoration: none; font-weight: 600;
}
.reset-page .reset-link:hover { text-decoration: underline; }

/* =========================
   Responsiveness
   ========================= */
@media (max-width: 640px) {
  .reset-page { padding: 16px 12px 22px; }
  .reset-page .reset-card { padding: calc(var(--rsp-card-pad) + 2px); }
  .reset-page .reset-title { font-size: 1.25rem; }
  .reset-page .reset-subtitle { font-size: 0.9rem; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .reset-page { padding: 22px 20px 26px; }
  .reset-page .reset-card { max-width: 520px; }
}

@media (min-width: 1025px) {
  .reset-page .reset-card {
    width: 460px;      /* set to your preferred fixed desktop width */
    max-width: none;
  }
}