/* ==============
 *  Variables
 * ============*/

:root {
	--primary-color: #A6192E; /* = @color-red 'variables.less' */
	--primary-color-hover: color-mix(in srgb, var(--primary-color), white 20%);
	--primary-color-10: rgba(164,28,49,.1); /*#F6E8EA;*/ /* rgba(164,28,49,.1) */
	--text-primary: #505050;
	--text-black-87: rgba(0,0,0,.87);
	--text-black-70: rgba(0,0,0,.7);
	--text-black-60: rgba(0,0,0,.60);
	--text-white-75: rgba(255,255,255,.75);
	--text-white-60: rgba(255,255,255,.60);
	--text-light-gray: #BDBDBD;
	--gray-color: #4F5C64;
	--gray-ligth-color: #f7f7f7;

	--px-container: 15px;

	--fw-medium: 500;
	--fw-semibold: 600;
}



/* ==============
 *  Button
 * ============*/

.btn,
input.btn.contact-form__input {
	height: unset;
	text-align: center;
	font-size: 14px;
	font-weight: var(--fw-semibold);
	line-height: 14px;
	border-radius: 100px;
	padding: 20px;
	cursor: pointer;
	&:hover {
		text-decoration: none;
	}
	&:focus,
	&:focus-visible {
		outline: none;
		box-shadow: none;
	}
}

.btn.btn-thin {
	padding: 14px 32px;
}

/*a.button-red:not([href]):not([tabindex])*/
.btn-red,
input.btn-red.contact-form__input {
	color: white;
	background: var(--primary-color);
	border: 1px solid var(--primary-color);
	&:hover {
		color: white;
		background: var(--primary-color-hover);
		border: 1px solid var(--primary-color-hover);
	}
	&:focus,
	&:focus-visible {
		color: white;
	}
}

.btn-transparent {
	color: black;
	border: 1px solid var(--gray-color);
	background: transparent;
	&:hover {
		color: white;
		border: 1px solid var(--primary-color-hover);
		background: var(--primary-color-hover);
	}
	&:focus,
	&:focus-visible {
		color: white;
	}
}

.text-btn {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: .1px;
    color: var(--text-black-70);
}


/* ==============
 *  General
 * ============*/

.w-100-sm {
	@media (max-width: 576px) {
		width: 100%;
	}
}

.w-fit {
	width: fit-content;
}

.container-wider {
	width: 100%;
	max-width: 1380px;
	margin: 0 auto;
}
.container-widest {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
}

.text-white-75 {
	color: var(--text-white-75);
}

.gap-80 {
	gap: 80px;
}

.gap-40-md-80 {
	gap: 80px;
	@media (max-width: 767.98px) {
		gap: 40px;
	}
}

.px-container {
	padding-right: var(--px-container);
	padding-left: var(--px-container);
}

.px-0 {
	padding-right: 0 !important;
	padding-left: 0 !important;
}

.pt-56 {
	padding-top: 56px;
}
.pb-80 {
	padding-bottom: 80px;
}

.link-inverse-underline {
    text-decoration: underline;
    &:hover {
        text-decoration: none;
    }
}

/* ===================
 *  Contact-form
 * =================*/

.section-form {
	margin-top: 110px;
	margin-bottom: 110px;
	@media (max-width: 991.98px) {
		margin-top: 80px;
	}
}

.contact-form {
    @media (max-width: 767.98px) {
        margin-bottom: 30px;
    }
}

.contact-form__row {
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: start;
	/*column-gap: 16px;*/
	row-gap: 28px;
	margin-bottom: 24px;
}

.contact-form__label-main {
	font-size: 18px;
	color: var(--text-black-87);
	margin-bottom: 24px;
}


/* Povolíme, aby hláška vytekla ven z obalů */
/*.select,*/
/*.wpcf7-form-control-wrap {*/
/*	overflow: visible !important;*/
/*	height: auto !important;*/
/*	display: block; !* Ujistěte se, že to není inline-block *!*/
/*}*/

