/* © 2025 Mark Kats. Все права защищены. Копирование и переработка запрещены. */

/* Ссылки */
a{
	all:unset;
	display:inline;
	color:#8fdfff;
	text-decoration:underline;
	cursor:pointer;
}

/* Центрирование формы по экрану */
.page-center{
	min-height:100svh;
	display:grid;
	place-items:center;
}

/* Узкая обёртка страницы */
.wrap{
	max-width:400px;
	width:100%;
	margin: 0 !important;
}

/* Карточка формы */
.auth-card{
	padding:14px;
}

/* Подзаголовок */
.subheading{
	display:block;
	color:#aaa;
	margin:0;
	margin-top:.25em;
	font-family:'Fira Mono', monospace;
	font-size:.9em;
}

/* Поля ввода (тёмные, как в профиле) */
.auth-form input[type="email"],
.auth-form input[type="tel"],
.auth-form input[type="text"],
.auth-form input[type="password"],
.auth-form select{
	height:36px;
	border-radius:8px;
	border:1px solid #2a2d35;
	background:#15171b;
	color:#fff;
	padding:0 10px;
	width:100%;
	max-width:100%;
	font-family:var(--font-ui);
	box-sizing:border-box;
	margin-top:1em;
}

/* Кнопки — одинаковые */
.actions{
	display:flex;
	gap:8px;
	margin-top:1em;
}
.actions .btn{
	flex:1 0 0;
	min-width:0;
	justify-content:center;
	margin-top: 0 !important;
}
.btn.block{
	width:100%;
	justify-content:center;
	height:40px;
}
.btn.ghost{ background:rgba(255,255,255,.05); }
.btn.ghost:hover{ background:rgba(255,255,255,.10); }

/* Сообщения */
.response-message{
	margin-top:1em;
	padding:10px;
	font-size:.9em;
	color:#fff;
	background:var(--bg-card);
	border:1px solid var(--hair);
	border-radius:8px;
	text-align:center;
	display:none;
}
.response-message.error{ background-color:rgba(255,0,0,.10); }
.response-message.success{ background-color:rgba(0,255,0,.10); }

.error{
	margin-top:1em;
	color:#f77;
	text-align:center;
	font-size:.9em;
}

/* Инфо и таймер */
.info-text{
	font-size:.8em;
	color:rgba(255,255,255,.7);
	margin-top:10px;
	text-align:center;
	margin-bottom: 3px;
}
.timer{
	font-size:.9em;
	color:rgb(200,200,200);
	margin-top:5px;
	text-align:center;
}

/* Запросить новый код — такая же высота */
#resendCodeButton{
	margin-top:1em;
	height:40px;
}

/* Disabled */
#resendCodeButton:disabled{
	background-color:rgba(30,30,30,.3);
	cursor:not-allowed;
	pointer-events:none;
	color:grey;
}

/* Адаптив */
@media (max-width:560px){
	.actions{ gap:6px; }
}

/* Зеленый оттенок — "Отправить код" и "Подтвердить код" */
#emailForm .actions .btn[type="submit"],
#confirmCodeButton.btn {
	background: rgba(46, 160, 67, .22);
	border-color: rgba(46, 160, 67, .45);
	color: #fff;
}

#emailForm .actions .btn[type="submit"]:hover,
#confirmCodeButton.btn:hover {
	background: rgba(46, 160, 67, .30);
	border-color: rgba(46, 160, 67, .60);
}

#emailForm .actions .btn[type="submit"]:active,
#confirmCodeButton.btn:active {
	transform: translateY(1px);
}

#emailForm .actions .btn[type="submit"]:focus-visible,
#confirmCodeButton.btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(46, 160, 67, .25);
}