/**
 * KSquare Gems - Mega Menu Styles
 * Desktop two-panel mega menu + full-screen mobile menu
 *
 * @package Onviqa
 * @since 1.0.0
 */

/* ==========================================================================
   Desktop Mega Menu — Full-width, Figma-matched (1440 × 634)
   ========================================================================== */

.mega-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 1440px;
	max-width: calc(100vw - 32px);
	/* Was height:634px (the Figma frame). A fixed height clipped the last
	   row - and the content box's bottom padding - as soon as a column grew
	   past it, so the menu now starts at that height and expands. */
	min-height: 634px;
	/* Flex so the inner wrapper stretches to the min-height above. Without
	   it a short menu left the banner only as tall as the links beside it. */
	display: flex;
	background: #FFFFFF;
	border-radius: 0 0 16px 16px;
	box-shadow: inset 0 -4px 12px -4px rgba(0, 0, 0, 0.08),
		inset 4px 0 8px -4px rgba(0, 0, 0, 0.04),
		inset -4px 0 8px -4px rgba(0, 0, 0, 0.04);
	z-index: 1100;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	pointer-events: none;
	/* clip, not hidden: still trims the banner to the rounded bottom
	   corners, but never makes this a scroll container that swallows
	   content taller than the panel. */
	overflow: clip;
}

/* Show mega menu */
.header-menu > li.mega-menu-parent:hover > .mega-menu,
.header-menu > li.mega-menu-parent:focus-within > .mega-menu,
.header-menu > li.mega-menu-parent > a[aria-expanded="true"] ~ .mega-menu,
.header-menu > li.mega-menu-parent.mega-menu-open > .mega-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* ---------- Inner wrapper ---------- */

.mega-menu__inner {
	display: flex;
	width: 100%;
	/* min-height, not height: the panel is min-height:634px with auto height,
	   and a percentage height against an auto-height parent resolves to auto,
	   which collapsed this wrapper and left the banner with no height to
	   match. */
	min-height: 100%;
	align-items: stretch;
}

/* ---------- Content Grid (left side, 4-column layout) ---------- */

.mega-menu__content {
	flex: 1;
	min-width: 0;
	display: grid;
	grid-template-rows: auto auto;
	align-content: start;
	padding: 32px 40px 10px 48px;
}

.mega-menu__row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0 40px;
	align-content: start;
}

/* Divider between rows */
.mega-menu__row + .mega-menu__row {
	padding-top: 24px;
	border-top: 1px solid #E5E7EB;
	align-self: start;
}

.mega-menu__col {
	min-width: 0;
}

/* ---------- Category Block ---------- */

.mega-menu__block + .mega-menu__block {
	margin-top: 20px;
}

.mega-menu__heading {
	font-family: "Roboto Flex", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: #6B7280;
	text-transform: uppercase;
	margin: 0 0 18px;
	line-height: 1;
}

.mega-menu__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.mega-menu__links li {
	list-style: none;
	margin: 0;
}

.mega-menu__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	color: #1A1A1A;
	text-decoration: none;
	font-family: "Roboto Flex", sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.35;
	transition: color 0.15s ease;
}

.mega-menu__link:hover,
.mega-menu__link:focus {
	color: #000000;
	text-decoration: underline;
}

/* ---------- Brand icons ---------- */

.mega-menu__links--brands .mega-menu__link {
	gap: 12px;
	padding: 6px 0;
	font-weight: 500;
}

.mega-menu__brand-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: #F5F6FA;
	border: 1px solid #E6E9F0;
}

/* Logos sit inside the chip rather than filling it, so an uploaded logo
   reads as the same round chip as the initials placeholder. */
