/**
 * SDM Saved Lists
 *
 * Type sizes come from the Bricks variable --text-s. Fallbacks are supplied
 * on every var() so the plugin still renders outside a Bricks context.
 *
 * Padding, gaps and icon sizes are in em, so the whole control scales from
 * that one variable.
 */
:root {
	--sdm-accent: #1f6feb;
	--sdm-accent-contrast: #fff;
	--sdm-muted: #6b7280;
	--sdm-line: #e5e7eb;
	--sdm-radius: 999px;
	--sdm-tip-bg: #111827;
	--sdm-tip-text: #fff;
}

/* --------------------------------------------------------------------
 * Layout
 * ----------------------------------------------------------------- */

.sdm-controls {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.75em;
	vertical-align: middle;
	align-self: center;
}

/* --------------------------------------------------------------------
 * Buttons
 * ----------------------------------------------------------------- */

.sdm-btn {
	position: relative; /* Tooltip anchor. */
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.5em 1em;
	border: 1px solid var(--sdm-line);
	border-radius: var(--sdm-radius);
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: var(--text-s, 0.875rem);
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sdm-btn:hover {
	border-color: var(--sdm-accent);
}

.sdm-btn:focus-visible {
	outline: 2px solid var(--sdm-accent);
	outline-offset: 2px;
}

.sdm-btn.is-saved,
.sdm-btn.is-tried {
	background: var(--sdm-accent);
	border-color: var(--sdm-accent);
	color: var(--sdm-accent-contrast);
}

.sdm-btn--remove {
	color: var(--sdm-muted);
}

/**
 * The hidden attribute must win over the display rules above, or the
 * "tried" button shows on drinks that were never saved.
 */
.sdm-btn[hidden] {
	display: none;
}

/**
 * Icon-only variant.
 *
 * The doubled class is intentional: it gives these rules two-class
 * specificity (0,2,0) so they beat the theme/Bricks button styling that was
 * overriding a plain .sdm-btn--icon selector. Same element, no !important.
 */
.sdm-btn--icon.sdm-btn--icon {
	flex: 0 0 auto;
	align-self: center;
	justify-content: center;
	width: auto;
	padding: 0.3em;
	min-width: 0;
	min-height: 0;
	border: 0 none;
	border-radius: 6px;
	background: none;
	box-shadow: none;
	color: var(--sdm-muted);
}

.sdm-btn--icon.sdm-btn--icon:hover,
.sdm-btn--icon.sdm-btn--icon:focus {
	border: 0 none;
	background: none;
	box-shadow: none;
	color: var(--sdm-accent);
}

.sdm-btn__icon {
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
	display: block;
}

/* Active state is carried by color and fill now, not a filled pill. */
.sdm-btn--icon.is-saved,
.sdm-btn--icon.is-tried {
	background: none;
	border: 0 none;
	box-shadow: none;
	color: var(--sdm-accent);
}

/* Bookmark reads as filled once saved. */
.sdm-btn--want.is-saved .sdm-btn__icon {
	fill: currentColor;
}

/**
 * Visually hidden, still read aloud. This is the accessible name — the
 * tooltip below is decoration on top of it, not the only label.
 */
.sdm-btn--icon .sdm-btn__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------
 * Tooltip
 * ----------------------------------------------------------------- */

.sdm-btn--icon[data-sdm-tip]::after {
	content: attr( data-sdm-tip );
	position: absolute;
	bottom: calc( 100% + 0.5em );
	left: 50%;
	transform: translateX( -50% );
	padding: 0.4em 0.7em;
	border-radius: 6px;
	background: var(--sdm-tip-bg);
	color: var(--sdm-tip-text);
	font-size: var(--text-s, 0.875rem);
	line-height: 1.3;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease;
	z-index: 20;
}

/* Small pointer. */
.sdm-btn--icon[data-sdm-tip]::before {
	content: "";
	position: absolute;
	bottom: calc( 100% + 0.15em );
	left: 50%;
	transform: translateX( -50% );
	border: 0.35em solid transparent;
	border-top-color: var(--sdm-tip-bg);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease;
	z-index: 20;
}

/**
 * Keyboard focus shows the tooltip too, not just hover.
 * hover: hover excludes touch devices, which would otherwise fire this on
 * tap and leave the tooltip stuck on screen.
 */
@media ( hover: hover ) {
	.sdm-btn--icon[data-sdm-tip]:hover::after,
	.sdm-btn--icon[data-sdm-tip]:hover::before {
		opacity: 1;
		visibility: visible;
	}
}

.sdm-btn--icon[data-sdm-tip]:focus-visible::after,
.sdm-btn--icon[data-sdm-tip]:focus-visible::before {
	opacity: 1;
	visibility: visible;
}

/* First and last in a row nudge inward so the tooltip can't clip offscreen. */
.sdm-item__actions .sdm-btn--icon:last-child[data-sdm-tip]::after {
	left: auto;
	right: 0;
	transform: none;
}

/* --------------------------------------------------------------------
 * List page
 * ----------------------------------------------------------------- */

/**
 * Counters sit above everything as a summary, so the section headings
 * don't have to carry a number.
 */
.sdm-list__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: baseline;
	margin: 0 0 2rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--sdm-line);
}

.sdm-stat {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35em;
}

.sdm-stat__label {
	color: var(--sdm-muted);
	font-size: var(--text-s, 0.875rem);
}

.sdm-stat__value {
	font-size: var(--text-m, 1.125rem);
	font-weight: 700;
	line-height: 1;
}

.sdm-list__section + .sdm-list__section {
	margin-top: 2.5rem;
}

/* Tight to the list it labels. */
.sdm-list__heading {
	margin: 0 0 0.35rem;
}

.sdm-list__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sdm-item {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--sdm-line);
}

.sdm-item--tried .sdm-item__title {
	color: var(--sdm-muted);
}

.sdm-item__image {
	width: 64px;
	height: 64px;
	flex: 0 0 64px;
	object-fit: cover;
	border-radius: 8px;
}

.sdm-item__body {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
	justify-content: space-between;
	min-width: 0;
}

.sdm-item__title {
	font-weight: 600;
	text-decoration: none;
	color: inherit;
}

.sdm-item__actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5em;
	flex-shrink: 0;
}

/* Centred, and clearly separated from the last row. */
.sdm-list__note {
	margin-top: 3rem;
	text-align: center;
	color: var(--sdm-muted);
	font-size: var(--text-s, 0.875rem);
}

.sdm-list__loading,
.sdm-list__empty {
	color: var(--sdm-muted);
	font-size: var(--text-s, 0.875rem);
}

@media ( max-width: 480px ) {
	.sdm-item__body {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.sdm-btn,
	.sdm-btn--icon[data-sdm-tip]::after,
	.sdm-btn--icon[data-sdm-tip]::before {
		transition: none;
	}
}