/* ==================== LUNAR NEW YEAR 2026 THEME ==================== */
/* Overrides for product-group.css */

:root {
	--lny-red: #d41420;
	--lny-red-dark: #b30000;
	--lny-gold: #ffd700;
	--lny-orange: #ff4500;
	--lny-orange-light: #ff6b35;
}

/* ==================== GLOBAL BACKGROUND & ORBS ==================== */
.product-page-wrapper::before {
	background-image:
		repeating-linear-gradient(
			0deg,
			rgba(212, 20, 32, 0.03) 0px,
			transparent 1px,
			transparent 2px,
			rgba(212, 20, 32, 0.03) 3px
		),
		repeating-linear-gradient(
			90deg,
			rgba(255, 215, 0, 0.03) 0px,
			transparent 1px,
			transparent 2px,
			rgba(255, 215, 0, 0.03) 3px
		);
}

.product-page-wrapper::after {
	background: radial-gradient(
		circle at center,
		rgba(212, 20, 32, 0.15) 0%,
		transparent 50%
	);
}

/* Override existing orbs to be warm suns/lanterns */
.orb-1 {
	background: linear-gradient(135deg, var(--lny-red), var(--lny-orange));
	opacity: 0.25;
}

.orb-2 {
	background: linear-gradient(135deg, var(--lny-gold), var(--lny-red));
	opacity: 0.2;
}

