/* KSI Solutions Filters — styled to match Figma (node 2351:11237).
   Every selector is prefixed with #ksi-sf-sidebar or #ksi-sf-top-filters
   (the two wrapper IDs rendered by the shortcodes) so these rules win
   against Elementor's own class-based CSS regardless of load order. */

#ksi-sf-sidebar,
#ksi-sf-top-filters {
	--ksi-sf-maroon: #701f2e;
	--ksi-sf-maroon-dark: #591724;
	--ksi-sf-gold: #e5ce83;
	--ksi-sf-text: #4c4c4c;
	--ksi-sf-heading: #000000;
	--ksi-sf-border: #ebebeb;
	--ksi-sf-search-bg: #f0f0f0;
	--ksi-sf-placeholder: #999999;
	font-family: inherit;
}

/* ------------------------------------------------------------------
 * Sidebar card
 * ----------------------------------------------------------------*/

#ksi-sf-sidebar .ksi-sf-sidebar-card {
	background: #fdfdfd;
	border: 1px solid var(--ksi-sf-border);
	border-radius: 16px;
	padding: 30px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

#ksi-sf-sidebar .ksi-sf-sidebar-heading {
	font-size: 28px;
	font-weight: 600;
	color: var(--ksi-sf-heading);
	margin: 0;
}

/* Search bar */

#ksi-sf-sidebar .ksi-sf-search-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: var(--ksi-sf-search-bg);
	border-radius: 10px;
	padding: 5px;
	height: 56px;
	box-sizing: border-box;
}

#ksi-sf-sidebar .ksi-sf-search-input {
	flex: 1;
	border: none;
	background: transparent;
	padding: 0 15px;
	font-size: 16px;
	color: var(--ksi-sf-heading);
	outline: none;
	height: 100%;
}

#ksi-sf-sidebar .ksi-sf-search-input::placeholder {
	color: var(--ksi-sf-placeholder);
}

#ksi-sf-sidebar .ksi-sf-search-btn {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 10px;
	border: none;
	background: #fff;
	color: var(--ksi-sf-maroon);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s ease;
	padding: 0;
}

#ksi-sf-sidebar .ksi-sf-search-btn:hover {
	background: #f4f4f4;
}

/* ------------------------------------------------------------------
 * Category accordion
 * ----------------------------------------------------------------*/

#ksi-sf-sidebar .ksi-sf-tree {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

#ksi-sf-sidebar .ksi-sf-accordion-item,
#ksi-sf-sidebar .ksi-sf-leaf {
	border-bottom: 1px solid var(--ksi-sf-border);
	padding: 18px 0;
}

#ksi-sf-sidebar .ksi-sf-tree > .ksi-sf-accordion-item:last-child,
#ksi-sf-sidebar .ksi-sf-tree > .ksi-sf-leaf:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

#ksi-sf-sidebar .ksi-sf-tree > .ksi-sf-accordion-item:first-child,
#ksi-sf-sidebar .ksi-sf-tree > .ksi-sf-leaf:first-child {
	padding-top: 0;
}

#ksi-sf-sidebar .ksi-sf-accordion-header {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
	text-align: left;
}

#ksi-sf-sidebar .ksi-sf-accordion-chevron {
	flex-shrink: 0;
	color: var(--ksi-sf-maroon);
	transform: rotate(-90deg);
	transition: transform 0.2s ease;
}

#ksi-sf-sidebar .ksi-sf-accordion-item.is-open > .ksi-sf-accordion-header .ksi-sf-accordion-chevron {
	transform: rotate(0deg);
}

#ksi-sf-sidebar .ksi-sf-accordion-title {
	font-size: 22px;
	font-weight: 600;
	color: var(--ksi-sf-maroon);
	line-height: 1.3;
}

#ksi-sf-sidebar .ksi-sf-accordion-body {
	display: none;
	gap: 18px;
	margin-top: 18px;
	padding-left: 4px;
}
#ksi-sf-sidebar .is-open .ksi-sf-accordion-body {
    display: flex;
}
#ksi-sf-sidebar .ksi-sf-accordion-header img {
    transform: rotate(150deg);
    transition: 0.4s;
}

