/* ============================================================
   Thema modern: inloggen, registreren, account, infopagina's,
   het "toegevoegd"-venster (toast) en de cookiebanner.
   Enkel opmaak; formulieren, scripts en toestemming blijven.
   ============================================================ */

/* ---------- Inloggen ---------- */
main section#inloggen {
	background: linear-gradient(180deg, var(--shop-bg-2) 0%, var(--shop-bg-1) 100%);
}
main section#inloggen .column.card {
	flex: 0 1 28rem;
	padding: var(--shop-space-6) !important;
	border-radius: var(--shop-r-lg);
	box-shadow: var(--shop-shadow-lg);
}
main section#inloggen .title.is-3 { font-size: var(--shop-text-2xl); margin-bottom: var(--shop-space-2); }
main section#inloggen .subtitle { color: var(--shop-fg-3); margin-bottom: var(--shop-space-5); }
main :is(#inloggen, #registreren, #account, #contact) .control.has-icons-left .icon { color: var(--shop-fg-3); height: 2.75rem; }
main :is(#inloggen, #registreren, #account, #contact) .control.has-icons-left .icon svg { width: 18px; height: 18px; }
main :is(#inloggen, #registreren, #account, #contact) .control.has-icons-left .input { padding-left: 2.75rem; }
main :is(#inloggen, #registreren, #account) .button.is-fullwidth { min-height: 3rem; }

/* ---------- Registreren ---------- */
main section#info-registreren .container,
main section#registreren .section > .container { max-width: 52rem !important; }
main section#info-registreren .title { margin-bottom: var(--shop-space-3) !important; }
main section#info-registreren .subtitle { margin-top: 0 !important; text-align: center; }
main section#registreren { background: var(--shop-bg-2) !important; padding-block: var(--shop-space-4); }
main section#registreren .section { background: transparent !important; padding-block: var(--shop-space-3); }
main section#registreren .section > .container {
	padding: var(--shop-space-6);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-r-card);
	background: var(--shop-bg-1);
	box-shadow: var(--shop-shadow-sm);
}
main section#registreren .step { background: transparent !important; color: var(--shop-fg-1) !important; }
main section#registreren .step h2 { font-family: var(--shop-font-display); font-size: var(--shop-text-xl); font-weight: var(--shop-weight-bold); color: var(--shop-fg-1) !important; }
main section#registreren .step > div:first-child > div { border-color: var(--shop-brand) !important; background: var(--shop-brand) !important; }
main section#registreren .step > div:first-child p { background: transparent !important; color: var(--shop-fg-on-brand) !important; font-weight: var(--shop-weight-semibold); }
main section#registreren .omschrijving p,
main section#registreren .help { color: var(--shop-fg-3); }

/* ---------- Account ---------- */
main section#account .menu .menu-label {
	color: var(--shop-fg-3);
	font-size: var(--shop-text-xs);
	letter-spacing: 0.08em;
}
main section#account .menu .menu-list a {
	border-radius: var(--shop-r-sm);
	color: var(--shop-fg-2);
	padding: var(--shop-space-2) var(--shop-space-3);
}
main section#account .menu .menu-list a:hover { background: var(--shop-bg-2); color: var(--shop-fg-1); }
main section#account .menu .menu-list a.is-active {
	background: var(--shop-accent-quiet) !important;
	color: var(--shop-brand-text) !important;
	font-weight: var(--shop-weight-semibold);
}
main section#account .card { border-radius: var(--shop-r-card); box-shadow: var(--shop-shadow-sm); }
main section#account .card:hover { box-shadow: var(--shop-shadow-md); }
/* statusbadges met de statustokens */
main section#account .tag.is-rounded:not(body) { box-shadow: none; padding-inline: 0.75em; }
main section#account .tag.is-primary:not(body) { background: var(--shop-warn-quiet) !important; color: var(--shop-warn) !important; }
main section#account .tag.is-success:not(body) { background: var(--shop-pos-quiet) !important; color: var(--shop-pos) !important; }
main section#account .tag.is-danger:not(body) { background: var(--shop-neg-quiet) !important; color: var(--shop-neg) !important; }
main section#account .table { border-radius: var(--shop-r-md); overflow: hidden; }
main section#account .table th { color: var(--shop-fg-1); font-size: var(--shop-text-sm); }

