html,
body {
	margin: 0;
	padding: 0;
	min-height: 100vh;	/* Zabezpečí, že body má aspoň výšku okna */
	width: 100%;
}

/* Nastavenie pre telo stránky */
body {
	font-family: 'Raleway', sans-serif;
	line-height: 1.6;
	background-color: #B564F7;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow-x: hidden;
}

header,
main {
	width: 100%;
	max-width: 800px;
	display: flex;
}

header {
	text-align: center;
	align-items: center;
	justify-content: center;
    margin:3em 0 1em 0;
}

.logo {
	width: 250px;
	height: auto;
}

h1 {
	font-weight: 500;
	font-size: 4em;
	margin-left: 20px
}

h3 {
	margin: 1em 0 0 0;
}



main {
	margin: 0 auto;	/* Centrovanie obsahu horizontálne */
	flex: 1;	/* Roztiahnutie na dostupnú výšku medzi headerom a footerom */
	flex-direction: column;
}

main div {
	margin: 10px;
}

main a{
    text-decoration: none;
    font-weight: bold;
    color: #FFCF5A;
    }
main a:hover{
    color: #A6D0F1;
    }

footer {
	width: 100%;
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
	background-color: #000;
	color: #fff;
	flex-direction: column;	/* Vertikálne usporiadanie detí */
	gap: 20px;
	padding-top: 40px;
}

.footer-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

/* Individuálny stĺpec */
.footer-column {
	flex: 1;
	text-align: center;
}

.footer-image {
	max-width: 250px;
}

.social {
	display: flex;	/* Aktivuje Flexbox */
	height: 100%;
	width: 100;
	flex-direction: column;	/* Usporiadanie obsahu vertikálne */
	justify-content: flex-end;	/* Posunie obsah na spodok divu */
	align-items: center;	/* Zarovná obsah horizontálne na stred */
}

.footer-full-width {
	width: 100%;
	text-align: center;
	padding: 10px 0;
}

.row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;	/* Medzera medzi stĺpcami */
}

/* Štýl pre jednotlivé stĺpce */
.column {
	flex: 1;
}

/* Pre stĺpce s pevnou šírkou */
.fixed-width {
	flex: 0 0 auto;	/* Nezávislé od ostatných */
}

.centered {
	justify-content: center;	/* Horizontálne centrovanie */
	align-items: center;	/* Vertikálne centrovanie */
}

a.button {
	display: inline-block;	/* Lepšia kontrola rozmerov */
	background-color: black;	/* Čierne pozadie */
	color: white;	/* Biely text */
	text-decoration: none;	/* Odstránenie podčiarknutia */
	padding: 20.8px 56px;	/* Padding: hore/dole 20.8px, boky 56px */
    width:150px;
	text-align: center;	/* Centrovanie textu */
	font-size: 16px;	/* Veľkosť textu */
	font-weight: bold;	/* Nastavenie textu na bold */
	border: none;	/* Odstránenie orámovania */
	border-radius: 50px;	/* Zaoblené rohy */
	cursor: pointer;	/* Klikateľný kurzor */
	transition: background-color 0.3s ease;	/* Plynulý prechod farby pri hover */
}

a.button:hover, a.button.active {
	/*background-color: rgba(0, 0, 0, 0.6);	
    background-color: #FFCF5A; /* žltá */
    background-color: #A6D0F1; /* bledomodrá */
    color: white;
}

/* Štýly pre inputy, textarea, a select */
form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="tel"],
form input[type="number"],
form input[type="date"],
form input[type="datetime-local"],
form input[type="time"],
form input[type="url"],
form input[type="search"],
form textarea,
form select {
	width: calc(100% - 30px);
	padding: 10px 15px;
	border: 2px solid #ffffff;
	border-radius: 8px;
	font-size: 1em;
	font-family: 'Raleway', sans-serif;
	box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.3);
	background-color: #ffffff;
	color: #333;
	transition: all 0.3s ease;
}

form input[type="date"] {
    appearance: none;
    height: 19px; /* Rovnaká výška ako ostatné */
    line-height: normal; /* Pre istotu normalizuj line-height */
}

form select {
	width: 100%;
    height: 42.2px;
	background-color: #ffffff;
	border-color: #ffffff;
}

form input:hover,
form textarea:hover,
form select:hover {
	border-color: rgba(0, 0, 0, 0.6);	/* Jemné stmavnutie okraja pri hover */
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);	/* Jemný čierny žiarivý efekt */
}

form input:focus,
form textarea:focus,
form select:focus {
	border-color: black;	/* Prepojenie s čiernym štýlom tlačidla */
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);	/* Tmavší efekt */
}

/* Štýly pre checkbox a rádio */
form input[type="checkbox"],
form input[type="radio"] {
	transform: scale(1.8);	/* Zväčšenie checkboxu/rádia */
    margin-right: 10px;
	cursor: pointer;
    touch-action: manipulation; /* Zlepšuje interakciu na dotykových zariadeniach */
}

form label {
	font-size: 1em;
	display: flex;
	//align-items: center;
    align-items: flex-start; /* Zarovnanie checkboxu na vrch */
	margin-bottom: 15px;
	cursor: pointer;
    position: relative;
}

form label:hover, form label:active{
	color:#A6D0F1;
}


/* Textarea */
form textarea {
	resize: vertical;
}

/* Tlačidlo */
button {
	display: inline-block;
	background-color: black;
	color: white;
	text-decoration: none;
	padding: 20.8px 56px;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

button:hover {
	/*background-color: rgba(0, 0, 0, 0.6);	*/
    background-color:#A6D0F1;
}

#dni_vyber label{display: inline-block; margin-right:2em}

/* Zabezpečenie responzivity pre menšie displeje */
@media (max-width: 768px) {
	main div {
		margin: 10px;
	}

	.footer-container {
		flex-direction: column;		/* Stĺpce nad sebou */
		align-items: center;		/* Zarovnanie na stred */
	}

	.footer-column {
		width: 100%;		/* Šírka 100% na mobiloch */
		margin-bottom: 20px;		/* Priestor medzi stĺpcami */
	}

	.row {
		flex-direction: column;		/* Stĺpce naskladajú na seba */
	}

	.no-stack {
		flex-direction: row !important;		/* Možnosť nezmeniť usporiadanie */
	}

	.column {
		width: auto;		/* Stĺpce zaberajú celú šírku */
	}

	form input,
	form textarea,
	form select {
		max-width: 100%;
	}

	button {
		width: 100%;
	}

	.footer-container {
		flex-direction: column;
		align-items: center;
	}

	.footer-column {
		width: 100%;
		margin-bottom: 20px;
	}

}