/**
 * ZeltaCode Integrations — front-end styles.
 */

.zcin {
	--zcin-side-w: 220px;
	--zcin-sticky-top: 24px;
	--zcin-logo: 30px;

	background: #000;
}

.zcin *,
.zcin *::before,
.zcin *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Heading block                                                       */
/* ------------------------------------------------------------------ */

.zcin__head {
	margin-bottom: 40px;
}

.zcin .zcin__eyebrow {
	margin: 0 0 14px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.8px;
	line-height: 1;
	text-transform: uppercase;
	color: #3b82f6;
}

.zcin .zcin__heading {
	margin: 0 0 14px;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -1px;
	color: #fff;
	overflow-wrap: break-word;
}

.zcin .zcin__sub {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.7;
	color: #8a90a0;
	overflow-wrap: break-word;
}

/* ------------------------------------------------------------------ */
/* Columns                                                             */
/* ------------------------------------------------------------------ */

/**
 * The sidebar width comes from a variable, not from Elementor writing
 * grid-template-columns directly. That keeps this the only declaration of the
 * property, so the stacked layout further down can override it.
 */
/**
 * align-items must stay stretch. A sticky element can only travel inside its
 * own parent, so with `start` the sidebar column shrinks to the panel's height
 * and the panel has nowhere to move — sticky silently does nothing. Stretched,
 * the column runs the full height of the grid beside it and the panel sticks
 * for exactly that distance, releasing at the bottom of the last row.
 */
.zcin__cols {
	display: grid;
	grid-template-columns: minmax(0, var(--zcin-side-w)) minmax(0, 1fr);
	column-gap: 34px;
	align-items: stretch;
}

/* No sidebar rendered — the grid takes the whole width. */
.zcin__cols:not(:has(.zcin__side)) {
	grid-template-columns: minmax(0, 1fr);
}

.zcin__side {
	min-width: 0;
	/* Stated as well as inherited, so the column keeps its full height even if a
	   theme or a container sets align-items on the grid. */
	align-self: stretch;
}

/**
 * position:sticky is cancelled outright by any scroll container between the
 * element and the page — a single `overflow: hidden` on an ancestor is enough,
 * and Elementor containers and themes set it often. These are the ancestors
 * this widget owns; if sticky still will not hold, an ancestor outside the
 * widget is clipping it.
 */
.zcin,
.zcin__cols,
.zcin__side {
	overflow: visible;
}

.zcin__side-inner {
	border: 1px solid #1a1d23;
	border-radius: 4px;
	background-color: #0b0d11;
	padding: 14px 12px;
}

/**
 * Only the categories panel sticks — the heading sits outside this column and
 * scrolls away normally. The offset is Content → Sidebar → Sticky Offset; set
 * it to your fixed header's height so the panel stops below it rather than
 * underneath it.
 */
.zcin-sticky-yes .zcin__side-inner {
	position: -webkit-sticky;
	position: sticky;
	top: var(--zcin-sticky-top, 24px);
	z-index: 2;
}

.zcin .zcin__side-title {
	margin: 0 0 10px;
	padding: 0 8px;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 1.4px;
	line-height: 1;
	text-transform: uppercase;
	color: #5a6270;
}

/* ------------------------------------------------------------------ */
/* Category rows                                                       */
/* ------------------------------------------------------------------ */

.zcin__cats {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

/**
 * Real <button>s, so theme and Elementor Kit button rules apply to them and
 * outrank a single-class reset. Every state is covered and the properties
 * themes tend to force are locked, or a kit accent repaints the row on hover.
 */
.zcin .zcin__cat,
.zcin .zcin__cat:link,
.zcin .zcin__cat:visited,
.zcin .zcin__cat:hover,
.zcin .zcin__cat:focus,
.zcin .zcin__cat:active {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 8px;
	-webkit-appearance: none;
	appearance: none;
	border: 0 none !important;
	border-radius: 3px;
	background: none;
	background-color: transparent;
	background-image: none !important;
	box-shadow: none !important;
	color: inherit;
	text-align: left;
	text-decoration: none !important;
	text-transform: none;
	letter-spacing: normal;
	white-space: normal;
	font: inherit;
	line-height: inherit;
	cursor: pointer;
	transform: none;
	filter: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.2s ease;
}

.zcin .zcin__cat:not(.is-active):hover {
	background-color: rgba(255, 255, 255, 0.025);
}

.zcin .zcin__cat.is-active {
	background-color: #15181e;
}

.zcin .zcin__cat:focus {
	outline: none;
}

.zcin .zcin__cat:focus-visible {
	outline: 2px solid #5e9eff;
	outline-offset: -2px;
}

/* The radio dot. Empty ring normally, filled centre when selected. */
.zcin__radio {
	position: relative;
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	border: 1px solid #343a44;
	border-radius: 50%;
	transition: border-color 0.2s ease;
}

.zcin__radio::after {
	content: "";
	position: absolute;
	inset: 2px;
	border-radius: 50%;
	background-color: transparent;
	transition: background-color 0.2s ease;
}

.zcin__cat.is-active .zcin__radio {
	border-color: #3b82f6;
}

.zcin__cat.is-active .zcin__radio::after {
	background-color: #3b82f6;
}

.zcin__cat-label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.35;
	color: #8a90a0;
	overflow-wrap: break-word;
	word-break: break-word;
	transition: color 0.2s ease;
}

.zcin__cat.is-active .zcin__cat-label {
	color: #fff;
}

.zcin__cat-count {
	flex: 0 0 auto;
	font-size: 10px;
	line-height: 1;
	color: #4e5561;
}

