/*
 * Het accountmenu in de header (ingelogd), in de stijl van de
 * mini-winkelmand ernaast (winkelmand.css): mint met petrol tekst, hover het
 * donkere oranje en een licht petrol vlak, en dezelfde rand, ronding en
 * schaduw als dat paneel. Live sinds 9 oktober 2026; daarvoor
 * donker #29333C met witte tekst, en nog eerder wit met grijze lijnen.
 *
 * De basis-CSS (header-account-dropdown-lazy van Blocksy Companion) laadt
 * pas met JavaScript, dus na dit bestand. Daarom het voorvoegsel dat Blocksy
 * zelf voor Customizer-instellingen gebruikt, net als in winkelmand.css.
 */
[data-header*="type-1"] [data-id="account"] .ct-header-account-dropdown {
	--dropdown-background-color: var(--theme-palette-color-7, #eef5f2);
	--dropdown-items-background-hover-color: rgba(49, 84, 91, 0.06);
	--dropdown-items-background-active-color: rgba(49, 84, 91, 0.06);
	--theme-text-color: var(--theme-palette-color-10, #31545b);
	--theme-link-initial-color: var(--theme-palette-color-10, #31545b);
	--theme-link-hover-color: #c64217;
	--theme-link-active-color: #c64217;
	--theme-border: 1px dashed rgba(49, 84, 91, 0.2);
	border-radius: 14px;
	box-shadow: inset 0 0 0 1px #d6e5df, 0 12px 32px rgba(36, 64, 63, 0.18);
}

/*
 * Live sinds 27 oktober 2026 (nrd_accountmenu_b in
 * mu-plugins/nrd/accountmenu.php): breder, "Hoi Aart" in Acme, je laatste
 * bestelling als wit blok met de foto's en Opnieuw bestellen, regels met een
 * icoon en een pijltje, en onderaan "Niet Aart? Uitloggen". Tot de livegang
 * stond .nrd-staging achter [data-header*="type-1"]; zonder gaven alle 64
 * onderdelen van de popup dezelfde berekende stijl, met de CSS van Blocksy
 * Companion geladen.
 *
 * Blocksy zet elke span in de kop op flex-richting kolom
 * (.ct-header-account-user-info span); elke span hieronder zegt daarom zelf
 * hoe hij staat.
 */
[data-header*="type-1"] [data-id="account"] .ct-header-account-dropdown {
	width: 336px;
	padding: 6px;
}

[data-header*="type-1"] [data-id="account"] .ct-header-account-user-info .ct-menu-link {
	display: block;
	width: 100%;
	margin: 0;
	padding: 14px 14px 0;
}

[data-header*="type-1"] [data-id="account"] .ct-header-account-dropdown .ct-header-account-user-info b {
	color: var(--theme-palette-color-10, #31545b);
	font-family: Acme, sans-serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.15;
}

[data-header*="type-1"] [data-id="account"] .ct-header-account-dropdown .ct-header-account-user-info small {
	margin-top: 3px;
	color: #557277;
	font-size: 13px;
	font-weight: 600;
}

[data-header*="type-1"] [data-id="account"] .nrd-am-best {
	display: block;
	margin: 12px -14px 6px;
	padding: 14px;
	border-radius: 12px;
	background: #fff;
	box-shadow: inset 0 0 0 1px #d6e5df;
	color: var(--theme-palette-color-2, #121723);
	font-size: 15px;
	line-height: 1.35;
}

[data-header*="type-1"] [data-id="account"] .nrd-am-best__boven {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 8px;
}

[data-header*="type-1"] [data-id="account"] .nrd-am-best__titel {
	color: var(--theme-palette-color-10, #31545b);
	font-family: Acme, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none;
}

[data-header*="type-1"] [data-id="account"] .nrd-am-status {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	background: #eef5f2;
	color: var(--theme-palette-color-10, #31545b);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
}

/* Dezelfde kleuren als de labels op Mijn account (account.css). */
[data-header*="type-1"] [data-id="account"] .nrd-am-status--completed {
	background: #dcebe4;
}

[data-header*="type-1"] [data-id="account"] :is(.nrd-am-status--processing, .nrd-am-status--on-hold, .nrd-am-status--pending) {
	background: #fbefcc;
	color: #5c4a14;
}

[data-header*="type-1"] [data-id="account"] :is(.nrd-am-status--cancelled, .nrd-am-status--refunded, .nrd-am-status--failed) {
	background: #edf0f0;
	color: #557277;
}

[data-header*="type-1"] [data-id="account"] .nrd-am-best__meta {
	display: flex;
	flex-flow: row wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0 12px;
	margin-top: 2px;
	color: #557277;
	font-size: 13px;
	font-weight: 600;
}

[data-header*="type-1"] [data-id="account"] .nrd-am-best__fotos {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

[data-header*="type-1"] [data-id="account"] .nrd-am-foto {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	width: 60px;
	height: 60px;
	border: 1px solid #d6e5df;
	border-radius: 10px;
	background: #fff;
}

[data-header*="type-1"] [data-id="account"] .nrd-am-foto img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 9px;
	object-fit: contain;
}

[data-header*="type-1"] [data-id="account"] .nrd-am-foto__aantal {
	position: absolute;
	right: 3px;
	bottom: 3px;
	display: block;
	min-width: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--theme-palette-color-10, #31545b);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

[data-header*="type-1"] [data-id="account"] .nrd-am-foto--rest {
	color: var(--theme-palette-color-10, #31545b);
	font-size: 15px;
	font-weight: 700;
}

/* Oranje, want hiermee bestel je (DESIGN.md, De Bestelknop Regel); 19px vet
   omdat wit op oranje 3,8:1 is. */
[data-header*="type-1"] [data-id="account"] .nrd-am-opnieuw {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	margin-top: 12px;
	padding: 0 14px;
	border-radius: 6px;
	background: var(--theme-palette-color-3, #e94e1b);
	color: #fff;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
	transition: background-color 0.15s ease-out;
}

[data-header*="type-1"] [data-id="account"] .nrd-am-opnieuw:hover {
	background: #c64217;
	color: #fff;
}

[data-header*="type-1"] [data-id="account"] .nrd-am-opnieuw__icoon {
	flex: none;
	width: 18px;
	height: 18px;
}

[data-header*="type-1"] [data-id="account"] .nrd-am-bekijk {
	color: var(--theme-palette-color-10, #31545b);
	font-size: 14px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* De regels: icoon, naam, pijltje; bij hover een wit vlak. */
[data-header*="type-1"] [data-id="account"] .ct-header-account-dropdown .menu-item > a.ct-menu-link {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	margin: 0;
	padding: 7px 10px 7px 12px;
	border-radius: 10px;
	color: var(--theme-palette-color-2, #121723);
	font-size: 15px;
	font-weight: 700;
	transition: background-color 0.15s ease-out;
}

[data-header*="type-1"] [data-id="account"] .ct-header-account-dropdown .menu-item:hover > a.ct-menu-link,
[data-header*="type-1"] [data-id="account"] .ct-header-account-dropdown .menu-item[class*="current-menu-"] > a.ct-menu-link {
	background: #fff;
	color: var(--theme-palette-color-2, #121723);
}

[data-header*="type-1"] [data-id="account"] .nrd-am-icoon {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--theme-palette-color-10, #31545b);
}

[data-header*="type-1"] [data-id="account"] .nrd-am-pijl {
	flex: none;
	width: 16px;
	height: 16px;
	margin-left: auto;
	color: var(--theme-palette-color-1, #749b8d);
}

[data-header*="type-1"] [data-id="account"] .ct-header-account-divider {
	margin: 6px 14px;
}

[data-header*="type-1"] [data-id="account"] .nrd-am-voet {
	color: #557277;
	font-size: 13px;
	font-weight: 600;
}

[data-header*="type-1"] [data-id="account"] .nrd-am-voet__link {
	color: var(--theme-palette-color-10, #31545b);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * Aart, 30 oktober 2026: op een laag scherm viel de onderkant van de popup
 * buiten beeld. Hij stopt nu 16 px boven de onderrand en de
 * inhoud scrolt, net als het mini-mandje (winkelmand.css). --nrd-am-boven is
 * de onderkant van het poppetje, zie mu-plugins/nrd/assets/accountmenu.js;
 * zonder die maat rekent het met 140 px header. De marge in de calc is de
 * margin-top van Blocksy.
 */
[data-header*="type-1"] [data-id="account"] .ct-header-account-dropdown {
	max-height: calc(100dvh - var(--nrd-am-boven, 140px) - var(--sticky-state-dropdown-top-offset, var(--dropdown-top-offset, 15px)) - 16px);
	overflow: hidden auto;
	scrollbar-color: rgba(49, 84, 91, 0.3) transparent;
	scrollbar-width: thin;
}

/*
 * De brug van Blocksy over de ruimte tussen poppetje en popup is een ::before
 * boven het paneel, en die knipt de overflow hierboven weg. De popup ging dan
 * dicht op weg ernaartoe, dus de brug hangt nu aan het item zelf. 32 px is
 * ruim: het paneel ligt eroverheen (z-index 15 in Blocksy). Alleen voor
 * ingelogden: gasten hebben geen popup, en voor hen lag er anders een
 * onzichtbaar vlak onder het poppetje dat de eerste klik opving.
 */
[data-header*="type-1"].logged-in [data-id="account"]:hover::after {
	content: "";
	position: absolute;
	top: 100%;
	right: var(--theme-submenu-inline-offset, -20px);
	width: 336px;
	height: 32px;
}