/*
 * Shop by Budget – fully custom CSS
 * No theme variables used. Colours are hardcoded.
 * Font-family is the only inherited property.
 *
 * Desktop : one horizontal row  →  [Min] ──slider── [Max] [Button]
 * Tablet  : slider full-width top, inputs + button row below
 * Mobile  : fully stacked, full-width elements
 */

/* ─── Tokens ──────────────────────────────────────────────────────────────── */

.sbb-widget {
	--blue:        #2563eb;
	--blue-hover:  #1d4ed8;
	--blue-light:  rgba(37, 99, 235, 0.12);
	--track-bg:    #e2e8f0;
	--input-bg:    #f1f5f9;
	--border:      #cbd5e1;
	--text:        #1e293b;
	--muted:       #64748b;
	--radius:      6px;
	--gap:         20px;
}

/* ─── Widget root – horizontal flex row on desktop ────────────────────────── */

.sbb-widget {
	display:        flex;
	flex-direction: row;
	align-items:    flex-end;   /* labels top, inputs/track/button baseline-aligned */
	gap:            var(--gap);
	width:          100%;
	box-sizing:     border-box;
	font-family:    inherit;
	color:          var(--text);
}

.sbb-widget *,
.sbb-widget *::before,
.sbb-widget *::after {
	box-sizing: inherit;
}

/* ─── Input wrap (label + input stacked) ──────────────────────────────────── */

.sbb-input-wrap {
	display:        flex;
	flex-direction: column;
	gap:            7px;
	flex:           0 0 140px;  /* fixed width on desktop */
}

.sbb-field-label {
	display:     block;
	font-family: inherit;
	font-size:   12px;
	font-weight: 600;
	color:       var(--muted);
	line-height: 1;
	white-space: nowrap;
}

.sbb-input {
	width:           100%;
	padding:         11px 14px;
	background:      var(--input-bg);
	border:          1.5px solid var(--border);
	border-radius:   var(--radius);
	font-family:     inherit;
	font-size:       14px;
	font-weight:     600;
	color:           var(--text);
	line-height:     1;
	transition:      border-color 0.18s, box-shadow 0.18s, background 0.18s;
	-moz-appearance: textfield;
	appearance:      textfield;
}

.sbb-input:focus {
	outline:      none;
	border-color: var(--blue);
	background:   #fff;
	box-shadow:   0 0 0 3px var(--blue-light);
}

.sbb-input::-webkit-inner-spin-button,
.sbb-input::-webkit-outer-spin-button {
	opacity: 0.3;
}

/* ─── Slider section – grows to fill remaining width ─────────────────────── */

.sbb-track-section {
	flex:       1 1 0;
	min-width:  80px;
	/*
	 * The top padding aligns the slider track with the input bottom edge.
	 * Label (12px font ≈ 16px rendered) + gap (7px) = ~23px
	 * We add a couple of extra px so the track visually sits at mid-input height.
	 */
	padding:    28px 6px 7px;
}

/* Track */
.sbb-widget .noUi-target {
	height:        6px;
	background:    var(--track-bg);
	border:        none;
	box-shadow:    none;
	border-radius: 99px;
}

.sbb-widget .noUi-base,
.sbb-widget .noUi-connects {
	border-radius: 99px;
}

/* Filled range */
.sbb-widget .noUi-connect {
	background:    var(--blue);
	border-radius: 99px;
}

/* Handles */
.sbb-widget .noUi-handle {
	width:         22px;
	height:        22px;
	top:           -8px;
	right:         -11px;
	border-radius: 50%;
	background:    #ffffff;
	border:        2.5px solid var(--blue);
	box-shadow:    0 1px 6px rgba(37, 99, 235, 0.3);
	cursor:        grab;
	transition:    border-color 0.18s, box-shadow 0.18s;
}

.sbb-widget .noUi-handle:hover {
	border-color: var(--blue-hover);
	box-shadow:   0 0 0 5px var(--blue-light), 0 1px 6px rgba(37, 99, 235, 0.3);
}

