/**
 * Reusable Maskarad Boom UI components.
 *
 * This file contains project-owned presentation only. WordPress, WooCommerce
 * and plugin markup must be mapped deliberately by later integration assets.
 */

.mb-breadcrumbs {
	color: var(--color-text-muted);
	font-size: var(--font-size-small);
}

.mb-breadcrumbs__list {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mb-breadcrumbs__item {
	align-items: center;
	display: flex;
	max-width: 100%;
	min-width: 0;
}

.mb-breadcrumbs__item:not(:last-child)::after {
	color: var(--color-border-strong);
	content: "/";
	flex: 0 0 auto;
	margin-inline: var(--space-2);
}

.mb-breadcrumbs__link,
.mb-breadcrumbs__current {
	align-items: center;
	display: flex;
	min-height: 2.75rem;
	min-width: 0;
	overflow-wrap: anywhere;
}

.mb-breadcrumbs__link {
	color: var(--color-text-muted);
}

.mb-breadcrumbs__current {
	color: var(--color-text);
	font-weight: 700;
}

.mb-pagination__list {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mb-pagination__item {
	display: flex;
	margin: 0;
}

.mb-pagination__link {
	align-items: center;
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-small);
	color: var(--color-text);
	display: inline-flex;
	font-weight: 700;
	justify-content: center;
	line-height: 1;
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding: var(--space-2);
	text-align: center;
	text-decoration: none;
}

a.mb-pagination__link:hover {
	background: var(--color-surface-muted);
	border-color: var(--color-border-strong);
	color: var(--color-accent-hover);
}

.mb-pagination__link--direction {
	gap: var(--space-2);
	line-height: 1.25;
	padding-inline: var(--space-3);
}

.mb-pagination__link[aria-current="page"] {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-accent-contrast);
	font-weight: 700;
}

.mb-pagination__link--disabled {
	background: transparent;
	border-color: var(--color-border);
	color: var(--color-text-muted);
	cursor: not-allowed;
	opacity: 0.72;
}

.mb-pagination__ellipsis {
	align-items: center;
	color: var(--color-text-muted);
	display: inline-flex;
	justify-content: center;
	min-height: 2.75rem;
	min-width: 2rem;
}

.mb-badge {
	align-items: center;
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border-strong);
	border-radius: var(--radius-small);
	color: var(--color-text);
	display: inline-flex;
	font-size: var(--font-size-small);
	font-weight: 700;
	line-height: 1.35;
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: var(--space-1) var(--space-2);
}

.mb-badge--accent {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.mb-badge--success {
	border-color: var(--color-success);
	color: var(--color-success);
}

.mb-notice {
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-inline-start: 0.25rem solid var(--color-secondary);
	border-radius: var(--radius-small);
	display: grid;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-5);
}

.mb-notice--success {
	border-inline-start-color: var(--color-success);
}

.mb-notice--error {
	border-inline-start-color: var(--color-error);
}

.mb-notice__label {
	color: var(--color-secondary);
	font-size: var(--font-size-small);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
}

.mb-notice--success .mb-notice__label {
	color: var(--color-success);
}

.mb-notice--error .mb-notice__label {
	color: var(--color-error);
}

.mb-notice__body > :last-child {
	margin-block-end: 0;
}

.mb-disclosure {
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-small);
}

.mb-disclosure__summary {
	cursor: pointer;
	font-weight: 700;
	line-height: 1.4;
	min-height: 3rem;
	padding: var(--space-3) var(--space-4);
}

.mb-disclosure__summary::marker {
	color: var(--color-accent);
}

.mb-disclosure[open] .mb-disclosure__summary {
	border-block-end: var(--border-width) solid var(--color-border);
}

.mb-disclosure__content {
	padding: var(--space-4);
}

.mb-disclosure__content > :last-child {
	margin-block-end: 0;
}