/**
 * Pet Product Page Enhancements
 * Advanced styling for WooCommerce single product pages
 * Version: 1.3.0
 */

/* ========================================
   Deposit Button Enhancements
   ======================================== */

/* Red gradient deposit button pulse */
@keyframes deposit-pulse {
	0%, 100% {
		box-shadow: 0 10px 40px rgba(220, 53, 69, 0.4);
		transform: scale(1);
	}
	50% {
		box-shadow: 0 15px 60px rgba(220, 53, 69, 0.6);
		transform: scale(1.02);
	}
}

.btn[href*="puppy-checkout"],
.btn[href*="deposit"] {
	animation: deposit-pulse 2s ease-in-out infinite;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn[href*="puppy-checkout"]:hover,
.btn[href*="deposit"]:hover {
	transform: translateY(-3px) scale(1.03) !important;
	box-shadow: 0 20px 50px rgba(220, 53, 69, 0.5) !important;
	animation: none;
}

.btn[href*="puppy-checkout"]:active,
.btn[href*="deposit"]:active {
	transform: translateY(-1px) scale(0.98) !important;
}

/* Separator OR Badge */
.badge.bg-light {
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Phone Contact Card Enhancements */
.card.border-dark:hover {
	transform: translateY(-3px);
	box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important;
}

/* ========================================
   Gallery Enhancements
   ======================================== */

.pet-gallery-container {
	position: relative;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pet-gallery-container:hover {
	transform: translateY(-2px);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2) !important;
}

/* Image counter update animation */
@keyframes counter-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.1); }
}

#currentImageIndex {
	display: inline-block;
	transition: all 0.3s ease;
}

#currentImageIndex.updated {
	animation: counter-pulse 0.4s ease;
}

/* ========================================
   Thumbnail Gallery
   ======================================== */

.pet-gallery-thumbnails .thumbnail-item {
	cursor: pointer;
	border: 2px solid transparent;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}

.pet-gallery-thumbnails .thumbnail-item::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.3) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.pet-gallery-thumbnails .thumbnail-item:hover::after {
	opacity: 1;
}

.pet-gallery-thumbnails .thumbnail-item:hover img {
	transform: scale(1.15);
}

.pet-gallery-thumbnails .thumbnail-item:hover {
	border-color: var(--bs-primary);
	transform: translateY(-3px);
}

.pet-gallery-thumbnails .thumbnail-item.active {
	border-color: var(--bs-primary);
	box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.25);
}

.pet-gallery-thumbnails .thumbnail-item.active::after {
	opacity: 0 !important;
}

.pet-gallery-thumbnails .thumbnail-item:hover .thumbnail-overlay {
	background: rgba(0,0,0,0.1) !important;
}

.thumbnail-indicator {
	height: 3px !important;
	transform-origin: left;
}

/* ========================================
   CTA Buttons & Animations
   ======================================== */

/* Primary CTA Glow Effect */
.cta-primary-glow {
	position: relative;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-primary-glow::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	transform: translate(-50%, -50%);
	transition: width 0.6s, height 0.6s;
}

.cta-primary-glow:hover::before {
	width: 400px;
	height: 400px;
}

.cta-primary-glow:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 15px 35px rgba(var(--bs-primary-rgb), 0.4) !important;
}

.cta-primary-glow:active {
	transform: translateY(-1px) scale(0.98);
}

/* Shine Effect */
.cta-shine-effect, .shine-effect {
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.3) 50%,
		transparent 100%
	);
	transition: left 0.7s;
	pointer-events: none;
}

.cta-primary-glow:hover .cta-shine-effect,
button:hover .shine-effect {
	left: 200%;
}

/* ========================================
   Pulse & Breathing Animations
   ======================================== */

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

@keyframes pulse-glow {
	0%, 100% {
		box-shadow: 0 0 20px rgba(220, 53, 69, 0.5);
	}
	50% {
		box-shadow: 0 0 40px rgba(220, 53, 69, 0.8);
	}
}

@keyframes animate-pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.7;
	}
}

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

