/**
 * Deals Carousel CSS
 * Horizontal scrolling carousel for Today's Deals section
 */

/* ==================== DEALS CAROUSEL WRAPPER ==================== */

.deals-carousel-wrapper 
{
	position: relative;
	padding: 0 50px; /* Space for arrows */
	margin: 0 auto;
	max-width: 100%;
}


/* ==================== SCROLLABLE CONTAINER ==================== */

.deals-carousel-container 
{
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	cursor: grab;
	-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
	scrollbar-width: thin; /* Firefox */
	scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.deals-carousel-container:active 
{
	cursor: grabbing;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.deals-carousel-container::-webkit-scrollbar 
{
	height: 6px;
}

.deals-carousel-container::-webkit-scrollbar-track 
{
	background: transparent;
}

.deals-carousel-container::-webkit-scrollbar-thumb 
{
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 3px;
}

.deals-carousel-container::-webkit-scrollbar-thumb:hover 
{
	background-color: rgba(0, 0, 0, 0.3);
}


/* ==================== CAROUSEL TRACK ==================== */

.deals-carousel-track 
{
	display: flex;
	gap: 20px;
	padding: 10px 0;
}


/* ==================== DEAL CARDS ==================== */

.deal-card 
{
	flex: 0 0 auto; /* Don't shrink or grow */
	width: 280px; /* Fixed width for consistency */
	scroll-snap-align: start; /* Snap to position when scrolling */
}

/* Responsive card widths */
@media (max-width: 768px) 
{
	.deal-card 
	{
		width: 220px; /* Smaller on tablets */
	}
}

@media (max-width: 480px) 
{
	.deal-card 
	{
		width: 260px; /* Almost full width on mobile */
	}
	
	.deals-carousel-wrapper
	{
		padding: 0 40px; /* Less padding on mobile */
	}
}


/* ==================== SCROLL ARROWS ==================== */

.deals-scroll-arrow 
{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: white;
	border: 1px solid #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 10;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.deals-scroll-arrow:hover 
{
	background: #f8f9fa;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	transform: translateY(-50%) scale(1.1);
}

.deals-scroll-arrow:active 
{
	transform: translateY(-50%) scale(0.95);
}

.deals-scroll-left 
{
	left: 0;
}

.deals-scroll-right 
{
	right: 0;
}

.deals-scroll-arrow i 
{
	font-size: 18px;
	color: #333;
}

/* Hide arrows on very small screens */
@media (max-width: 480px) 
{
	.deals-scroll-arrow 
	{
		width: 35px;
		height: 35px;
	}
	
	.deals-scroll-arrow i 
	{
		font-size: 14px;
	}
}


/* ==================== DEAL CARD STYLING ==================== */

.deal-card .product-card 
{
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.deal-card .product-card:hover 
{
	transform: translateY(-5px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Ensure product images maintain aspect ratio in carousel */
.deal-card .product-image 
{
	width: 100%;
	height: 200px;
	object-fit: cover;
}


/* ==================== VISUAL HINTS ==================== */

/* Subtle fade effect on edges to hint at more content */
.deals-carousel-wrapper::before,
.deals-carousel-wrapper::after 
{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50px;
	pointer-events: none;
	z-index: 5;
}

.deals-carousel-wrapper::before 
{
	left: 0;
	background: linear-gradient(to right, rgba(255, 255, 255, 0.8), transparent);
}

.deals-carousel-wrapper::after 
{
	right: 0;
	background: linear-gradient(to left, rgba(255, 255, 255, 0.8), transparent);
}


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

.deals-carousel-container .col-12 
{
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
}


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

/* Focus styles for keyboard navigation */
.deals-scroll-arrow:focus 
{
	outline: 2px solid #007bff;
	outline-offset: 2px;
}

.deal-card:focus-within 
{
	outline: 2px solid #007bff;
	outline-offset: 4px;
	border-radius: 8px;
}


/* ==================== ANIMATION ==================== */

@keyframes fadeIn 
{
	from 
	{
		opacity: 0;
		transform: translateY(20px);
	}
	to 
	{
		opacity: 1;
		transform: translateY(0);
	}
}

.deal-card 
{
	animation: fadeIn 0.5s ease-out;
}

/* Stagger animation for cards */
.deal-card:nth-child(1) { animation-delay: 0s; }
.deal-card:nth-child(2) { animation-delay: 0.1s; }
.deal-card:nth-child(3) { animation-delay: 0.2s; }
.deal-card:nth-child(4) { animation-delay: 0.3s; }
.deal-card:nth-child(5) { animation-delay: 0.4s; }


/* ==================== RESPONSIVE ADJUSTMENTS ==================== */

/* Desktop: Show 4 cards at a time */
@media (min-width: 1200px) 
{
	.deals-carousel-wrapper 
	{
		max-width: 1200px;
	}
}

/* Tablet: Show 3 cards at a time */
@media (min-width: 768px) and (max-width: 1199px) 
{
	.deals-carousel-wrapper 
	{
		max-width: 900px;
	}
}

/* Mobile: Show 1-2 cards at a time */
@media (max-width: 767px) 
{
	.deals-carousel-track 
	{
		gap: 15px;
	}
}


/* ==================== TOUCH DEVICE ENHANCEMENTS ==================== */

/* Better touch targets */
@media (hover: none) and (pointer: coarse) 
{
	.deals-scroll-arrow 
	{
		width: 45px;
		height: 45px;
	}
}


/* ==================== PRINT STYLES ==================== */

@media print 
{
	.deals-scroll-arrow 
	{
		display: none;
	}
	
	.deals-carousel-container 
	{
		overflow: visible;
	}
	
	.deals-carousel-track 
	{
		flex-wrap: wrap;
	}
	
	.deal-card 
	{
		width: 45%;
		margin-bottom: 20px;
	}
}


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

@media (prefers-color-scheme: dark) 
{
	.deals-scroll-arrow 
	{
		background: #2d2d2d;
		border-color: #444;
	}
	
	.deals-scroll-arrow:hover 
	{
		background: #3d3d3d;
	}
	
	.deals-scroll-arrow i 
	{
		color: #fff;
	}
	
	.deals-carousel-wrapper::before 
	{
		background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent);
	}
	
	.deals-carousel-wrapper::after 
	{
		background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent);
	}
}