/* static/css/login.css */
/*************************************************/
.auth-page{
  min-height: calc(89vh - 10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 12px 0px 12px;
  /* background-color: lightsteelblue; /* lightslategrey  slategray */ 
  /* background: linear-gradient(180deg, lightsteelblue 0%, #ffffff 100%); */
}

.auth-card{
  width: min(980px, 100%);
  /* background: #F2F6FF; */
  border: 1px solid #D9E3F5;
  /* background: #F2F6FFD1; /* D1 ≈ 82% */ 
  background: #F2F6FF80;	/* ≈ 75% */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 22px 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.16);
}

.auth-title{
  margin: 0 0 6px 0;
  color: #142033;
  font-size: 1.6rem;
  text-align: center;
}

.auth-subtitle{
  margin: 0 auto 16px auto;   /* центрируем блок */
  color: #4B5B73;
  line-height: 1.5;
  text-indent: 0;      /* убрать отступ в начале строки */
  text-align: center;         /* центрируем текст */
  max-width: 52ch;            /* чтобы строка была “ровной” */
}


.message{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.12);
  color: red;
  width: 70%;
  display: block;
  margin: 0 auto;
  text-align: center;
}

.auth-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.auth-box{
  background: transparent;
  border: none;
  border-radius: 16px;
  padding: 16px;
}

.auth-box-title{
  margin: 0;
  color: #142033;
  font-size: 1.1rem;
}

.auth-form{
  display: grid;
  gap: 3px;
  justify-items: center;
}

.auth-form label{
  color: #0f2d28;
  font-size: 0.95rem;
  width: 80%;
  display: block;
  /* margin: 0 auto; */
	font-weight:700;
}

.auth-form input{
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #D9E3F5;
  background: #FFFFFF;
  color: #142033;
  outline: none;

  width: 80%;
  display: block;
  margin: 0 auto;   /* центрирует */
}


.auth-form input:focus{
  border-color: #4E93D8;
  box-shadow: 0 0 0 3px rgba(78,147,216,0.25);
}

.btn-primary {
  margin-top: 16px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.55);
  background: #4E93D8;
  border: none;
  border-color: rgba(255,255,255,0.38);
  color: #142033;
  border: none;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 12px 26px rgba(78,147,216,0.35);

  min-width: 220px;
  justify-self: center;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}

.btn-primary:hover{
  background: #3E82C6;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.38);
}

.btn-primary:active{
  transform: translateY(0);
}

.auth-note{
  margin: 10px 0 0 0;
  color: rgba(255,255,255,0.78);
  font-size: 0.9rem;
  line-height: 1.35;
}

/*--------------------------------- офер -------------------------------------------*/
.terms-block{
  margin-top: 12px;
  display: grid;
  /* gap: 10px; */
}

.terms-check{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
	margin-top: 10px;
}

.terms-check input{
  width: 18px;
  height: 18px;
}

.terms-offer{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* width: 100%; */
  /* padding: 1px 12px; */
  /* border-radius: 14px; */

  /* background: rgba(255,255,255,.86); */
  /* border: 1px solid rgba(46,111,178,.35); */

  color: #2e6fb2 !important;   /* важно: перебивает чужие стили */
  /* font-weight: 800; */
  font-size: 14px;
  /* line-height: 1.2; */

  text-decoration: none;
  text-align: center;

  /* white-space: normal;         /* разрешаем перенос */ */
  /* height: auto;                /* чтобы не сжимало в кружок */ */
  /* min-height: 44px;            /* удобный тап по мобильному */ */

  /* backdrop-filter: blur(6px); */
}

/* .check{ */
	/* margin-top: 0.5rem; */
/* } */

.terms-offer:hover{
  border-color: rgba(46,111,178,.48);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

.btn-primary:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.terms-check input:focus,
.terms-check input:focus-visible,
.terms-check:focus,
.terms-check:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/*----------------------------------- video----------------------------------*/
#bg_video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    transition: 1s opacity;
}

@media (max-width: 768px){
  .btn-primary {
    min-width: 200px;
  }
  .auth-form input {
	  width: 70%;
	  margin: 0 auto;
  }
  .auth-form label {
	  width: 70%;
  }
	.auth-card{
		padding: 18px 14px;
	}
}

@media (max-width: 520px){
	.auth-card{
		padding: 10px 6px;
	}
	.auth-title{font-size: 1.4rem;}
  .btn-primary {
    min-width: 150px;
  }
}

@media (max-width: 300px){
	.auth-page{  padding-top: 100px;}
}