/* ========================================
   Hover Lift Effect
   ======================================== */

.hover-lift {
	transform: translateY(0);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(0,0,0,0.2) !important;
}

.hover-lift:hover .btn {
	transform: scale(1.05);
}

/* ========================================
   Badge Enhancements
   ======================================== */

.badge {
	font-weight: 600;
	letter-spacing: 0.5px;
	transition: all 0.3s ease;
}

.badge:hover {
	transform: scale(1.05);
}

/* ========================================
   Trust Signals & Cards
   ======================================== */

.card {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
	transform: translateY(-2px);
}

.card.border-success:hover {
	box-shadow: 0 10px 30px rgba(25, 135, 84, 0.2) !important;
}

.card.border-primary:hover {
	box-shadow: 0 10px 30px rgba(var(--bs-primary-rgb), 0.2) !important;
}

.card.border-info:hover {
	box-shadow: 0 10px 30px rgba(13, 202, 240, 0.2) !important;
}

/* ========================================
   Icon Animations
   ======================================== */

svg {
	transition: transform 0.3s ease;
}

.btn:hover svg,
.card:hover svg {
	transform: scale(1.1);
}

.btn-primary:hover svg:last-child {
	animation: arrow-bounce 0.6s ease infinite;
}

@keyframes arrow-bounce {
	0%, 100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(5px);
	}
}

/* ========================================
   Loading Skeleton
   ======================================== */

@keyframes skeleton-loading {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

.skeleton {
	background: linear-gradient(
		90deg,
		#f0f0f0 25%,
		#e0e0e0 50%,
		#f0f0f0 75%
	);
	background-size: 200% 100%;
	animation: skeleton-loading 1.5s ease-in-out infinite;
}

/* ========================================
   Modal Enhancements
   ======================================== */

.modal.fade .modal-dialog {
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal.show .modal-dialog {
	transform: scale(1) translateY(0);
}

/* ========================================
   Testimonials
   ======================================== */

.testimonial-item {
	transition: all 0.3s ease;
}

.testimonial-item:hover {
	background: rgba(var(--bs-primary-rgb), 0.02);
	padding-left: 1rem !important;
}

/* ========================================
   Mobile Sticky CTA
   ======================================== */

@media (max-width: 991.98px) {
	.sticky-mobile-cta {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1030;
		background: linear-gradient(to top, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.95) 100%);
		backdrop-filter: blur(10px);
		box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
		padding: 0.75rem 1rem;
		animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	}

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

/* ========================================
   Gradient Text
   ======================================== */

.gradient-text {
	background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-info) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ========================================
   Scroll Reveal
   ======================================== */

.scroll-reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-reveal.revealed {
	opacity: 1;
	transform: translateY(0);
}

/* ========================================
   Rating Stars
   ======================================== */

.rating-stars {
	display: inline-flex;
	gap: 2px;
}

.rating-stars .star {
	transition: all 0.2s ease;
	display: inline-block;
}

.rating-stars:hover .star {
	transform: scale(1.1);
}

/* ========================================
   Responsive Adjustments
   ======================================== */

@media (max-width: 767.98px) {
	.cta-primary-glow {
		font-size: 1rem !important;
		padding: 0.9rem 1.5rem !important;
	}

	.pet-gallery-container {
		border-radius: 1rem !important;
	}

	.pet-gallery-thumbnails .col-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
	.cta-primary-glow,
	.hover-lift,
	.sticky-mobile-cta,
	.animate-pulse {
		animation: none !important;
		transform: none !important;
	}
}

/* ========================================
   Accessibility
   ======================================== */

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

/* ========================================
   Focus Styles
   ======================================== */

button:focus-visible,
a:focus-visible {
	outline: 3px solid var(--bs-primary);
	outline-offset: 3px;
}

/* ========================================
   Custom Scrollbar
   ======================================== */

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

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

.modal-body::-webkit-scrollbar-thumb {
	background: var(--bs-primary);
	border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
	background: var(--bs-primary-dark, #0056b3);
}