/**


 * HNG Commerce - UI Components Styles


 * Modern components for enhanced UX


 */



/* Toast Notifications */

.hng-notifications-container {

	position: fixed;

	top: 32px;

	right: 20px;

	z-index: 999999;

	display: flex;

	flex-direction: column;

	gap: 10px;

}



.hng-toast {

	display: flex;

	align-items: center;

	gap: 12px;

	padding: 14px 18px;

	background: white;

	border-left: 4px solid;

	border-radius: 8px;

	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

	min-width: 300px;

	max-width: 500px;

	transform: translateX(400px);

	opacity: 0;

	transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

}



.hng-toast.hng-toast-show {

	transform: translateX(0);

	opacity: 1;

}



.hng-toast-success {

	border-left-color: #10b981;

}



.hng-toast-error {

	border-left-color: #ef4444;

}



.hng-toast-warning {

	border-left-color: #f59e0b;

}



.hng-toast-info {

	border-left-color: #6366f1;

}



.hng-toast .dashicons {

	font-size: 20px;

	width: 20px;

	height: 20px;

	flex-shrink: 0;

}



.hng-toast-success .dashicons {

	color: #10b981;

}



.hng-toast-error .dashicons {

	color: #ef4444;

}



.hng-toast-warning .dashicons {

	color: #f59e0b;

}



.hng-toast-info .dashicons {

	color: #6366f1;

}



.hng-toast-message {

	flex: 1;

	font-weight: 500;

	color: var(--hng-text-main);

}



.hng-toast-close {

	background: none;

	border: none;

	cursor: pointer;

	padding: 0;

	opacity: 0.5;

	transition: opacity 0.2s;

}



.hng-toast-close:hover {

	opacity: 1;

}



.hng-toast-close .dashicons {

	font-size: 16px;

	width: 16px;

	height: 16px;

	color: var(--hng-text-muted);

}



/* Loading States / Skeleton Screens */

