/**
 * Liste déroulante illustrée des chats disponibles (formulaire de pré-adoption).
 * Suit les couleurs du thème (clair / sombre) via les tokens --wp--preset--color--*.
 */

.cc-catpick {
	--cc-cp-bg: var( --wp--preset--color--base, #fff );
	--cc-cp-fg: var( --wp--preset--color--contrast, #1a1a1a );
	--cc-cp-accent: var( --wp--preset--color--primary, #2f6f4f );
	--cc-cp-accent-fg: var( --cc-btn-fg, #fff );
	--cc-cp-border: color-mix( in srgb, var( --cc-cp-fg ) 22%, transparent );
	--cc-cp-hover: color-mix( in srgb, var( --cc-cp-fg ) 8%, transparent );
	--cc-cp-muted: color-mix( in srgb, var( --cc-cp-fg ) 60%, transparent );
	position: relative;
	max-width: 32rem;
}

.cc-catpick__toggle {
	display: flex;
	align-items: center;
	gap: .6rem;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: .4rem .8rem;
	background: var( --cc-cp-bg );
	color: var( --cc-cp-fg );
	border: 1px solid var( --cc-cp-border );
	border-radius: var( --cc-radius, 10px );
	font: inherit;
	font-size: 1rem;
	text-align: left;
	cursor: pointer;
}
.cc-catpick__toggle:focus-visible {
	outline: 2px solid var( --cc-cp-accent );
	outline-offset: 2px;
}
.cc-catpick.is-open .cc-catpick__toggle {
	border-color: var( --cc-cp-accent );
}

.cc-catpick__thumb {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	background: var( --cc-cp-hover );
}
.cc-catpick__thumb--empty {
	display: inline-block;
	background: var( --cc-cp-hover ) url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M12 10c-3 0-6 2.6-6 5.4C6 17 7.3 18 9 18h6c1.7 0 3-1 3-2.6C18 12.6 15 10 12 10zM6.5 8.5A1.8 1.8 0 1 0 6.5 5a1.8 1.8 0 0 0 0 3.5zm11 0A1.8 1.8 0 1 0 17.5 5a1.8 1.8 0 0 0 0 3.5zM9.7 6.4A1.6 1.6 0 1 0 9.7 3.2a1.6 1.6 0 0 0 0 3.2zm4.6 0a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2z'/%3E%3C/svg%3E" ) center / 18px no-repeat;
}

.cc-catpick__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Sélection multiple : le bouton peut afficher plusieurs noms sur deux lignes. */
.cc-catpick--multi .cc-catpick__toggle .cc-catpick__name {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}
.cc-catpick__name--placeholder {
	color: var( --cc-cp-muted );
}

/* Case à cocher devant chaque option (mode multi). */
.cc-catpick__check {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 1px solid var( --cc-cp-border );
	border-radius: 5px;
	background: var( --cc-cp-bg );
}
.cc-catpick__option[aria-selected="true"] .cc-catpick__check {
	border-color: var( --cc-cp-accent-fg );
	background: var( --cc-cp-accent-fg ) url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23222' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4'/%3E%3C/svg%3E" ) center / 13px no-repeat;
}

.cc-catpick__done {
	display: block;
	width: 100%;
	margin: 0;
	padding: .55rem .8rem;
	border: 0;
	border-top: 1px solid var( --cc-cp-border );
	background: var( --cc-cp-hover );
	color: var( --cc-cp-fg );
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.cc-catpick__done:hover,
.cc-catpick__done:focus-visible {
	background: var( --cc-cp-accent );
	color: var( --cc-cp-accent-fg );
}

.cc-catpick__caret {
	flex: 0 0 auto;
	width: 0;
	height: 0;
	margin-left: .3rem;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	opacity: .55;
}
.cc-catpick.is-open .cc-catpick__caret {
	transform: rotate( 180deg );
}

.cc-catpick__panel {
	position: absolute;
	z-index: 40;
	left: 0;
	right: 0;
	top: calc( 100% + 4px );
	background: var( --cc-cp-bg );
	color: var( --cc-cp-fg );
	border: 1px solid var( --cc-cp-accent );
	border-radius: var( --cc-radius, 10px );
	box-shadow: 0 12px 30px rgba( 0, 0, 0, .18 );
	overflow: hidden;
}

.cc-catpick__list {
	margin: 0;
	padding: .25rem;
	list-style: none;
	max-height: 320px;
	overflow-y: auto;
}

.cc-catpick__option {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .35rem .5rem;
	border-radius: 8px;
	cursor: pointer;
	line-height: 1.3;
	color: var( --cc-cp-fg );
}
.cc-catpick__option:hover,
.cc-catpick__option.is-active {
	background: var( --cc-cp-hover );
}
.cc-catpick__option[aria-selected="true"] {
	background: var( --cc-cp-accent );
	color: var( --cc-cp-accent-fg );
}
.cc-catpick__option--none {
	color: var( --cc-cp-muted );
	font-style: italic;
}
.cc-catpick__option--none .cc-catpick__thumb {
	visibility: hidden;
}

@media ( prefers-reduced-motion: no-preference ) {
	.cc-catpick__caret { transition: transform .15s ease; }
}