/* Pharmaville Search — pill layout + region drill-down popup */

/* === Wide-pill layout (matches the [27-search-form] reference screenshot) ===
   Structure rendered by v1.2.0+:
     <div class="quick-search-instance pharmaville-search pharmaville-search--pill ...">
       <form>
         <input type="hidden" name="type">
         <div class="pharmaville-region-field">          ← cell 1 (drill-down popup)
           <input type="hidden" name="region">
           <button class="pharmaville-region-trigger">…label…</button>
           <div class="pharmaville-region-popup">…browse list (JS-rendered)…</div>
         </div>
         <div class="dark-forms header-search search-shortcode">  ← cell 2 (keyword + typeahead)
           <input type="search" name="search_keywords">
           <div class="instant-results">…</div>
         </div>
         <label class="pharmaville-tier-field">…</label>           ← cell 3 (native select)
         <button class="pharmaville-search-submit">Search</button> ← cell 4
       </form>
     </div>
*/

.pharmaville-search--pill {
	max-width: 1200px;
	margin: 0 auto;
}

.pharmaville-search--pill > form {
	display: flex;
	align-items: stretch;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
	overflow: visible;
	padding: 14px;
	gap: 0;
	color: #555;                  /* overrides MyListing .dark-forms white */
}

/* Generic cell: vertical stack, label-as-placeholder, thin underline. */
.pharmaville-search--pill .pharmaville-region-field,
.pharmaville-search--pill .search-shortcode,
.pharmaville-search--pill .pharmaville-tier-field {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	padding: 8px 22px;
	border-bottom: 1px solid #d8d8d8;
	background: transparent;
	margin-right: 14px;
	color: #555;
}

/* Region + tier cells anchor their popup via position: relative. */
.pharmaville-search--pill .pharmaville-region-field,
.pharmaville-search--pill .pharmaville-tier-field {
	position: relative;
}
.pharmaville-search--pill .pharmaville-region-field {
	margin-left: 0;                /* first cell — no left gap */
}

/* Region + tier trigger buttons — look like a select cell with a chevron on the right.
   Explicit line-height so the trigger's box height matches the keyword <input>'s
   exactly. Without this, browsers render input and button text on slightly
   different baselines and the keyword cell looks elevated by a few pixels. */
