/* ===========================
   VreauAjutor.ro — auth.css
   Modal autentificare "OLX-like"
   =========================== */

:root{
  --auth-bg: #ffffff;
  --auth-text: #0f172a;
  --auth-muted:#64748b;
  --auth-border:#e6e8ec;
  --auth-shadow: 0 24px 60px rgba(16,24,40,.18);

  /* OLX accent (turquoise) */
  --auth-primary:#23e5db;
  --auth-primary-600:#12cfc4;

  --auth-pills:#f3f4f6;
  --auth-focus: rgba(35,229,219,.35);
}

/* ====== MODAL WRAPPER ====== */
#authModal{
  display:none;
  position:fixed; inset:0;
  background:rgba(6,11,21,.55);
  z-index: 9999;
}
#authModal .modal-content{
  width:min(540px, 92vw);
  margin: min(8vh,64px) auto;
  background:var(--auth-bg);
  color:var(--auth-text);
  border-radius:18px;
  border:1px solid var(--auth-border);
  box-shadow:var(--auth-shadow);
  padding:18px 18px 20px;
  position:relative;
}

/* ====== CLOSE BTN ====== */
#authModal .close{
  position:absolute; right:12px; top:10px;
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:10px;
  border:1px solid var(--auth-border);
  background:#fff; color:#334155;
  cursor:pointer;
  transition: background .2s;
}
#authModal .close:hover{ background:#f8fafc; }
#authModal .close:focus-visible{ outline:2px solid var(--auth-primary); }

/* ====== TAB STRIP ====== */
#authModal .tab-buttons{
  background:var(--auth-pills);
  border-radius:999px;
  padding:6px;
  gap:6px;
  display:flex;
  justify-content:space-around;
  margin-bottom:12px;
}
#authModal .tab-buttons button{
  border:0;
  background:transparent;
  color:#111827;
  padding:10px 14px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.2px;
  cursor:pointer;
}
#authModal .tab-buttons button.active{
  background:#fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  border:1px solid var(--auth-border);
}
#authModal .tab-buttons button:focus-visible{ outline:2px solid var(--auth-primary); }

/* ====== FORM FIELDS ====== */
#authModal .tab-content{
  margin-top:12px;
}
#authModal input[type="text"],
#authModal input[type="email"],
#authModal input[type="password"]{
  width:100%;
  padding:12px 14px;
  border:1px solid #dfe3ea;
  border-radius:12px;
  background:#fff;
  font-size:16px;
  margin-bottom:10px;
  transition:border-color .18s, box-shadow .18s;
}
#authModal input:focus{
  outline:none;
  border-color: var(--auth-primary);
  box-shadow: 0 0 0 4px var(--auth-focus);
}

/* ====== CTA BUTTONS ====== */
#authModal .tab-content button[type="button"],
#authModal .tab-content button[type="submit"]{
  width:100%;
  padding:12px 16px;
  border-radius:12px;
  border:0;
  font-weight:800;
  cursor:pointer;
  background:var(--auth-primary);
  color:#002f34; /* contrast bun pe turcoaz */
  transition: filter .15s ease, transform .03s ease;
}
#authModal .tab-content button:hover{ filter:brightness(1.02); }
#authModal .tab-content button:active{ transform:translateY(1px); }
#authModal .tab-content button:focus-visible{ outline:2px solid #002f34; }

/* ====== GOOGLE BUTTON ====== */
#authModal .google-btn{
  margin-top:10px;
  background:#fff !important;
  color:#111827 !important;
  border:1px solid #dfe3ea !important;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:12px;
  padding:12px 14px;
  font-weight:800;
  cursor:pointer;
}
#authModal .google-btn .google-icon{ width:18px; height:18px; }
#authModal .google-btn:hover{ background:#f9fafb !important; }

/* ====== SEPARATOR „SAU” ====== */
#authModal .or{
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0;
  color:#94a3b8;
  font-weight:800;
}
#authModal .or::before,
#authModal .or::after{
  content:"";
  height:1px;
  background:#e5e7eb;
  flex:1;
}

/* ====== TEXT MIC ====== */
#authModal .hint{ font-size:12px; color:var(--auth-muted); }
#authModal .small-link{
  font-size:13px;
  color:#0369a1;
  text-decoration:none;
}
#authModal .small-link:hover{ text-decoration:underline; }

/* ====== A11y + MOBILE ====== */
#authModal .sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
@media (max-width:480px){
  #authModal .modal-content{
    border-radius:16px;
    padding:16px 14px 18px;
  }
}