/* ── Gemeinsames Modal-Grundgerüst (Wishlist & Compare) ──────────── */
body.wcco-modal-open { 
	overflow: hidden; 
}
.wcco-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;

	&[hidden] { 
		display: none; 
	}
	.wcco-modal__overlay {
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, .55);
		cursor: pointer;
	}
	.wcco-modal__inner {
		position: relative;
		background: #fff;
		border-radius: 4px;
		box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
		width: 95%;
		max-width: 1280px;
		max-height: 90svh;
		overflow: auto;
		display: flex;
		flex-direction: column;

		.wcco-modal__header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: clamp(15px, 2vw, 25px);
			border-bottom: 1px solid #e0e0e0;
			position: sticky;
			top: 0;
			background: #fff;
			z-index: 1;

			h3 {
				padding: 0;
			}
			.wcco-modal__close {
				background: none;
				border: none;
				font-size: 1.2rem;
				cursor: pointer;
				line-height: 1;
				padding: 4px 8px;
				color: #555;

				&:hover { 
					color: #000; 
				}
			}
		}
		.wcco-modal__footer {
			align-items: center;
			background: #fff;
			border-top: 1px solid #e0e0e0;
			bottom: 0;
			display: flex;
			gap: 8px;
			justify-content: space-between;
			padding: 12px 20px;
			position: sticky;
			z-index: 1;

			.wcco-share-url-input {
				flex: 1;
				min-width: 0;
				padding: 6px 8px;
				border: 1px solid #ccc;
				border-radius: 3px;
				font-size: .82rem;
				color: #333;
				background: #f9f9f9;
				cursor: text;
			}
		}
		.wcco-btn-action {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			padding: 7px 14px;
			background: none;
			border: 1px solid #ccc;
			border-radius: 3px;
			cursor: pointer;
			font-size: .85rem;
			color: #555;
			transition: background .15s, border-color .15s, color .15s;

			&:hover {
				background: #f5f5f5;
				border-color: #999;
				color: #1a1a1a;
			}
		}
	}
	.wcco-modal__inner--wide { 
		width: min(96vw, 960px); 
	}
}

.wcco-empty-notice,
.wcco-loading {
	padding: 20px 0;
	text-align: center;
	color: #777;
}

/* ── Responsive ───────────────────── */
@media all and (max-width: 500px) {
	.wcco-share-url-input {
		display: none;
	}
}

/* ── Alert (gestaltete Alternative zu window.alert) ──────────────── */
.wcco-alert {
	background: #1a1a1a;
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
	color: #fff;
	font-size: calc(var(--text-fs) - 2px);
	left: 50%;
	max-width: 90vw;
	opacity: 0;
	padding: 12px 20px;
	pointer-events: none;
	position: fixed;
	text-align: center;
	top: clamp(25px, 10vh, 100px);
	transform: translate(-50%, 12px);
	transition: opacity .25s ease, transform .25s ease;
	z-index: 100000;

    &.wcco-alert--visible {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}