/* Public Recommendations control (see SIS_Recommendations_Public_Renderer
   and assets/js/recommendations.js). The button reuses the shared
   .sis-action sizing/spacing rules from portfolio.css (border, min-height,
   focus ring) so it lines up with every other action button in the same
   row; the rules below only add what is specific to this control: the
   count/icon/label layout, active/inactive color, and interaction states.
   Dashicons has no separate outline/filled thumbs-up pair, so the active
   state is distinguished from inactive by more than color alone: a filled
   circular "chip" appears behind the icon (a shape change, not just a
   color change), in addition to the label text and aria-pressed value. */

.sis-recommend-container{display:inline-flex;vertical-align:middle;max-width:100%}

.sis-recommend-button{
	display:inline-flex;
	align-items:center;
	gap:6px;
	box-sizing:border-box;
	min-height:44px;
	padding:6px 12px;
	cursor:pointer;
	font:inherit;
	position:relative;
	max-width:100%;
}

.sis-recommend-button.sis-recommend-hidden-count{gap:4px}

.sis-recommend-count{font-weight:600;min-width:1ch;text-align:right;order:1}

.sis-recommend-icon{
	order:2;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:22px;
	height:22px;
	font-size:18px;
	line-height:1;
	border-radius:50%;
	color:var(--sis-rec-inactive-color,#6b7280);
	opacity:.85;
	transition:background-color .15s ease,color .15s ease,transform .15s ease;
}

.sis-recommend-label{order:3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:14em}

.sis-recommend-button.is-active .sis-recommend-icon{
	color:#fff;
	opacity:1;
	background-color:var(--sis-rec-active-color,#2c7a4b);
	transform:scale(1.06);
}

.sis-recommend-button.is-active .sis-recommend-label{font-weight:600}

.sis-recommend-button.is-loading{cursor:progress;opacity:.85}
.sis-recommend-button:disabled{pointer-events:none}

.sis-recommend-button.is-success{box-shadow:0 0 0 2px var(--sis-rec-active-color,#2c7a4b) inset}
.sis-recommend-button.is-error{box-shadow:0 0 0 2px #b91c1c inset}

.sis-recommend-button:focus-visible{outline:3px solid #2271b1;outline-offset:2px}

/* Admin-only "excluded from recommendations" indicator (Manage Images /
   Edit Image) -- never shown to public visitors, since excluded images
   never render the public control at all. */
.sis-recommend-excluded-badge,
.sis-recommend-button.is-excluded{
	color:#7f1d1d;
	background:#fef2f2;
	border-color:#b91c1c;
}

.sis-recommend-live-region.screen-reader-text{
	position:absolute!important;
	height:1px;width:1px;
	overflow:hidden;
	clip:rect(1px,1px,1px,1px);
	white-space:nowrap;
}

@media (prefers-reduced-motion:reduce){
	.sis-recommend-icon{transition:none}
	.sis-recommend-button.is-active .sis-recommend-icon{transform:none}
}

/* RTL: the button's internal flex order (count, icon, label) is intentional
   ("count to the left of the icon") and is a layout instruction, not a
   directional one, so it is left unflipped; only the container's own
   alignment against the surrounding action row follows the ambient
   direction via the shared .sis-actions rules in portfolio.css. */