:root {
  --tools-select-text-01: white;
}
.custom-select {
	 position: relative;
	 user-select: none;
}
 .select-trigger {
	 display: flex;
	 align-items: center;
	 gap: 10px;
	 padding: 10px 15px;
	 background: var(--app);
	 border: 1px solid var(--border);
	 border-radius: 12px;
	 cursor: pointer;
	 transition: all 0.3s ease;
	 box-shadow: 0px 2px 5px 0px var(--shadow-black-05);
}
 .select-trigger:hover {
	 border-color: var(--link-active);
	 box-shadow: 0px 2px 8px 0px var(--hbs);
}
 .custom-select.open .select-trigger {
	 border-color: var(--link-active);
	 box-shadow: 0px 2px 5px 0px var(--hbs);
}

.custom-select.open.dropdown-bottom .select-trigger {
	 border-bottom-left-radius: 0;
	 border-bottom-right-radius: 0;
}

.custom-select.open.dropdown-top .select-trigger {
	 border-top-left-radius: 0;
	 border-top-right-radius: 0;
}
 .select-trigger svg {
	 min-width: 20px;
	 max-width: 20px;
	 fill: var(--link-active);
	 color: var(--link-active);
	 transition: fill 0.3s ease, color 0.3s ease;
}
 .select-trigger svg[fill="none"] {
	 fill: none;
}
 .selected-category, .selected-value, .selected-text {
	 flex: 1;
	 font-size: 0.95rem;
	 color: var(--font);
	 font-weight: 500;
	 font-family: inherit;
	 white-space: nowrap;
	 overflow: hidden;
	 text-overflow: ellipsis;
}
 .selected-value {
	 text-align: center;
}
 .arrow-icon {
	 min-width: 20px;
	 max-width: 20px;
	 fill: var(--font-four);
	 transition: transform 0.3s ease, fill 0.3s ease;
}
 .arrow-icon.rotated {
	 transform: rotate(180deg);
	 fill: var(--link-active);
}
 .select-options {
	 position: absolute;
	 left: 0;
	 right: 0;
	 background: var(--app);
	 border: 1px solid var(--link-active);
	 box-shadow: 0px 4px 12px 0px var(--hbs);
	 max-height: 300px;
	 overflow-y: auto;
	 z-index: 1000;
}
.select-search { position: sticky; top: 0; padding: 6px 8px; background: var(--app); border-bottom: 1px solid var(--border-primary-alpha); z-index: 1; }
.select-search-input { width: 100%; box-sizing: border-box; padding: 4px 8px; border: 1px solid var(--border-primary-alpha); border-radius: 6px; background: var(--bg-secondary, #f5f5f5); color: var(--font); font-size: 0.82rem; outline: none; }
.select-search-input:focus { border-color: var(--link-active); }
.select-empty { padding: 8px 12px; color: var(--font-secondary); font-size: 0.83rem; text-align: center; }

/* Dropdown position: bottom (default) */
.dropdown-bottom .select-options {
	 top: 100%;
	 border-top: none;
	 border-bottom-left-radius: 12px;
	 border-bottom-right-radius: 12px;
}

/* Dropdown position: top */
.dropdown-top .select-options {
	 bottom: 100%;
	 border-bottom: none;
	 border-top-left-radius: 12px;
	 border-top-right-radius: 12px;
}
 .select-options::-webkit-scrollbar {
	 width: 6px;
}
 .select-options::-webkit-scrollbar-track {
	 background: var(--hbs);
	 border-radius: 4px;
}
 .select-options::-webkit-scrollbar-thumb {
	 background: var(--link-active);
	 border-radius: 4px;
}
 .select-options::-webkit-scrollbar-thumb:hover {
	 background: var(--pag-active);
}
 .option {
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
	 padding: 12px 15px;
	 cursor: pointer;
	 transition: all 0.2s ease;
	 color: var(--font);
	 font-size: 0.95rem;
	 gap: 8px;
}
 .option-icon {
	 display: flex;
	 align-items: center;
	 flex-shrink: 0;
	 width: 16px;
	 height: 16px;
}
 .option-icon svg {
	 width: 16px;
	 height: 16px;
}
 .trigger-icon {
	 width: 14px;
	 height: 14px;
}
 .trigger-icon svg {
	 width: 14px;
	 height: 14px;
}
 .option span:not(.option-icon):not(.check-mark) {
	 flex: 1;
}
 .option:hover {
	 background: var(--hbs);
	 color: var(--link-active);
}
 .option.active {
	 background: var(--link-active);
	 color: var(--tools-select-text-01);
	 font-weight: 600;
}
 .option.active:hover {
	 background: var(--pag-active);
}
 .check-mark {
	 font-size: 1.1rem;
	 font-weight: bold;
	 margin-left: 10px;
}

/* Dropdown Animation - Bottom */
 .dropdown-enter-active {
	 animation: dropdown-in 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
 .dropdown-leave-active {
	 animation: dropdown-out 0.2s ease-in;
}
 @keyframes dropdown-in {
	 0% {
		 opacity: 0;
		 transform: translateY(-10px) scaleY(0.9);
		 transform-origin: top;
	}
	 100% {
		 opacity: 1;
		 transform: translateY(0) scaleY(1);
	}
}
 @keyframes dropdown-out {
	 0% {
		 opacity: 1;
		 transform: translateY(0) scaleY(1);
	}
	 100% {
		 opacity: 0;
		 transform: translateY(-10px) scaleY(0.9);
		 transform-origin: top;
	}
}

/* Dropdown Animation - Top */
.dropdown-up-enter-active {
	animation: dropdown-up-in 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.dropdown-up-leave-active {
	animation: dropdown-up-out 0.2s ease-in;
}
@keyframes dropdown-up-in {
	0% {
		opacity: 0;
		transform: translateY(10px) scaleY(0.9);
		transform-origin: bottom;
	}
	100% {
		opacity: 1;
		transform: translateY(0) scaleY(1);
	}
}
@keyframes dropdown-up-out {
	0% {
		opacity: 1;
		transform: translateY(0) scaleY(1);
	}
	100% {
		opacity: 0;
		transform: translateY(10px) scaleY(0.9);
		transform-origin: bottom;
	}
}

/* Compact variant for smaller dropdowns */
 .custom-select.compact .select-trigger {
	 padding: 8px 12px;
}
 .custom-select.per-page {
	 min-width: 100px;
}
/* Icon variants */
 .category-icon, .number-icon {
	 min-width: 18px;
	 max-width: 18px;
	 fill: var(--link-active);
	 transition: fill 0.3s ease;
}
 .number-icon {
	 min-width: 18px;
	 max-width: 18px;
}

/* Skeleton/inline styles */
.custom-select-component {
  position: relative;
}
.skel {
  border-radius: 12px;
  background: linear-gradient(90deg, var(--border) 25%, var(--hbs) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 2.1s ease-in-out infinite;
}
.skel-select {
  height: 44px;
  min-width: 140px;
}
@keyframes skel-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}