/* Classroom credit hours on BookingPress summary (Vue3).
 *
 * Subtotal lives in .bpa-front-module--bs-amount-details; myCred mounts into
 * a later .bp-v3-slot[data-bp-v3-slot="summary-step:mycred"]. Empty sibling
 * slots (coupon/tax/gift/…) between them must not leave a tall void.
 */

/* Collapse empty add-on slots between subtotal and credits. */
.bpa-front-module--booking-summary .bp-v3-slot:empty,
.bpa-front-module--booking-summary .bp-v3-slot:not(:has(.bpa-fm--bs-amount-item, .bpa-is-mycred-module-enable, .bpa-is-coupon-module-enable, .bpa-is-gift_card-applied, .bpa-fm--bs__coupon-module-textbox, .bpa-fm--bs__mycred-edit, input, button, label, .el-checkbox, .bp-ui-checkbox, .bpa-front-btn, .bpa-front-form-control)) {
	display: none !important;
	height: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	overflow: hidden !important;
	padding: 0 !important;
}

html body .bpa-front-module--booking-summary .bpa-front-module--bs-amount-details,
html body .bpa-front-module--booking-summary .bpa-is-mycred-module-enable,
html body .bpa-front-module--booking-summary .bp-v3-slot:has(.bpa-is-mycred-module-enable) {
	background: #f7f8fa;
	box-sizing: border-box !important;
	flex: 0 0 auto !important;
	height: auto !important;
	margin: 0 !important;
	max-height: none !important;
	min-height: 0 !important;
}

html body .bpa-front-module--booking-summary .bpa-front-module--bs-amount-details {
	border-bottom: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	padding: 0 !important;
}

html body .bpa-front-module--booking-summary .bpa-front-module--bs-amount-details .bpa-fm--bs-amount-item {
	align-items: center !important;
	display: flex !important;
	flex: 0 0 auto !important;
	height: auto !important;
	justify-content: space-between !important;
	min-height: 0 !important;
	padding: 0.7rem 1rem !important;
}

html body .bpa-front-module--booking-summary .bpa-is-mycred-module-enable {
	border-top: 1px solid #e4e7ec !important;
}

html body .bpa-front-module--booking-summary .bpa-fm--bs__mycred-module-checkbox {
	align-items: center !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.5rem 0.75rem !important;
	min-height: 0 !important;
	padding: 0.65rem 1rem !important;
}

.bpa-front-module--booking-summary .bpa-cmt__mycred-left--checkbox {
	flex: 1 1 auto;
	min-width: 0;
}

/* Keep checkbox box + label on one horizontal line. */
.bpa-front-module--booking-summary .bpa-cmt__mycred-left--checkbox .bp-ui-checkbox,
.bpa-front-module--booking-summary .bpa-cmt__mycred-left--checkbox .el-checkbox,
.bpa-front-module--booking-summary .bpa-cmt__mycred-left--checkbox .bp-checkbox,
.bpa-front-module--booking-summary .bpa-cmt__mycred-left--checkbox label {
	align-items: center !important;
	color: #202c45;
	display: inline-flex !important;
	font-size: 14px;
	font-weight: 500;
	gap: 10px;
	line-height: 1.35;
	margin: 0;
	vertical-align: middle;
	white-space: normal;
}

.bpa-front-module--booking-summary .bpa-cmt__mycred-left--checkbox .el-checkbox__input,
.bpa-front-module--booking-summary .bpa-cmt__mycred-left--checkbox .bp-checkbox__input {
	align-items: center;
	display: inline-flex !important;
	flex-shrink: 0;
	height: 20px;
	justify-content: center;
	line-height: 1;
	vertical-align: middle;
}

.bpa-front-module--booking-summary .bpa-cmt__mycred-left--checkbox .el-checkbox__inner,
.bpa-front-module--booking-summary .bpa-cmt__mycred-left--checkbox .bp-checkbox__inner {
	align-items: center !important;
	box-sizing: border-box !important;
	display: flex !important;
	height: 20px !important;
	justify-content: center !important;
	margin: 0 !important;
	position: relative !important;
	width: 20px !important;
}

/*
 * Element UI uses an absolute L-shaped ::after check; BookingPress uses a mask.
 * Reset absolute offsets so the mark stays centered in the red square.
 */
