/* Base structural styles - visual styling is controlled via Elementor's Style tab */

.edb-dropdown-wrap {
	width: 100%;
}

.edb-button-wrap {
	display: flex;
}

.edb-toggle-button {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	border: none;
	background: #3a3a3a;
	color: #ffffff;
	padding: 12px 20px;
	border-radius: 4px;
	font-size: 16px;
	line-height: 1.2;
}

.edb-toggle-button .edb-button-text {
	display: inline-block;
}

.edb-icon {
	display: inline-flex;
	align-items: center;
	margin: 0 8px;
}

.edb-icon svg,
.edb-icon i {
	width: 16px;
	height: 16px;
	font-size: 16px;
	transition: transform 0.3s ease;
}

.edb-toggle-button.edb-icon-rotated .edb-icon svg,
.edb-toggle-button.edb-icon-rotated .edb-icon i {
	transform: rotate(180deg);
}

.edb-dropdown-content {
	width: 100%;
	box-sizing: border-box;
	padding: 15px;
	margin-top: 10px;
}

/* Collapsed state: kept in normal layout flow (real width is always
   measurable by any plugin JS that runs on page load) but visually
   hidden so it doesn't show content or take up visible space. We avoid
   classic display:none (breaks width measurement for grid/masonry JS)
   AND avoid max-height:0 (can trip up image lazy-load libraries that
   check for zero-height/zero-intersection elements). Instead we shift
   it off-screen with absolute positioning while it's collapsed, which
   keeps it fully "visible" and measurable to JS, just not on screen. */
.edb-dropdown-wrap {
	position: relative;
}

.edb-dropdown-content.edb-content-collapsed {
	position: absolute;
	top: 0;
	left: -99999px;
	visibility: visible;
	pointer-events: none;
}

.edb-dropdown-content.edb-content-visible {
	position: relative;
	left: auto;
	visibility: visible;
	pointer-events: auto;
}