/* Recommented 1.3.4 — GeneratePress / BP Legacy / BP Nouveau friendly styles */

/* -----------------------------------------------------------------------
 * Hide the redundant single-item "Recommended" subnav row.
 *
 * BuddyPress requires at least one subnav item for the parent screen
 * callback to fire, so the subtab has to stay registered. There is no user
 * value in showing a lone "Recommended" pill directly beneath a tab that is
 * already labeled "Recommended", so we suppress it in the DOM via CSS.
 *
 * The li is targeted with a broad set of selectors so it disappears under
 * BP Legacy, BP Nouveau, and typical theme scopes (GeneratePress etc.).
 * Where the browser supports :has(), the whole subnav bar collapses so the
 * theme doesn't leave a bordered empty strip behind it.
 * --------------------------------------------------------------------- */
#buddypress li#recommended-personal-li,
.buddypress-wrap li#recommended-personal-li,
#buddypress #member-secondary-nav li#recommended-personal-li,
.buddypress-wrap #member-secondary-nav li#recommended-personal-li,
#buddypress #subnav li#recommended-personal-li,
.buddypress-wrap #subnav li#recommended-personal-li,
#item-body #subnav li#recommended-personal-li,
li#recommended-personal-li {
	display: none !important;
}

/* Collapse the entire subnav bar when "Recommended" is the ONLY item in it
   (avoids a leftover divider/spacing artifact in supporting browsers). */
#buddypress #item-body #subnav.user-subnav:has(#member-secondary-nav > li:only-child#recommended-personal-li),
.buddypress-wrap #item-body #subnav.user-subnav:has(#member-secondary-nav > li:only-child#recommended-personal-li),
#item-body nav#subnav.bp-subnavs:has(#member-secondary-nav > li:only-child#recommended-personal-li) {
	display: none !important;
}

/* -----------------------------------------------------------------------
 * Profile nav tab icon.
 *
 * The primary render path is JS injection (assets/js/recommented-nav-icon.js):
 *   • If Font Awesome 6 is loaded on the site, injects
 *       <i class="fa-solid fa-thumbs-up gp-nav-icon recommented-nav-icon">
 *     matching the GP child theme's convention exactly — no CSS overrides
 *     needed beyond what the theme already applies to .gp-nav-icon.
 *   • If FA isn't loaded, injects
 *       <span class="recommented-nav-icon recommented-nav-icon-svg"><svg>…</svg></span>
 *     with the styles below to size and space it consistently.
 *
 * The CSS mask block that follows is a *safety net* for the (rare) case
 * where the JS never runs (e.g. blocked by CSP without our nonce) — it
 * targets the ACTUAL IDs BP generates so it works out of the box now.
 *   BP Nouveau: <li id="recommended-personal-li"><a id="user-recommented">
 *   BP Legacy:  <li id="recommented">
 * The earlier `li#recommented > a::before` selector matched neither on
 * Nouveau — that was the real reason the icon was invisible.
 * --------------------------------------------------------------------- */

/* SVG-fallback wrapper sizing — no color/background rules so themes control
   tint via the surrounding link. */
.recommented-nav-icon-svg {
	display: inline-flex;
	align-items: center;
	margin-right: 6px;
	vertical-align: -2px;
	line-height: 1;
}
.recommented-nav-icon-svg svg {
	width: 19px;
	height: 19px;
}

/* Font Awesome path — piggy-back on child-theme sizing if defined, else set
   a sensible default. Kept low-specificity so the theme wins where present.
   Bumped 3px larger (relative to the old thumb-up) for the profile-nav tab. */
.recommented-nav-icon.fa-solid,
.recommented-nav-icon.fa-regular {
	margin-right: 6px;
	font-size: 1.15em;
}

/* CSS-mask safety net — targets the actual BP-generated IDs. */
#buddypress li#recommended-personal-li > a::before,
#buddypress a#user-recommented::before,
.buddypress-wrap li#recommended-personal-li > a::before,
.buddypress-wrap a#user-recommented::before,
/* Legacy fallback for pre-Nouveau installs: */
#buddypress li#recommended > a::before,
li#recommended > a::before {
	content: "";
	display: inline-block;
	width: 19px;
	height: 19px;
	margin-right: 6px;
	vertical-align: -4px;
	background-color: currentColor;
	-webkit-mask: var(--recommented-icon) no-repeat center / contain;
	mask: var(--recommented-icon) no-repeat center / contain;
}

