/* Burok Medical árlista - a színek és betűk a Megjelenés beállításaiból jönnek (CSS-változók). */

.iwy-arlista-wrap {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Egymás után beillesztett shortcode-ok között ugyanakkora térköz, mint egy shortcode-on belül. */
.iwy-arlista-wrap + .iwy-arlista-wrap,
.iwy-arlista-wrap + br + .iwy-arlista-wrap {
	margin-top: 20px;
}

/* Ha a shortcode-ok külön sorban állnak, a szerkesztő sortörése ne adjon hozzá plusz helyet. */
.iwy-arlista-wrap + br {
	display: none;
}

.iwy-arlista,
.iwy-arlista * {
	box-sizing: border-box;
}

.iwy-arlista {
	--iwy-divider: var(--iwy-card-border, #9d9d9d);
	--iwy-divider: color-mix(in srgb, var(--iwy-card-border, #9d9d9d) 45%, transparent);

	container-type: inline-size;
	padding: 22px 20px 24px;
	border: 1px solid var(--iwy-card-border, #9d9d9d);
	border-radius: var(--iwy-card-radius, 28px);
	background: var(--iwy-card-bg, #ffffff);
}

.iwy-arlista .iwy-arlista__title {
	margin: 0 0 20px;
	padding: 0;
	font-family: var(--iwy-title-font, inherit);
	font-size: var(--iwy-title-size, 16px);
	font-weight: var(--iwy-title-weight, 400);
	line-height: 1.3;
	color: var(--iwy-title-color, #9e7a84);
}

/* Oszlopok: felül a felirat, alatta az ár. */
.iwy-arlista .iwy-arlista__cols {
	display: grid;
	grid-template-columns: repeat(var(--iwy-cols, 3), minmax(0, 1fr));
	margin: 0 -20px;
}

.iwy-arlista .iwy-arlista__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 2px 20px;
	border-left: 1px solid var(--iwy-divider);
}

.iwy-arlista .iwy-arlista__col:first-child {
	border-left: 0;
}

.iwy-arlista .iwy-arlista__name {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--iwy-name-font, inherit);
	font-size: var(--iwy-name-size, 16px);
	font-weight: var(--iwy-name-weight, 600);
	line-height: 1.3;
	color: var(--iwy-name-color, #333333);
	overflow-wrap: break-word;
}

/* Az ár és a rajta ülő százalék jelvény közös kerete. */
.iwy-arlista .iwy-arlista__value {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
}

.iwy-arlista .iwy-arlista__price {
	display: inline-block;
	padding: 7px 24px;
	border: 1px solid var(--iwy-other-color, #9e7a84);
	border-radius: 999px;
	background: transparent;
	font-family: var(--iwy-price-font, inherit);
	font-size: var(--iwy-price-size, 16px);
	font-weight: var(--iwy-price-weight, 600);
	line-height: 1.3;
	color: var(--iwy-other-color, #9e7a84);
	text-align: center;
	white-space: nowrap;
}

.iwy-arlista .iwy-arlista__price--main {
	border-color: var(--iwy-main-bg, #9e7a84);
	background: var(--iwy-main-bg, #9e7a84);
	color: var(--iwy-main-color, #ffffff);
}

/* Százalék jelvény: kör az ár jobb felső sarkán. */
.iwy-arlista .iwy-arlista__badge {
	position: absolute;
	top: -14px;
	left: calc(100% - 12px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3.4em;
	height: 3.4em;
	padding: 0 0.4em;
	border: 2px solid var(--iwy-card-bg, #ffffff);
	border-radius: 999px;
	background: var(--iwy-badge-bg, #333333);
	font-family: var(--iwy-price-font, inherit);
	font-size: calc(var(--iwy-price-size, 16px) * 0.75);
	font-weight: 700;
	line-height: 1;
	color: var(--iwy-badge-color, #ffffff);
	white-space: nowrap;
}

/* Közepes szélesség (keskeny hasáb, nagyobb telefon): sorok elválasztó vonallal, bal oldalon a felirat, jobb oldalon az ár. */
@container (max-width: 560px) {
	.iwy-arlista .iwy-arlista__title {
		margin-bottom: 8px;
	}

	.iwy-arlista .iwy-arlista__cols {
		grid-template-columns: minmax(0, 1fr);
		margin: 0;
	}

	.iwy-arlista .iwy-arlista__col {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 14px 0;
		border-left: 0;
		border-top: 1px solid var(--iwy-divider);
	}

	.iwy-arlista .iwy-arlista__col:first-child {
		border-top: 0;
	}

	.iwy-arlista .iwy-arlista__col:last-child {
		padding-bottom: 0;
	}

	.iwy-arlista .iwy-arlista__price {
		padding: 6px 16px;
	}

	/* Itt az ár a kártya jobb szélén áll, ezért a jelvény a bal felső sarokra kerül. */
	.iwy-arlista .iwy-arlista__badge {
		top: -12px;
		left: auto;
		right: calc(100% - 10px);
	}

	/* Hely a jelvénynek, hogy a felirat ne csússzon alá. */
	.iwy-arlista .iwy-arlista__value--badge {
		margin-left: 2.2em;
	}
}

/* Telefon: a felirat az ár fölé kerül, a tételek között elválasztó vonal marad. */
@container (max-width: 340px) {
	.iwy-arlista .iwy-arlista__col {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.iwy-arlista .iwy-arlista__badge {
		top: -14px;
		right: auto;
		left: calc(100% - 12px);
	}

	.iwy-arlista .iwy-arlista__value--badge {
		margin-left: 0;
	}
}