/*
 * HI Žilina Booking – visual parity with Carmelina layout-2 dark-mode.
 * Specificity bumped via `.hi-zb input[type="text"]` to beat theme defaults.
 * Sharp corners, no borders on inputs, large heading-font dates, horizontal +/- counter.
 */

.hi-zb,
.hi-zb * {
	box-sizing: border-box;
}

.hi-zb {
	--hi-zb-primary: var(--primary-color, #1c2c34);
	--hi-zb-second: var(--second-color, #aa998a);
	--hi-zb-heading: var(--heading-color, #111);
	--hi-zb-heading-font: var(--heading-font-family, "Forum", "Cormorant Garamond", Georgia, serif);
	--hi-zb-body-font: var(--body-font-family, "Inter", sans-serif);

	--hi-zb-bg-light: #ffffff;
	--hi-zb-bg-dark: var(--hi-zb-primary);
	--hi-zb-title-light: #666;
	--hi-zb-title-dark: #cdcdcd;
	--hi-zb-input-light: var(--hi-zb-heading);
	--hi-zb-input-dark: #ffffff;
	--hi-zb-sep-light: rgba(200, 200, 200, 0.45);
	--hi-zb-sep-dark: rgba(255, 255, 255, 0.18);
	--hi-zb-btn-light: rgba(100, 100, 100, 0.55);
	--hi-zb-btn-light-hover: #777777;
	--hi-zb-btn-light-bg-hover: rgba(0, 0, 0, 0.05);
	--hi-zb-btn-icon: rgba(205, 205, 205, 0.85);
	--hi-zb-btn-icon-hover: #ffffff;

	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 32px 44px;
	font-family: var(--hi-zb-body-font);
	background: var(--hi-zb-bg-light);
	box-shadow: 0 6px 38px -5px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.3s ease;
	border-radius: 0;
}

.hi-zb:hover {
	box-shadow: 0 6px 38px -5px rgba(0, 0, 0, 0.2);
}

.hi-zb--dark {
	background: var(--hi-zb-bg-dark);
}

/* ============== field column ============== */

.hi-zb__field {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	flex: 1 1 auto;
}

.hi-zb__field--date {
	flex: 1 1 0;
	min-width: 0;
}

.hi-zb__field--counter {
	flex: 0 0 auto;
}

.hi-zb__label {
	font-family: var(--hi-zb-body-font);
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--hi-zb-title-light);
	font-weight: 500;
	line-height: 1;
}

.hi-zb--dark .hi-zb__label {
	color: var(--hi-zb-title-dark);
}

/* ============== date inputs ============== */
/* Specificity bumped to override theme global `input[type="text"]`. */

.hi-zb input[type="text"].hi-zb__input {
	width: 100%;
	border: 0;
	border-radius: 0;
	padding: 0;
	height: auto;
	line-height: 1.15;
	background: transparent;
	box-shadow: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	font-family: var(--hi-zb-heading-font);
	font-size: 30px;
	letter-spacing: 0.01em;
	color: var(--hi-zb-input-light);
	font-weight: 400;
	transition: color 0.2s ease;
	white-space: nowrap;
}

.hi-zb--dark input[type="text"].hi-zb__input {
	color: var(--hi-zb-input-dark);
}

.hi-zb input[type="text"].hi-zb__input:focus {
	outline: none;
	box-shadow: none;
	background: transparent;
}

.hi-zb input[type="text"].hi-zb__input::placeholder {
	color: inherit;
	opacity: 0.6;
}

.hi-zb__icon {
	display: inline-flex;
	align-items: center;
	color: rgba(119, 119, 119, 0.55);
	pointer-events: none;
	transition: color 0.3s ease;
}

.hi-zb--dark .hi-zb__icon {
	color: rgba(205, 205, 205, 0.7);
}

.hi-zb__icon svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	fill: none;
}

/* ============== counter ============== */

.hi-zb__stepper {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	min-height: 40px;
}

.hi-zb__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	font-family: var(--hi-zb-heading-font);
	font-size: 30px;
	letter-spacing: 0.01em;
	color: var(--hi-zb-input-light);
	line-height: 1.15;
	font-weight: 400;
}

