confirm-flow {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: none;
}

confirm-flow.confirm-flow--open {
	display: block;
}

.confirm-flow__overlay {
	padding: var(--spacing-lg, 1.5rem);
	opacity: 0;
	transition: opacity 0.22s ease;
	align-items: center;
	justify-content: center;
}

.confirm-flow__overlay--visible {
	opacity: 1;
}

.confirm-flow__modal {
	width: min(520px, 100%);
	opacity: 0;
	transform: translateY(18px);
	transition: transform 0.24s ease, opacity 0.24s ease;
}

.confirm-flow__modal--visible {
	opacity: 1;
	transform: translateY(0);
}

.confirm-flow__card {
	border-radius: var(--radius-lg, 1rem);
	box-shadow: var(--shadow-lg, 0 20px 32px rgba(15, 23, 42, 0.2));
	border: 1px solid var(--color-border, rgba(148, 163, 184, 0.2));
	background: var(--color-surface, #ffffff);
}

.confirm-flow__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing-lg, 1.5rem) var(--spacing-lg, 1.5rem) var(--spacing-md, 1rem);
	gap: var(--spacing-md, 1rem);
}

.confirm-flow__title {
	margin: 0;
	font-size: var(--font-size-modal-title, 1.5rem);
	color: var(--color-text, #0f172a);
}

.confirm-flow__close {
	border: none;
	background: transparent;
	color: var(--color-text-muted, #64748b);
	font-size: 1.5rem;
	line-height: 1;
	padding: var(--spacing-xs, 0.5rem);
	border-radius: var(--radius-md, 0.75rem);
	cursor: pointer;
	transition: color 0.2s ease, background 0.2s ease;
}

.confirm-flow__close:hover,
.confirm-flow__close:focus {
	color: var(--color-text, #0f172a);
	background: var(--color-gray-100, #f1f5f9);
}

.confirm-flow__body {
	padding: 0 var(--spacing-lg, 1.5rem) var(--spacing-lg, 1.5rem);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md, 1rem);
	font-size: var(--font-size-modal-body, 1rem);
	color: var(--color-text, #0f172a);
}

.confirm-flow__body p {
	margin: 0;
	line-height: 1.5;
}

.confirm-flow__message {
	color: var(--color-text, #0f172a);
}

.confirm-flow__alert {
	display: flex;
	gap: var(--spacing-md, 1rem);
	padding: var(--spacing-md, 1rem);
	border-radius: var(--radius-md, 0.75rem);
	border: 1px solid rgba(245, 158, 11, 0.3);
	background: rgba(245, 158, 11, 0.12);
}

.confirm-flow__alert-icon {
	font-size: 1.75rem;
	line-height: 1;
}

.confirm-flow__alert-content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm, 0.75rem);
}

.confirm-flow__alert-content p {
	margin: 0;
}

.confirm-flow__list {
	margin: 0;
	padding-left: 1.35rem;
	color: var(--color-text-muted, #64748b);
	font-size: var(--font-size-body-sm, 0.875rem);
	line-height: 1.5;
}

.confirm-flow__footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--spacing-md, 1rem);
	padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem) var(--spacing-lg, 1.5rem);
	background: transparent;
}

.confirm-flow__btn {
	min-width: 140px;
}

@media (max-width: 540px) {
	.confirm-flow__modal {
		width: 100%;
	}

	.confirm-flow__header,
	.confirm-flow__body,
	.confirm-flow__footer {
		padding-left: var(--spacing-md, 1rem);
		padding-right: var(--spacing-md, 1rem);
	}

	.confirm-flow__alert {
		flex-direction: column;
		align-items: flex-start;
	}
}