#alert-modal {
	position        : fixed;
	inset           : 0;
	z-index         : 9999;
	display         : flex;
	justify-content : center;
	align-items     : center;
	padding         : 1.5rem;
	box-sizing      : border-box;
	width           : 100%;
	height          : 100%;
	opacity         : 0;
	visibility      : hidden;
	transition      : opacity 0.25s ease;
	text-align      : center;
}

#alert-modal * {
	visibility : hidden;
}

#alert-modal.showModal {
	opacity    : 1;
	visibility : visible;
}

#alert-modal.showModal * {
	visibility : visible;
}

#alert-modal .subscribe-modal--bg,
#alert-modal .alert-modal--bg {
	position   : absolute;
	inset      : 0;
	width      : 100%;
	height     : 100%;
	background : #7a7a7a;
	opacity    : 0;
	transition : opacity 0.25s ease;
	z-index    : 1;
}

#alert-modal.showModal .subscribe-modal--bg,
#alert-modal.showModal .alert-modal--bg {
	opacity : 0.5;
}

#alert-modal .subscribe-modal--container,
#alert-modal .alert-modal--container {
	position       : relative;
	z-index        : 2;
	background     : var(--color-white-default, var(--color-white-default));
	border         : 1px solid rgba(0, 0, 0, 0.08);
	border-radius  : 12px;
	box-shadow     : 0 12px 32px rgba(0, 0, 0, 0.12);
	padding        : 2.5rem 2.75rem;
	width          : min(520px, 100%);
	max-width      : 520px;
	max-height     : calc(100vh - 3rem);
	overflow       : auto;
	transform      : translateY(12px) scale(0.95);
	opacity        : 0;
	transition     : transform 0.25s ease, opacity 0.25s ease;
	display        : flex;
	flex-direction : column;
	align-items    : stretch;
	gap            : 1.5rem;
}

#alert-modal.showModal .subscribe-modal--container,
#alert-modal.showModal .alert-modal--container {
	transform : translateY(0) scale(1);
	opacity   : 1;
}

#alert-modal .close_btn {
	position        : absolute;
	top             : 1.25rem;
	right           : 1.25rem;
	background      : var(--color-white-default);
	padding         : 0.35rem;
	border-radius   : 999px;
	border          : 1px solid rgba(0, 0, 0, 0.2);
	cursor          : pointer;
	width           : 36px;
	height          : 36px;
	display         : flex;
	justify-content : center;
	align-items     : center;
	box-shadow      : 0 4px 12px rgba(0, 0, 0, 0.12);
}

#alert-modal h1,
#alert-modal h2 {
	margin      : 0;
	color       : var(--color-primary);
	font-size   : 1.6rem;
	line-height : 1.3;
}

#alert-modal p {
	margin      : 0;
	color       : var(--color-dark, #333333);
	font-size   : 1rem;
	line-height : 1.6;
}

#alert-modal strong {
	font-weight : 600;
}

#alert-modal img {
	max-width     : 180px;
	height        : auto;
	border-radius : 8px;
}

#alert-modal .alert-modal--content {
	width          : 100%;
	text-align     : center;
	display        : flex;
	flex-direction : column;
	gap            : 1rem;
}

#alert-modal .alert-modal__product-name {
	font-size   : 1.15rem;
	font-weight : 600;
	color       : var(--color-dark, #333333);
}

#alert-modal .alert-modal__quantity strong {
	color       : var(--color-primary, #0a6148);
	font-weight : 700;
}

#alert-modal .alert-modal__subscription {
	font-size : 0.95rem;
	color     : var(--color-dark, #333333);
}

#alert-modal .alert-modal--actions {
	display         : flex;
	flex-wrap       : wrap;
	justify-content : center;
	gap             : 1rem;
	width           : 100%;
}

#alert-modal .cart-add-warning {
	font-size   : 1rem;
	line-height : 1.6;
	margin      : 0;
}

#alert-modal .btn,
#alert-modal .button,
#alert-modal .btn_add,
#alert-modal .btn_cancel,
#alert-modal .js-obflink.btn_add,
#alert-modal .js-obflink.btn_cancel {
	display         : inline-flex;
	align-items     : center;
	justify-content : center;
	padding         : 0.9rem 2.5rem;
	border-radius   : 999px;
	font-size       : 1rem;
	font-weight     : 600;
	text-transform  : uppercase;
	border          : none;
	cursor          : pointer;
	transition      : background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
	min-width       : 180px;
}

#alert-modal .btn.button.btn-senea,
#alert-modal .btn_cancel,
#alert-modal .js-obflink.btn_cancel {
	margin          : 0;
	height          : 50px;
	display         : flex;
	gap             : 15px;
	align-items     : center;
	justify-content : center;
	text-align      : center;
	font-size       : 16px;
	font-style      : normal;
	font-weight     : 700;
	line-height     : normal;
	letter-spacing  : 0.48px;
	border-radius   : 4px;
	border          : none;
	box-shadow      : none;
	text-transform  : initial;
}

#alert-modal .btn.button.btn-senea:hover,
#alert-modal .btn_cancel:hover,
#alert-modal .js-obflink.btn_cancel:hover {
	background : var(--color-white-default);
	color      : var(--color-primary);
}

#alert-modal #btn-confirm {
	background : var(--color-primary);
	color      : var(--color-white-default);
}

#alert-modal #btn-cancel {
	background : var(--color-white-default);
	color      : var(--color-primary);
	box-shadow : 0 0 0 2px var(--color-primary) inset;
}

#alert-modal #btn-cancel:hover {
	background : var(--color-primary);
	color      : var(--color-white-default);
}

#alert-modal .reorder-pop-up-container {
	width       : min(640px, 100%);
	max-width   : 640px;
	padding     : 2rem;
	align-items : stretch;
}

@media (max-width : 767px) {
	#alert-modal {
		padding : 1rem;
	}

	#alert-modal .subscribe-modal--container,
	#alert-modal .alert-modal--container {
		padding   : 1.75rem 1.5rem;
		width     : 100%;
		max-width : 100%;
	}

	#alert-modal .btn,
	#alert-modal .button,
	#alert-modal .btn_add,
	#alert-modal .btn_cancel,
	#alert-modal .js-obflink.btn_add,
	#alert-modal .js-obflink.btn_cancel {
		width     : 100%;
		min-width : 0;
	}

	#alert-modal .close_btn {
		top   : 0.75rem;
		right : 0.75rem;
	}
}