/* ===================== LOGIN MODAL (centered) ===================== */

/* design tokens */
:root{
  --overlay: rgba(0,0,0,.60);
  --panel-bg: #2a2a2a;
  --text: #f3f3f3;
  --muted:#b1b1b1;
  --line: rgba(255,255,255,.12);
  --ok:#19c664; --red:#e33232;
  --violet-2:#a343ff; --violet-3:#7b2cff;
  --radius: 18px;
  --hero: 420px;            /* ширина «героя» слева на десктопе */
  --hero-sm: 160px;         /* высота «героя» сверху на мобилке */
}

/* --- overlay ------------------------------------------------------ */
/* не задаём display — им управляет JS; отключаем анимации по умолчанию */
#login-modal.cart-modal-overlay{
  position: fixed; inset: 0; z-index: 26000;
  display: flex;                         /* будет работать, когда JS покажет */
  justify-content: center; align-items: center;
  background: rgba(0,0,0,0); /* прозрачно по умолчанию */

  overscroll-behavior: contain;
}



/* --- card --------------------------------------------------------- */
.login-modal-content{
  position: relative;
  box-sizing: border-box;
  width: clamp(720px, 88vw, 980px);

  /* фиксируем высоту, чтобы не прыгала при смене вкладок (десктоп) */
  height: 560px;
  min-height: 560px;

  /* 50/50 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;

  /* равный внутренний отступ со всех сторон */
  padding: 28px;

  background: #282828;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  color: var(--text);
  overflow: hidden;

  /* твоя анимация появления */
  animation: loginModalSlideIn 0.32s cubic-bezier(.37,1.47,.64,1);
}

.login-right{
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 28px;   /* симметрия с правым паддингом карточки */
}

/* анимация панели по состояниям */
#login-modal.is-open{ animation: loginFade .25s ease-out both !important; }
 #login-modal.is-open .login-modal-content,
 #login-modal.is-open .cart-modal{
   animation: loginSlide .30s cubic-bezier(.37,1.47,.64,1) both !important;
 }
 
 #login-modal.closing .login-modal-content,
 #login-modal.closing .cart-modal{
   animation: loginSlide .30s cubic-bezier(.37,1.47,.64,1) reverse both !important;
   will-change: transform;
 }
/* Фейдим фон обратно при закрытии, чтобы не висел непрозрачным до таймаута */
#login-modal.closing{
  animation: loginFade .25s ease-out reverse both !important;
}
/* левый «герой»: градиент + лого */
.login-modal-content::before{
  content:"";
  position:absolute; inset:0 auto 0 0;
  width: 50%;                 /* было var(--hero) */
  background: linear-gradient(207.15deg, #000000 32.62%, #7709FF 122.57%);
  border-radius: var(--radius) 0 0 var(--radius);
}
.login-modal-content::after{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width: 50%;                 /* было var(--hero) */
  background: url("/img/logo+.svg") no-repeat 50% 50%;
  background-size: 34%;
  pointer-events:none;
}


/* крестик */
#login-modal-close{
  position:absolute; right:10px; top:10px;
  width:40px; height:40px; display:grid; place-items:center;
  background:transparent; border:none; border-radius:12px;
  color:#fff; font-size:22px; line-height:1; cursor:pointer;
  transition: background .15s;
}
#login-modal-close:hover{ background: rgba(255,255,255,.08); }

/* заголовок */
.login-modal-title{
  margin:0 0 4px;
  font-size:26px; font-weight:900; color:#fff;
  text-align:center;              /* центр */
}
.login-subtitle{
  margin:0 0 6px;
  color:#cfcfcf; font-size:13px; font-weight:600; opacity:.95;
  text-align:center;              /* центр */
}


/* tabs */
.login-tabs{
  display: flex;
  gap: 6px;
  width: 100%;               /* на всю ширину правой колонки */
  padding: 4px;
  margin: 0 0 12px;
  border-radius: 16px;
  background: #121212;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); /* тонкая «обводка» */
}
.login-tab{
  flex: 1 1 0;
  height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #dcdcdc;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: background .12s, opacity .12s, transform .04s;
}
.login-tab:hover{ background: rgba(255,255,255,.06); }
.login-tab.active{ background:#3a3a3a; color:#fff; }



.login-subtitle{
  margin: 0 0 6px;
  color:#cfcfcf;
  font-size: 13px;
  font-weight: 600;
  opacity: .95;
}
/* fields */
#authForm input{
  display:block; width:100%;
  background:#121212; border:1px solid #3a3a3a; border-radius:12px;
  color:#f1f1f1; padding:12px 14px; margin-bottom:10px; font-size:14px;
  transition:border-color .15s, box-shadow .15s;
}
#authForm input::placeholder{ color:#9b9b9b }
#authForm input:focus{ border-color:#6f35ff; box-shadow:0 0 0 3px rgba(111,53,255,.25); outline:none; }

