/**
 * Handshaken Deals styles
 *
 * ICON STRATEGY — the nav icon is rendered via CSS `::before` on the
 * BuddyPress nav <li> (using the `item_css_id` we set in PHP). Because
 * it's pure CSS, no BP/kses/esc_html escaping can strip it.
 *
 * We cover several FontAwesome flavors for maximum theme compatibility
 * (FA4, FA5/6 Free, FA5/6 Pro, FA "all" CSS). The handshake Unicode is
 * \f2b5 in all modern FontAwesome versions.
 */

/* ==========================================================================
   Nav icon — CSS pseudo-element (cannot be stripped by BuddyPress)
   ========================================================================== */

/*
 * Scope #1: Legacy BP templates render the primary nav as:
 *   <li id="hsd-profile-tab-personal-li"><a id="user-hsd-profile-tab" ...>Handshaken Deals</a></li>
 *
 * Scope #2: BP Nouveau uses:
 *   <li id="hsd-profile-tab-personal-li"><a ...>Handshaken Deals</a></li>
 *
 * Scope #3: Sub-nav (both templates) renders:
 *   <li id="hsd-subtab-ask-personal-li"><a id="hsd-subtab-ask" ...>Ask for Handshake</a></li>
 *
 * So we target both `#hsd-profile-tab-personal-li > a::before` and the
 * broader `[id^="hsd-profile-tab"] > a::before` for defensive coverage.
 */

#hsd-profile-tab-personal-li > a::before,
#user-hsd-profile-tab::before,
li[id^="hsd-profile-tab"] > a::before,
#hsd-subtab-ask-personal-li > a::before,
#hsd-subtab-deals-personal-li > a::before,
li[id^="hsd-subtab-"] > a::before {
	/* Handshake glyph — same Unicode across FA5/FA6 Free & Pro. */
	content: "\f2b5";

	/* Font stack: tries every common FA family name so whatever the
	 * theme loaded, one will match. `font-weight` then picks regular
	 * vs solid. */
	font-family: "Font Awesome 6 Free",
				 "Font Awesome 6 Pro",
				 "Font Awesome 5 Free",
				 "Font Awesome 5 Pro",
				 "FontAwesome";
	font-weight: 400;   /* Regular style of the handshake */
	font-style:  normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	display: inline-block;
	margin-right: 6px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	speak: none;
	vertical-align: -2px;
}

/* If the site only has the "Solid" (fa-solid-900.woff2) file loaded —
 * e.g. GeneratePress' bundled FA subset — the regular handshake may
 * not render. Browsers will fall back to font-weight: 900 automatically
 * when 400 isn't available for that family, BUT we also provide a body
 * class hook to force solid: just add `body.hsd-force-solid-icon` via
 * theme customizer or a filter. */
body.hsd-force-solid-icon #hsd-profile-tab-personal-li > a::before,
body.hsd-force-solid-icon li[id^="hsd-profile-tab"] > a::before,
body.hsd-force-solid-icon li[id^="hsd-subtab-"] > a::before {
	font-weight: 900;
}

/* ==========================================================================
   Section header (in-content)
   ========================================================================== */
.hsd-wrap {
	margin-top: 1em;
}
.hsd-section-header {
	margin-bottom: 1.25em;
}
.hsd-section-title {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 1.3em;
	margin: 0 0 0.25em 0;
}
.hsd-section-desc {
	margin: 0;
	color: #666;
}

/* ==========================================================================
   Search field
   v1.0.5: full 100% width within page div, custom border color,
   single magnifier icon (no CSS-drawn duplicate).
   ========================================================================== */