/* Styl pro hlášku */
.wpcf7-not-valid-tip {
	/*display: block;*/
	margin-top: 5px;
}


div.form-group {
	position: relative;
	/*flex-basis: 49%;*/
	/*max-width: 49%;*/
	margin-bottom: 0;
	max-width: 100%;
	flex-basis: 100%;
	/*&:has(
		[name="your-name"],
		[name="phone"]
	) {
		max-width: 100%;
		flex-basis: 100%;
	}
	@media (max-width: 991.98px) {
		flex-basis: 100%;
		max-width: 100%;
	}*/

	label.contact-form__label {
		z-index: 1;
		position: absolute;
		top: 0;
		transform: translateY(-50%);
		left: 16px;
		width: fit-content;
		font-size: 12px;
		font-weight: var(--fw-medium);
		color: var(--text-black-70);
		text-transform: none;
		background-color: white;
		padding: 0 4px;
		margin-bottom: 0;
	}

	.wpcf7-form-control-wrap {
		/*position: static; puvodni */

		/*overflow: visible !important;*/
		/*position: relative; !* Důležité pro ukotvení chyby *!*/
		/*display: block;*/
	}

	.select {
		/*overflow: visible !important;*/
		/*position: relative; !* Důležité pro ukotvení chyby *!*/
		/*display: block;*/

	}

	/* 2. Pozicování samotné chybové hlášky */
	.wpcf7-not-valid-tip {
		position: absolute;
		top: 100%;    /* Ihned pod spodní hranu inputu/selectu (56px) */
		left: 0;
		font-size: 11px;
		line-height: 1;
		color: #d93025; /* Červená barva pro chybu */
		/*margin-top: 4px; !* Malá mezera pod rámečkem *!*/
		white-space: nowrap;
	}

	/* 3. Dynamické odsazení: Pokud form-group OBSAHUJE chybu,
      přidejte margin-bottom, aby neodsunula label dalšího pole */
	div.form-group:has(.wpcf7-not-valid-tip) {
		margin-bottom: 20px;
	}


	input.contact-form__input::placeholder {
		color: var(--text-light-gray);
	}

	.select,
	input.contact-form__input {
		height: 56px;
		font-size: 16px;
		color: black;
		border: 1px solid #a2a2a2;
		border-radius: 8px;
		padding: 16px 12px;
		&:focus {
			background-color: white;
		}
	}

	.select {
		padding: 0;
	}

	.select:after {
		/*background-color: #fff;*/
		content: "";
		width: 10px;
		height: 5px;
		border: 0;
		/*padding-left: 2px;*/
		pointer-events: none;
		/*position: absolute;*/
		right: 20px;
		left: auto;
		top: 50%;
		bottom: auto;
		/*padding-right: 10px;*/
		/*background-image: url("data:image/svg+xml,%3Csvg width='10' height='5' viewBox='0 0 10 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L5 5L10 0H0Z' fill='%23A41C31'/%3E%3C/svg%3E");*/
		background:
				#fff
				url("data:image/svg+xml,%3Csvg width='10' height='5' viewBox='0 0 10 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L5 5L10 0H0Z' fill='%23A41C31'/%3E%3C/svg%3E")
				no-repeat
				center center / cover;
		transform: translateY(-50%);
		/*transition: transform 0.2s ease-in-out;*/
	}

    .is-open.select:after {
		transform: translateY(-50%) rotate(180deg);
	}
	/*[data-name="date_meeting"] {
		position: relative;
		display: block;
		height: 56px;
	}

	[data-name="date_meeting"]::after {
		content: "";
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%);
		width: 10px;
		height: 5px;
		pointer-events: none;
		background: #fff url("data:image/svg+xml,%3Csvg width='10' height='5' viewBox='0 0 10 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L5 5L10 0H0Z' fill='%23A41C31'/%3E%3C/svg%3E") no-repeat center center / cover;
		transition: transform 0.2s ease-in-out;
		z-index: 2;
	}

	[data-name="date_meeting"]:focus-within::after {
		transform: translateY(-50%) rotate(180deg);
	}*/


	.select select {
		appearance: none;
		cursor: pointer;
		height: auto;
		font-size: 16px;
		/*letter-spacing: 0.15px;*/
		line-height: 24px;
		background: transparent;
		border: 0;
		border-radius: 8px;
		padding: 16px 12px;

		/*width: 100%;*/
		/*outline: none;*/
		+ .wpcf7-not-valid-tip {
			top: 37px;
			left: 0; /*-13px;*/
		}

		/*@media (max-width: 767.98px) {
			+ .wpcf7-not-valid-tip {
				left: 0;
			}
		}*/
	}
}

