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

/* --- Hero Particles Section --- */
/*
 * IMPORTANT: Bootstrap's d-table class sets display:table on this section.
 * display:table ignores overflow:hidden for width containment — the table
 * expands to fit its widest content (white-space:pre code), pushing the page
 * wider than the viewport on mobile. Forcing display:block fixes this.
 */
.hero-particles {
	display: block !important;
	position: relative;
	overflow: hidden;
	max-width: 100%;
	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 */
html {
	overflow-x: hidden;
	max-width: 100%;
}
body {
	overflow-x: hidden;
	position: relative; /* iOS Safari: prevents touch-scrolling beyond viewport */
	max-width: 100%;
}
/* Fix html element too — needed on iOS Safari */

/* --- API Key Widget Bar --- */
.w2a-key-bar {
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	padding: 10px 14px;
	gap: 8px;
}
.w2a-key-saved {
	background: rgba(46, 202, 139, 0.05);
	border-color: rgba(46, 202, 139, 0.3);
}
@media (max-width: 480px) {
	.w2a-key-bar { flex-direction: column; align-items: flex-start !important; }
	.w2a-key-bar .ms-auto { margin-left: 0 !important; }
	.w2a-key-bar #w2a-key-input { max-width: 100% !important; }
}

/* ── Hero Code Column — critical flex-item fix ─────────────────── */
/*
 * Bootstrap flex columns have min-width:auto by default.
 * When a child has white-space:pre + long lines, the column expands
 * beyond its grid % width, causing page-level horizontal scroll.
 * Setting min-width:0 locks it to its grid slot.
 * We do NOT use overflow:hidden here — it breaks iOS touch scroll on inner panels.
 */
.hero-code-col {
	min-width: 0;
	max-width: 100%;
}

/* ── Hero Code Block — Docs-style Tabs ───────────────────────────── */
.hero-tabbed-code {
	border: 1px solid #1e293b;
	border-radius: 10px;
	overflow: hidden;
}
/* Tab bar outer wrapper — holds scrollable tabs + pinned dots */
.hero-tabbed-code .hero-tabs-bar {
	display: flex;
	align-items: center;
	background: #1e2d40;
	border-bottom: 1px solid #334155;
}
/* Scrollable tabs area — flex:1 so it fills all space left of the dots */
.hero-tabbed-code .hero-tabs {
	display: flex;
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	padding: 0 4px;
}
.hero-tabbed-code .hero-tabs::-webkit-scrollbar { display: none; }
.hero-tabbed-code .hero-tab-btn {
	padding: 9px 13px;
	font-size: 11.5px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	border-bottom: 2px solid transparent;
	background: none;
	color: #94a3b8;
	margin-bottom: -1px;
	white-space: nowrap;
	transition: color .15s, border-color .15s;
	flex-shrink: 0;
	font-family: inherit;
	line-height: 1;
}
.hero-tabbed-code .hero-tab-btn.active { color: #e2e8f0; border-bottom-color: #2eca8b; }
.hero-tabbed-code .hero-tab-btn:hover  { color: #e2e8f0; }

/* Mac-style window dots — pinned to the right of the tab bar, never scrolls */
.hero-mac-dots {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 0 10px;
	flex-shrink: 0;
}
.mac-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}
.mac-dot-red    { background: #ff5f57; }
.mac-dot-yellow { background: #ffbd2e; }
.mac-dot-green  { background: #28c840; }
.hero-tabbed-code .hero-code-wrap { position: relative; background: #0f172a; overflow: hidden; }
.hero-tab-panel {
	display: none;
	padding: 14px 16px;
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: 11.5px;
	line-height: 1.7;
	color: #e2e8f0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	white-space: pre;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
}
.hero-tab-panel.active { display: block; }
.hero-code-copy-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	background: #334155;
	color: #94a3b8;
	border: none;
	border-radius: 5px;
	padding: 3px 10px;
	font-size: 11px;
	cursor: pointer;
	font-family: inherit;
	transition: background .15s, color .15s;
	z-index: 2;
	line-height: 1.6;
}
.hero-code-copy-btn:hover { background: #2eca8b; color: #fff; }

/* ── Hero Response Block (merged inside request card) ──────────────── */
.hero-response-block {
	border: 1px solid #1e293b;
	border-radius: 10px;
	overflow: hidden;
	margin-top: 10px;
}
.hero-response-header {
	background: #1e2d40;
	border-bottom: 1px solid #334155;
	padding: 7px 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.hero-status-ok {
	display: inline-block;
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 4px;
	background: #d1fae5;
	color: #065f46;
}
.hero-status-error {
	display: inline-block;
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 4px;
	background: #fee2e2;
	color: #991b1b;
}
.hero-response-label {
	font-size: 12px;
	color: #94a3b8;
	font-weight: 600;
}
.hero-response-body {
	display: block;
	padding: 14px 16px;
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: 11.5px;
	line-height: 1.7;
	color: #e2e8f0;
	background: #0f172a;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	white-space: pre;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
}

/* ── Hero Endpoint Row — docs-style URL bar ──────────────────────── */
.hero-endpoint-row {
	display: flex;
	align-items: center;
	background: #1e2d40;
	border: 1px solid #1e293b;
	border-radius: 10px;
	padding: 10px 14px;
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: 12px;
	margin-bottom: 10px;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	min-width: 0;
}
.hero-endpoint-row::-webkit-scrollbar { display: none; }
.hero-endpoint-url {
	color: #e2e8f0;
	font-weight: 600;
	white-space: nowrap;
	flex-shrink: 0;
}
.hero-method-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 800;
	padding: 2px 7px;
	border-radius: 4px;
	letter-spacing: .05em;
	flex-shrink: 0;
}
.hero-method-post { background: #d1fae5; color: #065f46; }
.hero-method-get  { background: #d1fae5; color: #065f46; }

/* ── Hero code panels — mobile max-height for scroll ────────────── */
@media (max-width: 991px) {
	.hero-tab-panel {
		max-height: 220px;
		overflow-y: auto;
	}
	.hero-response-body {
		max-height: 180px;
		overflow-y: auto;
	}
}

/* ═══════════════════════════════════════════════════════════════════
   Live API Tester  (page/service.php  — w2at-* namespace)
   ═══════════════════════════════════════════════════════════════════ */

/* Toggle button */
.w2at-toggle {
	font-size: 13px;
	letter-spacing: 0.2px;
}

/* ── Shared shimmer sweep (Try Now + Get Free Key) ──────────────── */
@keyframes w2atShimmer {
	0%   { background-position: -250% center; }
	100% { background-position:  250% center; }
}

/* ── "Try Now" gradient button ──────────────────────────────────── */
.btn-try-now {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #5f72bd 0%, #9b59b6 100%) !important;
	border: none !important;
	color: #fff !important;
	font-weight: 600 !important;
	letter-spacing: 0.3px;
	box-shadow: 0 3px 14px rgba(95, 114, 189, 0.40);
	transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-try-now::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		transparent  0%,
		transparent 30%,
		rgba(255,255,255,0.38) 50%,
		transparent 70%,
		transparent 100%
	);
	background-size: 250% 100%;
	background-position: -250% center;
	animation: w2atShimmer 2.2s linear infinite;
	pointer-events: none;
}
.btn-try-now:hover,
.btn-try-now:focus {
	color: #fff !important;
	filter: brightness(1.14);
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(155, 89, 182, 0.55) !important;
}
.btn-try-now:active {
	transform: translateY(0);
	filter: brightness(0.96);
}

/* ── "Get Free Key" shimmer inside tester modal ─────────────────── */
.w2at-getkey-btn {
	position: relative;
	overflow: hidden;
}
.w2at-getkey-btn::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		transparent  0%,
		transparent 30%,
		rgba(255,255,255,0.32) 50%,
		transparent 70%,
		transparent 100%
	);
	background-size: 250% 100%;
	background-position: -250% center;
	animation: w2atShimmer 2.6s linear infinite;
	pointer-events: none;
}

/* ── Attention pulse when dev hits Send without a key ──────────── */
@keyframes w2atKeyPulse {
	0%   { transform: scale(1);    box-shadow: 0 0  0px rgba(155,89,182,0.0); }
	20%  { transform: scale(1.18); box-shadow: 0 4px 18px rgba(155,89,182,0.70); }
	40%  { transform: scale(1.10); box-shadow: 0 2px 10px rgba(155,89,182,0.40); }
	60%  { transform: scale(1.18); box-shadow: 0 4px 18px rgba(155,89,182,0.70); }
	80%  { transform: scale(1.10); box-shadow: 0 2px 10px rgba(155,89,182,0.40); }
	100% { transform: scale(1);    box-shadow: 0 0  0px rgba(155,89,182,0.0); }
}
.w2at-getkey-pulse {
	animation: w2atKeyPulse 2.4s ease-in-out forwards !important;
	z-index: 2;
}

/* Card wrapper for the expanded panel */
.w2at-card {
	border: 1px solid #e2e8f0 !important;
}

/* ── Key status bar ─────────────────────────────────────────────── */
.w2at-keybar {
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 13px;
	gap: 8px;
}
.w2at-key-ok {
	background: rgba(46, 202, 139, 0.05);
	border: 1px solid rgba(46, 202, 139, 0.25);
}
.w2at-key-none {
	background: rgba(251, 191, 36, 0.06);
	border: 1px solid rgba(251, 191, 36, 0.3);
}

/* ── Response pre block ─────────────────────────────────────────── */
.w2at-resp-pre {
	background: #0f172a;
	border-radius: 8px;
	padding: 14px 16px;
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: 12px;
	line-height: 1.7;
	color: #e2e8f0;
	overflow-x: auto;
	overflow-y: auto;
	max-height: 420px;
	margin: 0;
	white-space: pre;
}
.w2at-resp-pre code {
	font: inherit;
	color: inherit;
	background: none;
	padding: 0;
}

/* ── JSON syntax colours ────────────────────────────────────────── */
.w2at-k  { color: #93c5fd; }   /* object key     */
.w2at-s  { color: #86efac; }   /* string value   */
.w2at-n  { color: #fbbf24; }   /* number         */
.w2at-b  { color: #f472b6; }   /* boolean        */
.w2at-nu { color: #94a3b8; }   /* null           */

/* ── Mobile adjustments ─────────────────────────────────────────── */
@media (max-width: 576px) {
	.w2at-keybar         { flex-direction: column; align-items: flex-start !important; }
	.w2at-keybar .ms-auto { margin-left: 0 !important; }
	.w2at-resp-pre        { font-size: 11px; max-height: 280px; }
}