.hi-zb--dark .hi-zb__count {
	color: var(--hi-zb-input-dark);
}

/* Specificity bumped to beat theme/Elementor global `button` (e.g. `.elementor-kit-6 button`). */
.hi-zb .hi-zb__stepper button.hi-zb__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-width: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	box-shadow: none;
	color: var(--hi-zb-btn-light);
	cursor: pointer;
	border-radius: 50%;
	font-size: inherit;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.hi-zb .hi-zb__stepper button.hi-zb__btn svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.2;
}

.hi-zb:not(.hi-zb--dark) .hi-zb__stepper button.hi-zb__btn:hover:not(:disabled),
.hi-zb:not(.hi-zb--dark) .hi-zb__stepper button.hi-zb__btn:focus-visible {
	color: var(--hi-zb-btn-light-hover);
	outline: none;
	background-color: var(--hi-zb-btn-light-bg-hover);
}

.hi-zb--dark .hi-zb__stepper button.hi-zb__btn {
	color: var(--hi-zb-btn-icon);
}

.hi-zb--dark .hi-zb__stepper button.hi-zb__btn:hover:not(:disabled),
.hi-zb--dark .hi-zb__stepper button.hi-zb__btn:focus-visible {
	color: var(--hi-zb-btn-icon-hover);
	background-color: rgba(255, 255, 255, 0.08);
}

.hi-zb .hi-zb__stepper button.hi-zb__btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

/* ============== separator ============== */

.hi-zb__sep {
	display: none;
	flex: 0 0 auto;
	align-self: center;
	width: 1px;
	height: 56px;
	background: var(--hi-zb-sep-light);
}

.hi-zb--dark .hi-zb__sep {
	background: var(--hi-zb-sep-dark);
}

@media (min-width: 992px) {
	.hi-zb__sep {
		display: block;
	}
}

/* ============== submit button (pxl-btn parity) ============== */

.hi-zb__submit {
	flex: 0 0 auto;
	min-width: 170px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	position: relative;
	font-family: var(--hi-zb-body-font);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #ffffff;
	background: var(--hi-zb-primary);
	border: 1px solid var(--hi-zb-primary);
	border-radius: 0;
	padding: 20px 28px;
	cursor: pointer;
	line-height: 1.2;
	transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
	outline: none;
	white-space: nowrap;
}

.hi-zb__submit:hover,
.hi-zb__submit:focus,
.hi-zb__submit:active {
	background: var(--hi-zb-second);
	border-color: var(--hi-zb-second);
	color: #fff;
}

.hi-zb--dark .hi-zb__submit {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--hi-zb-heading);
}

.hi-zb--dark .hi-zb__submit:hover,
.hi-zb--dark .hi-zb__submit:focus,
.hi-zb--dark .hi-zb__submit:active {
	background: var(--hi-zb-second);
	border-color: var(--hi-zb-second);
	color: #fff;
}

.hi-zb__submit:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* ============== layout variants ============== */

.hi-zb--stack {
	flex-direction: column;
	align-items: stretch;
	padding: 30px;
	gap: 22px;
}

.hi-zb--stack .hi-zb__sep {
	display: none;
}

.hi-zb--stack .hi-zb__submit {
	width: 100%;
}

/* ============== responsive ============== */

@media (max-width: 1399px) {
	.hi-zb {
		padding: 28px 32px;
		gap: 24px;
	}
	.hi-zb input[type="text"].hi-zb__input,
	.hi-zb__count {
		font-size: 26px;
	}
	.hi-zb__submit {
		min-width: 150px;
		padding: 18px 22px;
	}
}

@media (max-width: 1199px) {
	.hi-zb {
		padding: 24px 28px;
		gap: 20px;
	}
	.hi-zb input[type="text"].hi-zb__input,
	.hi-zb__count {
		font-size: 22px;
	}
	.hi-zb__stepper {
		gap: 10px;
	}
}

