/*!
 * Evolve Strategy Tabs for Elementor
 * Author: Jamshadul Rafi — https://www.jamshadulrafi.com
 *
 * Accent colours arrive as inline custom properties on each pill/panel
 * (--est-acc, --est-acc-soft, --est-acc-line, --est-acc-mark) written by
 * render(), so they update live in the editor without relying on Elementor
 * control-selector custom-property chaining.
 */

.est-wrap {
	--est-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
	--est-acc: #FF5C1A;
	--est-acc-soft: rgba(255, 92, 26, 0.12);
	--est-acc-line: rgba(255, 92, 26, 0.30);
	--est-acc-mark: rgba(255, 92, 26, 0.15);
	position: relative;
	box-sizing: border-box;
}

.est-wrap *,
.est-wrap *::before,
.est-wrap *::after {
	box-sizing: border-box;
}

/* ── Section header ─────────────────────────────────────────────── */

.est-header {
	margin-bottom: 40px;
}

.est-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-family: var(--est-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #FF5C1A;
}

.est-eyebrow.has-rule::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 1px;
	background-color: currentColor;
}

.est-heading {
	margin: 0 0 14px;
	font-size: clamp(26px, 3vw, 42px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #EDF0F7;
}

.est-lede {
	margin: 0;
	max-width: 66ch;
	font-size: 16px;
	line-height: 1.75;
	color: rgba(237, 240, 247, 0.68);
}

.est-lede strong {
	color: #EDF0F7;
}

/* ── Layout ─────────────────────────────────────────────────────── */

.est-layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 48px;
}

.est-content {
	flex: 1 1 420px;
	min-width: 0;
}

.est-media {
	flex: 0 0 480px;
	max-width: 480px;
	min-width: 0;
}

.est-media-inner {
	position: relative;
	background-color: #111928;
	border: 1px solid rgba(237, 240, 247, 0.14);
	border-radius: 16px;
	padding: 28px;
	text-align: center;
}

.est-media-sticky .est-media-inner {
	position: sticky;
	top: 88px;
}

.est-media-img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 8px;
	filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.4));
	transition: transform 0.3s ease;
}

.est-media-inner:hover .est-media-img {
	transform: scale(1.01);
}

.est-media-caption {
	margin: 14px 0 0;
	font-family: var(--est-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(237, 240, 247, 0.40);
}

/* ── Pills ──────────────────────────────────────────────────────── */

.est-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 20px;
	padding: 0;
}

