/* ===================================
   Way2API Custom Styles
   =================================== */

/* --- Hero Particles Section --- */
.hero-particles {
	position: relative;
	overflow: hidden;
	background: radial-gradient(ellipse at 20% 50%, rgba(46,202,139,0.08) 0%, transparent 60%),
	            radial-gradient(ellipse at 80% 20%, rgba(74,169,108,0.06) 0%, transparent 50%);
}
.hero-particles #particles-js {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: 0;
}
.hero-particles .container {
	position: relative;
	z-index: 1;
}

/* Floating glow orbs */
.hero-particles::before,
.hero-particles::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	z-index: 0;
	pointer-events: none;
}
.hero-particles::before {
	width: 400px; height: 400px;
	background: rgba(46,202,139,0.12);
	top: -80px; left: -100px;
	animation: heroFloat 8s ease-in-out infinite;
}
.hero-particles::after {
	width: 300px; height: 300px;
	background: rgba(74,169,108,0.10);
	bottom: -60px; right: -50px;
	animation: heroFloat 10s ease-in-out infinite reverse;
}

@keyframes heroFloat {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33%      { transform: translate(30px, -20px) scale(1.05); }
	66%      { transform: translate(-20px, 15px) scale(0.95); }
}

/* --- Free Tier Highlight Text --- */
.free-tier-highlight {
	display: inline-block;
	position: relative;
	margin-top: 0.5rem;
	padding: 3px 18px;
	border-radius: 50px;
    border-bottom-left-radius: 100px;
    border-top-right-radius: 100px;
	background: linear-gradient(135deg, rgba(46,202,139,0.12) 0%, rgba(74,169,108,0.08) 50%, rgba(46,202,139,0.12) 100%);
	background-size: 200% 200%;
	border: 0px solid rgba(46,202,139,0.25);
	color: #2eca8b;
	font-weight: 500;
	letter-spacing: 0.3px;
	animation: gradientShift 4s ease infinite;
	backdrop-filter: blur(4px);
	overflow: hidden;
}
/* Left-to-right shimmer sweep */
.free-tier-highlight::before {
	content: '';
	position: absolute;
	top: 0; left: -100%;
	width: 100%; height: 100%;
	background: linear-gradient(90deg, transparent 0%, rgba(46,202,139,0.25) 40%, rgba(255,255,255,0.18) 50%, rgba(46,202,139,0.25) 60%, transparent 100%);
	animation: shimmerSweep 3s ease-in-out infinite;
	pointer-events: none;
	border-radius: inherit;
}
.free-tier-highlight i {
	font-size: 14px;
	vertical-align: middle;
	margin-right: 4px;
	animation: sparkPulse 2s ease-in-out infinite;
}

@keyframes gradientShift {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
@keyframes sparkPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.6; transform: scale(1.15); }
}
@keyframes shimmerSweep {
	0%   { left: -100%; }
	100% { left: 100%; }
}

/* --- Lightbox Image Hover Overlay --- */
.img-lightbox-wrap {
	position: relative;
	overflow: hidden;
	display: block;
	border-radius: inherit;
}
.img-lightbox-wrap img {
	display: block;
	width: 100%;
	transition: transform 0.4s ease;
}
.img-lightbox-wrap .img-lightbox-overlay {
	position: absolute;
	inset: 0;
	background: rgba(46, 202, 139, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.35s ease;
	border-radius: inherit;
}
.img-lightbox-wrap .img-lightbox-overlay i {
	font-size: 2.5rem;
	color: #fff;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
	transform: scale(0.7);
	transition: transform 0.35s ease;
}
.img-lightbox-wrap:hover img {
	transform: scale(1.04);
}
.img-lightbox-wrap:hover .img-lightbox-overlay {
	opacity: 1;
}
.img-lightbox-wrap:hover .img-lightbox-overlay i {
	transform: scale(1);
}

/* --- Hero Code Block Responsiveness --- */
/* Ensure the nav-bg code panel never pushes past its column */
.nav-bg {
	min-width: 0;
	overflow: hidden;
}
/* pre blocks scroll internally, never break the layout */
.nav-bg pre {
	max-width: 100%;
	overflow-x: auto;
	white-space: pre;
	/* Ensure it doesn't force parent wider than 100vw */
	contain: inline-size;
}
/* URL row: on very small screens let the code wrap under the button */
@media (max-width: 480px) {
	.nav-bg .d-flex.align-items-start {
		flex-wrap: wrap;
	}
	.nav-bg .d-flex.align-items-start .btn {
		margin-top: 6px;
		align-self: flex-start;
	}
	.nav-bg pre {
		font-size: 11px !important;
	}
}
/* Prevent the whole page from overflowing horizontally */
body {
	overflow-x: hidden;
}