.sbb-widget .noUi-handle:active {
	cursor: grabbing;
}

.sbb-widget .noUi-handle::before,
.sbb-widget .noUi-handle::after {
	display: none;
}

.sbb-widget .noUi-handle:focus-visible {
	outline:      none;
	box-shadow:   0 0 0 4px var(--blue-light);
	border-color: var(--blue-hover);
}

/* ─── Button wrap – matches input-wrap height via flex-end alignment ──────── */

.sbb-btn-wrap {
	flex: 0 0 auto;
}

/*
 * The button uses both a double-class selector AND !important on every
 * property that WoodMart's global `button` reset clobbers.
 * Scoped to .sbb-widget so nothing outside is affected.
 */
.sbb-widget button.sbb-btn,
.sbb-widget .sbb-btn {
	display:            block         !important;
	width:              auto          !important;
	min-width:          140px         !important;
	padding:            12px 28px     !important;
	margin:             0             !important;
	background:         #2563eb       !important;
	background-color:   #2563eb       !important;
	color:              #ffffff       !important;
	border:             none          !important;
	border-radius:      var(--radius) !important;
	font-family:        inherit       !important;
	font-size:          14px          !important;
	font-weight:        700           !important;
	line-height:        1.5           !important;
	letter-spacing:     0.02em        !important;
	text-align:         center        !important;
	text-transform:     none          !important;
	text-decoration:    none          !important;
	cursor:             pointer       !important;
	white-space:        nowrap        !important;
	box-shadow:         0 2px 10px rgba(37, 99, 235, 0.35) !important;
	transition:         background 0.2s ease, box-shadow 0.2s ease !important;
	-webkit-appearance: none          !important;
	appearance:         none          !important;
}

.sbb-widget button.sbb-btn:hover,
.sbb-widget .sbb-btn:hover {
	background:       #1d4ed8 !important;
	background-color: #1d4ed8 !important;
	box-shadow:       0 4px 16px rgba(37, 99, 235, 0.45) !important;
}

.sbb-widget button.sbb-btn:active,
.sbb-widget .sbb-btn:active {
	background:       #1e40af !important;
	background-color: #1e40af !important;
	transform:        translateY(1px) !important;
}

.sbb-widget button.sbb-btn:focus-visible,
.sbb-widget .sbb-btn:focus-visible {
	outline:        2px solid #2563eb !important;
	outline-offset: 3px               !important;
}

/* ─── Responsive – tablet (≤ 900 px) ─────────────────────────────────────── */
/*
 * Slider goes full-width on its own row (order: -1).
 * Min input, Max input, and button sit in a single row below.
 */

@media (max-width: 900px) {
	.sbb-widget {
		flex-wrap:   wrap;
		align-items: stretch;
		gap:         14px;
	}

	.sbb-track-section {
		flex:    1 1 100%;
		order:   -1;
		padding: 10px 6px 10px;
	}

	.sbb-input-wrap {
		flex: 1 1 0;
		min-width: 100px;
	}

	.sbb-btn-wrap {
		flex: 1 1 auto;
		display: flex;
		align-items: flex-end;
	}

	.sbb-widget button.sbb-btn,
	.sbb-widget .sbb-btn {
		width: 100% !important;
	}
}

/* ─── Responsive – mobile (≤ 560 px) ─────────────────────────────────────── */
/* Fully stacked */

@media (max-width: 560px) {
	.sbb-widget {
		flex-direction: column;
		align-items:    stretch;
		gap:            12px;
	}

	.sbb-input-wrap {
		flex: 1 1 auto;
	}

	.sbb-btn-wrap {
		flex: none;
	}

	.sbb-widget button.sbb-btn,
	.sbb-widget .sbb-btn {
		width: 100% !important;
	}
}

/* ─── Shortcode wrapper ───────────────────────────────────────────────────── */

.sbb-shortcode-wrap {
	width: 100%;
}