/* Form-only layout when HFF is embedded in a Bricks popup.
   Bricks owns overlay, card, radius, padding, and backdrop for every theme.
   This file styles HFF internals only — never .brx-popup* chrome. */

.hff-flow--bricks-popup {
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.hff-flow--bricks-popup .hff-flow__panel {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: transparent;
	box-shadow: none;
	border: 0;
	padding: 0;
}

.hff-flow--bricks-popup .hff-flow__stage {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--hff-accent, #111111) 40%, transparent) transparent;
}

.hff-flow--bricks-popup .hff-flow__stage::-webkit-scrollbar {
	width: 6px;
}

.hff-flow--bricks-popup .hff-flow__stage::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--hff-accent, #111111) 40%, transparent);
	border-radius: 999px;
}

.hff-flow--bricks-popup.hff-theme-luxury .hff-flow__stage,
.hff-flow--bricks-popup.hff-theme-dream-charters .hff-flow__stage {
	scrollbar-color: rgba(204, 168, 65, 0.45) transparent;
}

.hff-flow--bricks-popup.hff-theme-luxury .hff-flow__stage::-webkit-scrollbar-thumb,
.hff-flow--bricks-popup.hff-theme-dream-charters .hff-flow__stage::-webkit-scrollbar-thumb {
	background: rgba(204, 168, 65, 0.45);
}

.hff-flow--bricks-popup.hff-theme-american-concealed .hff-flow__stage {
	scrollbar-color: rgba(75, 163, 227, 0.45) transparent;
}

.hff-flow--bricks-popup.hff-theme-american-concealed .hff-flow__stage::-webkit-scrollbar-thumb {
	background: rgba(75, 163, 227, 0.45);
}

.hff-flow--bricks-popup .hff-flow__status {
	flex-shrink: 0;
}

.hff-flow--bricks-popup .hff-flow__bricks-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 24px;
	margin: 0 0 24px;
	min-height: 76px;
	flex-shrink: 0;
	position: relative;
	z-index: 2;
}

.hff-flow--bricks-popup .hff-flow__brand {
	margin: 0;
	flex: 0 0 auto;
}

.hff-flow--bricks-popup .hff-flow__logo {
	display: block;
	width: auto;
	height: 76px;
	max-height: 76px;
	max-width: 120px;
	object-fit: contain;
}

/* Keep the in-form close in the header row — never restyle Bricks' own close. */
.hff-flow--bricks-popup .hff-flow__bricks-header .hff-flow__close {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	flex: 0 0 20px;
	align-self: center;
	width: 20px;
	height: 20px;
	margin: 0;
}

@media (max-width: 640px) {
	.hff-flow--bricks-popup .hff-flow__bricks-header {
		min-height: 56px;
		margin-bottom: 28px;
	}

	.hff-flow--bricks-popup .hff-flow__logo {
		height: 56px;
		max-height: 56px;
		max-width: 96px;
	}
}