/* ==========================================================================
   B2Wise: "Four Horizons, One Model"
   Layout, colours and type are set in Elementor. This file only covers what
   Elementor controls cannot express: the tab states, the traced line, the
   CTA arrow, and how the panels share one slot once the script is running.

   Elementor CSS classes used (Advanced → CSS Classes):
     b2w-horizons   section container
     b2w-hz-stage   full-width wrapper that gets pinned while scrolling
     b2w-hz-card    the white card (widens while pinned)
     b2w-hz-tab     each numbered tab (button widget), paired with panels by order
     b2w-hz-panels  wrapper around the panels
     b2w-hz-panel   one panel per tab
     b2w-hz-cta     the "Explore …" button inside each panel
   ========================================================================== */

/* ---------- Tabs ---------- */
.b2w-horizons .b2w-hz-tab .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 10px;
	background-color: #eef0ee;
	box-shadow: none;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 1;
	letter-spacing: -0.8px;
	color: #9a9c9a;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.b2w-horizons .b2w-hz-tab .elementor-button:hover,
.b2w-horizons .b2w-hz-tab .elementor-button:focus {
	background-color: #e4e7e3;
	color: #9a9c9a;
	transform: translateY(-1px);
}

.b2w-horizons .b2w-hz-tab.is-active .elementor-button,
.b2w-horizons .b2w-hz-tab.is-active .elementor-button:hover,
.b2w-horizons .b2w-hz-tab.is-active .elementor-button:focus {
	background-color: #ffffff;
	border-color: #00dd51;
	color: #004f09;
	box-shadow: 0 4px 14px rgba(0, 221, 81, 0.16);
}

.b2w-horizons .b2w-hz-tab .elementor-button:focus-visible {
	outline: 2px solid #00dd51;
	outline-offset: 3px;
}

/* ---------- CTA arrow (same arrow as the source design) ---------- */
.b2w-horizons .b2w-hz-cta .elementor-button-text::after {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 6px;
	vertical-align: -2px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Panels ---------- */
.b2w-hz-panels {
	position: relative;
}

/* Once the script runs, all panels share one grid cell and only the active
   one is visible. Without the script (and in the Elementor editor) they stay
   stacked, so every panel remains readable and editable. */
.b2w-hz-ready .b2w-hz-panels.e-con {
	display: grid;
}

.b2w-hz-ready .b2w-hz-panels > .b2w-hz-panel {
	grid-area: 1 / 1;
}

.b2w-hz-ready .b2w-hz-panels > .b2w-hz-panel:not(:first-child) {
	visibility: hidden;
	opacity: 0;
}

/* ---------- Traced line ---------- */
.b2w-hz-trace {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 3;
	overflow: visible;
	pointer-events: none;
}

.b2w-hz-trace path {
	fill: none;
	stroke: #00dd51;
	stroke-width: 2;
	stroke-linecap: round;
	filter: drop-shadow(0 0 4px rgba(0, 221, 81, 0.65));
}