/* ── Add Listing Hero (logged-out state) ─────────────────────────────────── */

.hp-listing-hero {
	max-width: 640px;
	margin: 0 auto 36px;
	padding: 0 4px;
}

.hp-listing-hero__label {
	font-size: 11px;
	font-weight: 700;
	color: var(--hp-blue);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 8px;
}

.hp-listing-hero__heading {
	font-size: 26px;
	font-weight: 700;
	color: #111827;
	margin: 0 0 10px;
	line-height: 1.2;
}

.hp-listing-hero__sub {
	font-size: 15px;
	color: #374151;
	line-height: 1.7;
	margin: 0 0 28px;
}

.hp-listing-hero__steps {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 28px;
}

.hp-listing-hero__step {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.hp-listing-hero__step-num {
	flex-shrink: 0 !important;
	width: 36px !important;
	height: 36px !important;
	background: var(--hp-blue) !important;
	color: #fff !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	margin-top: 1px;
	line-height: 1 !important;
	min-width: 36px !important;
}

.hp-listing-hero__step-body strong {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: #111827;
	margin-bottom: 4px;
}

.hp-listing-hero__step-body p {
	font-size: 14px;
	color: #6B7280;
	line-height: 1.6;
	margin: 0;
}

.hp-listing-hero__divider {
	border-top: 1px solid #E5E7EB;
	margin-bottom: 28px;
}

/* ── Add Listing hero — mobile polish (≤ 575px) ───────────────────────────── */
/* Slightly smaller heading to balance the trimmed H1 above it. Step           */
/* descriptions follow the HomePezzo mobile supporting-text standard:          */
/* 15–16px / weight 400–500 / line-height ~1.6 / muted #6B7280. Step titles    */
/* (the <strong>) stay bold and untouched. Desktop sizes/colors are untouched. */

@media (max-width: 575px) {

	.hp-listing-hero__heading {
		font-size: 22px;
	}

	.hp-listing-hero__step-body p {
		font-size: 15px;
		font-weight: 400;
		line-height: 1.6;
		color: #6B7280;
	}

}

/* hp_my_listings — Account page dashboard */

.hp-my-listings {
	margin-bottom: 32px;
}

.hp-my-listings__empty {
	color: #64748B;
	font-size: 15px;
	margin-bottom: 12px;
}

.hp-my-listings__add-btn {
	display: inline-flex;
	align-items: center;
	background: var(--hp-blue);
	color: #FFFFFF;
	border-radius: 6px;
	padding: 10px 20px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	transition: background-color 0.2s;
}

.hp-my-listings__add-btn:hover {
	background-color: var(--hp-blue-hover);
	color: #FFFFFF;
}

.hp-my-listings__grid {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hp-my-listings__item {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 8px;
	padding: 14px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.hp-my-listings__title {
	font-size: 15px;
	font-weight: 600;
	color: #111827;
	flex: 1;
	min-width: 180px;
}

.hp-my-listings__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 13px;
	color: #64748B;
}

.hp-my-listings__status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.hp-my-listings__status--publish {
	background: #DCFCE7;
	color: #166534;
}

.hp-my-listings__status--pending {
	background: #FEF9C3;
	color: #854D0E;
}

.hp-my-listings__status--draft {
	background: #F1F5F9;
	color: #475569;
}

.hp-my-listings__status--gd-expired {
	background: #FEE2E2;
	color: #991B1B;
}

.hp-my-listings__cat {
	color: #475569;
}

.hp-my-listings__date {
	color: #94A3B8;
}

.hp-my-listings__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.hp-my-listings__link {
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	color: var(--hp-blue);
	transition: color 0.15s;
}

.hp-my-listings__link:hover {
	color: var(--hp-blue-hover);
	text-decoration: underline;
}

.hp-my-listings__link--edit {
	color: #64748B;
}

.hp-my-listings__link--edit:hover {
	color: #334155;
}

@media (max-width: 575px) {
	.hp-my-listings__item {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	.hp-my-listings__title {
		min-width: unset;
	}
}

/* ==========================================================================
   Account form: visible field labels (Edit Account, body.page-id-8)
   UsersWP renders a <label class="visually-hidden form-label"> above every
   account/profile field (First Name, Email, Phone, Website, Business Email,
   etc.), but Bootstrap's .visually-hidden hides it visually — only the
   placeholder is shown, which disappears once a field has a value. Returning
   vendors then see unlabeled filled inputs, with no way to tell apart two
   near-identical fields: "Email" (login) vs "Business Email (shown
   publicly)".

   Fix: override .visually-hidden for labels inside .uwp-account-form only,
   restoring normal block layout above each input. Screen readers are
   unaffected — label text and for/id association are unchanged, only the
   visual hiding is undone. The required-field asterisk (.text-danger span)
   keeps its red color via Bootstrap.

   Scoped to body.page-id-8.uwp_account_page so no other UsersWP form
   (login, register) or page is affected.
   ========================================================================== */

body.page-id-8.uwp_account_page .uwp-account-form .form-label.visually-hidden {
	position: static !important;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
	clip: auto !important;
	white-space: normal !important;
	margin: 0 0 6px !important;
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
}

/* ==========================================================================
   Account sidebar: highlight the Logout item in HomePezzo brand blue so it
   stands out from the other sidebar nav items (Edit Account, Change
   Password, Notifications, Privacy). Scoped to the account page sidebar
   menu only via .uwp-account-logout — does not affect the header logout
   link, footer links, or Login/Register forms.
   ========================================================================== */

body.page-id-8.uwp_account_page .uwp-account-logout {
	color: var(--hp-blue);
}

body.page-id-8.uwp_account_page .uwp-account-logout:hover,
body.page-id-8.uwp_account_page .uwp-account-logout:focus {
	color: var(--hp-blue-hover);
}

/* Renew is the one action an expired listing owner must notice — pill button
   treatment, unlike the plain View/Edit text links. (VP-1) */
.hp-my-listings__link--renew {
	background: var(--hp-blue, #315E9E);
	color: #FFFFFF;
	padding: 4px 14px;
	border-radius: 999px;
}

.hp-my-listings__link--renew:hover,
.hp-my-listings__link--renew:focus {
	background: var(--hp-blue-hover, #2A5086);
	color: #FFFFFF;
}

/* Listing type chips + expiry copy (VP-5): quiet pills so vendors can tell
   classifieds from guides at a glance, and see when a classified lapses. */
.hp-my-listings__type-chip {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.hp-my-listings__type-chip--classified {
	background: #F4EFE7;
	color: #7A6A52;
}

.hp-my-listings__type-chip--guide {
	background: #EAF0F8;
	color: #3E5F8F;
}

.hp-my-listings__expiry {
	font-size: 12px;
	color: #94A3B8;
}

.hp-my-listings__expiry--expired {
	color: #B45309;
	font-weight: 600;
}