/*modal*/
#modal-mask{
	display:none;
	position:fixed;
	overflow: hidden;
	left:0; right:0;
	top:0; bottom:0;
	background-color:rgba(0,0,0,0.65);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index:9999;
}
#modal-login{
	height: 373px;
}
#modal-reg{
	height: 217px;
}
.modal-close-mask{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}
.modal-body{
	position:absolute;
	left:0; right:0;
	top:-500%;
	overflow: auto;
	overflow-y: hidden;
	transition:top .9s;
	background-color: #141414;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.25), 0 0 20px 1px rgba(0,0,0,0.7);
	width:380px;
	max-height:100%;
	z-index: 2;
}
.modal-content{
	position:absolute;
	left:5px; right:5px;
	top:10px; bottom:10px;
	padding:0px 5px;
	z-index:1;
	overflow: auto;	
}
.modal-show{
	top:0;
	bottom:0;
}
/* A11Y-001/015 2026-05-21: 44x44 touch target (WCAG 2.5.5/2.5.8), opacity 1, visible ✕ glyph */
.modal-close{
	position:absolute;
	right:8px;
	top:8px;
	height:44px;
	width:44px;
	opacity:1;
	background-repeat:no-repeat;
	background-size: contain;
	background-color: rgba(255,255,255,.08);
	border-radius: 6px;
	cursor:pointer;
	transition: background-color .15s ease;
	z-index:10;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #e6ecf5;
	font-size: 22px;
	font-family: system-ui, -apple-system, sans-serif;
	line-height: 1;
	border: 0;
}
.modal-close::before{
	content: "\D7";  /* × */
	display: block;
}
.modal-close:hover{
	background-color: rgba(255,255,255,.15);
}
/* A11Y-004 2026-05-21: focus-visible styles for keyboard users */
.modal-close:focus-visible,
.modal-link:focus-visible,
.modal-content a:focus-visible,
.modal-content .input-text:focus-visible {
	outline: 2px solid #e8841e;
	outline-offset: 2px;
}
.modal-title{
	height:60px;
	font-size:20px;
	text-align:center;
}
.modal-title span{
	font-size:15px;
}
.modal-title span span{
	color: #5fa8d1 /* A11Y-003 2026-05-21: was #00aaff (2.85:1 fail) */;
	cursor: pointer;
}
.modal-extra-text{
	text-align:left;
	line-height:18px;
	margin:15px 0;
	font-size:14px;
}
.modal-label{
	position: relative;
	cursor: pointer;
}
.input-modal-checkbox{
	cursor: pointer;
}
.modal-content a{
	color:#5fa8d1;
}
.modal-content a:hover{
	text-decoration:underline;
}
/* Wave J Phase H+ 2026-05-21: убрали legacy margin-top:25px — теперь у каждого input
   есть .modal-field-label сверху (WCAG visible labels). Старый margin создавал лишний gap. */
.modal-content .input-text{
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	margin-top: 0;
}
/* Label-to-input — компактная связка. */
.modal-content .modal-field-label + .input-text,
.modal-content .modal-field-label + input.input-text{
	margin-top: 0 !important;
}
.modal-content .modal-field-label{
	margin: 14px 0 4px !important;
}
.modal-content .modal-field-label:first-child{
	margin-top: 0 !important;
}
.modal-content .btn{
	width:100%;
}
.modal-content select{
	display: block;
	width: 100%;
	margin-top: 0;
	margin-bottom: 10px;
	color:#222;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,1);
	background-color:#e7effd;
}

.modal-soc, .modal-soc-reg{
	position: relative;
	min-height: 44px;
	margin-bottom: 14px;
}
.modal-soc-reg{
	min-height: 90px;
}
/* Wave J Phase H+ 2026-05-21: убрали overflow:hidden + float, перешли на чистый flex
   с gap. Раньше icons могли обрезаться на узких viewport'ах. */
