/* ==========================================================================
   /search

   Moved out of the inline <style> block in app/Views/searchpage/list.php.

   TWO THINGS CHANGED IN THE MOVE, both deliberate:

   1. Every rule is now scoped under `.page` (the wrapper that only exists on
      this view). Inline in the view, these selectors applied to the WHOLE
      document, so `.btn-primary{background:#1e3a8a;flex:1;padding:9px}` was
      restyling the footer's back-to-top button, and the `*{margin:0;padding:0;
      font-family:'Segoe UI'}` reset was overriding the site font on the header
      and footer. In a globally-cached stylesheet that leak would reach every
      page, so scoping is what makes the move safe.

   2. Dead mockup rules were dropped rather than carried over. `.card`,
      `.card-img`, `.card-body`, `.card-btns`, `.grid`, `.badge-type`,
      `.badge-exp`, `.name`, `.name-row`, `.meta`, `.price`, `.vtag`,
      `.event-tags`, `.etag`, `.btn-wa`, `.btn-primary` and `.picked` match no
      element on the rendered page -- the real cards come from
      profile/professional_ajax.php as .kdp-card. Verified against the live
      HTML before removing. (`.chip` / `.chip-x` were on that list too and have
      since been reinstated, further down: renderChips() now fills #chips.)

   Responsive rules for this page live in responsive.css.
   ========================================================================== */

.page {
	background: #f1f5f9;
	padding: 28px 32px;
	/* the inline block set this via a bare `*`, which also restyled the site
	   header and footer. Set once here and inherited, so the page keeps the
	   exact type it had without touching anything outside it. */
	font-family: 'Segoe UI', sans-serif;
}

/* The inline version was `*{box-sizing:border-box;margin:0;padding:0}`.
   Only box-sizing is carried over as a descendant rule: `.page *` has higher
   specificity than the bare `*` it replaces, so a blanket margin/padding reset
   here would newly beat rules that previously won -- Bootstrap's
   `p{margin-bottom:1rem}` among them, which is what gives .result-text its
   spacing. Elements that actually relied on the reset set their own values. */
.page *,
.page *::before,
.page *::after {
	box-sizing: border-box;
}

/* ---- Popular quick-search pills ---- */

.page .popular-row {
	margin-bottom: 20px;
}

.page .popular-lbl {
	font-size: 12px;
	color: #94a3b8;
	margin-right: 8px;
}

.page .pop-pill {
	background: #fff;
	border: 1px solid #e2e8f0;
	color: #334155;
	font-size: 12px;
	padding: 5px 14px;
	border-radius: 999px;
	cursor: pointer;
	display: inline-block;
	margin-right: 6px;
}

.page .pop-pill:hover {
	border-color: #1e3a8a;
	color: #1e3a8a;
}

/* ---- Filter card ---- */

.page .filter-card {
	background: #fff;
	border-radius: 16px;
	border: 1px solid #e8edf5;
	padding: 22px 24px;
	margin-bottom: 20px;
}

.page .filter-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.page .filter-title {
	font-size: 14px;
	font-weight: 700;
	color: #1e3a8a;
}

.page .clear-btn {
	font-size: 12px;
	color: #ea580c;
	font-weight: 600;
	cursor: pointer;
	background: none;
	border: none;
	text-decoration: underline;
	/* explicit, because this button relied on the old blanket `*` reset to
	   clear the browser's default button padding */
	padding: 0;
	margin: 0;
}

/* auto-fit rather than a fixed 4 columns: at 400px a fixed grid gave four
   ~50px columns, and a select spends ~32px on its chevron alone, so
   "Anywhere in India" rendered as "Ar" */
.page .filter-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}

.page .f-label {
	font-size: 11px;
	font-weight: 600;
	color: #94a3b8;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: 5px;
}

.page .f-select {
	width: 100%;
	/* form controls don't inherit font-family, so the select needs it named
	   explicitly -- the old blanket `*` rule reached it, `.page`'s inherited
	   font does not, and without this the control renders 1px taller */
	font-family: 'Segoe UI', sans-serif;
	padding: 10px 32px 10px 12px;
	border: 1.5px solid #e2e8f0;
	border-radius: 10px;
	font-size: 13px;
	color: #334155;
	background: #fff;
	cursor: pointer;
	/* matching the original exactly: it set `appearance` only. Adding
	   -webkit-appearance here changed the control's computed height. */
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	transition: border-color .15s;
}

.page .f-select:focus {
	outline: none;
	border-color: #1e3a8a;
}

.page .find-btn {
	width: 100%;
	background: #1e3a8a;
	color: #fff;
	border: none;
	padding: 11px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	letter-spacing: .02em;
}

.page .find-btn:hover {
	background: #1e40af;
}

.page .chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 4px;
}

/* One chip per active filter, written by renderChips() in list_js.php. These
   were dropped from this file as dead mockup rules; they are live now that
   something actually fills #chips. */
.page .chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #eff6ff;
	border: 1px solid #dbeafe;
	color: #1e3a8a;
	font-size: 12px;
	font-weight: 600;
	padding: 5px 6px 5px 11px;
	border-radius: 999px;
	line-height: 1.4;
}

.page .chip-x {
	border: none;
	background: transparent;
	color: #1e3a8a;
	font-size: 15px;
	line-height: 1;
	padding: 0 4px;
	cursor: pointer;
	opacity: .55;
	transition: opacity .15s;
}

.page .chip-x:hover {
	opacity: 1;
}

/* The pricing unit next to the Budget label -- "per hour" for physiotherapists,
   "per event" for anchors. Without it the same "Under Rs 1,000" means an hour
   in one profession and a whole wedding in another. */
.page .f-unit {
	font-weight: 600;
	color: #64748b;
	text-transform: none;
	letter-spacing: 0;
}

/* ---- Result count + sort ---- */

.page .result-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.page .result-text {
	font-size: 13px;
	color: #64748b;
}

.page .result-text b {
	color: #1e293b;
	font-weight: 700;
}

.page .sort-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
}

.page .sort-lbl {
	font-size: 12px;
	color: #94a3b8;
}

.page .sort-pill {
	font-size: 12px;
	color: #64748b;
	border: 1px solid #e2e8f0;
	background: #fff;
	padding: 5px 12px;
	border-radius: 999px;
	cursor: pointer;
}

.page .sort-pill.on {
	border-color: #1e3a8a;
	color: #1e3a8a;
	font-weight: 700;
	background: #f0f5ff;
}