:root {
	--finex: #006b57;
	--finex-dark: #004b3f;
	--finex-deep: #003b32;
	--otp: #6BC02F;

	--text: #17201e;
	--muted: #77817f;
	--border: #dde5e2;
	--surface: #ffffff;
	--bg: #f4f7f6;
}

* {
	box-sizing: border-box;
}

html,
body {
	min-height: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
}

.onex-login {
	min-height: 100vh;
	display: grid;
	grid-template-columns: minmax(440px, 1.08fr) minmax(500px, .92fr);
	overflow: hidden;
}

/* =========================================================
   BRAND OLDAL
   ========================================================= */

.onex-login-brand {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
	color: #fff;

	background:
		radial-gradient(
			circle at 80% 15%,
			rgba(107, 192, 47, .20) 0,
			rgba(107, 192, 47, 0) 34%
		),
		linear-gradient(
			135deg,
			#003c33 0%,
			#005c4c 55%,
			#006f59 100%
		);
}

.onex-login-brand::after {
	content: "";
	position: absolute;
	width: 430px;
	height: 430px;
	right: -250px;
	top: -210px;
	border-radius: 50%;
	border: 80px solid rgba(107, 192, 47, .12);
}

.brand-symbol {
	position: absolute;
	width: 920px;
	height: 920px;
	left: -330px;
	bottom: -360px;

	opacity: .075;
	transform: rotate(-7deg);
	pointer-events: none;
}

.brand-symbol img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.brand-content {
	position: relative;
	z-index: 2;

	width: 100%;
	min-height: 100vh;

	display: flex;
	flex-direction: column;

	padding: clamp(40px, 5vw, 78px);
}

.brand-top {
	display: flex;
	align-items: center;
	gap: 15px;
}

.finex-mark {
	width: 43px;
	height: 43px;
	object-fit: contain;
}

.brand-name {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: .22em;
}

.brand-main {
	margin: auto 0;
	padding: 60px 0;
}

.onex-label {
	display: inline-flex;
	align-items: center;

	margin-bottom: 17px;

	color: var(--otp);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .35em;
}

.onex-label::before {
	content: "";
	display: inline-block;

	width: 42px;
	height: 2px;

	margin-right: 15px;

	background: var(--otp);
}

.brand-main h1 {
	margin: 0;

	font-size: clamp(46px, 5vw, 76px);
	line-height: .98;
	font-weight: 700;
	letter-spacing: -.045em;
}

.brand-main p {
	margin: 30px 0 0;

	font-size: clamp(18px, 1.5vw, 24px);
	line-height: 1.55;
	font-weight: 300;

	color: rgba(255, 255, 255, .75);
}

.brand-footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;

	padding-top: 25px;

	border-top: 1px solid rgba(255, 255, 255, .14);
}

.brand-partners {
	display: flex;
	align-items: center;
	gap: 20px;
}

.partner-finex span {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .16em;
}

.partner-divider {
	width: 1px;
	height: 25px;
	background: rgba(255,255,255,.25);
}

.partner-otp {
	display: flex;
	align-items: center;
}

.partner-otp img {
	display: block;
	max-width: 95px;
	max-height: 34px;
	object-fit: contain;
}

.secure-access {
	display: flex;
	align-items: center;
	gap: 9px;

	font-size: 12px;
	color: rgba(255,255,255,.6);
}

.secure-access i {
	color: var(--otp);
}

/* =========================================================
   LOGIN OLDAL
   ========================================================= */

.onex-login-side {
	min-height: 100vh;

	display: flex;
	align-items: center;
	justify-content: center;

	position: relative;

	padding: 55px;
	background: #fff;
}

.onex-login-side::before {
	content: "";
	position: absolute;

	width: 420px;
	height: 420px;

	right: -260px;
	bottom: -260px;

	border-radius: 50%;
	border: 75px solid rgba(0, 107, 87, .035);

	pointer-events: none;
}

.login-box {
	position: relative;
	z-index: 1;

	width: 100%;
	max-width: 455px;
}

.login-head {
	margin-bottom: 43px;
}

