:root{
	--rgcaa-accent: var(--wp--preset--color--primary, #578F31);
}

.rgcaa-group-heading{
	margin: 18px 0 8px;
	font-weight: 700;
	font-size: 16px;
	color: inherit;
	padding-left: 2px;
}

.rgcaa-hidden{
	display: none !important;
}

input[data-rgcaa="1"]{
	accent-color: var(--rgcaa-accent);
}

.rgcaa-option{
	padding: 10px 10px;
	border-radius: 12px;
	transition: background .12s ease;
}

.rgcaa-option:hover{
	background: linear-gradient(120deg, rgba(255,255,255,.10), rgba(255,255,255,0));
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}

/* Tooltip */
.rgcaa-tooltip-trigger{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-left: 8px;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,.18);
	font-size: 12px;
	line-height: 1;
	cursor: help;
	user-select: none;
	color: var(--rgcaa-accent);
	background: linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,.05));
	box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.rgcaa-tooltip-trigger:hover{
	border-color: rgba(0,0,0,.28);
	background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.08));
}

.rgcaa-tooltip-trigger::after{
	content: attr(data-tooltip);
	position: absolute;
	right: 0;
	top: 100%;
	transform: translateY(10px);
	min-width: 180px;
	max-width: calc(100vw - 48px);
	white-space: normal;
	background: rgba(20,20,20,.92);
	color: #fff;
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.35;
	opacity: 0;
	pointer-events: none;
	transition: opacity .12s ease, transform .12s ease;
	z-index: 9999;
}

@media (max-width: 520px){
	.rgcaa-tooltip-trigger::after{
		min-width: 160px;
		font-size: 12.5px;
	}
}

.rgcaa-tooltip-trigger:hover::after,
.rgcaa-tooltip-trigger:focus::after{
	opacity: 1;
	transform: translateY(6px);
}

/* Subtle sheen on label hover (Blocks) */
.rgcaa-option:hover .wc-block-components-checkbox__label{
	background-image: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
	background-size: 220% 100%;
	background-position: 0% 0%;
	animation: rgcaa-sheen 1.2s ease;
	border-radius: 10px;
	padding: 2px 6px;
}

@keyframes rgcaa-sheen{
	0%{background-position: 0% 0%}
	100%{background-position: 120% 0%}
}