// Reset & Base

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap");

#wpcontent,
.auto-fold #wpcontent {
	padding-left: 0;
}

// ============================================
// WIZARD CONTAINER
// ============================================

#better-payment-quick-setup-wizard-container {
	box-sizing: border-box;
	font-family: "IBM Plex Sans", sans-serif;
	padding: 0 20px;

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	span,
	a {
		margin: 0;
		padding: 0;
	}

	img {
		max-width: 100%;
	}

	.bp-wizard {
		padding: 80px 0;
		max-width: 1170px;
		margin: 0 auto;

		&__progress {
			margin-bottom: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 16px;
			padding: 16px 32px;
			background: #ffffff;
			border: 1px solid #eaebf3;
			border-radius: 8px;
		}

		&__content {
			background: #ffffff;
			border-radius: 8px;
			padding: 40px;
			border: 1px solid #eaebf3;

			&--start {
				padding: 40px 40px 24px;
			}

			&--payment {
				padding: 40px 40px 65px;
			}

			&--features {
				padding: 40px 24px 48px 40px;
			}

			&--finish {
				padding: 80px 60px;
			}
		}

		&__hero {
			text-align: center;
			max-width: 665px;
			margin: 0 auto;
		}

		&__illustration {
			margin-bottom: 48px;
		}

		&__title {
			font-size: 24px;
			font-weight: 600;
			color: #15253e;
			line-height: 120%;
			margin-bottom: 16px;
		}

		&__description {
			font-size: 16px;
			color: #4c5c7a;
			line-height: 150%;
			margin-bottom: 32px;
		}

		&__actions {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 12px;
			margin-bottom: 34px;
		}

		&__notice {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 4px;
			font-size: 12px;
			line-height: 120%;
			color: #4c5c7a;

			span {
				text-align: left;
			}

			svg {
				flex-shrink: 0;
				color: #febd25;
			}

			.bp-link {
				font-size: 12px;
				color: #222b3d;

				&:hover {
					color: #222b3d;
				}
			}
		}

		&__navigation {
			display: flex;
			justify-content: flex-end;
			margin-top: 16px;
			gap: 16px;
		}
	}

	// ============================================
	// PROGRESS STEPS
	// ============================================
	.bp-progress-step {
		display: flex;
		align-items: center;
		gap: 8px;
		transition: all 0.3s ease;
		padding: 6px 12px;
		border-radius: 8px;
		background: transparent;

		// EVERY state keeps this 1px border and only recolours it. The border used
		// to be applied by a separate `bp-progress-step-border` class on all steps
		// EXCEPT the active one, so the current step measured 36px against its
		// neighbours' 38px and the centred row shifted sideways on every Next /
		// Back click. Never move the border into a state modifier again.
		border: 1px solid #cbd1da;

		&__icon {
			width: 24px;
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #818da1;
			transition: all 0.3s ease;
		}

		&__label {
			font-size: 14px;
			font-weight: 500;
			line-height: 120%;
			color: #838a95;
			transition: all 0.3s ease;
		}

		&__arrow {
			width: 20px;
			height: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #cbd1da;
			font-size: 20px;
			transition: all 0.3s ease;

			// The chevron leaving a completed step is part of the travelled path.
			&--done svg path {
				stroke: #6e58f7;
			}
		}

		// Not-yet-reached. The icon stroke is forced grey because a couple of the
		// step SVGs (Start) hardcode a purple `stroke` attribute, which would
		// otherwise make an unreached step look reached.
		&--upcoming {
			.bp-progress-step__icon svg path {
				stroke: #818da1;
			}
		}

		// The step the user is on: a solid dark pill, so which step is current is
		// legible at a glance instead of being a two-tone difference between two
		// near-identical lavenders (#F6F5FF vs #F2F0FF, both with purple labels).
		&--active {
			background: #4a2cd6;
			border-color: #4a2cd6;
			box-shadow: 0px 0px 0px 3px rgba(108, 59, 255, 0.18);

			.bp-progress-step__icon svg path {
				stroke: #ffffff;
			}

			.bp-progress-step__label {
				color: #ffffff;
			}
		}

		// Already done: tinted, bordered, and unmistakably behind the dark pill.
		&--completed {
			background: #ede9ff;
			border-color: #c9befb;

			.bp-progress-step__icon {
				color: #4a2cd6;

				// CompleteIcon is a filled tick, not a stroked outline.
				svg path {
					fill: #4a2cd6;
				}
			}

			.bp-progress-step__label {
				color: #4a2cd6;
			}
		}
	}

	// ============================================
	// BUTTONS
	// ============================================
	.bp-btn {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 8px 12px;
		font-size: 14px;
		font-weight: 500;
		border-radius: 4px;
		border: none;
		cursor: pointer;
		transition: all 0.3s ease;
		text-decoration: none;

		svg {
			flex-shrink: 0;
		}

		&--process {
			padding: 12px 25px 12px 20px;
		}

		&--primary {
			color: #fff;
			background: #6c3bff;

			&:hover {
				background: #6c3bff;
			}
		}

		&--secondary {
			background: transparent;
			color: #6b59ee;
			border: 1px solid #6b59ee;

			&:hover {
				background: transparent;
				border-color: #6b59ee;
			}
		}

		&.skip {
			color: #6a758c;
			border: 1px solid #6a758c;
		}

		&--upgrade {
			background: #ff8f1e;
			color: #f7f8fa;
			padding: 11px 16px;
			font-size: 14px;
			border-radius: 8px;

			&:hover {
				background: #ff8f1e;
				color: #f7f8fa;
			}
		}

		&--large {
			padding: 16px 32px;
			font-size: 16px;
		}

		&__icon {
			font-size: 20px;
		}

		&:focus,
		&:focus-visible {
			outline: 0;
			box-shadow: none;
		}
	}

	// ============================================
	// LINKS
	// ============================================
	.bp-link {
		font-size: 14px;
		line-height: 120%;
		color: #707e95;
		text-decoration: underline;
		transition: all 0.3s ease;
		cursor: pointer;

		&:hover {
			color: #707e95;
		}

		&--arrow {
			display: inline-flex;
			align-items: center;
			gap: 4px;
			font-size: 14px;
			line-height: 120%;
			font-weight: 500;
			color: #6b59ee;

			&:hover {
				color: #6b59ee;
			}
		}
		&:focus,
		&:focus-visible {
			outline: 0;
			box-shadow: none;
		}
	}

	// ============================================
	// SETTINGS PAGE
	// ============================================
	.bp-settings {
		&__grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 24px;
		}
	}

	.bp-setting-card {
		padding: 24px;
		border: 1px solid #dfe2ed;
		border-radius: 8px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 50px;
		transition: all 0.3s ease;

		&__title-wrap {
			display: flex;
			align-items: center;
			gap: 4px;
			margin-bottom: 8px;

			.bp-setting-card__title {
				margin-bottom: 0;
			}
		}

		&__title {
			font-size: 16px;
			font-weight: 600;
			line-height: 120%;
			color: #222b3d;
			margin-bottom: 8px;
		}

		&__description {
			font-size: 14px;
			line-height: 150%;
			color: #6a758c;

			.bp-link {
				color: #222b3d;
				margin-left: 4px;
			}
		}

		&__body {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 32px;
		}

		&__info {
			flex: 1;
		}
	}

	// ============================================
	// TOGGLE SWITCH
	// ============================================
	.bp-toggle {
		position: relative;
		display: inline-block;
		width: 44px;
		height: 24px;
		flex-shrink: 0;

		input {
			opacity: 0;
			width: 0;
			height: 0;

			&:checked + .bp-toggle__slider {
				background: #6b59ee;

				&:before {
					transform: translateX(20px);
				}
			}
		}

		&__slider {
			position: absolute;
			cursor: pointer;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: #b9bfca;
			border-radius: 16px;
			transition: all 0.3s ease;

			&:before {
				content: "";
				position: absolute;
				height: 20px;
				width: 20px;
				left: 2px;
				bottom: 2px;
				background: #fff;
				border-radius: 50%;
				transition: all 0.3s ease;
				box-shadow:
					0px 1.2px 2.4px 0px #1018280f,
					0px 1.2px 3.6px 0px #1018281a;
			}
		}
	}

	// ============================================
	// SELECT & INPUT
	// ============================================
	.bp-select-wrapper {
		position: relative;
		max-width: 92px;
		max-height: 40px;
		padding: 9px 47px 9px 16px;
		font-size: 14px;
		line-height: 150%;
		font-weight: 500;
		color: #222b3d;
		background: transparent;
		border: 1px solid #dfe2ed;
		border-radius: 8px;
		cursor: pointer;
		appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 16px center;
		display: inline-flex;
	}
	.bp-select {
		&-option {
			position: absolute;
			top: 42px;
			left: 50%;
			transform: translateX(-50%);
			width: 90px;
			max-height: 126px;
			overflow: auto;
			background: #fcfcfc;
			padding: 8px;
			border-radius: 8px;
			border: 1px solid #edeff5;
			box-shadow: -4px 4px 8px 0px #00023612;
		}

		&-items {
			font-size: 12px;
			font-weight: 500;
			line-height: 140%;
			color: #6a758c;
			background: transparent;
			padding: 4px 8px;
			border-radius: 4px;
			margin-bottom: 2px;
			transition: ease-in-out 0.25s;

			&:hover,
			&--active {
				color: #222b3d;
				background: #f0f3f7;
			}
		}
	}

	// ============================================
	// CURRENCY DROPDOWN
	// ============================================
	.bp-currency-dropdown {
		position: relative;
		display: inline-block;
		cursor: pointer;

		&__trigger {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 9px 16px 9px 16px;
			font-size: 14px;
			line-height: 150%;
			font-weight: 500;
			color: #222b3d;
			background: transparent;
			border: 1px solid #dfe2ed;
			border-radius: 8px;
			cursor: pointer;
			transition: all 0.3s ease;
			min-width: 92px;
			justify-content: space-between;

			// &:before {
			//   content: "";
			//   position: absolute;
			//   top: 50%;
			//   right: -9px;
			//   transform: translateY(-50%);
			//   border: 7px solid;
			//   border-color: transparent #0101012b transparent transparent;
			//   border-radius: 4px;
			//   box-shadow: 0 0 0 #000;

			// }

			&:hover {
				border-color: #c1d0e5;
			}
		}

		&__value {
			flex: 1;
			text-align: left;
		}

		&__icon {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			line-height: 0;

			svg {
				transition: transform 0.3s ease;
			}
		}

		&-icon-open {
			transform: rotate(180deg) !important;
		}

		&__list {
			position: absolute;
			bottom: 0;
			right: -68px;
			background: #fcfcfc;
			border: 1px solid #edeff5;
			border-radius: 8px;
			box-shadow: -4px 4px 8px 0px rgba(0, 2, 54, 0.0705882353);
			list-style: none;
			margin: 0;
			padding: 8px;
			z-index: 1000;
			max-height: 164px;
			overflow-y: auto;
			box-sizing: border-box;
		}

		&__item {
			font-size: 12px;
			font-weight: 500;
			line-height: 140%;
			color: #6a758c;
			background: transparent;
			padding: 6px 10px;
			border-radius: 4px;
			margin-bottom: 2px;
			transition: all 0.25s ease-in-out;
			cursor: pointer;

			&:last-child {
				margin-bottom: 0;
			}

			&:hover {
				color: #222b3d;
				background: #f0f3f7;
			}

			&--active {
				color: #222b3d;
				background: #f0f3f7;
				font-weight: 600;
			}
		}
	}

	// ============================================
	// Modal
	// ============================================
	.bp-modal-overlay {
		position: fixed;
		inset: 0;
		padding: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #2a3256b2;
		z-index: 99999;

		.bp-modal {
			&-box {
				max-width: 664px;
				background: #fcfcfc;
				border-radius: 8px;
			}

			&-header {
				padding: 20px 24px;
				background: #f0f3f7;
				border-radius: 8px 8px 0 0;
				border-bottom: 1px solid #dfe2ed;
				position: relative;

				h4 {
					font-size: 24px;
					line-height: 120%;
					font-weight: 600;
					color: #222b3d;
				}

				.close-btn {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					display: inline-flex;
					right: 24px;
					cursor: pointer;
				}
			}
			&-body {
				padding: 32px 24px;

				p {
					font-size: 16px;
					line-height: 150%;
					color: #6a758c;
				}
			}
		}
	}

	/* Loader item */
	.bp-preloader-overlay {
		position: fixed;
		inset: 0;
		left: 160px;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;

		@media (max-width: 960px) {
			left: 36px;
		}

		@media (max-width: 782px) {
			left: 0;
		}
	}

	.bp-preloader {
		text-align: center;
	}

	.bp-preloader p {
		font-size: 16px;
		color: #fff;
		margin-top: 10px;
		font-weight: 500;
	}

	.bp-spinner {
		width: 34px;
		height: 34px;
		border: 4px solid #fff;
		border-top-color: #6c3bff;
		border-radius: 50%;
		display: none;
		animation: spin 0.9s linear infinite;
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}

	// ============================================
	// PAYMENT PAGE
	// ============================================
	.bp-payment {
		display: flex;
		align-items: flex-start;
		gap: 24px;

		&__sidebar {
			width: 162px;
			background: #f0f2f5;
			padding: 16px;
			border-radius: 4px;
		}

		&__content {
			flex: 1;
		}

		&__field {
			margin-bottom: 24px;

			&:last-child {
				margin-bottom: 0;
			}

			&.live__mode {
				padding: 18px 24px;
				border: 1px solid #ecf0fc;
				border-radius: 4px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 24px;
				background: linear-gradient(
					97.66deg,
					#fff1e2 0.98%,
					#fbfcff 10.14%
				);

				.bp-payment__field-title {
					margin-bottom: 4px;
				}

				.bp-payment__field-description {
					margin-bottom: 0;
				}
			}

			&.email__field {
				padding: 18px 16px;
				border: 1px solid #dfe2ed;
				border-radius: 4px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 24px;

				.bp-payment__field-description {
					margin-bottom: 0;
				}
			}
		}

		&__field-title {
			font-size: 16px;
			font-weight: 500;
			line-height: 120%;
			color: #222b3d;
		}

		&__field-description {
			font-size: 14px;
			color: #6a758c;
			line-height: 150%;
			margin-bottom: 12px;
		}

		&__field-info {
			font-size: 12px;
			color: #899ab2;
			margin-top: 6px;

			.bp-link {
				color: #222b3d;
				font-size: 12px;
			}
		}
	}

	.bp-payment-tab {
		display: flex;
		align-items: center;
		gap: 4px;
		width: 100%;
		padding: 12px;
		font-size: 16px;
		font-weight: 500;
		line-height: 120%;
		color: #6a758c;
		background: transparent;
		border-radius: 4px;
		border: none;
		margin-bottom: 12px;
		transition: all 0.3s ease;
		cursor: pointer;

		&:last-child {
			margin-bottom: 0;
		}

		svg path {
			fill: #8f9ab0;
			transition: all 0.3s ease;
		}

		&:hover {
			background: #fff;
			color: #6e58f7;
			box-shadow: 0px 1px 4px 0px #00000040;

			svg path {
				fill: #0070e0;
			}
		}

		&--active {
			background: #fff;
			color: #6e58f7;
			box-shadow: 0px 1px 4px 0px #00000040;

			svg path {
				fill: #0070e0;
			}
		}

		&:nth-child(2) {
			&:hover {
				svg path {
					fill: #635bff;
				}
			}
			&.bp-payment-tab--active {
				svg path {
					fill: #635bff;
				}
			}
		}

		&:nth-child(3) {
			&:hover {
				svg path {
					fill: #09a5db;
				}
			}
			&.bp-payment-tab--active {
				svg path {
					fill: #09a5db;
				}
			}
		}
	}

	// ============================================
	// FORM ELEMENTS
	// ============================================
	.bp-label {
		display: block;
		font-size: 16px;
		font-weight: 500;
		line-height: 120%;
		color: #222b3d;
		margin-bottom: 4px;
	}

	.bp-input-wrapper {
		position: relative;
		display: flex;
		align-items: center;

		svg {
			position: absolute;
			left: 14px;
			top: 50%;
			transform: translateY(-50%);
			color: #899ab2;
			pointer-events: none;
		}
	}

	.bp-input {
		width: 100%;
		min-width: 280px;
		padding: 14px 14px 14px 42px;
		font-size: 14px;
		line-height: 120%;
		color: #222b3d;
		background: #ffffff;
		border: 1px solid #c1d0e5;
		border-radius: 8px;
		transition: all 0.3s ease;

		&::placeholder {
			color: #899ab2;
		}

		&:focus {
			outline: none;
			box-shadow: none;
		}
	}

	// ============================================
	// FEATURES PAGE
	// ============================================
	.bp-features {
		&__section {
			display: flex;
			align-items: center;
			gap: 40px;

			img {
				flex: 1;
			}
		}

		&__details {
			display: flex;
			flex-direction: column;
			padding-right: 16px;
		}

		&__content {
			flex: 1;
		}

		&__title {
			font-size: 24px;
			font-weight: 600;
			color: #222b3d;
			line-height: 150%;
			margin-bottom: 12px;
		}

		&__description {
			font-size: 15px;
			color: #6a758c;
			line-height: 150%;
			margin-bottom: 32px;
		}

		&__grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 16px;
			margin-bottom: 18px;
		}

		&__all {
			display: flex;
			align-items: center;
			gap: 20px;
		}

		&__item {
			display: flex;
			align-items: center;
			gap: 8px;
		}

		&__item-icon {
			display: inline-flex;

			svg {
				color: #6e58f7;
			}
		}

		&__item-label {
			font-size: 15px;
			font-weight: 400;
			line-height: 120%;
			color: #6a758c;
		}
	}

	// ============================================
	// FINISH PAGE
	// ============================================
	.bp-finish-modal {
		&__content {
			padding: 24px 52px;
			max-width: 407px;
			background: #fff;
			border-radius: 8px;
			text-align: center;

			img {
				margin-bottom: 34px;
			}
		}

		&__title {
			font-size: 24px;
			font-weight: 500;
			line-height: 120%;
			color: #222b3d;
			margin-bottom: 8px;
		}

		&__description {
			font-size: 16px;
			color: #6a758c;
			line-height: 150%;
		}
	}

	// ============================================
	// RESPONSIVE
	// ============================================
	@media (max-width: 1024px) {
		.bp-wizard {
			padding: 20px 0;

			&__progress {
				flex-wrap: wrap;
				padding: 16px 20px;
				gap: 12px 8px;
			}

			&__content {
				padding: 24px;

				&--start {
					padding: 24px 24px 20px;
				}

				&--settings,
				&--features {
					padding: 24px;
				}

				&--payment {
					padding: 24px 24px 34px;
				}

				&--finish {
					padding: 24px;
				}
			}

			&__title {
				font-size: 20px;
				margin-bottom: 12px;
			}

			&__description {
				font-size: 14px;
				margin-bottom: 24px;
			}

			&__actions {
				margin-bottom: 24px;
			}

			&__notice {
				align-items: flex-start;
				font-size: 11px;

				.bp-link {
					font-size: 11px;
				}

				svg {
					width: 14px;
					height: 14px;
				}
			}

			&__navigation {
				gap: 12px;
			}
		}

		.bp-btn {
			font-size: 12px;
			gap: 4px;
			padding: 6px 12px;

			&--process {
				padding: 10px 18px 10px 16px;
			}

			&.bp-btn--upgrade {
				padding: 10px 16px;

				svg {
					width: 14px;
					height: 14px;
				}
			}

			svg {
				width: 14px;
				height: 14px;
			}
		}

		.bp-link {
			font-size: 12px;
		}

		.bp-progress-step {
			padding: 6px 10px;
			gap: 4px;

			&__label {
				font-size: 12px;
			}

			&__icon {
				width: 18px;
				height: 18px;

				svg {
					width: 16px;
					height: 16px;
				}
			}

			&__arrow {
				width: 12px;
				height: 14px;
			}
		}

		.bp-settings__grid {
			gap: 16px;
		}

		.bp-setting {
			&-card {
				padding: 16px;
				gap: 24px;

				&__title {
					font-size: 14px;
					margin-bottom: 6px;
				}

				&__description {
					font-size: 12px;
				}

				&__title-wrap svg {
					width: 14px;
					height: 14px;
				}
			}
		}

		.bp-toggle {
			width: 40px;
			height: 20px;

			&__slider:before {
				height: 16px;
				width: 16px;
			}
		}

		.bp-select {
			padding: 8px 40px 8px 14px;
			font-size: 12px;
			background-size: 9px;
			background-position: right 12px center;
		}

		.bp-payment {
			gap: 20px;

			&__sidebar {
				width: 138px;
				display: flex;
				flex-direction: column;
				padding: 12px;
			}

			&__content {
				padding: 0;
			}

			&__field {
				margin-bottom: 16px;

				&.live__mode {
					padding: 14px 20px;
					gap: 20px;
				}

				&-title {
					font-size: 14px;
				}

				&-description {
					font-size: 12px;
				}

				&.email__field {
					padding: 14px 12px;
					gap: 20px;
				}
			}
		}

		.bp-label {
			font-size: 14px;
		}

		.bp-input-wrapper {
			svg {
				width: 14px;
				height: 14px;
			}

			.bp-input {
				min-width: 150px;
				padding: 12px 12px 12px 36px;
				font-size: 12px;
				min-height: 36px;
			}
		}

		.bp-payment-tab {
			padding: 8px 10px;
			font-size: 13px;
			margin-bottom: 8px;

			svg {
				width: 14px;
				height: 14px;
			}
		}

		.bp-features__banner {
			margin-bottom: 24px;

			&-bg-layer {
				gap: 20px;
				padding: 16px;
			}

			&-content {
				max-width: 450px;
				text-align: left;
			}

			&-title {
				font-size: 16px;
				margin-bottom: 6px;
			}

			&-description {
				font-size: 12px;
			}
		}

		.bp-features {
			&__title {
				font-size: 18px;
				margin-bottom: 8px;
			}

			&__description {
				font-size: 12px;
				margin-bottom: 24px;
			}

			&__item {
				gap: 6px;

				svg {
					width: 14px;
				}

				&-label {
					font-size: 13px;
				}
			}

			&__section {
				img {
					max-width: 300px;
				}
			}
		}

		.bp-features__grid {
			gap: 12px;
			margin-bottom: 16px;
		}

		.bp-features__all {
			gap: 16px;
		}

		.bp-setting-card__body {
			flex-direction: column;
			align-items: flex-start;
		}

		.bp-finish {
			&__content {
				padding: 40px 0;
				max-width: 320px;

				img {
					margin-bottom: 24px;
				}
			}

			&__title {
				font-size: 18px;
				margin-bottom: 6px;
			}

			&__description {
				font-size: 14px;
			}
		}

		.bp-illustration {
			width: 100%;
			max-width: 300px;
		}

		.bp-currency-dropdown {
			&__trigger {
				font-size: 12px;
				padding: 8px 12px 8px 12px;
			}
			&__list {
				bottom: 42px;
				right: 0;
				left: 0;
				max-height: 160px;
			}
			&__item {
				font-size: 11px;
			}
		}
	}

	@media (max-width: 768px) {
		.bp-wizard__hero {
			img {
				max-width: 260px;
			}
		}

		.bp-settings__grid {
			grid-template-columns: repeat(1, 1fr);
			gap: 16px;
		}

		.bp-features__section {
			display: flex;
			flex-direction: column;
			align-items: center;

			.bp-features__details {
				padding-right: 0;
			}

			img {
				display: none;
			}
		}

		.bp-payment {
			gap: 16px;
			flex-direction: column;
		}

		.bp-payment__sidebar {
			width: 100%;
			flex-direction: row;
			gap: 12px;
			box-sizing: border-box;
		}

		.bp-payment-tab {
			margin-bottom: 0;
		}
	}

	@media (max-width: 450px) {
		.bp-wizard__content--start {
			padding: 20px 30px;
		}
		.bp-wizard__title {
			font-size: 18px;
			margin-bottom: 10px;
		}
		.bp-wizard__description {
			font-size: 12px;
			margin-bottom: 20px;
		}
		.bp-payment__field.email__field {
			gap: 16px;
			flex-direction: column;
			align-items: flex-start;
		}
		.bp-input-wrapper {
			width: 100%;
		}
		.bp-features__banner-bg-layer {
			gap: 16px;
			flex-direction: column;
			align-items: flex-start;
		}
		.bp-features__title {
			font-size: 16px;
			margin-bottom: 6px;
		}
		.bp-features__grid {
			grid-template-columns: repeat(1, 1fr);
		}
	}
}