/**
 * Нативное поле даты/времени (Flatpickr: .flatpickr-mobile / type=datetime-local).
 * --mb-fleet-datetime-inner-px на .wpcf7-form-control-wrap задаётся в frontend-widgets.js (ширина на iOS).
 */

/*
 * Календарь вешается на body; без .open он должен быть невидим. Иначе на страницах вроде /avtopark/
 * (модалка бронирования в футере, Flatpickr раньше инициализировался до открытия) виден «хвост» внизу.
 */
.flatpickr-calendar:not(.open):not(.inline) {
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Фон сетки дней, шапки дней недели и блока времени (поверх темы dark с CDN) */
.flatpickr-calendar .dayContainer,
.flatpickr-calendar .flatpickr-weekdays,
.flatpickr-calendar .flatpickr-weekdaycontainer,
.flatpickr-calendar span.flatpickr-weekday,
.flatpickr-calendar .flatpickr-current-month,
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-next-month,
.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-months .flatpickr-month,

.flatpickr-calendar.hasTime .flatpickr-time {
	background: #222 !important;
}

/* Стрелка сверху: в Flatpickr это треугольник на border, не background */
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
	border-bottom-color: #222 !important;
}

/* Сетка обёртки: сжатие minmax(0,1fr) + обрезка горизонтали */
.mb-car-detail__cta-form .mb-form-rent__field .wpcf7-form-control-wrap:has(input[type='datetime-local']),
.mb-cta-service-date .wpcf7-form-control-wrap:has(input[type='datetime-local']),
.mb-cta-date-wishes .mb-cta-date-wishes__form .wpcf7-form-control-wrap:has(input[type='datetime-local']),
body.mb-fleet-booking-modal-open .mb-fleet-booking-popup .mb-form-rent__field .wpcf7-form-control-wrap:has(input[type='datetime-local']) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow-x: hidden;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
}

