/*
 * Filter drawer styles for brand and style range pages.
 * Split from range-page.css on 2026-06-28 so landing/editorial pages avoid unused filter CSS.
 */

/* Source: range-page.css, filter flex foundations */
	#filter,
	#filter #filter-controls,
	#filter #toggle-filters,
	#filter #toggle-sale,
	#filter.open #filters-form,
	#filters-form label input + span,
	#filter #price-range,
	#filter-summary,
	#filter-summary > div {
		display:flex; 
		display:-webkit-flex; 
	}
	
	#filter {
		flex-direction: column;
		-webkit-flex-direction: column;
	}

	#filter #filter-controls {
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
	}
	
	

/* Source: range-page.css, filter drawer controls, form, summary, and result shell */
	#filter {
		background-color:var(--white);
	}
	
	#filter button {
		border:2px solid;
		border-radius: 4px;
		font-size:1.2em;
		position: relative;
	}
	
	#filter #filter-controls button {
		padding: 15px 25px;
	}
	
	#filter button {
		border-color: transparent;
		-webkit-transition: border .3s, background .3s;
		transition: border .3s, background .3s;
	}
	
	#filter #toggle-filters {
		background-color:#fdc752;
	}
	
	#filter.open #toggle-filters {
		border-color: #fdc752;
		position: relative;
	}
	
	
	#filter #toggle-filters #filter-count {
		margin-left:5px;
	}
	
	#filter #toggle-sale {
		background-color:#eee;
		border: 3px solid transparent;
		margin: 20px 20px 20px 0px;
		position: relative;
	}

	#filter #sort-products {
		align-items: center;
		-webkit-align-items: center;
		background-color: var(--white);
		border: 2px solid #e5ebf4;
		border-radius: 4px;
		display: flex;
		display: -webkit-flex;
		font-size: 1.2em;
		font-weight: normal;
		gap: 10px;
		margin: 20px 20px 20px 0px;
		padding: 13px 14px;
	}

	#filter #sort-products select {
		background-color: #f7faff;
		border: 1px solid #d9e3f0;
		border-radius: 3px;
		color: var(--black);
		font: inherit;
		min-width: 190px;
		padding: 4px 28px 4px 8px;
	}


	#filter.sale #toggle-sale,
	#filter #toggle-sale:hover {
		background-color: #f8dfe1;
	}


	#filter #toggle-sale:hover {
		border-color: #b03540;
	}

	#filter.sale #toggle-sale {
		border-color: var(--white);
	}

	#filter #toggle-sale:after {
		color: #df505c;
		content: "\e041";
		font-family: 'Glyphicons Halflings';
		margin-left:10px;
	}

	#filter.sale #filter-controls,
	#filter.sale #sort-products {
		background-color:#df505c;
	}

	#filter.sale #sort-products {
		background-color:#df505c;
		border-color:#b03540;
	}

	#filter.sale #toggle-filters {
		background-color: #b03540;
		border-color:#b03540;
	}

	#filter.sale #filter-controls button:not(#toggle-sale),
	#filter.sale #filter-controls button:not(#toggle-sale):after,
	#filter.sale #sort-products span {
		color:var(--white);
	}
	
	#filter.sale #toggle-filters .f_toggle {
		color:#fdc752;
	}
	
	#range.sale .prod_div:not(.sale),
	#filter-summary .count_items {
		display: none;
	}
	
	.count_items:after {
		content: ' items';
	}
	
	#filter #toggle-filters .f_toggle {
		border-left: solid transparent;
		border-right: solid transparent;
		border-bottom: solid;
		border-width: 0px 8px 14px 8px;
        color:var(--black);
		content: '';
        height: 14px;
        margin: auto 0px auto 10px;
		-webkit-transition: -webkit-transform .3s ease-in-out;
		transition: transform .3s ease-in-out;
        vertical-align: middle;		
		width:14px;
	}
	
	#filter.open #toggle-filters .f_toggle {
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-o-transform: rotate(180deg);
	}


	#filter.open #close-filters {
		display: flex;
		display: -webkit-flex;
	}
	
	#filter.open + #range #filter-summary .count_items {
		display: block;
	}
	
	#filter #close-filters {
		display: none;
		position:absolute;
		top:0;
		right:25px;
		background-color:transparent;
		border-color: #eee;
		padding:15px 25px;
		margin-top: 20px;
	}
	
	
	#filter #close-filters:after {
		color: #333;
		content: '\e014';
		font-family: 'Glyphicons halflings';
		font-weight: 100;
		margin-left: 5px;
		margin-right: 5px;
	}
	
	
	
	#filter #price-range {
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		width:100%;
	}


	#filter #price-range input {
		background-color: #f7faff;
		border-color: var(--blue-pale);
		margin: 0px 15px 0px 5px;
		padding: 4px 8px;
		width:140px;		
	}
	
	#filter #price-range label {
		margin: 0px 8px 0px 0px;
		padding:0px;
	}
	
	#filter #price-range button {
		background-color: var(--blue-pale);
		padding: 0px 15px;
		min-width:140px;
	}
	
	
	
	
	
	#filters-form {
		justify-content: space-around; 
		-webkit-justify-content: space-around; 
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		padding:0px 25px 20px 25px;
		display:none;
		width:100%;
	}	
	
	
	#filters-form > div {
		flex: 1 1 auto !important;
		-webkit-flex: 1 1 auto !important;
		margin-top: 20px;
	}
	
	
	#filters-form > div h4 {		
		margin-bottom:15px;
		width:100%;
	}
	
		
	#filters-form label input[type=checkbox] {
		display:none;
	}
		
	#filters-form label input + span:before {
		background-color: var(--blue-pale);
		border-radius: 3px;
		content: "\e013"; 
		color: var(--white); 
		height: 20px;
		font-family:'glyphicons halflings';
		line-height: 20px;
		margin-right:6px;
		margin-top:3px;
		padding: 0px 2px;
		width: 20px
	}
		
	
	#filters-form label input[type=checkbox]:checked + span:before,
	#filters-form label input[type=radio]:checked + span:before,
	#filters-form label input[type=checkbox]:checked + span:before  {
		background-color: var(--blue-highlight);
		color:var(--blue-pale); 
		font-weight: normal;
	}	
	
	#filters-form label input[type=checkbox]:checked + span  {
		color:var(--blue-highlight); 
		font-weight: bold;
	}
	
	
	#filter-results {
		justify-content: flex-start;
		-webkit-justify-content: flex-start;
	}
	
	
	#filter-summary {
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		padding: 0px calc(15px + 1%) 20px calc(15px + 1%);
	}
	
	#filter-summary > * {
		font-size:16px;
		font-weight: normal;
		margin: 0px 15px 15px 0px;
		padding: 5px 25px;
	}
	
	#filter-summary > div {
		align-items: center;
		-webkit-align-items: center;
		background-color: var(--blue-pale);
		border-radius:3px;
		color: var(--black);
		cursor: pointer;
	}
	
	#filter-summary > div:after {
		content: '\e014'; 
		color: #b1bbcd;
		font-family: 'glyphicons halflings';
		font-size: 14px;
		margin-left: 8px;
	}
			
	#filter-summary > div:hover:after {
		color: var(--blue-highlight) !important;
	}
							 

