/*
 * BNT Workshop – a Fiókom, regisztrációs és jelszó-visszaállító oldal arculata.
 *
 * Ezeket az oldalakat a User Registration & Membership bővítmény építi, a saját
 * jelölésével. Itt kizárólag a megjelenést igazítjuk a bejelentkező oldalhoz
 * (login.css) – a bővítmény működéséhez nem nyúlunk.
 *
 * A szabályok a bővítmény saját azonosítóira (#user-registration,
 * #ur-frontend-form) vannak horgonyozva, mert a bővítmény stíluslapja mély
 * szelektorokkal és helyenként !important-tal dolgozik. Ez nem szépséghiba:
 * idegen bővítmény stílusának felülírásánál ez a megbízható eszköz.
 *
 * A GOMB SZÍNE NEM INNEN JÖN. A bővítmény saját beállításából származik:
 * User Registration & Membership → Settings → General → Style → Button
 * Background / Primary Color. Ott kell a márkaszínre állítani (#15537f);
 * CSS-ből megbízhatóan nem felülírható.
 */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap');

/*
 * A bővítmény a színeit CSS változókban tartja, a :root szinten. Itt
 * átállítjuk őket a márkaszínre. Ha a bővítmény beállításaiban is beírod,
 * erre nincs szükség – de ártani nem árt.
 */
:root {
	--ur-primary-color: #15537f !important;
	--ur-primary-dark: #0e3d5f !important;
	--ur-button-background-normal-color: #15537f !important;
	--ur-button-background-hover-color: #0e3d5f !important;
	--ur-button-text-normal-color: #ffffff !important;
	--ur-button-text-hover-color: #ffffff !important;
}

body.user-registration-page {
	--bnt-paper: #eef1f4;
	--bnt-sheet: #ffffff;
	--bnt-ink: #0f2b40;
	--bnt-ink-soft: #5d7183;
	--bnt-blue: #15537f;
	--bnt-blue-deep: #0e3d5f;
	--bnt-amber: #ff6b00;
	--bnt-rule: #d3dbe2;
	--bnt-danger: #b3261e;
}

/* ---------- A tartalom területe ---------- */

body.user-registration-page #user-registration #ur-frontend-form {
	font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	color: var(--bnt-ink) !important;
	max-width: 384px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

/*
 * Egysoros kapcsolási rajz az űrlap fölött: napelem – inverter –
 * fogyasztásmérő – hálózat. Ugyanaz a jel, mint a bejelentkező oldalon.
 * Háttérképként kerül be, hogy a bővítmény jelöléséhez ne kelljen nyúlni.
 */
body.user-registration-page #user-registration #ur-frontend-form::before {
	content: '' !important;
	display: block !important;
	width: 100% !important;
	max-width: 300px !important;
	height: 44px !important;
	margin: 0 0 20px !important;
	background: left center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 44' fill='none'%3E%3Cg stroke='%23d3dbe2' stroke-width='1.25' stroke-linecap='round'%3E%3Cpath d='M41 22h63M150 22h64M241 22h58'/%3E%3Crect x='104' y='8' width='46' height='28' rx='2'/%3E%3Cpath d='M111 17h8M111 21h8'/%3E%3Cpath d='M127 27c2-7 4-7 6 0s4 7 6 0'/%3E%3Ccircle cx='228' cy='22' r='13'/%3E%3Cpath d='M221.5 28.5 234.5 15.5'/%3E%3Cpath d='M300 8v28M308 12v20M316 16v12'/%3E%3C/g%3E%3Cg stroke='%23ff6b00' stroke-width='1.25' stroke-linecap='round' opacity='.85'%3E%3Ccircle cx='20' cy='22' r='7'/%3E%3Cpath d='M20 9v-3M20 38v-3M9.5 11.5l-2-2M32.5 34.5l-2-2M6 22h-3M37 22h-3M9.5 32.5l-2 2M32.5 9.5l-2 2'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* ---------- Az űrlap doboza ---------- */

