/*
 * Traxio Theme Showcase 1.0.1
 * Everything is scoped under #txs-root so it renders the same on every theme,
 * and nothing here touches the theme being previewed.
 */

#txs-root {
	--txs-bg: #0e1526;
	--txs-bg-2: #141d33;
	--txs-line: rgba(148, 163, 255, .18);
	--txs-text: #e8ecf8;
	--txs-muted: #9aa6c4;
	--txs-accent: #22d3ee;
	--txs-accent-2: #6366f1;
	--txs-hover: rgba(255, 255, 255, .08);
	--txs-radius: 12px;
	--txs-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	display: block;
	position: static;
	clear: both;
	margin: 10px 0 14px;
	padding: 0;
	font: 400 14px/1.4 var(--txs-font);
	color: var(--txs-text);
	text-align: left;
	letter-spacing: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
}

#txs-root *,
#txs-root *::before,
#txs-root *::after {
	box-sizing: border-box;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
}

/* Themes often style bare links/lists with !important; keep ours readable regardless. */
#txs-root ul, #txs-root li { list-style: none !important; margin-left: 0 !important; }
#txs-root li::marker { content: none; }
#txs-root img { border: 0 !important; }

#txs-root [hidden] { display: none !important; }

#txs-root a,
#txs-root button {
	color: inherit;
	text-decoration: none !important;
	text-transform: none !important;
	list-style: none;
	font: inherit;
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	box-shadow: none;
	cursor: pointer;
	line-height: inherit;
	min-height: 0;
	width: auto;
	height: auto;
	float: none;
}

#txs-root a:focus-visible,
#txs-root button:focus-visible {
	outline: 2px solid var(--txs-accent);
	outline-offset: 2px;
}

#txs-root img { max-width: none; border: 0; box-shadow: none; margin: 0; padding: 0; }

#txs-root .txs-i { display: block; flex: none; width: 18px; height: 18px; }

/* ---------- Bar ---------- */

#txs-root .txs-bar {
	background: linear-gradient(100deg, var(--txs-bg) 0%, var(--txs-bg-2) 100%);
	border: 1px solid var(--txs-line);
	border-radius: var(--txs-radius);
	box-shadow: 0 6px 24px -12px rgba(2, 6, 23, .55);
	overflow: hidden;
}

#txs-root.txs-fallback { margin: 0; }
#txs-root.txs-fallback .txs-bar { border-radius: 0; border-width: 0 0 1px; }

#txs-root .txs-bar-in {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px 8px 12px;
	min-height: 56px;
}

#txs-root .txs-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 1 auto;
	min-width: 0;
	color: var(--txs-text) !important;
}

#txs-root .txs-logo {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--txs-accent-2), var(--txs-accent));
	color: #fff;
	flex: none;
}

#txs-root .txs-brand-text { display: flex; flex-direction: column; min-width: 0; }
#txs-root .txs-brand-text strong { font-weight: 650; font-size: 13.5px; white-space: nowrap; color: var(--txs-text); }
#txs-root .txs-brand-text span { font-size: 12px; color: var(--txs-muted); white-space: nowrap; }

/* Switcher */

#txs-root .txs-switch {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1 1 auto;
	justify-content: center;
	min-width: 0;
}

#txs-root .txs-current {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	max-width: 420px;
	flex: 0 1 420px;
	padding: 5px 8px 5px 5px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--txs-line);
	transition: background .15s, border-color .15s;
}

#txs-root .txs-current:hover { background: var(--txs-hover); border-color: rgba(34, 211, 238, .5); }

#txs-root .txs-swatch {
	display: grid;
	place-items: center;
	width: 46px;
	height: 34px;
	border-radius: 7px;
	overflow: hidden;
	flex: none;
	background: #1e293b;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
}

#txs-root .txs-swatch img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

#txs-root .txs-current-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
#txs-root .txs-current-label { font-size: 11px; color: var(--txs-muted); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#txs-root .txs-pos { text-transform: none; letter-spacing: 0; opacity: .85; }
#txs-root .txs-current-name { font-size: 14.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }

#txs-root .txs-change {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: none;
	padding: 6px 10px;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--txs-accent-2), #4f8ff7);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

/* Buttons */

#txs-root .txs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 36px;
	padding: 0 12px;
	border-radius: 9px;
	border: 1px solid var(--txs-line);
	background: rgba(255, 255, 255, .04);
	color: var(--txs-text) !important;
	font-size: 13px;
	font-weight: 550;
	white-space: nowrap;
	transition: background .15s, border-color .15s, color .15s;
}

#txs-root .txs-btn:hover { background: var(--txs-hover); border-color: rgba(34, 211, 238, .45); color: #fff !important; }
#txs-root .txs-icon-btn { width: 36px; padding: 0; flex: none; }
#txs-root .txs-btn-primary { background: rgba(34, 211, 238, .14); border-color: rgba(34, 211, 238, .5); color: #c9f6ff !important; }
#txs-root .txs-btn-primary:hover { background: rgba(34, 211, 238, .24); }

