.rdd-download {
	max-width: 1000px;
	margin: 0 auto;
	font-size: 16px;
}

.rdd-detected {
	background: #f0f6fb;
	border: 1px solid #c5d9ed;
	border-radius: 6px;
	padding: 10px 16px;
	margin-bottom: 20px;
}

.rdd-buttons {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 20px;
	margin-bottom: 30px;
}

.rdd-os-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 28px 20px 24px;
	border: 2px solid #e0e0e0;
	border-radius: 10px;
	background: #fff;
	text-align: center;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rdd-os-card-recommended {
	border-color: #2271b1;
	box-shadow: 0 4px 16px rgba( 34, 113, 177, 0.18 );
}

.rdd-os-badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX( -50% );
	background: #2271b1;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 3px 12px;
	border-radius: 20px;
	white-space: nowrap;
}

.rdd-os-icon {
	display: inline-block;
	width: 48px;
	height: 48px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.rdd-os-icon-windows {
	background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232271b1"><path d="M3 5.5 10.5 4.4v7.1H3zM11.5 4.2 21 3v8.5h-9.5zM3 12.5h7.5v7.1L3 18.5zM11.5 12.5H21V21l-9.5-1.3z"/></svg>' );
}

.rdd-os-icon-mac {
	background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M16.7 12.9c0-2.4 2-3.6 2.1-3.6-1.1-1.7-2.9-1.9-3.5-1.9-1.5-.2-2.9.9-3.7.9-.8 0-1.9-.9-3.2-.8-1.6 0-3.1 1-4 2.4-1.7 2.9-.4 7.3 1.2 9.7.8 1.2 1.8 2.5 3 2.4 1.2 0 1.7-.8 3.1-.8s1.9.8 3.2.8c1.3 0 2.2-1.2 3-2.4.9-1.4 1.3-2.7 1.3-2.8-.1 0-2.6-1-2.5-3.9zM14.4 5.6c.7-.8 1.1-1.9 1-3-1 0-2.1.6-2.8 1.4-.6.7-1.2 1.9-1 3 1 .1 2.1-.6 2.8-1.4z"/></svg>' );
}

.rdd-os-icon-linux {
	background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M12 2c-1.9 0-3.2 1.6-3.2 3.6 0 1.2.4 2.3.9 3.2-.9.5-1.9 1.3-2.5 2.4-.9-.9-2.2-1-2.9-.4-.8.7-.4 2 .3 2.7-.5.3-1.1.8-1.4 1.4-.4.9.2 1.7 1 1.9-.2.6-.2 1.4.3 1.9.7.7 1.9.5 2.7.1.5 1 1.4 1.9 2.6 2.1-.3.5-.4 1.1-.1 1.6h4.6c.3-.5.2-1.1-.1-1.6 1.2-.2 2.1-1.1 2.6-2.1.8.4 2 .6 2.7-.1.5-.5.5-1.3.3-1.9.8-.2 1.4-1 1-1.9-.3-.6-.9-1.1-1.4-1.4.7-.7 1.1-2 .3-2.7-.7-.6-2-.5-2.9.4-.6-1.1-1.6-1.9-2.5-2.4.5-.9.9-2 .9-3.2C15.2 3.6 13.9 2 12 2z"/></svg>' );
}

.rdd-os-name {
	font-size: 20px;
	font-weight: 700;
}

.rdd-os-version {
	color: #666;
	font-size: 14px;
}

.rdd-button {
	display: inline-block;
	margin-top: 8px;
	padding: 12px 24px;
	background: #2271b1;
	color: #fff !important;
	font-weight: 600;
	border-radius: 6px;
	text-decoration: none;
	transition: background 0.2s ease;
}

.rdd-button:hover,
.rdd-button:focus {
	background: #135e96;
	color: #fff;
}

.rdd-button-disabled {
	background: #c3c4c7;
	cursor: not-allowed;
}

/* Instructions */
.rdd-instructions {
	margin-top: 10px;
}

.rdd-instructions-browser {
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	padding: 16px 24px;
	margin-bottom: 20px;
}

.rdd-instructions-browser h3 {
	margin-top: 0;
}

.rdd-instructions-all {
	border: 1px solid #dcdcde;
	border-radius: 8px;
	margin-bottom: 12px;
	background: #fff;
}

.rdd-instructions-all summary {
	cursor: pointer;
	font-weight: 600;
	padding: 14px 20px;
}

.rdd-instructions-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	gap: 16px;
	padding: 0 20px 20px;
}

.rdd-instructions-block {
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 12px 16px;
}

.rdd-instructions-block h4 {
	margin-top: 0;
}

.rdd-instructions-block ol {
	margin-bottom: 0;
	padding-left: 20px;
}

.rdd-instructions-block-current {
	border-color: #2271b1;
	background: #f0f6fb;
}