@media (max-width: 991px) {
	.hi-zb {
		flex-wrap: wrap;
		gap: 22px 28px;
		padding: 26px 24px;
	}
	.hi-zb input[type="text"].hi-zb__input,
	.hi-zb__count {
		font-size: 24px;
	}
	.hi-zb__sep {
		display: none;
	}
	.hi-zb__field--date {
		flex: 1 1 calc(50% - 28px);
	}
	.hi-zb__field--counter {
		flex: 0 0 auto;
	}
	.hi-zb__submit {
		margin-top: 4px;
		flex: 1 1 auto;
	}
}

@media (max-width: 575px) {
	.hi-zb {
		flex-direction: column;
		align-items: stretch;
		padding: 22px 20px;
		gap: 18px;
	}
	.hi-zb__field {
		flex: 1 1 auto;
		padding-bottom: 14px;
		border-bottom: 1px solid var(--hi-zb-sep-light);
	}
	.hi-zb--dark .hi-zb__field {
		border-bottom-color: var(--hi-zb-sep-dark);
	}
	.hi-zb__field:last-of-type {
		border-bottom: 0;
	}
	.hi-zb__submit {
		width: 100%;
		margin-top: 6px;
	}
}

/* ============== flatpickr small overrides ============== */

.flatpickr-calendar.hi-zb-cal {
	font-family: inherit;
}

/* ============== INLINE LAYOUT (calendar + side panel) ============== */

.hi-zb--inline {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 40px;
	flex-wrap: nowrap;
	padding: 36px 40px;
	align-items: start;
}

.hi-zb--inline.hi-zb--dark {
	background: var(--hi-zb-bg-dark);
}

.hi-zb-inline__calendar {
	min-width: 0;
}

.hi-zb-inline__panel {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-left: 32px;
	border-left: 1px solid var(--hi-zb-sep-light);
}

.hi-zb--dark .hi-zb-inline__panel {
	border-left-color: var(--hi-zb-sep-dark);
}

.hi-zb-inline__dates {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.hi-zb-inline__date-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hi-zb-inline__date-value {
	font-family: var(--hi-zb-heading-font);
	font-size: 26px;
	letter-spacing: 0.01em;
	color: var(--hi-zb-input-light);
	line-height: 1.15;
}

.hi-zb--dark .hi-zb-inline__date-value {
	color: var(--hi-zb-input-dark);
}

.hi-zb-inline__guests {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 8px;
	border-top: 1px solid var(--hi-zb-sep-light);
}

.hi-zb--dark .hi-zb-inline__guests {
	border-top-color: var(--hi-zb-sep-dark);
}

.hi-zb-inline__guests .hi-zb__field--counter {
	flex: 0 0 auto;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 12px;
}

.hi-zb-inline__guests .hi-zb__stepper {
	gap: 12px;
}

.hi-zb--inline .hi-zb__submit {
	width: 100%;
	min-width: 0;
	margin-top: 4px;
}

/* ----- flatpickr inline calendar (theme parity) ----- */

.hi-zb--inline .flatpickr-calendar.inline {
	box-shadow: none;
	background: transparent;
	width: 100%;
	max-width: none;
	padding: 0;
	font-family: var(--hi-zb-body-font);
}

.hi-zb--inline .flatpickr-months {
	padding: 0 0 12px;
}

.hi-zb--inline .flatpickr-month {
	height: 40px;
	color: var(--hi-zb-input-light);
}

.hi-zb--dark .flatpickr-month,
.hi-zb--dark .flatpickr-current-month .flatpickr-monthDropdown-months,
.hi-zb--dark .flatpickr-current-month input.cur-year,
.hi-zb--dark .flatpickr-weekday {
	color: var(--hi-zb-input-dark);
}

.hi-zb--inline .flatpickr-current-month {
	font-family: var(--hi-zb-heading-font);
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding-top: 6px;
}

.hi-zb--inline .flatpickr-current-month .flatpickr-monthDropdown-months,
.hi-zb--inline .flatpickr-current-month input.cur-year {
	font-family: var(--hi-zb-heading-font);
	font-size: 18px;
	font-weight: 400;
}

.hi-zb--inline .flatpickr-prev-month,
.hi-zb--inline .flatpickr-next-month {
	fill: var(--hi-zb-input-light);
	color: var(--hi-zb-input-light);
	padding: 8px;
	top: 0;
}

.hi-zb--dark .flatpickr-prev-month,
.hi-zb--dark .flatpickr-next-month {
	fill: var(--hi-zb-input-dark);
	color: var(--hi-zb-input-dark);
}

.hi-zb--inline .flatpickr-prev-month svg,
.hi-zb--inline .flatpickr-next-month svg {
	width: 14px;
	height: 14px;
	fill: inherit;
}

.hi-zb--inline .flatpickr-weekdays {
	height: 32px;
}

.hi-zb--inline .flatpickr-weekday {
	font-family: var(--hi-zb-body-font);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--hi-zb-title-light);
}

