/**
 * Rs Christmas Trees - Public Stylesheet
 * Responsive, non-intrusive Christmas decorations.
 *
 * @package Rs_Christmas_Trees
 */

/* Top Tree Banner */
.rs_tree-top,
#rs-tree-banner-top {
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99998;
	height: 130px;
	pointer-events: none !important;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% 100%;
	will-change: opacity, transform;
}

/* Bottom Tree Banner */
.rs_tree-bottom,
#rs-tree-banner-bottom {
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 99998;
	height: 130px;
	pointer-events: none !important;
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100% 100%;
	will-change: opacity, transform;
}

/* Repeat mode if specifically chosen */
.rs-mode-repeat {
	background-repeat: repeat-x !important;
	background-size: auto 100% !important;
}

/* Cover mode */
.rs-mode-cover {
	background-repeat: no-repeat !important;
	background-size: cover !important;
}

/* Sticky vs Non-Sticky */
.rs_trees-sticky {
	position: fixed !important;
}

.rs_trees-non-sticky {
	position: absolute !important;
}

/* When click-to-hide is active on the banner */
.rs_tree-top[data-click-hide="1"],
.rs_tree-bottom[data-click-hide="1"] {
	pointer-events: auto !important;
}

/* Close Button */
.rs-tree-close-btn {
	position: absolute;
	right: 16px;
	top: 14px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(15, 23, 42, 0.75);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	pointer-events: auto !important;
	transition: background 0.2s ease, transform 0.2s ease;
	z-index: 99999;
	padding: 0;
	line-height: 1;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.rs_tree-bottom .rs-tree-close-btn {
	top: auto;
	bottom: 14px;
}

.rs-tree-close-btn:hover {
	background: rgba(220, 38, 38, 0.95);
	transform: scale(1.1);
}

.rs-tree-close-btn svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
	.rs_tree-top,
	#rs-tree-banner-top {
		height: 90px;
	}
	.rs_tree-bottom,
	#rs-tree-banner-bottom {
		height: 90px;
	}
}

@media screen and (max-width: 480px) {
	.rs_tree-top,
	#rs-tree-banner-top {
		height: 65px;
	}
	.rs_tree-bottom,
	#rs-tree-banner-bottom {
		height: 65px;
	}
}