.pharmaville-search--pill .pharmaville-region-trigger,
.pharmaville-search--pill .pharmaville-tier-trigger {
	width: 100%;
	border: 0;
	background: transparent;
	font: inherit;
	color: #000;
	line-height: 1.5;
	cursor: pointer;
	text-align: left;
	padding: 6px 18px 6px 0;
	margin: 0;
	box-sizing: border-box;
	/* Down-chevron via two diagonal gradients in the right padding */
	background-image:
		linear-gradient(45deg, transparent 50%, #888 50%),
		linear-gradient(-45deg, transparent 50%, #888 50%);
	background-position:
		calc(100% - 8px) center,
		calc(100% - 4px) center;
	background-size: 5px 5px;
	background-repeat: no-repeat;
}

.pharmaville-search--pill .pharmaville-region-trigger-label,
.pharmaville-search--pill .pharmaville-tier-trigger-label {
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
	vertical-align: middle;
}

/* Keyboard focus ring on the trigger buttons. The keyword input is left out
   here on purpose — its focus indicator is the floating label transitioning
   to teal/uppercase, which matches the underline-only visual of the other
   cells without painting an outline box. */
.pharmaville-search--pill .pharmaville-region-trigger:focus-visible,
.pharmaville-search--pill .pharmaville-tier-trigger:focus-visible {
	outline: 2px solid #1c8aa1;
	outline-offset: 4px;
	border-radius: 2px;
}

/* Region + tier popups — drop down from their cell. Hidden until pv-{region,tier}-open. */
.pharmaville-search--pill .pharmaville-region-popup,
.pharmaville-search--pill .pharmaville-tier-popup {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 100%;
	max-width: 380px;
	max-height: 60vh;
	overflow-y: auto;
	z-index: 200;
	margin-top: 8px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(15, 30, 55, 0.18), 0 0 0 1px rgba(15, 30, 55, 0.05);
	padding: 8px 0 10px;
}

.pharmaville-search--pill.pv-region-open .pharmaville-region-popup,
.pharmaville-search--pill.pv-tier-open .pharmaville-tier-popup {
	display: block;
}

/* Reset the popup list — don't depend on global utility classes for bullets/spacing */
.pharmaville-search--pill .pharmaville-region-list,
.pharmaville-search--pill .pharmaville-tier-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Row layout inside both popups */
.pharmaville-search--pill .pharmaville-region-popup li,
.pharmaville-search--pill .pharmaville-tier-popup li {
	position: relative;
	display: flex;
	margin: 0;
}

.pharmaville-search--pill .pharmaville-region-popup .pv-row,
.pharmaville-search--pill .pharmaville-tier-popup .pv-row {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 14px 20px;
	background: transparent;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-size: 15px;
	color: #1d1d1f;
	text-align: left;
	transition: background 0.12s ease;
}

.pharmaville-search--pill .pharmaville-region-popup .pv-row:hover,
.pharmaville-search--pill .pharmaville-region-popup .pv-row:focus-visible,
.pharmaville-search--pill .pharmaville-tier-popup .pv-row:hover,
.pharmaville-search--pill .pharmaville-tier-popup .pv-row:focus-visible {
	background: #f3f6fa;
	outline: none;
}

.pharmaville-search--pill .pharmaville-region-popup .pv-section-title,
.pharmaville-search--pill .pharmaville-tier-popup .pv-section-title {
	display: block;
	padding: 14px 20px 6px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #6b7785;
}

.pharmaville-search--pill .pharmaville-region-popup .pv-section-empty,
.pharmaville-search--pill .pharmaville-tier-popup .pv-section-empty {
	display: block;
	padding: 12px 20px;
	color: #888;
	font-style: italic;
}

.pharmaville-search--pill .pharmaville-region-popup .pv-name,
.pharmaville-search--pill .pharmaville-tier-popup .pv-name {
	flex: 1 1 auto;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Chevron — right-arrow on parent rows, hidden on leaves. The "All of <Region>"
   pick-current row overrides .leaf to show its own check icon. */
.pharmaville-search--pill .pharmaville-region-popup .pv-row .pv-chev {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: #95a0ad;
	transition: color 0.12s ease;
}

.pharmaville-search--pill .pharmaville-region-popup .pv-row:hover .pv-chev {
	color: #1c8aa1;
}

.pharmaville-search--pill .pharmaville-region-popup .pv-row.leaf .pv-chev {
	visibility: hidden;
}

/* Backbar — chrome strip above the data list when drilled in. Holds the Back
   button and the path breadcrumb. Hidden via inline style when path is empty. */
.pharmaville-search--pill .pharmaville-region-backbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-bottom: 1px solid #eef1f5;
}

.pharmaville-search--pill .pharmaville-region-backbar .pv-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 6px 10px;
	border-radius: 6px;
	font: inherit;
	font-size: 13px;
	color: #6b7785;
	transition: background 0.12s ease, color 0.12s ease;
}

.pharmaville-search--pill .pharmaville-region-backbar .pv-back:hover,
.pharmaville-search--pill .pharmaville-region-backbar .pv-back:focus-visible {
	background: #f3f6fa;
	color: #1d1d1f;
	outline: none;
}

.pharmaville-search--pill .pharmaville-region-backbar .pv-crumbs {
	flex: 1 1 auto;
	text-align: right;
	font-size: 13px;
	color: #95a0ad;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pharmaville-search--pill .pharmaville-region-backbar .pv-crumbs .pv-sep {
	margin: 0 6px;
	opacity: 0.6;
}

.pharmaville-search--pill .pharmaville-region-backbar .pv-crumbs .pv-here {
	color: #1d1d1f;
	font-weight: 500;
}

/* Pick-current ("All of <Region>") — first row of the data list when drilled.
   Tinted teal background, check-mark chevron (visible despite .leaf-style hiding). */
.pharmaville-search--pill .pharmaville-region-popup .pv-row.pv-pick-current {
	background: #f0f8fa;
	color: #1c8aa1;
}

.pharmaville-search--pill .pharmaville-region-popup .pv-row.pv-pick-current .pv-name {
	font-weight: 600;
}

.pharmaville-search--pill .pharmaville-region-popup .pv-row.pv-pick-current .pv-chev {
	color: #1c8aa1;
	visibility: visible;
}

.pharmaville-search--pill .pharmaville-region-popup .pv-row.pv-pick-current:hover,
.pharmaville-search--pill .pharmaville-region-popup .pv-row.pv-pick-current:focus-visible {
	background: #e3f1f5;
}

/* Keyword cell — middle. Hide MyListing's search icon (cell has no icon per screenshot)
   and force dark text since .dark-forms otherwise paints inputs white. */
.pharmaville-search--pill .search-shortcode {
	position: relative;
}

.pharmaville-search--pill .search-shortcode > i.mi {
	display: none;
}

.pharmaville-search--pill .search-shortcode > input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	outline: none;
	font: inherit;
	font-size: 14px;              /* match trigger buttons exactly; defeats MyListing's 14px font-size leak */
	line-height: 1.5;             /* match trigger buttons; defeats MyListing's 14px font-size leak */
	color: #000 !important;       /* override .dark-forms */
	/* Asymmetric vertical padding pushes the typed text down ~4px so its
	   baseline aligns with the region/tier trigger text. The input box
	   height stays 33px (10+21+2 instead of 6+21+6) to keep the bottom
	   underline consistent across all three cells. */
	padding: 10px 0 2px 0;
	margin: 0;
	box-sizing: border-box;
	height: auto;
	-webkit-appearance: none;     /* strip Safari/Chrome search-input padding */
	appearance: none;
}

