/* QR Scanner Styles */
.scan-frame {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80%;
	height: 80%;
	border: 2px solid #696cff;
	border-radius: 8px;
	pointer-events: none;
}

.scan-frame::before,
.scan-frame::after {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	border: 3px solid #696cff;
}

.scan-frame::before {
	top: -2px;
	left: -2px;
	border-right: none;
	border-bottom: none;
}

.scan-frame::after {
	bottom: -2px;
	right: -2px;
	border-left: none;
	border-top: none;
}

#qr-scanner-section.scan-success {
	animation: scanPulse 0.5s ease-in-out;
}

@keyframes scanPulse {

	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.05);
	}
}

/* Responsive adjustments */
@media (max-width: 991px) {
	#video {
		max-width: 100% !important;
	}
}

/* Table improvements */
#orderDetailsTable td {
	padding: 0.875rem;
	vertical-align: top;
}

#orderDetailsTable td strong {
	color: #566a7f;
	font-size: 0.875rem;
	display: block;
	margin-bottom: 0.25rem;
}

#orderDetailsTable td .text-muted {
	color: #697a8d !important;
	font-size: 0.9375rem;
}

/* Loading animation */
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* Modal improvements */
.modal-header {
	background-color: #f8f9fa;
	border-bottom: 1px solid #e7e7e7;
}

/* Badge improvements */
.badge {
	font-weight: 500;
	padding: 0.5rem 0.875rem;
	font-size: 0.875rem;
}

/* Card hover effect */
.card {
	transition: box-shadow 0.3s ease;
}

.card:hover {
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

/* Button loading state */
#submitBtnText:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

/* Empty state icon animation */
#empty-state i {
	animation: float 3s ease-in-out infinite;
}

@keyframes float {

	0%,
	100% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-10px);
	}
}

/* Error state icon animation */
#error-state i {
	animation: shake 0.5s ease-in-out;
}

@keyframes shake {

	0%,
	100% {
		transform: translateX(0);
	}

	25% {
		transform: translateX(-10px);
	}

	75% {
		transform: translateX(10px);
	}
}

/* Input focus styles */
#orderSearchInput:focus {
	border-color: #696cff;
	box-shadow: 0 0 0 0.2rem rgba(105, 108, 255, 0.25);
}

/* Mobile optimizations */
@media (max-width: 575px) {
	.card-header {
		flex-direction: column;
		align-items: flex-start !important;
	}

	.card-header>div {
		width: 100%;
	}

	#orderStatusChg {
		margin-top: 0.5rem;
		width: 100%;
	}
}