/* =========================================================================
   FreshPen, login/register popup modal (2026-07-21).
   Markup: inc/auth-modal.php. Behaviour: assets/js/auth-modal.js.
   Same silver-accent design tokens as cart-drawer.css.
   ========================================================================= */

:root{
  --fp-ink:#09090b;
  --fp-paper:#fff;
  --fp-surface:#fafafa;
  --fp-line:#e4e4e7;
  --fp-muted:#71717a;
  --fp-silver:#c7c9ce;
  --fp-silver-light:#e9eaee;
  --fp-silver-deep:#8e9096;
}

.fp-authm-overlay{
  position:fixed;
  inset:0;
  background:rgba(9,9,11,.5);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease,visibility 0s linear .25s;
  z-index:10000;
}
.fp-authm-overlay.is-open{
  opacity:1;
  visibility:visible;
  transition:opacity .25s ease,visibility 0s;
}

.fp-authm{
  position:fixed;
  top:50%;
  left:50%;
  width:min(400px,calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  transform:translate(-50%,-46%) scale(.97);
  background:var(--fp-paper);
  border-radius:22px;
  box-shadow:0 30px 80px -20px rgba(9,9,11,.35);
  padding:32px 28px 28px;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1),visibility 0s linear .25s;
  z-index:10001;
}
.fp-authm.is-open{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%) scale(1);
  transition:opacity .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1),visibility 0s;
}

.fp-authm__close{
  position:absolute;
  top:16px;
  right:16px;
  width:32px;
  height:32px;
  border:none;
  border-radius:50%;
  background:var(--fp-surface);
  color:var(--fp-muted);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s,color .15s;
}
.fp-authm__close:hover{background:var(--fp-silver-light);color:var(--fp-ink);}

.fp-authm__social{margin-bottom:16px;}
.fp-authm__social .nsl-container{width:100%;}
.fp-authm__social .nsl-container-buttons{display:flex;flex-direction:column;gap:10px;}
.fp-authm__social a{text-decoration:none;}
.fp-authm__social .nsl-button{width:100%!important;height:48px!important;border-radius:9999px!important;border:1.5px solid var(--fp-line)!important;background:#fff!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;transition:background .15s,border-color .15s;}
.fp-authm__social .nsl-button:hover{background:var(--fp-surface)!important;border-color:var(--fp-silver)!important;}
.fp-authm__social .nsl-button-svg-container{width:18px!important;height:18px!important;flex:none;}
.fp-authm__social .nsl-button-svg-container svg{width:18px!important;height:18px!important;min-width:18px;flex-shrink:0;display:block;}
.fp-authm__social .nsl-button-label-container{font-size:14px!important;font-weight:500!important;color:#1f1f1f!important;font-family:Roboto,Arial,"Helvetica Neue",sans-serif!important;letter-spacing:.1px;}
.fp-authm__divider{display:flex;align-items:center;gap:12px;margin:0 0 18px;color:var(--fp-muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em;}
.fp-authm__divider::before,.fp-authm__divider::after{content:"";flex:1;height:1px;background:var(--fp-line);}
.fp-authm__mark{
  text-align:center;
  font-size:15px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--fp-ink);
  margin:0 0 20px;
}

.fp-authm__tabs{
  display:flex;
  background:var(--fp-surface);
  border-radius:9999px;
  padding:4px;
  margin-bottom:20px;
}
.fp-authm__tab{
  flex:1;
  height:38px;
  border:none;
  background:none;
  border-radius:9999px;
  font-size:13px;
  font-weight:700;
  color:var(--fp-muted);
  cursor:pointer;
  transition:background .18s,color .18s;
}
.fp-authm__tab.is-active{
  background:var(--fp-ink);
  color:#fff;
}

.fp-authm__msg{
  font-size:12.5px;
  line-height:1.5;
  padding:10px 12px;
  border-radius:10px;
  margin-bottom:16px;
}
.fp-authm__msg.is-error{background:#fdecec;color:#a3231f;}
.fp-authm__msg.is-success{background:#eef7ef;color:#1f7a3f;}

.fp-authm__panel{
  display:none;
  flex-direction:column;
}
.fp-authm__panel.is-active{
  display:flex;
}

.fp-authm__field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0 0 14px;
}
.fp-authm__field label{
  font-size:12px;
  font-weight:600;
  color:var(--fp-ink);
}
.fp-authm__field input{
  height:46px;
  padding:0 14px;
  border:1px solid var(--fp-line);
  border-radius:10px;
  background:var(--fp-surface);
  font-size:14px;
  color:var(--fp-ink);
  outline:none;
  transition:border-color .15s;
}
.fp-authm__field input:focus{border-color:var(--fp-ink);}

.fp-authm__hint{
  font-size:12.5px;
  color:var(--fp-muted);
  line-height:1.5;
  margin:0 0 16px;
}

.fp-authm__lost{
  text-align:right;
  margin:-6px 0 16px;
}
.fp-authm__lost a{
  font-size:12.5px;
  color:var(--fp-muted);
  text-decoration:underline;
}
.fp-authm__lost a:hover{color:var(--fp-ink);}

.fp-authm__submit{
  height:48px;
  border:none;
  border-radius:9999px;
  background:var(--fp-ink);
  color:#fff;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:opacity .15s;
}
.fp-authm__submit:hover{opacity:.88;}
.fp-authm__submit:disabled{opacity:.55;cursor:progress;}

body.fp-authm-open{overflow:hidden;}

@media (prefers-reduced-motion: reduce){
  .fp-authm,.fp-authm-overlay{transition:none;}
}