/*
 * Same approach as the material calculator: self-contained tokens, not a
 * dependency on theme button classes — but Woodmart-aware, same as the
 * calculator: text/border/surface tokens read the theme's own
 * --color-gray-N / --brdcolor-gray-N / --bgcolor-gray-N scale first. The
 * WhatsApp green is a deliberate exception to "restrained neutral" — it's
 * the channel's own identity mark (like an envelope icon for email), not
 * decoration, so it stays brand-true rather than being reinterpreted in the
 * store's palette.
 */

.was-widget {
	--was-ink: var(--color-gray-900, oklch(0.20 0 0));
	/* Mixed 30% toward ink for the same reason as the sibling calculator
	   plugin: Woodmart's real gray-500 (#767676) sits right at the 4.5:1 AA
	   line with no safety margin. Only used on a decorative aria-hidden
	   icon today, but kept consistent in case that changes. */
	--was-muted: color-mix(in oklch, var(--color-gray-500, oklch(0.40 0 0)), var(--color-gray-900, oklch(0.20 0 0)) 30%);
	--was-border: var(--brdcolor-gray-300, oklch(0.85 0 0));
	--was-surface: var(--bgcolor-gray-100, oklch(0.97 0 0));
	--was-focus: var(--wd-primary-color, oklch(0.58 0.19 258));
	--was-accent: #25d366;
	--was-accent-ink: #0b5a34;
	--was-accent-bg: #e9fbf0;
	--was-accent-bg-hover: #d5f6e1;

	margin: 16px 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.was-disclosure {
	display: block;
}

/*
 * min-height and the icon/chevron dimensions below are forced with
 * !important for the same reason documented at length in the sibling
 * calculator plugin's CSS: Woodmart's own `button`/`svg` resets win the
 * cascade over a plain class selector. border-radius reads the theme's
 * real button-radius token (with the pill fallback this widget always had)
 * instead of a bare hardcoded value, so it stays visually consistent with
 * the calculator's buttons and the theme's own "Adicionar ao carrinho".
 */
.was-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px !important;
	padding: 10px 18px !important;
	border: 1px solid transparent;
	border-radius: var(--btn-brd-radius, 999px) !important;
	background: var(--was-accent-bg);
	color: var(--was-accent-ink);
	font-weight: 600;
	font-size: 0.9375rem;
	list-style: none;
	cursor: pointer;
	user-select: none;
	transition: background-color 180ms ease-out;
}

.was-trigger::-webkit-details-marker {
	display: none;
}

.was-trigger:hover {
	background: var(--was-accent-bg-hover);
}

.was-trigger:focus-visible {
	outline: 2px solid var(--was-focus);
	outline-offset: 2px;
}

.was-trigger-icon {
	flex: none;
	width: 20px !important;
	height: 20px !important;
	color: var(--was-accent);
	fill: currentColor;
}

.was-trigger-chevron {
	flex: none;
	width: 16px !important;
	height: 16px !important;
	transition: transform 180ms ease-out;
}

.was-disclosure[open] .was-trigger-chevron {
	transform: rotate(180deg);
}

/* Normal document flow, not position:absolute — a floating popover would
   get clipped by any ancestor with overflow:hidden (product galleries,
   tabs), which we can't audit across every theme. Growing inline is the
   safe default here. */
.was-menu {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 10px;
	padding: 6px;
	max-width: 360px;
	border: 1px solid var(--was-border);
	border-radius: 10px;
	background: #fff;
}

.was-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 9px 10px;
	border-radius: 7px;
	color: var(--was-ink);
	text-decoration: none;
	font-size: 0.875rem;
	transition: background-color 150ms ease-out;
}

.was-menu-item:hover {
	background: var(--was-surface);
}

.was-menu-item:focus-visible {
	outline: 2px solid var(--was-focus);
	outline-offset: -2px;
	background: var(--was-surface);
}

.was-menu-icon {
	flex: none;
	width: 18px !important;
	height: 18px !important;
	color: var(--was-muted);
}

@media (max-width: 480px) {
	.was-menu {
		max-width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.was-trigger-chevron {
		transition-duration: 0.01ms;
	}
}