/**
 * CLECOD — Amelia booking form layout fixes.
 */

/* Phone + email need full width; country selector cannot fit in a 50% column. */
.amelia-v2-booking #amelia-container .am-fs__info-form .el-form-item.am-info-email,
.amelia-v2-booking #amelia-container .am-fs__info-form .el-form-item:has(.am-input-phone-wrapper),
#amelia-app-backend-new .am-fs__info-form .el-form-item.am-info-email,
#amelia-app-backend-new .am-fs__info-form .el-form-item:has(.am-input-phone-wrapper),
.amelia-app-backend-new .am-fs__info-form .el-form-item.am-info-email,
.amelia-app-backend-new .am-fs__info-form .el-form-item:has(.am-input-phone-wrapper) {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
}

.amelia-v2-booking #amelia-container .am-input-phone-wrapper,
.amelia-v2-booking #amelia-container .am-input-phone.m-input-phone-number,
#amelia-app-backend-new .am-input-phone-wrapper,
#amelia-app-backend-new .am-input-phone.m-input-phone-number,
.amelia-app-backend-new .am-input-phone-wrapper,
.amelia-app-backend-new .am-input-phone.m-input-phone-number {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
}

.amelia-v2-booking #amelia-container .am-input-phone.m-input-phone-number,
#amelia-app-backend-new .am-input-phone.m-input-phone-number,
.amelia-app-backend-new .am-input-phone.m-input-phone-number {
	display: flex !important;
	align-items: stretch !important;
	flex-wrap: nowrap !important;
	gap: 8px !important;
}

/* Give the country selector enough room and keep both fields side by side. */
.amelia-v2-booking #amelia-container .am-input-phone .m-select-country,
#amelia-app-backend-new .am-input-phone .m-select-country,
.amelia-app-backend-new .am-input-phone .m-select-country {
	flex: 0 0 120px !important;
	width: 120px !important;
	min-width: 120px !important;
	max-width: 120px !important;
	position: relative !important;
	z-index: 2 !important;
}

.amelia-v2-booking #amelia-container .am-input-phone .m-select-country .m-select,
.amelia-v2-booking #amelia-container .am-input-phone .m-select-country .m-popover,
.amelia-v2-booking #amelia-container .am-input-phone .m-select-country .m-popover-trigger,
#amelia-app-backend-new .am-input-phone .m-select-country .m-select,
#amelia-app-backend-new .am-input-phone .m-select-country .m-popover,
#amelia-app-backend-new .am-input-phone .m-select-country .m-popover-trigger,
.amelia-app-backend-new .am-input-phone .m-select-country .m-select,
.amelia-app-backend-new .am-input-phone .m-select-country .m-popover,
.amelia-app-backend-new .am-input-phone .m-select-country .m-popover-trigger {
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
}

.amelia-v2-booking #amelia-container .am-input-phone .m-select-country .m-input-wrapper.--border,
#amelia-app-backend-new .am-input-phone .m-select-country .m-input-wrapper.--border,
.amelia-app-backend-new .am-input-phone .m-select-country .m-input-wrapper.--border {
	height: 40px !important;
	min-height: 40px !important;
	border-radius: 6px !important;
	padding: 0 8px 0 12px !important;
	box-sizing: border-box !important;
}

/* Number field: fill remaining space, align with country selector. */
.amelia-v2-booking #amelia-container .am-input-phone .m-phone-input,
#amelia-app-backend-new .am-input-phone .m-phone-input,
.amelia-app-backend-new .am-input-phone .m-phone-input {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	position: relative !important;
	z-index: 1 !important;
}

.amelia-v2-booking #amelia-container .am-input-phone .m-phone-input .m-input-wrapper.--border,
#amelia-app-backend-new .am-input-phone .m-phone-input .m-input-wrapper.--border,
.amelia-app-backend-new .am-input-phone .m-phone-input .m-input-wrapper.--border {
	height: 40px !important;
	min-height: 40px !important;
	border-radius: 6px !important;
	box-sizing: border-box !important;
}

.amelia-v2-booking #amelia-container .am-input-phone .m-phone-input .m-input-wrapper-input,
#amelia-app-backend-new .am-input-phone .m-phone-input .m-input-wrapper-input,
.amelia-app-backend-new .am-input-phone .m-phone-input .m-input-wrapper-input {
	width: 100% !important;
	min-width: 0 !important;
}

.amelia-v2-booking #amelia-container .am-input-phone .m-phone-input input.m-input-input,
#amelia-app-backend-new .am-input-phone .m-phone-input input.m-input-input,
.amelia-app-backend-new .am-input-phone .m-phone-input input.m-input-input {
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	padding: 0 12px !important;
	box-sizing: border-box !important;
	overflow: visible !important;
	text-overflow: ellipsis !important;
}

/* The country list is teleported beside the input; make it readable. */
.amelia-v2-booking #amelia-container .m-popover-panel:has(.m-select-list),
.amelia-v2-booking #amelia-container .m-select-list,
#amelia-app-backend-new .m-popover-panel:has(.m-select-list),
#amelia-app-backend-new .m-select-list,
.amelia-app-backend-new .m-popover-panel:has(.m-select-list),
.amelia-app-backend-new .m-select-list {
	width: 340px !important;
	min-width: 300px !important;
	max-width: min(340px, calc(100vw - 32px)) !important;
}

.amelia-v2-booking #amelia-container .m-select-list__search-input,
.amelia-v2-booking #amelia-container .m-select-list__scroll-wrapper,
#amelia-app-backend-new .m-select-list__search-input,
#amelia-app-backend-new .m-select-list__scroll-wrapper,
.amelia-app-backend-new .m-select-list__search-input,
.amelia-app-backend-new .m-select-list__scroll-wrapper {
	width: auto !important;
	max-width: none !important;
}

.amelia-v2-booking #amelia-container .m-select-list-item,
#amelia-app-backend-new .m-select-list-item,
.amelia-app-backend-new .m-select-list-item {
	width: auto !important;
	min-width: 0 !important;
}

@media (max-width: 480px) {
	.amelia-v2-booking #amelia-container .am-input-phone .m-select-country,
	#amelia-app-backend-new .am-input-phone .m-select-country,
	.amelia-app-backend-new .am-input-phone .m-select-country {
		flex-basis: 104px !important;
		width: 104px !important;
		min-width: 104px !important;
		max-width: 104px !important;
	}
}