/* MFY Search v1.2 — all classes prefixed with mfy-ws- */

:root {
	--mfy-orange:    #E87722;
	--mfy-orange-dk: #cf651a;
	--mfy-pill:      50px;
	--mfy-drop-r:    12px;
	--mfy-border:    1px solid #e0e0e0;
	--mfy-shadow:    0 6px 24px rgba(0,0,0,.11);
	--mfy-font:      'Poppins', sans-serif;
	--mfy-text:      #1a1a1a;
	--mfy-muted:     #888;
	--mfy-bg:        #ffffff;
	--mfy-sep:       1px solid #f2f2f2;
}

/* ── Icons ── */
.mfy-ws-icon { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.mfy-ws-icon-search { width:16px; height:16px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat; }
.mfy-ws-icon-pin { width:15px; height:15px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ── Service icon box ── */
.mfy-ws-svc-icon { width:32px; height:32px; border-radius:7px; background:#fff5ee; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mfy-ws-svc-icon svg { width:16px; height:16px; stroke:#E87722; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ── Buttons ── */
.mfy-ws-btn-primary { background:var(--mfy-orange); color:#fff; border:none; border-radius:var(--mfy-pill); font-family:var(--mfy-font); font-size:14px; font-weight:500; padding:13px 22px; cursor:pointer; white-space:nowrap; transition:background .15s; line-height:1; }
.mfy-ws-btn-primary:hover { background:var(--mfy-orange-dk); }
.mfy-ws-btn-ghost { background:none; border:1.5px solid var(--mfy-orange); color:var(--mfy-orange); border-radius:var(--mfy-pill); font-family:var(--mfy-font); font-size:12px; font-weight:500; padding:5px 13px; cursor:pointer; white-space:nowrap; transition:background .15s; line-height:1; }
.mfy-ws-btn-ghost:hover { background:#fff5ee; }
.mfy-ws-clear { background:none; border:none; cursor:pointer; font-size:13px; color:#ccc; padding:0 2px; line-height:1; flex-shrink:0; display:flex; align-items:center; }
.mfy-ws-clear:hover { color:#666; }

/* ── Dropdown section label ── */
.mfy-ws-dd-label { font-family:var(--mfy-font); font-size:10px; font-weight:600; color:var(--mfy-muted); text-transform:uppercase; letter-spacing:.07em; padding:10px 16px 4px; }

/* ── Service row (header dropdown) ── */
.mfy-ws-svc-row { display:flex; align-items:center; gap:10px; padding:10px 16px; cursor:pointer; border-bottom:var(--mfy-sep); transition:background .1s; font-family:var(--mfy-font); }
.mfy-ws-svc-row:last-child { border-bottom:none; }
.mfy-ws-svc-row:hover { background:#fafafa; }
.mfy-ws-svc-row-info { flex:1; min-width:0; }
.mfy-ws-svc-row-name { font-size:13px; font-weight:500; color:var(--mfy-text); }
.mfy-ws-svc-row-desc { font-size:11px; color:var(--mfy-muted); margin-top:1px; }
.mfy-ws-svc-row-btns { display:flex; gap:6px; flex-shrink:0; }

/* ── Blog row ── */
.mfy-ws-blog-row { display:flex; gap:10px; padding:9px 14px; cursor:pointer; border-bottom:var(--mfy-sep); text-decoration:none; transition:background .1s; align-items:flex-start; }
.mfy-ws-blog-row:last-child { border-bottom:none; }
.mfy-ws-blog-row:hover { background:#fafafa; }
.mfy-ws-blog-thumb { width:52px; height:38px; border-radius:5px; object-fit:cover; flex-shrink:0; background:#e0d5c5; }
.mfy-ws-blog-title { font-family:var(--mfy-font); font-size:12px; font-weight:500; color:var(--mfy-text); line-height:1.4; }
.mfy-ws-blog-cat { font-family:var(--mfy-font); font-size:11px; color:var(--mfy-muted); margin-top:2px; }

/* ── Loading dots ── */
.mfy-ws-loading { text-align:center; padding:30px 16px; }
.mfy-ws-loading-text { font-family:var(--mfy-font); font-size:14px; font-weight:500; color:var(--mfy-text); margin:0 0 10px; }
.mfy-ws-dots { display:flex; justify-content:center; gap:5px; }
.mfy-ws-dots span { width:8px; height:8px; border-radius:50%; background:var(--mfy-orange); display:inline-block; animation:mfyWsBop .9s infinite; }
.mfy-ws-dots span:nth-child(2) { animation-delay:.18s; opacity:.6; }
.mfy-ws-dots span:nth-child(3) { animation-delay:.36s; opacity:.3; }
@keyframes mfyWsBop { 0%,80%,100%{transform:scale(1)} 40%{transform:scale(1.5)} }

/* ════════════════════════════════════════════════
   TABS — matches screenshot:
   [  All (orange pill)  ]  Blogs   Services
════════════════════════════════════════════════ */
.mfy-ws-tabs {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 10px 12px 8px;
	border-bottom: var(--mfy-sep);
	flex-wrap: wrap;
}
.mfy-ws-tab {
	font-family: var(--mfy-font);
	font-size: 13px;
	font-weight: 400;
	color: var(--mfy-muted);
	background: none;
	border: none;
	border-radius: var(--mfy-pill);
	padding: 6px 16px;
	cursor: pointer;
	transition: background .15s, color .15s;
	white-space: nowrap;
}
.mfy-ws-tab.is-active {
	background: var(--mfy-orange);
	color: #fff;
	font-weight: 500;
}
.mfy-ws-tab:not(.is-active):hover { color: var(--mfy-text); }

/* ════════════════════════════════════════════════
   HEADER SEARCH
════════════════════════════════════════════════ */
.mfy-ws-header {
	position: relative;
	font-family: var(--mfy-font);
	width: 100%;
	display: block;
}

.mfy-ws-header-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: var(--mfy-pill);
	padding: 8px 14px;
	width: 100%;
	box-sizing: border-box;
	cursor: text;
}

.mfy-ws-header-input {
	flex: 1;
	border: none;
	outline: none;
	font-family: var(--mfy-font);
	font-size: 14px;
	color: var(--mfy-text);
	background: transparent;
	min-width: 0;
}
.mfy-ws-header-input::placeholder { color: #bbb; }

/* Dropdown */
.mfy-ws-header-dd {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 420px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: var(--mfy-drop-r);
	box-shadow: var(--mfy-shadow);
	z-index: 99999;
	overflow: hidden;
}
.mfy-ws-header-dd.is-open { display: block; }

/* ════════════════════════════════════════════════
   HERO SEARCH — desktop: single white pill container
   with divider between fields
════════════════════════════════════════════════ */
.mfy-ws-hero {
	display: flex;
	align-items: center;
	font-family: var(--mfy-font);
	width: 100%;
	box-sizing: border-box;
	gap: 8px;
}

/* Desktop: wrap fields in one pill */
@media (min-width: 641px) {
	.mfy-ws-hero {
		background: #fff;
		border-radius: 50px;
		padding: 5px 5px 5px 0;
		gap: 0;
	}
	.mfy-ws-hero-field {
		border: none !important;
		border-radius: 0 !important;
		background: transparent !important;
	}
	/* Service field — takes all remaining space */
	.mfy-ws-hero-field:first-of-type {
		flex: 1;
		border-right: 1px solid #e5e7eb !important;
	}
	/* Suburb field — fixed narrow, no flex growth */
	.mfy-ws-hero-field:last-of-type {
		flex: 0 0 155px;
		width: 155px;
		min-width: 0;
	}
	.mfy-ws-hero-submit {
		flex-shrink: 0;
		margin-left: 6px;
	}
}

.mfy-ws-hero-field {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: var(--mfy-pill);
	padding: 11px 16px;
	min-width: 0;
	box-sizing: border-box;
}

.mfy-ws-hero-input {
	flex: 1;
	border: none;
	outline: none;
	font-family: var(--mfy-font);
	font-size: 14px;
	color: var(--mfy-text);
	background: transparent;
	min-width: 0;
	width: 100%;
}
.mfy-ws-hero-input::placeholder { color: #bbb; }

/* Hero dropdowns */
.mfy-ws-hero-dd {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 220px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: var(--mfy-drop-r);
	box-shadow: var(--mfy-shadow);
	z-index: 99999;
	overflow: hidden;
	max-height: 280px;
	overflow-y: auto;
}
.mfy-ws-hero-dd.is-open { display: block; }

/* Hero dropdown item — icon + name only, no buttons */
.mfy-ws-hero-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	cursor: pointer;
	font-family: var(--mfy-font);
	font-size: 13px;
	color: var(--mfy-text);
	border-bottom: var(--mfy-sep);
	transition: background .1s;
}
.mfy-ws-hero-item:last-child { border-bottom: none; }
.mfy-ws-hero-item:hover { background: #fafafa; }

/* ════════════════════════════════════════════════
   MOBILE ≤ 640px
════════════════════════════════════════════════ */
@media (max-width: 640px) {

	/* Hero: separate pills stacked */
	.mfy-ws-hero {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		background: none;
		padding: 0;
		border-radius: 0;
	}
	.mfy-ws-hero-field {
		width: 100%;
		border: 1px solid #e0e0e0 !important;
		border-radius: var(--mfy-pill) !important;
		background: #fff !important;
	}
	.mfy-ws-hero-field:first-of-type {
		border-right: 1px solid #e0e0e0 !important;
	}
	.mfy-ws-hero-submit {
		width: 100%;
		padding: 14px;
		font-size: 15px;
		text-align: center;
		margin-left: 0;
	}
	.mfy-ws-hero-dd { left: 0; right: 0; min-width: 0; }

	/* Header dropdown full width */
	.mfy-ws-header-dd { min-width: 0; left: 0; right: 0; }

	/* Hide Check details on service rows */
	.mfy-ws-svc-row-btns .mfy-ws-btn-ghost { display: none; }
	.mfy-ws-svc-row-btns .mfy-ws-btn-primary { padding: 6px 11px; font-size: 11px; }
}