/**
 * UnicaSuite — Mini Cart
 *
 * Dropdown cart styling.  Follows the same absolute-positioned dropdown
 * pattern used by .header-account__dropdown (opacity + transform + is-open).
 *
 * Design tokens used:
 *   --color-*  --space-*  --radius-*  --text-*  --font-*  --shadow-*
 *   --transition-*
 *
 * @package unicasuite
 */

/* ===================================================================
   1. Wrapper — establishes positioning context
   =================================================================== */
.mini-cart {
	position: relative;
}

/* ===================================================================
   2. Trigger — inherits .btn--icon; count badge is additive
   =================================================================== */
.mini-cart__trigger {
	position: relative;
}

.mini-cart__count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	background: var(--color-primary);
	color: var(--color-on-primary);
	font-size: var(--text-xs);
	font-weight: var(--font-bold);
	line-height: 1;
	border-radius: var(--radius-full);
	pointer-events: none;
	transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.mini-cart__count.is-hidden {
	opacity: 0;
	transform: scale(0);
}

/* ===================================================================
   3. Panel — same spring-in pattern as .header-account__dropdown
   =================================================================== */
.mini-cart__panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 340px;
	max-height: 480px;
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-xl);
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px) scale(0.97);
	transition: opacity var(--transition-fast),
	            transform var(--transition-fast),
	            visibility var(--transition-fast);
	pointer-events: none;
}

.mini-cart__panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* ===================================================================
   4. Header — title + close icon
   =================================================================== */
.mini-cart__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4) var(--space-4) var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.mini-cart__title {
	font-size: var(--text-base);
	font-weight: var(--font-semibold);
	color: var(--color-text-primary);
	margin: 0;
}

.mini-cart__close {
	flex-shrink: 0;
}

/* ===================================================================
   5. Body — scrollable item list, totals, actions
   =================================================================== */
.mini-cart__body {
	overflow-y: auto;
	flex: 1 1 auto;
	overscroll-behavior: contain;
}

/* ===================================================================
   6. Item list
   =================================================================== */
.mini-cart__items {
	list-style: none;
	margin: 0;
	padding: var(--space-3) var(--space-4);
}

.mini-cart__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) 0;
	transition: opacity var(--transition-fast);
}

.mini-cart__item + .mini-cart__item {
	border-top: 1px solid var(--color-border-light, var(--color-border));
}

/* Thumbnail */
.mini-cart__item-img {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-surface-alt, var(--color-bg));
}

.mini-cart__item-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Info block */
.mini-cart__item-info {
	flex: 1 1 0%;
	min-width: 0;
}

.mini-cart__item-name {
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	color: var(--color-text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mini-cart__item-meta {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: 2px;
	font-size: var(--text-xs);
	color: var(--color-text-secondary);
}

.mini-cart__item-price {
	font-weight: var(--font-semibold);
	color: var(--color-text-primary);
}

/* Remove button */
.mini-cart__item-remove {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-md);
	color: var(--color-text-muted);
	transition: color var(--transition-fast), background var(--transition-fast);
}

.mini-cart__item-remove:hover {
	color: var(--color-error);
	background: rgba(var(--color-error-rgb), 0.08);
}

/* ===================================================================
   7. Totals
   =================================================================== */
.mini-cart__totals {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-3) var(--space-4);
	border-top: 1px solid var(--color-border);
}

.mini-cart__totals-label {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
}

.mini-cart__totals-value {
	font-size: var(--text-base);
	font-weight: var(--font-bold);
	color: var(--color-text-primary);
}

/* ===================================================================
   8. Action buttons
   =================================================================== */
.mini-cart__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4) var(--space-4);
}

.mini-cart__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 var(--space-4);
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	border-radius: var(--radius-lg);
	text-decoration: none;
	transition: background var(--transition-fast), color var(--transition-fast),
	            box-shadow var(--transition-fast);
	cursor: pointer;
}

.mini-cart__btn--primary {
	background: var(--color-primary);
	color: var(--color-on-primary);
}

.mini-cart__btn--primary:hover {
	background: var(--color-primary-dark);
}

.mini-cart__btn--outline {
	background: transparent;
	color: var(--color-text-primary);
	border: 1px solid var(--color-border);
}

.mini-cart__btn--outline:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* ===================================================================
   9. Empty state
   =================================================================== */
.mini-cart__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	padding: var(--space-8) var(--space-4);
	text-align: center;
	color: var(--color-text-muted);
}

.mini-cart__empty svg {
	opacity: 0.45;
}

.mini-cart__empty p {
	margin: 0;
	font-size: var(--text-sm);
}

/* ===================================================================
   10. Responsive — full-width on small screens
   =================================================================== */
@media (max-width: 480px) {
	.mini-cart__panel {
		position: fixed;
		inset: 0;
		width: 100%;
		max-height: 100%;
		border-radius: 0;
		transform: translateY(16px);
	}

	.mini-cart__panel.is-open {
		transform: translateY(0);
	}
}