/* ------------------------------------------------------------------ */
/* Main column                                                         */
/* ------------------------------------------------------------------ */

.zcin__main {
	min-width: 0;
}

.zcin .zcin__count {
	display: flex;
	align-items: baseline;
	gap: 7px;
	margin: 0 0 18px;
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: 1.3px;
	line-height: 1.4;
	text-transform: uppercase;
	color: #5a6270;
	overflow-wrap: break-word;
}

.zcin__count-num {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
	color: #fff;
}

/* ------------------------------------------------------------------ */
/* Cards                                                               */
/* ------------------------------------------------------------------ */

.zcin__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	align-items: stretch;
}

/**
 * Locked across every state for the same reason as the category buttons — a
 * linked card is an <a>, and theme link rules would otherwise repaint it.
 */
.zcin .zcin__card,
.zcin .zcin__card:link,
.zcin .zcin__card:visited,
.zcin .zcin__card:hover,
.zcin .zcin__card:focus,
.zcin .zcin__card:active {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	min-width: 0;
	padding: 24px 18px;
	border: 1px solid #1a1d23;
	border-radius: 4px;
	background-color: #0f1116;
	text-align: center;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.zcin .zcin__card:hover {
	background-color: #14171d;
	border-color: #2a303a;
}

.zcin__card[hidden] {
	display: none !important;
}

.zcin .zcin__card--link {
	cursor: pointer;
}

.zcin .zcin__card--link:focus-visible {
	outline: 2px solid #5e9eff;
	outline-offset: 2px;
}

.zcin__logo,
.zcin__mono {
	display: block;
	flex: 0 0 auto;
	width: var(--zcin-logo);
	height: var(--zcin-logo);
	margin-bottom: 14px;
}

.zcin__logo {
	object-fit: contain;
}

/* Letter shown when an integration has no logo yet. */
.zcin__mono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.06);
	color: #c7cbd1;
	font-size: calc(var(--zcin-logo) * 0.42);
	font-weight: 600;
	line-height: 1;
}

.zcin__name {
	display: block;
	min-width: 0;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	overflow-wrap: break-word;
	word-break: break-word;
}

.zcin__desc {
	display: block;
	min-width: 0;
	margin-top: 8px;
	font-size: 10.5px;
	line-height: 1.6;
	color: #6e7480;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ------------------------------------------------------------------ */
/* Load more                                                           */
/* ------------------------------------------------------------------ */

.zcin__more {
	display: flex;
	justify-content: center;
	margin-top: 26px;
}

.zcin__more[hidden] {
	display: none !important;
}

.zcin .zcin__more-btn,
.zcin .zcin__more-btn:link,
.zcin .zcin__more-btn:visited,
.zcin .zcin__more-btn:hover,
.zcin .zcin__more-btn:focus,
.zcin .zcin__more-btn:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 11px 26px;
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid #2a303a;
	border-radius: 3px;
	background-color: rgba(255, 255, 255, 0.02);
	box-shadow: none !important;
	color: #ededed;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none !important;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.zcin .zcin__more-btn:hover {
	background-color: #fff;
	border-color: #fff;
	color: #000;
}

.zcin .zcin__more-btn:focus {
	outline: none;
}

.zcin .zcin__more-btn:focus-visible {
	outline: 2px solid #5e9eff;
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* Overflow safety                                                     */
/* ------------------------------------------------------------------ */

.zcin,
.zcin__cols,
.zcin__side,
.zcin__side-inner,
.zcin__main,
.zcin__grid,
.zcin__card {
	min-width: 0;
}

.zcin__cols,
.zcin__main,
.zcin__grid,
.zcin__card {
	max-width: 100%;
}

/* ------------------------------------------------------------------ */
/* Motion                                                              */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.zcin__cat,
	.zcin__card,
	.zcin__radio,
	.zcin__radio::after,
	.zcin__cat-label,
	.zcin__more-btn {
		transition: none !important;
	}
}

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

/**
 * Stacked, the sidebar sits above the grid and releases its sticky position —
 * a sticky block at the top of the page has nothing useful to stick to.
 *
 * Only properties no control writes appear in these queries. Type sizes,
 * paddings and gaps step down through their own responsive control defaults,
 * because Elementor writes those with no media query at a specificity this
 * file cannot beat.
 */
@media (max-width: 1024px) {
	.zcin-stack-tablet .zcin__cols {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 22px;
	}

	/**
	 * Stacked, the sidebar is its own grid row sized to its content, so the inner
	 * panel has no room to travel and sticky is released. Turning on Sticky When
	 * Stacked sticks the ROW instead, which does have somewhere to go: it travels
	 * inside .zcin__cols, past the grid below it.
	 */
	.zcin-stack-tablet .zcin__side-inner {
		position: static;
	}

	.zcin-stack-tablet.zcin-stickystack-yes .zcin__side {
		position: -webkit-sticky;
		position: sticky;
		top: var(--zcin-sticky-top, 24px);
		z-index: 3;
	}

	.zcin-stack-tablet .zcin__cats {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 6px;
	}

	.zcin-stack-tablet .zcin__cat {
		width: auto;
	}
}

@media (max-width: 767px) {
	.zcin-stack-mobile .zcin__cols {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 18px;
	}

	.zcin-stack-mobile .zcin__side-inner {
		position: static;
	}

	.zcin-stack-mobile.zcin-stickystack-yes .zcin__side {
		position: -webkit-sticky;
		position: sticky;
		top: var(--zcin-sticky-top, 24px);
		z-index: 3;
	}

	.zcin-stack-mobile .zcin__cats {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 6px;
	}

	.zcin-stack-mobile .zcin__cat {
		width: auto;
	}
}