.mega-menu__brand-icon > img,
.mega-menu__brand-icon .only-term-icon img {
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.mega-menu__brand-icon .only-term-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.mega-menu__brand-icon .only-term-icon svg {
	width: 18px;
	height: 18px;
}

.mega-menu__brand-icon--placeholder {
	font-family: "Roboto Flex", sans-serif;
	font-size: 10px;
	font-weight: 700;
	color: #666;
	letter-spacing: 0.5px;
}

/* ---------- Banner Image (right ≈ 33%) ---------- */

.mega-menu__banner {
	width: 320px;
	min-width: 320px;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
	background: #1A1A1A;
}

/* Out of flow so the image's own height never sets the panel height; it
   just covers whatever height the content column produces. */
.mega-menu__banner > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.mega-menu__badge {
	position: absolute;
	bottom: 20px;
	right: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 10px;
	padding: 10px 16px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
}

.mega-menu__badge-rank {
	font-family: "Roboto Flex", sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: #1A1A1A;
	line-height: 1;
}

.mega-menu__badge-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mega-menu__badge-info strong {
	font-family: "Roboto Flex", sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #1A1A1A;
	line-height: 1.3;
	white-space: nowrap;
}

.mega-menu__badge-info span {
	font-family: "Roboto Flex", sans-serif;
	font-size: 11px;
	font-weight: 400;
	color: #888888;
	line-height: 1.3;
}

/* ==========================================================================
   Suppress default dropdown for mega-menu parent
   ========================================================================== */

.header-menu > li.mega-menu-parent > .header-menu__dropdown {
	display: none !important;
}

/* Break out of parent li — position relative to .header-main */
.header-menu > li.mega-menu-parent {
	position: static;
	display: flex;
	align-items: center;
	align-self: stretch;
}

/* Hide header border & shadow when mega menu is visible */
.header-main:has(.mega-menu-parent:hover),
.header-main:has(.mega-menu-parent.mega-menu-open) {
	border-bottom-color: transparent !important;
	box-shadow: none !important;
}

/* Invisible bridge to prevent hover gap */
.mega-menu::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 0;
	width: 100%;
	height: 20px;
	background: transparent;
	pointer-events: auto;
}

/* ==========================================================================
   Mobile Mega Menu - Drawer Panel
   ========================================================================== */

body.no-scroll {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	overflow: hidden !important;
}

/* ---------- Drawer Shell ---------- */

.mobile-mega-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: calc(100% - 48px);
	max-width: 400px;
	height: 100%;
	background: #FFFFFF;
	z-index: 999;
	padding-top: 96px; /* topbar (36px) + header (60px) */
	transform: translateX(-100%);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
}

.mobile-mega-menu *,
.mobile-mega-menu *::before,
.mobile-mega-menu *::after {
	box-sizing: border-box;
}

.mobile-mega-menu.is-open {
	transform: translateX(0);
}

/* ---------- Menu toggle: icon ↔ X swap ---------- */

.header-main__mobile-toggle .mobile-toggle-close {
	display: none;
}

.header-main__mobile-toggle[aria-expanded="true"] .mobile-toggle-icon {
	display: none !important;
}

