.prihlaska img {
	display: block;
	width: 50px;
	padding: 15px;
	margin: 0 auto 25px auto;
	background: #099639;
	border-radius: 50%;
}

/*** formulár ***/

form {
    display: flex;
	flex-wrap: wrap;
    flex-direction: row;
	justify-content: center;
    gap: 15px;
    max-width: 1150px;
    margin: 0 auto;
	padding: 10px 0 50px 0;
} 

form fieldset {padding: 20px; margin: 10px; color: #646d6f; border: solid 1px #bdc4c7; border-radius: 5px;}

.standard-inputs label {
    display: flex;
    flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 25px;
	margin-bottom: 5px;
    font-weight: 600;
    color: #0a1e25;
}
.standard-inputs input {
    padding: 10px;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #acb9be;
	box-shadow:  inset 2px 2px 5px #2626261a;
    margin-top: 5px;
	outline: none;
}

.standard-inputs p {display: block; margin-top: 30px; font-weight: 600; color: #0a1e25;}
.standard-inputs label:hover > input {border-color: #007bff;}
.standard-inputs input:focus {border-color: #007bff; box-shadow: 0 0 0 3px #007bff40, inset 2px 2px 5px #26262645;}

	#datum-set 		 {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-end; gap: 10px;}
	#datum-set label {display: block; margin-bottom: 0;}
	.datum-block	 {margin: 10px 0;}

/*** možnosti ***/

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: 
    #fff url("data:image/svg+xml;utf8,<svg fill='gray' height='16' viewBox='0 0 20 20' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M5.516 7.548l4.484 4.484 4.484-4.484-1.06-1.06-3.424 3.424-3.424-3.424z'/></svg>") 
    no-repeat right 5px center !important;
}

	.standard-inputs select {
		min-width: 65px;
		padding: 10px;
		font-size: 14px;
		border-radius: 5px;
		border: 1px solid #acb9be;
		box-shadow: inset 2px 2px 5px #2626261a;
		margin-top: 5px;
		background: #fff;
		color: #0a1e25;
	}
	.standard-inputs select:focus {
		outline: none;
		border-color: #007bff;
		box-shadow: 0 0 0 3px #007bff40, inset 2px 2px 5px #26262645;
		  background: 
		#fff url("data:image/svg+xml;utf8,<svg fill='%23007bff' height='16' viewBox='0 0 20 20' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M5.516 7.548l4.484 4.484 4.484-4.484-1.06-1.06-3.424 3.424-3.424-3.424z'/></svg>") 
		no-repeat right 5px center !important;
		}
		
.standard-inputs textarea {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #acb9be;
    box-shadow: inset 2px 2px 5px #2626261a;
    margin-top: 5px;
    resize: vertical;
    font-family: 'Roboto', sans-serif;
    outline: none;
    min-height: 100px;
    color: #0a1e25;
}

.standard-inputs textarea:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px #007bff40, inset 2px 2px 5px #26262645;
}

/*** checkboxy ***/

.kurzy-vyber {display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 15px; max-width: 660px;}

.kurz-karta {
  display: block;
  background: #fff;
  border: 1px solid #acb9be;
  border-radius: 5px;
  padding: 10px;
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.kurz-karta:hover {
  border-color: #007bff;
   box-shadow: 0 0 5px 0px #007bff40
}
.kurz-karta.active {
  border-color: #007bff;
  box-shadow: 0 0 5px 3px #007bff40;
}

.kurz-karta img {display: inline-block; aspect-ratio: 2/1; width: 60px; height: auto; margin: 10px auto 5px auto;}
.kurz-obsah h3 {display: block; width: max-content; color: #0a1e25; margin: auto;}
.kurz-obsah p {margin: 0.25rem 0; font-size: 14px; color: #70797c;}

/*** hodnotenie inštruktorov hviezdičky ***/

.star-rating {
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	gap: 5px;
	margin: 10px 0 25px 0;
}

.star-rating input[type="radio"] {
	display: none;
}

.star-rating label {
	display: block;
	width: 30px;
	height: 30px;
	background: url("data:image/svg+xml;utf8,<svg fill='%23acb9be' height='30' viewBox='0 0 24 24' width='30' xmlns='http://www.w3.org/2000/svg'><path d='M12 .587l3.668 7.431 8.2 1.192-5.934 5.782 1.4 8.169L12 18.897l-7.334 3.864 1.4-8.169L.132 9.21l8.2-1.192z'/></svg>")
		center center no-repeat;
	background-size: contain;
	cursor: pointer;
	transition: transform 0.2s ease-in-out;
}

.star-rating label:hover,
.star-rating label:hover ~ label {
	transform: scale(1.2);
}

.star-rating input[type="radio"]:checked ~ label {
	background: url("data:image/svg+xml;utf8,<svg fill='%23007bff' height='30' viewBox='0 0 24 24' width='30' xmlns='http://www.w3.org/2000/svg'><path d='M12 .587l3.668 7.431 8.2 1.192-5.934 5.782 1.4 8.169L12 18.897l-7.334 3.864 1.4-8.169L.132 9.21l8.2-1.192z'/></svg>")
		center center no-repeat;
	background-size: contain;
}

/*** GDPR súhlas o spracovaní os. údajov 
prezentuje class suhlas-box, je to trieda k checkboxom rovnaké css
***/

.suhlas-box {width: 100%; text-align: center;}
.suhlas-box label {display: block; margin: auto; cursor: pointer; max-width: 340px;}

.kurz-karta input[type="checkbox"],
.suhlas-box input[type="checkbox"] {
	display: block;
	margin: 10px auto 5px auto;
	
	width: 18px;
	height: 18px;
	
	background: #fff;
	border-radius: 5px;
	border: solid 1px #acb9be;
	
	transform: scale(1.25);
	transition: all 0.2s ease-in-out;
	
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.kurz-karta input[type="checkbox"]:checked,
.suhlas-box input[type="checkbox"]:checked {
  background-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
  border-color: #007bff;
}

.kurz-karta input[type="checkbox"]::after,
.suhlas-box input[type="checkbox"]::after  {
  content: "";
  display: block;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  position: absolute;
  top: 2px;
  left: 5px;
  opacity: 0;
  transition: opacity 0.2s;
}

.kurz-karta input[type="checkbox"]:checked::after,
.suhlas-box input[type="checkbox"]:checked::after {opacity: 1;}

/*** tooltip ***/

.tooltip {
  position: absolute;
  top: -130px;
  left: 0;
  transform: none;
  width: 200px;
  height: 100px;
  background-color: #fff;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  z-index: 10;
  display: none;
}
.tooltip::after {
  content: "";
  position: absolute;
  bottom: -18px;
  border-width: 10px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

.tooltip.align-center::after {
  left: 50%;
  transform: translateX(-50%);
}
.tooltip.align-right::after {
  right: 10px;
  left: auto;
  transform: none;
}
.tooltip.align-left::after {
  left: 10px;
  transform: none;
}

.tooltip strong {display: block; margin-bottom: 5px; color: #0a1e25;}
.kurz-karta:hover .tooltip {display: block;}

/*** msg z php ***/

.msg {display: block; margin: 15px auto; max-width: max-content; padding: 10px 15px;}
.err {background: #cd9c0f4a; border: 1px solid #d97e1a; border-radius: 5px; color: #794200;}
.ok  {background: #1b7ce040; border: 1px solid #109ed9; border-radius: 5px; color: #005a79;}

/*** tlačidlo poslať prihlášku a hotovo ***/

.button {
    background: #c20d04;
    background: linear-gradient(180deg, rgb(204 17 8) 0%, rgb(176 13 13) 100%);
    box-shadow: 1px 1px 5px #00000025;
    text-shadow: 1px 1px 5px #00000080;
    max-width: 175px;
	margin: 15px auto;
	text-align: center;
    line-height: 25px;
    color: #fff;
    font-weight: 600;
    padding: 10px 15px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}
.button:hover {background: #9a0808;}


.advantages {
	display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    gap: 10px;
    margin: auto;
    padding: 15px 0;
}

.advantages div {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	background: #0996391c;
	border: 1px solid #099639;
	border-radius: 5px;
	gap: 10px;
	padding: 10px 15px 10px 10px;
}
.advantages img {display: inline-block;}
.advantages p 	{display: inline-block; color: #007929;}

@media screen and (max-width: 1124px) {
	form {max-width: 690px;}
	.standard-inputs textarea {width: auto;}
	.standard-inputs label {flex-direction: column; justify-content: normal;  align-items: normal; gap: 0; margin-bottom: 15px;}
	.kurzy-vyber {max-width: 300px; gap: 5px;}
	.kurz-karta img {width: 48px;}
	#datum-set {justify-content: center;}
	.advantages {flex-direction: column; gap: 10px;}
}
@media screen and (max-width: 658px) {
	form {flex-direction: column; align-content: center;}
	.standard-inputs textarea {width: auto;}
	.standard-inputs label {flex-direction: column; justify-content: normal;  align-items: normal; gap: 0; margin-bottom: 15px;}
	.kurzy-vyber {max-width: none; gap: 5px;}
	.kurz-karta img {width: 48px;}
	#datum-set {justify-content: center;}
}

@media screen and (max-width: 430px) {
}