/**

 * User registration page — OBLBOOT.COM design system

 */



body.my-obl-register-page {

	--my-obl-reg-text: #111111;

	--my-obl-reg-body: #333333;

	--my-obl-reg-muted: #666666;

	--my-obl-reg-border: #e5e5e5;

	--my-obl-reg-surface: #f4f4f4;

	--my-obl-reg-logo: #b12f33;

	--my-obl-reg-radius: 4px;

	--my-obl-reg-input-text: #333333;

	--my-obl-reg-success: #2f7a3e;

}



body.my-obl-register-page .page-title-inner,

body.my-obl-register-page .entry-header,

body.my-obl-register-page .entry-title {

	display: none !important;

}



body.my-obl-register-page #main {

	max-width: 1600px;

	margin-left: auto;

	margin-right: auto;

	padding: 30px 15px 60px;

	box-sizing: border-box;

}



.my-obl-register {

	color: var(--my-obl-reg-text, #111111);

}



.my-obl-register__inner {

	max-width: 560px;

	margin: 0 auto;

}



.my-obl-register__card {

	background: #ffffff;

	border: 1px solid var(--my-obl-reg-border, #e5e5e5);

	border-radius: var(--my-obl-reg-radius, 4px);

	padding: 32px 28px;

}



.my-obl-register__header {

	margin-bottom: 24px;

}



.my-obl-register__title {

	margin: 0 0 8px;

	font-size: 28px;

	font-weight: 700;

	line-height: 1.2;

	color: var(--my-obl-reg-text, #111111);

	letter-spacing: -0.02em;

}



.my-obl-register__lead {

	margin: 0;

	font-size: 14px;

	line-height: 1.6;

	color: var(--my-obl-reg-muted, #666666);

}



.my-obl-register__form {

	display: grid;

	gap: 18px;

}



.my-obl-register__field {

	display: grid;

	gap: 8px;

}



.my-obl-register__input-block {

	display: grid;

	gap: 3px;

}



.my-obl-register__label {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--my-obl-reg-body, #333333);
	margin: 8px 0 2px;
}

body.my-obl-register-page .my-obl-register__form .my-obl-register__label {
	margin-top: 8px !important;
	margin-bottom: 2px !important;
}



.my-obl-register__required {

	color: var(--my-obl-logo-color, var(--my-obl-reg-logo, #b12f33));

}



.my-obl-register__control {

	position: relative;

	display: flex;

	align-items: center;

	min-height: 44px;

}



.my-obl-register__input {
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 40px 4px 12px;
	border: 1px solid var(--my-obl-reg-border, #e5e5e5);
	border-radius: var(--my-obl-reg-radius, 4px);
	background: #ffffff;
	color: var(--my-obl-reg-input-text, #333333);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
	transition: border-color 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}

body.my-obl-register-page .my-obl-register__form .my-obl-register__input,
body.my-obl-register-page .my-obl-register__form .my-obl-register__select {
	padding-top: 10px !important;
	padding-right: 40px !important;
	padding-bottom: 4px !important;
	padding-left: 12px !important;
	margin-bottom: 0 !important;
}

body.my-obl-register-page .my-obl-register__form .my-obl-register__select {
	padding-right: 54px !important;
}



.my-obl-register__select {

	appearance: none;

	background-image: linear-gradient(45deg, transparent 50%, #666666 50%), linear-gradient(135deg, #666666 50%, transparent 50%);

	background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px);

	background-size: 6px 6px, 6px 6px;

	background-repeat: no-repeat;

	padding-right: 54px;

}



.my-obl-register__check {

	position: absolute;

	top: 0;

	right: 12px;

	bottom: 0;

	width: 18px;

	height: 18px;

	margin: auto 0;

	border-radius: 50%;

	background: var(--my-obl-reg-success, #2f7a3e);

	opacity: 0;

	transform: scale(0.85);

	transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);

	pointer-events: none;

}



.my-obl-register__check::before {

	content: '';

	position: absolute;

	top: 50%;

	left: 50%;

	width: 4px;

	height: 8px;

	margin-top: -5px;

	margin-left: -2px;

	border-right: 2px solid #ffffff;

	border-bottom: 2px solid #ffffff;

	transform: rotate(45deg);

}



.my-obl-register__field.is-valid .my-obl-register__check {

	opacity: 1;

	transform: scale(1);

}



.my-obl-register__input:focus {

	outline: none;

	border-color: var(--my-obl-reg-text, #111111);

}



.my-obl-register__field.is-invalid .my-obl-register__input,

.my-obl-register__field.is-invalid .my-obl-register__select {

	border-color: var(--my-obl-logo-color, var(--my-obl-reg-logo, #b12f33));

}



.my-obl-register__field.is-valid .my-obl-register__input,

.my-obl-register__field.is-valid .my-obl-register__select {

	border-color: var(--my-obl-reg-success, #2f7a3e);

}



.my-obl-register__hint {

	margin: 0 0 2px;

	font-size: 13px;

	line-height: 1.45;

	color: var(--my-obl-reg-muted, #666666);

}



.my-obl-register__error,

.my-obl-register__form-error {

	display: flex;

	align-items: flex-start;

	gap: 6px;

	margin: 0;

	font-size: 13px;

	line-height: 1.45;

	color: var(--my-obl-logo-color, var(--my-obl-reg-logo, #b12f33));

}



.my-obl-register__error::before,

.my-obl-register__form-error::before {

	content: '!';

	flex-shrink: 0;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 14px;

	height: 14px;

	margin-top: 1px;

	border-radius: 50%;

	background: var(--my-obl-logo-color, var(--my-obl-reg-logo, #b12f33));

	color: #ffffff;

	font-size: 11px;

	font-weight: 700;

	line-height: 1;

}



.my-obl-register__success {

	margin: 0;

	font-size: 13px;

	line-height: 1.45;

	font-weight: 600;

	color: var(--my-obl-reg-success, #2f7a3e);

}



.my-obl-register__captcha-row {

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 12px;

	padding: 10px 12px;

	margin-bottom: 6px;

	background: var(--my-obl-reg-surface, #f4f4f4);

	border-radius: var(--my-obl-reg-radius, 4px);

}



.my-obl-register__captcha-question {

	font-size: 16px;

	font-weight: 600;

	color: var(--my-obl-reg-text, #111111);

}



.my-obl-register__captcha-refresh {

	flex-shrink: 0;

	padding: 6px 12px;

	border: 1px solid var(--my-obl-reg-border, #e5e5e5);

	border-radius: 999px;

	background: #ffffff;

	color: var(--my-obl-reg-body, #333333);

	font: inherit;

	font-size: 13px;

	font-weight: 600;

	cursor: pointer;

	transition: opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1);

}



.my-obl-register__captcha-refresh:hover,

.my-obl-register__captcha-refresh:focus {

	opacity: 0.75;

}



.my-obl-register__captcha-refresh:disabled {

	opacity: 0.55;

	cursor: wait;

}



.my-obl-register__field--captcha .my-obl-register__control {

	min-height: auto;

}



body.my-obl-register-page .my-obl-register__field--captcha .my-obl-register__input {
	padding-right: 12px !important;
}



.my-obl-register__actions {

	margin-top: 6px;

}



.my-obl-register__submit {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	width: 100%;

	min-height: 52px;

	padding: 14px 28px;

	border: 1px solid #000000;

	border-radius: 4px;

	background: linear-gradient(180deg, #2a2a2a 0%, #111111 55%, #0a0a0a 100%);

	color: #ffffff;

	font: inherit;

	font-size: 18px;

	font-weight: 700;

	line-height: 1.2;

	letter-spacing: 0.04em;

	cursor: pointer;

	box-shadow:

		inset 0 1px 0 rgba(255, 255, 255, 0.14),

		0 2px 0 #000000,

		0 4px 10px rgba(0, 0, 0, 0.18);

	transition:

		background 0.52s cubic-bezier(0.22, 1, 0.36, 1),

		border-color 0.52s cubic-bezier(0.22, 1, 0.36, 1),

		box-shadow 0.52s cubic-bezier(0.22, 1, 0.36, 1),

		transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);

}



.my-obl-register__submit:hover,

.my-obl-register__submit:focus {

	background: linear-gradient(180deg, #c53539 0%, var(--my-obl-logo-color, #b12f33) 55%, #96262a 100%);

	border-color: #7a1f22;

	box-shadow:

		inset 0 1px 0 rgba(255, 255, 255, 0.18),

		0 2px 0 #7a1f22,

		0 4px 12px rgba(177, 47, 51, 0.28);

	transform: translateY(-1px);

}



.my-obl-register__submit:active {

	transform: translateY(1px);

	box-shadow:

		inset 0 2px 4px rgba(0, 0, 0, 0.22),

		0 1px 0 #7a1f22;

}



.my-obl-register__submit:disabled {

	opacity: 0.55;

	cursor: not-allowed;

	transform: none;

}



.my-obl-register__login-link {

	margin: 20px 0 0;

	font-size: 14px;

	line-height: 1.55;

	color: var(--my-obl-reg-muted, #666666);

	text-align: center;

}



.my-obl-register__login-link a {

	color: var(--my-obl-logo-color, var(--my-obl-reg-logo, #b12f33));

	text-decoration: none;

	font-weight: 600;

}



.my-obl-register__login-link a:hover,

.my-obl-register__login-link a:focus {

	opacity: 0.75;

}



.my-obl-register__notice {

	max-width: 560px;

	margin: 0 auto;

	padding: 16px 18px;

	border: 1px solid var(--my-obl-reg-border, #e5e5e5);

	border-radius: var(--my-obl-reg-radius, 4px);

	background: var(--my-obl-reg-surface, #f4f4f4);

	font-size: 14px;

	line-height: 1.55;

	color: var(--my-obl-reg-body, #333333);

	text-align: center;

}



.my-obl-register__field--avatar {

	gap: 12px;

}



.my-obl-register__avatar-preview-wrap {

	display: flex;

	align-items: center;

	gap: 14px;

	padding: 12px 14px;

	background: var(--my-obl-reg-surface, #f4f4f4);

	border-radius: var(--my-obl-reg-radius, 4px);

}



.my-obl-register__avatar-preview {

	flex-shrink: 0;

	width: 72px;

	height: 72px;

	border-radius: 50%;

	object-fit: cover;

	border: 2px solid #ffffff;

	box-shadow: 0 0 0 1px var(--my-obl-reg-border, #e5e5e5);

}



.my-obl-register__avatar-preview-note {

	margin: 0;

	font-size: 13px;

	line-height: 1.45;

	color: var(--my-obl-reg-muted, #666666);

}



.my-obl-register__avatar-grid {

	display: grid;

	grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));

	gap: 8px;

	max-height: 220px;

	overflow-y: auto;

	padding: 2px;

}



.my-obl-register__avatar-option {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 100%;

	aspect-ratio: 1;

	padding: 0;

	border: 2px solid var(--my-obl-reg-border, #e5e5e5);

	border-radius: 50%;

	background: #ffffff;

	cursor: pointer;

	overflow: hidden;

	transition: border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);

}



.my-obl-register__avatar-option img {

	display: block;

	width: 100%;

	height: 100%;

	object-fit: cover;

}



.my-obl-register__avatar-option:hover,

.my-obl-register__avatar-option:focus {

	border-color: var(--my-obl-reg-text, #111111);

	outline: none;

}



.my-obl-register__avatar-option.is-selected {

	border-color: var(--my-obl-logo-color, var(--my-obl-reg-logo, #b12f33));

	box-shadow: 0 0 0 2px rgba(177, 47, 51, 0.18);

}



@media screen and (max-width: 849px) {

	body.my-obl-register-page #main {

		padding-top: 20px;

		padding-bottom: 40px;

	}



	.my-obl-register__card {

		padding: 24px 18px;

	}



	.my-obl-register__title {

		font-size: 24px;

	}



	.my-obl-register__captcha-row {

		flex-direction: column;

		align-items: flex-start;

	}

}



@media (prefers-reduced-motion: reduce) {

	.my-obl-register__input,

	.my-obl-register__submit,

	.my-obl-register__captcha-refresh,

	.my-obl-register__check {

		transition: none;

	}



	.my-obl-register__submit:hover,

	.my-obl-register__submit:focus,

	.my-obl-register__submit:active {

		transform: none;

	}

}