.hng-skeleton {

	background: linear-gradient(90deg,

			#f0f0f0 25%,

			#e0e0e0 50%,

			#f0f0f0 75%);

	background-size: 200% 100%;

	animation: hng-skeleton-loading 1.5s infinite;

	border-radius: 4px;

}



@keyframes hng-skeleton-loading {

	0% {

		background-position: 200% 0;

	}



	100% {

		background-position: -200% 0;

	}

}



.hng-skeleton-card {

	height: 120px;

	margin-bottom: 20px;

}



.hng-skeleton-text {

	height: 16px;

	margin-bottom: 10px;

}



.hng-skeleton-text.short {

	width: 60%;

}



.hng-skeleton-circle {

	width: 40px;

	height: 40px;

	border-radius: 50%;

}



/* Loading Spinner */

.hng-loading {

	position: relative;

	pointer-events: none;

	opacity: 0.6;

}



.hng-loading::after {

	content: '';

	position: absolute;

	top: 50%;

	left: 50%;

	width: 30px;

	height: 30px;

	margin: -15px 0 0 -15px;

	border: 3px solid rgba(99, 102, 241, 0.3);

	border-top-color: #6366f1;

	border-radius: 50%;

	animation: hng-spin 0.8s linear infinite;

	z-index: 10;

}



@keyframes hng-spin {

	0% {

		transform: rotate(0deg);

	}



	100% {

		transform: rotate(360deg);

	}

}



/* Progress Bar */

.hng-progress {

	width: 100%;

	height: 8px;

	background-color: #e2e8f0;

	border-radius: 4px;

	overflow: hidden;

	margin: 10px 0;

}



.hng-progress-bar {

	height: 100%;

	background: linear-gradient(90deg, #6366f1 0%, #818cf8 100%);

	transition: width 0.3s ease;

	border-radius: 4px;

}



.hng-progress-bar.animated {

	background-size: 40px 40px;

	background-image: linear-gradient(45deg,

			rgba(255, 255, 255, 0.2) 25%,

			transparent 25%,

			transparent 50%,

			rgba(255, 255, 255, 0.2) 50%,

			rgba(255, 255, 255, 0.2) 75%,

			transparent 75%,

			transparent);

	animation: hng-progress-stripes 1s linear infinite;

}



@keyframes hng-progress-stripes {

	0% {

		background-position: 0 0;

	}



	100% {

		background-position: 40px 0;

	}

}



/* Tooltips */

.hng-tooltip {

	position: relative;

	display: inline-block;

}



.hng-tooltip::before {

	content: attr(data-tooltip);

	position: absolute;

	bottom: 125%;

	left: 50%;

	transform: translateX(-50%) translateY(-8px);

	padding: 6px 12px;

	background-color: #1e293b;

	color: white;

	font-size: 12px;

	line-height: 1.4;

	white-space: nowrap;

	border-radius: 6px;

	opacity: 0;

	pointer-events: none;

	transition: all 0.2s;

	z-index: 1000;

}



.hng-tooltip::after {

	content: '';

	position: absolute;

	bottom: 125%;

	left: 50%;

	transform: translateX(-50%) translateY(-2px);

	border: 6px solid transparent;

	border-top-color: #1e293b;

	opacity: 0;

	pointer-events: none;

	transition: all 0.2s;

}



.hng-tooltip:hover::before,

.hng-tooltip:hover::after {

	opacity: 1;

	transform: translateX(-50%) translateY(0);

}



/* Enhanced Modals */

.hng-modal.active {

	display: flex !important;

	align-items: center;

	justify-content: center;

	animation: hng-modal-fade-in 0.3s;

}



.hng-modal-content.active {

	animation: hng-modal-slide-up 0.3s;

}



@keyframes hng-modal-fade-in {

	from {

		opacity: 0;

	}



	to {

		opacity: 1;

	}

}



@keyframes hng-modal-slide-up {

	from {

		transform: translateY(50px);

		opacity: 0;

	}



	to {

		transform: translateY(0);

		opacity: 1;

	}

}



/* Drag & Drop Zone */

.hng-dropzone {

	border: 2px dashed var(--hng-border);

	border-radius: var(--hng-radius);

	padding: 40px;

	text-align: center;

	background-color: var(--hng-bg);

	transition: all 0.2s;

	cursor: pointer;

}



.hng-dropzone:hover {

	border-color: var(--hng-primary);

	background-color: rgba(99, 102, 241, 0.05);

}



.hng-dropzone.drag-over {

	border-color: var(--hng-primary);

	background-color: rgba(99, 102, 241, 0.1);

	transform: scale(1.02);

}



.hng-dropzone-icon {

	font-size: 48px;

	color: var(--hng-text-muted);

	margin-bottom: 16px;

}



.hng-dropzone-text {

	color: var(--hng-text-main);

	font-weight: 500;

	margin-bottom: 8px;

}



.hng-dropzone-hint {

	color: var(--hng-text-muted);

	font-size: 14px;

}



/* Status Badges Enhanced */

.hng-status-badge {

	display: inline-flex;

	align-items: center;

	gap: 6px;

	padding: 4px 12px;

	border-radius: 12px;

	font-size: 12px;

	font-weight: 500;

	line-height: 1.5;

}



.hng-status-badge::before {

	content: '';

	width: 6px;

	height: 6px;

	border-radius: 50%;

	background-color: currentColor;

}



.hng-status-badge.active {

	background-color: #dcfce7;

	color: #166534;

}



.hng-status-badge.inactive {

	background-color: #f3f4f6;

	color: #6b7280;

}



.hng-status-badge.pending {

	background-color: #fef3c7;

	color: #92400e;

}



/* Chart Container */

.hng-chart-container {

	position: relative;

	height: 300px;

	padding: 20px;

	background: var(--hng-card-bg);

	border-radius: var(--hng-radius);

}



.hng-chart-title {

	font-weight: 600;

	margin-bottom: 16px;

	color: var(--hng-text-main);

}



/* Filter Bar */

.hng-filter-bar {

	display: flex;

	gap: 12px;

	align-items: center;

	padding: 16px;

	background: var(--hng-card-bg);

	border-radius: var(--hng-radius);

	border: 1px solid var(--hng-border);

	margin-bottom: 20px;

}



.hng-filter-bar label {

	font-weight: 500;

	color: var(--hng-text-main);

	margin-right: 8px;

}



.hng-filter-bar select,

.hng-filter-bar input {

	flex: 1;

	max-width: 200px;

}



/* Empty State */

.hng-empty-state {

	text-align: center;

	padding: 60px 20px;

	color: var(--hng-text-muted);

}



.hng-empty-state-icon {

	font-size: 64px;

	color: var(--hng-text-muted);

	margin-bottom: 20px;

}



.hng-empty-state-title {

	font-size: 18px;

	font-weight: 600;

	color: var(--hng-text-main);

	margin-bottom: 8px;

}



.hng-empty-state-description {

	font-size: 14px;

	margin-bottom: 24px;

}



/* Animated Cards */

.hng-card-animated {

	transition: all 0.3s ease;

}



.hng-card-animated:hover {

	transform: translateY(-4px);

	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);

}



/* Fade In Animation */

@keyframes fadeIn {

	from {

		opacity: 0;

		transform: translateY(10px);

	}



	to {

		opacity: 1;

		transform: translateY(0);

	}

}



.fade-in {

	animation: fadeIn 0.3s ease-out;

}



/* Pulse Animation for Loading */

@keyframes pulse {



	0%,

	100% {

		opacity: 1;

	}



	50% {

		opacity: 0.5;

	}

}



.hng-pulse {

	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

}



/* Switch/Toggle Button */

.hng-switch {

	position: relative;

	display: inline-block;

	width: 48px;

	height: 24px;

}



.hng-switch input {

	opacity: 0;

	width: 0;

	height: 0;

}



.hng-slider {

	position: absolute;

	cursor: pointer;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	background-color: #cbd5e1;

	transition: 0.3s;

	border-radius: 24px;

}



.hng-slider:before {

	position: absolute;

	content: "";

	height: 18px;

	width: 18px;

	left: 3px;

	bottom: 3px;

	background-color: white;

	transition: 0.3s;

	border-radius: 50%;

}



input:checked+.hng-slider {

	background-color: #6366f1;

}



input:checked+.hng-slider:before {

	transform: translateX(24px);

}



/* Quick Actions Menu */

.hng-quick-actions {

	display: flex;

	gap: 12px;

	flex-wrap: wrap;

}



.hng-quick-action {

	display: inline-flex;

	align-items: center;

	gap: 8px;

	padding: 10px 16px;

	background: var(--hng-card-bg);

	border: 1px solid var(--hng-border);

	border-radius: var(--hng-radius);

	color: var(--hng-text-main);

	text-decoration: none;

	transition: all 0.2s;

}



.hng-quick-action:hover {

	border-color: var(--hng-primary);

	color: var(--hng-primary);

	transform: translateY(-2px);

}



.hng-quick-action .dashicons {

	color: var(--hng-primary);

}



/* Responsive Grid */

.hng-grid {

	display: grid;

	gap: 20px;

}



.hng-grid-2 {

	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

}



.hng-grid-3 {

	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

}



.hng-grid-4 {

	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

}



/* Dark Mode Specific */

body.hng-theme-dark .hng-toast {

	background-color: var(--hng-card-bg);

}



body.hng-theme-dark .hng-skeleton {

	background: linear-gradient(90deg,

			#1e293b 25%,

			#334155 50%,

			#1e293b 75%);

}



body.hng-theme-dark .hng-dropzone {

	background-color: #0f172a;

}