/**
 * FlowDecor — "skinNice" for the HUSKY / WOOF range sliders.
 *
 * ion.rangeSlider 2.1.2 shipped this look as ion.rangeSlider.skinNice.css,
 * driven by the sprite sprite-skin-nice.png. Version 2.3.1 rewrote the markup
 * (no more .irs-line-left/mid/right, .irs-bar-edge or .irs-slider) and merged
 * all skins into one stylesheet, so the original skin CSS no longer matches
 * anything.
 *
 * This is that skin ported to the 2.3.1 markup, with the exact geometry,
 * sprite offsets and colours from the original file:
 *
 *   sprite row      0        track
 *   sprite row   -60px       selected range
 *   sprite row  -120px       handle
 *   sprite row  -150px       handle, hover
 *
 * The sprite is copied into the theme (woof/img/) rather than referenced from
 * the plugin, so nothing here depends on the plugin's folder layout.
 *
 * Loaded after ion.rangeSlider.css by flowdecor_woof_slider_styles() in
 * functions.php, so no !important is needed.
 *
 * Both .irs--round and .irs--flat are targeted: neither WOOF slider passes a
 * skin option, so the widget falls back to whatever 2.3.1's default is.
 */

/* Geometry --------------------------------------------------------------- */
.irs--round,
.irs--flat {
	height: 40px;
}

.irs--round.irs-with-grid,
.irs--flat.irs-with-grid {
	height: 60px;
}

.irs--round .irs,
.irs--flat .irs {
	height: 40px;
}

/* Track ------------------------------------------------------------------ */
.irs--round .irs-line,
.irs--flat .irs-line {
	height: 8px;
	top: 25px;
	background: url(img/sprite-skin-nice.png) repeat-x 0 0;
	border-radius: 0;
}

/* Selected range --------------------------------------------------------- */
.irs--round .irs-bar,
.irs--flat .irs-bar {
	height: 8px;
	top: 25px;
	background: url(img/sprite-skin-nice.png) repeat-x 0 -60px;
	border-radius: 0;
}

.irs--round .irs-shadow,
.irs--flat .irs-shadow {
	height: 1px;
	top: 34px;
	background: #000000;
	opacity: 0.15;
}

/* Handles ---------------------------------------------------------------- */
.irs--round .irs-handle,
.irs--flat .irs-handle {
	width: 22px;
	height: 22px;
	top: 17px;
	background: url(img/sprite-skin-nice.png) no-repeat 0 -120px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.irs--round .irs-handle.state_hover,
.irs--round .irs-handle:hover,
.irs--flat .irs-handle.state_hover,
.irs--flat .irs-handle:hover {
	background-position: 0 -150px;
}

/* 2.3.1 builds handles from three <i> elements; skinNice draws the whole
   handle with the sprite, so they must not render. */
.irs--round .irs-handle > i,
.irs--flat .irs-handle > i {
	display: none;
}

/* Min / max end labels --------------------------------------------------- */
.irs--round .irs-min,
.irs--round .irs-max,
.irs--flat .irs-min,
.irs--flat .irs-max {
	color: #999999;
	font-size: 10px;
	line-height: 1.333;
	text-shadow: none;
	top: 0;
	padding: 1px 3px;
	background: rgba(0, 0, 0, 0.1);
	border-radius: 3px;
}

/* Value bubbles ---------------------------------------------------------- */
.irs--round .irs-from,
.irs--round .irs-to,
.irs--round .irs-single,
.irs--flat .irs-from,
.irs--flat .irs-to,
.irs--flat .irs-single {
	color: #ffffff;
	font-size: 10px;
	line-height: 1.333;
	text-shadow: none;
	padding: 1px 5px;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 3px;
}

/* skinNice had no pointer under the bubbles; 2.3.1 adds one. */
.irs--round .irs-from:before,
.irs--round .irs-to:before,
.irs--round .irs-single:before,
.irs--flat .irs-from:before,
.irs--flat .irs-to:before,
.irs--flat .irs-single:before {
	display: none;
}

/* Grid ------------------------------------------------------------------- */
.irs--round .irs-grid-pol,
.irs--flat .irs-grid-pol {
	background: #99a4ac;
}

.irs--round .irs-grid-text,
.irs--flat .irs-grid-text {
	color: #99a4ac;
}

/* ========================================================================
   Active filter chips (.woof_products_top_panel)
   ========================================================================

   WOOF renders each active filter as:

       <li><a data-slug="19^35"><span class="woof_remove_ppi">HEIGHT": 19-35</span></a></li>

   front.js binds the click-to-remove handler to .woof_remove_ppi, but draws
   no affordance for it. This adds the ✕ so it reads as removable. The
   "Clear All" button (.woof_reset_button_2) is left as is.

   The container label in grouped filters (e.g. "FINISH:") is a plain <li>
   with no .woof_remove_ppi, so it correctly gets no ✕.                    */

.woof_products_top_panel .woof_remove_ppi {
	cursor: pointer;
}

.woof_products_top_panel .woof_remove_ppi:after {
	content: "\2715";
	display: inline-block;
	margin-left: 7px;
	font-size: 0.85em;
	line-height: 1;
	color: #99a4ac;
	vertical-align: baseline;
}

.woof_products_top_panel a:hover .woof_remove_ppi:after {
	color: #55595e;
}


.woof_reset_button_2 { display:none !important;}