/* =========================================================
   AUTH
========================================================= */
.auth-wrap{
  --auth-panel-h:610px;
  min-height: calc(100vh - var(--header-h));
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 16px;
  background: linear-gradient(180deg, #f5f5f5, #ededed);
}

/* BAZA – bez !important */
.auth-card{
  width:100%;
  margin:0 auto;
}

/* wariant jedno-kaflowy (logowanie/reset/aktywacja) */
.auth-card--single{
  max-width:680px;
  display:block;
}

/* panel */
.auth-panel{
  border-radius:18px;
  background:#fff;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
  perspective: 1200px;
  overflow:hidden;
  position:relative;
}

/* =========================================================
   FLIP
========================================================= */
.flip{
  position:relative;
  width:100%;
  height:100%;
  min-height:var(--auth-panel-h);
  transform-style:preserve-3d;
  transition: transform .8s cubic-bezier(.2,.8,.2,1);

  -webkit-transform-style: preserve-3d;
  will-change: transform;
}
.flip.is-register{
  transform: rotateY(180deg);
}
.flip.is-forgot{ transform: rotateX(180deg); }

.face{
  position:absolute;
  inset:0;
  padding:28px 26px 30px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: translateZ(0);

  /* ukrywanie nieaktywnych */
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.face.register{ transform: rotateY(180deg); }
.face.forgot{ transform: rotateX(180deg); }

.flip:not(.is-register):not(.is-forgot) .face.login{
  opacity:1; visibility:visible; pointer-events:auto; z-index:3;
}
.flip.is-register .face.register{
  opacity:1; visibility:visible; pointer-events:auto; z-index:3;
}
.flip.is-forgot .face.forgot{
  opacity:1; visibility:visible; pointer-events:auto; z-index:3;
}

.face.login, .face.register, .face.forgot{ z-index:1; }

/* =========================================================
   TYPO + FORM
========================================================= */
.auth-title{
  margin:0 0 6px;
  font-size:22px;
  color:#111;
}
.auth-sub{
  margin:0 0 16px;
  color:#666;
  font-size:13px;
}

.form-row{ margin: 10px 0; }
.form-row label{
  display:block;
  font-size:12px;
  color:#444;
  margin-bottom:6px;
}
.form-row input{
  width:100%;
  padding:12px 12px;
  border:1px solid #dedede;
  border-radius:12px;
  outline:none;
  background:#fbfbfb;
  transition: border .2s, box-shadow .2s;
}
.form-row input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
  background:#fff;
}

.auth-hint{
  margin:6px 0 0;
  color:#777;
  font-size:11px;
  line-height:1.45;
}

.row-split{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:10px;
}

.small-link{
  font-size:12px;
  color:#111;
  text-decoration:none;
  border-bottom:1px dashed rgba(0,0,0,.35);
  cursor:pointer;
}
.small-link:hover{ opacity:.75; }

.check{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#333;
}
.check input{ width:16px; height:16px; }

/* =========================================================
   BUTTON – JEDEN STYL (button i a)
========================================================= */
.btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;

  border:none;
  border-radius:12px;
  padding:12px 14px;
  min-height:46px;

  background:var(--accent);
  color:#fff;
  text-decoration:none;

  font-family:inherit;
  font-weight:700;
  letter-spacing:.6px;
  font-size:14px;
  line-height:1;

  cursor:pointer;
  margin-top:12px;
  transition:opacity .18s ease, transform .14s ease, filter .18s ease;
}
.btn:hover{
  opacity:1;
  background:var(--accent-hover);
  filter:brightness(.95);
  transform:translate3d(0,-1px,0);
}
.btn:disabled,
.btn[aria-disabled="true"]{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  filter:none;
}

.auth-foot{
  margin-top:12px;
  font-size:12px;
  color:#666;
  text-align:center;
}
.auth-foot a{
  color:#111;
  text-decoration:none;
  border-bottom:1px dashed rgba(0,0,0,.35);
}

.auth-support{
  margin-top:18px;
  padding-top:0;
  color:#666;
  font-size:12px;
  line-height:1.55;
  text-align:center;
}

.face > .auth-support{
  margin-top:auto;
}

.auth-support a{
  color:#111;
  text-decoration:none;
  border-bottom:1px dashed rgba(0,0,0,.35);
}

.auth-support a:hover{
  opacity:.75;
}

/* notice */
.notice{
  display:none;
  margin:18px 0 0;
  padding:10px 12px;
  border-radius:12px;
  font-size:12px;
  line-height:1.45;
}
.notice.is-visible{ display:block; }
.notice.ok{ background:#f0fff4; color:#0f5132; border:1px solid #c7f3d4; }
.notice.err{ background:#fff5f5; color:#842029; border:1px solid #f5c2c7; }

/* =========================================================
   RESET/AKTYWACJA (bez flip)
========================================================= */
.auth-card--narrow{
  max-width:820px;
}

.auth-content{ padding:26px; }
.auth-content--center{
  max-width:560px;
  margin:0 auto;
}

.auth-card--narrow .auth-panel{
  min-height:360px;
}

.auth-card--narrow .auth-content--center{
  box-sizing:border-box;
  min-height:360px;
  display:flex;
  flex-direction:column;
}

.auth-card--narrow .auth-support{
  margin-top:auto;
}

.auth-actions__stack{
  margin-top:12px;
  width:100%;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 880px){
  .auth-wrap{ --auth-panel-h:640px; }
}

@media (min-width:1024px){
  .auth-card--single{ max-width:780px; }
  .auth-wrap{ --auth-panel-h:620px; }
  .face{ padding:30px 32px 32px; }
  .auth-title{ font-size:24px; }
}

/* =========================================================
   AUTH FLIP — FIX
========================================================= */

/* iOS/Safari lubi tylko z prefixami */
.flip{
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  will-change: transform;
}

.face{
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: translateZ(0);
}

/* --- Ukrywanie nieaktywnych stron (eliminuje "zostające" elementy) --- */
.face{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.flip:not(.is-register):not(.is-forgot) .face.login{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 3;
}

.flip.is-register .face.register{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 3;
}

.flip.is-forgot .face.forgot{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 3;
}

.face.login{ z-index: 1; }
.face.register{ z-index: 1; }
.face.forgot{ z-index: 1; }

/* =========================================================
   AUTH LAYOUT FIX
========================================================= */

/* desktop – większy kafel */
@media (min-width:1024px){
  .auth-card{
    max-width:780px;
  }

  .flip{
    min-height:var(--auth-panel-h);
  }

  .face{
    padding:30px 32px 32px;
  }

  .auth-title{
    font-size:24px;
  }
}