.hsd-search-wrap {
	position: relative;
	width: 100%;
	max-width: none;
	margin-bottom: 1em;
}
.hsd-search-field {
	position: relative;
	width: 100%;
}
.hsd-user-search {
	width: 100% !important;
	padding: 12px 44px 12px 16px;
	border: solid 1px #527293 !important;
	border-radius: 8px;
	background: #fff;
	font-size: 15px;
	line-height: 1.4;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
	transition: border-color .15s ease, box-shadow .15s ease;
	box-sizing: border-box;
}
.hsd-user-search:focus {
	outline: none;
	border-color: #527293 !important;
	box-shadow: 0 0 0 3px rgba(82, 114, 147, 0.18);
}
.hsd-search-icon {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: #527293;
	pointer-events: none;
	font-size: 18px;
	line-height: 1;
}
.hsd-search-icon i {
	font-size: 18px;
}

/* v1.0.5: CSS-drawn magnifier fallback REMOVED (was causing a small
 * duplicate icon alongside the FontAwesome one). FontAwesome is loaded
 * via our enqueue or the theme, so the icon always renders. */

.hsd-search-spinner {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: #2271b1;
	font-size: 16px;
	display: none;
}
.hsd-search-field.is-loading .hsd-search-icon {
	display: none;
}
.hsd-search-field.is-loading .hsd-search-spinner {
	display: block;
}

/* Simple CSS spinner fallback */
.hsd-spinner-fallback {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(82, 114, 147, 0.25);
	border-top-color: #527293;
	border-radius: 50%;
	animation: hsd-spin 0.8s linear infinite;
}
@keyframes hsd-spin {
	to { transform: rotate(360deg); }
}

/* ==========================================================================
   Suggestions dropdown
   ========================================================================== */
