/**
 * The package step, "Please choose": the packages of a listing type as the
 * style guide's standard cards. On the add-listing form, the claim form and
 * the package switch; printed by templates/add-listing/choose-package.php,
 * which is where the markup is. See docs/add-listing.md.
 *
 * A card: white, --sba-radius corners, 24px of padding (32px from 768px),
 * the hairline, lifting 4px on hover. An icon tile and the package's name
 * as its head, then the package's own copy, then the button at the foot.
 * The Members Listings Plan carries the member flag's award and the
 * primary button; the alternative beside it is the outline button.
 *
 * The account step a visitor meets before the form, when not logged in, is
 * one such card too (templates/add-listing/auth.php).
 *
 * Selectors carry `.sba-plans` plus the card's classes: the parent styles
 * `.pricing-item` and the Global Kit styles `h3`, `h4`, `a` and `button`.
 */

.sba-plans {
	display: grid;
	gap: 24px;
	max-width: 56rem;
	margin: 0 auto;
	padding: 0 16px;
	text-align: left;
}

@media (min-width: 768px) {
	.sba-plans {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sba-plans > .sba-plan:only-child {
		grid-column: 1 / -1;
		max-width: 28rem;
		width: 100%;
		margin: 0 auto;
	}
}

.sba-plans .sba-plan {
	display: flex;
	flex-direction: column;
	height: auto;
	margin: 0;
	padding: 24px;
	border: 1px solid hsl(var(--sba-charcoal-hsl) / 0.1);
	border-radius: var(--sba-radius);
	background: var(--sba-surface);
	box-shadow: none;
	color: var(--sba-charcoal);
	font-size: 14px;
	line-height: 22px;
	text-align: left;
	transition:
		transform var(--sba-duration-hover) ease,
		box-shadow var(--sba-duration-hover) ease,
		border-color var(--sba-duration-hover) ease;
}

.sba-plans .sba-plan:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 25px -5px hsl(var(--sba-charcoal-hsl) / 0.1);
}

.sba-plans .sba-plan.c27-picked {
	border-color: var(--sba-red);
}

@media (min-width: 768px) {
	.sba-plans .sba-plan {
		padding: 32px;
	}
}

/* ---- Head --------------------------------------------------------------- */

.sba-plans .sba-plan-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 20px;
}

.sba-plans .sba-plan-icon {
	display: flex;
	flex: 0 0 48px;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--sba-radius);
	background: var(--sba-icon-tile-bg);
	color: var(--sba-icon-tile-color);
	font-size: 24px;
	line-height: 1;
}

.sba-plans .sba-plan-name {
	margin: 0;
	padding: 0;
	color: var(--sba-charcoal);
	font-size: 20px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 28px;
	text-transform: none;
}

.sba-plans .sba-plan-image {
	width: 100%;
	height: auto;
	margin: 0 0 20px;
	border-radius: var(--sba-radius-md);
}

.sba-plans .sba-plan-price {
	margin: 0 0 16px;
	color: var(--sba-charcoal);
	font-size: 24px;
	font-weight: var(--sba-heading-weight);
	line-height: 32px;
}

/* ---- The package's copy --------------------------------------------------
 * As the editors wrote it in the product: a heading, lists nested for
 * indentation, a closing line. Lists lose their bullets and their inset;
 * a line set in bold is a list's caption. */

.sba-plans .sba-plan-body {
	flex: 1 1 auto;
	color: var(--sba-slate);
}

.sba-plans .sba-plan-body h4 {
	margin: 0 0 16px;
	color: var(--sba-charcoal);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: normal;
	line-height: 24px;
}

.sba-plans .sba-plan-body ul {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.sba-plans .sba-plan-body ul ul {
	margin: 0;
}

.sba-plans .sba-plan-body ul ul + ul {
	margin-top: 12px;
}

.sba-plans .sba-plan-body p {
	margin: 0 0 16px;
}

.sba-plans .sba-plan-body li {
	margin: 0;
	padding: 3px 0;
	list-style: none;
}

.sba-plans .sba-plan-body li:has(> ul) {
	padding: 0;
}

.sba-plans .sba-plan-body strong {
	color: var(--sba-charcoal);
	font-weight: 500;
}

.sba-plans .sba-plan-body > :last-child {
	margin-bottom: 0;
}

.sba-plans .sba-plan-body a {
	color: var(--sba-charcoal);
	text-decoration: underline;
	text-decoration-color: var(--sba-red);
	text-underline-offset: 3px;
}

.sba-plans .sba-plan-body a:hover,
.sba-plans .sba-plan-body a:focus {
	color: var(--sba-red-dark);
}

/* ---- Foot and buttons ---------------------------------------------------- */

.sba-plans .sba-plan-foot {
	margin: 24px 0 0;
	padding: 0;
}

.sba-plans .sba-plan-owned {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	color: var(--sba-charcoal);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.sba-plans .sba-plan-owned .sba-i {
	color: var(--sba-red-dark);
	font-size: 16px;
	line-height: 1;
}

.sba-plans a.sba-plan-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 0 32px;
	border: 1px solid transparent;
	border-radius: var(--sba-radius-md);
	box-shadow: none;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
	text-transform: none;
	transition:
		background-color var(--sba-duration-hover) ease,
		border-color var(--sba-duration-hover) ease,
		color var(--sba-duration-hover) ease;
}

.sba-plans a.sba-plan-btn .sba-i {
	font-size: 16px;
	line-height: 1;
	transition: transform var(--sba-duration-hover) ease;
}

.sba-plans a.sba-plan-btn:hover .sba-i {
	transform: translateX(4px);
}

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

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

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

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

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

.sba-plans .purchase-disabled {
	margin: 0;
	color: var(--sba-slate);
}

/* ---- "Is my company a member?" -------------------------------------------
 * On the Members Listings Plan's card, between its copy and its button: a
 * line that opens a search field, and under it the directory's companies
 * of that name, each with the member flag's award or "Not a member". */

.sba-plans .sba-plan-lookup {
	margin: 20px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--sba-border);
}

