/* ======================================================
   Nipiognosi Auth (Login / Register) — FINAL
   - Uses same design tokens as site (so buttons match)
   - RTL safe (logical props + email LTR in RTL)
   - A11y: focus-visible, aria errors, reduced motion
   - Strong selectors to override theme/Elementor
====================================================== */

/* ---------- DESIGN TOKENS (safe fallback for auth pages) ---------- */
/* If your site already defines these globally, it’s still OK:
   same names => same values (or your global ones win if later). */
:root{
  --nipio-bg:#f4f7fb;
  --nipio-card:#ffffff;

  --nipio-border: rgba(15,23,42,0.08);
  --nipio-border-strong: rgba(15,23,42,0.18);

  --nipio-text:#0f172a;
  --nipio-text-soft:#64748b;

  --nipio-accent:#1e3a8a;
  --nipio-accent-hover:#1d4ed8;
  --nipio-accent-soft:#e0e7ff;

  --nipio-radius-lg:20px;
  --nipio-radius-md:14px;
  --nipio-radius-sm:10px;

  --nipio-shadow:0 8px 24px rgba(15,23,42,.05);
  --nipio-shadow-hover:0 18px 40px rgba(15,23,42,.10);
}

/* ---------- WRAP ---------- */
.nipio-auth-page{
  max-width: 440px;
  margin: 56px auto;
  padding: 26px;
  border-radius: var(--nipio-radius-lg);
  border: 1px solid var(--nipio-border);
  background: var(--nipio-card);
  box-shadow: var(--nipio-shadow);
  color: var(--nipio-text);
  font-family: system-ui,-apple-system,sans-serif;
}

/* Headings / text */
.nipio-auth-page h1{
  margin: 0 0 10px 0;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: .2px;
}

.nipio-auth-page p{
  margin: 0 0 16px 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--nipio-text-soft);
}

/* Avoid “empty” jump if JS is late */
.nipio-auth-page [data-i18n]:empty::before{ content:""; }

/* ---------- FORM ---------- */
.nipio-auth-page form{ margin-top: 14px; }

.nipio-auth-page label{
  display: block;
  margin: 0 0 6px 0;
  font-weight: 700;
  font-size: 14px;
  color: var(--nipio-text);
}

/* Inputs */
.nipio-auth-page input[type="email"],
.nipio-auth-page input[type="password"],
.nipio-auth-page input[type="text"]{
  width: 100%;
  box-sizing: border-box;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--nipio-border-strong);
  background: #fff;
  outline: none;
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 14px 0;
  color: var(--nipio-text);
}

.nipio-auth-page input::placeholder{ color: rgba(100,116,139,.8); }

/* Focus (A11y) */
.nipio-auth-page input:focus{
  border-color: rgba(30,58,138,0.45);
  box-shadow: 0 0 0 3px rgba(30,58,138,0.15);
}

.nipio-auth-page a:focus,
.nipio-auth-page button:focus{
  outline: none;
}

/* Prefer focus-visible */
.nipio-auth-page input:focus:not(:focus-visible),
.nipio-auth-page a:focus:not(:focus-visible),
.nipio-auth-page button:focus:not(:focus-visible){
  box-shadow: none;
}

.nipio-auth-page a:focus-visible,
.nipio-auth-page button:focus-visible{
  box-shadow: 0 0 0 3px rgba(30,58,138,0.18);
  border-radius: 12px;
}

/* ---------- PRIMARY CTA BUTTON (LOGIN / REGISTER) ---------- */
/* Your markup uses: <a class="nipio-auth-btn"> and <button class="nipio-auth-btn"> */
/* ==============================
   AUTH PRIMARY BUTTON – UNIFIED
============================== */

.nipio-auth-page{
  text-align:center;
}

.nipio-auth-page .nipio-auth-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:11px 28px !important;
  min-height:44px !important;

  border-radius:999px !important;

  background: var(--nipio-accent) !important;
  color:#fff !important;

  border:none !important;
  text-decoration:none !important;

  font-weight:700 !important;
  font-size:14px !important;
  line-height:1 !important;

  cursor:pointer !important;
  box-shadow:none !important;

  transition: background .2s ease, transform .15s ease;
}

.nipio-auth-page .nipio-auth-btn:hover{
  background: var(--nipio-accent-hover) !important;
  transform: translateY(-1px);
}

.nipio-auth-page .nipio-auth-btn:active{
  transform: translateY(0);
}

.nipio-auth-page .nipio-auth-btn:focus,
.nipio-auth-page .nipio-auth-btn:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 3px rgba(30,58,138,0.18) !important;
}

/* ---------- SECONDARY LINKS ---------- */
.nipio-auth-alt{
  margin-top: 16px;
  font-size: 14px;
  color: var(--nipio-text-soft);
}

.nipio-auth-alt a,
.nipio-auth-forgot a,
.nipio-auth-terms a{
  font-weight: 800;
  color: var(--nipio-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nipio-auth-alt a:hover,
.nipio-auth-forgot a:hover,
.nipio-auth-terms a:hover{
  color: var(--nipio-accent-hover);
}

/* Forgot / Terms text */
.nipio-auth-forgot{ margin: 12px 0 0; }
.nipio-auth-terms{
  margin: 12px 0 0;
  color: var(--nipio-text-soft);
  font-size: 13px;
  line-height: 1.45;
}

.nipio-auth-remember{
  margin: 6px 0 14px;
  font-size: 14px;
  color: var(--nipio-text-soft);
}

.nipio-auth-remember label{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:500;
  cursor:pointer;
}

.nipio-auth-remember input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color: var(--nipio-accent);
}

/* ---------- ERRORS (ARIA role="alert") ---------- */
.nipio-auth-errors{
  margin: 0 0 14px 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(214, 54, 56, 0.55);
  background: rgba(214, 54, 56, 0.08);
  color: rgba(15,23,42,0.92);
}

.nipio-auth-errors ul{
  margin: 0;
  padding-inline-start: 18px; /* logical: RTL/LTR */
}

.nipio-auth-errors li{ margin: 6px 0; }

/* ---------- RTL SUPPORT ---------- */
html[dir="rtl"] .nipio-auth-page{ text-align: right; }

html[dir="rtl"] .nipio-auth-page input[type="password"],
html[dir="rtl"] .nipio-auth-page input[type="text"]{
  direction: rtl;
}

/* Keep email LTR even in RTL UI */
html[dir="rtl"] .nipio-auth-page input[type="email"]{
  direction: ltr;
  text-align: left;
  unicode-bidi: plaintext;
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  .nipio-auth-page a.nipio-auth-btn,
  .nipio-auth-page button.nipio-auth-btn{
    transition: none !important;
  }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 520px){
  .nipio-auth-page{
    margin: 24px 12px;
    padding: 18px;
    border-radius: 16px;
  }

  .nipio-auth-page h1{
    font-size: 24px;
  }
}