/**
 * Category extra description: line clamp + toggle (used with [motahda_category_extra_description]).
 */

.motahda-cat-extra {
	--motahda-cat-extra-lines: 4;
	margin-bottom: 1rem;
}

.motahda-cat-extra .motahda-cat-extra-inner {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--motahda-cat-extra-lines, 4);
	line-clamp: var(--motahda-cat-extra-lines, 4);
	word-break: break-word;
}

.motahda-cat-extra.is-expanded .motahda-cat-extra-inner {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	overflow: visible;
}

.motahda-cat-extra-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 12px;
	padding: 10px 18px;
	border: 1px solid var(--motahda-cat-extra-btn-border, #d1d5db);
	border-radius: 6px;
	background: var(--motahda-cat-extra-btn-bg, #fff);
	color: var(--motahda-cat-extra-btn-color, #111827);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.motahda-cat-extra-toggle:hover,
.motahda-cat-extra-toggle:focus-visible {
	border-color: var(--motahda-cat-extra-btn-border-hover, #9ca3af);
	background: var(--motahda-cat-extra-btn-bg-hover, #f9fafb);
	color: var(--motahda-cat-extra-btn-color-hover, #111827);
	outline: none;
}

.motahda-cat-extra-toggle:focus-visible {
	box-shadow: 0 0 0 2px var(--motahda-cat-extra-btn-focus, #3b82f6);
}

.motahda-cat-extra.is-expanded .motahda-cat-extra-more-label {
	display: none;
}

.motahda-cat-extra.is-expanded .motahda-cat-extra-less-label {
	display: inline;
}

.motahda-cat-extra:not(.is-expanded) .motahda-cat-extra-less-label {
	display: none;
}

.motahda-cat-extra.no-overflow .motahda-cat-extra-toggle {
	display: none;
}

.motahda-cat-extra.no-overflow .motahda-cat-extra-inner {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	overflow: visible;
}