/* ==========================================================================
   Serath2 — authentication pages   css/auth.css
   Belépés (/belepes) · Regisztráció (/regisztracio) · the register result page
   Loaded AFTER css/serath2.css, so it owns these pages completely.

   Why this file exists: the legacy pages put the form inside
   .inner-form-border > .inner-form-box, which resets padding to 0 and is not
   in the old ".content ... {padding:18px 20px}" list — so the inputs rendered
   flush against the card border while the <h2> sat 20px inside it, the submit
   was a ~115px stub under 542px-wide fields, and the card <h3> used
   justify-content:space-between with the secondary link FIRST, which pushed
   the title to the right edge. These pages now use their own markup.
   ========================================================================== */

.auth{max-width:470px;margin:0 auto}

.auth-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  backdrop-filter:blur(6px);
  overflow:hidden;
}

/* ------------------------------------------------------------------- head */
.auth-head{
  padding:26px 28px 22px;
  text-align:center;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(169,116,255,.15),transparent);
}
.auth-head h1{
  margin:0;
  font-family:var(--fd);
  font-size:1.5rem;font-weight:700;color:#fff;letter-spacing:.4px;
}
.auth-head p{margin:9px 0 0;color:var(--muted);font-size:.87rem;line-height:1.5}

/* ------------------------------------------------------------------- form */
.auth-form{padding:24px 28px 26px}

/* font-size here neutralises the legacy "form label{font-size:.84rem}" rule,
   which otherwise leaks into the label wrapper (its children set their own) */
.auth-field{display:block;margin:0 0 16px;font-size:1rem}
.auth-field:last-of-type{margin-bottom:0}
.auth-field > span{
  display:block;margin:0 0 7px;
  font-size:.81rem;font-weight:600;letter-spacing:.03em;
  color:var(--violet-soft);
}
.auth-field input{
  width:100%;
  padding:.78em .9em;
  border:1px solid var(--border);
  border-radius:10px;
  background:rgba(0,0,0,.42);
  color:var(--text);
  font-family:var(--fb);font-size:.96rem;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.auth-field input::placeholder{color:rgba(154,144,180,.7)}
.auth-field input:hover{border-color:rgba(169,116,255,.42)}
.auth-field input:focus{
  outline:0;
  border-color:var(--violet);
  background:rgba(0,0,0,.56);
  box-shadow:0 0 0 3px rgba(169,116,255,.18);
}
/* helper line under a field */
.auth-field em{
  display:block;margin:6px 0 0;
  color:var(--muted);font-size:.75rem;font-style:normal;line-height:1.45;
}
/* mark a field the browser considers invalid, but only once touched */
.auth-field input:not(:placeholder-shown):invalid{border-color:rgba(255,120,120,.55)}

/* two fields side by side (jelszó / jelszó újra) */
.auth-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 16px}
.auth-row .auth-field{margin:0}
@media(max-width:620px){
  .auth-row{grid-template-columns:1fr;gap:0}
  .auth-row .auth-field{margin:0 0 16px}
}

/* --------------------------------------------------------------- controls */
.auth-submit{
  /* display:block (not flex) so the SAME rule centres both an
     <input type=submit> and an <a> used as a button */
  display:block;
  width:100%;margin-top:20px;
  padding:.92em 1.2em;
  border:1px solid transparent;border-radius:11px;
  background:linear-gradient(180deg,var(--violet),var(--violet-deep));
  color:#fff;font-family:var(--fb);font-size:1rem;font-weight:700;
  text-decoration:none;text-align:center;cursor:pointer;
  box-shadow:0 14px 28px -16px var(--violet);
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
.auth-submit:hover{
  filter:brightness(1.09);transform:translateY(-1px);color:#fff;
  box-shadow:0 18px 32px -16px var(--violet);
}
.auth-submit:active{transform:translateY(0)}

/* The legacy stylesheet styles the submit BUTTON BY ITS ID:
     #submitBtn{display:inline-flex;width:auto;padding:.85em 1.6em}
   An id selector (1,0,0) outranks a class (0,1,0), which left the submit a
   ~115px stub under 412px-wide fields. Matching the id too (1,1,0) wins. */
#submitBtn.auth-submit{
  display:block;
  width:100%;
  padding:.92em 1.2em;
  font-size:1rem;
  text-align:center;
}

.auth-note{
  margin:16px 0 0;text-align:center;
  color:var(--muted);font-size:.77rem;line-height:1.6;
}
.auth-note a{color:var(--violet-soft);border-bottom:1px dotted rgba(201,166,255,.45)}
.auth-note a:hover{color:#fff;border-bottom-color:#fff}

/* ------------------------------------------------------ alerts / results */
.auth-alert{
  margin:0 0 18px;padding:12px 15px;
  border:1px solid rgba(255,120,120,.42);
  border-left:3px solid #ff7878;
  border-radius:10px;
  background:rgba(255,90,90,.12);
  color:#ffd9d9;font-size:.85rem;line-height:1.55;
}
.auth-alert strong{color:#fff}
.auth-alert.ok{
  border-color:rgba(110,240,160,.42);border-left-color:#5ee08a;
  background:rgba(80,240,140,.11);color:#d8ffe8;
}
.auth-alert.ok strong{color:#fff}

/* neutral / informational variant — used by the "ItemShop is closed during the
   beta" notice so it does not read as an error */
.auth-alert.info{
  border-color:rgba(169,116,255,.45);border-left-color:var(--violet);
  background:rgba(169,116,255,.11);color:#e7ddff;
}
.auth-alert.info strong{color:#fff}

.auth-list{margin:0 0 4px;padding:0;list-style:none}
.auth-list li{
  display:flex;justify-content:space-between;gap:14px;
  padding:9px 2px;font-size:.88rem;color:var(--muted);
  border-bottom:1px dashed rgba(255,255,255,.08);
}
.auth-list li:last-child{border-bottom:0}
.auth-list b{color:var(--violet-soft);font-weight:600;word-break:break-all}

/* ------------------------------------------------------------------- foot */
.auth-foot{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
  padding:16px 28px;
  border-top:1px solid var(--border);
  background:rgba(0,0,0,.24);
}
.auth-foot span{color:var(--muted);font-size:.85rem}
.auth-link-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.62em 1.15em;
  border:1px solid var(--border);border-radius:10px;
  background:var(--surface-2);
  color:var(--violet-soft);
  font-size:.86rem;font-weight:600;text-decoration:none;
  transition:color .16s ease,border-color .16s ease,transform .16s ease;
}
.auth-link-btn:hover{color:#fff;border-color:var(--violet);transform:translateY(-1px)}

.auth-alt{margin:14px 0 0;text-align:center;font-size:.82rem}
.auth-alt a{color:var(--muted);border-bottom:1px dotted rgba(154,144,180,.5)}
.auth-alt a:hover{color:var(--violet-soft);border-bottom-color:var(--violet-soft)}

/* --------------------------------------------------------- small screens */
@media(max-width:620px){
  .auth-head{padding:22px 20px 18px}
  .auth-head h1{font-size:1.32rem}
  .auth-form{padding:20px 20px 22px}
  .auth-foot{padding:14px 20px}
}

/* --------------------------------------------------------- accessibility */
.auth-field input:focus-visible,
.auth-submit:focus-visible,
.auth-link-btn:focus-visible{
  outline:2px solid var(--violet);outline-offset:2px;
}
@media(prefers-reduced-motion:reduce){
  .auth-submit,.auth-link-btn,.auth-field input{transition:none}
  .auth-submit:hover,.auth-link-btn:hover{transform:none}
}