/*
 * OrderMation — Collapsible Category Tree
 *
 * Activation is gated by JS: the .om-cattree class is added by category-tree.js
 * to the widget root once the DOM is ready, so no styling leaks onto sites
 * where the JS hasn't run.
 */

/* ---------- Reset bullets / indentation ---------- */

.om-cattree,
.om-cattree ul,
.om-cattree ul.children,
.om-cattree ul.sub-menu,
.om-cattree ul.cat-item,
.om-cattree ul.wc-block-product-categories-list,
.om-cattree ul.wp-block-categories-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.om-cattree li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

/* ---------- Top-level items: bordered "card" rows ---------- */

.om-cattree > ul > li.om-cattree__item,
.om-cattree.om-cattree > li.om-cattree__item {
	border-top: 1px solid var(--om-cattree-border, #e5e7eb) !important;
}

.om-cattree > ul > li.om-cattree__item:last-child,
.om-cattree.om-cattree > li.om-cattree__item:last-child {
	border-bottom: 1px solid var(--om-cattree-border, #e5e7eb) !important;
}

/* ---------- Each row (link + toggle) ---------- */

.om-cattree .om-cattree__row {
	display: flex !important;
	align-items: stretch !important;
	gap: 0 !important;
	min-height: 2.5rem !important;
	width: 100% !important;
}

.om-cattree .om-cattree__link {
	flex: 1 1 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	padding: 0.55rem 0.5rem 0.55rem 0.75rem !important;
	color: var(--om-cattree-link, #1f2937) !important;
	text-decoration: none !important;
	font-size: 0.95rem !important;
	line-height: 1.3 !important;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.om-cattree .om-cattree__link:hover,
.om-cattree .om-cattree__link:focus {
	color: var(--om-cattree-link-hover, #b91c1c) !important;
	background-color: var(--om-cattree-row-hover, transparent) !important;
	text-decoration: none !important;
}

.om-cattree .om-cattree__link .count {
	margin-left: 0.4rem;
	color: var(--om-cattree-count, #9ca3af);
	font-size: 0.85em;
	font-weight: 400;
}

/* ---------- The chevron toggle button ---------- */

.om-cattree .om-cattree__toggle {
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 2.5rem !important;
	min-height: 2.5rem !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-left: 1px solid var(--om-cattree-border, #e5e7eb) !important;
	border-radius: 0 !important;
	color: var(--om-cattree-toggle, #6b7280) !important;
	cursor: pointer !important;
	transition: color 0.15s ease, background-color 0.15s ease;
	-webkit-appearance: none !important;
	appearance: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	font: inherit !important;
	line-height: 1 !important;
	pointer-events: auto !important;
}

.om-cattree .om-cattree__toggle:hover,
.om-cattree .om-cattree__toggle:focus {
	color: var(--om-cattree-link-hover, #b91c1c) !important;
	background-color: var(--om-cattree-row-hover, rgba(0, 0, 0, 0.04)) !important;
	outline: none !important;
}

/* The chevron itself: a small rotated square with two borders. */
.om-cattree .om-cattree__chevron {
	display: inline-block !important;
	width: 0.55rem !important;
	height: 0.55rem !important;
	border-right: 2px solid currentColor !important;
	border-bottom: 2px solid currentColor !important;
	transform: rotate(45deg) !important;
	transition: transform 0.2s ease !important;
	margin-top: -0.15rem !important;
	pointer-events: none !important; /* clicks pass through to the button */
}

.om-cattree .om-cattree__item.is-open > .om-cattree__row > .om-cattree__toggle > .om-cattree__chevron {
	transform: rotate(-135deg) !important;
	margin-top: 0.15rem !important;
}

/* ---------- Children: indented and collapsible ---------- */

.om-cattree .om-cattree__item.has-children > .om-cattree__children {
	display: none; /* JS sets inline display to win specificity */
	padding-left: 0.75rem !important;
	background-color: var(--om-cattree-children-bg, rgba(0, 0, 0, 0.02)) !important;
	border-top: 1px solid var(--om-cattree-border, #e5e7eb) !important;
}

.om-cattree .om-cattree__item.is-open > .om-cattree__children {
	display: block;
}

.om-cattree .om-cattree__children .om-cattree__row {
	min-height: 2.1rem !important;
}

.om-cattree .om-cattree__children .om-cattree__link {
	padding: 0.4rem 0.5rem 0.4rem 0.5rem !important;
	font-size: 0.9rem !important;
	color: var(--om-cattree-link-child, #374151) !important;
}

.om-cattree .om-cattree__children > .om-cattree__item:not(:last-child) > .om-cattree__row {
	border-bottom: 1px dashed var(--om-cattree-border-soft, #eef0f3) !important;
}

/* Items with no children: hide the toggle column entirely so the link
   spans the full row and parents/leaves stay visually aligned. */
.om-cattree .om-cattree__item:not(.has-children) .om-cattree__toggle {
	display: none !important;
}

/* ---------- Active state ---------- */

.om-cattree .om-cattree__item.is-current > .om-cattree__row > .om-cattree__link {
	color: var(--om-cattree-link-active, #b91c1c) !important;
	font-weight: 600 !important;
}

.om-cattree .om-cattree__item.is-current > .om-cattree__row {
	background-color: var(--om-cattree-row-active, rgba(185, 28, 28, 0.05)) !important;
}

/* ---------- Optional: heading above the widget ---------- */

.om-cattree-heading {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0 0 0.5rem;
	padding: 0 0 0.4rem;
	border-bottom: 2px solid var(--om-cattree-link, #1f2937);
}

/* ---------- Dark scheme respect ---------- */

@media (prefers-color-scheme: dark) {
	.om-cattree {
		--om-cattree-border: #2f343a;
		--om-cattree-border-soft: #2a2f35;
		--om-cattree-link: #e5e7eb;
		--om-cattree-link-child: #d1d5db;
		--om-cattree-toggle: #9ca3af;
		--om-cattree-children-bg: rgba(255, 255, 255, 0.025);
	}
}