/* MagicKit - Advanced Accordion */
.mk-acc {
	--mk-acc-gap: 12px;
	counter-reset: mk-acc;
}

.mk-acc__item {
	border: 1px solid var(--mk-border);
	border-radius: 14px;
	background: var(--mk-surface);
	overflow: hidden;
	transition: border-color var(--mk-speed) ease, box-shadow var(--mk-speed) ease;
}

.mk-acc__item + .mk-acc__item {
	margin-top: var(--mk-acc-gap);
}

.mk-acc__item.is-open {
	border-color: color-mix(in srgb, var(--mk-primary) 40%, transparent);
	box-shadow: var(--mk-shadow);
}

.mk-acc__heading {
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}

.mk-acc__header {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 20px 24px;
	border: 0;
	background: transparent;
	color: var(--mk-dark);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background var(--mk-speed) ease;
}

.mk-acc__header:focus-visible {
	outline: 2px solid var(--mk-primary);
	outline-offset: -2px;
}

.mk-acc__title {
	flex: 1;
	font-size: 17px;
	font-weight: 600;
	transition: color var(--mk-speed) ease;
}

.mk-acc__item.is-open .mk-acc__title {
	color: var(--mk-primary);
}

.mk-acc__number {
	display: none;
	color: var(--mk-primary);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.mk-acc-numbers-yes .mk-acc__number {
	display: inline;
}

.mk-acc__title-icon {
	display: inline-flex;
	color: var(--mk-primary);
	font-size: 18px;
}

.mk-acc__toggle {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--mk-soft);
	color: var(--mk-primary);
	font-size: 12px;
	transition: transform var(--mk-speed) ease, background var(--mk-speed) ease, color var(--mk-speed) ease;
}

.mk-acc__toggle svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.mk-acc__toggle > span {
	display: inline-flex;
}

.mk-acc__toggle-opened,
.mk-acc__item.is-open .mk-acc__toggle-closed {
	display: none !important;
}

.mk-acc__item.is-open .mk-acc__toggle-opened {
	display: inline-flex !important;
}

.mk-acc__item.is-open .mk-acc__toggle {
	background: var(--mk-primary);
	color: #fff;
	transform: rotate(180deg);
}

.mk-acc-icon-left .mk-acc__toggle {
	order: -1;
}

.mk-acc__panel {
	overflow: hidden;
	transition: height var(--mk-speed) ease;
}

.mk-acc__content {
	padding: 0 24px 22px;
	color: var(--mk-text);
	line-height: 1.7;
}

.mk-acc__content > :last-child {
	margin-bottom: 0;
}

/* Joined skin */
.mk-acc-skin-joined .mk-acc {
	border: 1px solid var(--mk-border);
	border-radius: 14px;
	overflow: hidden;
}

.mk-acc-skin-joined .mk-acc__item {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.mk-acc-skin-joined .mk-acc__item + .mk-acc__item {
	margin-top: 0;
	border-top: 1px solid var(--mk-border);
}

/* Minimal skin */
.mk-acc-skin-minimal .mk-acc__item {
	border: 0;
	border-bottom: 1px solid var(--mk-border);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.mk-acc-skin-minimal .mk-acc__item + .mk-acc__item {
	margin-top: 0;
}

.mk-acc-skin-minimal .mk-acc__header,
.mk-acc-skin-minimal .mk-acc__content {
	padding-left: 0;
	padding-right: 0;
}

.mk-acc-skin-minimal .mk-acc__toggle {
	background: transparent;
}