/* Source: range-page.css, desktop filter drawer media rules */
@media (min-width:992px) {
	
	#filter-controls #toggle-filters {
		margin: 20px 20px 20px calc(15px + 1%);
	}
	
	#filters-form label {
		cursor: pointer;
		font-weight: normal;
		font-size: 17px;
		margin: 0px 0px 3px 0px;
		padding: 4px;
	}	
	
	
	#filters-form #filters-brands,
	#filters-form #filters-frames {
		width:50%;
	}
		
	#filters-form #filters-brands label,
	#filters-form #filters-frames label {
		min-width:150px;
		width:20%;
	}
	
	
	#filters-form #filters-styles,	
	#filters-form #filters-road {
		width:45%;
	}
		
	#filters-form #filters-styles label,
	#filters-form #filters-road label {
		min-width:160px;
		width:33%;
	}
	
	
	#filter #close-filters:before {
		content: 'Close';
		margin-left: 5px;
	}

	#filter.sale {
		padding-top: 10px;
	}
}

/* Source: range-page.css, mobile filter drawer media rules */
@media (max-width:991px) {
	
	#filter #filter-controls button {
		font-size: 3rem;
		padding: 10px 25px;
	}
	
	#filter-controls #toggle-filters {
		margin: 20px;
	}
	
	#filter #filter-controls button#toggle-sale {
		-webkit-flex: 1;
		flex: 1;
	}

	#filter #sort-products {
		background-color: #e5ebf4;
		border: none;
		font-size: 3rem;
		margin: 0px 20px 20px 20px;
		padding: 14px 25px;
		width: calc(100% - 40px);
	}

	#filter.sale #sort-products {
		background-color: #e5ebf433;
	}

	#filter #sort-products span {
		padding-right: 4px;
	}

	#filter #sort-products select {
		flex: 1;
		-webkit-flex: 1;
		font-size: 3rem;
	}

	#filter.sale #sort-products select {
		border-color: transparent;
	}
	
	#filter #close-filters {
		border: none;
		font-size: 3rem;
		padding: 20px 25px;
	}
	
	#filters-form > div h4 {
		font-size:3rem;
	}
	
	#filters-form label,
	#filters-form button {
		font-size: 2.5rem;
	}
	
	#filters-form button {
		font-weight:bold;
	}
	
	#filters-form label {
		font-weight: normal;
		margin: 0px 0px 3px 0px;
		padding:4px;
	}	
	
	
	#filters-form #filters-brands,
	#filters-form #filters-frames,
	#filters-form #filters-styles,	
	#filters-form #filters-road {
		width:100%;
	}
		
	#filters-form #filters-brands label {
		min-width:185px;
	}
	
	#filters-form #filters-styles label,
	#filters-form #filters-road label,
	#filters-form #filters-frames label {
		min-width:45%;
	}
	
	
	#filters-form label input + span:before {
		background-color: #d9e6ff;
		height: 25px;
		margin-right: 10px;
		width: 25px;
	}
	

	#filter #price-range {
		justify-content: space-between;
		-webkit-justify-content: space-between;
	}

	#filter #price-range label {
		display: flex;
		display: -webkit-flex;
		flex-wrap: nowrap;
		-webkit-flex-wrap: nowrap;
		align-items: center;
		-webkit-align-items: center;
		white-space: pre;
		margin: 0;
	}
	
	#filter #price-range label {
		width: calc(100% / 3);
	}	
	
	#filter #price-range input {
		margin-right: 0px;
		width:100%;
	}	
	
	
	#loading-spinner-b {
		position: fixed;
		top:40vh;
		z-index: 999;
	}
	
	
	#filter-summary > * {
		font-size:2.5rem;
	}
}

