/* ==========================================================================
   Dabar Feature Tabs
   Apple-like interactive feature tabs.
   Stable layout: tabs list stays fixed, description is a separate active card.
   Typography inherits from theme.
   ========================================================================== */

.dabar-feature-tabs {
	--dabar-feature-tabs-bg: #f5f5f7;
	--dabar-feature-tabs-surface: #ffffff;
	--dabar-feature-tabs-muted-surface: rgba(255, 255, 255, 0.72);
	--dabar-feature-tabs-text: inherit;
	--dabar-feature-tabs-accent: #0071e3;

	--dabar-feature-tabs-icon-color: currentColor;
	--dabar-feature-tabs-list-marker-color: currentColor;

	--dabar-feature-tabs-min-height: 620px;
	--dabar-feature-tabs-image-width: 56%;
	--dabar-feature-tabs-image-max-height: 760px;
	--dabar-feature-tabs-image-fit: contain;
	--dabar-feature-tabs-radius: 36px;

	--dabar-feature-tabs-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--dabar-feature-tabs-left-width: 430px;

	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	color: var(--dabar-feature-tabs-text);
	background: transparent;
	font: inherit;
}

.dabar-feature-tabs,
.dabar-feature-tabs * {
	box-sizing: border-box;
}

.dabar-feature-tabs__inner {
	position: relative;
	display: grid;
	grid-template-columns:
		minmax(320px, calc(100% - var(--dabar-feature-tabs-image-width)))
		minmax(0, var(--dabar-feature-tabs-image-width));
	width: 100%;
	min-height: var(--dabar-feature-tabs-min-height);
	overflow: hidden;
	background: var(--dabar-feature-tabs-bg);
	border-radius: var(--dabar-feature-tabs-radius);
}

/* ==========================================================================
   Left content
   ========================================================================== */

.dabar-feature-tabs__content {
	position: relative;
	z-index: 4;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	min-width: 0;
	width: 100%;
	padding:
		clamp(34px, 6vw, 72px)
		clamp(34px, 6vw, 72px)
		clamp(34px, 6vw, 72px)
		clamp(92px, 8vw, 128px);
}

.dabar-feature-tabs__list {
	position: relative;
	z-index: 6;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: min(100%, var(--dabar-feature-tabs-left-width));
	gap: 12px;
}

/* ==========================================================================
   Item / Pill
   ========================================================================== */

.dabar-feature-tabs__item {
	position: relative;
	width: auto;
	margin: 0;
}

.dabar-feature-tabs__button {
	position: relative;
	display: block;
	width: auto;
	min-height: 48px;
	padding: 0;
	background: transparent;
	color: inherit;
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	text-align: left;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	transition:
		transform 420ms var(--dabar-feature-tabs-ease),
		opacity 320ms ease;
}

.dabar-feature-tabs__button:hover,
.dabar-feature-tabs__button:focus,
.dabar-feature-tabs__button:active {
	background: transparent;
	color: inherit;
	box-shadow: none;
	outline: none;
}

.dabar-feature-tabs__button:focus-visible {
	outline: 2px solid var(--dabar-feature-tabs-accent);
	outline-offset: 4px;
}

.dabar-feature-tabs__button-head {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	max-width: min(100%, var(--dabar-feature-tabs-left-width));
	min-height: 48px;
	padding: 0 20px;
	gap: 12px;
	overflow: hidden;
	background: var(--dabar-feature-tabs-muted-surface);
	border-radius: 999px;
	color: inherit;
	font: inherit;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	transition:
		background-color 360ms ease,
		transform 420ms var(--dabar-feature-tabs-ease),
		opacity 320ms ease;
}

.dabar-feature-tabs__button:hover .dabar-feature-tabs__button-head,
.dabar-feature-tabs__button:focus .dabar-feature-tabs__button-head {
	background: rgba(255, 255, 255, 0.9);
	color: inherit;
}

.dabar-feature-tabs.has-active-tab .dabar-feature-tabs__item.is-active .dabar-feature-tabs__button-head {
	background: var(--dabar-feature-tabs-surface);
}

