@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
*{font-family:'Roboto',Arial,sans-serif;box-sizing:border-box;}
html, body{font-family:'Roboto',Arial,sans-serif;height:100vh;overflow:hidden;margin:0;padding:0;}
.page-onb{background:linear-gradient(135deg,#0d57b3,#1d1f44);min-height:100vh;display:flex;align-items:center;justify-content:center;}
.page-onb main{padding:0!important;height:100vh;width:100%;display:flex;align-items:center;justify-content:center;}
.page-onb .container-fluid{padding:0!important;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.onb-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;min-height:100vh;height:100vh;width:100%;}
.onb-card{background:#ffffff;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding: clamp(32px, 6vw, 206px);padding-top: clamp(60px, 7vw, 240px);padding-bottom: clamp(32px, 4vw, 100px);font-family:'Roboto',Arial,sans-serif;position:sticky;top:0;height:100vh;overflow:hidden;gap:14px; padding-top: 240px; padding-bottom: 100px;}
.onb-logo{width:72px;height:72px;border-radius:50%;background:linear-gradient(140deg,#0b66c3,#1f1b4d);margin-bottom:20px;}
.onb-logo-img{width:130px;height:130px;object-fit:contain;margin-bottom:20px;margin-left: -10px;}
.onb-title{font-weight:800;font-size:42px;margin:0;color:#0f1b2c;font-size:54px;font-family:'Roboto',Arial,sans-serif;}
.onb-sub{color:#0f62c0;font-weight:700;margin:6px 0 14px 0;font-size:30px;font-family: 'Roboto',Arial,sans-serif;margin-top: 0.2px;}
.onb-powered{font-weight:700;margin:12px 0;color:#0f1b2c;font-size:24px;font-family:'Roboto',Arial,sans-serif;margin-top: 0.2em;line-height: 1.1;}
.onb-powered .onb-sub{color:#0f62c0;font-size: 40px;}
.onb-sub .exists{font-family:"Noto Sans Math","Cambria Math","STIX Two Math","Segoe UI Symbol",serif;font-weight:700;display:inline-block;transform:translateY(-0.01em) scaleX(0.90);margin:0 -0.02em;font-size:43px;-webkit-text-stroke:0.8px currentColor;margin-left:0.03em;margin-bottom: 0.4em;margin-top: -0.15px;}

.onb-powered span{color:#0f62c0;}
.onb-copy{color:#333;max-width:600px;line-height:1.5;white-space:pre-line;font-size:18px;}
.onb-panel input::placeholder{color:rgba(255,255,255,0.6);}

.onb-panel{background:linear-gradient(180deg,#0b0e1f 0%, #0d57b3 60%, #0a2b6a 100%);padding:56px 36px 48px;color:#fff;position:relative;overflow-y:auto;display:flex;flex-direction:column;justify-content:flex-start;min-height:100%;height:100vh;font-family:'Roboto',Arial,sans-serif;gap:16px;}
.onb-back{align-self:flex-start;background:rgba(255,255,255,0.08);color:#fff;border:1px solid rgba(255,255,255,0.25);padding:10px 16px;border-radius:10px;font-weight:700;transition:all .2s ease;box-shadow:0 6px 16px rgba(0,0,0,0.15);}
.onb-back:hover{background:rgba(255,255,255,0.16);}
.onb-back:active{transform:translateY(1px);}
.onb-tabs{display:flex;gap:10px;margin-bottom:16px;}
.onb-tab{flex:1;border:none;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,0.08);color:#fff;font-weight:700;letter-spacing:0.2px;transition:all .2s ease;}
.onb-tab.active{background:#fff;color:#0d0f1a;box-shadow:0 10px 30px rgba(0,0,0,0.18);}

.onb-stepper{position:relative;min-height:360px;}
.onb-step{transition:transform .35s ease, opacity .25s ease; will-change: transform, opacity;}
.onb-step.hidden{opacity:0;transform:translateX(32px);pointer-events:none;height:0;overflow:hidden;}
.onb-step-title{font-size:20px;font-weight:800;margin-bottom:12px;}
.onb-hint{min-height:20px;font-size:12px;color:#9cd2ff;margin-top:6px;}
.onb-status{font-size:12px;color:#9cd2ff;margin-top:8px;min-height:18px;}
.d-none{display:none!important;}
.gap-2{gap:8px;}

.onb-panel label{color:#f0f3ff;font-weight:600;}
.onb-panel .form-control,.onb-panel .form-select,.onb-panel .form-check-input{background:rgba(255,255,255,0.08);color:#fff;border-color:rgba(255,255,255,0.18);} 
.onb-panel .form-control:focus,.onb-panel .form-select:focus{border-color:#5aa7ff;box-shadow:0 0 0 0.2rem rgba(90,167,255,0.25);} 
.onb-panel .form-text{color:#c9d8ff;}
.onb-panel a{color:#9cd2ff;}
.onb-btn-primary{background:#11af13af;border:none;padding:10px 16px;font-weight:700;border-radius:10px;box-shadow:0 12px 24px rgba(15,123,255,0.32);} 
.onb-btn-primary:disabled{opacity:0.7;}

.onb-2fa-card{
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 14px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	color: #fff;
}

.onb-2fa-qr{
	max-width: 240px;
	width: 100%;
	background: #fff;
	padding: 8px;
	border-radius: 8px;
}

.onb-2fa-instructions{
	font-size: 14px;
	color: #c9d8ff;
	text-align: center;
}

.onb-2fa-email{
	font-size: 13px;
	color: #9cd2ff;
}

/* Make the consent checkbox clearly visible when checked */
.onb-panel .form-check-input {
	width: 18px;
	height: 18px;
	border: 2px solid rgba(156,210,255,0.9);
	background: rgba(255,255,255,0.08);
	box-shadow: none;
}

.onb-panel .form-check-input:checked {
	background-color: #11af13;
	border-color: #11af13;
	box-shadow: 0 0 0 2px rgba(17,175,19,0.25);
}

@media (max-width: 991px){
	.page-onb{min-height:auto;}
	.page-onb main{height:auto;}
	.onb-grid{grid-template-columns:1fr;height:auto;min-height:auto;}
	.onb-card{order:2;position:relative;height:auto;padding:48px 32px;min-height:auto;}
	.onb-panel{order:1;height:auto;min-height:auto;overflow:visible;padding:32px 24px;}
	html, body{height:auto;overflow:auto;}
	.onb-title{font-size:42px;}
	.onb-sub{font-size:24px;}
	.onb-powered .onb-sub{font-size:32px;}
	.onb-copy{font-size:16px;}
}

@media (max-width: 768px){
	.onb-card{padding:32px 20px;}
	.onb-panel{padding:24px 16px;}
	.onb-title{font-size:32px;}
	.onb-sub{font-size:20px;}
	.onb-powered{font-size:18px;}
	.onb-powered .onb-sub{font-size:28px;}
	.onb-sub .exists{font-size:30px;}
	.onb-logo-img{width:80px;height:80px;}
	.onb-copy{font-size:14px;max-width:100%;}
	.onb-tabs{flex-direction:column;gap:8px;}
	.onb-tab{padding:14px 12px;font-size:14px;}
	.onb-step-title{font-size:18px;}
	.onb-stepper{min-height:auto;}
	.d-flex.gap-2{flex-direction:column;}
	.d-flex.gap-2 button{width:100%;}
	.onb-2fa-qr{max-width:200px;}
}

@media (max-width: 480px){
	.onb-card{padding:24px 16px;}
	.onb-panel{padding:20px 12px;}
	.onb-title{font-size:26px;}
	.onb-sub{font-size:16px;}
	.onb-powered{font-size:16px;}
	.onb-powered .onb-sub{font-size:22px;}
	.onb-sub .exists{font-size:24px;}
	.onb-logo-img{width:60px;height:60px;}
	.onb-back{padding:8px 12px;font-size:13px;}
	.onb-btn-primary{padding:12px 14px;font-size:14px;}
	.onb-2fa-qr{max-width:180px;}
	.onb-2fa-card{padding:14px;}
	.onb-toast{padding:12px 16px;font-size:13px;}
}

/* Toast notification */
.onb-toast {
	position: fixed;
	top: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(-100px);
	padding: 16px 24px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 14px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2);
	z-index: 9999;
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	max-width: 90%;
	backdrop-filter: blur(10px);
	opacity: 0;
	transition: none;
}

.onb-toast.enter {
	animation: toastSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.onb-toast.exit {
	animation: toastSlideOut 0.3s ease forwards;
}

.onb-toast.info {
	background: linear-gradient(135deg, rgba(13, 87, 179, 0.95), rgba(29, 31, 68, 0.95));
	color: #fff;
	border: 1px solid rgba(255,255,255,0.15);
}

.onb-toast.error {
	background: linear-gradient(135deg, rgba(220, 53, 69, 0.95), rgba(180, 30, 45, 0.95));
	color: #fff;
	border: 1px solid rgba(255,255,255,0.15);
}

.onb-toast.success {
	background: linear-gradient(135deg, rgba(17, 175, 19, 0.95), rgba(13, 143, 15, 0.95));
	color: #fff;
	border: 1px solid rgba(255,255,255,0.15);
}

.onb-toast-icon {
	font-size: 18px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.2);
	border-radius: 50%;
	flex-shrink: 0;
}

.onb-toast-message {
	flex: 1;
	line-height: 1.4;
}

.onb-toast-close {
	font-size: 20px;
	opacity: 0.7;
	margin-left: 8px;
	transition: opacity 0.2s;
}

.onb-toast-close:hover {
	opacity: 1;
}

@keyframes toastSlideIn {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(-100px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

@keyframes toastSlideOut {
	from {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
	to {
		opacity: 0;
		transform: translateX(-50%) translateY(-30px);
	}
}

/* 1) Nu mai centra containerul – întinde-l pe tot viewport-ul */
.page-onb,
.page-onb main,
.page-onb .container,
.page-onb .container-fluid{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100vh;
}

/* dacă rămâne pe flex, nu-l mai centra */
.page-onb{
  justify-content: stretch !important;
  align-items: stretch !important;
}

/* 2) Grid-ul să fie exact cât viewport-ul */
.onb-grid{
  width: 100vw !important;
  max-width: 100vw !important;
  min-height: 100vh;
  height: 100vh;
  margin: 0 !important;

  /* mai robust decât 1fr 1fr când există conținut/padding mare */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* 3) Asigură-te că item-urile din grid se pot “strânge” și se întind */
.onb-card,
.onb-panel{
  width: 100%;
  min-width: 0;
}

/* 4) Evită orice scroll orizontal accidental */
html, body{
  overflow-x: hidden;
}

/* Wrapper-ul care are ambele clase trebuie să fie GRID, nu FLEX */
.page-onb .container-fluid.onb-grid{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;

  /* NU centra grid-ul în container */
  justify-content: stretch !important;
  align-content: stretch !important;
}

/* Forțează item-urile să umple complet coloanele (să nu se “strângă”) */
.page-onb .container-fluid.onb-grid > .onb-card,
.page-onb .container-fluid.onb-grid > .onb-panel{
  width: 100%;
  min-width: 0;
  justify-self: stretch;
}

/* Scoate centrarea din wrapper-ele de sus (ca să nu-ți mai lase “benzi”) */
.page-onb,
.page-onb main{
  justify-content: stretch !important;
  align-items: stretch !important;
}

/* Evită overflow orizontal */
html, body{ overflow-x: hidden; }