.sba-plans button.sba-plan-lookup-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--sba-charcoal);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.sba-plans button.sba-plan-lookup-toggle:hover,
.sba-plans button.sba-plan-lookup-toggle:focus {
	background: transparent;
	color: var(--sba-red-dark);
}

.sba-plans button.sba-plan-lookup-toggle:focus-visible {
	outline: 2px solid var(--sba-ring);
	outline-offset: 2px;
}

.sba-plans .sba-plan-lookup-toggle .sba-i {
	flex: 0 0 auto;
	font-size: 16px;
	line-height: 1;
	transition: transform var(--sba-duration-hover) ease;
}

.sba-plans .sba-plan-lookup-toggle[aria-expanded="true"] .sba-i {
	transform: rotate(180deg);
}

.sba-plans .sba-plan-lookup-body {
	margin: 16px 0 0;
}

.sba-plans .sba-plan-lookup-body[hidden] {
	display: none;
}

.sba-plans .sba-plan-lookup-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.sba-plans .sba-plan-lookup-field {
	position: relative;
}

/* The icon is placed by offsets and stacked above the field, not centered
   with a transform: inside a card that itself moves on hover, a transformed
   mask icon was reported to disappear when the field took focus. */
.sba-plans .sba-plan-lookup-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-plans input.sba-plan-lookup-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-plans input.sba-plan-lookup-input::placeholder {
	color: var(--sba-slate);
	opacity: 1;
}

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

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

.sba-plans .sba-plan-lookup-results {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sba-plans .sba-plan-lookup-results li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid var(--sba-border);
	color: var(--sba-charcoal);
	font-size: 14px;
	line-height: 20px;
	list-style: none;
}

.sba-plans .sba-plan-lookup-results li:first-child {
	margin-top: 8px;
}

.sba-plans .sba-plan-lookup-results .sba-plan-lookup-none {
	color: var(--sba-slate);
}

.sba-plans .sba-plan-lookup-flag {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 4px;
	color: var(--sba-slate);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	white-space: nowrap;
}

.sba-plans .sba-plan-lookup-flag-member {
	color: var(--sba-charcoal);
}

.sba-plans .sba-plan-lookup-flag .sba-i {
	color: var(--sba-red);
	font-size: 14px;
	line-height: 1;
}

.sba-plans .sba-plan-lookup-more {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 20px;
}

.sba-plans .sba-plan-lookup-more a {
	color: var(--sba-charcoal);
	text-decoration: underline;
	text-decoration-color: var(--sba-red);
	text-underline-offset: 3px;
}

.sba-plans .sba-plan-lookup-more a:hover,
.sba-plans .sba-plan-lookup-more a:focus {
	color: var(--sba-red-dark);
}

/* ---- The account step ------------------------------------------------------
 * For a visitor who is not logged in, the form opens with one card in the
 * same look (templates/add-listing/auth.php): the account's icon tile, the
 * message, Log in and Create account side by side from 480px. Nothing is
 * chosen on it, so it does not lift on hover. */

.sba-plans .sba-plan.sba-plan-static:hover {
	transform: none;
	box-shadow: none;
}

.sba-plans .sba-account-actions {
	display: grid;
	gap: 12px;
}

@media (min-width: 480px) {
	.sba-plans .sba-account-actions {
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	}
}

.sba-plans .sba-account-actions a.sba-plan-btn {
	padding: 0 16px;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.sba-plans .sba-plan,
	.sba-plans a.sba-plan-btn .sba-i,
	.sba-plans .sba-plan-lookup-toggle .sba-i {
		transition: none;
	}

	.sba-plans .sba-plan:hover,
	.sba-plans a.sba-plan-btn:hover .sba-i {
		transform: none;
	}
}