.hsd-search-suggestions {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 50;
	background: #fff;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
	list-style: none;
	margin: 0;
	padding: 4px 0;
	max-height: 340px;
	overflow-y: auto;
}
.hsd-search-suggestions li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.hsd-suggestion {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	cursor: pointer;
	color: #111;
}
.hsd-suggestion:hover,
.hsd-suggestion.is-active {
	background: #f2f7fc;
}
.hsd-suggestion img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex: 0 0 auto;
}
.hsd-suggestion-text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	min-width: 0;
}
.hsd-suggestion-name {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hsd-suggestion-login {
	color: #667085;
	font-size: 12px;
}
.hsd-suggestion-empty,
.hsd-suggestion-error {
	padding: 10px 12px;
	color: #667085;
	font-style: italic;
}

/* ==========================================================================
   Selected member card — rendered by BP's own members loop template,
   so we intentionally DON'T style the card itself. Just a wrapper
   and the action buttons we add below it.
   ========================================================================== */
.hsd-selected-member {
	margin-top: 1em;
}
.hsd-card-wrap {
	/* The inner markup is BP's real members-loop. Let the theme style it. */
}

/* v1.0.8: allow BP Nouveau's .grid class to style the single-member
 * card as a grid item (just with 1 column here, so it gets the card
 * treatment — avatar/title stacked — instead of the flat list row). */
.hsd-card-wrap ul#members-list,
.hsd-card-wrap ul.items-list {
	padding: 0;
	margin: 0;
	list-style: none;
}
.hsd-card-wrap #members-list > li,
.hsd-card-wrap ul.items-list > li {
	max-width: 100%;
}

.hsd-card-actions {
	margin-top: 12px;
	width: 100%;
	text-align: center !important;
}
/* v1.0.13: target each button directly by its class so theme/BP rules
 * can't drag them left. */
.hsd-request-handshake,
button.hsd-request-handshake,
.button.hsd-request-handshake {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	float: none !important;
	margin: 0 5px !important;
	vertical-align: middle;
}
.hsd-clear-selection,
button.hsd-clear-selection,
.button.hsd-clear-selection {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	float: none !important;
	margin: 0 5px !important;
	vertical-align: middle;
}

/* Action-button icons via pseudo-element (same bulletproof technique
 * as the nav icon — can't be stripped). */
.hsd-btn-icon::before {
	font-family: "Font Awesome 6 Free",
				 "Font Awesome 6 Pro",
				 "Font Awesome 5 Free",
				 "Font Awesome 5 Pro",
				 "FontAwesome";
	font-weight: 400;
	font-style: normal;
	text-rendering: auto;
	line-height: 1;
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.hsd-btn-icon-handshake::before {
	content: "\f2b5"; /* fa-handshake */
}
.hsd-btn-icon-close::before {
	content: "\f00d"; /* fa-xmark / fa-times */
	font-weight: 900;
}

.hsd-loading-card {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px;
	color: #667085;
	font-style: italic;
}
.hsd-no-user {
	padding: 12px;
	color: #667085;
	font-style: italic;
}

/* ==========================================================================
   Empty state
   ========================================================================== */
.hsd-empty-state {
	text-align: center;
	padding: 2em 1em;
	color: #667085;
	border: 1px dashed #d0d5dd;
	border-radius: 10px;
	background: #fafbfc;
}
.hsd-empty-icon {
	font-size: 2.5em;
	display: block;
	margin-bottom: 0.5em;
	color: #98a2b3;
}

/* ==========================================================================
   Utility
   ========================================================================== */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* ==========================================================================
   Deal form (opens when "Request Handshake" is clicked)
   ========================================================================== */
.hsd-deal-form-wrap {
	margin-top: 1.2em;
}
.hsd-deal-form {
	border: 0;
	border-radius: 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
}
.hsd-form-title {
	margin: 0 0 1em 0;
	font-size: 1.15em;
}
.hsd-form-row {
	margin-bottom: 1em;
	display: flex;
	flex-direction: column;
}
.hsd-form-row > label {
	font-weight: 600;
	margin-bottom: 4px;
	font-size: 14px;
}
.hsd-form-row > label small {
	font-weight: 400;
	color: #667085;
}
.hsd-req {
	color: #b42318;
}
.hsd-form-row input[type=text],
.hsd-form-row input[type=number],
.hsd-form-row input[type=date],
.hsd-form-row textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #527293;
	border-radius: 6px;
	background: #fff;
	font-size: 14px;
	box-sizing: border-box;
	font-family: inherit;
}
.hsd-form-row input:focus,
.hsd-form-row textarea:focus {
	outline: none;
	border-color: #527293;
	box-shadow: 0 0 0 3px rgba(82,114,147,.18);
}
.hsd-form-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.hsd-form-grid-2 {
	grid-template-columns: 1fr 1fr;
}
@media (max-width: 600px) {
	.hsd-form-grid,
	.hsd-form-grid-2 { grid-template-columns: 1fr; }
}
.hsd-form-actions,
.hsd-deal-form .hsd-form-actions,
form.hsd-deal-form .hsd-form-actions {
	margin-top: 1em;
	width: 100%;
	text-align: center !important;
}

/* v1.0.12: target EACH button by its own class. Inline-block + centered
 * text-align on the parent does the actual centering. Individual rules
 * ensure no theme-level .button { float: left } or margin auto hijacks
 * their position. */
.hsd-form-submit,
button.hsd-form-submit,
.button.hsd-form-submit,
.hsd-deal-form .hsd-form-submit {
	display: inline-block !important;
	float: none !important;
	vertical-align: middle;
	margin: 0 5px !important;
}
.hsd-form-cancel,
button.hsd-form-cancel,
.button.hsd-form-cancel,
.hsd-deal-form .hsd-form-cancel {
	display: inline-block !important;
	float: none !important;
	vertical-align: middle;
	margin: 0 5px !important;
}
/* v1.0.9: reason picker now on its own row, full width. */
.hsd-reason-row {
	margin-top: 8px;
}
.hsd-field-reason {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #527293;
	border-radius: 6px;
	background: #fff;
	font-size: 14px;
	font-family: Verdana, Geneva, sans-serif;
	color: #101828;
	box-sizing: border-box;
	cursor: pointer;
}
.hsd-field-reason option {
	font-family: Verdana, Geneva, sans-serif;
}

/* v1.0.19: public-deal checkbox row — sits between fields and buttons. */
.hsd-public-row {
	margin: 14px 0 6px;
}
.hsd-public-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-weight: normal;
}
.hsd-public-label input[type="checkbox"] {
	margin-top: 3px;
	flex: 0 0 auto;
}
.hsd-public-text {
	font-size: 13px;
	line-height: 1.45;
	color: #475467;
}
.hsd-public-text strong {
	display: block;
	color: #101828;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 2px;
}
.hsd-public-hint {
	display: block;
	color: #667085;
}