/* ---------- Infopagina's: leesbare tekst ---------- */
main article.content {
	max-width: 46rem;
	margin-inline: auto;
	color: var(--shop-fg-2);
	font-size: var(--shop-text-lg);
	line-height: 1.7;
}
main article.content :is(h2, h3, h4, .title) {
	margin-top: var(--shop-space-6) !important;
	margin-bottom: var(--shop-space-2) !important;
	color: var(--shop-fg-1);
	font-family: var(--shop-font-display);
	letter-spacing: var(--shop-tracking-tight);
}
main article.content > :first-child { margin-top: 0 !important; }
main article.content h3,
main article.content .title.is-5 { font-size: var(--shop-text-xl); }
main article.content p { margin-bottom: var(--shop-space-4); }
main article.content a { text-decoration: underline; text-decoration-thickness: 1px; }
main article.content ul { margin-left: 1.25em; }
main article.content li::marker { color: var(--shop-brand); }
main article.content details {
	margin-bottom: var(--shop-space-2);
	padding: var(--shop-space-3) var(--shop-space-4);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-r-md);
}
main article.content summary { font-weight: var(--shop-weight-semibold); color: var(--shop-fg-1); cursor: pointer; }
main section:has(> .container article.content) .title.is-3 { margin-bottom: var(--shop-space-6); }
/* contact */
main section#contact .title.is-3 { margin-bottom: var(--shop-space-3); }
main section#contact .container > .columns { max-width: 52rem; margin-inline: auto; }
main section#contact .textarea { min-height: 9rem; }
/* allergenentabel */
main #allergenenform {
	font-size: var(--shop-text-sm);
	border-collapse: separate;
	border-spacing: 0;
}
main #allergenenform thead th {
	position: sticky;
	top: 0;
	background: var(--shop-bg-2);
	color: var(--shop-fg-1);
	font-weight: var(--shop-weight-semibold);
	border-bottom: 1px solid var(--shop-border-strong);
}
main #allergenenform tbody tr:nth-child(even) td { background: var(--shop-bg-2); }
main #allergenenform td { border-color: var(--shop-border); }
/* smakenpagina */
main .smaken-overzicht h2,
main .smaken-overzicht h3 { font-family: var(--shop-font-display); color: var(--shop-fg-1); letter-spacing: var(--shop-tracking-tight); }

/* ---------- "Toegevoegd"-venster: toast (desktop) / onderblad (mobiel) ---------- */
main #added-product-modal.is-active,
#added-product-modal.is-active {
	align-items: flex-end;
	justify-content: flex-end;
	padding: var(--shop-space-5);
}
#added-product-modal .modal-background { background: rgba(20, 22, 26, 0.18) !important; }
main #added-product-modal .modal-card,
#added-product-modal .modal-card {
	width: min(26rem, 100%) !important;
	margin: 0 !important;
	border-radius: var(--shop-r-lg) !important;
	box-shadow: var(--shop-shadow-lg);
	overflow: hidden;
	animation: shop-toast-in var(--shop-dur-slow) var(--shop-ease);
}
#added-product-modal .modal-card-head { padding: var(--shop-space-4) var(--shop-space-5) var(--shop-space-2) !important; border: 0 !important; }
#added-product-modal .modal-card-title { display: flex; align-items: center; gap: var(--shop-space-2); font-size: var(--shop-text-lg) !important; font-weight: var(--shop-weight-bold); color: var(--shop-fg-1); }
#added-product-modal .modal-card-title .icon { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--shop-pos-quiet); color: var(--shop-pos) !important; }
#added-product-modal .modal-card-title .icon svg { width: 16px; height: 16px; }
#added-product-modal .modal-card-body { padding: var(--shop-space-2) var(--shop-space-5) !important; }
.shop-toast__product { display: flex; align-items: center; gap: var(--shop-space-3); }
main .shop-toast__product img,
.shop-toast__product img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--shop-r-md); }
.shop-toast__product p { margin: 0; color: var(--shop-fg-2); }
#added-product-modal .modal-card-foot { gap: var(--shop-space-2); padding: var(--shop-space-3) var(--shop-space-5) var(--shop-space-5) !important; border: 0 !important; }
#added-product-modal .modal-card-foot .button { flex: 1; margin: 0 !important; }
@keyframes shop-toast-in {
	from { transform: translateY(16px); opacity: 0; }
	to { transform: none; opacity: 1; }
}