.dabar-feature-tabs__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	min-width: 16px;
	height: 16px;
	color: inherit;
	font: inherit;
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	transform: translateY(-1px);
	transition:
		opacity 320ms ease,
		transform 420ms var(--dabar-feature-tabs-ease);
}

.dabar-feature-tabs__label {
	display: inline-block;
	color: inherit;
	font: inherit;
	font-weight: 600;
	line-height: 1.25;
}

/* ==========================================================================
   Active description card
   ========================================================================== */

.dabar-feature-tabs__active-card {
	position: relative;
	z-index: 5;
	width: min(100%, var(--dabar-feature-tabs-left-width));
	min-height: 0;
	margin-top: 18px;
	padding: 0 28px;
	overflow: hidden;
	background: var(--dabar-feature-tabs-surface);
	border-radius: 26px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px) scale(0.985);
	pointer-events: none;
	max-height: 0;
	transition:
		max-height 620ms var(--dabar-feature-tabs-ease),
		padding-top 620ms var(--dabar-feature-tabs-ease),
		padding-bottom 620ms var(--dabar-feature-tabs-ease),
		opacity 360ms ease,
		visibility 360ms ease,
		transform 620ms var(--dabar-feature-tabs-ease);
}

.dabar-feature-tabs__active-card.is-active,
.dabar-feature-tabs.has-active-tab .dabar-feature-tabs__active-card {
	max-height: 260px;
	padding-top: 26px;
	padding-bottom: 26px;
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.dabar-feature-tabs__active-text {
	display: block;
	margin: 0;
	color: inherit;
	font: inherit;
	font-size: clamp(16px, 1.05vw, 19px);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -0.01em;
	opacity: 0.96;
}

/* Legacy cleanup */

.dabar-feature-tabs__expanded,
.dabar-feature-tabs__item-title,
.dabar-feature-tabs__item-text {
	display: none;
}

/* ==========================================================================
   Right media / visual area
   ========================================================================== */

.dabar-feature-tabs__media {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	width: 100%;
	height: 100%;
	min-height: var(--dabar-feature-tabs-min-height);
	padding: clamp(24px, 4vw, 56px);
	overflow: hidden;
}

.dabar-feature-tabs__image,
.dabar-feature-tabs__visual {
	position: absolute;
	left: 50%;
	top: 50%;
	right: auto;
	bottom: auto;
	display: block;
	opacity: 0;
	transform: translate3d(-50%, -50%, 0) scale(0.985);
	pointer-events: none;
	transition:
		opacity 680ms var(--dabar-feature-tabs-ease),
		transform 780ms var(--dabar-feature-tabs-ease);
	will-change: opacity, transform;
	backface-visibility: hidden;
}

.dabar-feature-tabs__image {
	width: auto;
	max-width: min(78%, 760px);
	height: auto;
	max-height: min(82%, var(--dabar-feature-tabs-image-max-height));
	object-fit: var(--dabar-feature-tabs-image-fit);
	object-position: center;
	border-radius: 0;
}

.dabar-feature-tabs__image.is-active,
.dabar-feature-tabs__visual.is-active {
	opacity: 1;
	transform: translate3d(-50%, -50%, 0) scale(1);
	pointer-events: auto;
}

.dabar-feature-tabs:not(.has-active-tab) .dabar-feature-tabs__image.is-active {
	opacity: 1;
	transform: translate3d(-50%, -50%, 0) scale(1);
	pointer-events: auto;
}
/* ==========================================================================
   Apple-like content visual card
   Theme-aware: typography, text color and button styles inherit from theme.
   ========================================================================== */

.dabar-feature-tabs__visual--content {
	width: min(78%, 560px);
	max-width: 560px;
}

.dabar-feature-tabs__content-visual-card {
	position: relative;
	width: 100%;
	padding: clamp(28px, 4vw, 52px);
	overflow: hidden;

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.96),
			rgba(255, 255, 255, 0.76)
		);

	border: 1px solid rgba(255, 255, 255, 0.72);
	border-radius: 34px;

	box-shadow:
		0 24px 70px rgba(0, 0, 0, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.76);

	backdrop-filter: blur(28px) saturate(160%);
	-webkit-backdrop-filter: blur(28px) saturate(160%);

	color: inherit;
	font-family: inherit;
}