/* v1.0.19: bare login-required notice for anonymous viewers. */
.hsd-login-required {
	padding: 40px 24px;
	text-align: center;
}
.hsd-login-required-text {
	font-size: 15px;
	line-height: 1.6;
	color: #344054;
	margin: 0;
}
.hsd-login-required-text a {
	color: #527293;
	font-weight: 600;
	text-decoration: underline;
}
.hsd-login-required-text a:hover {
	color: #1e40af;
}

/* v1.0.19: public-handshakes visitor view — read-only list, no actions. */
.hsd-public-list .hsd-deal {
	border: 1px solid #e4e7ec;
	border-radius: 10px;
	padding: 16px 18px;
	margin-bottom: 12px;
	background: #fff;
}
.hsd-public-list .hsd-deal-title {
	font-weight: 600;
	font-size: 1.05em;
	color: #101828;
	margin-bottom: 4px;
}
.hsd-public-list .hsd-deal-meta {
	font-size: 13px;
	color: #667085;
	margin-bottom: 6px;
}
.hsd-public-list .hsd-deal-meta a {
	color: #527293;
	font-weight: 500;
}

/* ============================================================
 * v1.0.21: Multi-user participant grid + pink X remove button.
 * Grid echoes the layout of BuddyPress /members directory.
 * ============================================================ */
.hsd-participant-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 16px;
	margin: 20px 0 8px;
}
.hsd-participant-card {
	position: relative;
	background: #fff;
	border: 1px solid #e4e7ec;
	border-radius: 10px;
	padding: 16px 10px 12px;
	text-align: center;
	transition: box-shadow 0.15s, transform 0.1s;
}
.hsd-participant-card:hover {
	box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
}
.hsd-participant-avatar {
	display: inline-block;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
	background: #f2f4f7;
	color: #527293;
	font-weight: 700;
	font-size: 22px;
	line-height: 60px;
	text-align: center;
}
.hsd-participant-avatar-placeholder {
	display: inline-block;
}
.hsd-participant-name {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #101828;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.hsd-remove-participant {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #ff8e83 !important;
	color: #fff !important;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px rgba(236, 72, 153, 0.35);
	transition: background 0.1s, transform 0.1s;
}
.hsd-remove-participant:hover,
.hsd-remove-participant:focus {
	background: #db2777 !important;
	transform: scale(1.08);
	outline: none;
}
.hsd-remove-participant svg {
	display: block;
	pointer-events: none;
}

.hsd-create-deal-wrap .button {
	padding: 10px 28px;
	font-weight: 600;
}

/* Progress counter under Accept/Decline or inside pending deal cards. */
.hsd-progress-counter {
	margin-top: 10px;
	font-size: 13px;
	color: #475467;
	text-align: center;
	font-weight: 500;
	padding: 6px 12px;
	background: #eff6ff;
	border-radius: 6px;
	border: 1px solid #bfdbfe;
}
/* v1.0.27: live countdown span inside progress counter. */
.hsd-countdown {
	color: #027a48;
	font-weight: 700;
	margin-left: 4px;
	white-space: nowrap;
}
.hsd-countdown.is-urgent { color: #b42318; }

/* Accepted/Declined note after action taken. */
.hsd-acted-note {
	display: block;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 13px;
	text-align: center;
}
.hsd-acted-accepted {
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	color: #065f46;
}
.hsd-acted-declined {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
}

/* Partial note — for "Deal was declined by some member(s)". */
.hsd-partial-note-declined {
	margin-top: 10px;
	padding: 10px 14px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 6px;
	color: #991b1b;
	font-weight: 500;
	text-align: center;
}
/* v1.0.26: lapsed-deal note (soft gray/amber). */
.hsd-partial-note-lapsed {
	margin-top: 10px;
	padding: 10px 14px;
	background: #f4f4f5;
	border: 1px solid #d4d4d8;
	border-radius: 6px;
	color: #52525b;
	font-weight: 500;
	text-align: center;
	font-style: italic;
}
/* v1.0.26: horizontal row — "You accepted" note + optional Cancel button. */
.hsd-accepted-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 10px;
}
.hsd-accepted-row .hsd-acted-note {
	flex: 1 1 auto;
	margin: 0;
}
.hsd-accepted-row .button {
	flex: 0 0 auto;
}
@media (max-width: 600px) {
	.hsd-accepted-row { flex-direction: column; }
	.hsd-accepted-row .hsd-acted-note { width: 100%; }
	.hsd-accepted-row .button { width: 100%; }
}