.login-eyebrow {
	margin-bottom: 12px;

	color: var(--finex);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .28em;
}

.login-head h2 {
	margin: 0;

	font-size: 38px;
	font-weight: 700;
	letter-spacing: -.035em;

	color: var(--text);
}

.login-head p {
	margin: 10px 0 0;

	color: var(--muted);
	font-size: 15px;
}

.login-field {
	margin-bottom: 21px;
}

.login-field label {
	display: block;

	margin-bottom: 8px;

	font-size: 13px;
	font-weight: 650;
	color: #37413f;
}

.input-wrap {
	position: relative;
}

.input-wrap input {
	width: 100%;
	height: 58px;

	margin: 0;
	padding: 0 54px 0 48px;

	border: 1px solid var(--border);
	border-radius: 13px;

	background: #fff;

	color: var(--text);
	font-size: 15px;
	font-weight: 450;
	letter-spacing: 0;

	outline: none;

	transition:
		border-color .18s ease,
		box-shadow .18s ease,
		background .18s ease;
}

.input-wrap input::placeholder {
	color: #adb5b3;
	font-weight: 400;
	opacity: 1;
}

.input-wrap input:hover {
	border-color: #bdc9c6;
}

.input-wrap input:focus {
	border-color: var(--finex);

	box-shadow:
		0 0 0 4px rgba(0, 107, 87, .09),
		0 7px 20px rgba(0, 67, 55, .05);
}

.input-icon {
	position: absolute;

	left: 18px;
	top: 50%;

	transform: translateY(-50%);

	width: 17px;

	color: #99a5a2;
	font-size: 15px;

	z-index: 2;

	transition: color .18s ease;
}

.input-wrap:focus-within .input-icon {
	color: var(--finex);
}

/* Jelszó szem */

.password-toggle {
	position: absolute;

	right: 9px;
	top: 50%;

	transform: translateY(-50%);

	width: 40px;
	height: 40px;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 0;

	border: 0;
	border-radius: 9px;

	background: transparent;
	color: #87928f;

	cursor: pointer;

	transition:
		background .15s ease,
		color .15s ease;
}

.password-toggle:hover {
	background: #f0f5f3;
	color: var(--finex);
}

.password-toggle:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 107, 87, .10);
}

.password-toggle i {
	font-size: 16px;
}

/* =========================================================
   LOGIN OPTIONS
   ========================================================= */

.login-options {
	display: flex;
	justify-content: flex-end;

	margin-top: -4px;
	margin-bottom: 28px;
}

.login-options a {
	color: var(--finex);

	font-size: 13px;
	font-weight: 600;
	text-decoration: none;

	transition: color .15s ease;
}

.login-options a:hover {
	color: var(--otp);
}

/* =========================================================
   BELÉPÉS
   ========================================================= */

.login-submit {
	width: 100%;
	height: 59px;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 13px;

	border: 0;
	border-radius: 13px;

	background:
		linear-gradient(
			100deg,
			#63b72c 0%,
			#72c934 100%
		);

	color: #fff;

	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;

	box-shadow: 0 10px 24px rgba(107, 192, 47, .22);

	cursor: pointer;

	transition:
		transform .15s ease,
		box-shadow .15s ease,
		filter .15s ease;
}

.login-submit i {
	font-size: 13px;
	transition: transform .15s ease;
}

.login-submit:hover {
	transform: translateY(-1px);
	filter: brightness(1.025);

	box-shadow: 0 13px 28px rgba(107, 192, 47, .28);
}

.login-submit:hover i {
	transform: translateX(4px);
}

.login-submit:active {
	transform: translateY(0);
}

/* =========================================================
   JELSZÓ RESET + ERROR
   ========================================================= */

#pwreset {
	margin-top: 22px;
}

#login_error {
	margin-top: 18px;
}

#login_error:empty {
	display: none;
}

#login_error .alert {
	margin: 0;

	border: 0;
	border-radius: 11px;

	font-size: 13px;
}

#enter_div:empty {
	display: none;
}

/* =========================================================
   SECURITY FOOTER
   ========================================================= */

.login-security {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	margin-top: 33px;

	color: #a0aaa8;
	font-size: 11px;
	font-weight: 500;
}