.header-main__mobile-toggle[aria-expanded="true"] .mobile-toggle-close {
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.header-main__mobile-toggle[aria-expanded="true"] .mobile-toggle-close svg {
	width: 28px;
	height: 28px;
}

/* ---------- Search Bar ---------- */

.mobile-mega-menu__search {
	padding: 12px 20px;
	flex-shrink: 0;
}

.mobile-mega-menu__search .header-search {
	display: block !important;
	width: 100% !important;
	position: relative;
}

.mobile-mega-menu__search .header-search__input-wrapper {
	height: 44px;
	border: 1px solid #D5DAE1 !important;
	border-radius: 24px !important;
	background: #FFFFFF !important;
	overflow: hidden;
	max-width: 100%;
}

.mobile-mega-menu__search .header-search__input-wrapper:focus-within {
	border-color: #111111 !important;
	box-shadow: none !important;
	background: #FFFFFF !important;
}

.mobile-mega-menu__search .header-search__icon {
	color: #99A0AA;
}

.mobile-mega-menu__search .header-search__input::placeholder {
	color: #99A0AA;
	font-family: "Roboto Flex", sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.mobile-mega-menu__search .header-search__input,
.mobile-mega-menu__search input[type="search"] {
	font-size: 16px !important;
}

.mobile-mega-menu__search .header-search__results {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 10;
	max-height: 50vh;
	overflow-y: auto;
}

/* ---------- Scrollable Body ---------- */

.mobile-mega-menu__body {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	min-height: 0;
	padding-bottom: 20px;
}

/* ---------- Category Cards ---------- */

.mobile-mega-menu__categories {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 4px 20px 0;
}

.mobile-mega-menu__cat-card {
	position: relative;
	display: flex;
	align-items: center;
	height: 60px;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.mobile-mega-menu__cat-card:hover {
	opacity: 0.92;
	text-decoration: none;
}

.mobile-mega-menu__cat-label {
	position: relative;
	z-index: 1;
	padding-left: 16px;
	font-family: "Roboto Flex", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 16px;
	white-space: nowrap;
}

.mobile-mega-menu__cat-img {
	position: absolute;
	right: 0;
	top: 0;
	width: 47%;
	height: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mobile-mega-menu__cat-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Card Variants */
.mobile-mega-menu__cat-card--iced {
	background: #FAECD7;
}
.mobile-mega-menu__cat-card--iced .mobile-mega-menu__cat-label {
	color: #6E4200;
}

.mobile-mega-menu__cat-card--hiphop {
	background: #DCDAFF;
}
.mobile-mega-menu__cat-card--hiphop .mobile-mega-menu__cat-label {
	color: #040046;
}

.mobile-mega-menu__cat-card--diamonds {
	background: #D8F0FF;
}
.mobile-mega-menu__cat-card--diamonds .mobile-mega-menu__cat-label {
	color: #003758;
}

.mobile-mega-menu__cat-card--rings {
	background: #E2F8E4;
}
.mobile-mega-menu__cat-card--rings .mobile-mega-menu__cat-label {
	color: #003C05;
}

.mobile-mega-menu__cat-card--neutral {
	background: #EFEFEF;
}
.mobile-mega-menu__cat-card--neutral .mobile-mega-menu__cat-label {
	color: #2B2B2B;
}

/* ---------- Education & About Us Buttons ---------- */

.mobile-mega-menu__two-buttons {
	display: flex;
	gap: 12px;
	padding: 16px 20px 0;
}

.mobile-mega-menu__pill-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	background: #F5F6FA;
	border: 1px solid #E6E9F0;
	border-radius: 8px;
	font-family: "Roboto Flex", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 16px;
	color: #111111;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.mobile-mega-menu__pill-btn:hover {
	background: #EEF0F4;
	text-decoration: none;
	color: #111111;
}

/* ---------- Quick Links ---------- */

.mobile-mega-menu__quick-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 20px 20px 0;
}

.mobile-mega-menu__quick-links a {
	font-family: "Roboto Flex", sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 16px;
	color: #111111;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mobile-mega-menu__quick-links a:hover {
	color: #FF6B35;
}

/* ---------- Contact Info ---------- */

.mobile-mega-menu__contact {
	padding: 24px 20px 0;
}

.mobile-mega-menu__contact-label {
	font-family: "Roboto Flex", sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 14px;
	color: #666666;
	margin: 0 0 12px;
}

.mobile-mega-menu__contact-items {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.mobile-mega-menu__contact-link {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #000000;
	text-decoration: none;
	font-family: "Roboto Flex", sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 16px;
}

.mobile-mega-menu__contact-link svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	color: #000000;
}

.mobile-mega-menu__contact-link:hover {
	color: #FF6B35;
}

.mobile-mega-menu__contact-link:hover svg {
	color: #FF6B35;
}

/* ---------- Sidebar Widget ---------- */

.mobile-mega-menu__widget {
	padding: 16px 20px 0;
}

/* ---------- Social Footer ---------- */

.mobile-mega-menu__social {
	background: #000000;
	padding: 0 20px;
	height: 56px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	margin-top: auto;
}

.mobile-mega-menu__social-label {
	font-family: "Roboto Flex", sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 14px;
	letter-spacing: 0.01em;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
	white-space: nowrap;
}

.mobile-mega-menu__social-icons {
	display: flex;
	align-items: center;
	gap: 4px;
}

.mobile-mega-menu__social-icon {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.16);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mobile-mega-menu__social-icon:hover {
	border-color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.1);
}

.mobile-mega-menu__social-icon svg {
	width: 14px;
	height: 14px;
	color: #FFFFFF;
}

/* ==========================================================================
   Mobile Menu Overlay
   ========================================================================== */

.mobile-mega-menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 998;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-mega-menu-overlay.is-active {
	opacity: 1;
	visibility: visible;
}

/* ==========================================================================
   Desktop Only
   ========================================================================== */

@media (min-width: 1025px) {
	.mobile-mega-menu,
	.mobile-mega-menu-overlay {
		display: none !important;
	}
}

/* ==========================================================================
   Mobile Only - Hide desktop mega menu
   ========================================================================== */

@media (max-width: 1024px) {
	.mega-menu {
		display: none !important;
		opacity: 0 !important;
		visibility: hidden !important;
	}

	.header-main__nav .header-menu {
		display: none;
	}
}

/* ==========================================================================
   Admin Styles (for the mega menu settings page)
   ========================================================================== */

.ksq-mega-menu-featured {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.ksq-mega-menu-featured-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background: #F9FAFB;
	border: 1px solid #E5E7EB;
	border-radius: 8px;
	min-width: 260px;
	flex: 1;
}

.ksq-mega-menu-featured-preview {
	width: 60px;
	height: 60px;
	border-radius: 8px;
	overflow: hidden;
	background: #FFFFFF;
	border: 1px solid #E5E7EB;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ksq-mega-menu-featured-preview img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ksq-mega-menu-featured-preview .dashicons {
	font-size: 24px;
	color: #D1D5DB;
}

.ksq-mega-menu-featured-info {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.ksq-mega-menu-featured-title {
	font-size: 13px;
	font-weight: 500;
	color: #374151;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ksq-mega-menu-featured-actions {
	display: flex;
	gap: 6px;
}

.ksq-mega-menu-featured-actions .button {
	font-size: 12px;
	padding: 2px 10px;
	min-height: 28px;
}

/* Category rows */
.ksq-mega-menu-categories {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ksq-mega-menu-cat-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: #F9FAFB;
	border: 1px solid #E5E7EB;
	border-radius: 6px;
	cursor: move;
}

.ksq-mega-menu-cat-drag {
	color: #9CA3AF;
	cursor: move;
}

.ksq-mega-menu-cat-toggle input {
	margin: 0;
}

.ksq-mega-menu-cat-row input.regular-text {
	max-width: 180px;
}

.ksq-mega-menu-cat-row select {
	max-width: 200px;
}

.ksq-mega-menu-cat-row .small-text {
	width: 60px;
}

/* Product search modal */
.ksq-product-search-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ksq-product-search-dialog {
	background: #FFFFFF;
	border-radius: 12px;
	width: 560px;
	max-width: 90vw;
	min-height: 400px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.ksq-product-search-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #E5E7EB;
}

.ksq-product-search-header h3 {
	margin: 0;
	font-size: 16px;
}

.ksq-product-search-close {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: none;
	cursor: pointer;
	font-size: 24px;
	color: #6B7280;
	border-radius: 6px;
}

.ksq-product-search-close:hover {
	background: #F3F4F6;
}

.ksq-product-search-body {
	padding: 16px 20px;
	overflow-y: auto;
	flex: 1;
}

.ksq-product-search-input {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #D1D5DB;
	border-radius: 8px;
	font-size: 14px;
	margin-bottom: 12px;
	outline: none;
}

.ksq-product-search-input:focus {
	border-color: #FF6B35;
	box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

.ksq-product-search-results {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-height: 400px;
	overflow-y: auto;
}

.ksq-product-search-result {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.15s ease;
	border: 1px solid transparent;
}

.ksq-product-search-result:hover {
	background: #F9FAFB;
	border-color: #E5E7EB;
}

.ksq-product-search-result img {
	width: 44px;
	height: 44px;
	object-fit: contain;
	border-radius: 6px;
	background: #F9FAFB;
}

.ksq-product-search-result-info {
	flex: 1;
	min-width: 0;
}

.ksq-product-search-result-title {
	font-size: 13px;
	font-weight: 500;
	color: #1A1A1A;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ksq-product-search-result-price {
	font-size: 12px;
	color: #6B7280;
}


/* ============================================================
   Mega Menu - item picker (terms and pages)

   Two panels per category row: the selected items, which the
   admin drags into the order they render in, and the available
   items to tick. Product counts sit on both so it is obvious
   which terms are empty - those are hidden on the front end.
   ============================================================ */

.ksq-picker-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6B7280;
	margin: 8px 0 4px;
}

.ksq-selected-list {
	margin: 0 0 4px;
	padding: 4px;
	list-style: none;
	min-height: 34px;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	background: #fff;
}

.ksq-selected-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px;
	margin: 0 0 2px;
	font-size: 12px;
	background: #fff7ed;
	border: 1px solid #fed7aa;
	border-radius: 3px;
}

.ksq-selected-item:last-child {
	margin-bottom: 0;
}

/* A selected term with no products still renders here so the admin can see
   and remove it, but it is muted - the front end drops it. */
.ksq-selected-item.is-empty {
	background: #f9fafb;
	border-color: #e5e7eb;
	color: #9ca3af;
}

.ksq-selected-drag {
	cursor: grab;
	color: #9ca3af;
	font-size: 16px;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.ksq-selected-drag:active {
	cursor: grabbing;
}

.ksq-selected-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ksq-selected-count,
.ksq-available-count {
	flex: 0 0 auto;
	min-width: 22px;
	padding: 1px 6px;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: #4b5563;
	background: #f3f4f6;
	border-radius: 999px;
}

.ksq-selected-item.is-empty .ksq-selected-count,
.ksq-available-item.is-empty .ksq-available-count {
	color: #b91c1c;
	background: #fee2e2;
}

.ksq-selected-remove {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	padding: 0;
	line-height: 1;
	font-size: 15px;
	color: #9ca3af;
	background: transparent;
	border: 0;
	border-radius: 3px;
	cursor: pointer;
}

.ksq-selected-remove:hover {
	color: #dc2626;
	background: #fee2e2;
}

.ksq-picker-empty-msg {
	margin: 0 0 4px;
	font-size: 11px;
	font-style: italic;
	color: #9ca3af;
}

.ksq-available-list {
	max-height: 150px;
	overflow-y: auto;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	padding: 4px;
	background: #fff;
}

.ksq-available-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 3px 6px;
	font-size: 12px;
	cursor: pointer;
	border-radius: 3px;
}

.ksq-available-item:hover {
	background: #f9fafb;
}

.ksq-available-item.is-checked {
	background: #fff7ed;
}

.ksq-available-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ksq-picker-foot {
	margin-top: 3px;
	font-size: 11px;
	color: #888;
}

/* Placeholder gap shown while dragging a selected item. */
.ksq-selected-list .ui-sortable-placeholder {
	visibility: visible !important;
	height: 26px;
	margin-bottom: 2px;
	background: #f3f4f6;
	border: 1px dashed #d1d5db;
	border-radius: 3px;
}