/* Participants row on deal cards in My Deals list. */
.hsd-participants-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
}
.hsd-pp-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 90px;
	text-decoration: none;
	color: inherit;
	position: relative;
}
.hsd-pp-card img {
	width: 75px;
	height: 75px;
	border-radius: 50%;
	border: 2px solid #e4e7ec;
}
.hsd-pp-accepted img { border-color: #10b981; }
.hsd-pp-declined img { border-color: #ef4444; }
.hsd-pp-pending img  { border-color: #f59e0b; }
.hsd-pp-initiator::after {
	content: '★';
	position: absolute;
	top: -2px;
	right: 10px;
	color: #f59e0b;
	font-size: 14px;
}
.hsd-pp-name {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	font-weight: 500;
	max-width: 90px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #0d0e0e;
}
.hsd-field-reason:focus {
	outline: none;
	border-color: #527293;
	box-shadow: 0 0 0 3px rgba(82,114,147,.18);
}
.hsd-field-reason:invalid {
	color: #98a2b3; /* placeholder-ish when default option is selected */
}

/* v1.0.9: hide number-input spinners on the amount field so it looks
 * like a plain text input. .hsd-no-spin is applied in the JS. */
.hsd-no-spin::-webkit-outer-spin-button,
.hsd-no-spin::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.hsd-no-spin {
	-moz-appearance: textfield;
	appearance: textfield;
}
.hsd-form-feedback {
	margin-top: 10px;
	font-size: 14px;
}
.hsd-form-feedback.is-error {
	color: #b42318;
}
.hsd-form-feedback.is-success {
	color: #027a48;
	font-weight: 600;
}

/* ==========================================================================
   Deals list (My Deals tab)
   ========================================================================== */
/* v1.0.27: widen the list wrap to better match theme proportions. */
.hsd-deals-list-wrap {
	margin-left: -10px;
	margin-right: -10px;
}
.hsd-deals-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 1em;
	border-bottom: 1px solid #e4e7ec;
	padding-bottom: 8px;
}
.hsd-filter-btn {
	background: transparent;
	border: 1px solid transparent;
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 13px;
	cursor: pointer;
	color: #475467;
	font-weight: 500;
}
.hsd-filter-btn:hover {
	background: #f2f4f7;
}
.hsd-filter-btn.is-active {
	background: #527293;
	color: #fff;
	border-color: #527293;
}

.hsd-deals-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.hsd-deal {
	border: 1px solid #e4e7ec;
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 12px;
	background: #fff;
	transition: background .2s ease, border-color .2s ease;
}
.hsd-deal.is-highlighted {
	border-color: #527293;
	box-shadow: 0 0 0 3px rgba(82,114,147,.15);
}
.hsd-deal.is-updating {
	opacity: .55;
	pointer-events: none;
}
.hsd-deal-head {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 8px;
}
.hsd-deal-avatar img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
}
.hsd-deal-head-text {
	flex: 1 1 auto;
	min-width: 0;
}
.hsd-deal-title {
	font-weight: 600;
	font-size: 1.05em;
	margin-bottom: 2px;
}
.hsd-deal-meta {
	color: #667085;
	font-size: 13px;
}
.hsd-deal-meta a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dotted #667085;
}
.hsd-deal-status {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
}
.hsd-deal-status-pending   { background: #fef0c7; color: #b54708; }
.hsd-deal-status-accepted  { background: #d1fadf; color: #027a48; }
.hsd-deal-status-declined  { background: #fee4e2; color: #b42318; }
.hsd-deal-status-completed { background: #dbeafe; color: #1e40af; }
.hsd-deal-status-cancelled { background: #f2f4f7; color: #667085; }
.hsd-deal-status-set_aside { background: #fde5d7; color: #65443c; }
.hsd-deal-status-lapsed    { background: #e5e7eb; color: #52525b; }

.hsd-deal-desc {
	color: #344054;
	margin: 8px 0;
	font-size: 14px;
	line-height: 1.5;
}
.hsd-deal-details {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	font-size: 13px;
	color: #475467;
	margin: 8px 0;
}
.hsd-deal-details strong {
	color: #101828;
	font-weight: 600;
	margin-right: 4px;
}
.hsd-deal-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed #e4e7ec;
}
/* v1.0.18: pending-count badge on Requested Handshakes nav link.
 * Highly specific selectors + !important so theme restrictions can't
 * override our red pill styling. */
.hsd-count,
span.hsd-count,
#subnav .hsd-count,
.bp-subnavs .hsd-count,
#object-nav .hsd-count,
a .hsd-count {
	display: inline-block !important;
	min-width: 18px;
	padding: 0 6px;
	margin-left: 6px;
	background: #dc2626 !important;
	color: #fff !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 18px !important;
	text-align: center;
	border-radius: 9px;
	vertical-align: middle;
}
#hsd-subtab-requested .count,
li#hsd-subtab-requested .count {
	display: inline-block;
	min-width: 18px;
	padding: 0 6px;
	margin-left: 6px;
	background: #dc2626;
	color: #fff !important;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	border-radius: 9px;
	vertical-align: middle;
}

.hsd-status-btn-accepted { background: #027a48 !important; color: #fff !important; border-color: #027a48 !important; }
.hsd-status-btn-declined { background: #fff !important; color: #b42318 !important; border-color: #b42318 !important; }
.hsd-status-btn-completed { background: #1e40af !important; color: #fff !important; border-color: #1e40af !important; }
.hsd-status-btn-cancelled { background: #fff !important; color: #667085 !important; border-color: #d0d5dd !important; }

/* v1.0.12: mutual-completion status notes. */
.hsd-partial-note {
	margin: 10px 0;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 13px;
	line-height: 1.5;
}
.hsd-partial-note-mine {
	background: #fff7ed;
	border: 1px solid #fed7aa;
	color: #9a3412;
}
.hsd-partial-note-theirs {
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	color: #1e40af;
	font-weight: 600;
}

/* ==========================================================================
   Requested Handshakes tab (v1.0.7)
   Pending incoming requests — each one showing requester's BP member card
   plus deal details and Accept/Decline.
   ========================================================================== */
.hsd-requested-list-wrap {
	margin-top: 1em;
}
.hsd-requested-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.hsd-requested-item {
	border: 1px solid #e4e7ec;
	border-radius: 10px;
	padding: 18px;
	margin-bottom: 14px;
	background: #fff;
	transition: opacity .2s ease, border-color .2s ease;
}
.hsd-requested-item.is-updating {
	opacity: .55;
	pointer-events: none;
}

/* Inner BP member card inside a requested item — strip grid so the
 * single-item loop lays out cleanly in our context. */
.hsd-requested-card {
	margin-bottom: 12px;
}
.hsd-requested-card .members-dir-list {
	padding: 0;
}
.hsd-requested-card ul.hsd-inline-members-list,
.hsd-requested-card ul.items-list.bp-list {
	padding: 0;
	margin: 0;
	list-style: none;
}
.hsd-requested-card ul.hsd-inline-members-list > li,
.hsd-requested-card ul.items-list.bp-list > li {
	max-width: 100%;
}
/* v1.0.17: avatar + name stack vertically as one card-style unit,
 * centered. Previously avatar was on the left and name floated in the
 * middle, making them look disconnected. */
.hsd-requested-card .list-wrap {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 8px;
	text-align: center;
	flex-wrap: nowrap;
}
.hsd-requested-card .item-avatar {
	display: block;
}
.hsd-requested-card .item-avatar img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
}
.hsd-requested-card .item {
	display: block;
	text-align: center;
}
.hsd-requested-card .item-title,
.hsd-requested-card .list-title {
	margin: 0;
	font-size: 1.05em;
	font-weight: 600;
	text-align: center;
}
.hsd-requested-card .item-title a,
.hsd-requested-card .list-title a {
	text-decoration: none;
}
.hsd-requested-card .item-meta {
	color: #667085;
	font-size: 13px;
	margin: 2px 0 0 0;
	text-align: center;
}

.hsd-requested-details {
	margin-top: 10px;
	padding: 12px 14px;
	background: #f8fafc;
	border-radius: 8px;
	border-left: 3px solid #527293;
}
.hsd-requested-title {
	font-weight: 600;
	font-size: 1.05em;
	color: #101828;
	margin-bottom: 6px;
}
.hsd-requested-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	font-size: 13px;
	color: #475467;
	margin-bottom: 6px;
}
.hsd-requested-meta strong {
	color: #101828;
	font-weight: 600;
	margin-right: 4px;
}
.hsd-requested-details .hsd-deal-desc {
	color: #344054;
	font-size: 14px;
	line-height: 1.5;
	margin: 6px 0 0 0;
}

.hsd-requested-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: -13px;
	padding-top: 0;
	border-top: 0;
	position: relative;
	z-index: 2;
}
.hsd-requested-actions .button {
	min-width: 110px;
}
@media (max-width: 600px) {
	.hsd-requested-actions { flex-direction: row; flex-wrap: wrap; }
	.hsd-requested-actions .button { width: auto; }
}

/* v1.0.25: Distinguish Decline button by softer, warning-ish color. */
.hsd-respond-decline,
button.hsd-respond-decline,
.button.hsd-respond-decline {
	background: #dfab977a !important;
	color: #65443c !important;
	border-color: #c9a192 !important;
}
.hsd-respond-decline:hover,
button.hsd-respond-decline:hover {
	background: #dfab97 !important;
	color: #65443c !important;
}

/* v1.0.25: Custom confirmation modal (replaces native window.confirm). */
.hsd-confirm-overlay {
	position: fixed;
	inset: 0;
	background: rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
}
.hsd-confirm-overlay.is-visible { display: flex; }
.hsd-confirm-box {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(16, 24, 40, 0.22);
	padding: 28px 30px 24px;
	max-width: 460px;
	width: 90%;
	text-align: center;
}
.hsd-confirm-title {
	margin: 0 0 10px 0;
	font-size: 18px;
	color: #101828;
	font-weight: 600;
}
.hsd-confirm-message {
	color: #475467;
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 22px 0;
}
.hsd-confirm-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}
.hsd-confirm-actions .button {
	border-radius: 25px !important;
	min-width: 120px;
	padding: 8px 18px;
}
.hsd-confirm-yes-accept {
	background: #027a48 !important;
	color: #fff !important;
	border-color: #027a48 !important;
}
.hsd-confirm-yes-accept:hover { background: #046c41 !important; }
.hsd-confirm-yes-decline {
	background: #dfab977a !important;
	color: #65443c !important;
	border-color: #c9a192 !important;
}
.hsd-confirm-yes-decline:hover { background: #dfab97 !important; }
.hsd-confirm-yes-cancel {
	background: #d56b5a !important;
	color: #fff !important;
	border-color: #c01674 !important;
}
.hsd-confirm-yes-cancel:hover { background: #b85244 !important; }
.hsd-confirm-no {
	background: #f6f7f7 !important;
	color: #2271b1 !important;
	border-color: #2271b1 !important;
}