.wpcf7-list-item {
	margin-left: 0;
}

label {
	display: flex;
	margin-bottom: 24px;
}

.contact-form__label {
	text-transform: none;
}

.wpcf7-list-item-label {
	font-size: 16px;
	line-height: 18px;
	font-weight: 400;
	vertical-align: text-bottom;
}

label:has(input[type=checkbox]) {
	padding-left: 10px;
}

input[type=checkbox] {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border: 2px solid var(--text-black-70);
	border-radius: 2px;
	/*padding-left: 10px;*/
	margin-right: 12px;
}

input[type=checkbox]:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z' fill='%23000'/%3E%3C/svg%3E");
    background-size: 80%; /* Velikost fajfky */
    background-repeat: no-repeat;
    background-position: center;
    border-color: var(--text-black-70); /* Zachování barvy rámečku */
}


.contact-form__submit-container {
	.wpcf7-spinner {
		display: inline-block;
	}
}
.contact-form__input--submit {
	/*padding: 13px 40px 13px 20px !important;*/
	padding: 20px !important;
	margin-top: 0;
	margin-left: 0;
	/*background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0L6.59 1.41L12.17 7H0V9H12.17L6.59 14.59L8 16L16 8L8 0Z' fill='white'/%3E%3C/svg%3E") !important;*/
	background-position: right 16px center !important;
	background-repeat: no-repeat !important;
	background-size: 16px 16px !important;
}

.professional-3d__privacy-policy {
	color: var(--primary-color) !important;
	text-decoration: underline;
	&:hover {
		color: var(--primary-color) !important;
		text-decoration: none;
	}
}

@media (max-width: 767.98px) {
	.form-section-wrapper { flex-direction: column-reverse; }
}


/* ========================
 *  Flatpickr #date-meeting-input
 * ======================*/

.flatpickr-calendar:not(.show) {
	display: none !important;
}

.flatpickr-calendar.open {
	display: grid !important;
}

.date-time-picker-wrapper {
	position: relative;
}

.datetime-trigger {
	cursor: pointer;
	padding-right: 40px !important;
	background-color: white !important;
}

.date-time-picker-wrapper::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	/* Středová poloha */
	transform: translateY(-50%);
	width: 10px;
	height: 5px;
	/*width: 0;*/
	/*height: 0;*/
	/* Vytvoření trojúhelníku pomocí borderů */
	/*border-left: 5px solid transparent;*/
	/*border-right: 5px solid transparent;*/
	/*border-bottom: 7px solid #A41C31; !* Červená barva šipky *!*/
	pointer-events: none; /* Kliknutí projde skrz na input */
	background:
			#fff
			url("data:image/svg+xml,%3Csvg width='10' height='5' viewBox='0 0 10 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L5 5L10 0H0Z' fill='%23A41C31'/%3E%3C/svg%3E")
			no-repeat
			center center / cover;
	transform: translateY(-50%);
	/*transition: transform 0.2s ease-in-out;*/
}

.date-time-picker-wrapper.is-active::after {
	transform: translateY(-50%) rotate(180deg);
}


/* =========================================
   Přestylování Widgetu/Kalendáře
   ========================================= */

/* Hlavní kontejner kalendáře */
.flatpickr-calendar {
	box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
	border: none !important;
	border-radius: 8px !important;
	padding: 16px;
	width: auto !important;
	background: white;
	display: grid !important;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto;
	grid-template-areas: "header time" "calendar time";
	gap: 0 24px;
}

