/**
 * MOD Pro Cart Upsell Styling with 3D Tilt Effect
 *
 * Dark-themed upsell banner for WooCommerce cart with interactive 3D tilt.
 * Matches the styling of new-modal.css for brand consistency.
 * Features fun, enticing hover effects inspired by premium card designs.
 *
 * @package ModSubscription
 * @since   1.0.0
 */

:root {
	--font-heading: "Canela", serif;
	--font-body: "hk-grotesk-m", sans-serif;
	--upsell-bg: #000;
	--upsell-text: #fff;
	--upsell-cta-bg: #fff;
	--upsell-cta-text: #000;
	--upsell-cta-hover-bg: #f0f0f0;
	--accent-pink: #ff72fa;
}

/* Upsell container - independent box */
.modsg-cart-upsell {
	margin: 1.5rem 0;
	width: 100%;
	box-sizing: border-box;
	perspective: 1400px; /* Enable 3D space for tilt effect */
}

/* Upsell banner container with 3D transform support */
.modsg-cart-upsell__banner {
	position: relative;
	background-color: var(--upsell-bg);
	background-image: url(../img/MOD-Pro-Background-Upgrade.png);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 2.5rem 2rem;
	margin: 0;
	box-sizing: border-box;
	width: 100%;
	border-radius: 4px;
	border: 1px solid rgba(255, 114, 250, 0.15);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	transform-style: preserve-3d; /* Enable 3D transforms */
	transition: all 0.3s cubic-bezier(.03,.98,.52,.99);
	overflow: hidden; /* Contain glare effect */
}

/* Subtle pink gradient overlay for depth and warmth */
.modsg-cart-upsell__banner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		135deg,
		rgba(255, 114, 250, 0.08) 0%,
		transparent 50%,
		rgba(255, 114, 250, 0.05) 100%
	);
	pointer-events: none;
	z-index: 1;
	transition: opacity 0.3s ease;
}

/* Enhance pink overlay on hover */
.modsg-cart-upsell__banner:hover::before {
	background: linear-gradient(
		135deg,
		rgba(255, 114, 250, 0.12) 0%,
		transparent 50%,
		rgba(255, 114, 250, 0.08) 100%
	);
}

/* Subtle hover elevation with pink glow */
.modsg-cart-upsell__banner:hover {
	border-color: rgba(255, 114, 250, 0.3);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5),
	            0 0 60px rgba(255, 114, 250, 0.2);
}

/* Inner content wrapper with 3D depth */
.modsg-cart-upsell__content {
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
	color: var(--upsell-text);
	transform: translateZ(30px); /* Create depth separation */
	position: relative;
	z-index: 2;
}

/* Headline with 3D depth */
.modsg-cart-upsell__headline {
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 4vw, 2.5rem);
	font-weight: 400;
	margin: 0 0 1rem;
	color: var(--upsell-text);
	line-height: 1.2;
	transform: translateZ(40px); /* Extra depth for headline */
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
	transition: text-shadow 0.3s ease;
}

/* Pink glow on headline hover - more prominent */
.modsg-cart-upsell__banner:hover .modsg-cart-upsell__headline {
	text-shadow: 0 0 30px rgba(255, 114, 250, 0.6),
	             0 0 15px rgba(255, 114, 250, 0.4),
	             0 2px 15px rgba(0, 0, 0, 0.5);
}

/* Description with depth */
.modsg-cart-upsell__description {
	font-family: var(--font-body);
	font-size: clamp(0.9rem, 2.5vw, 1.1rem);
	line-height: 1.6;
	margin: 0 0 1.5rem;
	color: var(--upsell-text);
	opacity: 0.95;
	transform: translateZ(35px);
}

/* CTA Button with enhanced 3D effect */
.modsg-cart-upsell__cta {
	font-family: var(--font-body);
	font-size: clamp(0.9rem, 2.5vw, 1rem);
	font-weight: 300;
	background-color: var(--upsell-cta-bg);
	color: var(--upsell-cta-text);
	border: none;
	padding: 1rem 2rem;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(.03,.98,.52,.99);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: 0; /* MOD Pro brand: square buttons */
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	display: block;
	transform: translateZ(50px); /* Button pops out the most */
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
	position: relative;
	overflow: hidden;
}

/* Button hover with lift effect */
.modsg-cart-upsell__cta:hover,
.modsg-cart-upsell__cta:focus {
	background-color: var(--upsell-cta-hover-bg);
	transform: translateZ(60px) translateY(-2px); /* Lift on hover */
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
	outline: none;
}

.modsg-cart-upsell__cta:active {
	transform: translateZ(50px) translateY(0); /* Press down */
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Shimmer effect on button hover */
.modsg-cart-upsell__cta::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.3),
		transparent
	);
	transition: left 0.5s ease;
}

.modsg-cart-upsell__cta:hover::before {
	left: 100%;
}

/* Glare overlay (added by Tilt.js) - very subtle edge lighting */
.js-tilt-glare {
	border-radius: 4px;
}

.js-tilt-glare-inner {
	/* Gentle white highlight - just lightens edges when tilted */
	background: linear-gradient(
		0deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.08) 50%,
		rgba(255, 255, 255, 0) 100%
	) !important;
	opacity: 1 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.modsg-cart-upsell__banner {
		padding: 2rem 1.5rem;
	}

	.modsg-cart-upsell__headline {
		font-size: 1.75rem;
		margin-bottom: 0.75rem;
	}

	.modsg-cart-upsell__description {
		font-size: 1rem;
		margin-bottom: 1.25rem;
	}

	.modsg-cart-upsell__cta {
		padding: 0.875rem 1.5rem;
		font-size: 0.9rem;
	}

	/* Reduce 3D depth on mobile for better performance */
	.modsg-cart-upsell__content {
		transform: translateZ(20px);
	}

	.modsg-cart-upsell__headline {
		transform: translateZ(25px);
	}

	.modsg-cart-upsell__description {
		transform: translateZ(22px);
	}

	.modsg-cart-upsell__cta {
		transform: translateZ(30px);
	}
}

@media (max-width: 480px) {
	.modsg-cart-upsell__banner {
		padding: 1.5rem 1rem;
	}

	.modsg-cart-upsell__headline {
		font-size: 1.5rem;
	}

	.modsg-cart-upsell__description {
		font-size: 0.9rem;
		line-height: 1.5;
	}

	.modsg-cart-upsell__cta {
		padding: 0.75rem 1.25rem;
		font-size: 0.85rem;
		max-width: 100%;
	}

	/* Further reduce 3D depth on small mobile */
	.modsg-cart-upsell__content {
		transform: translateZ(15px);
	}

	.modsg-cart-upsell__headline {
		transform: translateZ(20px);
	}

	.modsg-cart-upsell__description {
		transform: translateZ(17px);
	}

	.modsg-cart-upsell__cta {
		transform: translateZ(25px);
	}
}

/* Loading state (for AJAX) */
.modsg-cart-upsell__cta[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

/* Success state (for AJAX) */
.modsg-cart-upsell__cta--success {
	background-color: #4caf50;
	color: #fff;
}

.modsg-cart-upsell__cta--success:hover {
	background-color: #45a049;
}

/* Accessibility: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
	.modsg-cart-upsell__banner,
	.modsg-cart-upsell__cta,
	.modsg-cart-upsell__cta::before {
		transition: none;
	}

	.modsg-cart-upsell__content,
	.modsg-cart-upsell__headline,
	.modsg-cart-upsell__description,
	.modsg-cart-upsell__cta {
		transform: none;
	}

	.modsg-cart-upsell__banner:hover .modsg-cart-upsell__cta {
		transform: none;
	}
}