/**
 * booking-form-vue3-package.css — isolated extract of the legacy Service Package
 * "Redeem Package" summary styles for the Vue 3 booking form.
 *
 * The Vue 3 form loads only the Lite legacy-front stylesheet (which already
 * carries the base `.bpa-front-module--bs-amount-details` / `.bpa-fm--bs-amount-item`
 * layout, the `bpaFadeInUp` keyframes, the `.bpa-front-form-control` input and the
 * `.bpa-front-btn` button + `.bpa-front-btn--loader__circles` spinner). These rules
 * are the PACKAGE-specific additions only (the redeem two-column box + the applied
 * chip), mirroring the legacy coupon module layout so the redeem box reads as a
 * native summary row.
 *
 * The Vue 3 Summary root carries `.bpa-front-module--booking-summary`, and the
 * package box mounts a `.bpa-is-package-module-enable` wrapper inside it.
 *
 * Enqueued by {@see \BookingPressPackage\Vue3\PackageFeature} (deps: the Lite
 * legacy-front stylesheet) only when the package module is active.
 */

/* --- Package redemption line (red) ---------------------------------------- */
.bpa-front-module--booking-summary .bpa-fm--bs-amount-item .bpa-is-pkg__price {
	color: var(--bpa-sc-danger);
	text-align: right;
}

/* --- Package input + applied rows (border-top, fade-in) ------------------- */
.bpa-front-module--booking-summary .bpa-is-package-module-enable .bpa-fm--bs__package-module-textbox,
.bpa-front-module--booking-summary .bpa-is-package-module-enable .bpa-is-package-applied {
	position: relative;
	padding: 12px 24px;
	border-top: 1px solid var(--bpa-gt-gray-400);
	-webkit-animation-name: bpaFadeInUp;
	animation-name: bpaFadeInUp;
	animation-timing-function: cubic-bezier(.51, .92, .24, 1.15);
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}

/* --- Package input box (two-column layout) -------------------------------- */
.bpa-fm--bs__package-module-textbox {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.bpa-fm--bs__package-module-textbox .bpa-pmt__right {
	min-width: 330px;
	position: relative;
}

.bpa-fm--bs__package-module-textbox .bpa-front-form-label {
	font-size: 14px;
	line-height: 40px;
	font-weight: 500;
	font-family: var(--bpa-primary-font);
	display: block;
	color: var(--bpa-dt-black-300);
	position: relative;
	margin-bottom: 0;
}

.bpa-fm--bs__coupon-module-textbox .bpa-pkg-select-control{
	margin-right: 15px;
}

.bpa-fm--bs__package-module-textbox .bpa-package-select {
	width: 100%;
}

.bpa-fm--bs__package-module-textbox button.bpa-front-btn {
	margin-top: 8px;
	padding: 7px 20px !important;
	border-radius: var(--bpa-radius-4px) !important;
	font-size: 14px;
	line-height: 17px;
	min-width: 82px;
	justify-content: center;
}

/* --- Package note (login message) + validation ---------------------------- */
.bpa-front-module--booking-summary .bpa-is-package-module-enable .bpa-bs__package-note,
.bpa-front-module--booking-summary .bpa-is-package-module-enable .bpa-bs__package-validation {
	margin-top: 8px;
}

.bpa-front-module--booking-summary .bpa-is-package-module-enable .bpa-bs__package-note p {
	font-size: 13px;
	font-weight: 500;
	font-family: var(--bpa-primary-font);
	color: var(--bpa-dt-black-300);
}

.bpa-front-module--booking-summary .bpa-is-package-module-enable .bpa-bs__package-validation p {
	font-size: 13px;
	font-weight: 500;
	font-family: var(--bpa-primary-font);
}

.bpa-front-module--booking-summary .bpa-is-package-module-enable .bpa-bs__package-validation.--is-error p {
	color: var(--bpa-sc-danger);
}

/* --- Applied package chip (green) + clear "x" ----------------------------- */
.bpa-front-module--booking-summary .bpa-is-package-module-enable .bpa-is-package-applied .bpa-bs-ai__item span {
	background-color: var(--bpa-pt-main-green);
	border-radius: var(--bpa-radius-2px);
	color: var(--bpa-cl-white);
	font-family: var(--bpa-primary-font);
	font-size: 13px;
	font-weight: 500;
	display: inline-block;
	padding: 2px 6px;
	box-sizing: border-box;
	margin-left: 8px;
}

.bpa-front-module--booking-summary .bpa-is-package-module-enable .bpa-is-package-applied .bpa-bs-ai__item span svg {
	width: 14px;
	vertical-align: middle;
	margin-left: 4px;
	cursor: pointer;
	fill: var(--bpa-cl-white);
	margin-top: -1px;
}

/* --- Mobile (<=576px) — legacy parity ------------------------------------- */
@media (max-width: 576px) {
	.bpa-fm--bs__package-module-textbox .bpa-pmt__right {
		min-width: 100%;
	}

	.bpa-front-module--booking-summary .bpa-is-package-module-enable .bpa-fm--bs__package-module-textbox {
		padding: 8px 20px;
		flex-direction: column;
	}

	.bpa-fm--bs__package-module-textbox .bpa-front-form-label {
		line-height: 20px;
		margin-bottom: 6px;
	}

	.bpa-front-module--booking-summary .bpa-is-package-module-enable .bpa-is-package-applied {
		padding: 8px 20px;
		margin-top: 8px;
	}
}
/* --- Package note (login message) + validation ---------------------------- */
.bpa-fm--bs__package-module-box + .bpa-bs__coupon-validation,
.bpa-fm--bs__package-module-box ~ .bpa-bs__coupon-validation {
	margin-top: 0;
}

/* --- Mobile (<=576px) — legacy parity ------------------------------------- */
@media (max-width: 576px) {
	.bpa-fm--bs__package-module-box .bpa-pkg-select-control {
		width: 100%;
		margin-right: 10px;
	}
}

/* --- Hide Coupon border when Package is active ---------------------------- */
.bpa-package-module-container {
	border-bottom: none !important;
	padding-bottom: 0 !important;
}

.bpa-hide-coupon-top-border .bpa-front-module--bs-amount-details {
	border-top: none !important;
	padding-top: 0 !important;
}