/**
 * Travel26 Included / Excluded
 *
 * Contents
 * 1. Variables and columns
 * 2. Tinted and outlined styles
 * 3. Titles
 * 4. Items
 * 5. Editor hint
 * 6. Responsive
 *
 * Colours read the Inoforest Core Design System when it is active, with the Travel26 design as fallback.
 */

/* 1. Variables and columns ------------------------------------------------------ */
.travel26-inc-exc {
	--travel26-inc-exc-columns: 2;
	--travel26-inc-exc-gap: 24px;
	--travel26-inc-exc-item-gap: 12px;
	--travel26-inc-exc-title-icon: 22px;
	--travel26-inc-exc-icon-box: 22px;
	--travel26-inc-exc-icon-size: 11px;
	display: grid;
	grid-template-columns: repeat(var(--travel26-inc-exc-columns), minmax(0, 1fr));
	gap: var(--travel26-inc-exc-gap);
}

.travel26-inc-exc .travel26-inc-exc__col {
	min-width: 0;
	padding: 28px;
	background: var(--travel26-inc-exc-bg);
	border: 1px solid var(--travel26-inc-exc-border);
	border-radius: 24px;
}

/* 2. Tinted and outlined styles ---------------------------------------------------- */
.travel26-inc-exc__col--included {
	--travel26-inc-exc-accent: var(--inoforest-color-primary, #0b7a75);
	--travel26-inc-exc-bg: #f0f8f7;
	--travel26-inc-exc-border: #d9eeec;
}

.travel26-inc-exc__col--excluded {
	--travel26-inc-exc-accent: #e5484d;
	--travel26-inc-exc-bg: #fdf4f3;
	--travel26-inc-exc-border: #f8e1df;
}

.travel26-inc-exc[data-style="outline"] .travel26-inc-exc__col {
	--travel26-inc-exc-bg: #fff;
	--travel26-inc-exc-border: var(--inoforest-color-border, #e5ebef);
}

/* 3. Titles ------------------------------------------------------------------------- */
.travel26-inc-exc .travel26-inc-exc__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	font-size: 1.15rem;
	color: var(--inoforest-color-heading, #0d1b2a);
}

.travel26-inc-exc .travel26-inc-exc__title-icon {
	display: inline-flex;
	align-items: center;
	height: calc(var(--travel26-inc-exc-title-icon) * 1.2);
	font-size: var(--travel26-inc-exc-title-icon);
	color: var(--travel26-inc-exc-accent);
}

.travel26-inc-exc .travel26-inc-exc__title-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* 4. Items ---------------------------------------------------------------------------- */
.travel26-inc-exc .travel26-inc-exc__list {
	display: grid;
	gap: var(--travel26-inc-exc-item-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.travel26-inc-exc .travel26-inc-exc__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-weight: 500;
	color: var(--inoforest-color-heading, #0d1b2a);
}

.travel26-inc-exc .travel26-inc-exc__icon {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	width: var(--travel26-inc-exc-icon-box);
	height: var(--travel26-inc-exc-icon-box);
	margin-top: 3px;
	font-size: var(--travel26-inc-exc-icon-size);
	color: var(--travel26-inc-exc-accent);
	border-radius: 50%;
}

/* The circle is the accent colour at low opacity, so it follows a colour picked in the panel. */
.travel26-inc-exc .travel26-inc-exc__icon::before {
	position: absolute;
	inset: 0;
	content: "";
	background: currentColor;
	border-radius: inherit;
	opacity: 0.13;
}

.travel26-inc-exc .travel26-inc-exc__icon svg {
	position: relative;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* 5. Editor hint ------------------------------------------------------------------- */
.travel26-inc-exc__empty {
	margin: 0 0 12px;
	padding: 14px 18px;
	font-size: 13px;
	text-align: center;
	border: 1px dashed var(--inoforest-color-border, #e5ebef);
	border-radius: 12px;
}

/* 6. Responsive -------------------------------------------------------------------- */
@media (max-width: 767px) {
	.travel26-inc-exc .travel26-inc-exc__col {
		padding: 24px 22px;
	}

	/* The design's phone body text is 15 px. */
	.travel26-inc-exc .travel26-inc-exc__item {
		font-size: 15px;
	}
}