/* ---------- Cookiebanner (include/req/cookiebanner.php) ---------- */
.shop-consent {
	position: fixed;
	left: var(--shop-space-4);
	bottom: var(--shop-space-4);
	z-index: 2147483000;
	width: min(26rem, calc(100% - 2 * var(--shop-space-4)));
	font-family: var(--shop-font-sans);
}
.shop-consent__card {
	padding: var(--shop-space-5);
	border: 1px solid var(--shop-border);
	border-radius: var(--shop-r-lg);
	background: var(--shop-bg-1);
	box-shadow: var(--shop-shadow-lg);
	color: var(--shop-fg-2);
	font-size: var(--shop-text-sm);
	line-height: var(--shop-leading-body);
	animation: shop-toast-in var(--shop-dur-slow) var(--shop-ease);
}
.shop-consent__title { display: flex; align-items: center; gap: var(--shop-space-2); margin-bottom: var(--shop-space-2); color: var(--shop-fg-1); font-weight: var(--shop-weight-bold); font-size: var(--shop-text-md); }
.shop-consent__title i { color: var(--shop-brand-text); }
.shop-consent__text a { color: var(--shop-brand-text); text-decoration: underline; }
.shop-consent__actions { display: flex; gap: var(--shop-space-2); margin-top: var(--shop-space-4); }
.shop-consent__actions .button {
	flex: 1;
	min-height: 2.75rem;
	border-radius: var(--shop-r-pill);
	font-weight: var(--shop-weight-semibold);
	font-family: var(--shop-font-sans);
}
/* weigeren is even makkelijk als accepteren: zelfde grootte, enkel minder kleur */
.shop-consent__actions .button:not(.is-primary) { background: var(--shop-bg-1); color: var(--shop-fg-1); border: 1.5px solid var(--shop-border-strong); }
.shop-consent__actions .button.is-primary { background: var(--shop-brand); color: var(--shop-fg-on-brand); border: 0; }
.shop-consent__actions .button.is-primary:hover { background: var(--shop-brand-deep); color: var(--shop-fg-on-brand-deep); }

@media screen and (max-width: 825px) {
	main #added-product-modal.is-active,
	#added-product-modal.is-active { padding: 0; }
	main #added-product-modal .modal-card,
	#added-product-modal .modal-card {
		width: 100% !important;
		border-radius: var(--shop-r-lg) var(--shop-r-lg) 0 0 !important;
		padding-bottom: env(safe-area-inset-bottom);
	}
	#added-product-modal .modal-card-head::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		width: 36px;
		height: 4px;
		margin-left: -18px;
		border-radius: 2px;
		background: var(--shop-border-strong);
	}
	.shop-consent { left: 0; right: 0; bottom: 0; width: 100%; }
	.shop-consent__card { border-radius: var(--shop-r-lg) var(--shop-r-lg) 0 0; border-bottom: 0; padding-bottom: calc(var(--shop-space-5) + env(safe-area-inset-bottom)); }
	main section#inloggen .column.card { padding: var(--shop-space-5) !important; }
	main section#registreren .section > .container { padding: var(--shop-space-4); }
}
@media (prefers-reduced-motion: reduce) {
	#added-product-modal .modal-card,
	.shop-consent__card { animation: none; }
}

/* ---------- Pagina niet gevonden (content/error/notfound.php) ---------- */
main section#notfound {
	padding-block: var(--shop-space-7);
}
main section#notfound .shop-404__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--shop-space-7);
	align-items: center;
}
main section#notfound .shop-404__code {
	font-size: var(--shop-text-sm);
	font-weight: var(--shop-weight-semibold, 600);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--shop-fg-3);
	margin-bottom: var(--shop-space-3);
}
main section#notfound .title { margin-bottom: var(--shop-space-4); }
main section#notfound .shop-404__lead {
	font-size: var(--shop-text-lg);
	color: var(--shop-fg-2);
	max-width: 34rem;
	margin-bottom: var(--shop-space-5);
}
main section#notfound .shop-404__search {
	display: flex;
	gap: var(--shop-space-2);
	max-width: 30rem;
	margin-bottom: var(--shop-space-4);
}
main section#notfound .shop-404__search .input { flex: 1; min-height: 3rem; }
main section#notfound .shop-404__search .button { min-height: 3rem; }
main section#notfound .shop-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shop-space-3);
	margin-bottom: var(--shop-space-5);
}
main section#notfound .shop-404__ghost {
	background: transparent;
	border: 1px solid var(--shop-border-strong);
	color: var(--shop-fg-1);
}
main section#notfound .shop-404__cats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shop-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
main section#notfound .shop-404__image {
	margin: 0;
	border-radius: var(--shop-r-card);
	overflow: hidden;
	background: var(--shop-bg-2);
}
main section#notfound .shop-404__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
@media (max-width: 768px) {
	main section#notfound { padding-block: var(--shop-space-5); }
	main section#notfound .shop-404__grid { grid-template-columns: minmax(0, 1fr); gap: var(--shop-space-5); }
	main section#notfound .shop-404__image { order: -1; }
	main section#notfound .shop-404__search .button { padding-inline: var(--shop-space-4); }
}