.mb-car-detail__cta-form form.wpcf7-form,
.mb-car-detail__cta-form .mb-form-rent-section {
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.mb-car-detail__cta-form .mb-form-rent__field > p,
.mb-car-detail__cta-form .mb-form-rent__field > .wpcf7-form-control-wrap {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.mb-car-detail__cta-form .mb-form-rent__field.ui-input {
	max-width: 100%;
	min-width: 0;
	overflow-x: hidden;
}

.mb-cta-service-date .wpcf7 form.mb-cta-cf7,
.mb-cta-service-date .wpcf7 form {
	min-width: 0;
}

.mb-cta-service-date .mb-cta-cf7__row--split > label {
	min-width: 0;
}

/* ——— Модалка бронирования ——— */
#mb-fleet-booking-modal input[type='datetime-local'],
body.mb-fleet-booking-modal-open .mb-fleet-booking-popup input.flatpickr-mobile {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: min(100%, var(--mb-fleet-datetime-inner-px, 10000px));
	min-width: 0 !important;
	height: auto;
	min-height: 44px;
	padding: 4px 8px;
	border-radius: 4px;
	font-family: inherit;
	font-size: 16px;
	line-height: normal;
	text-align: left;
	font-weight: 400;
	background: var(--mbcd-surface-2, #222) !important;
	border: 1px solid var(--mbcd-nav-border, #4e4e4e) !important;
	color: var(--mbcd-text, #fff) !important;
}

/* ——— Форма на странице авто ——— */
.mb-car-detail__cta-form input[type='datetime-local'],
.mb-car-detail__cta-form input.flatpickr-mobile {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: min(100%, var(--mb-fleet-datetime-inner-px, 10000px));
	min-width: 0 !important;
	height: auto;
	min-height: 44px;
	padding: 6px 10px;
	border-radius: 4px;
	font-family: inherit;
	font-size: var(--mbcd-fs-body, clamp(0.9375rem, 0.88rem + 0.4vw, 1.0625rem));
	line-height: normal;
	text-align: left;
	font-weight: 300;
	background: var(--mbcd-surface-1);
	border: 1px solid #676767;
	color: var(--mbcd-text);
}

.mb-car-detail__cta-form input[type='datetime-local']:focus,
.mb-car-detail__cta-form input.flatpickr-mobile:focus {
	outline: none;
	border-color: #8a8a8a;
}

/* ——— CTA Premium (CF7) ——— */
.mb-cta-service-date input[type='datetime-local'],
.mb-cta-service-date input.flatpickr-mobile {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: min(100%, var(--mb-fleet-datetime-inner-px, 10000px));
	min-width: 0 !important;
	height: auto;
	min-height: 44px;
	padding: 8px 12px;
	border-radius: 4px;
	font-family: inherit;
	font-size: 0.95rem;
	line-height: normal;
	text-align: left;
	font-weight: 400;
	background: rgba(19, 22, 28, 0.96);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: #fafafa;
	outline: none;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.mb-cta-service-date input[type='datetime-local']:focus,
.mb-cta-service-date input.flatpickr-mobile:focus {
	border-color: rgba(250, 250, 250, 0.34);
	background: rgba(22, 25, 32, 0.98);
	box-shadow: 0 0 0 1px rgba(250, 250, 250, 0.08);
}

/* ——— CTA «дата + пожелания» ——— */
.mb-cta-date-wishes .mb-cta-date-wishes__form input[type='datetime-local'],
.mb-cta-date-wishes .mb-cta-date-wishes__form input.flatpickr-mobile {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: min(100%, var(--mb-fleet-datetime-inner-px, 10000px));
	min-width: 0 !important;
	height: auto;
	min-height: 44px;
	padding: 8px 12px;
	border-radius: 6px;
	font-family: inherit;
	font-size: 0.95rem;
	line-height: normal;
	text-align: left;
	font-weight: 400;
	background: rgba(24, 28, 36, 0.98);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: #fafafa;
	outline: none;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.mb-cta-date-wishes .mb-cta-date-wishes__form input[type='datetime-local']:focus,
.mb-cta-date-wishes .mb-cta-date-wishes__form input.flatpickr-mobile:focus {
	outline: none;
	border-color: rgba(250, 250, 250, 0.4);
}

@supports (width: -webkit-fill-available) {
	#mb-fleet-booking-modal input[type='datetime-local'],
	body.mb-fleet-booking-modal-open .mb-fleet-booking-popup input.flatpickr-mobile,
	.mb-car-detail__cta-form input[type='datetime-local'],
	.mb-car-detail__cta-form input.flatpickr-mobile,
	.mb-cta-service-date input[type='datetime-local'],
	.mb-cta-service-date input.flatpickr-mobile,
	.mb-cta-date-wishes .mb-cta-date-wishes__form input[type='datetime-local'],
	.mb-cta-date-wishes .mb-cta-date-wishes__form input.flatpickr-mobile {
		width: -webkit-fill-available;
	}
}

#mb-fleet-booking-modal input[type='datetime-local']::-webkit-datetime-edit,
body.mb-fleet-booking-modal-open .mb-fleet-booking-popup input[type='datetime-local']::-webkit-datetime-edit,
.mb-car-detail__cta-form input[type='datetime-local']::-webkit-datetime-edit,
.mb-cta-service-date input[type='datetime-local']::-webkit-datetime-edit,
.mb-cta-date-wishes .mb-cta-date-wishes__form input[type='datetime-local']::-webkit-datetime-edit {
	padding: 0;
	margin: 0;
	max-width: 100%;
	text-align: left;
}

#mb-fleet-booking-modal input[type='datetime-local']::-webkit-datetime-edit-fields-wrapper,
body.mb-fleet-booking-modal-open
	.mb-fleet-booking-popup
	input[type='datetime-local']::-webkit-datetime-edit-fields-wrapper,
.mb-car-detail__cta-form input[type='datetime-local']::-webkit-datetime-edit-fields-wrapper,
.mb-cta-service-date input[type='datetime-local']::-webkit-datetime-edit-fields-wrapper,
.mb-cta-date-wishes .mb-cta-date-wishes__form input[type='datetime-local']::-webkit-datetime-edit-fields-wrapper {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	padding: 0;
	margin: 0;
	max-width: 100%;
	text-align: left;
}

#mb-fleet-booking-modal input[type='datetime-local']::-webkit-calendar-picker-indicator,
body.mb-fleet-booking-modal-open .mb-fleet-booking-popup input[type='datetime-local']::-webkit-calendar-picker-indicator,
.mb-car-detail__cta-form input[type='datetime-local']::-webkit-calendar-picker-indicator,
.mb-cta-service-date input[type='datetime-local']::-webkit-calendar-picker-indicator,
.mb-cta-date-wishes .mb-cta-date-wishes__form input[type='datetime-local']::-webkit-calendar-picker-indicator {
	margin: 0 0 0 4px;
	padding: 0;
	opacity: 0.85;
}