/**
 * The listing form's buttons (templates/add-listing/submit-form.php, on the
 * add-listing page and when a listing is edited from the account) as the
 * style guide's large buttons: 44px, 32px of side padding, 14px at weight
 * 500, --sba-radius-md corners, the icon 16px and 8px before the label.
 * "Submit listing" is primary in the dark red, full width; "Preview" and
 * "Save as draft" are outline, side by side under it, as MyListing had them.
 * On the edit form, where the eye button is the only action, it is the
 * primary, full width (until October 8, 2026 these rules were in
 * style.css, against the Global Kit painting every button dark red).
 *
 * MyListing's own rules (.buttons.button-2, .button-5) carry two classes
 * and float the icon to the left edge; these carry three. The paper plane
 * is Font Awesome's glyph, painted here as Lucide's send (the guide's icon
 * for sending a form); the eye and the disk are MyListing's Material names,
 * which icons.css already paints as Lucide. October 8, 2026.
 */

.c27-submit-listing-form .listing-form-submit-btn {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.c27-submit-listing-form .listing-form-submit-btn .buttons {
	display: inline-flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	min-width: 0;
	min-height: 44px;
	height: auto;
	margin: 0;
	padding: 0 32px;
	border: 1px solid transparent;
	border-radius: var(--sba-radius-md);
	box-shadow: none;
	font-family: var(--sba-font-sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: normal;
	line-height: 20px;
	text-transform: none;
	white-space: nowrap;
	transition:
		background-color var(--sba-duration-hover) ease,
		border-color var(--sba-duration-hover) ease,
		color var(--sba-duration-hover) ease;
}

.c27-submit-listing-form .listing-form-submit-btn .skip-preview-btn {
	flex-basis: 100%;
}

.c27-submit-listing-form .listing-form-submit-btn .buttons:focus-visible {
	outline: 2px solid var(--sba-ring);
	outline-offset: 2px;
}

.c27-submit-listing-form .listing-form-submit-btn .buttons i {
	position: static;
	float: none;
	margin: 0;
	font-size: 16px;
	line-height: 1;
}

/* Primary. */
.c27-submit-listing-form .listing-form-submit-btn .button-2,
.c27-submit-listing-form .listing-form-submit-btn .button-2:focus {
	background-color: var(--sba-red-dark);
	color: var(--sba-red-contrast);
}

.c27-submit-listing-form .listing-form-submit-btn .button-2:hover {
	background-color: var(--sba-red-darker);
	color: var(--sba-red-contrast);
}

/* The only action of the edit form: primary, full width. */
.c27-submit-listing-form .listing-form-submit-btn .button-5,
.c27-submit-listing-form .listing-form-submit-btn .button-5:focus {
	flex-basis: 100%;
	background-color: var(--sba-red-dark);
	color: var(--sba-red-contrast);
}

.c27-submit-listing-form .listing-form-submit-btn .button-5:hover {
	background-color: var(--sba-red-darker);
	color: var(--sba-red-contrast);
}

/* Beside "Submit listing": outline, side by side. */
.c27-submit-listing-form .listing-form-submit-btn .skip-preview-btn ~ .button-5,
.c27-submit-listing-form .listing-form-submit-btn .skip-preview-btn ~ .button-5:focus {
	flex-basis: 0;
	border-color: var(--sba-input);
	background-color: var(--sba-surface);
	color: var(--sba-charcoal);
}

.c27-submit-listing-form .listing-form-submit-btn .skip-preview-btn ~ .button-5:hover {
	border-color: var(--sba-input);
	background-color: var(--sba-accent);
	color: var(--sba-charcoal);
}

/* Font Awesome's paper plane as Lucide's send, and the plan switch's
   exchange arrows ("Renew plan" on SBA) as Lucide's refresh-cw, the
   guide's icon for renewing. */
.c27-submit-listing-form .listing-form-submit-btn .fa-paper-plane::before,
.c27-submit-listing-form .listing-form-submit-btn .fa-exchange-alt::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: top;
	background-color: currentColor;
	-webkit-mask: url("../icons/lucide/send.svg") center / contain no-repeat;
	mask: url("../icons/lucide/send.svg") center / contain no-repeat;
}

.c27-submit-listing-form .listing-form-submit-btn .fa-exchange-alt::before {
	-webkit-mask-image: url("../icons/lucide/refresh-cw.svg");
	mask-image: url("../icons/lucide/refresh-cw.svg");
}

/* The note between the buttons when a published listing is edited; its
   margin is inline in the template, hence !important. */
.c27-submit-listing-form .listing-form-submit-btn .help-block {
	flex-basis: 100%;
	margin: 8px 0 !important;
}

/* The section navigation, shortened above the footer by listing-form.js;
   faded out where the space above the footer no longer holds it. */
.add-listing-nav {
	transition: opacity var(--sba-duration-hover) ease, visibility var(--sba-duration-hover) ease;
}

.add-listing-nav.is-covered {
	visibility: hidden;
	opacity: 0;
}

/* The character counter under a field's label (MyListing's
   ml_display_field_char_counter()), past its limit in the dark red, the
   accessible red for small text, instead of MyListing's #ff3b1c. */
.c27-submit-listing-form .field-char-counter.max-exceeded,
.c27-submit-listing-form .field-char-counter.min-exceeded {
	color: var(--sba-red-dark);
}