.rzpwc-connection-panel {
	max-width: 860px;
	margin: 0 0 16px;
}

.rzpwc-connection-note {
	color: #50575e;
	margin: 0 0 12px;
	font-size: 13px;
}

.rzpwc-connection-modes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

@media ( max-width: 600px ) {
	.rzpwc-connection-modes {
		grid-template-columns: 1fr;
	}
}

.rzpwc-mode {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-left-width: 4px;
	border-radius: 4px;
	padding: 12px 16px;
}

.rzpwc-mode-live {
	border-left-color: #2271b1;
}

.rzpwc-mode-test {
	border-left-color: #dba617;
}

.rzpwc-mode-in-use {
	box-shadow: 0 0 0 1px #787c82;
}

.rzpwc-mode-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 2px;
}

.rzpwc-mode-name {
	font-size: 14px;
	font-weight: 600;
}

.rzpwc-in-use-badge {
	background: #f0f6fc;
	color: #2271b1;
	font-size: 12px;
	line-height: 1.4;
	padding: 2px 10px;
	border-radius: 12px;
	white-space: nowrap;
}

.rzpwc-mode-desc {
	font-size: 12.5px;
	color: #646970;
	margin: 0 0 12px;
}

.rzpwc-status {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 500;
	color: #50575e;
}

.rzpwc-status-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.rzpwc-status-connected .rzpwc-status-dot {
	background: #00a32a;
}

.rzpwc-status-connected .rzpwc-status-label {
	color: #00a32a;
}

.rzpwc-status-disconnected .rzpwc-status-dot {
	background: #d63638;
}

.rzpwc-key {
	background: #f6f7f7;
	border-radius: 3px;
	padding: 1px 8px;
	font-size: 12px;
	color: #50575e;
	font-weight: 400;
}

.rzpwc-token-info {
	margin: 0 0 10px;
	font-size: 12px;
	color: #646970;
}

.rzpwc-token-expired {
	color: #dba617;
	font-weight: 500;
}

.rzpwc-disconnect {
	color: #b32d2e;
	font-size: 13px;
	text-decoration: none;
	cursor: pointer;
}

.rzpwc-disconnect:hover,
.rzpwc-disconnect:focus {
	color: #b32d2e;
	text-decoration: underline;
}

.rzpwc-status-legacy .rzpwc-status-dot {
	background: #dba617;
}

.rzpwc-status-legacy .rzpwc-status-label {
	color: #dba617;
}

.rzpwc-legacy-note {
	margin: 0 0 10px;
	font-size: 12px;
	color: #8a5a06;
}

/* Action rows: exact cross-axis centering, viewport independent. */
.rzpwc-actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

.rzpwc-connect.is-busy,
.rzpwc-disconnect.is-busy {
	opacity: 0.5;
	pointer-events: none;
}