/* Support Card configurator — Design swatches + Photo Orientation. Scoped to .rbp-sc. */
.rbp-sc { margin: 18px 0 22px; }
.rbp-sc-field { margin: 0 0 18px; }
.rbp-sc-label {
	display: block;
	font-weight: 700;
	font-size: 1rem;
	margin: 0 0 8px;
	color: #16263f;
}
.rbp-sc-label .required { color: #c0202a; text-decoration: none; border: 0; }

/* Design swatch grid */
.rbp-sc-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
@media (max-width: 600px) { .rbp-sc-grid { grid-template-columns: repeat(2, 1fr); } }

.rbp-sc-swatch {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	cursor: pointer;
	text-align: center;
}
.rbp-sc-swatch input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}
.rbp-sc-img {
	display: block;
	border: 2px solid #d7dbe2;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	aspect-ratio: 4 / 3;
	transition: border-color .12s, box-shadow .12s;
}
.rbp-sc-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rbp-sc-img-missing {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	font-size: .78rem;
	color: #16263f;
}
.rbp-sc-name { font-size: .82rem; line-height: 1.2; color: #333; }

.rbp-sc-swatch:hover .rbp-sc-img { border-color: #9aa6b8; }
.rbp-sc-swatch.is-selected .rbp-sc-img {
	border-color: #16263f;
	box-shadow: 0 0 0 2px #16263f;
}
.rbp-sc-swatch.is-selected .rbp-sc-name { font-weight: 700; color: #16263f; }
.rbp-sc-swatch input[type="radio"]:focus-visible + .rbp-sc-img { outline: 2px solid #c9a227; outline-offset: 2px; }

/* Photo orientation */
.rbp-sc-orient-opts { display: flex; gap: 10px; flex-wrap: wrap; }
.rbp-sc-orient-opt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 2px solid #d7dbe2;
	border-radius: 6px;
	cursor: pointer;
	margin: 0;
	font-weight: 600;
	color: #16263f;
	transition: border-color .12s, background .12s;
}
.rbp-sc-orient-opt:hover { border-color: #9aa6b8; }
.rbp-sc-orient-opt input[type="radio"] { accent-color: #16263f; margin: 0; }
.rbp-sc-orient-opt:has(input:checked) { border-color: #16263f; background: #f3f5f8; }
.rbp-sc-hint { display: block; margin-top: 8px; font-size: .8rem; color: #666; }