.bls-modal__trigger {
	align-items: center;
	background: var(--bls-color-brand-primary);
	border: 0;
	border-radius: var(--bls-radius-pill);
	color: var(--bls-color-text-inverse);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-weight: 600;
	justify-content: center;
	min-height: 48px;
	padding: 0.75rem 1.5rem;
	transition:transform 240ms ease;
}

.bls-modal__trigger:hover {
	background: var(--bls-color-brand-primary-hover);
	transform: translateY(-2px);
}

.bls-modal__trigger:focus-visible,
.bls-modal__close:focus-visible {
	outline: 3px solid var(--bls-color-focus-ring);
	outline-offset: 3px;
}

.bls-modal__dialog {
	background: transparent;
	border: 0;
	color: var(--bls-color-text-primary);
	max-height: calc(100dvh - 2rem);
	max-width: min(42rem, calc(100vw - 2rem));
	overflow: visible;
	padding: 0;
	width: 100%;
}

.bls-modal__dialog::backdrop {
	background: rgb(8 20 38 / 72%);
	backdrop-filter: blur(4px);
}

.bls-modal__dialog[open] {
	animation: bls-modal-enter 240ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.bls-modal__panel {
	background: var(--bls-color-surface-primary);
	border: 1px solid var(--bls-color-border-primary);
	border-radius: 1.5rem;
	box-shadow: 0 2rem 5rem rgb(7 28 56 / 24%);
	padding: clamp(1.5rem, 4vw, 3rem);
	position: relative;
}

.bls-modal__close {
	align-items: center;
	background: var(--bls-color-surface-subtle);
	border: 0;
	border-radius: 50%;
	color: var(--bls-color-text-primary);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 1.5rem;
	height: 2.75rem;
	justify-content: center;
	position: absolute;
	right: 1rem;
	top: 1rem;
	width: 2.75rem;
}

.bls-modal__title {
	font-size: clamp(1.75rem, 5vw, 3rem);
	letter-spacing: -0.035em;
	line-height: 1.05;
	margin: 0 3rem 1rem 0;
}

.bls-modal__body {
	color: var(--bls-color-text-secondary);
	font-size: 1.125rem;
	line-height: 1.6;
	margin: 0;
}

@keyframes bls-modal-enter {
	from {
		opacity: 0;
		transform: translateY(1.5rem) scale(0.98);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bls-modal__dialog[open] {
		animation: none;
	}

	.bls-modal__trigger {
		transition: none;
	}

	.bls-modal__trigger:hover {
		transform: none;
	}
}