.pf-hub { border:1px solid #eee; padding:12px; background:#fff; }
.pf-filters { margin-bottom:10px; }
.pf-map-and-list { display:flex; gap:12px; }
.pf-map { flex:1; height:200px; background:#f5f5f5; border:1px solid #ddd; display:flex; align-items:center; justify-content:center; color:#888;}
.pf-results { flex:1; border:1px solid #eee; padding:8px; max-height:300px; overflow:auto;}
.pf-list { list-style:none; margin:0; padding:0; }
.pf-item { padding:8px; border-bottom:1px solid #efefef; }
.pf-item:hover { background:#fafafa; }
.pf-details { border:1px solid #eee; padding:12px; }
.pf-loading{ color:#666; }
.pf-error{ color:#c00; }
.pf-note{ font-size:12px; color:#666; margin-top:8px; }

/* Mockup-inspired filter styles */
.pf-filter-row{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.pf-filter-item{ display:flex; }
.pf-filter-item .pf-label{ font-size:12px; color:#666; margin-bottom:6px; }
.pf-filter-item input, .pf-filter-item select{ padding:8px 10px; border:1px solid #e6e6e6; border-radius:6px;}
.pf-btn{ padding:10px 14px; border-radius:30px; cursor:pointer; border:0; color:#545454}
.pf-popular-cities{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.pf-city-tag{ display:inline-block; padding:6px 10px; background:transparent; ; color:#0b7285; text-decoration:none; font-size:14px; }
.pf-city-tag:hover{  }

/* Map and results layout */
.pf-map-and-list.mockup-map-list{ display:flex; gap:12px; margin-top:12px; }
.pf-map{ flex:1; min-height:220px; background:#f7f5ef; border:1px solid #e6d8c9; display:flex; align-items:center; justify-content:center; color:#666; }
.pf-results{ flex:1; max-height:420px; overflow:auto; border:1px solid #eee; padding:8px; background:#fff; }

/* Details */
.pf-details-header h2{ margin:0 0 6px 0; }
.pf-details-results .pf-detail-item{ padding:12px; border-bottom:1px solid #f0f0f0; }

/* HERO style inspired by screenshot */
.pf-hub-hero{ background:#f5efe6; padding:28px; border-radius:6px; }
.pf-hero-inner{ display:flex; gap:20px; align-items:flex-start; max-width:1200px; margin:0 auto; }
.pf-hero-left{ flex:1; }
.pf-hero-right{ width:420px; display:flex; flex-direction:column; gap:12px; }
.pf-hero-title{ margin:0 0 14px 0; }

/* pill filters */
.pf-filter-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.pf-pill{ position:relative; display:flex; align-items:center; background:#fff; border-radius:30px; padding:6px 12px; box-shadow:0 1px 0 rgba(0,0,0,0.02); border:1px solid #e6e0d6; }
.pf-pill input{ border:0; outline:0; font-size:14px; margin: 0 !important;  }
/* Not mobile */
@media (min-width: 901px) {
	.pf-pill input{ border: none !important; }
}

.pf-pill select{ border:0; outline:0; background:transparent; padding:6px 8px; font-size:14px; }
.pf-icon{ margin-left:8px; font-size:14px; opacity:0.8; }
.pf-filter-action .pf-btn{ border-radius:22px; padding:10px 16px; font-size:14px; }

.pf-btn-primary{ background:#8ed1f2; color:#fff; font-weight:700; border:0; }
.pf-btn-primary:hover{ background:#637072; transition: background 0.2s; color:#fff; }

/* popular city tags as underlined links */
.pf-popular-cities{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.pf-city-tag{ color:#333; text-decoration:underline; font-size:14px; padding:2px 0; }
.pf-city-tag:hover{ color:#0b7285; }

/* how-to steps */
.pf-howto{ margin-top:18px; }
.pf-howto h3{ margin:10px 0 12px 0; }
.pf-steps{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; justify-content:flex-start; }
.pf-step{ display:flex; gap:10px; align-items:center; }
.pf-step-num{ width:36px; height:36px; border-radius:50%; background:#6aa7a1; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; line-height: 36px; }
.pf-step-text{ font-size:13px; color:#5a5a5a; max-width:160px; }

/* map placeholder */
.pf-map{ background:#6daaa3; border-radius:40px; min-height:300px; position:relative; overflow:hidden; }
.pf-pin{ width:14px; height:18px; background:#9c2b3b; border-radius:50% 50% 50% 50% / 55% 55% 45% 45%; position:absolute; transform:translate(-50%,-100%); box-shadow:0 2px 4px rgba(0,0,0,0.15); }
.pf-pin:after{ content:''; position:absolute; left:50%; top:60%; transform:translateX(-50%); width:6px; height:6px; background:#fff; border-radius:50%; }

/* results box to right/below map */
.pf-results{ background:#fff; border-radius:8px; padding:12px; min-height:120px; }

@media (max-width:900px){
	.pf-hero-inner{ flex-direction:column; }
	.pf-hero-right{ width:100%; }
	.pf-steps{
		flex-direction:column; gap:12px;
	}
	.pf-step{
		flex:1 1 100%; justify-content:center;flex-direction:column; align-items:center;gap:0; width:100%;
	}
	.pf-step-text{
		max-width:100%;
		text-align:center;
	}
}

/* Mobile refine button + popup
	 - Button floats near the bottom-left (like the mockup)
	 - Popup appears at the right side and contains the existing refine controls
		 (we clone/move them into the popup via JS on small screens)
*/
.pf-mobile-refine-btn{ display:none; /* inserted into the refine area on mobile */ z-index:220; border-radius:40px; padding:14px 26px; box-shadow:0 8px 24px rgba(0,0,0,0.12); background:#6b6b6b; color:#fff; align-items:center; gap:8px; border:0; font-size:15px; font-weight:500; max-width:820px;margin:auto;  display:flex; justify-content:space-between; }
.pf-mobile-refine-btn .pf-icon{ margin-left:6px; color:inherit; opacity:0.95; }
.pf-mobile-refine-btn span{ color:inherit; }
.pf-mobile-refine-btn:hover{ box-shadow:0 10px 30px rgba(0,0,0,0.18); }

.pf-mobile-refine-popup{ display:none; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:92%; max-width:420px; z-index:999; background:#fff; border:1px solid #545454; border-radius:10px; box-shadow:0 18px 40px rgba(0,0,0,0.18); padding:12px; }
.pf-mobile-refine-popup.open{ display:block; }
.pf-mobile-refine-popup .pf-mobile-close{ display:flex; justify-content:flex-end; }
.pf-mobile-refine-popup .pf-mobile-close .pf-btn{ padding:6px 10px; }

@media (max-width:900px){
	/* hide only the inline controls that live inside the .pf-refine block on small screens; the JS moves them into the popup */
	.pf-refine > .pf-refine-controls{ display:none !important; }
	.pf-refine > h3{ text-align: center; }
	.pf-mobile-refine-btn{ display:flex; align-items:center;justify-content:center; }
	.pf-hero-title{text-align:center;}
}

/* ensure controls moved into the mobile popup are visible */
.pf-mobile-refine-popup .pf-refine-controls{ display:flex !important;    justify-content: center; }

/* Results banner styles */
.pf-results-banner{
	/* background image visible behind a white card containing the text */
	background: url('../images/background_result_header.png') center/cover no-repeat;
	padding:18px 20px;
	margin:12px 10%;
	display:flex;
	align-items:center;
	min-height:220px;
}

/* white card on top of the image containing the textual content */
.pf-banner{
	background:#ffffff;
	padding:22px 20px;
	border-radius:8px;
	box-shadow:0 10px 30px rgba(0,0,0,0.08);
	max-width:420px;
}
.pf-banner{ display:flex; flex-direction:column; gap:10px; }
.pf-banner-title{ font-weight:800; color:#545454; font-size:18px; }
.pf-banner-filters{ font-size:13px; color:#374151; }
/* when the info text is displayed below the banner image, give it spacing */
#pf-banner-info{ margin-top:12px; color:#6b6b6b; }

/* No-results banner -- show text in place of the hero image/card
   Remove hero background and white card, align text left and vertically
   with the refine header. */
.pf-results-banner.pf-no-results-banner{
	background:transparent !important;
	padding:0px !important;
	margin: 50px 0px !important;
	min-height:40px !important;
	display:block !important;
}
.pf-results-banner.pf-no-results-banner .pf-no-results-inner{ display:block; max-width:100%; }
.pf-results-banner.pf-no-results-banner .pf-banner-title{
	font-weight:800; color:#1f2937; font-size:18px; text-align:left; margin:0;
}
.pf-results-banner.pf-no-results-banner .pf-no-results-count{
	color:#6b6b6b; margin-top:6px; font-weight:600; text-align:left;
}

/* Align the banner text vertically near the top so it sits at similar
   height as the "Affinez votre recherche" heading below (approx.) */
.pf-results-banner.pf-no-results-banner{ align-items:flex-start; }

/* Responsive: center the card and reduce sizes on small screens */
@media (max-width:900px){
	.pf-results-banner{ background-position: center top; min-height:250px; display:flex !important; justify-content:flex-end; margin:0; align-items:flex-end; background-position-x:58%; }
	.pf-banner{ max-width:100%; padding:14px; }
	.pf-banner-title{ font-size:16px; }
}

/* Refine controls on details page */
.pf-refine{ background:transparent; margin-top:8px; }
.pf-refine h3{ margin:10px 0;  }
.pf-refine-controls{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; position:relative;margin-bottom:25px; }
.pf-refine .pf-pill{ margin:0; }
.pf-refine-action .pf-btn{ padding:9px 12px; }
.pf-refine-back{ margin-top:8px; }
.pf-back-link{ color:#6b6b6b; text-decoration:underline; font-size:13px; }

/* Desktop: keep the three main filters (city, radius, materials) on one line
	 while allowing the action button to sit at the end. On small screens we
	 keep the existing wrapping behavior. */
@media (min-width: 901px) {
	/* allow wrapping so the action button can move to the next line when
		 there isn't enough horizontal space; filters will stay inline where
		 possible due to their flex-basis / min-width settings */
	.pf-filter-row { flex-wrap: wrap; align-items: center; }
	.pf-filter-item { flex: 0 0 auto; }
	.pf-filter-item.pf-filter-city { min-width: 220px; }
	.pf-filter-item.pf-filter-radius { flex: 0 0 140px; }
	.pf-filter-item.pf-filter-material { flex: 0 0 220px; }
	/* action will try to stay on the same line, but if not enough space it
		 will wrap to the next row; when wrapped we keep it right-aligned */
	.pf-filter-item.pf-filter-action { flex: 0 0 auto; margin-left: 12px; }
	.pf-filter-row .pf-filter-item.pf-filter-action { display: flex; justify-content: flex-end; align-items: center; }

	/* Details refine controls mirror the same behavior */
	.pf-refine-controls { flex-wrap: wrap; align-items: center; }
	.pf-pill.pf-refine-city { min-width: 220px; }
	.pf-pill.pf-refine-radius { flex: 0 0 140px; }
	.pf-pill.pf-refine-material { flex: 0 0 220px; }
	.pf-refine-action { flex: 0 0 auto; margin-left: 12px; display:flex; justify-content:flex-end; }
}

/* Autocomplete list for city inputs */
.pf-autocomplete-wrapper{ position:relative; display:inline-block; width:100%; }
.pf-autocomplete-list{ position:absolute; left:0; right:0; top:100%; background:#fff; border:1px solid #e6e6e6; border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,0.08); z-index:40; max-height:240px; overflow:auto; }
/* hide the autocomplete container entirely when empty to avoid a thin gray bar */
.pf-autocomplete-list:empty{ display:none; }
.pf-autocomplete-item{ padding:8px 10px; cursor:pointer; font-size:14px; color:#333; }
.pf-autocomplete-item:hover, .pf-autocomplete-item.active{ background:#f5f7fb; }

/* input labels used inside the mobile popup. Hidden by default on desktop. */
.pf-input-label{ display:none; font-size:13px; color:#374151; margin-bottom:6px; }
.pf-mobile-refine-popup .pf-refine-controls .pf-input-label{ display:block; }

/* When controls are moved into the mobile popup, change pill layout
   so labels sit above inputs and the pill chrome is removed. This
   prevents the label sitting inside the rounded pill which looks odd. */
.pf-mobile-refine-popup .pf-refine-controls .pf-pill{
	display:block !important;
	background:transparent !important;
	padding:0 !important;
	margin:0 0 12px 0 !important;
	border-radius:0 !important;
	box-shadow:none !important;
	border:0 !important;
	position:relative; /* allow absolute-positioned icon inside */
}
.pf-mobile-refine-popup .pf-refine-controls .pf-pill input,
.pf-mobile-refine-popup .pf-refine-controls .pf-pill select{
	width:100%;
	box-sizing:border-box;
	padding:10px 12px 10px 12px;
	border:1px solid #e6e6e6;
	border-radius:8px;
	background:#fff;
	font-size:15px;
}
.pf-mobile-refine-popup .pf-refine-controls .pf-pill .pf-icon{
	position:absolute; right:12px; top:50%; transform:translateY(-50%);
	font-size:16px; color:#6b6b6b; pointer-events:none;
}

/* leave room for the icon so it doesn't overlap the input text */
.pf-mobile-refine-popup .pf-refine-controls .pf-pill input,
.pf-mobile-refine-popup .pf-refine-controls .pf-pill select{
	padding-right:40px;
}

/* wrapper for input + icon to make positioning independent of .pf-pill */
.pf-input-with-icon{ position:relative; display:block;width:100%; }
.pf-input-with-icon .pf-icon{ position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:#6b6b6b; }
.pf-input-with-icon input, .pf-input-with-icon select{ width:100%; padding-right:40px; box-sizing:border-box; }

/* input error state for autocomplete strict validation */
.pf-input-error{ border-color:#c0392b !important; box-shadow:0 0 0 3px rgba(192,57,43,0.06); }
.pf-input-error-msg{ margin-top:0 !important; color:#c0392b; font-size:12px;position:absolute; bottom: -20px;}
/* mobile*/
@media (max-width:900px){
	.pf-input-error-msg{ position:relative; margin-top:-10px !important;bottom:unset; }
}

/* Range slider for radius */
.pf-range-wrap{ width:100%; }
.pf-range-hidden{ display:none; }
.pf-range-input{ width:100%;border:0 !important; }
.pf-range-label{ color:#374151; }


/* radius display input */
.pf-filter-item input[readonly], .pf-pill input[readonly]{ background:#fff; border:0; cursor:pointer; }
.pf-radius-icon{ background:transparent; border:0; font-size:16px; margin-left:8px; cursor:pointer; }
.pf-radius-popup{ box-sizing:border-box; }

/* slider row: min label - slider - max label */
.pf-radius-popup .pf-range-row{ display:flex; align-items:center; gap:8px; }
.pf-radius-popup .pf-range-min, .pf-radius-popup .pf-range-max{ font-size:12px; color:#6b6b6b; width:48px; text-align:center; }
.pf-radius-popup .pf-range-input{
	-webkit-appearance:none;
	appearance:none;
	display:block;
	width:100%;
	height:4px;
	padding:0;
	margin:0;
	background:transparent; /* track styled via runnable-track */
}
/* WebKit track explicit rule to ensure correct height */
.pf-radius-popup .pf-range-input::-webkit-slider-runnable-track{
	height:4px;
	background:#8ed1f2;
	border-radius:4px;
}
.pf-radius-popup .pf-range-input::-webkit-slider-thumb{
	-webkit-appearance:none;
	width:22px;
	height:22px;
	border-radius:50%;
	background:#0ea5a0;
	box-shadow:0 2px 6px rgba(0,0,0,0.18);
	cursor:pointer;
	margin-top:-9px; /* center thumb over thin track */
	transform:translateY(0);
}
/* Firefox */
.pf-radius-popup .pf-range-input::-moz-range-track{ height:4px; background:#8ed1f2; border-radius:4px; }
.pf-radius-popup .pf-range-input::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:#0ea5a0; box-shadow:0 2px 6px rgba(0,0,0,0.18); border:0; }
.pf-radius-popup .pf-range-input:focus{ outline:none; }
.pf-radius-popup{ min-width:300px; max-width:360px; }
.pf-radius-popup .pf-range-label{ font-weight:700; }

/* Material multi-select dropdown */
.pf-material-toggle{ background:transparent; border:0; margin-left:8px; cursor:pointer; }
.pf-material-dropdown{ position:absolute; left:0; top:100%; background:#fff; border:1px solid #e6e6e6; border-radius:8px; padding:10px; box-shadow:0 8px 24px rgba(0,0,0,0.08); z-index:80; min-width:180px; }
.pf-dropdown-hidden{ display:none; }
.pf-material-option{ display:flex; align-items:center; gap:8px; margin:6px 0; font-size:14px; }
.pf-material-option input{ margin:0; }
.pf-material-option label{ margin-left:6px; cursor:pointer; }
.pf-material-actions{ margin-top:8px; text-align:right; }
.pf-material-actions .pf-btn{ padding:6px 10px; }
.pf-material-toggle:after{ content:''; }

/* ensure dropdown list is nicely padded */
.pf-material-list{ padding:6px 4px; max-width:260px; }

#pf-details-apply{
	border:1px solid #85cdf2;
	color:#85cdf2;
}
#pf-details-apply:hover{
	background: #85cdf2;
    color: white !important;
    transition: 0.2s color,background;
}