/**
 * booking-form-vue3-gift-card.css — isolated styles for the Vue 3 "Redeem Gift
 * Card" box.
 *
 * The Vue 3 form loads 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 and the `.bpa-front-btn--loader__circles` spinner).
 * These rules are the GIFT-CARD-specific additions, mirroring the Coupon extract
 * (`bookingpress-appointment-booking-pro/css/booking-form-vue3-coupon.css`) so the
 * redeem box matches the legacy coupon-style look.
 *
 * The Vue 3 Summary root carries `.bpa-front-module--booking-summary`; the redeem
 * box mounts a `.bpa-is-gift-card-module-enable` wrapper inside it (in the
 * `summary-step:above-actions` slot), so these scoped selectors match the DOM.
 *
 * Enqueued by {@see \BookingPressGiftCard\Vue3\GiftCardFeature} (deps: the Lite
 * legacy-front stylesheet) only when the redeem feature is engaged.
 */

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

/* --- Payable-now line (emphasised) --------------------------------------- */
.bpa-front-module--booking-summary .bpa-is-gift-card-module-enable .bpa-is-gc-payable-row .bpa-bs-ai__item {
	font-weight: 600;
}

.bpa-front-module--booking-summary .bpa-is-gift-card-module-enable .bpa-is-gc__payable {
	text-align: right;
}

/* --- Fix: remove inherited border-top separator line above the gift card. --- */
.bpa-front-module--booking-summary .bpa-front-module--bs-amount-details.bpa-is-gift-card-module-enable {
	/* border-top: none !important; */
	/* padding-top: 12px !important; */	/* Gift Card From top height fix */
}

/* --- Input + applied rows (fade-in, NO extra border-top — outer wrapper and
     the preceding section already provide the single divider line). ----------- */
.bpa-front-module--booking-summary .bpa-is-gift-card-module-enable .bpa-fm--bs__gift-card-module-textbox,
.bpa-front-module--booking-summary .bpa-is-gift-card-module-enable .bpa-is-gift-card-applied {
	/* border-top: none !important; */
	position: relative;
	padding: 12px 24px;
	-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;
	align-items: center;
}

.bpa-front-module--booking-summary .bpa-is-gift-card-module-enable .bpa-is-gc-payable-row {
	padding: 12px 24px;
}

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

.bpa-fm--bs__gift-card-module-textbox .bpa-cmt__right {
	min-width: 330px;
	position: relative;
}

.bpa-fm--bs__gift-card-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;
}

/** Vue3 Gift Card — strip bp-ui-input inner border/shadow (mirrors coupon's bpa-coupon-dt-box rules) */
.bpa-gift-card-dt-box .bpa-cmt__right .bpa-form-control {
	padding: 0px !important;
}

.bpa-gift-card-dt-box .bpa-cmt__right .bpa-form-control .bp-input__wrapper {
	padding: 0;
	width: 100%;
	box-shadow: none !important;
	border: 0 !important;
	min-height: 40px !important;
}

.bpa-gift-card-dt-box .bpa-cmt__right .bpa-form-control .bp-input__wrapper .bp-input__inner {
	border: 0 !important;
}

.bpa-gift-card-dt-box .bpa-cmt__right button.bpa-front-btn {
	height: 38px;
}

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

/* --- Validation message --------------------------------------------------- */
.bpa-front-module--booking-summary .bpa-is-gift-card-module-enable .bpa-bs__gift_card-validation {
	margin-top: 8px;
	display: flex;
	align-items: center;
}

.bpa-front-module--booking-summary .bpa-is-gift-card-module-enable .bpa-bs__gift_card-validation svg {
	width: 16px;
	margin-right: 4px;
}

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

.bpa-front-module--booking-summary .bpa-is-gift-card-module-enable .bpa-bs__gift_card-validation.--is-error span,
.bpa-front-module--booking-summary .bpa-is-gift-card-module-enable .bpa-bs__gift_card-validation.--is-error p {
	color: var(--bpa-sc-danger);
}

.bpa-front-module--booking-summary .bpa-is-gift-card-module-enable .bpa-bs__gift_card-validation.--is-error svg {
	fill: var(--bpa-sc-danger);
}

/* --- Applied gift-card chip (green) + remove "x" -------------------------- */
.bpa-front-module--booking-summary .bpa-is-gift-card-module-enable .bpa-is-gift-card-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;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	margin-left: 8px;
}

.bpa-front-module--booking-summary .bpa-is-gift-card-module-enable .bpa-is-gift-card-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__gift-card-module-textbox .bpa-cmt__right {
		min-width: 100%;
	}

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

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

	.bpa-front-module--booking-summary .bpa-is-gift-card-module-enable .bpa-is-gift-card-applied,
	.bpa-front-module--booking-summary .bpa-is-gift-card-module-enable .bpa-is-gc-payable-row {
		padding: 8px 20px;
	}

	.bpa-front-module--booking-summary .bpa-is-gift-card-module-enable .bpa-fm--bs__gift-card-module-textbox button.bpa-front-btn {
		position: absolute;
		top: 3px;
		padding: 8px 10px !important;
		right: 3px;
		font-size: 0;
		min-width: unset;
		max-width: unset;
	}

	.bpa-front-module--booking-summary .bpa-is-gift-card-module-enable .bpa-fm--bs__gift-card-module-textbox button.bpa-front-btn::before {
		content: '';
		background-color: var(--bpa-cl-white);
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M9 16.2l-3.5-3.5c-.39-.39-1.01-.39-1.4 0-.39.39-.39 1.01 0 1.4l4.19 4.19c.39.39 1.02.39 1.41 0L20.3 7.7c.39-.39.39-1.01 0-1.4-.39-.39-1.01-.39-1.4 0L9 16.2z'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M9 16.2l-3.5-3.5c-.39-.39-1.01-.39-1.4 0-.39.39-.39 1.01 0 1.4l4.19 4.19c.39.39 1.02.39 1.41 0L20.3 7.7c.39-.39.39-1.01 0-1.4-.39-.39-1.01-.39-1.4 0L9 16.2z'/%3E%3C/svg%3E");
		width: 16px;
		height: 16px;
		display: block;
	}

	.bpa-front-module--booking-summary .bpa-is-gift-card-module-enable .bpa-fm--bs__gift-card-module-textbox button.bpa-front-btn.bpa-front-btn--is-loader::before {
		opacity: 0;
	}
}