/**
 * Almaz Filter — Frontend styles.
 */

/* ================================================================== */
/*  Widget container                                                   */
/* ================================================================== */
.almaz-filter-widget {
	/* Accent color. Overridden per filter set via an inline style on this element. */
	--almaz-accent: #2271b1;

	/* Colors the checked/active state of checkboxes, radios and selects.
	   Inherited by all form controls inside the widget. */
	accent-color: var(--almaz-accent);

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #1d2327;
	margin-bottom: 20px;
}

.almaz-filter-widget__title {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
	color: #1d2327;
}

/* ================================================================== */
/*  Filter form                                                        */
/* ================================================================== */
.almaz-filter-form {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ================================================================== */
/*  Accordion sections                                                 */
/* ================================================================== */
.almaz-filter-section {
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	margin-bottom: 8px;
	background: #fff;
}

.almaz-accordion__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 10px 14px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: #1d2327;
	text-align: left;
}

.almaz-accordion__header:hover {
	background: #f9f9f9;
}

/* Remove the focus ring that appears after a mouse click, but keep it for
   keyboard users (accessibility). */
.almaz-accordion__header:focus {
	outline: none;
}

.almaz-accordion__header:focus-visible {
	outline: 2px solid var(--almaz-accent);
	outline-offset: -2px;
}

.almaz-accordion__arrow {
	font-size: 10px;
	transition: transform 0.2s ease;
}

.almaz-accordion__header[aria-expanded="false"] .almaz-accordion__arrow {
	transform: rotate(-90deg);
}

.almaz-accordion__body {
	padding: 8px 14px 14px;
	border-top: 1px solid #e0e0e0;
}

/* ================================================================== */
/*  Filter options (checkbox, radio)                                   */
/* ================================================================== */
.almaz-filter-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	cursor: pointer;
	font-size: 13px;
}

.almaz-filter-option input[type="checkbox"],
.almaz-filter-option input[type="radio"] {
	margin: 0;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.almaz-term-count {
	color: #787c82;
	font-size: 12px;
}

/* ================================================================== */
/*  Select / Dropdown                                                  */
/* ================================================================== */
.almaz-filter-select {
	width: 100%;
	padding: 6px 10px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	font-size: 13px;
	background: #fff;
}

/* ================================================================== */
/*  Range Slider                                                       */
/* ================================================================== */
.almaz-range-slider {
	padding: 10px 0;
}

.almaz-range-slider__track {
	margin: 10px 8px;
}

/* Filled portion of the noUiSlider takes the accent color. */
.almaz-filter-widget .noUi-connect {
	background: var(--almaz-accent);
}

.almaz-range-values {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 8px;
	font-size: 13px;
	color: #50575e;
}

/* ================================================================== */
/*  Date Range                                                         */
/* ================================================================== */
.almaz-date-range {
	display: flex;
	align-items: center;
	gap: 8px;
}

.almaz-date-range input {
	flex: 1;
	padding: 6px 10px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	font-size: 13px;
	background: #fff;
}

.almaz-date-sep {
	color: #787c82;
}

/* ================================================================== */
/*  Meta text input                                                    */
/* ================================================================== */
.almaz-meta-input {
	width: 100%;
	padding: 6px 10px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	font-size: 13px;
}

/* ================================================================== */
/*  Search input with button                                           */
/* ================================================================== */
.almaz-search-section {
	padding: 10px 14px;
}

.almaz-search-section .almaz-filter-section__title {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: 14px;
}

.almaz-search-wrap {
	display: flex;
	gap: 0;
}

.almaz-search-input {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid #c3c4c7;
	border-radius: 4px 0 0 4px;
	border-right: none;
	font-size: 14px;
}

.almaz-search-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 14px;
	background: var(--almaz-accent);
	color: #fff;
	border: 1px solid var(--almaz-accent);
	border-radius: 0 4px 4px 0;
	cursor: pointer;
	transition: filter 0.15s;
}

.almaz-search-btn:hover {
	filter: brightness(0.9);
}

.almaz-search-btn svg {
	width: 16px;
	height: 16px;
}

/* ================================================================== */
/*  Not found message                                                  */
/* ================================================================== */
.almaz-not-found {
	padding: 40px 20px;
	text-align: center;
	color: #787c82;
	font-size: 15px;
	background: #f9f9f9;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
}

.almaz-not-found p {
	margin: 0;
}

/* ================================================================== */
/*  Buttons                                                            */
/* ================================================================== */
.almaz-filter-actions {
	margin-top: 4px;
}

.almaz-apply-btn {
	display: block;
	width: 100%;
	padding: 10px;
	background: var(--almaz-accent);
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.15s;
}

.almaz-apply-btn:hover {
	filter: brightness(0.9);
}

.almaz-reset-btn {
	display: block;
	width: 100%;
	padding: 8px;
	background: none;
	color: var(--almaz-accent);
	border: 1px solid var(--almaz-accent);
	border-radius: 4px;
	font-size: 13px;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.almaz-reset-btn:hover {
	background: var(--almaz-accent);
	color: #fff;
}

/* ================================================================== */
/*  Loading state                                                      */
/* ================================================================== */
.almaz-loading {
	opacity: 0.5;
	pointer-events: none;
	position: relative;
	transition: opacity 0.2s;
}

/* ================================================================== */
/*  Mobile toggle                                                      */
/* ================================================================== */
.almaz-filter-toggle {
	display: none;
}

/* ================================================================== */
/*  Mobile layout (< 768px)                                            */
/* ================================================================== */
@media (max-width: 767px) {
	.almaz-filter-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		padding: 12px;
		background: var(--almaz-accent);
		color: #fff;
		border: none;
		border-radius: 4px;
		font-size: 15px;
		font-weight: 600;
		cursor: pointer;
		margin-bottom: 12px;
	}

	.almaz-filter-toggle__icon {
		font-size: 18px;
	}

	.almaz-filter-form {
		display: none;
	}

	.almaz-filter-form.almaz-open {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;
		background: #fff;
		padding: 16px;
		overflow-y: auto;
		animation: almazSlideUp 0.25s ease;
	}

	/* Prevent body scroll when overlay is open */
	body.almaz-filter-overlay-open {
		overflow: hidden;
	}

	/* Hide the posts/cards container while the filter overlay is open so cards
	   don't show through (robust even if a transformed ancestor breaks the
	   panel's fixed positioning). Applied to the configured container via JS. */
	.almaz-hidden-overlay {
		display: none !important;
	}

	@keyframes almazSlideUp {
		from {
			transform: translateY(100%);
			opacity: 0;
		}
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}
}