/*
	DM Dólar: "Cotizaciones" block / [dm_dolar_blue] shortcode.

	Layout only: colors, fonts and spacing come from the theme (no visual opinion here). Selectors are wrapped in
	:where() so any theme rule wins without fighting specificity or load order.

	CSS variables: --dmdb-gap (space between the cards, default 16px).

	Classes: .dmdb, __header, __title, __info, __info-button, __tooltip, __nav, __arrow (--prev / --next), __slider (Splide), __list, __item, __name,
	__values (dl: dt label / dd value), __empty.
*/
:where(.dmdb),
:where(.dmdb) *,
:where(.dmdb) *::before,
:where(.dmdb) *::after {
	box-sizing: border-box;
}

/* Header: title, the update info right after it, arrows at the right end. */
:where(.dmdb) .dmdb__header {
	display: flex;
	align-items: center;
	gap: 8px;
}

:where(.dmdb) .dmdb__title {
	margin: 0;
}

:where(.dmdb) .dmdb__info {
	position: relative;
	flex-shrink: 0;
}

:where(.dmdb) .dmdb__info-button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

/* Under the info button; view.js shifts it left (--dmdb-tooltip-shift) when it would overflow the block. */
:where(.dmdb) .dmdb__tooltip {
	position: absolute;
	z-index: 10;
	top: calc(100% + 8px);
	left: calc(-6px + var(--dmdb-tooltip-shift, 0px));
	width: max-content;
	max-width: min(320px, calc(100vw - 40px));
}

:where(.dmdb) .dmdb__tooltip[hidden] {
	display: none;
}

:where(.dmdb) .dmdb__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.dmdb) .dmdb__item {
	margin: 0;
	list-style: none;
}

:where(.dmdb) .dmdb__values {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 0;
}

:where(.dmdb) .dmdb__values dt,
:where(.dmdb) .dmdb__values dd {
	margin: 0;
}

:where(.dmdb) .dmdb__values dd {
	white-space: nowrap;
}

/* Slider. Before Splide mounts (no JS, editor preview) the cards stay in one scrollable row. */
:where(.dmdb) .splide:not(.is-initialized) {
	visibility: visible;
}

:where(.dmdb) .splide:not(.is-initialized) .splide__list {
	display: flex;
	gap: var(--dmdb-gap, 16px);
	overflow-x: auto;
}

:where(.dmdb) .splide:not(.is-initialized) .splide__slide {
	flex: 0 0 calc((100% - 3 * var(--dmdb-gap, 16px)) / 4);
	min-width: 220px;
}

:where(.dmdb) .dmdb__nav {
	display: flex;
	flex-shrink: 0;
	gap: 8px;
	margin-left: auto;
}

:where(.dmdb) .dmdb__nav[hidden] {
	display: none;
}

:where(.dmdb) .dmdb__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
}

:where(.dmdb) .dmdb__arrow:disabled {
	cursor: default;
}

:where(.dmdb) .dmdb__arrow svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

:where(.dmdb) .dmdb__arrow--prev svg {
	transform: scaleX(-1);
}