/**
 * Portfolio Sidebar Filter Styles
 *
 * All customizable values use CSS custom properties.
 * Override in WP Customizer → Additional CSS:
 *
 *   :root {
 *       --wme-active-color: #e74c3c;
 *       --wme-item-padding: 12px 0;
 *   }
 *
 * @package WoodMart_Enhance
 */

:root {
	--wme-filter-bg: transparent;
	--wme-active-color: var(--wd-primary-color, #83b735);
	--wme-active-bg: transparent;
	--wme-item-padding: 10px 0;
	--wme-item-color: var(--wd-text-color, #333);
	--wme-item-hover-color: var(--wd-primary-color, #83b735);
	--wme-count-color: var(--color-gray-500, #999);
	--wme-border-color: var(--wd-border-color, #e8e8e8);
	--wme-title-size: 16px;
	--wme-title-weight: 600;
	--wme-transition: 0.25s ease;
}

/* ── Widget Container ── */

.wme-portfolio-filter {
	background: var(--wme-filter-bg);
}

.wme-portfolio-filter .widget-title {
	font-size: var(--wme-title-size);
	font-weight: var(--wme-title-weight);
	margin-bottom: 15px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--wme-border-color);
}

/* ── Category List ── */

.wme-cat-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.wme-cat-list .wme-cat-item {
	border-bottom: 1px solid var(--wme-border-color);
}

.wme-cat-list .wme-cat-item:last-child {
	border-bottom: none;
}

.wme-cat-list .wme-cat-item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--wme-item-padding);
	color: var(--wme-item-color);
	text-decoration: none;
	transition: color var(--wme-transition), background var(--wme-transition);
	font-size: 14px;
	line-height: 1.5;
}

.wme-cat-list .wme-cat-item a:hover {
	color: var(--wme-item-hover-color);
}

/* ── Active State ── */

.wme-cat-list .wme-cat-item.wd-active a {
	color: var(--wme-active-color);
	font-weight: 600;
	background: var(--wme-active-bg);
}

.wme-cat-list .wme-cat-item.wd-active a .nav-link-text {
	position: relative;
}

.wme-cat-list .wme-cat-item.wd-active a .nav-link-text::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 2px;
	background-color: var(--wme-active-color);
}

/* ── Count Badge ── */

.wme-count {
	color: var(--wme-count-color);
	font-size: 12px;
	font-weight: 400;
	min-width: 20px;
	text-align: right;
	flex-shrink: 0;
	margin-left: 8px;
}

.wme-count::before {
	content: '(';
}

.wme-count::after {
	content: ')';
}

/* ── Off-canvas (mobile/tablet) Adjustments ── */

.wd-side-hidden .wme-portfolio-filter {
	padding: 0 20px;
}

.wd-side-hidden .wme-portfolio-filter .widget-title {
	padding-top: 10px;
}

.wme-cat-list .wme-cat-item a .nav-link-text {
	position: relative;
}

/* ── Transition for filter items ── */

.wme-cat-list .wme-cat-item {
	transition: opacity var(--wme-transition);
}

.wme-cat-list .wme-cat-item:hover {
	opacity: 0.85;
}

.wme-cat-list .wme-cat-item.wd-active:hover {
	opacity: 1;
}

/* ── AJAX Loading State ── */

.wme-portfolio-filter.wme-loading .wme-cat-list {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.wme-portfolio-filter.wme-loading::after {
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	margin: 10px auto;
	border: 2px solid var(--wme-border-color);
	border-top-color: var(--wme-active-color);
	border-radius: 50%;
	animation: wme-spin 0.6s linear infinite;
}

@keyframes wme-spin {
	to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════════
   STYLE PRESETS
   The body <div class="wme-portfolio-filter"> receives one of:
     - wme-style-minimal   (default, styles above already cover this)
     - wme-style-pill      (rounded pill active state, filled background)
   ══════════════════════════════════════════════════════════════ */

/* ── Minimal (explicit — matches default, defined for clarity) ── */

.wme-portfolio-filter.wme-style-minimal .wme-cat-list .wme-cat-item {
	border-bottom: 1px solid var(--wme-border-color);
}

.wme-portfolio-filter.wme-style-minimal .wme-cat-list .wme-cat-item:last-child {
	border-bottom: none;
}

/* ── Pill preset ──────────────────────────────────────────────
   Override the base list styling:
   - remove bottom borders (pill uses spacing instead)
   - each item gets padding + rounded background on hover/active
   - active: brand color background, white text, hide underline
*/

.wme-portfolio-filter.wme-style-pill .wme-cat-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wme-portfolio-filter.wme-style-pill .wme-cat-list .wme-cat-item {
	border-bottom: none;
	border-radius: 8px;
	transition: background var(--wme-transition);
}

.wme-portfolio-filter.wme-style-pill .wme-cat-list .wme-cat-item a {
	padding: 10px 14px;
	border-radius: 8px;
	transition: background var(--wme-transition), color var(--wme-transition);
}

.wme-portfolio-filter.wme-style-pill .wme-cat-list .wme-cat-item a:hover {
	background: rgba(0, 0, 0, 0.04);
	color: var(--wme-item-hover-color);
}

.wme-portfolio-filter.wme-style-pill .wme-cat-list .wme-cat-item.wd-active a {
	background: var(--wme-active-color);
	color: #fff;
	font-weight: 600;
}

.wme-portfolio-filter.wme-style-pill .wme-cat-list .wme-cat-item.wd-active a:hover {
	background: var(--wme-active-color);
	opacity: 0.92;
}

/* Pill: hide the underline that Minimal uses */
.wme-portfolio-filter.wme-style-pill .wme-cat-list .wme-cat-item.wd-active a .nav-link-text::before {
	display: none;
}

/* Pill: count badge on active item — translucent white chip */
.wme-portfolio-filter.wme-style-pill .wme-cat-list .wme-cat-item.wd-active a .wme-count {
	color: rgba(255, 255, 255, 0.85);
}

.wme-portfolio-filter.wme-style-pill .wme-cat-list .wme-cat-item:hover {
	opacity: 1; /* Base rule sets 0.85; pill uses background hover instead */
}

/* ── Classic preset ────────────────────────────────────────────
   Replicates WoodMart's native .widget .product-categories look
   (as seen on onlyu.com.tw/dress/ and every WooCommerce shop sidebar).

   Key traits:
   - No dividers between items
   - Text link on the left, small pill badge with count on the right
   - Hover: pill fills with --wd-primary-color (the theme primary)
   - Active: bold text + filled pill (same color as hover)
   - Uses WoodMart CSS vars so colors auto-inherit from the theme
*/

/* Classic: the whole sidebar GROUP (search + category + future widgets) lives in
   a SINGLE white rounded card — mirrors OnlyU dress page where Elementor's
   .elementor-widget-container wraps all sidebar widgets in one visual surface
   and widgets are separated by a thin horizontal rule.

   The card styling lives on the outer .wme-sidebar-group; individual widgets
   inside it are flat and share the card's padding. Exposed as CSS variables. */
.wme-sidebar-group.wme-style-classic {
	--wme-classic-bg: #fff;
	--wme-classic-padding: 20px;
	--wme-classic-radius: 10px;
	--wme-classic-shadow: none;
	--wme-classic-divider: #ececec;
	--wme-classic-gap: 20px;
	background-color: var(--wme-classic-bg);
	padding: var(--wme-classic-padding);
	border-radius: var(--wme-classic-radius);
	box-shadow: var(--wme-classic-shadow);
}

/* Neutralise the individual widget's own padding/background — they're flat
   panels inside the shared card now. */
.wme-sidebar-group.wme-style-classic .wd-widget {
	background: transparent;
	padding: 0;
	border-radius: 0;
	margin: 0;
}

/* Thin horizontal divider between sibling widgets (search ↔ category) —
   matches the grey line separating "搜尋禮服" and "禮服分類" on OnlyU. */
.wme-sidebar-group.wme-style-classic .wd-widget + .wd-widget {
	margin-top: var(--wme-classic-gap);
	padding-top: var(--wme-classic-gap);
	border-top: 1px solid var(--wme-classic-divider);
}

/* For Minimal/Pill presets the group is invisible — revert any user-agent
   defaults so the wrapper is fully transparent and introduces no spacing. */
.wme-sidebar-group:not(.wme-style-classic) {
	display: contents;
}

.wme-portfolio-filter.wme-style-classic .wme-cat-list {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wme-portfolio-filter.wme-style-classic .wme-cat-list .wme-cat-item {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	border-bottom: none;
	list-style: none;
	transition: none;
	opacity: 1;
}

/* The link becomes the flex container so text stays left, badge stays right. */
.wme-portfolio-filter.wme-style-classic .wme-cat-list .wme-cat-item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 0;
	color: inherit;
	text-decoration: none;
	transition: color 0.25s ease;
}

.wme-portfolio-filter.wme-style-classic .wme-cat-list .wme-cat-item a:hover {
	color: var(--wd-primary-color, var(--wme-active-color));
}

/* Kill the Minimal underline that the base style injects. */
.wme-portfolio-filter.wme-style-classic .wme-cat-list .wme-cat-item.wd-active a .nav-link-text::before {
	display: none;
}

/* Active item: bold + themed text color (matches WoodMart's .wd-active > a). */
.wme-portfolio-filter.wme-style-classic .wme-cat-list .wme-cat-item.wd-active a {
	color: var(--color-gray-800, #1d2327);
	font-weight: 600;
}

.wme-portfolio-filter.wme-style-classic .wme-cat-list .wme-cat-item .nav-link-text {
	flex: 1 1 auto;
	min-width: 0;
}

/* The count badge — identical spec to WoodMart's .widget .product-categories .count,
   with OnlyU's custom overrides baked in:
   - border-color: #b2b2b2 (OnlyU uses a darker grey than WoodMart's default --brdcolor-gray-300)
   - letter-spacing: 0 (resets OnlyU's global body { letter-spacing: 1.3px } which would
     otherwise distort the digit spacing inside the small pill)
*/
.wme-portfolio-filter.wme-style-classic .wme-cat-list .wme-count {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: 5px;
	margin-inline-start: 5px;
	min-width: 30px;
	height: 20px;
	border: 1px solid #b2b2b2;
	border-radius: 35px;
	background: transparent;
	color: var(--color-gray-500, #82878c);
	text-align: center;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4em;
	letter-spacing: 0;
	transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

/* Reset letter-spacing on the whole list — matches OnlyU's
   `.elementor-widget-wd_sidebar .product-categories li { letter-spacing: 0 }` override.
   This neutralises site-wide body letter-spacing that would otherwise push
   the text out of visual alignment with a tight category widget. */
.wme-portfolio-filter.wme-style-classic .wme-cat-list .wme-cat-item,
.wme-portfolio-filter.wme-style-classic .wme-cat-list .wme-cat-item a,
.wme-portfolio-filter.wme-style-classic .wme-cat-list .nav-link-text {
	letter-spacing: 0;
}

/* Hover or active → badge fills with the theme primary color. */
.wme-portfolio-filter.wme-style-classic .wme-cat-list .wme-cat-item a:hover .wme-count,
.wme-portfolio-filter.wme-style-classic .wme-cat-list .wme-cat-item.wd-active a .wme-count {
	color: #fff;
	background-color: var(--wd-primary-color, var(--wme-active-color));
	border-color: var(--wd-primary-color, var(--wme-active-color));
}

/* Title spacing matches WoodMart widget_product_categories (.widget-title { margin-bottom: 10px }). */
.wme-portfolio-filter.wme-style-classic .widget-title {
	margin-bottom: 10px;
	padding-bottom: 0;
	border-bottom: none;
	font-size: inherit;
	font-weight: inherit;
}

/* Strip the base "(...)" wrappers — Classic shows plain numeric counts. */
.wme-portfolio-filter.wme-style-classic .wme-cat-list .wme-count::before,
.wme-portfolio-filter.wme-style-classic .wme-cat-list .wme-count::after {
	content: none;
}

/* Search input overrides for Classic — forces white background on sites that
   globally style inputs (e.g. OnlyU has `input { background: #f8e7e4 !important }`
   applied site-wide). Also applies the dusty-rose border to match dress page. */
.wme-sidebar-group.wme-style-classic .wd-search-form input[type="text"],
.wme-sidebar-group.wme-style-classic .wd-search-form input[type="search"],
.wme-sidebar-group.wme-style-classic .searchform input[type="text"] {
	background-color: #fff !important;
	border-color: #b99696 !important;
	color: #555 !important;
}

/* Search widget title spacing inside the shared card. */
.wme-sidebar-group.wme-style-classic .wme-portfolio-search .widget-title {
	margin-bottom: 10px;
	padding-bottom: 0;
	border-bottom: none;
	font-size: inherit;
	font-weight: inherit;
}