/* Hide the CSS-mask safety net when the JS already injected a real icon.
   :has() is well-supported in 2024+; older browsers keep the mask visible
   in the unlikely case the JS didn't run — always better than no icon. */
#buddypress li#recommended-personal-li > a:has(.recommented-nav-icon)::before,
#buddypress a#user-recommented:has(.recommented-nav-icon)::before,
.buddypress-wrap li#recommended-personal-li > a:has(.recommented-nav-icon)::before,
.buddypress-wrap a#user-recommented:has(.recommented-nav-icon)::before,
#buddypress li#recommended > a:has(.recommented-nav-icon)::before,
li#recommended > a:has(.recommented-nav-icon)::before {
	content: none;
}

:root {
	--recommented-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' aria-hidden='true' focusable='false'%3E%3Cg stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cline x1='12' y1='1.1' x2='12' y2='3.1'/%3E%3Cline x1='4.3' y1='4.3' x2='5.8' y2='5.8'/%3E%3Cline x1='19.7' y1='4.3' x2='18.2' y2='5.8'/%3E%3Cline x1='1.5' y1='11.6' x2='3.5' y2='11.6'/%3E%3Cline x1='22.5' y1='11.6' x2='20.5' y2='11.6'/%3E%3C/g%3E%3Cpath d='M12 4a6 6 0 0 0-3.75 10.69c.53.42.86 1.02.95 1.69l.09.62h5.42l.09-.62c.09-.67.42-1.27.95-1.69A6 6 0 0 0 12 4z'/%3E%3Cg stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cline x1='9.7' y1='18' x2='14.3' y2='18'/%3E%3Cline x1='10.4' y1='20' x2='13.6' y2='20'/%3E%3C/g%3E%3Cpath d='M10.9 21.3h2.2a1.3 1.3 0 0 1-1.1 1.5 1.3 1.3 0 0 1-1.1-1.5z'/%3E%3C/svg%3E");
}

/* Recommend button icon (still inline SVG — allowed in post content) */
.recommented-icon {
	vertical-align: -2px;
	margin-right: 5px;
}

.recommented-wrap {
	margin: 0;
}

.recommented-hint {
	font-size: 0.9em;
	opacity: 0.75;
}

/* Owner-only notice about which connection channels are active. Rendered
   just under the title when Friends and/or Team Tribe is missing, so the
   profile owner understands why the picker's recipient pool may be smaller
   than expected. Kept subtle — it's guidance, not an error. */
.recommented-channel-status {
	margin: 0 0 14px;
	padding: 8px 12px;
	font-size: 0.88em;
	line-height: 1.4;
	background: #fff8e1;
	border-left: 3px solid #f0ad4e;
	color: #6b4a00;
	border-radius: 3px;
}

.recommented-channel-status a {
	color: inherit;
	text-decoration: underline;
	font-weight: 600;
}

/* Items list */
ul.recommented-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.recommented-items li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.recommented-title {
	font-weight: 600;
	text-decoration: none;
}

.recommented-meta {
	flex-basis: 100%;
	font-size: 0.85em;
	opacity: 0.7;
}

.recommented-status {
	font-size: 0.75em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 2px 9px;
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.06);
}

.recommented-items li.is-accepted .recommented-status {
	background: #d8f3dc;
	color: #1b4332;
}

/* Opt-in checkbox + Save button on one horizontal line */
.recommented-settings {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
}

.recommented-allow {
	display: inline-flex;
	align-items: center;
	margin: 0;
	cursor: pointer;
}

.recommented-allow input[type="checkbox"] {
	margin: 0 15px 0 0;
	flex: 0 0 auto;
}

/* Email opt-in — sits on its own row so it doesn't compete with the
   master toggle for scanning. When disabled (allow is off), it dims
   without collapsing to make the parent/child relationship obvious.
   Updated in 1.3.2: margin zeroed and tinted `#627fa5` per design spec. */