.est-pill {
	flex: 0 0 auto;
	margin: 0;
	padding: 7px 13px;
	font-family: var(--est-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(237, 240, 247, 0.40);
	background-color: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(237, 240, 247, 0.14);
	border-radius: 100px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.est-pill:hover {
	color: #EDF0F7;
	background-color: rgba(255, 255, 255, 0.07);
}

.est-pill:focus-visible {
	outline: 2px solid var(--est-acc);
	outline-offset: 2px;
}

.est-pill.is-active {
	color: #EDF0F7;
	background-color: rgba(255, 255, 255, 0.09);
	border-color: rgba(237, 240, 247, 0.28);
}

/*
 * Accent mode. !important is required here: Elementor expands {{WRAPPER}} to a
 * 3-class selector, so the plugin's own "normal state" colour controls would
 * otherwise out-specify these active-state rules. The matching Elementor
 * active-state controls are hidden while accent mode is on, so nothing the
 * user can set is being silently defeated.
 */
.est-pill-accent.is-active {
	color: var(--est-acc) !important;
	background-color: var(--est-acc-soft) !important;
	border-color: var(--est-acc-line) !important;
}

.est-pill.is-featured {
	color: var(--est-acc);
}

/* ── Panels ─────────────────────────────────────────────────────── */

.est-panels {
	position: relative;
}

.est-panel {
	display: none;
	background-color: #111928;
	border: 1px solid rgba(237, 240, 247, 0.14);
	border-radius: 12px;
	padding: 36px 36px 40px;
}

.est-panel.is-active {
	display: block;
}

.est-panel[hidden] {
	display: none;
}

.est-anim-fade-up .est-panel.is-active {
	animation: estFadeUp 0.28s ease forwards;
}

.est-anim-fade .est-panel.is-active {
	animation: estFade 0.28s ease forwards;
}

.est-anim-slide .est-panel.is-active {
	animation: estSlide 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes estFadeUp {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes estFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes estSlide {
	from { opacity: 0; transform: translateX(14px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* ── Panel contents ─────────────────────────────────────────────── */

.est-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	font-family: var(--est-mono);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.6;
	color: var(--est-acc);
	background-color: var(--est-acc-soft);
	border: 1px solid var(--est-acc-line);
	border-radius: 100px;
}

.est-title {
	margin: 12px 0 12px;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.18;
	color: #EDF0F7;
}

.est-desc {
	font-size: 14.5px;
	line-height: 1.76;
	color: rgba(237, 240, 247, 0.68);
}

.est-desc strong,
.est-desc b {
	color: #EDF0F7;
	font-weight: 600;
}

.est-focus-label {
	display: block;
	margin: 24px 0 12px;
	font-family: var(--est-mono);
	font-size: 9.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(237, 240, 247, 0.40);
}

.est-focus-items {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.est-focus-item {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 13.5px;
	line-height: 1.65;
	color: rgba(237, 240, 247, 0.68);
}

.est-focus-dot {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	font-size: 9px;
	line-height: 1;
	border-radius: 50%;
	color: var(--est-acc);
	background-color: var(--est-acc-mark);
}

.est-focus-item strong {
	color: #EDF0F7;
	font-weight: 600;
}

.est-focus-text {
	min-width: 0;
}

/* ── Panel button ───────────────────────────────────────────────── */

.est-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	color: var(--est-acc);
	border: 1px solid var(--est-acc-line);
	border-radius: 6px;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.est-link:hover,
.est-link:focus {
	color: var(--est-acc);
	background-color: var(--est-acc-soft);
	border-color: var(--est-acc);
}

.est-link-arrow::before {
	content: "\2192";
	display: inline-block;
	transition: transform 0.2s ease;
}

.est-link:hover .est-link-arrow::before {
	transform: translateX(3px);
}

/* ── Prev / next + counter ──────────────────────────────────────── */

.est-nav {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
}

.est-arr {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	font-size: 15px;
	line-height: 1;
	color: rgba(237, 240, 247, 0.68);
	background-color: transparent;
	border: 1.5px solid rgba(237, 240, 247, 0.14);
	border-radius: 50%;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.est-arr:hover {
	background-color: rgba(255, 255, 255, 0.06);
	border-color: rgba(237, 240, 247, 0.40);
}

.est-arr:focus-visible {
	outline: 2px solid var(--est-acc);
	outline-offset: 2px;
}

/*
 * Theme focus-state reset.
 *
 * A clicked <button> keeps :focus, and most WordPress themes paint
 * `button:focus` / `button:active` with their brand colour. Even a weak theme
 * rule like `button:focus` (0,1,1) out-specifies the widget's own
 * `.est-arr { background: transparent }` (0,1,0), which is why the arrow was
 * left sitting on a brand-coloured background after every click.
 *
 * Layer 1 is scoped through .est-wrap (0,3,0): it beats normal theme button
 * styling while still sitting BELOW Elementor's {{WRAPPER}}-scoped controls
 * (0,4,0+), so the plugin's own hover and active-state controls keep working.
 */
.est-wrap .est-arr:focus,
.est-wrap .est-arr:active,
.est-wrap .est-arr:focus-visible,
.est-wrap .est-pill:not(.is-active):focus,
.est-wrap .est-pill:not(.is-active):active,
.est-wrap .est-pill:not(.is-active):focus-visible,
.est-wrap .est-link:focus,
.est-wrap .est-link:active {
	background-color: transparent;
	box-shadow: none;
	text-decoration: none;
}

/*
 * Layer 2 — the resting state after a click has to be clean even when the
 * theme marks its focus colour !important. The :not(:hover) guard means this
 * rule can never compete with a hover background, from this plugin or from an
 * Elementor control, so !important here defeats nothing the user can set.
 */
.est-wrap .est-arr:focus:not(:hover),
.est-wrap .est-arr:active:not(:hover),
.est-wrap .est-pill:not(.is-active):focus:not(:hover),
.est-wrap .est-pill:not(.is-active):active:not(:hover),
.est-wrap .est-link:focus:not(:hover),
.est-wrap .est-link:active:not(:hover) {
	background-color: transparent !important;
	box-shadow: none !important;
}

/* Hover restated at .est-wrap specificity so a theme `button:hover` can't win.
   The :focus:hover variants matter when a theme paints `button:focus` and the
   user then hovers the button they just clicked. */
.est-wrap .est-arr:hover,
.est-wrap .est-arr:focus:hover {
	background-color: rgba(255, 255, 255, 0.06);
}

.est-wrap .est-pill:not(.is-active):hover,
.est-wrap .est-pill:not(.is-active):focus:hover {
	background-color: rgba(255, 255, 255, 0.07);
}

.est-wrap .est-link:hover,
.est-wrap .est-link:focus:hover {
	background-color: var(--est-acc-soft);
}

/* The accent-tinted active pill must survive both layers and the theme. */
.est-wrap .est-pill-accent.is-active,
.est-wrap .est-pill-accent.is-active:focus,
.est-wrap .est-pill-accent.is-active:active,
.est-wrap .est-pill-accent.is-active:focus-visible {
	color: var(--est-acc) !important;
	background-color: var(--est-acc-soft) !important;
	border-color: var(--est-acc-line) !important;
	box-shadow: none !important;
}

.est-arr,
.est-pill,
.est-link {
	-webkit-tap-highlight-color: transparent;
}

.est-arr[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
}

.est-arr-prev::before { content: "\2190"; }
.est-arr-next::before { content: "\2192"; }

.est-counter {
	margin-left: 4px;
	font-family: var(--est-mono);
	font-size: 11px;
	color: rgba(237, 240, 247, 0.40);
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	/*
	 * !important is needed to beat the desktop value emitted by Elementor's
	 * own width control (which carries {{WRAPPER}}-level specificity and no
	 * media query). Stacking correctness wins over per-breakpoint width here.
	 */
	.est-media {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		order: 0 !important;
	}

	.est-media-sticky .est-media-inner {
		position: static;
	}
}

@media (max-width: 600px) {
	.est-panel {
		padding: 24px 20px 28px;
	}

	.est-pills {
		gap: 4px;
	}

	.est-pill {
		font-size: 9px;
		padding: 6px 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.est-wrap *,
	.est-wrap *::before,
	.est-wrap *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}