.modal-soc-icos{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding: 0 2px;
}
.modal-soc-ico{
	height: 44px;
	width: 44px;
	flex: 0 0 auto;
	margin: 0;
	opacity:0.85;
	border-radius: 6px;
	background-repeat:no-repeat;
	background-size: contain;
	cursor:pointer;
	transition:opacity .25s ease, transform .15s ease, box-shadow .25s ease;
}
.modal-soc-ico:hover{
	opacity:1;
	transform: translateY(-1px);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.30), 0 4px 12px rgba(0,0,0,.30);
}
.modal-soc-sep{
	position: relative;
	text-align: center;
	height: 20px;
	line-height: 20px;
	color: rgba(255,255,255,.50);
}
.modal-soc-sep:before,.modal-soc-sep:after{
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 30%;
	height: 1px;
	margin: auto;
	background-color: rgba(255,255,255,.50);
}
.modal-soc-sep:after{
	left: auto;
	right: 0;
}
.modal-block{
	position: relative;
}
.modal-captcha{
	position: relative;
	margin-top: 25px;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,1);
}
.g-recaptcha{
	position: relative;
	margin-top: 25px;
	border-radius: 3px;
	width: 304px;
	margin-left: -2px;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,1);
}
/* Wave J Phase H+ 2026-05-20 — inline alert в auth-модалках (failed login и т.п.).
   Используем #modal-mask scope для повышения специфичности — иначе .modal-content
   color: inherit может перекрыть. */
#modal-mask .modal-alert{
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	margin: 0 0 14px;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.45;
	border: 1px solid transparent;
	background: transparent;
}
#modal-mask .modal-alert svg{
	flex: 0 0 auto;
	margin-top: 1px;
	width: 18px;
	height: 18px;
}
#modal-mask .modal-alert--error,
#modal-mask .modal-alert--error span{
	color: #ff7a7a !important;
	font-weight: 600;
}
#modal-mask .modal-alert--error{
	background: rgba(255, 80, 80, 0.10) !important;
	border-color: rgba(255, 80, 80, 0.45) !important;
}
@keyframes xhAlertShake {
	0%,100% { transform: translateX(0); }
	20%,60% { transform: translateX(-4px); }
	40%,80% { transform: translateX(4px); }
}
#modal-mask .modal-alert--shake{
	animation: xhAlertShake .32s ease;
}
/* Info-variant — для success-сообщений recover ("письмо отправлено"). */
#modal-mask .modal-alert--info,
#modal-mask .modal-alert--info span{
	color: #7adfff !important;
	font-weight: 600;
}
#modal-mask .modal-alert--info{
	background: rgba(80, 180, 255, 0.10) !important;
	border-color: rgba(80, 180, 255, 0.45) !important;
}
/* Input-error highlight — backend hint flag устанавливает .input-text--error на инпут. */
.input-text--error{
	border-color: rgba(255, 80, 80, 0.55) !important;
	box-shadow: 0 0 0 2px rgba(255, 80, 80, 0.12) !important;
}

/* Wave J Phase H+ 2026-05-21 — z-index hotfix (body 10000 > mask 9999).
   Centering делается через home.css flex-mask, тут только z-index + max-height. */
#modal-mask .modal-body{
	z-index: 10000 !important;
}
#modal-mask .modal-body--video{
	z-index: 10000 !important;
}

/* ===== UX-F3 2026-05-21: registration step indicator ===== */
.xh-reg-steps {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; margin: 0 0 16px;
}
.xh-reg-step {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    font: 600 13px/1 'Source Sans 3', sans-serif;
    background: rgba(255,255,255,0.08);
    color: #9aa6bd;
    border: 1px solid #34456a;
    transition: all .2s ease;
}
.xh-reg-step--active {
    background: var(--xh-orange, #e88420);
    color: #1a0f00;
    border-color: var(--xh-orange, #e88420);
}
.xh-reg-step-sep {
    width: 32px; height: 1px; background: #34456a;
}
/* When modal-reg has .reg-active class (step 2 visible), highlight step 2 */
#modal-reg.reg-active .xh-reg-step[data-step="2"] {
    background: var(--xh-orange, #e88420);
    color: #1a0f00;
    border-color: var(--xh-orange, #e88420);
}
#modal-reg.reg-active .xh-reg-step[data-step="1"] {
    background: rgba(232, 132, 30, 0.15);
    color: var(--xh-orange, #e88420);
    border-color: var(--xh-orange, #e88420);
}