/**
 * "Find or add your company", /add-listing/company/: the search field and
 * the cards it answers with, under the charcoal hero of chapters.css.
 *
 * The markup is printed by [raskin_company_finder]
 * (includes/raskin/company-finder.php), not by Elementor, so the buttons
 * here are the guide's specification on plain links: 40px tall, 16px of side
 * padding, 14px at weight 500, --sba-radius-md corners, an 8px gap and a
 * 16px icon in front of the label. The field is the guide's input: 40px,
 * the --sba-input hairline, the ring on focus; 16px type below 768px so a
 * phone does not zoom in. See docs/company-finder.md.
 *
 * Selectors carry `.sba-cf` plus the element's class: the Global Kit styles
 * `button`, `input`, `a` and the headings as `.elementor-kit-N h3`, one class
 * and one element, which a lone class does not outrank.
 */

.sba-cf {
	max-width: 48rem;
	color: var(--sba-charcoal);
	font-size: 16px;
	line-height: 26px;
}

/* ---- The field ---------------------------------------------------------- */

.sba-cf .sba-cf-form {
	margin: 0;
}

.sba-cf .sba-cf-label {
	display: block;
	margin: 0 0 8px;
	color: var(--sba-charcoal);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.sba-cf .sba-cf-row {
	display: flex;
	gap: 12px;
}

.sba-cf .sba-cf-field {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

/* Placed by offsets and stacked above the field, not centered with a
   transform: the transformed mask icon disappeared when the field took
   focus, here and in the package step's lookup (add-listing.css). */
.sba-cf .sba-cf-field > .sba-i {
	position: absolute;
	z-index: 1;
	top: 12px;
	left: 12px;
	color: var(--sba-slate);
	font-size: 16px;
	line-height: 1;
	pointer-events: none;
}

.sba-cf input.sba-cf-input {
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 12px 0 36px;
	border: 1px solid var(--sba-input);
	border-radius: var(--sba-radius-md);
	background: var(--sba-surface);
	box-shadow: none;
	color: var(--sba-charcoal);
	font-family: inherit;
	font-size: 16px;
	line-height: 24px;
	-webkit-appearance: none;
	appearance: none;
}

.sba-cf input.sba-cf-input::placeholder {
	color: var(--sba-slate);
	opacity: 1;
}

.sba-cf input.sba-cf-input:focus {
	border-color: var(--sba-input);
	outline: 2px solid var(--sba-ring);
	outline-offset: 1px;
}

@media (min-width: 768px) {
	.sba-cf input.sba-cf-input {
		font-size: 14px;
		line-height: 20px;
	}
}

.sba-cf .sba-cf-hint {
	margin: 12px 0 0;
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

/* ---- Buttons ------------------------------------------------------------ */

.sba-cf .sba-cf-btn {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: var(--sba-radius-md);
	box-shadow: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition:
		background-color var(--sba-duration-hover) ease,
		border-color var(--sba-duration-hover) ease,
		color var(--sba-duration-hover) ease;
}

.sba-cf .sba-cf-btn .sba-i {
	flex: 0 0 auto;
	font-size: 16px;
	line-height: 1;
}

.sba-cf .sba-cf-btn-primary {
	background-color: var(--sba-red-dark);
	color: var(--sba-red-contrast);
}

.sba-cf .sba-cf-btn-primary:hover,
.sba-cf .sba-cf-btn-primary:focus {
	background-color: var(--sba-red-darker);
	color: var(--sba-red-contrast);
}

.sba-cf .sba-cf-btn-outline {
	border-color: var(--sba-input);
	background-color: var(--sba-surface);
	color: var(--sba-charcoal);
}

.sba-cf .sba-cf-btn-outline:hover,
.sba-cf .sba-cf-btn-outline:focus {
	border-color: var(--sba-input);
	background-color: var(--sba-accent);
	color: var(--sba-charcoal);
}

.sba-cf .sba-cf-btn-link {
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: var(--sba-red-dark);
}

.sba-cf .sba-cf-btn-link:hover,
.sba-cf .sba-cf-btn-link:focus {
	background-color: transparent;
	color: var(--sba-red-darker);
}

.sba-cf .sba-cf-btn:focus-visible {
	outline: 2px solid var(--sba-ring);
	outline-offset: 2px;
}

/* ---- Results ------------------------------------------------------------ */

.sba-cf .sba-cf-results {
	transition: opacity var(--sba-duration-hover) ease;
}

.sba-cf[aria-busy="true"] .sba-cf-results {
	opacity: 0.5;
}

.sba-cf .sba-cf-results:not(:empty) {
	margin-top: 32px;
}

.sba-cf .sba-cf-summary {
	margin: 0 0 16px;
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

.sba-cf .sba-cf-list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The guide's quiet card: white, --sba-radius corners, the hairline. Logo,
   text and actions in a row from 768px; the actions wrap under the text
   below. */
.sba-cf .sba-cf-card {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 12px 16px;
	align-items: start;
	margin: 0;
	padding: 16px;
	border: 1px solid var(--sba-border);
	border-radius: var(--sba-radius);
	background: var(--sba-surface);
}

.sba-cf .sba-cf-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border: 1px solid var(--sba-border);
	border-radius: var(--sba-radius-md);
	background: var(--sba-surface);
}

.sba-cf .sba-cf-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sba-cf .sba-cf-logo-none {
	border-color: transparent;
	background: var(--sba-muted);
	color: var(--sba-slate);
	font-size: 20px;
	line-height: 1;
}

.sba-cf .sba-cf-name {
	margin: 0;
	color: var(--sba-charcoal);
	font-size: 16px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: normal;
	line-height: 24px;
}

.sba-cf .sba-cf-name a {
	color: inherit;
	text-decoration: none;
}

.sba-cf .sba-cf-name a:hover,
.sba-cf .sba-cf-name a:focus {
	color: var(--sba-red-dark);
}

.sba-cf .sba-cf-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	margin: 4px 0 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
}

.sba-cf .sba-cf-status {
	padding: 2px 8px;
	border-radius: var(--sba-radius-sm);
	background: var(--sba-muted);
	color: var(--sba-charcoal-light);
}

.sba-cf .sba-cf-status-warn {
	background: var(--sba-red-light);
	color: var(--sba-red-dark);
}

.sba-cf .sba-cf-member {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--sba-charcoal);
}

.sba-cf .sba-cf-member .sba-i {
	color: var(--sba-red);
	font-size: 14px;
	line-height: 1;
}

.sba-cf .sba-cf-note {
	margin: 8px 0 0;
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

.sba-cf .sba-cf-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	grid-column: 2;
}

@media (min-width: 768px) {
	.sba-cf .sba-cf-card {
		grid-template-columns: 48px minmax(0, 1fr) auto;
		padding: 20px;
	}

	.sba-cf .sba-cf-actions {
		flex-direction: column;
		align-items: flex-end;
		align-self: center;
		grid-column: 3;
	}
}

/* ---- Adding a new company ----------------------------------------------- */

.sba-cf .sba-cf-new,
.sba-cf .sba-cf-empty {
	padding: 24px;
	border-radius: var(--sba-radius);
	background: var(--sba-surface-cool);
	border: 1px solid var(--sba-border);
}

.sba-cf .sba-cf-new {
	margin-top: 24px;
}

.sba-cf .sba-cf-empty > .sba-i {
	display: block;
	margin: 0 0 12px;
	color: var(--sba-slate);
	font-size: 24px;
	line-height: 1;
}

.sba-cf .sba-cf-new-title,
.sba-cf .sba-cf-empty-title {
	margin: 0 0 8px;
	color: var(--sba-charcoal);
	font-size: 18px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 28px;
}

.sba-cf .sba-cf-new p,
.sba-cf .sba-cf-empty p {
	margin: 0 0 16px;
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

/* A long name wraps inside the button instead of widening the page. */
.sba-cf .sba-cf-new .sba-cf-btn,
.sba-cf .sba-cf-empty .sba-cf-btn {
	max-width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: left;
}

.sba-cf-guide {
	max-width: 48rem;
}

@media (prefers-reduced-motion: reduce) {
	.sba-cf .sba-cf-results,
	.sba-cf .sba-cf-btn {
		transition: none;
	}
}

/* ---- In the company form -------------------------------------------------
 * The note under the title field of the add-listing form, when a company of
 * a similar name is listed (assets/js/company-finder.js). On the light red
 * of emphasis backgrounds, text in charcoal, the link per links.css. Not
 * inside .sba-cf: the form is the parent theme's. */

.sba-cf-dupe {
	/* 24px below, clear of the hairline that opens the next field. */
	margin: 12px 0 24px;
	padding: 12px 16px;
	border-radius: var(--sba-radius-md);
	background: var(--sba-red-light);
	color: var(--sba-charcoal);
	font-size: 14px;
	line-height: 20px;
}

.sba-cf-dupe[hidden] {
	display: none;
}

.sba-cf-dupe strong,
.sba-cf-dupe b {
	font-weight: 700;
}

.sba-cf-dupe a {
	color: var(--sba-charcoal);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--sba-red);
	text-underline-offset: 3px;
}

.sba-cf-dupe a:hover,
.sba-cf-dupe a:focus {
	color: var(--sba-red-dark);
}

/* ---- As a panel ----------------------------------------------------------
 * The search opened in place (raskin_company_finder_panel()): above the
 * results of the companies explore page, and under "Add something new" in
 * the account. A standard card: white, --sba-radius corners, 24px of
 * padding, the hairline; the title at the section-heading size of the
 * account, the close control the guide's `x`. */

.sba-cf-panel {
	margin: 16px 0 0;
	padding: 24px;
	border: 1px solid var(--sba-border);
	border-radius: var(--sba-radius);
	background: var(--sba-surface);
	text-align: left;
}

.sba-cf-panel[hidden] {
	display: none;
}

/* In the explore page's results column, inset as the cards below it. */
.finder-listings > .sba-cf-panel {
	margin: 15px 15px 5px;
}

.sba-cf-panel .sba-cf-panel-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.sba-cf-panel .sba-cf-panel-title {
	margin: 0;
	color: var(--sba-charcoal);
	font-size: 20px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 28px;
}

.sba-cf-panel button.sba-cf-panel-close {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: -2px -6px 0 0;
	padding: 0;
	border: 0;
	border-radius: var(--sba-radius-md);
	background: transparent;
	box-shadow: none;
	color: var(--sba-slate);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.sba-cf-panel button.sba-cf-panel-close:hover,
.sba-cf-panel button.sba-cf-panel-close:focus {
	background: var(--sba-muted);
	color: var(--sba-charcoal);
}

.sba-cf-panel button.sba-cf-panel-close:focus-visible {
	outline: 2px solid var(--sba-ring);
	outline-offset: 2px;
}

.sba-cf-panel .sba-cf-panel-lead {
	max-width: 40rem;
	margin: 8px 0 20px;
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}