.login-security {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;

	margin-top: 33px;

	color: #98a3a0;
	font-size: 11px;
	font-weight: 500;
}

.security-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.login-security i {
	color: var(--finex);
	font-size: 11px;
}

.login-security .recaptcha-security i {
	color: var(--otp);
}

.security-dot {
	width: 3px;
	height: 3px;
	flex: 0 0 3px;

	border-radius: 50%;
	background: #c6cecc;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

	.onex-login {
		grid-template-columns: .9fr 1.1fr;
	}

	.brand-content {
		padding: 45px;
	}

	.brand-main h1 {
		font-size: 52px;
	}

	.brand-footer {
		display: block;
	}

	.secure-access {
		margin-top: 17px;
	}

	.onex-login-side {
		padding: 45px;
	}
}

/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width: 820px) {

	.onex-login {
		display: block;
		min-height: 100vh;
		background: #fff
	}
}

/* =========================================================
   PASSWORD RESET
   ========================================================= */

.reset-box {
	margin-top: 24px;
	padding: 22px;
	border: 1px solid var(--border);
	border-radius: 15px;
	background: #f8faf9;
}

.reset-head {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 20px;
}

.reset-icon {
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	background: rgba(0,107,87,.08);
	color: var(--finex);
}

.reset-icon i {
	font-size: 16px;
}

.reset-head strong {
	display: block;
	color: var(--text);
	font-size: 14px;
	font-weight: 700;
}

.reset-head span {
	display: block;
	margin-top: 2px;
	color: var(--muted);
	font-size: 12px;
}

.reset-input {
	margin-bottom: 14px;
}

.reset-submit {
	width: 100%;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 0;
	border-radius: 11px;
	background: var(--finex);
	color: #fff;
	font-size: 13px;
	font-weight: 650;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}

.reset-submit:hover {
	background: var(--finex-dark);
	transform: translateY(-1px);
}

.reset-submit i {
	font-size: 11px;
	transition: transform .15s ease;
}

.reset-submit:hover i {
	transform: translateX(3px);
}

.reset-message {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin-top: 16px;
	padding: 13px 14px;
	border-radius: 11px;
	font-size: 12px;
	line-height: 1.45;
}

.reset-message > i {
	margin-top: 2px;
	font-size: 14px;
}

.reset-message strong {
	display: block;
	margin-bottom: 2px;
	font-size: 12px;
}

.reset-message span {
	display: block;
}

.reset-success {
	background: rgba(107,192,47,.09);
	color: #466334;
}

.reset-success > i {
	color: var(--otp);
}

.reset-error {
	background: #fff2f2;
	color: #8b4141;
}

.reset-error > i {
	color: #c95656;
}

/* =========================================================
   PASSWORD RESET PAGE
   ========================================================= */

.reset-page-head {
	margin-bottom: 32px;
}

.reset-page-icon {
	width: 54px;
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
	border-radius: 15px;
	background: rgba(0,107,87,.08);
	color: var(--finex);
	font-size: 19px;
}

.reset-page-icon-error {
	background: #fff0f0;
	color: #c95656;
}

.password-strength {
	margin: -5px 0 25px;
}

.strength-bars {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 5px;
	margin-bottom: 7px;
}

.strength-bars span {
	height: 3px;
	border-radius: 3px;
	background: #e1e7e5;
	transition: background .2s ease;
}

.strength-bars span.active {
	background: var(--otp);
}

#strength_text {
	color: var(--muted);
	font-size: 11px;
}

.reset-invalid h2,
.reset-complete h3 {
	margin: 0 0 12px;
	color: var(--text);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -.025em;
}

.reset-invalid p,
.reset-complete p {
	margin: 0 0 28px;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.6;
}

.reset-back {
	text-decoration: none;
}

.reset-back:hover {
	color: #fff;
}

.reset-complete {
	text-align: center;
}

.reset-complete .reset-page-icon {
	margin-left: auto;
	margin-right: auto;
	background: rgba(107,192,47,.10);
	color: var(--otp);
}

.onex-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 17px;
	color: var(--otp);
}