#ksi-sf-sidebar .is-open .ksi-sf-accordion-header img {
    transform: rotate(60deg);
}
#ksi-sf-sidebar .ksi-sf-accordion-connector {
	width: 1px;
	background: var(--ksi-sf-border);
	flex-shrink: 0;
	margin-left: 7px;
}

#ksi-sf-sidebar .ksi-sf-accordion-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1;
	min-width: 0;
}

#ksi-sf-sidebar .ksi-sf-accordion-list .ksi-sf-accordion-item,
#ksi-sf-sidebar .ksi-sf-accordion-list .ksi-sf-leaf {
	border-bottom: none;
	padding: 0;
}

/* ------------------------------------------------------------------
 * Checkboxes (custom square, matches Figma's filled-maroon + check)
 * ----------------------------------------------------------------*/

#ksi-sf-sidebar .ksi-sf-checkbox-label,
#ksi-sf-top-filters .ksi-sf-checkbox-label {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	font-size: 16px;
	line-height: 1.4;
	color: var(--ksi-sf-text);
}

#ksi-sf-sidebar input.ksi-sf-checkbox,
#ksi-sf-top-filters input.ksi-sf-checkbox {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	width: 20px !important;
	height: 20px !important;
	flex-shrink: 0;
	border: 1px solid #c1c1c1 !important;
	border-radius: 5px !important;
	background-color: #fff !important;
	background-image: none !important;
	cursor: pointer;
	position: relative;
	margin: 0;
	transition: background 0.12s ease, border-color 0.12s ease;
	box-shadow: none !important;
}

#ksi-sf-sidebar input.ksi-sf-checkbox:hover,
#ksi-sf-top-filters input.ksi-sf-checkbox:hover {
	border-color: var(--ksi-sf-maroon) !important;
}

#ksi-sf-sidebar input.ksi-sf-checkbox:checked,
#ksi-sf-top-filters input.ksi-sf-checkbox:checked {
	background-color: var(--ksi-sf-maroon) !important;
	border-color: var(--ksi-sf-maroon) !important;
}

#ksi-sf-sidebar input.ksi-sf-checkbox:checked::after,
#ksi-sf-top-filters input.ksi-sf-checkbox:checked::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 5px;
	width: 10px;
	height: 6px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
}

#ksi-sf-sidebar .ksi-sf-empty {
	font-size: 14px;
	color: var(--ksi-sf-placeholder);
}

/* ------------------------------------------------------------------
 * Top filters: pill dropdown buttons
 * ----------------------------------------------------------------*/

#ksi-sf-top-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 0px;
}

#ksi-sf-top-filters .ksi-sf-dropdown {
	position: relative;
}

#ksi-sf-top-filters .ksi-sf-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid #EBEBEB !important;
    border-radius: 4px !important;
    background: #FDFDFD;
    color: #701f2e !important;
    padding: 8px 8px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background 0.15s ease;
    white-space: nowrap;
    box-shadow: none !important;
    width: 220px !important;
}

/* #ksi-sf-top-filters .ksi-sf-dropdown-toggle:hover,
#ksi-sf-top-filters .ksi-sf-dropdown.is-open .ksi-sf-dropdown-toggle {
	background: var(--ksi-sf-maroon-dark) !important;
} */

#ksi-sf-top-filters .ksi-sf-dropdown-caret {
	font-size: 1px;
	color: #fff;
	transition: transform 0.15s ease;
}

#ksi-sf-top-filters .ksi-sf-dropdown.is-open .ksi-sf-dropdown-caret {
	transform: rotate(180deg);
}

#ksi-sf-top-filters .ksi-sf-dropdown-count {
    background: #701f2e;
    color: #ffffff;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    padding: 2px 9px;
    line-height: 1.5;
    width: 25px;
    height: 25px;
}

#ksi-sf-top-filters .ksi-sf-dropdown-panel {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 30;
	background: #fff !important;
	border: 1px solid var(--ksi-sf-border) !important;
	border-radius: 12px !important;
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.14) !important;
	padding: 14px 16px;
	min-width: 240px;
	max-height: 280px;
	overflow-y: auto;
}

