/**
 * File: trooworths-products-comparison.css
 * Purpose: Enhanced styling for Product Comparison Feature
 * Developer: John Adeyemi (https://www.johnadeyemi.com)
 * 
 * NOTE: This file is OPTIONAL. The comparison feature works without it
 * using Bootstrap's default styles. Include this for enhanced appearance.
 */


/* ============================================
   COMPARISON BADGE ANIMATION
   ============================================ */

#comparisonBadge 
{
	animation: badge-pulse 2s ease-in-out infinite;
	transition: all 0.3s ease;
}

@keyframes badge-pulse 
{
	0%, 100% 
	{ 
		transform: scale(1); 
		box-shadow: 0 0 0 0 rgba(13, 202, 240, 0.7);
	}
	50% 
	{ 
		transform: scale(1.05); 
		box-shadow: 0 0 0 4px rgba(13, 202, 240, 0.3);
	}
}

#comparisonBadge:hover 
{
	transform: scale(1.1);
}


/* ============================================
   COMPARISON BUTTON STATES
   ============================================ */

.btn-compare 
{
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
}

.btn-compare:hover 
{
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-compare-active 
{
	background-color: #28a745 !important;
	border-color: #28a745 !important;
	color: white !important;
	animation: button-success-pulse 0.6s ease;
}

@keyframes button-success-pulse 
{
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}

/* Ripple effect on click */
.btn-compare::after 
{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	transform: translate(-50%, -50%);
	transition: width 0.6s, height 0.6s;
}

.btn-compare:active::after 
{
	width: 200px;
	height: 200px;
}


/* ============================================
   COMPARISON MODAL ENHANCEMENTS
   ============================================ */

#comparisonModal .modal-dialog 
{
	animation: modal-slide-down 0.3s ease;
}

@keyframes modal-slide-down 
{
	from 
	{
		opacity: 0;
		transform: translateY(-50px);
	}
	to 
	{
		opacity: 1;
		transform: translateY(0);
	}
}

#comparisonModal .modal-content 
{
	border: none;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

#comparisonModal .modal-header 
{
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
	padding: 1.25rem 1.5rem;
}

#comparisonModal .modal-body 
{
	padding: 1.5rem;
}

#comparisonModal .modal-footer 
{
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	padding: 1rem 1.5rem;
	background-color: #f8f9fa;
}


/* ============================================
   COMPARISON TABLE STYLING
   ============================================ */

#comparisonModal .table 
{
	margin-bottom: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#comparisonModal .table thead th 
{
	position: sticky;
	top: 0;
	z-index: 10;
	border-bottom: 2px solid #dee2e6;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	background: linear-gradient(to bottom, #ffd814 0%, #f7ca00 100%);
}

#comparisonModal .table tbody tr 
{
	transition: background-color 0.2s ease;
}

#comparisonModal .table tbody tr:hover 
{
	background-color: #f8f9fa;
}

#comparisonModal .table td,
#comparisonModal .table th 
{
	vertical-align: middle;
	border-color: #dee2e6;
	padding: 1rem;
}


/* ============================================
   PRODUCT HEADER IN COMPARISON
   ============================================ */

.product-header 
{
	position: relative;
	background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
}

.product-header img 
{
	transition: transform 0.3s ease;
	border-radius: 8px;
	border: 1px solid #dee2e6;
}

.product-header:hover img 
{
	transform: scale(1.05);
}

.remove-from-compare-btn 
{
	position: absolute;
	top: 8px;
	right: 8px;
	background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
	color: white;
	border: 2px solid white;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 18px;
	font-weight: bold;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
	z-index: 5;
}

.remove-from-compare-btn:hover 
{
	background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
	transform: rotate(90deg) scale(1.1);
	box-shadow: 0 4px 12px rgba(220, 53, 69, 0.5);
}

.remove-from-compare-btn:active 
{
	transform: rotate(90deg) scale(0.95);
}


/* ============================================
   COMPARISON INFO ALERT
   ============================================ */

.comparison-info 
{
	background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
	border-left: 4px solid #2196F3;
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	font-size: 0.95rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	animation: info-fade-in 0.5s ease;
}

@keyframes info-fade-in 
{
	from 
	{
		opacity: 0;
		transform: translateY(-10px);
	}
	to 
	{
		opacity: 1;
		transform: translateY(0);
	}
}

.comparison-info i 
{
	color: #2196F3;
	font-size: 1.2rem;
}


/* ============================================
   PRICE DISPLAY IN COMPARISON
   ============================================ */

#comparisonModal .text-danger 
{
	font-size: 1.5rem;
	font-weight: 700;
	background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

#comparisonModal .text-decoration-line-through 
{
	position: relative;
	opacity: 0.6;
}

#comparisonModal .badge.bg-danger 
{
	background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
	padding: 0.35rem 0.65rem;
	font-size: 0.8rem;
	font-weight: 600;
	box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
	animation: badge-bounce 1s ease infinite;
}

@keyframes badge-bounce 
{
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-2px); }
}


/* ============================================
   ACTION BUTTONS IN COMPARISON
   ============================================ */

#comparisonModal .btn-warning,
#comparisonModal .btn-primary 
{
	transition: all 0.3s ease;
	font-weight: 600;
	border-radius: 6px;
}

#comparisonModal .btn-warning:hover 
{
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
}

#comparisonModal .btn-primary:hover 
{
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(13, 110, 253, 0.4);
}

#comparisonModal .btn-warning:active,
#comparisonModal .btn-primary:active 
{
	transform: translateY(0);
}


/* ============================================
   STOCK BADGES
   ============================================ */

.badge.bg-success,
.badge.bg-warning,
.badge.bg-danger 
{
	padding: 0.5rem 0.75rem;
	font-size: 0.85rem;
	font-weight: 600;
	border-radius: 6px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.badge.bg-success 
{
	background: linear-gradient(135deg, #28a745 0%, #218838 100%) !important;
}

.badge.bg-warning 
{
	background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important;
}

.badge.bg-danger 
{
	background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
}


/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) 
{
	#comparisonModal .modal-dialog 
	{
		margin: 0.5rem;
		max-width: calc(100% - 1rem);
	}
	
	#comparisonModal .modal-body 
	{
		padding: 1rem;
		font-size: 0.875rem;
	}
	
	.product-header img 
	{
		max-height: 80px !important;
	}
	
	#comparisonModal .text-danger 
	{
		font-size: 1.25rem;
	}
	
	#comparisonModal .table td,
	#comparisonModal .table th 
	{
		padding: 0.75rem 0.5rem;
		font-size: 0.85rem;
	}
	
	.remove-from-compare-btn 
	{
		width: 28px;
		height: 28px;
		font-size: 16px;
		top: 5px;
		right: 5px;
	}
	
	.comparison-info 
	{
		font-size: 0.85rem;
		padding: 0.75rem 1rem;
	}
}

@media (max-width: 576px) 
{
	#comparisonModal .product-header 
	{
		min-width: 180px;
		max-width: 200px;
	}
	
	#comparisonModal .table 
	{
		font-size: 0.8rem;
	}
	
	#comparisonModal .btn-warning,
	#comparisonModal .btn-primary 
	{
		font-size: 0.8rem;
		padding: 0.375rem 0.5rem;
	}
}


/* ============================================
   LOADING STATES
   ============================================ */

.comparison-loading 
{
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 3px solid rgba(13, 110, 253, 0.3);
	border-top-color: #0d6efd;
	border-radius: 50%;
	animation: spinner 0.8s linear infinite;
}

@keyframes spinner 
{
	to { transform: rotate(360deg); }
}


/* ============================================
   EMPTY STATE
   ============================================ */

.empty-comparison 
{
	text-align: center;
	padding: 3rem 1rem;
	color: #6c757d;
}

.empty-comparison i 
{
	font-size: 4rem;
	margin-bottom: 1.5rem;
	color: #dee2e6;
	animation: empty-float 3s ease-in-out infinite;
}

@keyframes empty-float 
{
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

.empty-comparison h4 
{
	font-weight: 600;
	color: #495057;
	margin-bottom: 0.5rem;
}

.empty-comparison p 
{
	font-size: 0.95rem;
	color: #6c757d;
}


/* ============================================
   SCROLL BEHAVIOR
   ============================================ */

#comparisonModal .modal-body 
{
	scroll-behavior: smooth;
}

#comparisonModal .modal-body::-webkit-scrollbar 
{
	width: 8px;
	height: 8px;
}

#comparisonModal .modal-body::-webkit-scrollbar-track 
{
	background: #f1f1f1;
	border-radius: 4px;
}

#comparisonModal .modal-body::-webkit-scrollbar-thumb 
{
	background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
	border-radius: 4px;
}

#comparisonModal .modal-body::-webkit-scrollbar-thumb:hover 
{
	background: linear-gradient(135deg, #0a58ca 0%, #084298 100%);
}


/* ============================================
   PRINT STYLES (Optional)
   ============================================ */

@media print 
{
	#comparisonModal .modal-header,
	#comparisonModal .modal-footer,
	.remove-from-compare-btn 
	{
		display: none !important;
	}
	
	#comparisonModal .modal-dialog 
	{
		max-width: 100%;
		margin: 0;
	}
	
	#comparisonModal .table 
	{
		page-break-inside: avoid;
	}
	
	#comparisonModal .product-header img 
	{
		max-height: 100px !important;
	}
}


/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

.btn-compare:focus,
.remove-from-compare-btn:focus 
{
	outline: 3px solid #0d6efd;
	outline-offset: 2px;
}

#comparisonModal .modal-content:focus 
{
	outline: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) 
{
	#comparisonModal .table 
	{
		border: 2px solid #000;
	}
	
	#comparisonModal .table td,
	#comparisonModal .table th 
	{
		border: 1px solid #000;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) 
{
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}


/* ============================================
   DARK MODE SUPPORT (Optional)
   ============================================ */

@media (prefers-color-scheme: dark) 
{
	#comparisonModal .modal-content 
	{
		background-color: #212529;
		color: #f8f9fa;
	}
	
	#comparisonModal .table 
	{
		color: #f8f9fa;
		border-color: #495057;
	}
	
	#comparisonModal .table td,
	#comparisonModal .table th 
	{
		border-color: #495057;
	}
	
	#comparisonModal .table tbody tr:hover 
	{
		background-color: #343a40;
	}
	
	.product-header 
	{
		background: linear-gradient(to bottom, #343a40 0%, #212529 100%);
	}
	
	.product-header img 
	{
		border-color: #495057;
	}
	
	.comparison-info 
	{
		background: linear-gradient(135deg, #1e3a5f 0%, #2c4f7c 100%);
		color: #e3f2fd;
	}
	
	#comparisonModal .modal-footer 
	{
		background-color: #343a40;
		border-top-color: #495057;
	}
}