#txs-root .txs-actions { display: flex; align-items: center; gap: 6px; flex: none; }

/* Notice for an unknown ?showcase= value */

#txs-root .txs-notice {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: center;
	padding: 8px 14px;
	border-top: 1px solid var(--txs-line);
	background: rgba(250, 204, 21, .1);
	color: #fde68a;
	font-size: 13px;
}

#txs-root .txs-notice a { text-decoration: underline !important; color: #fff !important; }

/* ---------- Gallery dialog ---------- */

#txs-root .txs-dialog {
	width: min(1040px, calc(100vw - 32px));
	max-width: none;
	max-height: min(86vh, 900px);
	max-height: min(86dvh, 900px);
	margin: auto;
	padding: 0;
	border: 1px solid var(--txs-line);
	border-radius: 16px;
	background: var(--txs-bg);
	color: var(--txs-text);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
	overflow: hidden;
	font: 400 14px/1.45 var(--txs-font);
}

#txs-root .txs-dialog::backdrop { background: rgba(2, 6, 23, .62); backdrop-filter: blur(3px); }

/* No-JS fallback: the "Change theme" link targets the dialog. */
#txs-root .txs-dialog:target:not([open]) {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 2147483000;
}

#txs-root .txs-dialog-in { display: flex; flex-direction: column; max-height: inherit; min-height: 0; }
#txs-root .txs-dialog-head,
#txs-root .txs-dialog-foot { flex: none; }

#txs-root .txs-dialog-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px 14px;
	border-bottom: 1px solid var(--txs-line);
}

#txs-root .txs-dialog-head h2 { margin: 0 0 4px; padding: 0; font-size: 18px; font-weight: 700; color: #fff; border: 0; background: none; line-height: 1.3; }
#txs-root .txs-dialog-head p { margin: 0; color: var(--txs-muted); font-size: 13px; }

#txs-root .txs-grid {
	list-style: none;
	margin: 0;
	padding: 18px 20px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
	overflow-y: auto;
	overscroll-behavior: contain;
	/* The list scrolls; cards keep their natural height however many themes there are. */
	flex: 1 1 auto;
	min-height: 0;
	grid-auto-rows: max-content;
	align-content: start;
	-webkit-overflow-scrolling: touch;
}

#txs-root .txs-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	border-radius: 12px;
	border: 1px solid var(--txs-line);
	background: var(--txs-bg-2);
	overflow: hidden;
	transition: transform .15s, border-color .15s, box-shadow .15s;
	list-style: none;
}

#txs-root .txs-card::before { content: none; }
#txs-root .txs-card:hover { transform: translateY(-2px); border-color: rgba(34, 211, 238, .5); box-shadow: 0 10px 30px -14px rgba(34, 211, 238, .45); }
#txs-root .txs-card.is-current { border-color: var(--txs-accent); box-shadow: 0 0 0 1px var(--txs-accent) inset; }

#txs-root .txs-card-link { display: flex; flex-direction: column; flex: 1 0 auto; color: var(--txs-text) !important; }

#txs-root .txs-thumb {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	width: 100%;
	overflow: hidden;
	background: #1e293b;
	border-bottom: 1px solid var(--txs-line);
	flex: none;
	min-height: 0;
}

#txs-root .txs-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

#txs-root .txs-thumb-ph {
	--txs-h: 220;
	background: linear-gradient(135deg, hsl(var(--txs-h) 70% 45%), hsl(calc(var(--txs-h) + 50) 75% 35%));
	color: rgba(255, 255, 255, .92);
	font-weight: 800;
	font-size: 34px;
}

#txs-root .txs-swatch.txs-thumb-ph { font-size: 13px; }

#txs-root .txs-card-body { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 11px 13px 13px; }
#txs-root .txs-card-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 650; font-size: 15px; color: #fff; }
#txs-root .txs-card-desc { color: var(--txs-muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#txs-root .txs-card-now { display: inline-flex; align-items: center; gap: 4px; color: var(--txs-accent); font-size: 12px; font-weight: 600; }
#txs-root .txs-card-now .txs-i { width: 14px; height: 14px; }

#txs-root .txs-card-links { flex: none; display: flex; border-top: 1px solid var(--txs-line); }
#txs-root .txs-card-links a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px; font-size: 12.5px; color: var(--txs-muted) !important; }
#txs-root .txs-card-links a + a { border-left: 1px solid var(--txs-line); }
#txs-root .txs-card-links a:hover { color: #fff !important; background: var(--txs-hover); }
#txs-root .txs-card-links .txs-i { width: 15px; height: 15px; }

#txs-root .txs-badge {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	line-height: 1.6;
}

