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

@view-transition { navigation: auto; }

/* colors and font sizes */

:root {
  --white: #F4F5F8;
  --lightgrey: #E6E7EB;
  --halfgrey: #B6B8BA;
  --grey: #6E7176;
  --black: #05171D;  
  --beige: #E9E5DC;

  --green: #009992;
  --blue: #164194;
  --cyan: #00B1EB;
  --red: #CC1719;
  --pink: #E5007E;
  --orange: #EB6608;
  --yellow: #F7AC00;

  --gradientgreen: linear-gradient(to bottom, #007a73, #00afa9);
  --gradientblue: linear-gradient(to bottom, #102e7d, #3969b2);
  --gradientcyan: linear-gradient(to bottom, #0096e2, #00c3f0);
  --gradientred: linear-gradient(to bottom, #b80d0e, #d82e31);
  --gradientpink: linear-gradient(to bottom, #d9005e, #eb0098);
  --gradientorange: linear-gradient(to bottom, #e24804, #f08413);
  --gradientyellow: linear-gradient(to bottom, #f39100, #f9be00);
  --gradientblack: linear-gradient(to bottom, #030d10, #0c2e37);
  --gradientbeige: linear-gradient(to bottom, #9DA198, #C8CBC5);
  --gradientbeige2: linear-gradient(to bottom, #DFD9CD, #EEEBE4);

  --small: 13px;
  --norm: 16px;
  --norm2: 18px;

  --title1: 48px;
  --title2: 36px;
  --title3: 30px;
  --title4: 24px;
  --title5: 21px;
}

.s-red { background: var(--red); }
.s-yellow { background: var(--yellow); }
.s-blue { background: var(--blue); }
.bg-green { background: var(--gradientgreen); }
.bg-blue { background: var(--gradientblue); }
.bg-cyan { background: var(--gradientcyan); }
.bg-red { background: var(--gradientred); }
.bg-pink { background: var(--gradientpink); }
.bg-orange { background: var(--gradientorange); }
.bg-yellow { background: var(--gradientyellow); }
.bg-black { background: var(--gradientblack); }
.bg-beige { background: var(--gradientbeige); }
.bg-grey { background: var(--gradientbeige); }

/**********/

body {
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  font-family: Poppins, sans-serif;
  font-size: var(--norm);
  color: #05171D;
  background: var(--white);
  background-size: 100% auto;
}

a { transition: all 1s; transition: all 0.5s; text-decoration: none; color: #000; }
	a:hover, a:active { text-decoration: none; }
p:empty { display: none; }
b, strong { font-weight: 600; }
img { max-width: 100%; height: auto; }
h1,h2,h3,h4,h5 { font-family: 'Poppins', sans-serif; margin: 0 0 20px; text-wrap-style: balance; }
	h1 { font-size: var(--title1); font-weight: 700; }
	h2 { margin-top: 0; font-size: var(--title2); font-weight: 700; }
	h3 { font-size: var(--title3); font-weight: 700; }
blockquote { font-size: 18px; }
.hidden { display: none !important; }

header { width: 100%; margin: 0 0 30px; }
	header .logo { position: relative; display: block; }
		header .logo img { max-width: 250px; max-height: 70px; margin: 20px 0 30px; }
		header .logo span { font-size: 7px; color: #aaa; position: absolute;  bottom: 27.5px; left: 0; }
	header .col-9 { display: flex; justify-content: flex-end; align-items: center; padding-bottom: 30px; }
	header .col-9 div { display: flex; }

.show-menu { display: block; width: 36px; height: 18px; cursor: pointer; z-index: 99999; margin-left: 30px; position: relative; }
	.show-menu .menu-icon__cheeckbox {
		display: block; width: 100%; height: 100%; position: absolute; cursor: pointer; z-index: 2; -webkit-touch-callout: none; opacity: 0; margin: 0;
	}
	.show-menu div { margin: auto; position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 36px; height: 18px; }
	.show-menu span { position: absolute; display: block; width: 36px; height: 2px; background-color: #353535; transition: all 0.2s; top: 8px; right: 0; }
		.show-menu span:first-of-type { top: 0; }
		.show-menu span:last-of-type { top: 16px; width: 50%; left: 0; }
	body.showmenu,
	body:has(#mobile-nav-toggle:checked) { overflow-y: hidden; }
	body.showmenu .show-menu span,
	body:has(#mobile-nav-toggle:checked) .show-menu span { opacity: 0; }
	body.showmenu .show-menu span:first-of-type,
	body:has(#mobile-nav-toggle:checked) .show-menu span:first-of-type { transform: rotate(45deg); top: 1px; opacity: 1; background-color: var(--white); }
	body.showmenu .show-menu span:last-of-type,
	body:has(#mobile-nav-toggle:checked) .show-menu span:last-of-type { transform: rotate(-45deg); top: 1px; opacity: 1; background-color: var(--white); width: 100%; }
	.show-menu:hover span { background-color: var(--cyan); }
	.show-menu a, .show-menu b {
		position: absolute; color: #000; background: #fff; width: 15px; height: 15px; border-radius: 15px; line-height: 15px;
		font-size: 8px; text-align: center; top: 28px; left: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.5); text-decoration: none; z-index: 99999;
	}
	body.showmenu header .logo,
	body:has(#mobile-nav-toggle:checked) header .logo { opacity: 0; pointer-events: none; }

#navigation, #navigation2 { position: relative; }
ul.nav { display: flex; gap: 5px; margin: 0; align-items: flex-end; }
	ul.nav li { list-style: none; padding: 0; }
		ul.nav li a { font-size: 14px; font-weight: bold; transition: all 0.5s; color: var(--blue); position: relative; padding: 0 10px; }
		ul.nav li a:not(.gomb):after { display:table; content: ''; width: 0; height: 2px; background: var(--cyan); transition: all 0.5s; }
		ul.nav li a:not(.gomb):hover:after, #navigation li a.active:after { width: 100%; }
	ul.nav li a:not(.gomb) { transform: translateY(3px); }
	ul.nav li a.gomb { background: var(--cyan); color: var(--white); padding: 3px 12px; border-radius: 50px; text-transform: uppercase; font-size: 13px; }
	ul.nav li a.gomb.reg { background: var(--halfgrey); }
	ul.nav li a.gomb:hover { background: var(--orange); }
ul.nav li a.lang { color: var(--black); font-size: 14px; font-weight: 500; padding: 0 0 0 20px; transform: translateY(1px);  }
	ul.nav li a.lang:after, ul.nav li a.lang + ul li a:after { display: none; }
	ul.nav li a.lang img { height: 12px; margin: 0 5px 0 0; }
	ul.nav li a.lang + ul {
		position: absolute; background: #fff; padding: 10px; border-radius: 10px; width: 100px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); display: none;
	}
	ul.nav li:hover a.lang + ul { display: block; }
	ul.nav li a .badge.red,
	.outer-nav a .badge.red {
		display: inline-block; background: var(--red); color: #fff; border-radius: 100vw;
		padding: 1px 6px; margin-left: 6px; font-size: 11px; font-weight: 700; line-height: 16px; vertical-align: 1px;
	}


.flex { display: flex; flex-direction: row; justify-content: space-between; }

/* .row { border: 1px dashed green; }
.user-info { border: 1px dotted red; } */

.user-info { gap: 10px; margin-bottom: 30px; flex-wrap: wrap; padding: 0; }
	.user-info div {
		background: var(--gradientblack); color: var(--white); padding: 20px 30px; border-radius: 10px; line-height: 120%; flex-grow: 1;
		display: flex; flex-direction: row; align-items: center; line-height: 100%;
	}
	.user-info div:nth-of-type(1) {
		background: url(/images/image_grey.jpg); background-size: cover; max-width: calc(32% - 15px); flex-direction: column; align-items: flex-start;
	}
	.user-info div:nth-of-type(2) { background: var(--gradientgreen); gap: 20px; max-width: 18%; }
	.user-info div:nth-of-type(3) { background: var(--gradientbeige2); color: var(--black); justify-content: space-between; }
	.user-info div.bg-white, .invoice-info div.bg-white {
		background: url(/images/image_white.jpg); background-size: cover; color: var(--black); flex-direction: column; text-align: center; padding: 50px;
		width: 100%; border-radius: 10px;
	}
	.user-info div.bg-white img, .invoice-info div.bg-white img { margin: 0 auto 10px; width: 32px; height: 32px; max-width: 32px; flex: none; align-self: center; }
	.user-info div.bg-cyan, .invoice-info div.bg-cyan {
		background: var(--gradientorange); color: var(--white); flex-direction: column; text-align: center; justify-content: center;
		border-radius: 10px; padding: 50px; width: 100%;
	}
	.user-info div.bg-cyan a, .invoice-info div.bg-cyan a { background: var(--white); padding: 10px 20px; border-radius: 100vw; margin: 15px 0 0; font-size: 14px; }
		.user-info div.bg-cyan a img, .invoice-info div.bg-cyan a img { margin-right: 10px; height: 18px; }
		.user-info div.col-6 { max-width: calc(50% - 5px); }
		.user-info div.bg-blue, .settings-info div.bg-blue {
			background: url(/images/image_blue.jpg); background-size: cover; color: var(--white); padding: 50px; flex-direction: row; text-align: left;
			width: 100%; border-radius: 10px; text-align: center;
		}
		.user-info div.bg-blue a, .settings-info div.bg-blue a {
			background: var(--white); padding: 10px 20px; border-radius: 100vw; white-space: nowrap; margin: 10px auto 0; display: table;
		}
		.user-info div:nth-of-type(3) img { mix-blend-mode: luminosity; }
	.user-info div:nth-of-type(1) { margin: 0; text-wrap-style: balance; line-height: 135%; }
		.user-info div:nth-of-type(1) p { padding: 0 0 0 50px; margin: 0; }
		.user-info div:nth-of-type(2) p { padding: 0; margin: 0; }
		.user-info div p span { text-transform: uppercase; font-weight: 400; font-size: 13px; margin: 10px 0 0; display: inline-block; }
		.user-info div:nth-of-type(1) p span { color: #B8BCBE; }
		.user-info div:nth-of-type(1) p strong { font-size: 21px; }
		    .user-info div:nth-of-type(1) img { position: absolute; margin: 0 0 0 -5px; }
			.user-info div:nth-of-type(1) p strong:last-of-type { font-size: 18px; color: #B8BCBE; }
			.user-info div:nth-of-type(2) strong { font-size: 30px; display: inline-block; margin: 5px 0 0; }

	.userchange {
		display: none; position: absolute; background: var(--white); color: var(--black); padding: 30px; border-radius: 10px;
		top: 100px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); z-index: 999; width: 33vw;
	}
	.user-info div:nth-of-type(1) { position: relative; cursor: pointer; }
		.user-info div:nth-of-type(1):hover .userchange { display: block; }
	.userchange li { cursor: pointer;list-style: none; padding: 5px; border-radius: 5px; transition: all 0.5s; display: flex; gap: 10px; align-items: center; }
		.userchange li span { background: #ccc; color: var(--white); padding: 3px 6px; border-radius: 100px; font-size: 12px; font-weight: bold; }
		.userchange li small { color: var(--grey); }
	.userchange li:hover { background: rgb(219, 238, 247); }
		.userchange li:hover span { color: var(--white); background: var(--cyan); }


section.login {}
	section.login .col-6:first-child > * { padding-right: 30px; }
		section.login .col-6 h3 { margin: 0 0 20px; font-weight: 400; font-size: 27px; }
	section.login .col-6 + .col-6 { text-align: center; }
	section.login .login-logos {
		display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 16px;
	}
		section.login .login-logos .login-logo {
			width: 50%; display: flex; align-items: flex-end; justify-content: center;
		}
		section.login .login-logo-simple { padding-bottom: 12px; }
		section.login .col-6.login-logos img {
			width: 100%; height: auto; max-height: 120px; margin: 0;
			object-fit: contain; object-position: center bottom;
		}
		section.login .login-logos .login-logo-kh img { width: 90%; max-height: 108px; }
	.cyantext { color: var(--cyan); }
	.box { text-align: left; padding: 30px; border-radius: 10px; }
		.box.bg-white { color: var(--black); }
		.box.bg-cyan { color: var(--white); }
		.box h2 { font-size: 27px; font-weight: 400; }
	form { display: flex; flex-direction: column; gap: 15px; }
		form label { font-size: 15px; text-transform: uppercase; }
			form label span { display: block; margin: 0 0 5px; }
		form input:not([type="checkbox"]):not([type="radio"]),
		form button.button { padding: 15px 20px; border-radius: 10px; border: none; color: var(--white); background: #ffffff42; width: 100%; outline: none; }
		form input::placeholder { color: var(--white); }
		form input[type="submit"] {
			border-radius: 100vw; color: var(--white); font-weight: 700; font-size: 15px; text-transform: uppercase; transition: all 0.5s;
		}
		form button.button {
			display: inline-flex; align-items: center; justify-content: center; gap: 8px;
			cursor: pointer; font: inherit; transition: all 0.5s;
		}
		.bg-white form label { color: var(--grey); }
		.bg-white form input:not([type="checkbox"]):not([type="radio"]),
		.bg-white form button.button { border: 1px solid #DADADC; background: #f4f4f4; color: var(--grey); }
		.bg-white form input::placeholder { color: var(--halfgrey); }
		.bg-white form input.btn-primary,
		.bg-white form button.btn-primary { background: var(--cyan); color: var(--white); }
		.bg-white form input.btn-secondary { background: #DADADC; color: var(--grey); text-transform: none; font-weight: 400; }
		.bg-cyan form input.btn-primary,
		.bg-cyan form button.btn-primary { background: var(--blue); }
		.bg-white form input.btn-primary:hover,
		.bg-white form button.btn-primary:hover { background: var(--blue); }
		.bg-white form input.btn-secondary:hover { background: var(--halfgrey); color: var(--white); }
		.bg-cyan form input.btn-primary:hover,
		.bg-cyan form button.btn-primary:hover { background: var(--black); }
		.bg-cyan form small a { color: var(--white); font-weight: 700; }
	section.login .col-12 a.btn-primary {
		background: var(--orange); color: var(--white); padding: 10px 20px; display: block; border-radius: 10px; text-align: center; font-weight: 700;
		text-transform: uppercase; margin: 30px 0;
	}
	section.login .col-12 a.btn-primary:hover { background: var(--red); }

	a.button {
		background: var(--blue); color: var(--white); border-radius: 100vw; font-weight: 700; font-size: 15px; display: inline-block;
		padding: 10px 30px; text-align: center; text-transform: uppercase; transition: all 0.5s;
	}

	.modal-content {
		border: none; border-radius: 10px; overflow: hidden; color: var(--black);
		box-shadow: 0 12px 40px rgba(5, 23, 29, 0.25);
	}
	.modal-header {
		border-bottom: 1px solid var(--lightgrey); padding: 24px 28px 16px; background: var(--white);
	}
	.modal-header .modal-title,
	.modal-title {
		font-size: 22px; font-weight: 600; color: var(--black); margin: 0; line-height: 1.3;
	}
	.modal-body {
		padding: 16px 28px 24px; background: var(--white); font-size: 16px; line-height: 1.5; color: var(--grey);
	}
	.modal-footer {
		border-top: 1px solid var(--lightgrey); padding: 16px 28px 24px; background: var(--white);
		display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end;
	}
	.modal .button,
	.modal button.button {
		display: inline-flex; align-items: center; justify-content: center;
		padding: 12px 24px; border-radius: 10px; border: none; cursor: pointer;
		font: inherit; font-weight: 700; font-size: 15px; width: auto; transition: all 0.5s;
	}
	.modal .button.btn-primary,
	.modal button.button.btn-primary {
		background: var(--cyan); color: var(--white);
	}
	.modal .button.btn-primary:hover,
	.modal button.button.btn-primary:hover {
		background: var(--blue); color: var(--white);
	}
	.modal .button.btn-secondary,
	.modal button.button.btn-secondary {
		background: #DADADC; color: var(--grey);
	}
	.modal .button.btn-secondary:hover,
	.modal button.button.btn-secondary:hover {
		background: var(--halfgrey); color: var(--white);
	}

section.registratin {}
	p.explain { text-transform: none; color: var(--black); padding: 10px; font-size: 14px; }
 	label.checkbox-container { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 10px 20px; }
 		form label.checkbox-container span { margin: 0; text-transform: none; }
	form input[type="checkbox"],
	form input[type="radio"] {
		appearance: none; -webkit-appearance: none; width: 22px; height: 22px; min-width: 22px; margin: 2px 0 0; padding: 0;
		float: none; flex: none; border: 2px solid var(--halfgrey); border-radius: 4px; background-color: #fff; background-image: none;
		cursor: pointer; vertical-align: middle;
	}
	form input[type="checkbox"]:checked {
		background-color: var(--cyan); border-color: var(--cyan);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E");
		background-repeat: no-repeat; background-position: center; background-size: 14px 14px;
	}
	.form-check.reg-elfogad { display: flex; align-items: flex-start; gap: 12px; padding: 4px 0 8px; }
		.form-check.reg-elfogad .form-check-input { position: static; margin: 2px 0 0; }
		.form-check.reg-elfogad .form-check-label {
			text-transform: none; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--black); cursor: pointer;
		}


/* .list-header > *, .list-item > * { border: 1px dashed; } */

section.services {}
	section .heading h3 { margin: 0 0 30px; }
	section.services .heading .col-3 { display: flex; gap: 20px; justify-content: flex-end; padding: 10px 0 30px; }
	.view-toggle { font-size: 13px; font-weight: 700; opacity: 0.5; }
		.view-toggle.active { opacity: 1; }
	.view-toggle img { height: 18px; margin: -1px 10px 0 0; }
	.service-list { flex-direction: column; }
		.list-header .col-4 { margin-left: 55px; padding-left: 10px; }
		.list-header .col-2, .list-header .col-1 { text-align: right; }
		.list-item { display: flex; align-items: center; justify-content: space-between; background: var(--lightgrey); padding: 10px; border-radius: 10px; margin: 5px 0; }
			.list-item span { font-size: 15px; }
			.list-item img { width: 20px; margin: 3px 30px 0 15px; z-index: 2; }
			.list-item h4 { font-size: 16px; margin: 15px 0; }
			.list-item .col-2, .list-item .col-1 { text-align: right; }
			.list-item .price { margin: 0 15px 0 2px; }
			.list-item .quantity { margin: 0 12px 0 12px; }
			.list-item span.badge { background: var(--green); border-radius: 100vw; padding: 5px 10px; font-size: 11px; }
			.list-item span.badge.cyan { background: var(--cyan); }
			.list-item span.badge.red { background: var(--red); }
			.list-item span.badge.grey { background: var(--grey); }
			.list-item span.badge.yellow { background: var(--yellow); }
		.service-list .list-item > span.col-3 {
			display: flex; align-items: center; justify-content: flex-end; min-width: 0;
		}
		.service-list .list-item button.button {
			display: inline-flex; align-items: center; justify-content: center;
			width: auto; max-width: 100%; margin: 0; padding: 10px 14px;
			border: none; border-radius: 10px; cursor: pointer;
			font: inherit; font-weight: 700; font-size: 13px; line-height: 1.35;
			text-align: center; text-transform: none; white-space: normal;
			transition: all 0.5s;
		}
		.service-list .list-item button.button.btn-primary {
			background: var(--cyan); color: var(--white);
		}
		.service-list .list-item button.button.btn-primary:hover {
			background: var(--blue); color: var(--white);
		}
		.huseg-mlabel { display: none; }
		section.loyalty .service-list .list-header,
		section.loyalty .service-list .list-item {
			display: grid;
			grid-template-columns: 50px minmax(0, 1.6fr) minmax(110px, 1fr) minmax(100px, 0.9fr) minmax(100px, 0.9fr) minmax(180px, 1.4fr);
			align-items: center;
			column-gap: 8px;
			width: 100%;
			box-sizing: border-box;
			position: relative;
		}
		section.loyalty .service-list .list-header::before { content: ''; }
		section.loyalty .service-list .list-header > div {
			margin: 0; padding: 0; width: auto; max-width: none; text-align: left;
		}
		section.loyalty .service-list .list-header > div:last-child,
		section.loyalty .service-list .list-item > .huseg-action {
			text-align: right; justify-self: stretch;
		}
		section.loyalty .service-list .list-item > img {
			position: absolute; z-index: 2;
			left: 20px; top: 50%; transform: translateY(-50%);
			width: 20px; height: 20px; max-width: none; margin: 0; padding: 0;
			object-fit: contain; object-position: center;
		}
		section.loyalty .service-list .list-item > .huseg-name { grid-column: 2; }
		section.loyalty .service-list .list-item > .huseg-end { grid-column: 3; }
		section.loyalty .service-list .list-item > .huseg-akt { grid-column: 4; }
		section.loyalty .service-list .list-item > .huseg-normal { grid-column: 5; }
		section.loyalty .service-list .list-item > .huseg-action { grid-column: 6; }
		section.loyalty .service-list .list-item:before {
			margin: 0; left: 10px; top: 50%; transform: translateY(-50%);
		}
		section.loyalty .service-list .list-item h4,
		section.loyalty .service-list .list-item > span {
			width: auto; max-width: none; margin: 0; min-width: 0; text-align: left;
		}
		section.loyalty .service-list .list-item > .price { margin: 0; }
		section.loyalty .service-list .list-item > .huseg-action {
			display: flex; align-items: center; justify-content: flex-end;
		}
		section.loyalty .service-list .list-item button.button {
			width: auto; max-width: 100%;
		}
		.list-item:before { content: ''; width: 40px; height: 40px; border-radius: 5px; margin: 5px 0 0 5px; position: absolute; z-index: 1; }
			.list-item.type-internet, .list-item.type-internet:before { background: var(--gradientorange); }
			.list-item.type-tv, .list-item.type-tv:before { background: var(--gradientyellow); }
			.list-item.type-telefon, .list-item.type-telefon:before { background: var(--gradientred); }
			.list-item.type-egyeb:before { background: transparent; }
		section.services .list-view .list-header,
		section.services .list-view .list-item {
			display: grid;
			grid-template-columns: 50px minmax(0, 2.2fr) minmax(100px, 1fr) minmax(130px, 1.1fr) minmax(50px, 0.55fr) minmax(120px, 1.1fr);
			align-items: center;
			column-gap: 8px;
			justify-content: stretch;
			box-sizing: border-box;
			width: 100%;
		}
		section.services .list-view .list-header { margin: 0; }
		section.services .list-view .list-header::before { content: ''; }
		section.services .list-view .list-header .col-4,
		section.services .list-view .list-header .col-2,
		section.services .list-view .list-header .col-1 {
			margin: 0; padding: 0; width: auto; max-width: none; flex: none;
		}
		section.services .list-view .list-item { position: relative; overflow: hidden; }
		section.services .list-view .list-item > img {
			position: absolute; z-index: 2;
			left: 20px; top: 50%; transform: translateY(-50%);
			width: 20px; height: 20px; max-width: none; margin: 0; padding: 0;
			object-fit: contain; object-position: center;
		}
		section.services .list-view .list-item > h4 { grid-column: 2; }
		section.services .list-view .list-item > .price { grid-column: 3; }
		section.services .list-view .list-item > .svc-period { grid-column: 4; }
		section.services .list-view .list-item > .svc-qty { grid-column: 5; }
		section.services .list-view .list-item > .svc-artype { grid-column: 6; }
		section.services .list-view .list-item:before { margin: 0; left: 10px; top: 50%; transform: translateY(-50%); }
		section.services .list-view .list-item h4,
		section.services .list-view .list-item .col-2,
		section.services .list-view .list-item .col-1,
		section.services .list-view .list-item .col-4 {
			width: auto; max-width: none; margin: 0; min-width: 0;
		}
		section.services .list-view .list-item .price,
		section.services .list-view .list-item .quantity { margin: 0; }
		section.services .list-view .list-item .svc-artype {
			justify-self: end; text-align: right; padding-right: 4px;
			overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
		}
		section.services .list-view .list-item .svc-artype .badge {
			display: inline-block; max-width: 100%; box-sizing: border-box;
			overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
		}
		.list-view {}
			.list-view .list-container { flex-direction: column; }
			.list-view .list-item { background: var(--lightgrey) !important; }
			.list-view .price { font-weight: 700; }
		.grid-view {}
			.grid-view .list-header { display: none; }
			.grid-view .list-container { gap: 10px; flex-wrap: wrap; padding: 10px 0; justify-content: flex-start; }
			.grid-view .list-item { width: calc(100% / 3 - 20px / 3); position: relative; flex-direction: column; padding: 30px; margin: 0; align-items: flex-start; }
			.grid-view .list-item:before { display: none; }
			.grid-view .list-item > * { z-index: 2; color: var(--white); }
			.grid-view .list-item.type-egyeb > * { color: var(--black); }
			.grid-view .list-item img { width: 60px; }
				.grid-view .list-item.type-egyeb img { width: 40px; }
			.grid-view .list-item h4 { width: 100%; font-size: 24px; margin: 20px 0 5px; font-weight: 700; }
				.grid-view .list-item.type-egyeb h4 { font-size: 21px; }
			.grid-view .list-item .price { font-size: 21px; margin-bottom: 10px; }
			.grid-view .list-item span:not(.badge) { width: 100%; text-align: left; margin: 0; padding: 0; }
			.grid-view .list-item .badge { position: absolute; right: 30px; top: 30px; background: var(--white); text-transform: uppercase; }
				.grid-view .list-item.type-internet .badge { color: var(--orange); background: var(--white); }
				.grid-view .list-item.type-tv .badge { color: var(--yellow); background: var(--white); }
				.grid-view .list-item.type-telefon .badge { color: var(--red); background: var(--white); }
		.list-header { background: #fff; padding: 10px; border-radius: 10px; font-size: 14px; color: var(--grey); font-weight: 700; }
		.list-footer { background: var(--halfgrey); color: var(--white); padding: 10px; border-radius: 10px; font-weight: 700; }
			.list-footer .col-6:last-child { text-align: right; }
			a.b-check {
				margin: 30px auto; background: #fff; padding: 8px 16px; border-radius: 5px; display: flex; width: fit-content;
				align-items: center; gap: 10px; font-weight: 700; font-size: 14px; color: var(--grey);
			}
			a.b-check img { width: 22px; height: 22px; margin: 0; }

::view-transition-group(*) { animation-duration: 0.5s; }

section.invoices {}
	section.invoices .row:first-child { display: flex; flex-direction: row; align-items: stretch; gap: 10px; margin-bottom: 30px; }
		section.invoices .user-info, section.invoices .invoice-info { width: calc(50% - 5px); margin: 0; padding: 0; align-self: stretch; }
			section.invoices .user-info div:nth-of-type(1) { max-width: calc(63.5% - 10px); }
			section.invoices .user-info div:nth-of-type(2) { max-width: 36.5%; }
		section.invoices .invoice-info { flex-direction: column; }
			section.invoices .invoice-info .tartozas-info {
				display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; min-height: 0;
			}
			section.invoices .invoice-info .bg-white,
			section.invoices .invoice-info .bg-cyan {
				flex: 1 1 auto; width: 100%; height: 100%; box-sizing: border-box;
				display: flex; flex-direction: column; justify-content: center;
			}
	section.invoices .list-item { background: var(--halfgrey); cursor: pointer; }
	section.invoices .list-item:before { display: none; }
	.invoice-list { flex-direction: column; }
		.invoice-list .list-header > div:first-of-type { text-align: left; padding-left: 30px; margin-right: 35px; }
		.invoice-list .list-item .col-2:first-of-type { text-align: left; font-weight: 700; color: var(--black); }
		.invoice-list .list-header > div.inv-h-debt, .invoice-list .list-item > span.inv-debt { width: 10%; }
		.invoice-list .list-item img { margin: 0 10px 0 0; }
	.szlatet { background: #fff; border-radius: 10px; padding: 8px 12px 12px; margin: 0 0 8px; width: 100%; box-sizing: border-box; }
		.szlatet .fej, .szlatet .szla-row {
			display: grid; grid-template-columns: 48px minmax(0, 1fr) 88px 120px 120px; column-gap: 8px; align-items: center; width: 100%;
		}
		.szlatet .fej { color: var(--grey); font-size: 13px; font-weight: 700; padding: 4px 0 8px; }
		.szlatet .szla-row { border-top: 1px solid var(--lightgrey); padding: 8px 0; }
		.szlatet .c-name { min-width: 0; overflow-wrap: anywhere; }
		.szlatet .c-qty, .szlatet .c-price, .szlatet .c-afa { text-align: right; white-space: nowrap; }
		.szlatet .hiv-resz {
			display: inline-flex; align-items: center; justify-content: center; width: auto; margin: 14px 0 4px;
			padding: 10px 24px; border: none; border-radius: 100vw; background: var(--cyan); color: var(--white);
			font-family: inherit; font-size: 14px; font-weight: 700; text-transform: uppercase; cursor: pointer;
			transition: background 0.5s;
		}
		.szlatet .hiv-resz:hover { background: var(--blue); }
	.pay-icon { width: 22px; height: 22px; display: block; }
		.pay-icon.paid { color: var(--green); }
		.pay-icon.unpaid { color: var(--red); }
		.pay-icon.partial { color: var(--yellow); }
	.pagination { background: #fff; padding: 8px 16px; margin: 30px auto; border-radius: 5px; gap: 30px; }
		.pagination a { color: var(--halfgrey); background: var(--lightgrey); aspect-ratio: 1 / 1; text-align: center; border-radius: 10vw; }
	.expand { background: #fff; padding: 30px; color: var(--grey); display: flex; flex-direction: column; }
		.expand div { border-top: 1px solid var(--lightgrey); padding: 10px 0; display: flex; justify-content: space-between; }
			.expand div.h { color: var(--black); font-weight:700; border-top: none; font-size: 15px; }
			.expand div span { width: 120px; text-align: right; }
			.expand div span:first-child { width: 30px; text-align: left; }
			.expand div span:nth-child(2) { width: 360px; text-align: left; }
			.expand div span:nth-child(3) { width: 240px; text-align: left; }

	.popup { display: none; background: #ffffff55; position: fixed; top: 0; left: 0; width: 100vw;  height: 100vh; backdrop-filter: blur(10px); z-index: 99999; }
		.popup.active { display: flex; justify-content: center; align-items: center; }
		.popup > div { background: #fff; padding: 50px; border-radius: 10px; box-shadow: 0 0 50px rgba(0,0,0,0.3); max-width: 60vw; }
		.popup ul, .khpay .bg-white ul { margin: -5px 0 30px; padding: 0; }
			.popup li, .khpay .bg-white li {
				list-style: none; border-bottom: 1px solid #ddd; padding: 5px 0; display: flex; justify-content: space-between; align-items: center;
			}
			.popup li span, .khpay .bg-white span {
				font-weight: 500; color: var(--grey); text-transform: uppercase; font-size: 13px; display: inline-block; width: 180px;
			}
		.popup p a,.khpay .bg-white p a { font-weight: bold; color: var(--cyan); }
		.khpay .bg-white .flex { justify-content: flex-start; gap: 100px; padding: 30px 0 0; }
			.khpay .bg-white .flex ul { width: 50%; }
		b.red { color: red; } b.green { color: green; }

section.payments {}
	section.payments .heading .col-3 { display: flex; align-items: flex-start; justify-content: flex-end; gap: 3px; padding-right: 10px; }
	section.payments .heading .col-3 a { border-radius: 5px; background: var(--beige); color: #C7C0AD; font-weight: 700; padding: 5px 10px; }
	section.payments .heading .col-3 a.active { background: #C7C0AD; color: var(--white); }
	section.payments .invoice-list .list-header > div:first-of-type { padding-left: 40px; }
	section.payments .invoice-list .list-header > div { text-align: left; }
	section.payments .invoice-list .list-header > div:last-child { text-align: right; }
	section.payments .invoice-list .list-item > span { text-align: left; }
	section.payments .invoice-list .list-item > span:last-child { text-align: right; font-weight: 700; color: var(--black); }
	section.payments .invoice-list .list-item > span:first-of-type { font-weight: 700; color: var(--black); }
	section.payments .invoice-list .list-item span small { display: block; font-size: 13px; color: var(--grey); }
	section.payments .list-view .list-header,
	section.payments .list-view .list-item {
		display: grid;
		grid-template-columns: 40px minmax(0, 1.2fr) minmax(70px, 0.8fr) minmax(120px, 1.4fr) minmax(90px, 1.2fr) minmax(80px, 0.9fr);
		align-items: center;
		column-gap: 8px;
		justify-content: stretch;
		box-sizing: border-box;
		width: 100%;
	}
	section.payments .list-view .list-header { margin: 0; }
	section.payments .list-view .list-header::before { content: ''; }
	section.payments .list-view .list-header > div {
		margin: 0; padding: 0 !important; width: auto; max-width: none; flex: none;
	}
	section.payments .list-view .list-item { position: relative; overflow: hidden; }
	section.payments .list-view .list-item > img {
		margin: 0; width: 20px; justify-self: center;
	}
	section.payments .list-view .list-item > span {
		width: auto; max-width: none; margin: 0; min-width: 0;
	}
	section.payments .list-view .list-item .pay-amount {
		justify-self: end; text-align: right; white-space: nowrap;
	}
	section.payments .list-view .list-item .pay-status {
		overflow: hidden;
	}

section.azonositok {}
	section.azonositok .tv-list { width: 100%; display: block; }
	section.azonositok .tv-list .list-container {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		width: 100% !important;
		max-width: 100% !important;
		align-items: stretch;
	}
	section.azonositok .tv-list .list-item {
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
		height: 100%;
		min-height: 180px;
		margin: 0;
		background: var(--gradientblue);
		padding: 28px 120px 28px 30px;
		display: flex !important;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		color: var(--white);
		position: relative;
		border-radius: 10px;
		box-sizing: border-box;
		gap: 12px;
	}
	section.azonositok .tv-list .list-item:before { display: none !important; content: none !important; }
	section.azonositok .tv-list .list-item:nth-child(2) { background: var(--gradientred); }
	section.azonositok .tv-list .list-item.eligible { cursor: pointer; }
	section.azonositok .tv-list .list-item.is-open { outline: 3px solid var(--cyan); outline-offset: 2px; }
	section.azonositok .tv-list .list-item.inactive {
		background: #c8c8cc !important;
		color: #666;
		opacity: 0.85;
		cursor: default;
		filter: grayscale(0.35);
	}
	section.azonositok .tv-list .list-item .tv-card-logo,
	section.azonositok .tv-list .list-item > img {
		position: absolute;
		top: 24px;
		right: 24px;
		width: auto !important;
		max-width: 100px;
		max-height: 36px;
		height: auto;
		margin: 0 !important;
		opacity: 0.95;
		z-index: 2;
		mix-blend-mode: normal;
	}
	section.azonositok .tv-list .list-item.inactive .tv-card-logo { opacity: 0.45; filter: grayscale(1); }
	section.azonositok .tv-list .list-item h4 {
		font-size: 22px; font-weight: 700; margin: 0; line-height: 1.25; width: 100%;
	}
	section.azonositok .tv-list .list-item .tv-status {
		display: block;
		font-size: 14px;
		line-height: 1.4;
		width: 100%;
	}
	section.azonositok .detailed-view.is-hidden { display: none !important; }
	section.azonositok .tv-steps {
		list-style: none; margin: 10px 0 0; padding: 0; width: 100%;
		display: flex; flex-direction: column; gap: 12px; counter-reset: tvstep;
	}
	section.azonositok .tv-steps > li {
		background: var(--lightgrey); border-radius: 10px; padding: 20px 24px 20px 64px;
		position: relative; color: var(--black); font-size: 15px; line-height: 1.45;
	}
	section.azonositok .tv-steps > li.is-hidden { display: none !important; }
	section.azonositok .tv-steps > li::before {
		counter-increment: tvstep;
		content: counter(tvstep);
		position: absolute; left: 16px; top: 18px;
		width: 36px; height: 36px; border-radius: 50%;
		background: var(--halfgrey); color: #fff; font-weight: 700; font-size: 16px;
		display: flex; align-items: center; justify-content: center;
	}
	section.azonositok .detailed-view { margin-top: 48px; }
	section.azonositok .detailed-view h3 {
		display: flex; align-items: center; justify-content: space-between; gap: 24px;
		padding: 24px 30px; margin: 0;
	}
	section.azonositok .detailed-view h3 img {
		position: static; right: auto; top: auto; transform: none;
		flex: 0 0 auto; max-height: 32px; width: auto; margin: 0;
	}
	section.azonositok .tv-steps a {
		color: var(--blue); text-decoration: underline; font-weight: 700;
	}
	section.azonositok .tv-steps button,
	section.azonositok .tv-steps .btn,
	section.azonositok .tv-steps .button {
		background: var(--cyan); color: var(--white); border: none; border-radius: 100vw;
		font-weight: 700; font-size: 14px; text-transform: uppercase;
		padding: 10px 22px; width: auto !important; display: inline-block; cursor: pointer;
		margin-top: 10px;
	}
	section.azonositok .tv-steps button:hover,
	section.azonositok .tv-steps .btn:hover,
	section.azonositok .tv-steps .button:hover { background: var(--blue); color: var(--white); }

section.settings {}
	section.settings .row:first-child { display: flex; flex-direction: row; gap: 10px; margin-bottom: 30px; }
		section.settings .user-info, section.settings .settings-info { width: calc(50% - 5px); margin: 0; padding: 0; }
			section.settings .user-info div:nth-of-type(1) { max-width: calc(63.5% - 10px); }
			section.settings .user-info div:nth-of-type(2) { max-width: 36.5%; }
	section.settings .heading .col-3 { display: flex; gap: 20px; justify-content: flex-end; padding: 10px 0 30px; }
	section.settings .list-item { cursor: pointer; }
	section.settings .list-item.active { background: #DBEEF7 !important; }
	section.settings .list-item:before { display: none; }
	section.settings .service-list .list-header > div { text-align: left; }
	section.settings .service-list .list-header > div:last-child { text-align: right; }
	section.settings .service-list .list-item > span { text-align: left; color: var(--black); }
	section.settings .service-list .list-item > span:last-child { text-align: right; float: right; }
		section.settings .service-list .list-item > span:last-child a { display: inline-block; margin-left: 5px; }
		    section.settings .service-list .list-item > span:last-child a.activate {
    			color: var(--halfgrey); font-weight: bold; text-transform: uppercase; font-size: 10px; border: 2px solid; padding: 3px 5px;
    			line-height: 100%; border-radius: 10vw;
    		}
			section.settings .service-list .list-item > span:last-child a img { margin: 0; height: 20px; }
			section.settings .service-list .list-item > span:last-child a.activate { display: none; }
	section.settings .service-list .list-item > span:first-of-type { font-weight: 700; color: var(--black); }
	section.settings .grid-view .list-item { width: calc(100% / 4 - 30px / 4); justify-content: flex-start; }
	section.settings .grid-view .list-item > span:first-of-type { font-size: 18px; }
	section.settings .grid-view .list-item span.badge { position: relative; top: auto; right: auto; margin: 0; }
		section.settings .grid-view .list-item span.badge.grey { display: table; margin: 10px 0 0; }
	section.settings .grid-view .list-item span.name { font-weight: 700; color: var(--black); font-size: 21px; margin: 10px 0 5px; }
	section.settings .grid-view .list-item span.address { margin: 0 0 10px; }
	section.settings .grid-view .list-item span.paymode, section.settings .grid-view .list-item span.eszamla { color: var(--grey); }
	section.settings .grid-view .list-item span.paymode:before { content: "FizetĂŠsi mĂłd: " }
	section.settings .grid-view .list-item span.eszamla:before { content: "E-szĂĄmla: "; }
	section.settings .grid-view .list-item span a { width: 20px; position: absolute; top: 15px; right: 15px; }
	section.settings .grid-view .list-item > span:last-child a.activate { top: 17.5px; right: 36px; width: auto; opacity: 0; transition: all 0.5s; }
		section.settings .grid-view .list-item:hover > span:last-child a.activate { opacity: 1; display: block; }
	section.settings .list-view .address br { display: none; }
	section.settings .list-item .eszamla {
		display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
	}
	section.settings .list-item .eszamla .button.eszamlaBtn {
		width: auto; margin: 0; padding: 6px 14px; border-radius: 100vw;
		background: var(--cyan); color: var(--white); border: none;
		font-size: 12px; font-weight: 700; text-transform: uppercase; cursor: pointer;
		display: inline-flex; align-items: center; justify-content: center;
	}
	section.settings .list-item .eszamla .button.eszamlaBtn:hover {
		background: var(--blue);
	}
	section.settings .list-item .remove-szd-text { display: none; }
	
	a.b-blue,
	button.b-blue {
		margin: 30px auto; background: var(--blue); padding: 8px 16px; border-radius: 5px; display: table; font-weight: 700; font-size: 14px; color: var(--white);
		border: none; cursor: pointer; font: inherit;
	}
	@media (min-width: 641px) {
		section.settings form button.b-blue,
		section.settings button.b-blue {
			width: auto;
		}
	}
	section.settings .uj-ugyfel-actions {
		display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; flex-direction: row;
	}
	section.settings .uj-ugyfel-actions .button {
		width: auto;
	}
	section.settings #uj-ugyfel-form form.beallitas-szd-form {
		margin: 15px 0 0;
	}
	section.settings #ujugyfelbtn {
		margin: 20px 0 10px;
		display: inline-flex; align-items: center; justify-content: center;
		padding: 12px 24px; border-radius: 10px; border: none; cursor: pointer;
		font: inherit; font-weight: 700; font-size: 15px; width: auto;
		background: var(--cyan); color: var(--white); transition: all 0.5s;
	}
	section.settings #ujugyfelbtn:hover {
		background: var(--blue); color: var(--white);
	}
	@media (max-width: 640px) {
		section.settings #ujugyfelbtn { width: 100%; }
	}
	section.settings .uj-ugyfel-card {
		max-width: 640px; margin: 20px auto; width: 100%;
	}
	section.settings .uj-ugyfel-card .box {
		box-shadow: 0 12px 40px rgba(5, 23, 29, 0.18);
	}
	section.settings .settings-info .bg-blue {
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; height: 100%;
	}
	section.settings .settings-info .bg-blue a.button {
		background: var(--white); color: var(--blue); border-radius: 100vw; padding: 10px 24px;
		font-weight: 700; text-transform: uppercase; margin: 0;
	}

footer { background: url(/images/rainbow.svg) no-repeat bottom center; padding: 60px 0; color: var(--blue); }
	footer .container { border-top: 1px solid #849AC3; }
		footer .container .row { width: 100%; }
	footer .foottext { color: var(--blue); }
	footer img { height: 30px; margin: 30px 0; }
	footer .social { margin: 90px 0 10px; }
	footer .social a { color: var(--blue); font-size: 12px; font-weight: 700; text-transform: uppercase; }
		footer .social a img { height: 20px; margin: 0 10px 0 0; }
	footer .flex { align-items: center; justify-content: flex-start; gap: 30px; }
	footer .foottext { font-size: 14px; }
	footer .footnav { margin: 90px 0 30px; font-size: 14px; }
		footer .row:last-child .footnav { margin: 0; }
		footer .footnav h5 { font-size: 15px; text-transform: uppercase; }
		footer .footnav .flex { justify-content: flex-start; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
			footer .footer-office-item { width: calc(20% - 80px / 5); }

.mobile-nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(5, 23, 29, 0.45); z-index: 10000; cursor: pointer; }
body.showmenu .mobile-nav-backdrop,
body:has(#mobile-nav-toggle:checked) .mobile-nav-backdrop { display: block; }

.outer-nav { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: 35vw; transition: transform 0.45s ease; padding: 100px 50px; z-index: 10001; transform: translateX(110%); pointer-events: none; overflow-y: auto; background: var(--gradientcyan); }
	.outer-nav > .container {
		z-index: 2; position: relative; height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-evenly;
	}
	.outer-nav:after { content: ''; background: var(--gradientcyan); width: 100%; height: 100%; top: 0; right: 0; position: absolute; z-index: 1; } 
	.outer-nav:after { box-shadow: -50px 0px 100px rgba(0,0,0,0.5); } 
.outer-nav ul { display: flex; margin: 0; padding: 0; align-items: flex-start; flex-direction: column; width: 100%; list-style: none; }
	.outer-nav ul li { list-style: none; margin: 0 0 15px; width: 100%; }
		.outer-nav ul li a { display: inline-block; font-size: 18px; font-weight: 500; color: var(--white); padding: 5px 0; }
		.outer-nav ul li a:not(.gomb):not(.lang):after { display: table; content: ''; width: 0; height: 2px; background: var(--white); transition: all 0.5s; }
		.outer-nav ul li a:hover { color: var(--white); }
		.outer-nav ul li a:hover:after,
		.outer-nav ul li a.active:after { width: 100%; background: var(--white); }
		.outer-nav ul li a.gomb { background: var(--white); color: var(--blue); padding: 8px 16px; border-radius: 50px; text-transform: uppercase; font-size: 14px; font-weight: 700; margin-top: 6px; }
		.outer-nav ul li a.gomb.reg { background: var(--blue); color: var(--white); }
		.outer-nav ul li a.gomb:hover { background: var(--orange); color: var(--white); }
	.outer-nav ul li a.lang { font-size: 14px; color: var(--white); font-weight: 700; padding: 8px 0; }
		.outer-nav ul li a.lang.active { background: #ffffff22; border-radius: 10vw; color: var(--white); }
		.outer-nav ul li a.lang img { height: 20px; width: auto; margin-right: 10px; }
	.outer-nav ul ul { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; margin: 0; }
		.outer-nav ul ul li { width: auto; margin: 0; }
	.outer-nav li:has(> a.lang) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
body.showmenu .outer-nav,
body:has(#mobile-nav-toggle:checked) .outer-nav { top: 0; right: 0; transform: translateX(0); pointer-events: auto; }

/******************** RESPONSIVE ********************/

/* sm - tablet (mobile first) */ @media (min-width: 640px) {}
/* md - tablet landscape or really small desktop screen */ @media (min-width: 768px) {}
/* lg - smaller desktop screen */ @media (min-width: 1024px) {}
/* xl - normal/big desktop screen */ @media (min-width: 1280px) {}
/* 2xl - huge screen or tv */ @media (min-width: 1536px) {}

/* Desktop / tablet: payment start button natural width */
@media (min-width: 641px) {
	form #startFizetes,
	form #eszamla_start,
	form #atreg-start,
	form #atreg-ok {
		width: auto;
		align-self: flex-start;
	}
}

/* Desktop only */
@media (min-width: 1024px) {

	.desktophide { display: none !important; }

}

/* Tablet or small screen */
@media (min-width: 641px) and (max-width: 1023px) {

	.desktophide { display: none !important; }

}

/* Mobile only */
@media (max-width: 640px) {

	.show-menu {
		position: fixed; top: 16px; right: 14px; margin: 0; padding: 0; width: 48px; height: 48px;
		background: var(--blue); border-radius: 12px; transform: none; overflow: visible; z-index: 10002;
		display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.18);
	}
		.show-menu div { position: relative; top: auto; right: auto; left: auto; bottom: auto; width: 22px; height: 18px; margin: 0; }
	.show-menu > div > span { width: 22px; background-color: var(--white); }
		.show-menu > div > span:last-of-type { width: 14px; }
		.show-menu:hover > div > span { background-color: var(--white); }
		body.showmenu .show-menu,
		body:has(#mobile-nav-toggle:checked) .show-menu { background: transparent; box-shadow: none; position: fixed; z-index: 10002; overflow: visible; }
	.show-menu > span.menu-huseg-badge {
		position: absolute !important;
		top: -4px !important;
		right: -4px !important;
		left: auto !important;
		bottom: auto !important;
		z-index: 3;
		display: inline-flex !important; align-items: center; justify-content: center;
		min-width: 20px; height: 20px !important; padding: 0 5px; margin: 0;
		background: var(--red) !important; color: #fff; border-radius: 100vw;
		font-size: 11px; font-weight: 700; line-height: 1; width: auto !important;
		box-shadow: 0 1px 4px rgba(0,0,0,0.25); pointer-events: none;
		opacity: 1 !important; transform: none !important;
	}
	body.showmenu .show-menu > span.menu-huseg-badge,
	body:has(#mobile-nav-toggle:checked) .show-menu > span.menu-huseg-badge { display: none !important; }
	header.fix { position: sticky; top: 0; z-index: 50; background: var(--white); }
		header .row { flex-wrap: nowrap; }
		header .col-3 { width: calc(100% - 80px); max-width: calc(100% - 80px); flex: 1 1 auto; }
		header .col-9.header-actions { width: 80px; max-width: 80px; flex: 0 0 80px; padding-bottom: 0; }
		header .logo img { max-width: 100%; max-height: 48px; margin: 16px 0; }
	.outer-nav { width: min(88vw, 420px); padding: 76px 28px 32px; }
		.outer-nav > .container { justify-content: flex-start; }
		.outer-nav li a { font-size: 21px; padding: 10px 0; }
		.outer-nav #menu-main-menu .sub-menu { gap: 0; flex-direction: column; padding: 5px 0 15px 15px; }
		.outer-nav .secnav { margin-bottom: 50px; }
	body { font-size: 16px; line-height: 24px; }
	.mobilehide { display: none !important; }
	header { margin: 0; }
	.login .row { flex-direction: column; }
		.login .row > div { width: 100%; flex: 0 0 100%; max-width: 100%; }
			.login .row > div:first-child { text-align: center; }
			section.login .login-intro { order: 1; }
			section.login .login-form { order: 2; }
			section.login .login-logos { order: 3; margin: 0 0 28px; align-items: center; padding-bottom: 0; container-type: inline-size; }
			section.login .login-logos .login-logo { align-items: center; justify-content: center; }
			section.login .login-logo-simple { padding-bottom: 0; }
			section.login .login-logos .login-logo-kh img { width: 20cqw; max-height: none; }
			section.login .login-logos .login-logo-simple img { width: 100%; max-height: none; }
			section.login .login-quick { order: 4; }
			section.login .login-reg { order: 5; }
			.box.bg-white { margin: 0 0 30px; }
	.user-info { flex-direction: column; gap: 5px; margin: 0; }
		.user-info div { max-width: 100% !important; width: 100%; }
		.user-info div.bg-blue { flex-direction: column; text-align: center; padding: 30px; }
			.user-info div.bg-blue a { border-radius: 5px; white-space: normal; text-align: center; margin: 30px 0 0; }
	.userchange { width: 100%; left: 0; padding: 10px; }
		.userchange li { flex-wrap: wrap; }
		.userchange li span { font-size: 10px; width: 35px; text-align: center; }
		.userchange li small { font-size: 13px; width: 100%; margin: -10px 0 0 45px; }
	section .heading { text-align: center; flex-direction: column; }
	section .heading > div { width: 100%; }
		section .heading .col-3 { justify-content: center !important; }
		section .heading h3 { margin: 30px 0; }
	.service-list, .invoice-list { overflow-y: auto; }
	section.loyalty .service-list .list-header { display: none; }
	section.loyalty .service-list .list-container { max-width: 100%; width: 100%; }
	section.loyalty .service-list .list-item {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"icon name name"
			"end end end"
			"akt akt normal"
			"action action action";
		align-items: start;
		column-gap: 10px;
		row-gap: 8px;
		padding: 14px 12px;
		overflow: visible;
		position: relative;
	}
	section.loyalty .service-list .list-item > img {
		position: absolute !important;
		z-index: 2;
		left: 24px !important;
		top: 24px !important;
		width: 20px !important;
		height: 20px !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		transform: none !important;
		object-fit: contain;
		object-position: center center;
	}
	section.loyalty .service-list .list-item:before {
		width: 40px;
		height: 40px;
		left: 14px;
		top: 14px;
		margin: 0;
		transform: none;
		border-radius: 5px;
	}
	section.loyalty .service-list .list-item > .huseg-name {
		grid-area: name;
		margin: 0;
		padding-top: 8px;
		align-self: start;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.3;
	}
	section.loyalty .service-list .list-item > .huseg-end,
	section.loyalty .service-list .list-item > .huseg-akt,
	section.loyalty .service-list .list-item > .huseg-normal {
		text-align: left;
		margin: 0;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.4;
	}
	section.loyalty .service-list .list-item > .huseg-end { grid-area: end; }
	section.loyalty .service-list .list-item > .huseg-akt { grid-area: akt; }
	section.loyalty .service-list .list-item > .huseg-normal { grid-area: normal; }
	section.loyalty .service-list .list-item > .huseg-action {
		grid-area: action; justify-content: stretch; width: 100%;
	}
	section.loyalty .service-list .list-item .huseg-mlabel {
		display: inline;
		font-weight: 400;
		margin-right: 4px;
	}
	section.loyalty .service-list .list-item button.button {
		width: 100%;
	}
	section.services .list-header,
	section.services .list-container,
	section.services .list-footer { max-width: 100%; width: 100%; }
	section.services .list-view .list-header { display: none; }
	section.services .list-view .list-item {
		display: grid;
		grid-template-columns: 50px minmax(0, 1fr);
		grid-template-areas:
			"icon name"
			". price";
		align-items: start;
		column-gap: 8px;
		row-gap: 4px;
		overflow: visible;
	}
	section.services .list-view .list-item > img {
		position: absolute; z-index: 2;
		grid-area: icon;
		left: 20px; top: 20px; transform: none;
		width: 20px; height: 20px; max-width: none; margin: 0; padding: 0;
		object-fit: contain; object-position: center;
	}
	section.services .list-view .list-item:before {
		left: 10px; top: 10px; transform: none; margin: 0;
	}
	section.services .list-view .list-item h4 {
		grid-area: name; margin: 8px 0 0; padding-right: 0; width: auto; min-width: 0;
	}
	section.services .list-view .list-item .price {
		grid-area: price; width: auto; margin: 0; padding: 0;
		text-align: right; justify-self: end;
	}
	section.services .list-view .list-item .svc-period,
	section.services .list-view .list-item .svc-qty,
	section.services .list-view .list-item .svc-artype { display: none; }
	section.invoices .invoice-list,
	section.invoices .invoice-list .list-header,
	section.invoices .invoice-list .list-container { width: 100%; max-width: 100%; overflow-x: hidden; }
	section.invoices .invoice-list .list-header .inv-h-due,
	section.invoices .invoice-list .list-header .inv-h-method,
	section.invoices .invoice-list .list-header .inv-h-debt { display: none; }
	section.invoices .invoice-list .list-header .inv-h-no,
	section.invoices .invoice-list .list-header .inv-h-date,
	section.invoices .invoice-list .list-header .inv-h-sum {
		width: auto; flex: 1 1 0; margin: 0; padding-left: 0; text-align: left;
	}
	section.invoices .invoice-list .list-header .inv-h-sum { text-align: right; padding-right: 30px; }
	section.invoices .invoice-list .list-item > img { display: none; }
	section.invoices .invoice-list .list-item .inv-due,
	section.invoices .invoice-list .list-item .inv-method,
	section.invoices .invoice-list .list-item .inv-debt { display: none; }
	section.invoices .invoice-list .list-item .inv-no,
	section.invoices .invoice-list .list-item .inv-date,
	section.invoices .invoice-list .list-item .inv-sum { width: auto; flex: 1 1 0; text-align: left; }
	section.invoices .invoice-list .list-item .inv-sum { text-align: right; font-weight: 700; white-space: nowrap; color: var(--black); }
	section.invoices .invoice-list .list-item .inv-status {
		display: flex; align-items: center; justify-content: center; flex: none; width: 28px; margin-left: 8px;
	}
	.szlatet .fej, .szlatet .szla-row { grid-template-columns: minmax(0, 1fr) auto; }
	.szlatet .c-sor, .szlatet .c-qty, .szlatet .c-afa { display: none; }
	.szlatet .c-price { text-align: right; }
	.invoice-info div.bg-cyan { padding: 15px 15px 25px; line-height: 135%; font-size: 15px; }
		.list-header, .list-container, .list-footer { max-width: 1200px; width: 1200px; }
			.list-item { position: relative; }
		.grid-view .list-container { flex-direction: column; max-width: 100%; width: 100%; }
			.grid-view .list-footer { max-width: 100%; width: 100%; }
			.grid-view .list-item { width: 100%; }
	.pagination, a.b-blue { margin: 30px 0; }
	section.invoices .row:first-child { flex-direction: column; }
		section.invoices .user-info, section.invoices .invoice-info { width: 100%; }
	.popup li, .khpay .bg-white li { font-size: 15px; }
		.popup li { flex-direction: column; text-align: center; line-height: 135%; }
		.popup li span, .khpay .bg-white span { width: auto; }
		.popup > div { padding: 20px; max-width: calc(100vw - 59px); font-size: 15px; line-height: 135%; }
	.khpay .bg-white .flex { gap: 0; flex-direction: column; }
		khpay .bg-white .flex ul { width: 100%; }
	section.payments .heading .col-3 { padding: 0 0 30px; }
		section.payments .heading .col-3 a { font-size: 13px; }
	section.payments .invoice-list,
	section.payments .invoice-list .list-header,
	section.payments .invoice-list .list-container { max-width: 100%; width: 100%; }
	section.payments .list-view .list-header { display: none; }
	section.payments .list-view .list-item {
		display: grid;
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
		grid-template-areas:
			"date id amount"
			"status status status";
		align-items: start;
		column-gap: 8px;
		row-gap: 6px;
		overflow: visible;
	}
	section.payments .list-view .list-item > img,
	section.payments .list-view .list-item .pay-invoices { display: none; }
	section.payments .list-view .list-item .pay-date { grid-area: date; font-size: 13px; }
	section.payments .list-view .list-item .pay-id { grid-area: id; font-size: 13px; }
	section.payments .list-view .list-item .pay-amount {
		grid-area: amount; justify-self: end; text-align: right; white-space: nowrap;
	}
	section.payments .list-view .list-item .pay-status {
		grid-area: status; font-size: 14px; overflow: visible;
	}
	section.azonositok .tv-list .list-container { grid-template-columns: 1fr !important; }
	section.azonositok .detailed-view h3 { align-items: flex-start; }
	section.azonositok .detailed-view h3 img { position: static; margin: 4px 0 0; }
	section.settings .grid-view .list-item { width: 100%; }
		section.settings .row:first-child { flex-direction: column; }
		section.settings .user-info, section.settings .settings-info { width: 100%; }
		section.settings .settings-info div.bg-blue { padding: 30px; }
		section.settings .settings-info div.bg-blue a { white-space: normal; border-radius: 5px; text-wrap-style: balance; line-height: 100%; }
	section.settings .settings-list,
	section.settings .settings-list .list-header,
	section.settings .settings-list .list-container { max-width: 100%; width: 100%; }
	section.settings .settings-list .list-header { display: none; }
	section.settings .settings-list .list-item {
		display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
		padding: 14px 16px; position: relative;
	}
	section.settings .settings-list .list-item .szd-id,
	section.settings .settings-list .list-item .name,
	section.settings .settings-list .list-item .address {
		width: 100%; max-width: none; margin: 0; text-align: left; float: none;
	}
	section.settings .settings-list .list-item .name { font-weight: 700; font-size: 16px; }
	section.settings .settings-list .list-item .address br { display: inline !important; }
	section.settings .settings-list .list-item .paymode,
	section.settings .settings-list .list-item .eszamla,
	section.settings .settings-list .list-item .muvelet {
		display: none; width: 100%; max-width: none; margin: 0; text-align: left; float: none;
	}
	section.settings .settings-list .list-item.expanded .paymode,
	section.settings .settings-list .list-item.expanded .eszamla,
	section.settings .settings-list .list-item.expanded .muvelet {
		display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
		padding-top: 8px; border-top: 1px solid #DADADC; margin-top: 4px;
	}
	section.settings .settings-list .list-item.expanded .paymode::before,
	section.settings .settings-list .list-item.expanded .eszamla::before,
	section.settings .settings-list .list-item.expanded .muvelet::before {
		content: attr(data-label) ":";
		font-weight: 700; font-size: 13px; color: var(--grey); text-transform: uppercase;
	}
	section.settings .settings-list .list-item .remove-szd-icon { display: none; }
	section.settings .settings-list .list-item .remove-szd-text {
		display: inline-flex; width: auto; margin: 0; padding: 8px 16px;
		border-radius: 10px; border: none; cursor: pointer; font: inherit; font-weight: 700;
		background: var(--red); color: var(--white);
	}
	footer { background-size: 200px auto; }
	footer .container { flex-direction: column; }
		footer .container .row > div { width: 100%; text-align: center; }
		footer .flex { justify-content: center; }
		footer .footnav { margin: 30px 0 0; }
			footer .footnav .flex { gap: 0; flex-direction: column; }

}


/** hp **/

.user-info div.bg-cyan, .invoice-info div.bg-cyan {
    padding: 20px !important;
}