/* forgot password */
#loginForgot{
  display:block; margin:8px 0 6px; text-align:right;
  font-size:12px; color:#cfcfcf; text-decoration:none; opacity:.9;
}
#loginForgot:hover{ opacity:1; text-decoration:underline; }


/* submit */
.login-submit-btn{
  width:100%; height:44px; border:none; border-radius:16px; cursor:pointer;
  color:#fff; font-weight:900; font-size:15px; letter-spacing:.01em;
  background:linear-gradient(90deg, #2563EB 0%, #720FFE 51.92%, #9900FF 100%);
  box-shadow:0 8px 22px rgba(59,130,246,.35);
  transition: filter .12s, transform .04s;
}
.login-submit-btn:hover{ filter:brightness(1.06) }
.login-submit-btn:active{ transform:translateY(1px) }

/* divider */
.login-divider{ display:flex; align-items:center; gap:10px; color:#bcbcbc; margin:12px 0; }
.login-divider::before, .login-divider::after{ content:""; flex:1; height:1px; background:var(--line); }

/* oauth */
.oauth-buttons{ display:flex; gap:10px; }
.oauth-btn{
  flex:1 1 0;
  display:flex; align-items:center; justify-content:center; gap:10px;
  height:44px; border:none; border-radius:12px; cursor:pointer; text-decoration:none;
  font-weight:800; font-size:14px;
  transition: filter .12s, transform .04s;
}
.oauth-btn .icon{ display:inline-flex; align-items:center; justify-content:center; }
.oauth-btn .icon svg{ display:block; width:18px; height:18px; }
.oauth-btn .label{ line-height:1; }      /* текст центр-по-высоте */
.oauth-btn:hover{ filter:brightness(1.06) }
.oauth-btn:active{ transform:translateY(1px) }
.google-btn{ background: #121212; color:#ffffff }
.discord-btn{ background: #121212; color:#ffffff }


/* message */
.login-message{ color:#ff5a66; font-size:13px; min-height:20px; margin-top:6px; }

/* --- responsive: на узких «герой» сверху ------------------------- */
/* ========= ≤900 (tablet) ========= */
@media (max-width: 900px){
  :root{ --hero-sm: 180px; }

  #login-modal.is-open{ align-items:flex-start; }
  .login-modal-content{
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    /* чтобы контент не прилипал к низу */
    padding-bottom: 32px !important;
  }
  .login-modal-content::before,
  .login-modal-content::after{
    left:0; right:0; width:100%;
    height: var(--hero-sm);
    border-radius: 0;
    position: absolute;
    top: 0;
  }
  .login-modal-content::after{
    background-size: 92px;
    background-position: 24px 50%;
    z-index: 2;
  }
  .login-right{
    padding: 32px 16px 24px 16px !important;
    margin-top: var(--hero-sm);
    max-width: 520px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    background: none;
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  /* ...existing code... */
}

/* ========= ≤600 (mobile) ========= */
@media (max-width: 600px){
  :root{ --hero-sm: 200px; }

  .login-modal-content{
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    padding-bottom: 24px !important;
  }
  .login-modal-content::before,
  .login-modal-content::after{
    left:0; right:0; width:100%;
    height: var(--hero-sm);
    border-radius: 0;
    position: absolute;
    top: 0;
  }
  .login-modal-content::after{
    background-size: 82px;
    background-position: 20px 50%;
    z-index: 2;
  }
  .login-right{
    padding: 28px 10px 18px 10px !important;
    margin-top: var(--hero-sm);
    max-width: 98vw;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    background: none;
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

}

/* --- keyframes (уникальные имена, чтобы не конфликтовать) -------- */
@keyframes loginFade { from { background: rgba(0,0,0,0); } to { background: var(--overlay); } }
@keyframes loginSlide{ from { transform: translateX(100%); } to { transform: translateX(0); } }

/* Анимация открытия логин-модалки */
@keyframes loginModalSlideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* Keep viewport scrollbar reserved and prevent page jump on modal open */
html{
  overflow-y: scroll;                 /* всегда показываем дорожку скролла */
  scrollbar-gutter: stable;/* резервируем место под неё */
}