/* Odstranění výchozí malé šipky nahoře nad kalendářem */
.flatpickr-calendar::before,
.flatpickr-calendar::after {
	display: none !important;
}

.flatpickr-innerContainer {
	grid-area: calendar;
	display: block;
}


/* --- LEVÁ ČÁST: KALENDÁŘ --- */

.flatpickr-months {
	grid-area: header;
	margin-bottom: 20px;
	position: relative;
	align-items: center;
}

.flatpickr-months:after {
    /*background-color: #fff;*/
    pointer-events: none;
    position: absolute;
    content: "";
    width: 10px;
    height: 5px;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 100px;
    border: 0;
    background:
        #fff
        url("data:image/svg+xml,%3Csvg width='10' height='5' viewBox='0 0 10 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L5 5L10 0H0Z' fill='%23A41C31'/%3E%3C/svg%3E")
        no-repeat
        center center / cover;
    transform: translateY(-50%);
    /*transition: transform 0.2s ease-in-out;*/
}

.is-open.flatpickr-months:after {
    transform: translateY(-50%) rotate(180deg);
}


.flatpickr-months .flatpickr-month {
    display: none;
}
/* Měsíc a rok (např. Září 2025) */
/*.flatpickr-current-month {
	font-weight: 600;
	color: #333;
	font-size: 16px;
}*/


/* Šipky pro změnu měsíce */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
	display: none;
}

/* Dny v týdnu (Po, Út, St...) */
span.flatpickr-weekday {
	color: var(--text-black-70);
	font-weight: 400;
	font-size: 12px;
}

.flatpickr-days {
	width: auto !important;
}

.dayContainer {
	display: grid !important;
	grid-template-columns: repeat(7, 1fr);
	justify-items: center;
	width: 100% !important;
	min-width: unset !important;
	max-width: unset !important;
}

/* Jednotlivé dny (čísla) */
.flatpickr-day {
	border-radius: 50% !important;
	height: 28px;
	line-height: 28px;
	width: 28px;
	max-width: 28px;
	margin: 1px !important;
	color: black;
	font-weight: normal;
	border: none;
}

/* Vybraný den (to červené kolečko) */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus {
	background: var(--primary-color) !important;
	color: white !important;
	font-weight: bold;
}

/* Dnešní den (pokud není vybrán) - odstraníme výchozí styl */
.flatpickr-day.today {
	border-color: transparent !important;
}


/* --- PRAVÁ ČÁST: VÝBĚR ČASU --- */

/* Kontejner pro čas */
.flatpickr-time {
	grid-area: time;
	border-top: none !important;
	max-height: none !important;
	height: auto !important;
	display: block !important;
	width: 204px;
}

/* Nadpis "Vyberte čas" */
.flatpickr-time::before {
	content: "Vyberte čas";
	display: block;
    width: 100%;
    text-align: left;
    font-size: 14px;
    font-weight: var(--fw-medium);
    color: black;
    line-height: 22px;
    margin-bottom: 20px;
}

/* --- CUSTOM TIME BUTTONS (JS injected) --- */
.time-buttons-grid {
	display: grid;
	grid-template-rows: repeat(5, auto); /* 5 rows for 9 items (5 in col1, 4 in col2) */
	grid-auto-flow: column; /* Fill columns first, then rows */
	gap: 4px;
}

.time-button {
	background: white;
	border-radius: 8px;
	font-size: 14px;
	color: black;
	line-height: 30px;
	cursor: pointer;
}

.time-button.focus,
.time-button:hover,
.time-button.active {
	font-weight: bold;
	color: white;
	background-color: var(--primary-color);
    outline: none;
}

/* --- CUSTOM MONTH/YEAR SELECT (JS injected) --- */
.custom-month-year-select {
	appearance: none;
	-webkit-appearance: none;
	border: none;
	background: transparent;
	font-size: 14px;
	font-weight: var(--fw-medium);
	color: black;
    line-height: 22px;
	padding: 0 15px 0 0;
	cursor: pointer;
	text-align: start;
	width: auto;
}