/**
 * NAFS Frontend Styles.
 * Custom styling to replace WooCommerce price slider classes, 
 * utilizing Woodmart CSS variables for seamless theme integration.
 */

.nafs_slider_wrapper {
	padding-top: 15px;
	margin-bottom: 20px;
}

/* Base Slider Track */
.nafs_slider_wrapper .nafs_slider {
	position: relative;
	text-align: left;
	background-color: rgba(120, 120, 120, 0.2);
	height: 4px;
	border-radius: 4px;
	margin-bottom: 25px;
}

/* Active Range */
.nafs_slider_wrapper .nafs_slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
	border-radius: 4px;
	background-color: var(--wd-primary-color, #333);
	height: 100%;
}

/* Handles */
.nafs_slider_wrapper .nafs_slider .ui-slider-handle {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 15px;
	height: 15px;
	margin-top: -7px;
	margin-left: -7px;
	background-color: var(--wd-primary-color, #333);
	border-radius: 50%;
	cursor: ew-resize !important;
	outline: none;
	border: none;
	border-radius: 0;
	background: none;
	box-shadow: none !important;
}

.nafs_slider_wrapper .nafs_slider .ui-slider-handle:after {
	content: "";
	display: inline-block;
	width: 4px;
	height: 15px;
	background-color: var(--wd-primary-color);
}

.nafs_slider_wrapper .nafs_slider .ui-slider-handle.ui-state-focus:after,
.nafs_slider_wrapper .nafs_slider .ui-slider-handle.ui-state-active:after,
.nafs_slider_wrapper .nafs_slider .ui-slider-handle.ui-state-hover:after {
	background-color: color-mix(in srgb, var(--wd-primary-color) 75%, black 25%);
}

.nafs_slider_wrapper .nafs_slider .ui-slider-handle.ui-state-focus,
.nafs_slider_wrapper .nafs_slider .ui-slider-handle.ui-state-active,
.nafs_slider_wrapper .nafs_slider .ui-slider-handle.ui-state-hover {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
	background: none !important;
}

/* Amount Container */
.nafs_slider_amount {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	line-height: 1;
	flex-wrap: wrap;
	gap: 10px;
}

.nafs_slider_amount .button {
	order: 2;
	padding: 5px 14px;
	min-height: 36px;
	font-size: 12px;
	font-weight: var(--btn-default-font-weight, var(--btn-font-weight, 600));
	border-radius: var(--btn-default-brd-radius);
	text-transform: var(--btn-default-transform, var(--btn-transform, uppercase));
	background-color: var(--btn-default-bgcolor);
	color: var(--btn-default-color);
	box-shadow: var(--btn-default-box-shadow);
	border: none;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.nafs_slider_amount .button:hover,
.nafs_slider_amount .button:active {
	background-color: var(--btn-default-bgcolor-hover);
	color: var(--btn-default-color-hover);
	box-shadow: var(--btn-default-box-shadow-hover);
}

/* Label */
.nafs_slider_amount .nafs_label {
	order: 1;
	color: var(--color-gray-500);
}

.nafs_slider_amount .nafs_label span {
	font-weight: 600;
	color: var(--color-gray-900);
}

.nafs_slider_amount .clear {
	display: none;
}