/* Connect API — base front-end styles.
   Intentionally minimal/neutral so it doesn't fight your theme;
   override in your child theme as needed. */

.capi-services { margin: 2em 0; }
.capi-services-label {
	margin-bottom: 1em;
	padding-bottom: 0.4em;
	border-bottom: 2px solid #3b6cd4;
	display: inline-block;
	font-size: 1.3em;
}
.capi-services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5em;
}
.capi-service-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e2e5ea;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(20, 25, 40, 0.05);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.capi-service-card:hover {
	box-shadow: 0 6px 18px rgba(20, 25, 40, 0.1);
	transform: translateY(-2px);
}
.capi-service-image img { width: 100%; height: 160px; object-fit: cover; display: block; }
.capi-service-body { padding: 1.2em; display: flex; flex-direction: column; flex-grow: 1; }
.capi-service-body h4 { margin: 0 0 0.5em; font-size: 1.05em; }
.capi-service-body p { margin: 0 0 0.8em; color: #5a6270; font-size: 0.92em; flex-grow: 1; }
.capi-service-price { font-weight: 600; color: #2a2f3a !important; }
.capi-paused-notice { padding: 0.8em 1em; background: #fff8e5; border: 1px solid #f0d78c; border-radius: 6px; }
.capi-button {
	align-self: flex-start;
	padding: 0.55em 1.2em;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid #3b6cd4;
	border-radius: 6px;
	color: #3b6cd4;
	background: #fff;
	transition: background 0.15s ease, color 0.15s ease;
}
.capi-button:hover { background: #3b6cd4; color: #fff; }