// Integrations Page Styles
.splw-integrations-page {
	width: 100%;
	padding: 0;

	.splw-integrations-header {
		text-align: left;
		margin-bottom: 24px;

		.splw-integrations-title {
			font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
			font-weight: 500;
			font-size: 24px;
			color: #1e1e1e;
			margin: 0 0 10px 0;
		}

		.splw-integrations-subtitle {
			font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
			font-weight: 400;
			font-size: 14px;
			color: #4e4f52;
			line-height: 20px;
			margin: 0;
		}
	}

	.splw-integrations-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;

		@media (max-width: 1200px) {
			grid-template-columns: repeat(2, 1fr);
		}

		@media (max-width: 768px) {
			grid-template-columns: 1fr;
		}
	}

	.splw-integration-card {
		background: #ffffff;
		border: 1px solid #ddd;
		border-radius: 12px;
		padding: 24px;
		display: flex;
		flex-direction: column;
		gap: 12px;
		transition: all 0.2s ease-in-out;

		.splw-integration-card-content {
			display: flex;
			flex-direction: column;
			gap: 12px;
			width: 100%;
		}

		.splw-integration-card-header {
			display: flex;
			gap: 16px;
			align-items: flex-start;
		}

		.splw-integration-icon {
			width: 48px;
			height: 48px;
			border-radius: 6px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;

			.splw-integration-icon-inner {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 6px;
				overflow: hidden;

				svg {
					width: 100%;
					height: 100%;
				}
			}
		}

		.splw-integration-info {
			flex: 1;
			min-width: 0;
			display: flex;
			flex-direction: column;
			gap: 8px;

			.splw-integration-title-row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 20px;
				gap: 6px;

				.splw-integration-name-wrapper {
					display: flex;
					align-items: center;
					gap: 8px;

					.splw-integration-name {
						font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
						font-weight: 600;
						font-size: 16px;
						color: #1e1e1e;
						margin: 0;
						white-space: nowrap;
					}

					.splw-integration-upcoming-badge {
						display: inline-flex;
						align-items: center;
						padding: 2px 8px;
						color: #949494;
						background: #f8f8f8;
						font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
						font-weight: 500;
						font-size: 10px;
						border-radius: 3px;
						text-transform: uppercase;
						letter-spacing: 0.3px;
						border: 1px solid #ecedf0;
					}
				}
			}

			.splw-integration-description {
				font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
				font-weight: 400;
				font-size: 14px;
				color: #5d5d5d;
				line-height: 24px;
				margin: 0;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				min-height: 72px;
			}
		}

		.splw-integration-card-footer {
			display: flex;
			gap: 10px;
			padding-left: 65px;

			.splw-integration-action-btn {
				display: inline-flex;
				align-items: center;
				gap: 4px;
				padding: 4px 10px;
				background: #fbfcff;
				border: 1px solid #ecedf0;
				border-radius: 4px;
				font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
				font-weight: 500;
				font-size: 13px;
				color: #949494;
				text-decoration: none;
				text-transform: capitalize;
				transition: all 0.2s ease-in-out;
				white-space: nowrap;

				svg path {
					transition: all 0.2s ease-in-out;
				}

				&:hover {
					background: #F26C0D;
					color: #fff;

					svg path {
						stroke: #fff;
					}
				}
			}
		}
	}

	.splw-integration-card.splw-upcoming {
		.splw-integration-card-footer {
			pointer-events: none;
			opacity: .7;
		}
	}

	.splw-toggle-disabled {
		opacity: 0.6;
		pointer-events: none;
	}
}