.bpa-front-module--booking-summary .bpa-cmt__mycred-left--checkbox .el-checkbox__inner::after,
.bpa-front-module--booking-summary .bpa-cmt__mycred-left--checkbox .bp-checkbox__inner::after {
	border: 0 !important;
	border-left: 0 !important;
	border-top: 0 !important;
	bottom: auto !important;
	height: 12px !important;
	left: auto !important;
	margin: 0 !important;
	position: static !important;
	right: auto !important;
	top: auto !important;
	transform: none !important;
	-webkit-transform: none !important;
	width: 12px !important;
}

.bpa-front-module--booking-summary .bpa-cmt__mycred-left--checkbox .el-checkbox__label,
.bpa-front-module--booking-summary .bpa-cmt__mycred-left--checkbox .bp-checkbox__label {
	line-height: 1.35 !important;
	padding-left: 0 !important;
	vertical-align: middle !important;
}

.bpa-front-module--booking-summary .bpa-fm--bs__mycred-module-checkbox > .bpa-cmt__right {
	align-items: center;
	display: flex;
	flex: 1 1 200px;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
}

.bpa-front-module--booking-summary .bpa-fm--bs__mycred-module-checkbox .bpa-front-form-control {
	max-width: 200px;
	min-width: 140px;
}

/* Compact edit strip: [hours input] [Uporabi] — no giant primary button. */
html body .bpa-front-module--booking-summary .bpa-fm--bs__mycred-edit {
	border-top: 1px solid #e4e7ec !important;
	padding: 0.55rem 0.75rem 0.65rem !important;
}

html body .bpa-front-module--booking-summary .bpa-fm--bs__mycred-edit-row {
	align-items: stretch !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 0.5rem !important;
	width: 100% !important;
}

/* Kill nested Element/BookingPress chrome — one clean field. */
html body .bpa-front-module--booking-summary .bpa-fm--bs__mycred-edit-row .bpa-front-form-control,
html body .bpa-front-module--booking-summary .bpa-fm--bs__mycred-edit-row .el-input,
html body .bpa-front-module--booking-summary .bpa-fm--bs__mycred-edit-row .el-input__wrapper,
html body .bpa-front-module--booking-summary .bpa-fm--bs__mycred-hours-input {
	background: #fff !important;
	border: 1px solid #cfd3dc !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	flex: 1 1 auto !important;
	max-width: none !important;
	min-height: 2.5rem !important;
	min-width: 0 !important;
	padding: 0 !important;
	width: auto !important;
}

html body .bpa-front-module--booking-summary .bpa-fm--bs__mycred-edit-row .el-input__wrapper {
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 0.75rem !important;
}

html body .bpa-front-module--booking-summary .bpa-fm--bs__mycred-edit-row .el-input__inner,
html body .bpa-front-module--booking-summary .bpa-fm--bs__mycred-edit-row input,
html body .bpa-front-module--booking-summary .bpa-fm--bs__mycred-edit-row input.el-input__inner {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: #161616 !important;
	font-size: 0.95rem !important;
	height: 2.5rem !important;
	line-height: 2.5rem !important;
	min-height: 2.5rem !important;
	padding: 0 0.75rem !important;
	width: 100% !important;
}

/* Theme forces light button text — pin high-contrast Apply control. */
html body .bpa-front-module--booking-summary .bpa-fm--bs__mycred-apply,
html body .bpa-frontend-vue3 .bpa-fm--bs__mycred-apply,
html body button.bpa-fm--bs__mycred-apply {
	appearance: none !important;
	-webkit-appearance: none !important;
	background: #e32934 !important;
	background-color: #e32934 !important;
	border: 0 !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	color: #ffffff !important;
	cursor: pointer !important;
	flex: 0 0 auto !important;
	font-family: inherit !important;
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	height: 2.5rem !important;
	letter-spacing: 0 !important;
	line-height: 1 !important;
	margin: 0 !important;
	min-width: 5.75rem !important;
	opacity: 1 !important;
	padding: 0 1rem !important;
	text-decoration: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	white-space: nowrap !important;
}

html body .bpa-front-module--booking-summary .bpa-fm--bs__mycred-apply:hover,
html body .bpa-front-module--booking-summary .bpa-fm--bs__mycred-apply:focus,
html body button.bpa-fm--bs__mycred-apply:hover,
html body button.bpa-fm--bs__mycred-apply:focus {
	background: #c41f2a !important;
	background-color: #c41f2a !important;
	color: #ffffff !important;
}