#ksi-sf-top-filters .ksi-sf-dropdown-panel .ksi-sf-checkbox-label {
	padding: 7px 6px;
	font-size: 15px;
}

#ksi-sf-top-filters .ksi-sf-dropdown-panel .ksi-sf-checkbox-label:hover {
	background: #f8f2f1;
	border-radius: 6px;
}

/* ------------------------------------------------------------------
 * Loading / empty / results states
 * These live inside Elementor's own Loop Grid markup, outside our
 * #ksi-sf-sidebar / #ksi-sf-top-filters wrappers, so we can't use ID
 * specificity here — !important is intentional and necessary.
 * ----------------------------------------------------------------*/

.elementor-loop-container.is-loading,
[class*='elementor-loop-container'].is-loading {
	opacity: 0.4 !important;
	pointer-events: none !important;
	transition: opacity 0.15s ease;
}

.ksi-sf-no-results {
	padding: 48px 0 !important;
	text-align: center !important;
	color: #777 !important;
	font-size: 15px !important;
	grid-column: 1 / -1;
}

/* Fallback card — only used if KSI_SF_LOOP_TEMPLATE_ID is unset */

.ksi-sf-fallback-card {
	border: 1px solid #eee !important;
	border-radius: 10px !important;
	padding: 18px !important;
}

.ksi-sf-fallback-thumb img {
	width: 100% !important;
	height: auto !important;
	border-radius: 6px !important;
}

.ksi-sf-fallback-title {
	font-size: 18px !important;
	margin: 12px 0 6px !important;
}

.ksi-sf-fallback-excerpt {
	font-size: 14px !important;
	color: #555 !important;
	margin-bottom: 12px !important;
}

.ksi-sf-fallback-link {
	display: inline-block !important;
	background: #e5ce83 !important;
	padding: 10px 16px !important;
	border-radius: 4px !important;
	text-decoration: none !important;
	color: #222 !important;
	font-weight: 600 !important;
}

/* ------------------------------------------------------------------
 * Pagination
 * ----------------------------------------------------------------*/

.ksi-sf-pagination {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 8px !important;
	margin-top: 28px !important;
	grid-column: 1 / -1;
}

.ksi-sf-pagination .ksi-sf-page-link {
	border: 1px solid #ddd !important;
	background: #fff !important;
	border-radius: 6px !important;
	min-width: 36px !important;
	height: 36px !important;
	padding: 0 8px !important;
	cursor: pointer;
	font-size: 14px !important;
	color: #2b2b2b !important;
	transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.ksi-sf-pagination .ksi-sf-page-link:hover:not(:disabled) {
	border-color: #701f2e !important;
}

.ksi-sf-pagination .ksi-sf-page-link.is-active {
	background: #701f2e !important;
	color: #fff !important;
	border-color: #701f2e !important;
}

.ksi-sf-pagination .ksi-sf-page-link:disabled {
	opacity: 0.4 !important;
	cursor: not-allowed;
}

@media(max-width:1440px){
	#ksi-sf-top-filters .ksi-sf-dropdown-toggle {
    width: auto !important;
	padding: 8px 18px !important;
}

}

@media(max-width:1366px){
	#ksi-sf-sidebar .ksi-sf-accordion-title {
    font-size: 18px;
}
#ksi-sf-sidebar .ksi-sf-sidebar-card {
    padding: 30px 20px;
    gap: 14px;
}
#ksi-sf-sidebar .ksi-sf-accordion-body {
    gap: 10px;
    padding-left: 0px;
}
}
@media(max-width:1024px){
    #ksi-sf-sidebar .ksi-sf-sidebar-card {
        padding: 30px 10px;
    }

}
@media(max-width:767px){
    #ksi-sf-sidebar .ksi-sf-sidebar-heading {
    font-size: 20px;
}

}


/* ==================================================================
   Mobile / tablet: consolidated "Filters" sheet (<=880px)
   JS moves #ksi-sf-sidebar and #ksi-sf-top-filters into this sheet;
   these rules only govern the sheet chrome itself.
   ================================================================== */

.ksi-sf-mobile-trigger {
	display: none !important;
}