/* Icon: no square background, supports image/svg and text icon */
.dabar-feature-tabs__content-icon {
	width: 44px;
	height: 44px;
	margin-bottom: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dabar-feature-tabs__content-icon-img {
	width: 44px;
	height: 44px;
	display: block;
	object-fit: contain;
}

.dabar-feature-tabs__content-icon img,
.dabar-feature-tabs__content-icon svg {
	display: block;
	width: 42px;
	height: 42px;
	object-fit: contain;
	color: inherit;
	fill: currentColor;
	stroke: currentColor;
}

.dabar-feature-tabs__content-icon span {
	display: inline-flex;
	color: inherit;
	font: inherit;
	font-size: 42px;
	font-weight: inherit;
	line-height: 1;
}

/* Title inherits theme heading behavior */
.dabar-feature-tabs__content-title {
	max-width: 12em;
	margin: 0 0 14px;
	color: inherit;
}

/* Text inherits theme paragraph behavior */
.dabar-feature-tabs__content-text {
	max-width: 34em;
	margin: 0;

	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	opacity: 0.86;
}

/* List inherits text color. Dots use currentColor */
.dabar-feature-tabs__content-list {
	display: grid;
	gap: 10px;
	margin: 24px 0 0;
	padding: 0;

	list-style: none;

	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}

.dabar-feature-tabs__content-list li {
	position: relative;
	margin: 0;
	padding: 0 0 0 24px;
	color: inherit;
}

.dabar-feature-tabs__content-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.72em;

	width: 5px;
	height: 5px;

	border-radius: 999px;
	background: currentColor;

	transform: translateY(-50%);
}

/* Button inherits theme button style */
.dabar-feature-tabs__content-button {
	margin-top: 28px;
}



/* ==========================================================================
   Placeholder
   ========================================================================== */

.dabar-feature-tabs__placeholder {
	position: relative;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 160px;
	padding: 24px;
	color: rgba(29, 29, 31, 0.56);
	font: inherit;
	font-size: 14px;
	text-align: center;
}

/* ==========================================================================
   Close button
   ========================================================================== */

.dabar-feature-tabs__close {
	position: absolute;
	top: clamp(18px, 2.4vw, 32px);
	right: clamp(18px, 2.4vw, 32px);
	z-index: 12;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(29, 29, 31, 0.78);
	color: #ffffff;
	box-shadow: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	opacity: 0;
	visibility: hidden;
	transform: scale(0.92);
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	transition:
		opacity 320ms ease,
		visibility 320ms ease,
		transform 360ms var(--dabar-feature-tabs-ease),
		background-color 220ms ease;
}

.dabar-feature-tabs.has-active-tab .dabar-feature-tabs__close {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
}

.dabar-feature-tabs__close[aria-hidden="true"] {
	pointer-events: none;
}

.dabar-feature-tabs__close:hover,
.dabar-feature-tabs__close:focus,
.dabar-feature-tabs__close:active {
	background: rgba(29, 29, 31, 0.92);
	color: #ffffff;
	box-shadow: none;
	outline: none;
}

.dabar-feature-tabs__close:focus-visible {
	outline: 2px solid var(--dabar-feature-tabs-accent);
	outline-offset: 3px;
}

.dabar-feature-tabs__close span {
	display: block;
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	transform: translateY(-1px);
}

/* ==========================================================================
   Apple-like vertical switch controls
   ========================================================================== */

.dabar-feature-tabs__scroll-controls {
	position: absolute;
	left: clamp(30px, 4vw, 56px);
	top: 50%;
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 12px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-50%) translateX(-8px);
	transition:
		opacity 320ms ease,
		visibility 320ms ease,
		transform 420ms var(--dabar-feature-tabs-ease);
}