/* Source: range-page.css, filter ajax spinner rules */
	.spinner {
		animation: spin 2s linear infinite; /* Spin animation */
		border-radius: 50%;
		/* display: none; Initially hidden */
		position: absolute;
		transform: translate(-50%, -50%);
	}

	#loading-spinner-a {
		width: 2.8rem;
		height: 2.8rem;
		border: 5px solid #f9c45b;
		border-top: 5px solid #f9c45b;
		border-right: 5px solid var(--black);
		border-left: 5px solid var(--black);
		top: 14px;
		right: 19px;
		background-color: #f9c45b;
	}
	
	#filter.open #loading-spinner-a {
		visibility: hidden;
	}
	
	#loading-spinner-b {
		width: 120px;
		height: 120px;
		/*border: 15px solid #36579a;
		border-top: 15px solid #68af2b;
		border-right: 15px solid #b4d2ff;
		border-left: 15px solid #fdc752;*/
		border: 15px solid  var(--blue-highlight)dd;
		border-left: 15px solid  var(--blue-highlight)dd;
		border-top: 15px solid transparent;
		border-right: 15px solid transparent;
		top: 30vh;
		left: 40vw;
	} /* ... Middle of page and large, when #toggle-filters is not position:relative ... */

	#loading-spinner-b.spinner {
		animation: spin 1s linear infinite;
	}

/* Source: range-page.css, wide desktop filter result tile sizing */
@media screen and (min-width: 1920px) {
	#filter-results .prod_div {
		width: 18%;
	}
}