/**
 * Pet Actions Block Styles
 *
 * Segmented button group: shared outer border, internal dividers,
 * rounded ends on first/last children.
 *
 * Mobile-first: icon-only on small screens, label display
 * controlled by attribute on desktop (min-width: 600px).
 */

/* === Layout — segmented group === */
.pet-actions {
	--_radius: var(--wp--custom--border-radius, 8px);
	--_inner-radius: max(calc(var(--_radius) - 1px), 0px);
	--_border-color: var(--wp--preset--color--border, #e0e0e0);
	display: flex;
	border: 1px solid var(--_border-color);
	border-radius: var(--_radius);
	background: var(--wp--preset--color--base-2, #f9f9f9);
}

/* Internal dividers */
.pet-actions > * + * {
	border-left: 1px solid var(--_border-color);
}

/* Round the first child's left edges (inline mode only) */
.pet-actions:not(.pet-actions--overlay) > :first-child,
.pet-actions:not(.pet-actions--overlay) > :first-child > .pet-actions__button {
	border-top-left-radius: var(--_inner-radius);
	border-bottom-left-radius: var(--_inner-radius);
}

/* Round the last child's right edges (inline mode only) */
.pet-actions:not(.pet-actions--overlay) > :last-child,
.pet-actions:not(.pet-actions--overlay) > :last-child > .pet-actions__button {
	border-top-right-radius: var(--_inner-radius);
	border-bottom-right-radius: var(--_inner-radius);
}

/* === Placeholder (editor) === */
.pet-actions--placeholder {
	min-height: 48px;
	border: none;
	background: none;
}

.pet-actions__placeholder {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: #f0f0f0;
	border: 1px dashed #ccc;
	border-radius: 4px;
	color: #666;
	width: 100%;
}

.pet-actions__placeholder p {
	margin: 0;
	font-weight: 600;
	font-size: 0.875rem;
}

.pet-actions__placeholder small {
	color: #888;
	font-size: 0.75rem;
}

/* === Buttons — shared === */
.pet-actions__button {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.625rem;
	font-size: var(--wp--preset--font-size--small, 0.8125rem);
	font-weight: 500;
	font-family: inherit;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast, #1e1e1e);
	background: transparent;
	border: none;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.pet-actions__button:hover {
	background: var(--wp--preset--color--base, #fff);
}

.pet-actions__button:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary, #007cba);
	outline-offset: -3px;
	z-index: 1;
}

.pet-actions__button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.pet-actions__button:disabled:hover {
	background: transparent;
}

.pet-actions__button svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* === Mobile: always icon-only === */
.pet-actions__label {
	display: none;
}

/* === Desktop: label display controlled by attribute === */
@media (min-width: 600px) {
	.pet-actions__button {
		padding: 0.625rem 1rem;
	}

	/* icon-and-text (default): show labels */
	.pet-actions--display-icon-and-text .pet-actions__label {
		display: inline;
	}

	/* icon-only: labels stay hidden, compact padding */
	.pet-actions--display-icon-only .pet-actions__button {
		padding: 0.625rem;
		flex: 0 0 auto;
	}

	/* text-only: hide icons, show labels */
	.pet-actions--display-text-only .pet-actions__label {
		display: inline;
	}

	.pet-actions--display-text-only .pet-actions__button svg {
		display: none;
	}
}

/* === Favorite — active state === */
.pet-actions__button--favorite.is-active {
	color: #ef4444;
	background: #fef2f2;
}

.pet-actions__button--favorite.is-active:hover {
	background: #fee2e2;
}

/* Favorite heart pulse — triggers when toggled to active */
.pet-actions__button--favorite.is-active svg {
	animation: pet-actions-heart-pulse 0.35s ease-out;
}

@keyframes pet-actions-heart-pulse {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.3); }
	100% { transform: scale(1); }
}

/* === Compare — active state === */
.pet-actions__button--compare.is-active {
	color: var(--wp--preset--color--primary, #2271b1);
	background: #eff6ff;
}

.pet-actions__button--compare.is-active:hover {
	background: #dbeafe;
}

/* === Share wrapper (positions dropdown) === */
.pet-actions__share-wrapper {
	position: relative;
	flex: 1;
	display: flex;
}

.pet-actions__share-wrapper .pet-actions__button {
	width: 100%;
}

/* === Share dropdown === */
.pet-actions__share-dropdown {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	min-width: 200px;
	padding: 4px;
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--border, #e0e0e0);
	border-radius: var(--wp--custom--border-radius, 8px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	z-index: 100;
}

/* Dropdown animation — fade + slide in from below */
.pet-actions__share-dropdown:not([hidden]) {
	animation: pet-actions-dropdown-in 0.15s ease-out;
}

.pet-actions__share-dropdown[hidden] {
	display: none;
}

@keyframes pet-actions-dropdown-in {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

/* Dropdown arrow */
.pet-actions__share-dropdown::after {
	content: "";
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 10px;
	height: 10px;
	background: var(--wp--preset--color--base, #fff);
	border-right: 1px solid var(--wp--preset--color--border, #e0e0e0);
	border-bottom: 1px solid var(--wp--preset--color--border, #e0e0e0);
}

/* Share items (buttons and links) */
.pet-actions__share-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.5rem 0.75rem;
	font-size: var(--wp--preset--font-size--small, 0.8125rem);
	font-weight: 400;
	font-family: inherit;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast, #1e1e1e);
	background: transparent;
	border: none;
	border-radius: calc(var(--wp--custom--border-radius, 8px) - 4px);
	cursor: pointer;
	text-decoration: none;
	text-align: left;
}

.pet-actions__share-item:hover {
	background: var(--wp--preset--color--base-2, #f0f0f0);
}

.pet-actions__share-item:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #007cba);
	outline-offset: -2px;
}

.pet-actions__share-item svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	opacity: 0.7;
}

.pet-actions__share-item[hidden] {
	display: none;
}

/* Social brand colors on hover */
.pet-actions__share-item--facebook:hover svg {
	color: #1877f2;
	opacity: 1;
}

.pet-actions__share-item--x:hover svg {
	color: #000;
	opacity: 1;
}

.pet-actions__share-item--email:hover svg {
	color: #666;
	opacity: 1;
}

/* Copy — success state */
.pet-actions__share-item--copy.is-copied {
	color: var(--wp--preset--color--vivid-green-cyan, #00a32a);
}

.pet-actions__share-item--copy.is-copied svg {
	color: currentColor;
	opacity: 1;
}

/* Divider */
.pet-actions__share-divider {
	margin: 4px 0.75rem;
	border: none;
	border-top: 1px solid var(--wp--preset--color--border, #e0e0e0);
}

/* =====================================================
 * OVERLAY MODE — floating circular buttons on the gallery image.
 * Positioned absolute within the gallery column (which needs
 * position: relative — set in pet-details/style.css).
 * ===================================================== */
.pet-actions--overlay {
	position: absolute;
	top: calc(var(--pet-actions-top-offset, 0px) + var(--wp--preset--spacing--20, 0.5rem));
	right: var(--wp--preset--spacing--20, 0.5rem);
	z-index: 2;
	flex-direction: column;
	gap: 0.5rem;
	width: auto;
	/* Reset segmented group styling */
	border: none;
	border-radius: 0;
	background: none;
}

/* Remove internal dividers */
.pet-actions--overlay > * + * {
	border-left: none;
}

/* Circular floating buttons — dark translucent with white icons */
.pet-actions--overlay .pet-actions__button {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	color: #fff;
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.pet-actions--overlay .pet-actions__button:hover {
	background: rgba(0, 0, 0, 0.6);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	transform: scale(1.08);
}

.pet-actions--overlay .pet-actions__button:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* Always icon-only in overlay mode */
.pet-actions--overlay .pet-actions__label {
	display: none !important;
}

/* Overlay button icons — slightly smaller for the compact style */
.pet-actions--overlay .pet-actions__button svg {
	width: 18px;
	height: 18px;
}

/* Favorite active — red translucent */
.pet-actions--overlay .pet-actions__button--favorite.is-active {
	color: #fff;
	background: rgba(239, 68, 68, 0.85);
}

.pet-actions--overlay .pet-actions__button--favorite.is-active:hover {
	background: rgba(239, 68, 68, 0.95);
}

/* Compare active — blue translucent */
.pet-actions--overlay .pet-actions__button--compare.is-active {
	color: #fff;
	background: rgba(34, 113, 177, 0.85);
}

.pet-actions--overlay .pet-actions__button--compare.is-active:hover {
	background: rgba(34, 113, 177, 0.95);
}

/* Share wrapper in overlay — no flex stretch */
.pet-actions--overlay .pet-actions__share-wrapper {
	flex: 0 0 auto;
}

/* Share dropdown repositions to the left of the button in overlay */
.pet-actions--overlay .pet-actions__share-dropdown {
	bottom: auto;
	top: 0;
	right: calc(100% + 8px);
	left: auto;
	transform: none;
}

/* Dropdown animation — slide from right instead of below */
.pet-actions--overlay .pet-actions__share-dropdown:not([hidden]) {
	animation: pet-actions-dropdown-in-left 0.15s ease-out;
}

/* Arrow points right instead of down */
.pet-actions--overlay .pet-actions__share-dropdown::after {
	bottom: auto;
	top: 12px;
	left: auto;
	right: -6px;
	transform: rotate(-45deg);
}

@keyframes pet-actions-dropdown-in-left {
	from {
		opacity: 0;
		transform: translateX(4px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
	.pet-actions__button {
		transition: none;
	}

	.pet-actions--overlay .pet-actions__button:hover {
		transform: none;
	}

	.pet-actions__button--favorite.is-active svg,
	.pet-actions__share-dropdown:not([hidden]) {
		animation: none;
	}
}