/* ==========================================================================
   Mobile Accordion & Icon Styles
   ========================================================================== */

/* 1. Desktop Defaults (1025px and up) */
@media (min-width: 1025px) {
	#integrations-categories-title {
		cursor: default;
	}
}

/* 2. Mobile & Tablet Setup (1024px and below) */
@media (max-width: 1024px) {
	/* Make the title area look and act like a clickable button */
	#integrations-categories-title {
		cursor: pointer;
		position: relative;
		user-select: none;
		padding-right: 30px;
		margin-bottom: 0 !important;
		background-color: #fefefe;
		padding: 14px;
		border: 1px solid #ececec!important;
        transition:unset!important;
	}

	/* Create the Plus/Minus structure using pseudo-elements */
	#integrations-categories-title::before,
	#integrations-categories-title::after {
		content: "";
		position: absolute;
		top: 50%;
		background-color: #54595f; /* Change to your exact text color if needed */
		transition:
			transform 0.3s ease-in-out,
			opacity 0.2s ease-in-out;
		transform-origin: center;
	}

	/* Horizontal line */
	#integrations-categories-title::before {
		width: 14px;
		height: 2px;
		margin-top: -1px;
        right: 10px;
	}

	/* Vertical line (makes it a plus) */
	#integrations-categories-title::after {
		width: 2px;
		height: 14px;
		margin-top: -7px;
		right: 16px;
	}

	/* When active: rotate the vertical line away to leave just a minus sign */
	#integrations-categories-title.is-active::after {
		transform: rotate(90deg);
		opacity: 0;
	}

	/* 3. Accordion Core Mechanics */
	#integrations-mobile-categories-menu {
		display: grid !important; /* Overrides Elementor's default hidden classes gracefully */
		grid-template-rows: 0fr; /* Key trick for smooth height animations */
		transition: grid-template-rows 0.35s ease-in-out;
		overflow: hidden;
		border: unset !important;
		padding: unset !important;
	}

	/* Target the direct inner child to let grid measure height properly */
	#integrations-mobile-categories-menu > .e-filter {
		min-height: 0;
		visibility: hidden;
		transition: visibility 0.35s ease-in-out;
		display: block;
		padding-left: 15px;
		padding-right: 15px;
        padding-top: 10px;
	}

	/* Open State */
	#integrations-mobile-categories-menu.is-open {
		grid-template-rows: 1fr;
	}

	#integrations-mobile-categories-menu.is-open > .e-filter {
		visibility: visible;
	}
}