.dabar-feature-tabs.has-active-tab .dabar-feature-tabs__scroll-controls {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(-50%) translateX(0);
}

.dabar-feature-tabs__scroll-controls[aria-hidden="true"] {
	pointer-events: none;
}

.dabar-feature-tabs__scroll-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.78);
	color: #1d1d1f;
	box-shadow: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	transition:
		background-color 220ms ease,
		transform 220ms var(--dabar-feature-tabs-ease),
		opacity 220ms ease;
}

.dabar-feature-tabs__scroll-button:hover,
.dabar-feature-tabs__scroll-button:focus,
.dabar-feature-tabs__scroll-button:active {
	background: rgba(255, 255, 255, 0.94);
	color: #1d1d1f;
	box-shadow: none;
	outline: none;
}

.dabar-feature-tabs__scroll-button:hover {
	transform: scale(1.04);
}

.dabar-feature-tabs__scroll-button:focus-visible {
	outline: 2px solid var(--dabar-feature-tabs-accent);
	outline-offset: 3px;
}

.dabar-feature-tabs__scroll-button span {
	display: none;
}

.dabar-feature-tabs__scroll-button::before {
	content: '';
	display: block;
	width: 9px;
	height: 9px;
	border-top: 2px solid currentColor;
	border-left: 2px solid currentColor;
}

.dabar-feature-tabs__scroll-button--prev::before {
	transform: translateY(2px) rotate(45deg);
}

.dabar-feature-tabs__scroll-button--next::before {
	transform: translateY(-2px) rotate(225deg);
}

/* ==========================================================================
   Dark variant
   ========================================================================== */

.dabar-feature-tabs--dark,
.dabar-feature-tabs.is-style-dark {
	--dabar-feature-tabs-bg: #000000;
	--dabar-feature-tabs-surface: rgba(36, 36, 39, 0.94);
	--dabar-feature-tabs-muted-surface: rgba(36, 36, 39, 0.86);
	--dabar-feature-tabs-text: #f5f5f7;
	--dabar-feature-tabs-icon-color: currentColor;
	--dabar-feature-tabs-list-marker-color: currentColor;
}

.dabar-feature-tabs--dark .dabar-feature-tabs__inner,
.dabar-feature-tabs.is-style-dark .dabar-feature-tabs__inner {
	background: #000000;
	color: #f5f5f7;
}

.dabar-feature-tabs--dark .dabar-feature-tabs__button-head,
.dabar-feature-tabs.is-style-dark .dabar-feature-tabs__button-head,
.dabar-feature-tabs--dark .dabar-feature-tabs__active-card,
.dabar-feature-tabs.is-style-dark .dabar-feature-tabs__active-card {
	color: #f5f5f7;
}

.dabar-feature-tabs--dark .dabar-feature-tabs__button:hover .dabar-feature-tabs__button-head,
.dabar-feature-tabs--dark .dabar-feature-tabs__button:focus .dabar-feature-tabs__button-head,
.dabar-feature-tabs.is-style-dark .dabar-feature-tabs__button:hover .dabar-feature-tabs__button-head,
.dabar-feature-tabs.is-style-dark .dabar-feature-tabs__button:focus .dabar-feature-tabs__button-head {
	background: rgba(56, 56, 59, 0.92);
}