#txs-root .txs-badge-new { background: rgba(34, 197, 94, .18); color: #86efac; }
#txs-root .txs-badge-featured { background: rgba(250, 204, 21, .18); color: #fde68a; }

#txs-root .txs-dialog-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 14px 20px;
	border-top: 1px solid var(--txs-line);
	background: rgba(0, 0, 0, .15);
}

#txs-root .txs-foot-traxio { margin-left: auto; }

/* ---------- Floating button, loading overlay, toast ---------- */

#txs-root .txs-fab {
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: max(16px, env(safe-area-inset-bottom));
	z-index: 2147482000;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 16px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--txs-accent-2), #0ea5c6);
	color: #fff !important;
	font: 600 14px/1 var(--txs-font);
	box-shadow: 0 10px 28px -8px rgba(15, 23, 42, .6), 0 0 0 1px rgba(255, 255, 255, .15) inset;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .2s, transform .2s;
	pointer-events: none;
}

#txs-root .txs-fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }

#txs-root .txs-loading {
	position: fixed;
	inset: 0;
	z-index: 2147483600;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: rgba(8, 12, 24, .72);
	backdrop-filter: blur(4px);
	color: #fff;
	font: 600 16px/1.3 var(--txs-font);
	animation: txs-fade .18s ease-out;
}

#txs-root .txs-spinner {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, .2);
	border-top-color: var(--txs-accent);
	animation: txs-spin .8s linear infinite;
}

#txs-root .txs-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 2147483600;
	padding: 10px 16px;
	border-radius: 10px;
	background: #0f172a;
	color: #fff;
	border: 1px solid var(--txs-line);
	font: 600 13.5px/1.3 var(--txs-font);
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6);
}

@keyframes txs-spin { to { transform: rotate(360deg); } }
@keyframes txs-fade { from { opacity: 0; } }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
	#txs-root .txs-brand-text span { display: none; }
}

@media (max-width: 820px) {
	#txs-root .txs-brand-text { display: none; }
	#txs-root .txs-lbl { display: none; }
	#txs-root .txs-actions .txs-btn { width: 36px; padding: 0; }
	#txs-root .txs-switch { justify-content: flex-start; }
}

@media (max-width: 560px) {
	#txs-root { margin: 8px 0 10px; }
	#txs-root .txs-bar-in { gap: 6px; padding: 6px; min-height: 0; }
	#txs-root .txs-change-text, #txs-root .txs-label-word { display: none; }
	#txs-root .txs-change { padding: 6px; }
	#txs-root .txs-swatch { width: 36px; height: 30px; }
	#txs-root .txs-current { gap: 8px; padding: 4px 6px 4px 4px; }
	#txs-root .txs-current-name { font-size: 14px; }
	#txs-root .txs-btn, #txs-root .txs-icon-btn { height: 40px; }
	#txs-root .txs-icon-btn, #txs-root .txs-actions .txs-btn { width: 40px; }
	#txs-root .txs-share { display: none !important; }

	#txs-root .txs-dialog {
		width: 100vw;
		max-height: 92vh;
		margin: auto 0 0;
		border-radius: 16px 16px 0 0;
		border-bottom: 0;
	}
	#txs-root .txs-dialog-head { padding: 14px 16px 12px; }
	#txs-root .txs-grid { grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 14px; }
	#txs-root .txs-thumb-ph { font-size: 26px; }
	#txs-root .txs-card-body { padding: 8px 10px 10px; }
	#txs-root .txs-card-title { font-size: 14px; }
	#txs-root .txs-card-desc { -webkit-line-clamp: 2; font-size: 12.5px; }
	#txs-root .txs-dialog-foot { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
	#txs-root .txs-dialog-foot .txs-btn { flex: 1 1 auto; }
	#txs-root .txs-foot-traxio { margin-left: 0; }
}

@media (max-width: 380px) {
	#txs-root .txs-brand { display: none; }
	#txs-root .txs-current-label { display: none; }
}

/* Short screens (phones in landscape): use the full height, keep the list roomy. */
@media (max-height: 560px) {
	#txs-root .txs-dialog { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); width: min(1040px, calc(100vw - 16px)); }
	#txs-root .txs-dialog-head { padding: 10px 14px 8px; }
	#txs-root .txs-dialog-head h2 { font-size: 16px; margin: 0; }
	#txs-root .txs-dialog-head p { display: none; }
	#txs-root .txs-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; padding: 10px 14px; }
	#txs-root .txs-card-desc { -webkit-line-clamp: 2; }
	#txs-root .txs-dialog-foot { padding: 8px 14px; gap: 6px; }
	#txs-root .txs-dialog-foot .txs-btn { height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
	#txs-root *, #txs-root *::before, #txs-root *::after { transition: none !important; animation: none !important; }
	#txs-root .txs-spinner { animation: txs-spin 1.6s linear infinite !important; }
}