@media (max-width: 880px) {
	.ksi-sf-mobile-trigger {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 10px !important;
		position: sticky !important;
		top: 0 !important;
		z-index: 40 !important;
		width: 100% !important;
		background: #701f2e !important;
		color: #fff !important;
		border: none !important;
		padding: 14px 20px !important;
		font-size: 16px !important;
		font-weight: 600 !important;
		cursor: pointer !important;
		margin-bottom: 16px !important;
	}

	.ksi-sf-mobile-trigger-count {
		background: #fff !important;
		color: #701f2e !important;
		border-radius: 999px !important;
		font-size: 12px !important;
		font-weight: 700 !important;
		padding: 2px 9px !important;
		line-height: 1.5 !important;
	}

	body.ksi-sf-sheet-open {
		overflow: hidden !important;
	}

	.ksi-sf-sheet-overlay {
		position: fixed !important;
		inset: 0 !important;
		z-index: 1000 !important;
		background: rgba(0, 0, 0, 0.45) !important;
		display: flex !important;
		align-items: flex-end !important;
	}

	.ksi-sf-sheet-overlay[hidden] {
		display: none !important;
	}

	.ksi-sf-sheet-panel {
		width: 100% !important;
		max-height: 88vh !important;
		background: #fff !important;
		border-radius: 16px 16px 0 0 !important;
		display: flex !important;
		flex-direction: column !important;
		transform: translateY(100%) !important;
		transition: transform 0.25s ease !important;
	}

	.ksi-sf-sheet-overlay.is-open .ksi-sf-sheet-panel {
		transform: translateY(0) !important;
	}

	.ksi-sf-sheet-header {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		padding: 18px 20px !important;
		border-bottom: 1px solid #ebebeb !important;
		flex-shrink: 0 !important;
	}

	.ksi-sf-sheet-title {
		font-size: 18px !important;
		font-weight: 600 !important;
		color: #000 !important;
	}

	.ksi-sf-sheet-close {
		border: none !important;
		background: none !important;
		font-size: 24px !important;
		line-height: 1 !important;
		cursor: pointer !important;
		color: #4c4c4c !important;
		padding: 4px 8px !important;
	}

	.ksi-sf-sheet-body {
		overflow-y: auto !important;
		padding: 20px !important;
		flex: 1 !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 24px !important;
	}

	.ksi-sf-sheet-body #ksi-sf-sidebar .ksi-sf-sidebar-card {
		border: none !important;
		padding: 0 !important;
	}

	.ksi-sf-sheet-body #ksi-sf-sidebar .ksi-sf-sidebar-heading {
		display: none !important;
	}

	.ksi-sf-sheet-body #ksi-sf-top-filters {
		flex-direction: column !important;
		gap: 10px !important;
		margin-bottom: 0 !important;
	}

	.ksi-sf-sheet-body #ksi-sf-top-filters .ksi-sf-dropdown {
		width: 100% !important;
	}

	.ksi-sf-sheet-body #ksi-sf-top-filters .ksi-sf-dropdown-toggle {
		width: 100% !important;
		justify-content: space-between !important;
	}

	.ksi-sf-sheet-body #ksi-sf-top-filters .ksi-sf-dropdown-panel {
		position: static !important;
		box-shadow: none !important;
		border: none !important;
		width: 100% !important;
		max-height: none !important;
	}

	.ksi-sf-sheet-footer {
		display: flex !important;
		gap: 12px !important;
		padding: 16px 20px !important;
		border-top: 1px solid #ebebeb !important;
		flex-shrink: 0 !important;
	}

	.ksi-sf-sheet-clear {
		flex: 1 !important;
		background: #fff !important;
		border: 1px solid #701f2e !important;
		color: #701f2e !important;
		border-radius: 999px !important;
		padding: 12px !important;
		font-size: 15px !important;
		font-weight: 600 !important;
		cursor: pointer !important;
	}

	.ksi-sf-sheet-apply {
		flex: 1 !important;
		background: #701f2e !important;
		border: none !important;
		color: #fff !important;
		border-radius: 999px !important;
		padding: 12px !important;
		font-size: 15px !important;
		font-weight: 600 !important;
		cursor: pointer !important;
	}
}