/* auth.css — scoped styles for login/register
   Uses your existing tokens where possible. */

:root{
  --blue: #3396D3;
  --cream: #FFF0CE;
  --gray: #EEEEEE;
  --ink: #0E2233;
  --ink-60: rgba(14,34,51,.6);
  --ring: rgba(51,150,211,.35);
}

.auth-wrap{
  min-height: clamp(60vh, 70vh, 78vh);
  display: grid;
  place-items: start center;
  padding: 40px 16px 64px;
  background: var(--gray);
}

.auth-card{
  width: min(680px, 96vw);
  background: #fff;
  border: 1px solid rgba(14,34,51,.12);
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(14,34,51,.10);
  padding: clamp(18px, 2.8vw, 28px);
}

.auth-header{ margin-bottom: 12px; }
.auth-title{
  margin: 0 0 4px 0;
  font: 800 clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem)/1.2 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
}
.auth-sub{
  margin: 0;
  color: var(--ink-60);
  font: 400 0.98rem/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.alert{
  padding: .75rem .9rem;
  border-radius: 10px;
  margin: 12px 0 14px;
  font: 600 .96rem/1.4 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.alert-error{
  background: #fff2f2;
  color: #7a1111;
  border: 1px solid #f1c7c7;
}
.alert-success{
  background: #f1fff5;
  color: #0f6b2a;
  border: 1px solid #bfe7c9;
}

.auth-form{ margin-top: 6px; }
.form-row{ margin: 12px 0; }

.form-label{
  display:block;
  font: 700 .94rem/1.25 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  margin-bottom: 6px;
}

.input{
  width: 100%;
  height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(14,34,51,.18);
  background: #fff;
  color: var(--ink);
  font: 600 1rem/1.2 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus{
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--ring);
}

.input-with-btn{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.ghost-btn{
  height: 44px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid rgba(14,34,51,.18);
  border-radius: 10px;
  color: var(--ink);
  font: 700 .92rem/1 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.ghost-btn:hover{ background: var(--gray); transform: translateY(-1px); }
.ghost-btn:focus-visible{
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--ring);
}

.hint{
  display:block;
  margin-top: 6px;
  font: 500 .85rem/1.4 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink-60);
}

.form-actions{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin-top: 16px;
}

.btn-primary{
  background: var(--blue);
  color: #fff;
  border: 1px solid rgba(14,34,51,.12);
  font: 800 1rem/1 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(51,150,211,.25); }
.btn-primary:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

.btn-link{
  color: var(--blue);
  text-decoration: none;
  font: 700 .95rem/1 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.btn-link:hover{ text-decoration: underline; text-underline-offset: 3px; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Input + icon button layout */
.input-with-btn{
  position: relative;
}
.pw-toggle{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 38px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-60, rgba(14,34,51,.6));
  border-radius: 8px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, transform .12s ease;
}
.pw-toggle:hover{ color: var(--ink, #0E2233); background: rgba(14,34,51,.06); }
.pw-toggle:focus-visible{
  outline: 3px solid rgba(51,150,211,.45);
  outline-offset: 2px;
}
.pw-toggle .icon-eye,
.pw-toggle .icon-eye-off{
  width: 20px;
  height: 20px;
}

/* Default: show 'eye', hide 'eye-off' */
.pw-toggle .icon-eye-off{ display: none; }

/* When active (password visible), swap icons */
.pw-toggle.is-on .icon-eye{ display: none; }
.pw-toggle.is-on .icon-eye-off{ display: inline; }

/* Make room on the right so the icon doesn’t overlap text */
.input-with-btn > .input{
  padding-right: 44px;
}

/* ---- Modal basics ---- */
.modal-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
}
.modal-backdrop.is-open{ display: flex; }

.modal{
  background: #fff;
  color: #0E2233;
  width: min(560px, 96vw);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  padding: 20px 18px;
  animation: modal-in .22s ease-out both;
}
@keyframes modal-in { from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:translateY(0);} }

.modal-title{
  margin: 0 0 6px;
  font-weight: 800;
  font-size: 1.25rem;
}
.modal-text{
  margin: 0 0 14px;
  line-height: 1.5;
  color: rgba(14,34,51,.85);
}
.modal-actions{
  display: flex; gap: 10px; flex-wrap: wrap;
}

/* Buttons (reuse auth styles if you have them) */
.btn-primary{
  background: #3396D3;
  color: #fff;
  border: 1px solid rgba(14,34,51,.12);
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-primary:hover{ filter: brightness(0.96); }

.btn-outline{
  background: #fff;
  color: #0E2233;
  border: 1px solid rgba(14,34,51,.2);
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-outline:hover{ background: #f8f8f8; }

.btn-link{
  background: transparent;
  border: 0;
  color: #3396D3;
  padding: 8px 2px;
  font-weight: 700;
  cursor: pointer;
}

/* Accessibility focus */
.modal :is(a,button):focus-visible{
  outline: 3px solid rgba(51,150,211,.45);
  outline-offset: 3px;
  border-radius: 10px;
}