html body .bpa-front-module--booking-summary .bpa-fm--bs__mycred-apply:disabled {
	cursor: wait !important;
	opacity: 0.7 !important;
}

html body .bpa-front-module--booking-summary .bpa-fm--bs__mycred-edit-hint {
	color: #727e95 !important;
	font-size: 0.75rem !important;
	line-height: 1.35 !important;
	margin: 0.4rem 0 0 !important;
}

.bpa-front-module--booking-summary .bpa-fm--bs__mycred-module-discount-details {
	align-items: center;
	border-top: 1px solid #e4e7ec;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.75rem;
	justify-content: space-between;
	padding: 0.55rem 1rem 0.65rem;
}

.bpa-front-module--booking-summary .bpa-fm--bs__mycred-module-discount-details .bpa-front-form-label {
	font-weight: 500;
}

.bpa-front-module--booking-summary .bpa-fm--bs__mycred-module-discount-details .bpa-cmt__right {
	align-items: center;
	display: inline-flex;
	gap: 0.65rem;
}

.bpa-front-module--booking-summary .bpa-fm--bs__mycred-change {
	appearance: none;
	background: transparent;
	border: 0;
	color: #e32934;
	cursor: pointer;
	font-size: 0.82rem;
	font-weight: 600;
	margin: 0;
	padding: 0;
	text-decoration: underline;
}

.bpa-front-module--booking-summary .bpa-fm--bs__mycred-discount-amt {
	color: #e32934;
	font-weight: 600;
	white-space: nowrap;
}

/* Hide legacy pencil icon if any leftover markup appears. */
.bpa-front-module--booking-summary .bpa-is-mycred-edit-icon {
	display: none !important;
}

@media (max-width: 991px) {
	/* Kill BookingPress 550–600px panel floors (higher specificity than plugin). */
	html body .bpa-frontend-vue3 .bpa-front-tabs--panel-body .bpa-front-dc--body,
	html body .bpa-frontend-vue3 .bpa-front-dc--body,
	html body .bpa-frontend-vue3 .bpa-front-default-card,
	html body .bpa-frontend-vue3 .bpa-front-tabs--panel-body {
		height: auto !important;
		max-height: none !important;
		min-height: 0 !important;
	}

	html body .bpa-frontend-vue3 .bpa-front-dc--body {
		padding: 0.85rem 0.75rem 1rem !important;
	}

	/* Summary hero illustration eats space on a phone — hide it. */
	html body .bpa-front-module--booking-summary .bpa-front-module--bs-head .bpa-head__vector,
	html body .bpa-front-module--booking-summary .bpa-front-module--bs-head > svg {
		display: none !important;
		height: 0 !important;
		margin: 0 !important;
	}

	html body .bpa-front-module--booking-summary .bpa-front-module--bs-head {
		margin-bottom: 0.75rem !important;
	}

	html body .bpa-front-module--booking-summary .bpa-front-module--bs-amount-details .bpa-fm--bs-amount-item,
	html body .bpa-front-module--booking-summary .bpa-fm--bs__mycred-module-checkbox {
		padding: 0.55rem 0.75rem !important;
	}

	html body .bpa-front-module--booking-summary .bpa-cmt__mycred-left--checkbox .bp-ui-checkbox,
	html body .bpa-front-module--booking-summary .bpa-cmt__mycred-left--checkbox .el-checkbox,
	html body .bpa-front-module--booking-summary .bpa-cmt__mycred-left--checkbox label {
		font-size: 0.88rem !important;
		gap: 0.45rem !important;
	}

	/* Keep credits / CTA clear of chatbot + login hint. */
	html body .bpa-frontend-vue3 .bpa-front-tabs--foot {
		padding-bottom: 0.5rem !important;
	}

	html body:has(.bpa-frontend-vue3) .aichat-widget.is-global.is-superminimized {
		bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
	}

	/* myCred Apply — Hazel can force light text on buttons; keep readable. */
	html body .bpa-frontend-vue3 button.bpa-fm--bs__mycred-apply,
	html body .bpa-front-module--booking-summary button.bpa-fm--bs__mycred-apply {
		background: #e32934 !important;
		background-color: #e32934 !important;
		border: 0 !important;
		color: #fff !important;
		font-weight: 700 !important;
		opacity: 1 !important;
	}
}