.onex-label::before {
	content: "";
	width: 42px;
	height: 2px;
	margin-right: 5px;
	background: var(--otp);
}

.onex-word {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .35em;
}

.onex-version {
	position: relative;
	top: -1px;
	padding: 4px 8px 3px;
	border: 1px solid rgba(107,192,47,.55);
	border-radius: 6px;
	background: rgba(107,192,47,.10);
	color: var(--otp);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .12em;
	line-height: 1;
}

/* Régi ONEX/O2 embléma mint háttér-watermark */

.onex-watermark {
	position: absolute;
	z-index: 1;

	width: min(39vw, 600px);

	left: 50%;
	top: 54%;

	transform: translate(-50%,-50%) rotate(-5deg);

	opacity: .075;

	pointer-events: none;
	user-select: none;
}

.onex-watermark::after {
	content: "";
	position: absolute;
	inset: 15%;

	background: radial-gradient(
		circle,
		rgba(107,192,47,.12) 0%,
		rgba(107,192,47,.04) 35%,
		transparent 70%
	);

	filter: blur(25px);
}

.onex-watermark img {
	position: relative;
	z-index: 1;

	display: block;
	width: 100%;
	height: auto;

	filter:
		grayscale(1)
		brightness(2.2)
		contrast(.8);

	mix-blend-mode: screen;
}

@keyframes onexWatermarkFloat {
	0%, 100% {
		transform: translate(-50%,-50%) rotate(-5deg) scale(1);
	}

	50% {
		transform: translate(-50%,-52%) rotate(-3deg) scale(1.025);
	}
}

.onex-watermark {
	animation: onexWatermarkFloat 4s ease-in-out infinite;
}

@media (max-width: 820px) {
	.onex-watermark {
		width: 430px;
		left: 70%;
		top: 50%;
		opacity: .045;
	}
}

/* =========================================================
   FINEX × ONEX × OTP — BRAND SIDE V2
   A login/form oldal változatlan. Ezek az override-ok kizárólag
   a brand oldalt és annak mobil megjelenését írják felül.
   ========================================================= */

