:root {
	--dark: #34495e;
	--light: #fff;
	--success: #0abf30;
	--error: #f24d4c;
	--warning: #e9bd0c;
	--info: #3498db;
}

.notifications-toast {
	position: fixed;
	top: 30px;
	right: 20px;
}

.notifications-toast :where(.toast, .column) {
	display: flex;
	align-items: center;
}

.notifications-toast .toast {
	width: 400px;
	position: relative;
	overflow: hidden;
	list-style: none;
	border-radius: 4px;
	padding: 16px 17px;
	margin-bottom: 10px;
	background: var(--light);
	justify-content: space-between;
	animation: show_toast 0.3s ease forwards;
	opacity: 1 !important;
}

@keyframes show_toast {
	0% {
		transform: translateX(100%);
	}
	40% {
		transform: translateX(-5%);
	}
	80% {
		transform: translateX(0%);
	}
	100% {
		transform: translateX(-10%);
	}
}

.notifications-toast .toast.hide {
	animation: hide_toast 0.3s ease forwards;
}

@keyframes hide_toast {
	0% {
		transform: translateX(-10%);
	}
	40% {
		transform: translateX(0%);
	}
	80% {
		transform: translateX(-5%);
	}
	100% {
		transform: translateX(calc(100% + 20px));
	}
}

.notifications-toast .toast::before {
	position: absolute;
	content: '';
	height: 3px;
	width: 100%;
	bottom: 0;
	left: 0;
	animation: progress 5s linear forwards;
}

@keyframes progress {
	100% {
		width: 0%;
	}
}

.notifications-toast .toast.success::before, .btn#success {
	background: var(--success);
}

.notifications-toast .toast.error::before, .btn#error {
	background: var(--error);
}

.notifications-toast .toast.warning::before, .btn#warning {
	background: var(--warning);
}

.notifications-toast .toast.info::before, .btn#info {
	background: var(--info);
}

.notifications-toast .toast .column i {
	font-size: 1.75rem;
}

.notifications-toast .toast.success .column i {
	color: var(--success);
}

.notifications-toast .toast.error .column i {
	color: var(--error);
}

.notifications-toast .toast.warning .column i {
	color: var(--warning);
}

.notifications-toast .toast.info .column i {
	color: var(--info);
}

.notifications-toast .toast .column span {
	font-size: 1.07rem;
	margin-left: 12px;
}

.notifications-toast .toast i:last-child {
	color: #aeb0d7;
	cursor: pointer;
}

.notifications-toast .toast i:last-child:hover {
	color: var(--dark);
}

@media screen and (max-width: 530px) {
	.notifications-toast  {
		width: 80%;
	}

	.notifications-toast .toast {
		width: 100%;
		font-size: 1rem;
		margin-left: 20px;
	}
}

/* ============================================
   SWEETALERT2 TOAST CUSTOMIZATIONS
   Modern, minimal iOS/Android style toasts
   ============================================ */

/* Toast Popup Container */
.swal2-popup.toast-popup {
	padding: 12px 16px;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	min-width: 280px;
	max-width: 380px;
}

/* Toast Title - Single line, clean */
.toast-popup .toast-title {
	font-size: 14px;
	font-weight: 500;
	color: #2d3748;
	margin: 0;
	padding: 0;
	line-height: 1.4;
}

/* Icon sizing */
.toast-popup .swal2-icon {
	width: 28px;
	height: 28px;
	margin: 0 12px 0 0;
	border-width: 2px;
}

.toast-popup .swal2-icon .swal2-icon-content {
	font-size: 18px;
}

/* Success icon - green check */
.toast-popup .swal2-success {
	border-color: #0abf30;
}

.toast-popup .swal2-success .swal2-success-ring {
	border-color: rgba(10, 191, 48, 0.3);
}

.toast-popup .swal2-success [class^='swal2-success-line'] {
	background-color: #0abf30;
}

/* Error icon - red X */
.toast-popup .swal2-error {
	border-color: #f24d4c;
}

/* Warning icon - yellow triangle */
.toast-popup .swal2-warning {
	border-color: #e9bd0c;
	color: #e9bd0c;
}

/* Info icon - blue i */
.toast-popup .swal2-info {
	border-color: #3498db;
	color: #3498db;
}

/* Close button */
.toast-popup .swal2-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 24px;
	height: 24px;
	font-size: 18px;
	color: #a0aec0;
	transition: color 0.2s ease;
}

.toast-popup .swal2-close:hover {
	color: #4a5568;
}

/* Timer progress bar */
.toast-popup .toast-progress {
	background: linear-gradient(90deg,
		rgba(10, 191, 48, 0.3) 0%,
		rgba(10, 191, 48, 0.1) 100%);
	height: 3px;
}

.toast-popup.swal2-icon-error .toast-progress {
	background: linear-gradient(90deg,
		rgba(242, 77, 76, 0.3) 0%,
		rgba(242, 77, 76, 0.1) 100%);
}

.toast-popup.swal2-icon-warning .toast-progress {
	background: linear-gradient(90deg,
		rgba(233, 189, 12, 0.3) 0%,
		rgba(233, 189, 12, 0.1) 100%);
}

.toast-popup.swal2-icon-info .toast-progress {
	background: linear-gradient(90deg,
		rgba(52, 152, 219, 0.3) 0%,
		rgba(52, 152, 219, 0.1) 100%);
}

/* Toast animation - smooth slide from right */
.swal2-toast-shown .swal2-container {
	padding: 16px;
}

.toast-popup.swal2-show {
	animation: toastSlideIn 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.toast-popup.swal2-hide {
	animation: toastSlideOut 0.2s ease-in;
}

@keyframes toastSlideIn {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes toastSlideOut {
	from {
		transform: translateX(0);
		opacity: 1;
	}
	to {
		transform: translateX(100%);
		opacity: 0;
	}
}

/* Confirmation Dialog Styles (non-toast) */
.confirm-popup {
	border-radius: 16px;
	padding: 24px;
}

.confirm-popup .swal2-title {
	font-size: 18px;
	font-weight: 600;
	color: #2d3748;
}

.confirm-popup .swal2-html-container {
	font-size: 14px;
	color: #718096;
}

.confirm-btn, .cancel-btn {
	border-radius: 8px !important;
	padding: 10px 24px !important;
	font-weight: 500 !important;
}

/* Mobile responsive */
@media (max-width: 480px) {
	.swal2-popup.toast-popup {
		min-width: auto;
		max-width: calc(100vw - 32px);
		margin: 8px;
	}

	.toast-popup .toast-title {
		font-size: 13px;
	}
}