.recommented-email-optin {
	flex-basis: 100%;
	order: 3;
	margin: 0px 0 0;
	font-size: 0.9em;
	opacity: 1;
	transition: opacity 0.15s ease-in-out;
	color: #627fa5;
}
.recommented-email-optin input[type="checkbox"]:disabled + span,
.recommented-email-optin:has(input:disabled) {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Note: `.recommented-save` styles removed in 1.3.2 — the Save button no
   longer exists; the settings form auto-saves on every change and confirms
   via `.recommented-settings-toast` (defined below). */

.recommented-items .button,
.recommented-settings .button,
.recommented-dialog .button {
	padding: 10px 17px !important;
	font-size: 0.85em;
	cursor: pointer;
	margin: 15px auto 0 auto !important;
	display: block;
}

.recommented-remove {
	opacity: 0.75;
}

.recommented-msg {
	margin-left: 8px;
	font-size: 0.9em;
}

.recommented-empty {
	opacity: 0.7;
}

/* Recommend button under post content */
.recommented-action {
	margin-top: 1.75em;
}

.recommented-action .recommented-open {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

/* Modal */
.recommented-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.recommented-modal[hidden] {
	display: none;
}

.recommented-overlay {
	position: absolute;
	inset: 0;
	background: rgba( 17, 24, 39, 0.55 );
}

.recommented-dialog {
	position: relative;
	background: var(--base-3, #fff);
	color: inherit;
	width: 92%;
	max-width: 430px;
	max-height: 80vh;
	overflow: auto;
	border-radius: 8px;
	padding: 26px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

.recommented-close {
	position: absolute;
	top: 8px;
	right: 10px;
	background: none;
	border: 0;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	opacity: 0.7;
}

.recommented-close:hover {
	opacity: 1;
}

/* Modal title — centered horizontally (1.3.5). */
h3#recommented-modal-title,
.recommented-dialog .recommented-modal-title {
	font-size: 22px;
	margin: -0px 0 10px 0;
	font-weight: 500;
	text-align: center;
}

/* Keep the action row (button + status text) centered under the picker. */
.recommented-dialog .recommented-actions-row {
	text-align: center;
}
.recommented-dialog .recommented-actions-row .recommented-msg {
	display: block;
	margin: 8px 0 0 0;
}

.recommented-friend {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 0;
	cursor: pointer;
}

.recommented-friend img {
	border-radius: 50%;
}

.recommented-friend.is-disabled {
	opacity: 0.45;
	cursor: default;
}

/* Relation badge inside the picker (Friend / Team / Friend & Team). Small,
   unobtrusive pill that sits after the recipient's display name. */
.recommented-friend .recommented-friend-name {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.recommented-rel-badge {
	display: inline-block;
	font-size: 0.7em;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 1px 8px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.06);
	color: inherit;
	white-space: nowrap;
}

.recommented-friend.recommented-rel-team .recommented-rel-badge {
	background: #e6f0ff;
	color: #1d4ed8;
}

.recommented-friend.recommented-rel-friend .recommented-rel-badge {
	background: #ecfdf5;
	color: #065f46;
}

.recommented-friend.recommented-rel-friend_team .recommented-rel-badge {
	background: #fef3c7;
	color: #92400e;
}

/* Loading state while AJAX-swapping the tab */
body.recommented-busy {
	cursor: progress;
}

body.recommented-busy #recommented-wrap,
body.recommented-busy .item-body {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* -----------------------------------------------------------------------
 * 1.2.0 additions — bulk actions, per-sender blocking, blocked list
 * --------------------------------------------------------------------- */


/* Block-sender button on each pending item — small, tinted so it doesn't
   compete visually with Accept/Remove. */
.recommented-block {
	opacity: 0.7;
	border-color: transparent;
	font-size: 0.8em !important;
}
.recommented-block:hover {
	opacity: 1;
	color: #b91c1c;
}

/* Blocked-senders manager (owner-only, appears only when non-empty). */
.recommented-blocked-block {
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px dashed rgba(0, 0, 0, 0.15);
}

.recommented-blocked-title {
	margin: 0 0 6px;
	font-size: 1em;
	font-weight: 600;
}

.recommented-blocked-list {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.recommented-blocked-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	background: rgba(0, 0, 0, 0.03);
	border-radius: 3px;
	margin-bottom: 4px;
}

.recommented-blocked-list li img {
	border-radius: 50%;
	flex: 0 0 auto;
}

.recommented-blocked-name {
	flex: 1 1 auto;
	font-size: 0.92em;
}

.recommented-unblock {
	flex: 0 0 auto;
	padding: 3px 12px !important;
	font-size: 0.8em !important;
	cursor: pointer;
}

/* -----------------------------------------------------------------------
 * 1.3.0 additions
 *   1. Visibility dropdown row inside the settings form
 *   2. Post-card list mirroring Front and Reserve's .bfp-post-card
 *   3. Delete-confirmation modal mirroring .bfp-modal-overlay
 * --------------------------------------------------------------------- */

/* ── 1. Visibility dropdown row ─────────────────────────────────────── */

.recommented-visibility-row {
	flex-basis: 100%;
	order: 4;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 6px 0 0;
	font-size: 0.92em;
}

.recommented-visibility-label {
	font-weight: 500;
	margin: 0;
	flex: 0 0 auto;
}

.recommented-visibility-select {
	flex: 0 0 auto;
	max-width: 240px;
	padding: 4px 8px;
	border: 1px solid #c4cdd8;
	border-radius: 4px;
	background: #fff;
	font-size: 0.95em;
	line-height: 1.4;
	/* Inherit the theme's body font family (1.3.3+, hardened in 1.3.4).
	   Native <select> elements otherwise use the browser/OS default font
	   ("Arial" on Windows, ".SF NS Text" on macOS, sans-serif on Linux),
	   which reads inconsistently next to the surrounding page text.
	   `font-family: inherit` walks up the DOM until it finds a set family
	   — typically the body element the theme styled. Applied to both the
	   <select> shell (the closed state) and its <option> children so the
	   open dropdown menu also follows. Note that Chromium and Firefox
	   honor font-family on <option> but macOS Safari still hands the
	   popup off to the OS renderer — that's a known WebKit limitation
	   with no author-side fix.

	   `!important` is present because many themes (GeneratePress, Kadence,
	   Astra, and most BuddyPress-integrated themes) apply font-family to
	   `select`, `input, select, textarea`, `body select`, or similar
	   selectors with equal-or-higher specificity than a single class,
	   which win the cascade over `.recommented-visibility-select` even
	   though it looks more specific. `!important` is the only way to
	   guarantee the theme's body-font choice actually reaches the select. */
	font-family: inherit !important;
}

.recommented-visibility-select option {
	font-family: inherit !important;
}

/* Extra-defensive selectors — BuddyPress-scoped themes (BP Nouveau layout,
   custom child themes) sometimes target `#buddypress select` or
   `.buddypress-wrap select` with matching or higher specificity than the
   class rule above. Repeating the declaration through those ancestor
   scopes guarantees we win regardless of which selector the theme used. */
#buddypress .recommented-visibility-select,
.buddypress-wrap .recommented-visibility-select,
#buddypress .recommented-visibility-select option,
.buddypress-wrap .recommented-visibility-select option {
	font-family: inherit !important;
}

/* ── 2. Post-card list  (mirrors .bfp-post-card visually) ──────────── */
/*
 * Structure:
 *   .recommented-posts-list
 *     .recommented-post-card (thumb + body)
 *       .recommented-post-thumb  (fixed 130×95 image)
 *       .recommented-post-body   (flex column: title, meta, excerpt, actions)
 *
 * Kept intentionally close to bfp-post-card so a site using both plugins
 * has a consistent list look. Uses the `recommented-` prefix throughout so
 * both plugins style side-by-side without collision.
 */

.recommented-posts-list {
	display: flex;
	flex-direction: column;
	margin-bottom: -40px;
}

.recommented-post-card {
	display: flex;
	gap: 18px;
	padding: 0;
	background: #fff0;
	background-clip: border-box;
	border: none;
	border-radius: 0;
	box-shadow: none;
	align-items: flex-start;
	margin-bottom: 10px;
}

/* Separator between cards — clean flush list, no border line. */
.recommented-post-card + .recommented-post-card {
	padding-top: 18px;
	margin-top: 4px;
}

.recommented-post-card:last-child {
	margin-bottom: 0;
}

.recommented-post-thumb {
	flex-shrink: 0;
	display: block;
	width: 130px;
	height: 95px;
	border-radius: 8px;
	overflow: hidden;
	background: #f3f3f3;
}

.recommented-post-thumb img {
	width: 130px;
	height: 95px;
	object-fit: cover;
	display: block;
	border-radius: 8px;
	transition: transform 0.25s;
}

.recommented-post-thumb:hover img {
	transform: scale(1.04);
}

.recommented-post-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: -20px;
}

.recommented-post-title {
	margin: 15px 0 0 0 !important;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	color: #a40000 !important;
}

.recommented-post-title a {
	color: #a40000 !important;
	text-decoration: none;
	transition: color .2s;
}

.recommented-post-title a:hover {
	color: #d5a04e !important;
}

/* Meta row — icons follow FA6 conventions; sites without FA6 see plain text. */
.recommented-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	font-size: 15px;
	color: #999;
	margin: 0;
}

.recommented-post-meta span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.recommented-post-meta i {
	font-size: 13px;
	opacity: 0.8;
}

.recommented-post-meta a {
	color: inherit;
	text-decoration: none;
}
.recommented-post-meta a:hover {
	text-decoration: underline;
}

/* Same visual hiding rule as BFP has on categories — keep the DOM there
   so translations, filters and REST clients see it, but suppress it from
   the default visual until a site actively wants it. */
.recommented-meta-cats {
	display: none !important;
}

.recommented-post-excerpt {
	margin: -1px 0 0 0;
	font-size: 16px;
	color: #666;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Action row (mirrors .bfp-post-actions). */
.recommented-post-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: -10px;
	align-items: center;
}

/* Shared action button — matches .bfp-action-btn 1:1 so both plugins share
   look. Neutralizes theme button styles so it stays a plain-looking link. */
.recommented-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 17px;
	font-weight: 500;
	cursor: pointer;
	border: none;
	text-decoration: none !important;
	background: transparent !important;
	box-shadow: none !important;
	transition: background 0.15s, color 0.15s;
	line-height: 1.5;
	vertical-align: middle;
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	letter-spacing: inherit;
	text-transform: none;
	margin: 0;
	outline: none;
}

/* Hide icon glyphs by default (matches Front and Reserve). Sites that
   want icons can revert with `.recommented-action-btn i { display: inline-flex; }`. */
.recommented-action-btn i {
	display: none !important;
}

.recommented-action-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Mute sender / Delete / Resend Recommendation share one identical,
   theme-proof appearance so they line up on a single row with the same size
   and color. `!important` + explicit <button>/<a> selectors are required
   because themes style bare `button` / `a` elements with high specificity,
   which previously pushed "Mute sender" out of alignment with "Delete". */
button.recommented-btn-block,
a.recommented-btn-block,
.recommented-btn-block,
button.recommented-btn-delete,
.recommented-btn-delete,
a.recommented-btn-resend,
button.recommented-btn-resend,
.recommented-btn-resend {
	color: #b45309 !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 4px 10px !important;
	line-height: 1.5 !important;
	font-size: 17px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	vertical-align: middle !important;
	display: inline-flex !important;
	align-items: center !important;
}

.recommented-btn-block:hover,
button.recommented-btn-delete:hover,
.recommented-btn-delete:hover,
a.recommented-btn-resend:hover,
button.recommented-btn-resend:hover,
.recommented-btn-resend:hover { background: transparent !important; color: #508ed0 !important; }

/* Responsive stack on narrow viewports (matches BFP). */
@media (max-width: 640px) {
	.recommented-post-card {
		flex-direction: column;
	}
	.recommented-post-thumb,
	.recommented-post-thumb img {
		width: 100%;
		height: 180px;
		border-radius: 8px;
	}
}

/* ── 3. Delete-confirmation modal  (mirrors .bfp-modal-overlay) ────── */

.recommented-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba( 17, 24, 39, 0.55 );
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.recommented-modal-box {
	background: #ffffff;
	border: 1px solid #d1dbe5;
	border-radius: 10px;
	padding: 30px 28px 26px;
	max-width: 360px;
	width: 90%;
	box-shadow: 0 4px 24px rgba(60, 80, 110, 0.13), 0 1px 4px rgba(60, 80, 110, 0.07);
	text-align: center;
}

.recommented-modal-msg {
	font-size: 15px;
	font-weight: 600;
	color: #1e293b;
	margin: 0 0 8px;
	line-height: 1.5;
}

.recommented-modal-sub {
	font-size: 12.5px;
	font-weight: 400;
	color: #64748b;
	margin: 0 0 22px;
	line-height: 1.5;
}

.recommented-modal-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
}

/* Unified modal buttons — both variants share the same neutral chrome so
   nothing looks alarming; the Delete/Cancel wording carries the meaning. */
.recommented-btn-danger,
.recommented-btn-ghost {
	font-size: 13px !important;
	font-weight: 600 !important;
	padding: 10px 18px !important;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px;
	line-height: 1.4 !important;
	box-shadow: none !important;
	margin: 0 !important;
	background: #e5e7eb;
	color: #1f2937;
	border-radius: 25px;
}

.recommented-btn-danger:hover,
.recommented-btn-ghost:hover {
	background: #f1f5f9 !important;
	border-color: #94a3b8 !important;
	color: #0f172a !important;
}

/* -----------------------------------------------------------------------
 * 1.3.1 — inline Recommend button (BP Bookmarks slot-in)
 *
 * When BP Bookmarks is active, the Recommend button is spliced INSIDE
 * `.bpbk-btn-wrapper` between `.bpbk-bookmark-btn` and `.bpbk-share-btn`.
 * The label span uses the shared `.bpbk-btn-label` class so it inherits
 * whatever font/color/spacing Bookmarks applies to its own labels — one
 * fewer thing to keep in sync across releases.
 *
 * These rules cover the OUTER button element itself, which BP Bookmarks
 * styles via `.bpbk-bookmark-btn` / `.bpbk-share-btn` class selectors we
 * can't inherit from. The shape (pill / padding / gap between icon and
 * label) mirrors the visual grammar of those two so the middle button
 * doesn't stand out. Kept at low specificity so any site with a stronger
 * Bookmarks stylesheet still wins.
 * --------------------------------------------------------------------- */

.bpbk-btn-wrapper .recommented-inline-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 6px;
	border: 1px solid #d1d5db;
	background: #fff;
	color: #72777edb;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	letter-spacing: inherit;
	text-transform: none;
	margin: 0;
	outline: none;
	vertical-align: middle;
	border-radius: 25px;
}

.bpbk-btn-wrapper .recommented-inline-btn:hover,
.bpbk-btn-wrapper .recommented-inline-btn:focus-visible {
	background: #f9fafb;
	border-color: #9ca3af;
	color: #111827;
}

.bpbk-btn-wrapper .recommented-inline-btn:focus-visible {
	outline: 2px solid #60a5fa;
	outline-offset: 2px;
}

.bpbk-btn-wrapper .recommented-inline-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Icon inside the inline button — sized to sit next to the label without
   dominating. Uses currentColor via the SVG so it tints with the button's
   text color on hover / disabled / focus states. */
.bpbk-btn-wrapper .recommented-inline-btn .recommented-icon {
	width: 25px;
	height: 25px;
	flex: 0 0 auto;
	color: #59739ce5 !important;
}

/* When BP Bookmarks isn't on the page, the button also renders standalone.
   The existing `.recommented-action` block already spaces it below the post
   content — no additional rules needed. */

/* -----------------------------------------------------------------------
 * 1.3.2 — Settings auto-save confirmation toast
 *
 * Fired by showSettingsSavedToast() in recommented.js after every
 * auto-save. Sits at the exact center of the viewport (top:50%/left:50%
 * with a translate), high z-index so BuddyPress modals and theme headers
 * can't cover it, and pointer-events:none so it never intercepts clicks
 * that might land on it during the fade.
 *
 * Timing model:
 *   • JS inserts the element at opacity:1 (no transition applied yet).
 *   • JS adds `.is-fading` after 1000 ms. The CSS transition below then
 *     animates opacity from 1 → 0 over 1 s, matching the spec:
 *     "appears for 2 seconds, starts fading after 1 sec, opacity works
 *      for the next 2nd second until fully disappears."
 *   • JS removes the element after 2000 ms total.
 *
 * The `.is-error` variant re-tints the toast if the save fails so the
 * user gets clear feedback without a modal.
 * --------------------------------------------------------------------- */

.recommented-settings-toast {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 999999;

	/* Design spec — kept literal for auditability.
	   Updated in 1.3.3: background-color and border-radius refreshed. */
	color: #49622b;
	font-weight: 700;
	background-color: #e7eade;
	padding: 20px;
	border-radius: 15px;
	font-size: 18px;

	/* Fixed-viewport positioning niceties. */
	max-width: min(90vw, 480px);
	text-align: center;
	line-height: 1.4;
	white-space: normal;
	box-shadow: 0 6px 24px rgba(73, 98, 43, 0.15);

	opacity: 1;
	transition: opacity 1s ease-in-out;
	pointer-events: none;
}

/* Fade class added by JS after 1s. The transition rule above animates the
   change from opacity:1 → opacity:0 over 1s. */
.recommented-settings-toast.is-fading {
	opacity: 0;
}

/* Error variant — re-tinted red/orange so the same toast component can
   surface a failed save without a separate modal or alert. */
.recommented-settings-toast.is-error {
	color: #7f1d1d;
	background-color: rgba(220, 100, 100, 0.16);
	box-shadow: 0 6px 24px rgba(127, 29, 29, 0.15);
}

/* Respect reduced-motion preferences — jump-cut instead of animating,
   still respects the 2s total lifetime enforced by JS. */
@media (prefers-reduced-motion: reduce) {
	.recommented-settings-toast {
		transition: none;
	}
}

/* =====================================================================
 * 1.3.5 — Recommended Members subtab, member modal, and button states
 * ===================================================================== */

/* "Recommend this Member" profile button + free-text note textarea. */
.recommented-member-btn-wrap {
	margin: 18px 0 4px 0;
	clear: both;
}
.recommented-member-btn-wrap .recommented-open-member {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

/* Issue #2 — individual 15px size for the members opt-in label text. */
/* Primary opt-in label ("Allow …") — 15px on both the Recommended Posts and
   Recommended Members settings forms so they read identically (1.3.8). */
.recommented-settings .recommented-allow-text,
#recommented-members-settings .recommented-members-allow-text {
	font-size: 15px;
}

.recommented-member-note {
	width: 100%;
	height: 100px;
	resize: vertical;
	margin: 12px 0 0 0;
	padding: 8px 10px;
	box-sizing: border-box;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	font: inherit;
}

/* Read-only recipient rows (already-recommended review + any static list):
   no pointer cursor, no hover affordance. */
.recommented-friend-static {
	cursor: default;
}
.recommented-readonly .recommented-friend {
	cursor: default;
}

/* "Recommended!" done state on the front-end button. */
.recommented-open.recommented-done {
	opacity: 0.92;
}
.recommented-open.recommented-done .bpbk-btn-label {
	font-weight: 600;
}

/* Member recommendation cards — horizontal flex rows:
   avatar (75px) · name + note. */
.recommented-members-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 14px;
}

.recommented-member-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 12px 4px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.recommented-member-avatar {
	flex: 0 0 75px;
	line-height: 0;
}
.recommented-member-avatar img {
	width: 75px;
	height: 75px;
	border-radius: 50%;
	object-fit: cover;
}

.recommented-member-body {
	flex: 1 1 auto;
	min-width: 0;
}

h4.recommented-member-name {
	margin: 0;
}
.recommented-member-name {
	font-size: 1.02em;
	line-height: 1.2;
}

.recommented-member-by {
	margin: 0 0 6px 0;
	font-size: 0.82em;
	opacity: 0.7;
}

.recommented-member-note-text {
	margin: 0;
	white-space: pre-line;
	overflow-wrap: anywhere;
	font-size: 16px;
}

.recommented-member-card .recommented-member-remove {
	margin-top: 8px;
}