.onex-login-brand {
	position: relative;
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(circle at 13% 17%,
			rgba(220,55,52,.46) 0%,
			rgba(220,55,52,.18) 18%,
			rgba(220,55,52,0) 40%),
		radial-gradient(circle at 18% 83%,
			rgba(48,57,87,.76) 0%,
			rgba(48,57,87,.28) 34%,
			rgba(48,57,87,0) 61%),
		radial-gradient(circle at 93% 15%,
			rgba(107,192,47,.18) 0%,
			rgba(107,192,47,0) 31%),
		linear-gradient(132deg,
			#30374f 0%,
			#293c51 21%,
			#16504f 52%,
			#006b57 79%,
			#4f9638 100%) !important;
}

.onex-login-brand::before {
	content: "";
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	top: 0;
	height: 4px;
	background: linear-gradient(90deg,
		#db3d3a 0%,
		#db3d3a 28%,
		rgba(219,61,58,.34) 44%,
		rgba(107,192,47,.32) 78%,
		#6BC02F 100%);
}

.onex-login-brand::after {
	width: 410px !important;
	height: 410px !important;
	right: -245px !important;
	top: -220px !important;
	border: 72px solid rgba(107,192,47,.085) !important;
}

/* A FINEX háttérszimbólum már csak textúra. */
.brand-symbol {
	z-index: 0 !important;
	width: 760px !important;
	height: 760px !important;
	left: -360px !important;
	bottom: -355px !important;
	opacity: .032 !important;
	transform: rotate(-9deg) !important;
}

/* Valódi FINEX logo: most ez a brand oldal elsődleges márkajele. */
.brand-top {
	min-height: 82px;
}

.finex-logo-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px 9px;
	border: 1px solid rgba(255,255,255,.28);
	border-radius: 15px;
	background: rgba(255,255,255,.95);
	box-shadow:
		0 14px 36px rgba(9,24,31,.18),
		inset 0 1px 0 rgba(255,255,255,.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.finex-logo-wrap::after {
	content: "";
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: -1px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg,#db3d3a 0 46%,#343b57 46% 100%);
}

.finex-logo-main {
	display: block;
	width: clamp(205px,18vw,300px);
	height: auto;
	max-height: 84px;
	object-fit: contain;
}

/* ONEX: fehér, FINEX piros + OTP zöld közös accentvonallal. */
.onex-login-brand .onex-label {
	color: rgba(255,255,255,.95) !important;
}

.onex-login-brand .onex-label::before {
	background: linear-gradient(90deg,#db3d3a 0 43%,#6BC02F 43% 100%) !important;
}

.onex-login-brand .onex-version {
	border-color: rgba(107,192,47,.55) !important;
	background: rgba(107,192,47,.11) !important;
	color: #a3e66a !important;
}

.brand-main h1 {
	text-shadow: 0 3px 18px rgba(0,0,0,.08);
}

.brand-main p {
	color: rgba(255,255,255,.79) !important;
}

/* Partner footer: FINEX tulajdonosi brand, OTP partneri szerep. */
.brand-footer {
	border-top-color: rgba(255,255,255,.18) !important;
}

.brand-partners {
	gap: 17px !important;
}

.brand-owner {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.brand-owner-label {
	font-size: 13px;
	font-weight: 850;
	letter-spacing: .17em;
	color: #fff;
}

.brand-owner small,
.partner-otp small {
	color: rgba(255,255,255,.53);
	font-size: 9px;
	font-weight: 550;
	letter-spacing: .03em;
}

.partner-divider {
	height: 31px !important;
	background: rgba(255,255,255,.24) !important;
}

.partner-otp {
	display: grid !important;
	grid-template-columns: auto auto;
	align-items: center;
	gap: 9px;
}

.partner-otp img {
	max-width: 86px !important;
	max-height: 30px !important;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,.08));
}

.secure-access {
	font-size: 11px !important;
	color: rgba(255,255,255,.58) !important;
}

.secure-access i {
	color: #a3e66a !important;
}

/* O2 marad a fő háttérgrafika. */
.onex-watermark {
	left: 53% !important;
	top: 54% !important;
	width: min(39vw,600px) !important;
	opacity: .085 !important;
}

.onex-watermark::after {
	background: radial-gradient(circle,
		rgba(255,255,255,.10) 0%,
		rgba(107,192,47,.045) 38%,
		transparent 70%) !important;
}

/* Tablet */
@media (max-width: 1100px) {
	.finex-logo-main {
		width: clamp(180px,21vw,240px);
	}

	.partner-otp {
		grid-template-columns: 1fr;
		gap: 3px;
	}

	.brand-footer {
		align-items: flex-start;
	}
}

/* Mobil: a FINEX brand nem tűnik el, kompakt hero lesz. */
@media (max-width: 820px) {
	.onex-login-brand {
		min-height: auto !important;
	}

	.brand-content {
		min-height: auto !important;
		padding: 25px 24px 27px !important;
	}

	.brand-top {
		min-height: 54px;
	}

	.finex-logo-wrap {
		padding: 7px 12px 6px;
		border-radius: 11px;
	}

	.finex-logo-main {
		width: 165px;
		max-height: 54px;
	}

	.brand-main {
		padding: 30px 0 26px !important;
	}

	.brand-main h1 {
		font-size: 35px !important;
	}

	.brand-main p {
		margin-top: 15px !important;
		font-size: 14px !important;
		line-height: 1.5 !important;
	}

	.brand-footer {
		display: none !important;
	}

	.brand-symbol {
		width: 460px !important;
		height: 460px !important;
		left: -250px !important;
		bottom: -280px !important;
	}

	.onex-watermark {
		width: 360px !important;
		left: 78% !important;
		top: 53% !important;
		opacity: .045 !important;
	}

	.onex-login-side {
		min-height: auto !important;
		padding: 38px 24px 46px !important;
	}
}

@media (max-width: 480px) {
	.finex-logo-main {
		width: 150px;
	}

	.brand-main h1 {
		font-size: 31px !important;
	}

	.brand-main p br {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.onex-watermark {
		animation: none !important;
	}
}