.hi-zb--dark .flatpickr-weekday {
	color: var(--hi-zb-title-dark);
}

.hi-zb--inline .dayContainer {
	padding: 4px 0;
	gap: 0;
}

.hi-zb--inline .flatpickr-day {
	border-radius: 0;
	max-width: none;
	width: 14.2857143%;
	height: 38px;
	line-height: 36px;
	margin: 0;
	font-family: var(--hi-zb-body-font);
	font-size: 13px;
	color: var(--hi-zb-input-light);
	border: 1px solid transparent;
	background: transparent;
}

.hi-zb--dark .flatpickr-day {
	color: var(--hi-zb-input-dark);
}

.hi-zb--inline .flatpickr-day:hover,
.hi-zb--inline .flatpickr-day:focus {
	background: rgba(0, 0, 0, 0.04);
	border-color: transparent;
	color: var(--hi-zb-input-light);
}

.hi-zb--dark .flatpickr-day:hover,
.hi-zb--dark .flatpickr-day:focus {
	background: rgba(255, 255, 255, 0.08);
	color: var(--hi-zb-input-dark);
}

.hi-zb--inline .flatpickr-day.today {
	background: var(--hi-zb-primary);
	color: #fff;
	border-color: var(--hi-zb-primary);
}

.hi-zb--inline .flatpickr-day.selected,
.hi-zb--inline .flatpickr-day.startRange,
.hi-zb--inline .flatpickr-day.endRange,
.hi-zb--inline .flatpickr-day.selected:hover,
.hi-zb--inline .flatpickr-day.startRange:hover,
.hi-zb--inline .flatpickr-day.endRange:hover {
	background: var(--hi-zb-second);
	border-color: var(--hi-zb-second);
	color: #fff;
}

.hi-zb--inline .flatpickr-day.inRange,
.hi-zb--inline .flatpickr-day.inRange:hover {
	background: rgba(170, 153, 138, 0.18);
	border-color: transparent;
	color: var(--hi-zb-input-light);
	box-shadow: none;
}

.hi-zb--dark .flatpickr-day.inRange,
.hi-zb--dark .flatpickr-day.inRange:hover {
	background: rgba(170, 153, 138, 0.25);
	color: var(--hi-zb-input-dark);
}

.hi-zb--inline .flatpickr-day.flatpickr-disabled,
.hi-zb--inline .flatpickr-day.prevMonthDay,
.hi-zb--inline .flatpickr-day.nextMonthDay {
	color: rgba(160, 160, 160, 0.45);
	background: transparent;
}

.hi-zb--dark .flatpickr-day.flatpickr-disabled,
.hi-zb--dark .flatpickr-day.prevMonthDay,
.hi-zb--dark .flatpickr-day.nextMonthDay {
	color: rgba(255, 255, 255, 0.25);
}

@media (max-width: 991px) {
	.hi-zb--inline {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding: 28px 24px;
	}
	.hi-zb-inline__panel {
		padding-left: 0;
		border-left: 0;
		padding-top: 24px;
		border-top: 1px solid var(--hi-zb-sep-light);
	}
	.hi-zb--dark .hi-zb-inline__panel {
		border-top-color: var(--hi-zb-sep-dark);
	}
}