body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f6f7fb;
}

.sticky {
	position: sticky;
}

.header {
	top:0;
	background-color: white;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
	height: 100vh;
	padding: 0 20px;
	flex-direction: column;
}

.card {
    background: white;
    border-radius: 18px;
    padding: 20px;
    /*max-width: 600px;*/
    width: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    text-align: center;
	position: absolute;
	overflow-y: auto;
	flex: 1;
}

.qrcard {
    width: 100%;
	position: unset;
}
.qr-list {
    display: flex;
    flex-wrap: wrap; 
    gap: 16px;       
    overflow-y: auto;
    min-height: 0;
	max-height: calc(100vh - 320px);
	/*align-items: flex-start;*/
}
/*.qr-img {
    width: 200px;         
    max-width: 100%;
    height: auto;
}*/

.qr-box {
	flex: 1 1 auto;
	min-width: 170px;	
	line-height: 0;
	overflow: hidden;
}

.qr-img {
    /*max-width: 240px;*/
    max-width: calc(100vw - 40px);
    /*width: 400px;*/
    margin: 0 auto;
	display: block;
	height: auto;
	max-height: calc(100vh - 320px);
}

input {
    width: 100%;
    padding: 14px;
    font-size: 25px;
    border-radius: 12px;
    border: 1px solid #ddd;
    /*margin-top: 10px;*/
}

button {
    width: 90%;
    padding: 14px;
    font-size: 18px;
    border-radius: 12px;
    border: none;
    background: #4f46e5;
    color: white;
    margin-top: 15px;
    cursor: pointer;
}

button:hover {
    background: #4338ca;
}


.back-btn {
    position: absolute;
    top: 10px;
    right: 40px;
    font-size: 30px;
    text-decoration: none;
    color: #C00;
	font-weight: 600;
}

.print-btn,
#copyBtn {
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 18px;
    text-decoration: none;
    color: #fff;
	font-weight: 600;
	width: auto;
	padding: 10px;
}
#copyBtn {
	top: 60px;
}
.back-btn-button {
    position: fixed;
    top: 18px;
    right: 20px;
    font-size: 24px;
    background: none;
    border: none;
    color: #555;
    cursor: pointer;
}

.back-btn:hover {
	color: #F00;
	background-color: #eee;
}

.input-wrap,
.input-checkbox  {
    display: flex;
    align-items: center;
	justify-content: center; 
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 0 30px;
    margin-top: 10px;
    background: white;
    margin-left: auto;  
    margin-right: auto;
	width: calc(100% - 100px);
}

.input-checkbox  {
	border: none;
	width: 300px;
	max-width: calc(100% - 100px);
	gap: 20px;
}

.input-checkbox label {
	padding: 0 10px;
	display: flex;
    flex-direction: column-reverse;
    align-items: center;
	text-align: center;
}

.input-checkbox input[type="checkbox"] {
	display: none;
}

.input-checkbox .custom-check {
    width: 20px;
    height: 20px;
    border: 2px solid #333;
    border-radius: 4px;
    display: block;
    position: relative;
	margin-bottom: 5px;
	background-color: #fff;
}

.input-checkbox input[type="checkbox"]:checked + .custom-check {
    background-color: #06d; 
}

.input-checkbox input[type="checkbox"]:checked + .custom-check::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0px;
    width: 8px;
    height: 14px;
    border: solid #FFF;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.qr-type {
  height: 23px;
}
.input-wrap input {
    border: none;
    outline: none;
    flex: 1;
    padding: 14px 8px;
    font-size: 25px;
}

.currency {
    font-size: 25px;
    color: #666;
    margin-right: 6px;
	/*font-weight: bold;*/
    /*margin-top: 10px;*/
}

.logo {
	height: 110px;
}

.header:has(.provizia) .logo {
  height: 90px;
}

.provizia {
	font-size: 10px;
	font-weight: bold;
	margin-bottom: 0;
}
#resultOP {
    font-size: 30px;
	font-weight: 600;
}
h2 span {
	font-weight: 200;
}

.footer p {
	margin-bottom: 0px;
}

@media screen and (max-width: 543px) {
	.qrcard h2,
	.qrcard p {
		margin: 5px;
	}
	.qr-list {
		overflow-y: auto;
		scroll-snap-type: y mandatory;
		display: block;
		transition: height 0.1s ease-out;
		margin: 0 auto;
		-webkit-overflow-scrolling: touch;
	}
	.logo {
		height: 70px;
	}

	.header:has(.provizia) .logo {
		height: 50px;
	}
	
	.qr-box {
		scroll-snap-align: start;
		scroll-snap-stop: always;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.qr-img {
		margin: 10px auto;
		max-width: 100%;
		height: auto;
		transition: transform 0.3s;
	}
/*	.qr-box:nth-child(even) img {
		transform: scaleX(-1);
		-webkit-transform: scaleX(-1);
	}
*/
	.no-print {
		display: none !important;
	}

	.back-btn {
		right: 0;
	}
}

@media screen and (max-height: 543px) {
	.qrcard h2,
	.qrcard p {
		margin: 5px;
	}
	.header h2 {
		font-size: 17px;
	}
	.qr-list {
		max-height: calc(100vh - 174px);
	}
	.qr-img {
		margin: 0px auto;
		max-height: calc(100vh - 194px);
	}
	.logo {
		height: 50px;
	}
	.header:has(.provizia) .logo {
		height: 30px;
	}

	.no-print {
		display: none !important;
	}

}

.footer {
	bottom: 0;
}



@media print {
    @page {
        /*size: A5 portrait;*/ /* alebo 'landscape' podľa potreby */
        /*size: A5 landscape;*/ /* alebo 'landscape' podľa potreby */
        /*size: DL landscape;*/ /* alebo 'landscape' podľa potreby */
		size: 210mm 99mm portrait;   /* šírka výška */
        margin: 0;      /* nastav margin podľa potreby */
    }

    body, html {
        /*width: 148mm;*/ /* šírka A5 */
        /*height: 210mm;*/ /* výška A5 */
        width: 210mm; /* šírka A5 */
        /*height: 148mm;*/ /* výška A5 */
        height: 99mm; /* výška DL */
        margin: 0;
		padding: 0;
		overflow: hidden;
        /*font-size: 12pt;*/ /* vhodná veľkosť písma pre tlač */
    }

    /* skryť prvky, ktoré nechceš tlačiť */
    .no-print {
        display: none !important;
    }

    .print {
        display: inline !important;
    }

/*    table {
        page-break-inside: avoid;*/ /* zabráni lámaniu tabuliek */
/*    }*/

	.qrcard h2, .qrcard p {
		margin: 5px;
	}

	.logo {
		height: 50px;
	}
	.header:has(.provizia) .logo {
		height: 30px;
	}

	.footer p {
		margin-top: 5px;
	}

	.qr-list {
		height: auto !important;
		max-height: calc(100% - 170px)!important;
		max-width: 100%;
		flex-wrap: nowrap;
	}
	.qr-box {
		height: auto !important;
		max-height: 100% !important;
		/*width: auto;*/
		width: auto !important;
		
	}
	.qr-img {
		height: auto;
		max-height: 100%;
		width: auto;
		max-width: 100%;
		
	}

    .print-wrapper {
		width: auto;
        height: auto;
		max-width: 100%;
		max-height: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
		transform: scale(0.7);
		overflow: hidden;
		/*background-color: #aaa;*/
    }

    .print-content {
         transform-origin: top center;
		 /*background-color: #bbb;*/
		 padding: 0px;
}