/* ══ Marketplace header dropdowns: account, Wishlist, Checkout ═══════════════════
 *
 * Loaded from views/partials/wishlist-menu.ejs, the one piece every marketplace header
 * includes, so it reaches all of those pages and comes after their own stylesheets.
 *
 * Each page carries its own mix of older header stylesheets, and below 992px they
 * each placed the three panels differently: anchored to a different icon, a different
 * width, sometimes half off the screen. Here all three hang from the right edge of the
 * icon row (.searchnav-links), share one width that always fits the screen, and use a
 * smaller button. The arrow is moved under the icon that was opened by
 * assets/js/header-dropdowns.js, which sets --nr-arrow-right.
 */

/* The arrow: one ▲ for all three (all widths). The older stylesheets each drew it their
   own way, and where two of them meet it got a top AND a bottom border plus a 180deg
   turn, so it showed as ▼ pointing into the header. */
.searchnav-links > .nav-item > .resources-dropdown::after {
	border-left: 16px solid transparent !important;
	border-right: 16px solid transparent !important;
	border-bottom: 13px solid #fff !important;
	border-top: 0 !important;
	rotate: none !important;
	transform: none !important;
}

/* ...placed under whichever icon opened the panel */
.searchnav-links > .nav-item > .resources-dropdown.nr-arrow::after {
	right: var(--nr-arrow-right) !important;
	left: auto !important;
}

@media (max-width: 991.98px) {
	.searchnav-links {
		position: relative;
	}

	/* Static items, so the panels position against the whole icon row, not one icon */
	.searchnav-links > .nav-item.dropdown {
		position: static !important;
	}

	.searchnav-links > .nav-item.dropdown > .dropdown-menu.resources-dropdown.nav-dropdowns {
		position: absolute !important;
		top: 100% !important;
		/* --nr-shift: set by the script when a page's layout leaves the icon row away
		   from the screen edge and the panel would run off the side */
		right: calc(0px - var(--nr-shift, 0px)) !important;
		left: auto !important;
		bottom: auto !important;
		transform: none !important;
		margin: 0 !important;
		width: min(400px, calc(100vw - 32px)) !important;
		min-width: 0 !important;
		max-width: none !important;
	}

	/* The white card inside fills the panel instead of keeping its desktop width */
	.searchnav-links > .nav-item.dropdown > .dropdown-menu.resources-dropdown > :first-child {
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		box-sizing: border-box;
	}

	/* Clear Cart | Checkout side by side, like the other two panels (some pages stack them) */
	.searchnav-links .checkuot-dropdown-box .checkout-btns {
		display: flex !important;
		flex-direction: row !important;
	}
	.searchnav-links .checkuot-dropdown-box .checkout-btns > * {
		flex: 1 1 0;
		min-width: 0;
	}

	/* Smaller buttons. Clear Cart has its size inline, hence !important. */
	.searchnav-links .resources-dropdown .btn,
	.searchnav-links .resources-dropdown .clear-cart-btn {
		height: 48px !important;
		min-height: 48px !important;
		padding: 0 12px !important;
		font-size: 16px !important;
		line-height: 1.2 !important;
		white-space: nowrap;
		display: flex !important;
		align-items: center;
		justify-content: center;
	}
}

@media (max-width: 400px) {
	.searchnav-links .resources-dropdown .btn,
	.searchnav-links .resources-dropdown .clear-cart-btn {
		font-size: 15px !important;
	}
}