/* ==================== TYPOGRAPHY & BADGES ==================== */
.os-badge {
	background: linear-gradient(
		135deg,
		var(--lny-red),
		var(--lny-gold),
		var(--lny-red)
	);
	background-size: 200% 200%;
	color: #fff;
	box-shadow: 0 4px 15px rgba(212, 20, 32, 0.4);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.os-title {
	background: linear-gradient(
		135deg,
		var(--lny-red),
		var(--lny-gold),
		var(--lny-orange)
	);
	background-size: 200% 200%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: gradientShift 3s ease infinite;
}

/* ==================== CARDS (OS Grid & Product Cards) ==================== */
.products-grid {
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.os-card {
	border-color: rgba(212, 20, 32, 0.2);
}

.os-card::before {
	background: linear-gradient(
		135deg,
		rgba(212, 20, 32, 0.1),
		rgba(255, 215, 0, 0.1)
	);
}

.os-card:hover {
	border-color: rgba(255, 215, 0, 0.5);
	box-shadow: 0 20px 40px rgba(212, 20, 32, 0.3);
}

.os-card-icon {
	color: var(--lny-red);
}

.os-card:hover .os-card-icon {
	color: var(--lny-gold);
}

.os-card:hover .os-name {
	color: var(--lny-gold);
}

/* Product Cards */
.product-card-vps {
	border-color: rgba(212, 20, 32, 0.2);
}

.product-card-vps::before {
	background: linear-gradient(
		135deg,
		rgba(212, 20, 32, 0.05),
		rgba(255, 215, 0, 0.05)
	);
}

.product-card-vps:hover {
	border-color: rgba(255, 215, 0, 0.5);
	box-shadow:
		0 20px 60px rgba(212, 20, 32, 0.3),
		0 0 40px rgba(255, 215, 0, 0.2);
}

/* Featured overrides */
.product-card-vps.featured {
	border-color: rgba(255, 215, 0, 0.4);
	background: linear-gradient(
		135deg,
		rgba(255, 215, 0, 0.05),
		rgba(212, 20, 32, 0.05)
	);
}

.product-card-vps.featured:hover {
	border-color: rgba(255, 215, 0, 0.8);
	box-shadow:
		0 20px 60px rgba(255, 215, 0, 0.4),
		0 0 40px rgba(212, 20, 32, 0.3);
}

.product-card-name {
	background: linear-gradient(135deg, #fff, var(--lny-gold));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.product-card-vps:hover .product-card-name {
	background: linear-gradient(135deg, var(--lny-gold), var(--lny-red));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Stats */
.stat-item {
	border-color: rgba(212, 20, 32, 0.2);
}

.stat-item:hover {
	border-color: rgba(255, 215, 0, 0.5);
	box-shadow: 0 10px 30px rgba(212, 20, 32, 0.2);
}

.stat-number {
	background: linear-gradient(135deg, var(--lny-red), var(--lny-gold));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ==================== BUTTONS ==================== */
.cta-button,
.btn-primary,
.btn-order-os {
	background: linear-gradient(135deg, var(--lny-red), var(--lny-orange));
	box-shadow: 0 4px 20px rgba(212, 20, 32, 0.4);
}

.cta-button:hover,
.btn-primary:hover,
.btn-order-os:hover {
	background: linear-gradient(135deg, var(--lny-orange), var(--lny-red));
	box-shadow: 0 8px 30px rgba(255, 215, 0, 0.5);
	transform: translateY(-2px);
}

.cta-button-secondary {
	border-color: rgba(255, 215, 0, 0.3);
	color: #fff;
}

.cta-button-secondary:hover {
	border-color: var(--lny-gold);
	box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

/* Product order button */
.btn-order-product {
	background: linear-gradient(135deg, var(--lny-red), var(--lny-orange));
	box-shadow: 0 4px 20px rgba(212, 20, 32, 0.3);
}

.btn-order-product:hover {
	background: linear-gradient(135deg, var(--lny-orange), var(--lny-red));
	box-shadow: 0 8px 40px rgba(255, 215, 0, 0.5);
}

/* Featured Button */
.product-card-vps.featured .btn-order-product {
	background: linear-gradient(135deg, var(--lny-gold), #ffecb3);
	color: #d41420;
	box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4);
}

.product-card-vps.featured .btn-order-product:hover {
	background: linear-gradient(135deg, #ffecb3, var(--lny-gold));
	box-shadow: 0 8px 40px rgba(255, 215, 0, 0.6);
}

/* ==================== ICONS & SVG ==================== */
.spec-item svg,
.feature-item svg {
	color: var(--lny-gold);
}

.product-card-vps:hover .spec-item svg,
.product-card-vps:hover .feature-item svg {
	color: var(--lny-red);
}

.spec-item-full {
	background: rgba(212, 20, 32, 0.08);
	border-color: rgba(212, 20, 32, 0.15);
}

/* ==================== FAQ & TESTIMONIALS ==================== */
.faq-os-number {
	background: linear-gradient(135deg, var(--lny-red), var(--lny-gold));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.faq-os-item.active .faq-os-number {
	background: linear-gradient(135deg, var(--lny-red), var(--lny-gold));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	box-shadow:
		0 0 20px rgba(212, 20, 32, 0.6),
		0 0 40px rgba(255, 215, 0, 0.3);
}

.faq-os-item:hover,
.faq-os-item.active {
	border-color: rgba(255, 215, 0, 0.3);
}

.section-title-os h3 span {
	background: linear-gradient(135deg, var(--lny-red), var(--lny-gold));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ==================== FESTIVE DECORATIONS ==================== */
.lunar-decorations {
	position: fixed;
	top: 90px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 1400px;
	height: 100vh;
	pointer-events: none;
	z-index: 100;
	transition: opacity 0.5s ease;
}

.lunar-decorations.hide {
	opacity: 0;
	pointer-events: none;
}

.lantern {
	position: absolute;
	width: 80px;
	height: auto;
	animation: swing 3s ease-in-out infinite alternate;
	transform-origin: top center;
	filter: drop-shadow(0 10px 20px rgba(212, 20, 32, 0.4));
}

.lantern-left {
	top: -10px;
	left: 5%;
	animation-delay: 0s;
}

.lantern-right {
	top: -10px;
	right: 5%;
	animation-delay: 1.5s;
}

@keyframes swing {
	0% {
		transform: rotate(5deg);
	}
	100% {
		transform: rotate(-5deg);
	}
}

/* Small falling petals */
.petal {
	position: absolute;
	background-color: #ffc0cb;
	border-radius: 150% 0 150% 0;
	animation: falling 10s linear infinite;
	opacity: 0.8;
}

@keyframes falling {
	0% {
		transform: translate(0, -10vh) rotate(0deg);
		opacity: 0;
	}
	20% {
		opacity: 0.8;
	}
	80% {
		opacity: 0.8;
	}
	100% {
		transform: translate(100px, 110vh) rotate(720deg);
		opacity: 0;
	}
}

/* Price amount override */
.price-amount {
	background: linear-gradient(135deg, var(--lny-orange), var(--lny-gold));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ==================== MOBILE RESPONSIVE ==================== */
@media (max-width: 768px) {
	.products-grid {
		grid-template-columns: 1fr;
	}
	.lantern {
		width: 60px;
	}
}