/* Placeholder is a single space (set in PHP) — keep it invisible so the
   ::before label below is the only visible text in the empty state. */
.pharmaville-search--pill .search-shortcode > input[type="search"]::placeholder {
	color: transparent;
	opacity: 0;
}

/* Floating "Search by Keyword" label.
   Pseudo-element on the cell, since <input> is a replaced element and
   can't host its own ::before. At rest, the label sits where the
   placeholder used to. On focus, OR when the input has content
   (:not(:placeholder-shown), which is why the placeholder must be a
   non-empty space), the label transitions up and shrinks — matching the
   classic floating-label pattern without any extra DOM injection. */
.pharmaville-search--pill .search-shortcode::before {
	content: "Search by Keyword";
	position: absolute;
	left: 22px;
	top: 50%;
	transform: translateY(-50%);
	font: inherit;
	font-size: 14px;
	color: #000;
	pointer-events: none;
	transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease, transform 0.15s ease;
	line-height: 1;
	z-index: 1;
}

/* Active state: same font-size, color, and casing as the resting state — the
   only thing that changes is the vertical position. Label moves to the top
   of the cell so the user's typed text occupies the cell's center. */
.pharmaville-search--pill .search-shortcode:focus-within::before,
.pharmaville-search--pill .search-shortcode:has(> input[type="search"]:not(:placeholder-shown))::before {
	top: 0;
	transform: none;
}

/* Keyword cell is plain text input — no typeahead. Hide MyListing's
   `.instant-results` dropdown unconditionally; `!important` defeats
   MyListing's inline visibility/opacity transitions. */
.pharmaville-search--pill .instant-results {
	display: none !important;
}

/* Tier cell — third */
.pharmaville-search--pill .pharmaville-tier-field {
	margin-right: 14px;
}

/* Submit button — fourth cell. Equal 1/4 width like the other cells, teal block. */
.pharmaville-search--pill .pharmaville-search-submit {
	flex: 1 1 0;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	border-radius: 4px;
	padding: 0 16px;
	min-height: 56px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: #1c8aa1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.pharmaville-search--pill .pharmaville-search-submit > i.mi {
	font-size: 18px;
}

.pharmaville-search--pill .pharmaville-search-submit:hover,
.pharmaville-search--pill .pharmaville-search-submit:focus-visible {
	background: #156d80;
	outline: none;
}

/* === Responsive: stack on narrow viewports ========================== */
@media (max-width: 768px) {
	.pharmaville-search--pill > form {
		flex-direction: column;
		border-radius: 12px;
		padding: 12px;
	}
	.pharmaville-search--pill .pharmaville-region-field,
	.pharmaville-search--pill .search-shortcode,
	.pharmaville-search--pill .pharmaville-tier-field {
		margin-right: 0;
		margin-bottom: 8px;
		padding: 8px 14px;
	}
	.pharmaville-search--pill .pharmaville-region-popup {
		max-width: 100%;
	}
	.pharmaville-search--pill .pharmaville-search-submit {
		width: 100%;
		min-height: 48px;
	}
}

/* === Listing-type tab strip (v1.4.1) ============================== */
/* Flat text tabs above the pill — no card, no border, no background.
   Active tab is solid white; inactive tabs are dimmed white. Designed
   for the front-page hero's dark surface; the lt-icon sizing rules
   work for both <i class="…"> font tags and <img> attachments. */

.pharmaville-search-tabs {
	display: flex;
	gap: 32px;
	margin: 0 auto;
	padding: 0 0 48px;            /* generous breathing room between tabs and pill */
	list-style: none;
	max-width: 1200px;
}

.pharmaville-search-tabs li {
	margin: 0;
	padding: 0;
}

.pharmaville-search-tabs li > button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.55);   /* inactive: dim white */
	border: 0;
	font: inherit;
	font-weight: 600;
	font-size: 18px;
	cursor: pointer;
	transition: color 0.15s ease;
}

.pharmaville-search-tabs li > button:hover,
.pharmaville-search-tabs li > button:focus-visible {
	color: rgba(255, 255, 255, 0.85);
	outline: none;
}

.pharmaville-search-tabs li.active > button,
.pharmaville-search-tabs li.active > button:hover,
.pharmaville-search-tabs li.active > button:focus-visible {
	color: #fff;                         /* active: solid white */
}

.pharmaville-search-tabs .lt-icon {
	display: inline-flex;
	align-items: center;
	width: 18px;
	height: 18px;
}

.pharmaville-search-tabs .lt-icon svg,
.pharmaville-search-tabs .lt-icon img {
	width: 100%;
	height: 100%;
}

/* Stack tabs on narrow viewports */
@media (max-width: 768px) {
	.pharmaville-search-tabs {
		flex-direction: column;
		gap: 6px;
	}
}