/* Pro Tabs for Elementor — front-end styles */

.pro-tabs-wrapper {
	display: flex;
	flex-direction: column; /* default: horizontal nav bar on top, content below */
	width: 100%;
	box-sizing: border-box;
}

.pro-tabs-wrapper *,
.pro-tabs-wrapper *::before,
.pro-tabs-wrapper *::after {
	box-sizing: border-box;
}

/* ---------- Navigation ---------- */
.pro-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.pro-tabs-layout-vertical- .pro-tabs-wrapper {
	flex-direction: row; /* nav sits beside content, not above it */
}

.pro-tabs-layout-horizontal- .pro-tabs-wrapper {
	flex-direction: column;
}

.pro-tabs-layout-vertical- .pro-tabs-nav {
	flex-direction: column;
	flex: 0 0 25%;
	max-width: 100%;
}

.pro-tabs-layout-horizontal- .pro-tabs-nav {
	flex-direction: row;
}

.pro-tabs-nav-item {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: #f5f5f5;
	color: #4a4a4a;
	padding: 12px 20px;
	font-weight: 500;
	border-radius: 50px;
	transition: background-color .2s ease, color .2s ease;
	user-select: none;
	outline: none;
	gap: 8px;
}

.pro-tabs-nav-item:hover {
	opacity: 0.85;
}

.pro-tabs-nav-item.pro-tabs-active {
	background: #6236ff;
	color: #fff;
}

.pro-tabs-nav-icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.pro-tabs-nav-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Icon position variants */
.pro-tabs-icon-position-top .pro-tabs-nav-item {
	flex-direction: column;
}

.pro-tabs-icon-position-right .pro-tabs-nav-item {
	flex-direction: row-reverse;
}

/* ---------- Content ---------- */
.pro-tabs-content-wrapper {
	flex: 1 1 auto;
	min-width: 0;
}

.pro-tabs-layout-vertical- .pro-tabs-content-wrapper {
	flex: 1 1 75%;
}

.pro-tabs-content {
	display: none;
	background: #ffffff;
	color: #4a4a4a;
	padding: 20px;
	overflow-wrap: break-word;
}

.pro-tabs-content.pro-tabs-active {
	display: block;
}

.pro-tabs-content > *:last-child {
	margin-bottom: 0;
}

.pro-tabs-content img {
	max-width: 100%;
	height: auto;
}

/* ---------- Accordion mode ----------
 * pro-tabs.js adds the "pro-tabs-accordion-mode" class to the wrapper
 * once the viewport crosses the breakpoint chosen in "Switch to
 * Accordion On", and physically moves each content panel so it sits
 * directly beneath its own header — a true accordion, not a fake one.
 */
.pro-tabs-wrapper.pro-tabs-accordion-mode {
	flex-direction: column;
}

.pro-tabs-wrapper.pro-tabs-accordion-mode .pro-tabs-nav {
	flex-direction: column;
	width: 100%;
}

.pro-tabs-wrapper.pro-tabs-accordion-mode .pro-tabs-nav-item {
	width: 100%;
	justify-content: space-between;
}

.pro-tabs-wrapper.pro-tabs-accordion-mode .pro-tabs-content-wrapper {
	display: contents;
}

.pro-tabs-wrapper.pro-tabs-accordion-mode .pro-tabs-content {
	width: 100%;
}

/* Little expand/collapse indicator, accordion mode only */
.pro-tabs-wrapper.pro-tabs-accordion-mode .pro-tabs-nav-item::after {
	content: '+';
	font-weight: 400;
	margin-left: 10px;
	line-height: 1;
	flex-shrink: 0;
}

.pro-tabs-wrapper.pro-tabs-accordion-mode .pro-tabs-nav-item.pro-tabs-active::after {
	content: '\2212'; /* minus sign */
}

/* ---------- General small-screen refinements ---------- */
@media (max-width: 1024px) {
	.pro-tabs-wrapper {
		flex-wrap: wrap;
	}
}

@media (max-width: 767px) {
	.pro-tabs-nav-item {
		padding: 10px 14px;
		font-size: 14px;
	}
}