@charset "utf-8";
/* CSS Document */



.login, .result, .shop {
	margin-top: 8rem; margin-bottom: 8rem;
}


.label {
	font-size: 1rem; line-height: 120%;
	font-weight: bold;
}

.err {
	display: none;
}
[lang="en"] .error .en.err, [lang="hu"] .error .err.hu {
	display: block;
	font-size: 0.75rem; line-height: 120%;
	color: var(--red);
	margin-top: 0.5rem;
}

input {
	margin-top: 0.5rem;
	width: 15rem;
	font-size: 1.5rem; line-height: 2.5rem;
	border: none;
	border-bottom: 1px solid;
	border-color: var(--grey-40);
}
input:focus {
  border-bottom: 0.15rem solid;
}
.error input {
	border-bottom: 0.15rem solid;
	border-color: var(--red);
}

section .button {
	margin-top: 1.5rem;
	width: 13rem; height: 2.5rem;
	border-radius: 1.25rem;
	background-color: var(--grey-40);
}

section .button p {
	font-size: 1rem; line-height: 1rem;
	font-weight: bold;
	color: #fff;
	text-transform: uppercase;
}

section.submit .button {
	cursor: pointer;
	background-color: #000;
}

section.submit .button:hover {
	background-color: var(--blue);
}

.result .buttons > *:last-child {
	margin-left: 1rem;
	border: 1px solid;
	border-color: var(--grey-40);
	background-color: #fff;
}
.result .buttons > *:last-child:hover {
	background-color: var(--grey-10);
	text-decoration: none;
}
.result .buttons > *:last-child > p {
	color: var(--grey-40);
}


/*----------------------------*/

.tv {
	margin-top: 3rem;
}
.shop {
	margin-top: 5rem;
}

.fauxselect {

}

.fauxselect > div:first-child {
	line-height: 2.5rem; font-size: 1rem;
	border-bottom: 1px solid;
	border-color: var(--grey-40);
	font-weight: bold;
	position: relative;
	padding-right: 2.5rem;
}

.fauxselect > div:first-child::after {
	content: "\276F";
	position: absolute;
	width: 2.5rem; right: 0; text-align: center;
	transform: rotate(90deg);
}
.fauxselect.open > div:first-child::after {
	transform: rotate(-90deg);
}

.fauxselect .list {
	display: none;
}
.fauxselect.open .list {
	display: block;
}
.fauxselect .list > p {
	line-height: 2.5rem; font-size: 1rem;
	border-bottom: 1px solid;
	border-color: var(--grey-40);
	padding: 0 0.5rem;
	background-color: var(--grey-10);
}
.fauxselect .list > p:hover {
	background-color: var(--grey-20);
}

.vouchers {
	margin-top: 3rem;
}

.vouchers [data-tv] {
	justify-content: space-between;
	align-content: flex-start; align-items: flex-start;
	display: flex;
	border-bottom: 1px solid;
	border-color: var(--grey-40);
}

.vouchers [data-tv] > div {
	padding: 1rem 0;
	line-height: 1rem; font-size: 1rem;
}

.vouchers .header {
	justify-content: space-between;
	align-content: flex-end; align-items: flex-end;
	display: flex;
	border-bottom: 1px solid;
	border-color: var(--grey-40);
	line-height: 0.72rem; font-size: 0.6rem;
	padding-bottom: 0.25rem;
	text-transform: uppercase;
}

.vouchers [data-tv] > div:nth-of-type(3) {
	width: 7rem; background-color: var(--grey-30);
	justify-content: center;
	align-content: flex-start; align-items: flex-start;
	display: flex;
}
.vouchers [data-tv] > div:nth-of-type(3) p {
	font-size: 1rem; line-height: 1rem;
	font-weight: bold;
	color: #fff;
	text-transform: uppercase;
}
.vouchers [data-tv]:not(.unavailable) > div:nth-of-type(3):hover {
	background-color: var(--blue);
}
.vouchers [data-tv]:not(.unavailable) > div:nth-of-type(3) {
	cursor: pointer;
}

.vouchers [data-tv].unavailable > div {
	color: var(--grey-30);
}

.vouchers [data-tv].unavailable > div:nth-of-type(3) {
	background-color: var(--grey-10);
	color: #fff;
}

.vouchers [data-tv] > div:nth-of-type(1),
.vouchers .header > div:nth-of-type(1)
{
	width: 10rem;
}
.vouchers [data-tv] > div:nth-of-type(2),
.vouchers .header > div:nth-of-type(2) {
	width: 6rem; text-align: center;
}
.vouchers [data-tv] > div:nth-of-type(4),
.vouchers .header > div:nth-of-type(4) {
	width: 4rem; text-align: center;
}

.vouchers .header > div:nth-of-type(3) {
	width: 7rem;
}

.categories {
	margin-top: 0.5rem;
}

.categories > div {
	margin: .25rem .5rem .25rem 0;
	cursor: pointer;
	padding: .25rem 1.25rem;
	font-size: 1rem; line-height: 100%;
	border-radius: .75rem;
	background-color: var(--grey-20);
}

.categories > div.selected {
	color: #fff;
	background-color: var(--blue);
}

@media (max-aspect-ratio: 1/1) and (max-width: 1000px) {


.login, .result, .shop, .tv {
	margin-top: 3rem; margin-bottom: 3rem;
}

.vouchers [data-tv] > div {
	font-size: 0.85rem !important; line-height: 100% !important;
}
.vouchers [data-tv] > div:nth-of-type(1),
.vouchers .header > div:nth-of-type(1) {
	width: 8.5rem;
}
.vouchers [data-tv] > div:nth-of-type(4),
.vouchers .header > div:nth-of-type(4) {
	width: 3.5rem; 
}

}