/* =========================================================
   AJAXWEB - WOOCOMMERCE TOAST
   ========================================================= */


/* ---------------------------------------------------------
   Toast Container
   --------------------------------------------------------- */

#ajaxweb-wc-toast-container {

	position: fixed;

	top: 22px;
	left: 50%;

	transform: translateX(-50%);

	z-index: 999999999;

	width: min(420px, calc(100vw - 30px));

	display: flex;

	flex-direction: column;

	gap: 12px;

	pointer-events: none;

}


/* ---------------------------------------------------------
   Hide WooCommerce Notices
   --------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {

	display: none !important;

}


/* ---------------------------------------------------------
   Toast
   --------------------------------------------------------- */

.ajaxweb-wc-toast {

	position: relative;

	width: 100%;

	min-height: 70px;

	padding: 14px 15px;

	background: #ffffff;

	color: #202124;

	border: 1px solid rgba(0, 0, 0, 0.07);

	border-radius: 16px;

	box-shadow:
		0 18px 50px rgba(0, 0, 0, 0.12),
		0 4px 14px rgba(0, 0, 0, 0.05);

	display: flex;

	align-items: center;

	gap: 12px;

	overflow: hidden;

	pointer-events: auto;

	opacity: 0;

	transform:
		translateY(-35px)
		scale(.96);

	transition:
		opacity .35s ease,
		transform .45s cubic-bezier(.22,1,.36,1);

}


/* ---------------------------------------------------------
   Show
   --------------------------------------------------------- */

.ajaxweb-wc-toast.ajaxweb-toast-show {

	opacity: 1;

	transform:
		translateY(0)
		scale(1);

}


/* ---------------------------------------------------------
   Hide
   --------------------------------------------------------- */

.ajaxweb-wc-toast.ajaxweb-toast-hide {

	opacity: 0;

	transform:
		translateY(-25px)
		scale(.97);

}


/* ---------------------------------------------------------
   Icon
   --------------------------------------------------------- */

.ajaxweb-wc-toast-icon {

	width: 42px;

	height: 42px;

	min-width: 42px;

	border-radius: 12px;

	display: flex;

	align-items: center;

	justify-content: center;

}


/* ---------------------------------------------------------
   SVG
   --------------------------------------------------------- */

.ajaxweb-wc-toast-icon svg {

	width: 25px;

	height: 25px;

	display: block;

}


/* ---------------------------------------------------------
   Success
   --------------------------------------------------------- */

.ajaxweb-wc-toast-success
.ajaxweb-wc-toast-icon {

	background: #ecfdf3;

	color: #16a34a;

}


/* ---------------------------------------------------------
   Info
   --------------------------------------------------------- */

.ajaxweb-wc-toast-info
.ajaxweb-wc-toast-icon {

	background: #eff6ff;

	color: #2563eb;

}


/* ---------------------------------------------------------
   Error
   --------------------------------------------------------- */

.ajaxweb-wc-toast-error
.ajaxweb-wc-toast-icon {

	background: #fef2f2;

	color: #dc2626;

}


/* ---------------------------------------------------------
   Content
   --------------------------------------------------------- */

.ajaxweb-wc-toast-content {

	flex: 1;

	min-width: 0;

	padding-left: 2px;

}


/* ---------------------------------------------------------
   Message
   --------------------------------------------------------- */

.ajaxweb-wc-toast-message {

	font-size: 14px;

	font-weight: 600;

	line-height: 1.8;

	color: #202124;

	word-break: break-word;

}


/* ---------------------------------------------------------
   Links
   --------------------------------------------------------- */

.ajaxweb-wc-toast-message a {

	color: inherit;

	font-weight: 700;

	text-decoration: underline;

	text-underline-offset: 3px;

}


/* ---------------------------------------------------------
   Close
   --------------------------------------------------------- */

.ajaxweb-wc-toast-close {

	width: 30px;

	height: 30px;

	min-width: 30px;

	padding: 0;

	margin: 0;

	border: 0;

	border-radius: 8px;

	background: transparent;

	color: #9ca3af;

	display: flex;

	align-items: center;

	justify-content: center;

	font-size: 21px;

	line-height: 1;

	cursor: pointer;

	transition:
		background .2s ease,
		color .2s ease;

}


.ajaxweb-wc-toast-close:hover {

	background: #f3f4f6;

	color: #111827;

}


/* ---------------------------------------------------------
   Progress Bar
   --------------------------------------------------------- */

.ajaxweb-wc-toast-progress {

	position: absolute;

	left: 0;

	bottom: 0;

	height: 3px;

	width: 100%;

	background: currentColor;

	opacity: .35;

	transform-origin: left center;

	animation:
		ajaxweb-toast-progress
		4s
		linear
		forwards;

}


@keyframes ajaxweb-toast-progress {

	from {

		transform: scaleX(1);

	}

	to {

		transform: scaleX(0);

	}

}


/* ---------------------------------------------------------
   Success SVG Animation
   --------------------------------------------------------- */

.ajaxweb-check-path {

	fill: none;

	stroke: currentColor;

	stroke-width: 2.5;

	stroke-linecap: round;

	stroke-linejoin: round;

	stroke-dasharray: 30;

	stroke-dashoffset: 30;

	animation:
		ajaxweb-check-draw
		.55s
		cubic-bezier(.65,0,.35,1)
		.15s
		forwards;

}


@keyframes ajaxweb-check-draw {

	to {

		stroke-dashoffset: 0;

	}

}


/* ---------------------------------------------------------
   Error SVG Animation
   --------------------------------------------------------- */

.ajaxweb-error-path {

	fill: none;

	stroke: currentColor;

	stroke-width: 2.5;

	stroke-linecap: round;

	stroke-dasharray: 20;

	stroke-dashoffset: 20;

	animation:
		ajaxweb-error-draw
		.4s
		ease
		.1s
		forwards;

}


@keyframes ajaxweb-error-draw {

	to {

		stroke-dashoffset: 0;

	}

}


/* ---------------------------------------------------------
   Info Animation
   --------------------------------------------------------- */

.ajaxweb-info-line {

	animation:
		ajaxweb-info-pop
		.35s
		cubic-bezier(.22,1,.36,1)
		.1s
		both;

}


@keyframes ajaxweb-info-pop {

	from {

		opacity: 0;

		transform: scale(.6);

	}

	to {

		opacity: 1;

		transform: scale(1);

	}

}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 600px) {

	#ajaxweb-wc-toast-container {

		top: 12px;

		width: calc(100vw - 24px);

	}


	.ajaxweb-wc-toast {

		min-height: 66px;

		padding: 12px;

		border-radius: 14px;

	}


	.ajaxweb-wc-toast-icon {

		width: 38px;

		height: 38px;

		min-width: 38px;

		border-radius: 10px;

	}


	.ajaxweb-wc-toast-icon svg {

		width: 22px;

		height: 22px;

	}


	.ajaxweb-wc-toast-message {

		font-size: 13px;

	}

}