.dabar-feature-tabs--dark .dabar-feature-tabs__content-visual-card,
.dabar-feature-tabs.is-style-dark .dabar-feature-tabs__content-visual-card {
	background:
		linear-gradient(
			135deg,
			rgba(36, 36, 39, 0.96),
			rgba(36, 36, 39, 0.78)
		);
	border-color: rgba(255, 255, 255, 0.12);
	color: #f5f5f7;
	box-shadow:
		0 24px 70px rgba(0, 0, 0, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dabar-feature-tabs--dark .dabar-feature-tabs__content-text,
.dabar-feature-tabs.is-style-dark .dabar-feature-tabs__content-text,
.dabar-feature-tabs--dark .dabar-feature-tabs__content-list,
.dabar-feature-tabs.is-style-dark .dabar-feature-tabs__content-list {
	color: currentColor;
}

.dabar-feature-tabs--dark .dabar-feature-tabs__scroll-button,
.dabar-feature-tabs.is-style-dark .dabar-feature-tabs__scroll-button {
	background: rgba(36, 36, 39, 0.78);
	color: #f5f5f7;
}

.dabar-feature-tabs--dark .dabar-feature-tabs__scroll-button:hover,
.dabar-feature-tabs.is-style-dark .dabar-feature-tabs__scroll-button:hover {
	background: rgba(56, 56, 59, 0.92);
}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1024px) {
	.dabar-feature-tabs {
		--dabar-feature-tabs-left-width: 360px;
	}

	.dabar-feature-tabs__inner {
		grid-template-columns: minmax(260px, 42%) minmax(0, 58%);
	}

	.dabar-feature-tabs__content {
		padding: 40px 32px 40px 82px;
	}

	.dabar-feature-tabs__media {
		padding: 32px;
	}

	.dabar-feature-tabs__visual--content {
		width: min(84%, 440px);
	}

	.dabar-feature-tabs__content-visual-card {
		padding: 32px;
		border-radius: 30px;
	}
}

/* ==========================================================================
   Mobile Apple-like mode
   Closed: image + bottom pills.
   Open: image + bottom description card + side arrows + close.
   ========================================================================== */

@media (max-width: 767px) {
	.dabar-feature-tabs {
		--dabar-feature-tabs-mobile-height: 620px;
		--dabar-feature-tabs-mobile-radius: 28px;

		width: 100%;
		overflow: hidden;
	}

	.dabar-feature-tabs__inner {
		position: relative;
		display: block;
		width: 100%;
		min-height: var(--dabar-feature-tabs-mobile-height);
		background: var(--dabar-feature-tabs-bg, #f5f5f7);
		border-radius: var(--dabar-feature-tabs-mobile-radius);
		overflow: hidden;
	}

	.dabar-feature-tabs__media {
		position: absolute;
		inset: 0;
		z-index: 1;
		display: block;
		width: 100%;
		height: 100%;
		min-height: var(--dabar-feature-tabs-mobile-height);
		padding: 0;
		overflow: hidden;
	}

	.dabar-feature-tabs__image,
	.dabar-feature-tabs__visual {
		position: absolute;
		left: 50%;
		top: 18px;
		right: auto;
		bottom: auto;
		display: block;
		opacity: 0;
		transform: translate3d(-50%, 0, 0) scale(0.985);
		pointer-events: none;
		transition:
			opacity 520ms var(--dabar-feature-tabs-ease),
			transform 620ms var(--dabar-feature-tabs-ease);
		will-change: opacity, transform;
		backface-visibility: hidden;
	}

	.dabar-feature-tabs__image {
		width: auto;
		max-width: calc(100% - 32px);
		height: auto;
		max-height: calc(var(--dabar-feature-tabs-mobile-height) - 150px);
		object-fit: contain;
		object-position: center top;
		border-radius: 18px;
	}

	.dabar-feature-tabs__image.is-active,
	.dabar-feature-tabs__visual.is-active,
	.dabar-feature-tabs:not(.has-active-tab) .dabar-feature-tabs__image.is-active {
		opacity: 1;
		transform: translate3d(-50%, 0, 0) scale(1);
		pointer-events: auto;
	}

	.dabar-feature-tabs__content {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 18px;
		z-index: 10;
		display: block;
		width: 100%;
		padding: 0;
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: none;
	}

	/* Closed state: pills carousel */
	.dabar-feature-tabs__list {
		position: relative;
		z-index: 12;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 8px;
		width: 100%;
		padding: 0 18px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
		transition:
			opacity 240ms ease,
			visibility 240ms ease,
			transform 320ms var(--dabar-feature-tabs-ease);
	}

	.dabar-feature-tabs__list::-webkit-scrollbar {
		display: none;
	}

	.dabar-feature-tabs__item {
		position: relative;
		left: auto;
		bottom: auto;
		flex: 0 0 auto;
		width: auto;
		margin: 0;
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
		scroll-snap-align: center;
	}

	.dabar-feature-tabs__button {
		width: auto;
		min-height: 42px;
	}

	.dabar-feature-tabs__button-head {
		display: inline-flex;
		align-items: center;
		min-height: 42px;
		max-width: none;
		padding: 0 15px;
		gap: 8px;
		background: rgba(245, 245, 247, 0.86);
		color: #1d1d1f;
		border-radius: 999px;
		box-shadow: none;
		white-space: nowrap;
		backdrop-filter: blur(20px) saturate(160%);
		-webkit-backdrop-filter: blur(20px) saturate(160%);
	}

	.dabar-feature-tabs__label {
		font-size: 12.5px;
		font-weight: 600;
		line-height: 1.2;
	}

	/* Open state: hide pills */
	.dabar-feature-tabs.has-active-tab .dabar-feature-tabs__list {
		opacity: 0;
		visibility: hidden;
		transform: translateY(16px);
		pointer-events: none;
	}

	/* Open state: description card */
	.dabar-feature-tabs__active-card {
		position: relative;
		z-index: 13;
		width: calc(100% - 96px);
		max-width: 330px;
		min-height: 0;
		margin: 0 auto;
		padding: 0 18px;
		overflow: hidden;
		background: rgba(36, 36, 39, 0.9);
		color: #f5f5f7;
		border-radius: 18px;
		box-shadow: none;
		backdrop-filter: blur(22px) saturate(160%);
		-webkit-backdrop-filter: blur(22px) saturate(160%);
		opacity: 0;
		visibility: hidden;
		transform: translateY(12px);
		pointer-events: none;
		max-height: 0;
		transition:
			max-height 360ms var(--dabar-feature-tabs-ease),
			padding-top 360ms var(--dabar-feature-tabs-ease),
			padding-bottom 360ms var(--dabar-feature-tabs-ease),
			opacity 240ms ease,
			visibility 240ms ease,
			transform 360ms var(--dabar-feature-tabs-ease);
	}

	.dabar-feature-tabs.has-active-tab .dabar-feature-tabs__active-card {
		max-height: 160px;
		padding-top: 15px;
		padding-bottom: 15px;
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
	}

	.dabar-feature-tabs__active-text {
		display: block;
		margin: 0;
		color: inherit;
		font-size: 13px;
		font-weight: 500;
		line-height: 1.4;
		letter-spacing: -0.01em;
	}

	/* Arrows must be aligned with description card, not with image */
	.dabar-feature-tabs__scroll-controls {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 18px;
		top: auto;
		z-index: 16;
		display: block;
		width: 100%;
		height: 52px;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: none;
		transition:
			opacity 220ms ease,
			visibility 220ms ease;
	}

	.dabar-feature-tabs.has-active-tab .dabar-feature-tabs__scroll-controls {
		opacity: 1;
		visibility: visible;
		pointer-events: none;
		transform: none;
	}

	.dabar-feature-tabs__scroll-button {
		position: absolute;
		top: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 46px;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: rgba(245, 245, 247, 0.76);
		color: #1d1d1f;
		box-shadow: none;
		cursor: pointer;
		pointer-events: auto;
		transform: translateY(-50%) !important;
		backdrop-filter: blur(18px) saturate(160%);
		-webkit-backdrop-filter: blur(18px) saturate(160%);
		transition:
			background-color 220ms ease,
			opacity 220ms ease;
	}

	.dabar-feature-tabs__scroll-button:hover,
	.dabar-feature-tabs__scroll-button:focus,
	.dabar-feature-tabs__scroll-button:active {
		background: rgba(245, 245, 247, 0.9);
		color: #1d1d1f;
		box-shadow: none;
		outline: none;
		transform: translateY(-50%) !important;
	}

	.dabar-feature-tabs__scroll-button:focus-visible {
		outline: 2px solid var(--dabar-feature-tabs-accent);
		outline-offset: 2px;
		transform: translateY(-50%) !important;
	}

	.dabar-feature-tabs__scroll-button--prev {
		left: 12px;
	}

	.dabar-feature-tabs__scroll-button--next {
		right: 12px;
	}

	.dabar-feature-tabs__scroll-button span {
		display: none;
	}

	.dabar-feature-tabs__scroll-button::before {
		content: '';
		display: block;
		width: 9px;
		height: 9px;
		border-top: 2px solid currentColor;
		border-left: 2px solid currentColor;
	}

	.dabar-feature-tabs__scroll-button--prev::before {
		transform: translateX(2px) rotate(-45deg);
	}

	.dabar-feature-tabs__scroll-button--next::before {
		transform: translateX(-2px) rotate(135deg);
	}

	.dabar-feature-tabs__close {
		top: 10px;
		right: 10px;
		z-index: 20;
		width: 36px;
		height: 36px;
		box-shadow: none;
	}

	.dabar-feature-tabs__placeholder {
		display: none;
	}

	.dabar-feature-tabs__content-visual-card,
	.dabar-feature-tabs__active-card,
	.dabar-feature-tabs__button-head,
	.dabar-feature-tabs__scroll-button {
		box-shadow: none;
	}
}

@media (max-width: 420px) {
	.dabar-feature-tabs {
		--dabar-feature-tabs-mobile-height: 600px;
	}

	.dabar-feature-tabs__inner {
		min-height: var(--dabar-feature-tabs-mobile-height);
		border-radius: 26px;
	}

	.dabar-feature-tabs__media {
		min-height: var(--dabar-feature-tabs-mobile-height);
	}

	.dabar-feature-tabs__image {
		top: 16px;
		max-width: calc(100% - 28px);
		max-height: calc(var(--dabar-feature-tabs-mobile-height) - 142px);
	}

	.dabar-feature-tabs__content {
		bottom: 16px;
	}

	.dabar-feature-tabs__list {
		padding: 0 15px;
	}

	.dabar-feature-tabs__button-head {
		min-height: 40px;
		padding: 0 13px;
	}

	.dabar-feature-tabs__label {
		font-size: 12px;
	}

	.dabar-feature-tabs__active-card {
		width: calc(100% - 92px);
	}

	.dabar-feature-tabs__scroll-controls {
		bottom: 16px;
	}

	.dabar-feature-tabs__scroll-button {
		width: 32px;
		height: 44px;
		transform: translateY(-50%) !important;
	}

	.dabar-feature-tabs__scroll-button:hover,
	.dabar-feature-tabs__scroll-button:focus,
	.dabar-feature-tabs__scroll-button:active {
		transform: translateY(-50%) !important;
	}

	.dabar-feature-tabs__scroll-button--prev {
		left: 10px;
	}

	.dabar-feature-tabs__scroll-button--next {
		right: 10px;
	}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.dabar-feature-tabs__button,
	.dabar-feature-tabs__button-head,
	.dabar-feature-tabs__icon,
	.dabar-feature-tabs__active-card,
	.dabar-feature-tabs__image,
	.dabar-feature-tabs__visual,
	.dabar-feature-tabs__item,
	.dabar-feature-tabs__close,
	.dabar-feature-tabs__scroll-controls,
	.dabar-feature-tabs__scroll-button,
	.dabar-feature-tabs__content {
		transition: none;
	}

	.dabar-feature-tabs__active-card,
	.dabar-feature-tabs__image,
	.dabar-feature-tabs__image.is-active,
	.dabar-feature-tabs__visual,
	.dabar-feature-tabs__visual.is-active,
	.dabar-feature-tabs__item,
	.dabar-feature-tabs__close,
	.dabar-feature-tabs__scroll-controls,
	.dabar-feature-tabs__content {
		transform: none;
	}
}