body.user-registration-page #user-registration #ur-frontend-form form.user-registration-form {
	background: var(--bnt-sheet) !important;
	border: 1px solid var(--bnt-rule) !important;
	border-radius: 3px !important;
	padding: 22px 22px 20px !important;
	margin: 0 !important;
	box-shadow: none !important;
}

body.user-registration-page #user-registration #ur-frontend-form .ur-form-row,
body.user-registration-page #user-registration #ur-frontend-form .ur-form-grid {
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: none !important;
}

body.user-registration-page #user-registration #ur-frontend-form .user-registration-form-row {
	margin: 0 0 16px !important;
	padding: 0 !important;
}

/* ---------- Címkék ---------- */

body.user-registration-page #user-registration #ur-frontend-form .user-registration-form-row > label {
	display: block !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	color: var(--bnt-ink-soft) !important;
	margin: 0 0 6px !important;
}

/* A csillag halkabban: a mezők amúgy is mind kötelezők. */
body.user-registration-page #user-registration #ur-frontend-form .required {
	color: var(--bnt-rule) !important;
	font-weight: 400 !important;
	text-decoration: none !important;
	border: 0 !important;
}

/* ---------- Mezők ---------- */

body.user-registration-page #user-registration #ur-frontend-form .input-wrapper,
body.user-registration-page #user-registration #ur-frontend-form .password-input-group {
	display: block !important;
	position: relative !important;
	width: 100% !important;
}

body.user-registration-page #user-registration #ur-frontend-form input.user-registration-Input,
body.user-registration-page #user-registration #ur-frontend-form input[type='text'],
body.user-registration-page #user-registration #ur-frontend-form input[type='email'],
body.user-registration-page #user-registration #ur-frontend-form input[type='password'] {
	width: 100% !important;
	box-sizing: border-box !important;
	font-family: inherit !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
	height: auto !important;
	min-height: 0 !important;
	color: var(--bnt-ink) !important;
	background: #fff !important;
	border: 1px solid var(--bnt-rule) !important;
	border-radius: 3px !important;
	padding: 11px 12px !important;
	margin: 0 !important;
	box-shadow: none !important;
	transition: border-color .12s ease, box-shadow .12s ease !important;
}

body.user-registration-page #user-registration #ur-frontend-form input.user-registration-Input:focus,
body.user-registration-page #user-registration #ur-frontend-form input[type='text']:focus,
body.user-registration-page #user-registration #ur-frontend-form input[type='email']:focus,
body.user-registration-page #user-registration #ur-frontend-form input[type='password']:focus {
	border-color: var(--bnt-blue) !important;
	box-shadow: 0 0 0 3px rgba(21, 83, 127, .14) !important;
	outline: 2px solid transparent !important;
	outline-offset: 2px !important;
}

/* A bővítmény jelszó-megjelenítő gombja, ha van. */
body.user-registration-page #user-registration #ur-frontend-form .password_preview,
body.user-registration-page #user-registration #ur-frontend-form .show_password {
	color: var(--bnt-ink-soft) !important;
	right: 12px !important;
}

/* ---------- „Emlékezz rám” és elfelejtett jelszó ---------- */

body.user-registration-page #user-registration #ur-frontend-form .user-registration-before-login-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 14px !important;
	flex-wrap: wrap !important;
	margin: 0 0 18px !important;
}

body.user-registration-page #user-registration #ur-frontend-form .user-registration-form__label-for-checkbox {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 !important;
	font-size: 13.5px !important;
	line-height: 1.4 !important;
	color: var(--bnt-ink) !important;
	cursor: pointer !important;
}

body.user-registration-page #user-registration #ur-frontend-form .user-registration-form__input-checkbox {
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	border: 1px solid var(--bnt-rule) !important;
	border-radius: 2px !important;
	accent-color: var(--bnt-blue) !important;
	flex-shrink: 0 !important;
}

body.user-registration-page #user-registration #ur-frontend-form .user-registration-form__input-checkbox:focus-visible {
	outline: 2px solid var(--bnt-blue) !important;
	outline-offset: 2px !important;
}

body.user-registration-page #user-registration #ur-frontend-form .user-registration-LostPassword label {
	margin: 0 !important;
}

