@charset "UTF-8";
/* Quick-order — self-contained (was Bootstrap list-group/collapse/toast/spinner + theme-icon-vars) */

.wcp-qo__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wcp-qo__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--wcp-color-border, #e5e7eb);
}
.wcp-qo h5 { margin: 0; }
.wcp-qo__head-price {
	margin-left: auto;
	text-align: right;
}
.wcp-qo .product-info {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-grow: 1;
	min-height: 2.5rem;
}
.wcp-qo .product-info[data-wcp-collapse] { cursor: pointer; }
.wcp-qo .variation-info { color: var(--wcp-color-muted, #6c757d); }
.wcp-qo .price {
	margin-left: auto;
	text-align: right;
}
.wcp-qo .price ins { text-decoration: none; }
.wcp-qo .is-loading {
	color: transparent;
	background-color: var(--wcp-color-light, #f5f4f0);
	border-radius: var(--wcp-radius, 0.375rem);
	animation: wcp-qo-pulse 1.2s ease-in-out infinite;
}
@keyframes wcp-qo-pulse { 50% { opacity: 0.4; } }

/* knoppenrij naast een product */
.wcp-qo .buttons {
	display: flex;
	gap: 1rem;
	align-items: center;
	margin-left: 0.5rem;
}
@media (max-width: 35.99rem) {
	.wcp-qo .buttons.active {
		position: absolute;
		right: 0;
		z-index: 10;
		background-color: #fff;
	}
	.wcp-qo .details { padding-right: 3.5rem; }
	.wcp-qo__item { position: relative; }
}

/* vierkante bedienknoppen (was .btn.minus/.plus/.text/.toggle) */
.wcp-qo .qo-btn {
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--wcp-color-border, #e5e7eb);
	border-radius: var(--wcp-radius, 0.375rem);
	background-color: #fff;
	color: var(--wcp-color-dark, #374151);
	line-height: 1;
	cursor: pointer;
}
.wcp-qo .qo-btn.minus:after,
.wcp-qo .qo-btn.plus:after,
.wcp-qo .qo-btn.toggle:after {
	content: '';
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: center;
	width: 1rem;
	height: 1rem;
	display: block;
	background-color: currentColor;
}
.wcp-qo .qo-btn.minus:after {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8'/%3E%3C/svg%3E");
}
.wcp-qo .qo-btn.minus.trash:after {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z'/%3E%3Cpath d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z'/%3E%3C/svg%3E");
}
.wcp-qo .qo-btn.minus.trash:hover { color: #9b1c1c; }
.wcp-qo .qo-btn.plus:after {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2'/%3E%3C/svg%3E");
}
.wcp-qo .qo-btn.toggle:after {
	transition: all 0.2s ease-in-out;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
}
.wcp-qo div[aria-expanded="true"] .toggle:after { transform: rotate(180deg); }

/* variaties-paneel (was Bootstrap .collapse/.show) */
.wcp-collapse-panel { display: none; }
.wcp-collapse-panel.is-open { display: block; }
.wcp-qo__variations { width: 100%; }
.wcp-qo__varlist {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.wcp-qo__varitem {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.wcp-qo__vartoggle {
	margin-left: auto;
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

/* aantal-select (was .form-select) */
.wcp-qo .qo-select {
	width: 4rem;
	height: 2.5rem;
	padding: 0.5rem 1.5rem 0.5rem 0.5rem;
	line-height: 1;
	font-weight: var(--wcp-font-weight-bold, 700);
	text-align: center;
	border: 1px solid var(--wcp-color-border, #e5e7eb);
	border-radius: var(--wcp-radius, 0.375rem);
	background-color: #fff;
}

.wcp-qo .thumb { width: 2rem; height: 2rem; }
.wcp-qo .variation-element {
	width: 1rem;
	height: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wcp-qo .variation-element:after {
	content: '';
	mask-repeat: no-repeat;
	mask-size: contain;
	width: 1rem;
	height: 1rem;
	display: block;
	background-color: currentColor;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.5 1.5A.5.5 0 0 0 1 2v4.8a2.5 2.5 0 0 0 2.5 2.5h9.793l-3.347 3.346a.5.5 0 0 0 .708.708l4.2-4.2a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 8.3H3.5A1.5 1.5 0 0 1 2 6.8V2a.5.5 0 0 0-.5-.5'/%3E%3C/svg%3E");
}

/* totaalbalk (was sticky-bottom + rounded) */
.wcp-qo__totalbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding: 1.5rem;
	margin-top: 1rem;
	border-radius: var(--wcp-radius, 0.375rem);
	position: sticky;
	bottom: 0;
	background-color: var(--wcp-color-light, #f5f4f0);
}
.wcp-qo__checkout { margin-left: auto; }

/* laad-status (was .spinner-border) */
.wcp-qo__loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 2rem 0;
}
.wcp-spinner {
	width: 5rem;
	height: 5rem;
	border: 0.25rem solid var(--wcp-color-light, #f5f4f0);
	border-top-color: var(--wcp-color-primary, #873EFF);
	border-radius: 50%;
	animation: wcp-spin 0.8s linear infinite;
}
@keyframes wcp-spin { to { transform: rotate(360deg); } }

/* toasts (was Bootstrap .toast; container levert de add-on zelf in wp_footer) */
.toast-container {
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	z-index: 1090;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.wcp-toast {
	background-color: #fff;
	border: 1px solid var(--wcp-color-border, #e5e7eb);
	border-radius: var(--wcp-radius, 0.375rem);
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
	max-width: 22rem;
}
.wcp-toast__body { padding: 0.75rem 1rem; }