body.user-registration-page #user-registration #ur-frontend-form .user-registration-LostPassword a {
	font-size: 13.5px !important;
	color: var(--bnt-ink-soft) !important;
	text-decoration: none !important;
	border-bottom: 1px solid var(--bnt-rule) !important;
	padding-bottom: 1px !important;
	transition: color .12s ease, border-color .12s ease !important;
}

body.user-registration-page #user-registration #ur-frontend-form .user-registration-LostPassword a:hover {
	color: var(--bnt-blue) !important;
	border-bottom-color: var(--bnt-blue) !important;
}

/* ---------- A gomb ---------- */

body.user-registration-page #user-registration #ur-frontend-form button.ur-submit-button,
body.user-registration-page #user-registration #ur-frontend-form .user-registration-Button {
	width: 100% !important;
	display: block !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: .005em !important;
	background: var(--bnt-blue) !important;
	border: 1px solid var(--bnt-blue) !important;
	border-radius: 3px !important;
	color: #fff !important;
	padding: 12px 18px !important;
	height: auto !important;
	text-shadow: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: background-color .12s ease, border-color .12s ease !important;
}

body.user-registration-page #user-registration #ur-frontend-form button.ur-submit-button:hover,
body.user-registration-page #user-registration #ur-frontend-form .user-registration-Button:hover {
	background: var(--bnt-blue-deep) !important;
	border-color: var(--bnt-blue-deep) !important;
	color: #fff !important;
}

body.user-registration-page #user-registration #ur-frontend-form button.ur-submit-button:focus-visible,
body.user-registration-page #user-registration #ur-frontend-form .user-registration-Button:focus-visible {
	outline: 2px solid var(--bnt-blue) !important;
	outline-offset: 2px !important;
}

/* ---------- Regisztrációs hivatkozás a doboz alatt ---------- */

body.user-registration-page #user-registration #ur-frontend-form .user-registration-register {
	margin: 18px 0 0 !important;
	font-size: 13.5px !important;
	text-align: left !important;
}

body.user-registration-page #user-registration #ur-frontend-form .user-registration-register a {
	color: var(--bnt-ink-soft) !important;
	text-decoration: none !important;
	border-bottom: 1px solid var(--bnt-rule) !important;
	padding-bottom: 1px !important;
	transition: color .12s ease, border-color .12s ease !important;
}

body.user-registration-page #user-registration #ur-frontend-form .user-registration-register a:hover {
	color: var(--bnt-blue) !important;
	border-bottom-color: var(--bnt-blue) !important;
}

/* ---------- Üzenetek ---------- */

body.user-registration-page #user-registration #ur-frontend-form .user-registration-error,
body.user-registration-page #user-registration #ur-frontend-form .user-registration-message,
body.user-registration-page #user-registration #ur-frontend-form .user-registration-info {
	background: #fff !important;
	border: 1px solid var(--bnt-rule) !important;
	border-left: 3px solid var(--bnt-blue) !important;
	border-radius: 3px !important;
	box-shadow: none !important;
	color: var(--bnt-ink) !important;
	font-family: 'Archivo', sans-serif !important;
	font-size: 13.5px !important;
	line-height: 1.5 !important;
	padding: 12px 14px !important;
	margin: 0 0 16px !important;
	list-style: none !important;
}

body.user-registration-page #user-registration #ur-frontend-form .user-registration-error {
	border-left-color: var(--bnt-danger) !important;
}

body.user-registration-page #user-registration #ur-frontend-form .user-registration-error::before,
body.user-registration-page #user-registration #ur-frontend-form .user-registration-message::before,
body.user-registration-page #user-registration #ur-frontend-form .user-registration-info::before {
	display: none !important;
}

/* ---------- Kis kijelzőn ---------- */

@media (max-width: 480px) {
	body.user-registration-page #user-registration #ur-frontend-form form.user-registration-form {
		padding: 20px 18px 18px !important;
	}

	body.user-registration-page #user-registration #ur-frontend-form .user-registration-before-login-btn {
		align-items: flex-start !important;
		flex-direction: column !important;
		gap: 10px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.user-registration-page * {
		transition: none !important;
	}
}