/* =============================================================================
   Contact plugin styles — v1.0.2
   - Horizontal icon row injected into BP profile header
   - Mobile: drops below username block
   - Show-only-if-allowed: no disabled/greyed states needed
   ========================================================================== */

:root {
	--contact-grey: #b5b5b5;
	--contact-green: #20c45c;
	--contact-pink: #ff5d8f;
	--contact-red: #d93b3b;
	--contact-text: #333;
	--contact-bg-card: #fafafa;
	--contact-border: #e5e5e5;
	--contact-radius: 8px;
	--contact-icon-size: 26px;
	--contact-icon-gap: 14px;
	--contact-group-gap: 22px;
}

/* =============================================================================
   1. Profile settings screen (the "Contact" tab content) — unchanged from 1.0.1
   ========================================================================== */

.contact-settings-wrap {
	font-size: 15px;
	color: var(--contact-text);
	max-width: 720px;
}
.contact-heading { font-size: 1.5rem; margin: 0 0 0.5rem; }
.contact-intro { color: #666; margin-bottom: 1.75rem; }

.contact-row {
	background: var(--contact-bg-card);
	border: 1px solid var(--contact-border);
	border-radius: var(--contact-radius);
	padding: 1.1rem 1.25rem 1.4rem;
	margin-bottom: 1.25rem;
}
.contact-row-label {
	display: inline-block;
	font-weight: 600;
	min-width: 60px;
	margin-right: 0.75rem;
}
.contact-field {
	display: inline-block;
	padding: 0.45rem 0.7rem;
	border: 1px solid var(--contact-border);
	border-radius: 4px;
	font-size: 15px;
	min-width: 220px;
	background: #fff;
}
.contact-field-readonly {
	background: transparent;
	border: 1px dashed var(--contact-border);
	color: #888;
	font-style: italic;
	font-size: 13px;
}
.contact-slider-wrap { margin-top: 1rem; position: relative; }
.contact-slider-label {
	font-size: 13px;
	font-weight: 600;
	color: #555;
	margin-bottom: 0.45rem;
	min-height: 1.2em;
}
.contact-slider-label.is-everyone { color: var(--contact-red); }

.contact-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	background: #d8d8d8;
	border-radius: 3px;
	outline: none;
	margin: 0;
	position: relative;
	z-index: 2;
}
.contact-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--contact-green);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,0.18);
	cursor: pointer;
}
.contact-slider::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--contact-green);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,0.18);
	cursor: pointer;
}
.contact-slider-ticks { position: relative; height: 0; margin-top: -3px; pointer-events: none; }
.contact-slider-ticks .tick {
	position: absolute;
	top: -8px;
	width: 2px;
	height: 12px;
	background: #999;
	border-radius: 1px;
}
.contact-slider-ticks .tick-0 { left: 0; }
.contact-slider-ticks .tick-1 { left: 33.3%; transform: translateX(-50%); }
.contact-slider-ticks .tick-2 { left: 66.6%; transform: translateX(-50%); }
.contact-slider-ticks .tick-3 { right: 0; }
.contact-slider-stops {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: #777;
	margin-top: 10px;
	gap: 4px;
}
.contact-slider-stops .stop { flex: 1; text-align: center; line-height: 1.2; }
.contact-slider-stops .stop:first-child { text-align: left; }
.contact-slider-stops .stop:last-child  { text-align: right; }
.contact-slider-stops .stop-everyone { color: var(--contact-red); font-weight: 600; }

.contact-member-types {
	margin-top: 0.9rem;
	padding: 0.6rem 0.8rem;
	background: #fff;
	border: 1px solid var(--contact-border);
	border-radius: 4px;
}
.contact-member-types[hidden] { display: none; }
.contact-member-types-label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #666;
	margin: 0 0 0.5rem;
}
.contact-types-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 0.35rem 1rem;
}
.contact-types-list label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 14px;
	cursor: pointer;
}
.contact-no-types { color: #999; font-size: 13px; margin: 0; }

.contact-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1.5rem;
}
.contact-save-btn {
	background: var(--contact-green);
	color: #fff;
	border: 0;
	border-radius: 4px;
	padding: 0.65rem 1.6rem;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.15s ease;
}
.contact-save-btn:hover { filter: brightness(0.92); }
.contact-save-btn:disabled { opacity: 0.6; cursor: wait; }
.contact-save-status { font-size: 13px; color: #555; }
.contact-save-status.is-success { color: var(--contact-green); }
.contact-save-status.is-error   { color: var(--contact-red); }

/* =============================================================================
   2. Frontend icon ROW (NEW in 1.0.2 — replaces vertical stack)
   ========================================================================== */

.contact-icon-row {
	display: flex;
	align-items: center;
	gap: var(--contact-group-gap);
	margin: 10px 0 4px;
	flex-wrap: wrap;
	/* Force own line within BP's #item-meta container so it sits cleanly
	   below the username/meta line rather than wrapping inline with text. */
	clear: both;
	width: 100%;
}

.contact-icon-group {
	display: flex;
	align-items: center;
	gap: var(--contact-icon-gap);
}

/* v1.0.6: mute group now sits INLINE with the channel icons as the fifth
   element in a centered row (per spec). The old margin-left:auto push-right
   rule is gone — channels + mute are one cohesive horizontal block. */
.contact-icon-group-mute {
	margin-left: 0;
	padding-left: 0;
}

.contact-icon {
	width: var(--contact-icon-size);
	height: var(--contact-icon-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--contact-grey);
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: none;
	transition: color 0.15s ease, transform 0.12s ease;
	position: relative;
	line-height: 0;
}
.contact-icon .contact-svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Channel icons (Call/Text/Video/Email) — green on hover */
.contact-icon-phone:hover,
.contact-icon-phone:focus-visible,
.contact-icon-text:hover,
.contact-icon-text:focus-visible,
.contact-icon-video:hover,
.contact-icon-video:focus-visible,
.contact-icon-email:hover,
.contact-icon-email:focus-visible {
	color: var(--contact-green);
	transform: scale(1.08);
	outline: none;
}

/* Mute button — pink on hover (active or not) */
.contact-icon-mute:hover,
.contact-icon-mute:focus-visible {
	color: var(--contact-pink);
	transform: scale(1.08);
	outline: none;
}

/* Active mute: slash visible, light grey baseline */
.contact-icon .mute-slash { display: none; }
.contact-icon-mute.is-active .mute-slash { display: inline; }
.contact-icon-mute.is-active { color: #ccc; }

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

/* Toast for mute/unmute confirmation */
.contact-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(20,20,20,0.92);
	color: #fff;
	padding: 0.65rem 1.1rem;
	border-radius: 6px;
	font-size: 14px;
	z-index: 9999;
	box-shadow: 0 4px 12px rgba(0,0,0,0.25);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.contact-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(-4px);
}

/* Modal (video-call fallback picker) */
.contact-modal-backdrop {
	position: fixed; inset: 0;
	background: rgba(0,0,0,0.55);
	z-index: 99999;
	display: flex; align-items: center; justify-content: center;
}
.contact-modal {
	background: #fff;
	padding: 1.3rem 1.5rem;
	border-radius: 10px;
	max-width: 340px;
	width: 90%;
	box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}
.contact-modal h3 { margin: 0 0 0.8rem; font-size: 1.1rem; }
.contact-modal-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.contact-modal-actions a {
	padding: 0.6rem 0.8rem;
	color: #fff;
	text-decoration: none;
	border-radius: 6px;
	text-align: center;
	font-weight: 500;
}
.contact-modal-actions .btn-whatsapp { background: #25d366; }
.contact-modal-actions .btn-telegram { background: #2aabee; }
.contact-modal-actions .btn-signal   { background: #3a76f0; }
.contact-modal-actions .btn-cancel {
	margin-top: 0.4rem;
	padding: 0.5rem;
	background: transparent;
	border: 1px solid #ccc;
	border-radius: 6px;
	cursor: pointer;
	color: #333;
}

/* =============================================================================
   3. Responsive — drop the icon row below the username block on narrow screens
   ========================================================================== */
@media (max-width: 768px) {
	.contact-icon-row {
		justify-content: center;
		gap: 18px;
		margin: 10px 0 14px;
	}
	.contact-icon-group { gap: 16px; }
	/* v1.0.6: no separator — mute flows inline with channels as one block. */
	.contact-icon-group-mute {
		margin-left: 0;
		padding-left: 0;
		border-left: none;
	}
}

@media (max-width: 480px) {
	:root { --contact-icon-size: 24px; }
	.contact-icon-row { gap: 14px; }
	.contact-icon-group { gap: 12px; }
}

/* =============================================================================
   4. Nav tab icon (FontAwesome envelope on the "Contact" profile tab)
   ---------------------------------------------------------------------------
   BP's wp_kses_data strips inline <i> tags from nav `name`, so the icon is
   rendered as a CSS `::before` pseudo-element keyed on item_css_id. Selectors
   are listed redundantly to cover Legacy / Nouveau / BuddyBoss LI shapes.
   Pattern borrowed from the reference Points/Gifts plugin.
   ========================================================================== */

#contact-profile-tab-personal-li > a::before,
#user-contact-profile-tab::before,
li[id^="contact-profile-tab"] > a::before,
li#contact-profile-tab::before,
li#contact-profile-tab > a::before {
	font-family: "Font Awesome 6 Free",
	             "Font Awesome 6 Pro",
	             "Font Awesome 5 Free",
	             "Font Awesome 5 Pro",
	             "FontAwesome";
	font-weight: 400; /* fa-regular */
	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: -1px;
	content: "\f0e0"; /* fa-regular fa-envelope */
}

/* =============================================================================
   5. Post Author card (under single posts)
   ========================================================================== */

.contact-post-author-card {
	background-color: #eaf0f442;
	border-radius: 10px;
	padding: 18px 22px;
	margin: 28px 0 24px;
	width: 100%;
	box-sizing: border-box;
}

.contact-post-author-title {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #6b7a8c;
	margin: 0 0 14px;
}

.contact-post-author-body {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	flex-wrap: nowrap;
}

.contact-post-author-avatar-wrap {
	flex: 0 0 150px;
	width: 150px;
}

.contact-post-author-avatar-link {
	display: block;
	line-height: 0;
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.15s ease;
}
.contact-post-author-avatar-link:hover { transform: scale(1.02); }

.contact-post-author-avatar {
	width: 150px;
	height: 150px;
	display: block;
	object-fit: cover;
}

.contact-post-author-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 4px;
}

.contact-post-author-name {
	font-size: 20px;
	font-weight: 700;
	color: #1a1a1a;
	text-decoration: none;
	line-height: 1.2;
}
.contact-post-author-name:hover,
.contact-post-author-name:focus-visible {
	color: var(--contact-green);
	text-decoration: none;
}

/* Reset the inner icon row when nested inside the post-author card so it
   doesn't inherit the profile-header alignment quirks. */
.contact-post-author-icons .contact-icon-row {
	margin: 4px 0 0;
	width: auto;
	clear: none;
}
.contact-post-author-icons .contact-icon-group-mute {
	/* v1.0.6: flow inline with channels (no separator/divider). The icon row's
	   own justify-content:center governs alignment within the card. */
	margin-left: 0;
	padding-left: 0;
	border-left: none;
}

/* Responsive: stack vertically on narrow screens */
@media (max-width: 600px) {
	.contact-post-author-body {
		flex-wrap: wrap;
		gap: 14px;
	}
	.contact-post-author-avatar-wrap {
		flex: 0 0 auto;
		width: 110px;
	}
	.contact-post-author-avatar {
		width: 110px;
		height: 110px;
	}
	.contact-post-author-info { padding-top: 0; }
}

/* =============================================================================
   6. v1.0.5 — Header icon row (now sibling-before action-buttons via JS reloc)
   ---------------------------------------------------------------------------
   JS moves the row to sit as the previous sibling of the action-buttons div
   (#item-actions / #item-buttons / etc.). Once placed there, the row is a
   block-level flex container. Horizontal enforcement preserved with
   !important because parent containers across BP/BuddyBoss themes vary in
   their flex direction.
   ========================================================================== */

.contact-icon-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	justify-content: center !important; /* v1.0.6: centered block per spec */
	gap: var(--contact-group-gap);
	margin: 8px 0 12px;
	flex-wrap: nowrap;
	width: 100%;
	clear: both;
}

/* v1.0.7: post-author card uses left-aligned icons (different visual context
   from the profile header per spec). Scoped override of the !important
   center rule above. */
.contact-post-author-icons .contact-icon-row {
	justify-content: flex-start !important;
	width: auto;
}

/* Once the row has been relocated by JS to the header position, give it a
   tiny visual breathing space from the action-buttons below. */
.contact-icon-row[data-relocate="header"][data-relocated="done"] {
	margin: 10px 0 14px;
}

.contact-icon-group-channels {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--contact-icon-gap);
}

/* On narrow screens we DO allow the whole row to wrap, but channels themselves
   stay together as a horizontal unit. */
@media (max-width: 480px) {
	.contact-icon-row {
		flex-wrap: wrap;
	}
}

/* =============================================================================
   7. v1.0.6 — Mute button (text label in BOTH states)
   ---------------------------------------------------------------------------
   v1.0.4 styled only the .is-active (muted) state as a text pill. v1.0.6
   makes both states text ("Mute Member" / "Unmute") so the pill styling
   applies to the base button. State differentiates by hover color only.
   ========================================================================== */

.contact-icon-mute {
	width: auto;
	min-width: 84px;
	height: auto;
	padding: 5px 12px;
	border-radius: 6px;
	background: #f4f6f8;
	border: 1px solid #d8e0e7;
	color: #555;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
	line-height: 1.4;
	white-space: nowrap;
}
.contact-icon-mute:hover,
.contact-icon-mute:focus-visible {
	color: var(--contact-pink);
	border-color: var(--contact-pink);
	background: #fff;
	transform: none; /* Suppress the scale used on the channel icon buttons. */
}
/* Muted state — subtly differentiated. The word "Unmute" is the same
   pill but with a slightly more "engaged" feel via the pink-tinted border. */
.contact-icon-mute.is-active {
	background: #fff;
	border-color: #e5c4d2;
	color: #b04b73;
}
.contact-icon-mute-label {
	display: inline-block;
	line-height: 1.4;
}

/* =============================================================================
   8. v1.0.4 — Custom mute confirmation popup
   ========================================================================== */

.contact-confirm-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(255, 255, 255, 0.5);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: contact-fade-in 0.18s ease-out;
}
@keyframes contact-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.contact-confirm-modal {
	background: #ffffff;
	border-radius: 12px;
	padding: 24px 28px 20px;
	max-width: 440px;
	width: calc(100% - 32px);
	box-shadow: 0 12px 40px rgba(20, 30, 50, 0.18),
	            0 2px 8px  rgba(20, 30, 50, 0.08);
	box-sizing: border-box;
	animation: contact-pop-in 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes contact-pop-in {
	from { opacity: 0; transform: scale(0.94); }
	to   { opacity: 1; transform: scale(1); }
}

.contact-confirm-title {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1.3;
}
.contact-confirm-message {
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 1.55;
	color: #444;
}

.contact-confirm-actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}
.contact-confirm-actions button {
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 0.55rem 1.2rem;
	border-radius: 6px;
	cursor: pointer;
	border: 0;
	transition: filter 0.15s ease, background 0.15s ease;
}
.contact-confirm-btn-cancel {
	background: transparent;
	border: 1px solid #ccd2d8 !important;
	color: #444;
}
.contact-confirm-btn-cancel:hover { background: #f4f6f8; }
.contact-confirm-btn-confirm {
	background: var(--contact-pink);
	color: #fff;
}
.contact-confirm-btn-confirm:hover { filter: brightness(0.93); }

/* =============================================================================
   v1.0.9 — Profile-header positioning (wide screens only)
   ---------------------------------------------------------------------------
   User-provided CSS, scoped here to be safe:
       div.contact-icon-row { margin: 10px 0px 10px 170px !important; }
       button.contact-icon.contact-icon-mute { margin: -5px 0 0px -15px; background: 0; }

   Isolation strategy:
     - Wrapped in @media (min-width: 768px) so mobile (<768px) is unaffected.
     - Both selectors qualified with [data-relocate="header"] so the rules
       fire ONLY on the BP profile-header row. The post-author card row
       does not carry that attribute, so its layout is untouched.
   ========================================================================== */
@media (min-width: 768px) {
	div.contact-icon-row[data-relocate="header"] {
		margin: 10px 0px 10px 170px !important;
		justify-content: flex-start !important;
		width: auto !important;
	}
	.contact-icon-row[data-relocate="header"] button.contact-icon.contact-icon-mute {
		margin: -5px 0 0px -15px;
		background: 0;
	}
}

/* =============================================================================
   v1.0.7 — Author name + badges row (post-author card)
   ---------------------------------------------------------------------------
   The display name and any badge plugins' output (Verified Member, ranks,
   roles, achievement icons) sit inline horizontally. Plugins typically emit
   small SVG/img badges; we align them vertically with the name baseline and
   give them just enough spacing.
   ========================================================================== */

.contact-post-author-name-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	line-height: 1.2;
}

.contact-post-author-badges {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1;
}

/* Common badge-plugin markup tends to be <img> / <svg> / <i class="fa-*"> /
   <span class="badge ..."> — apply a sensible default size for any direct
   child element so unfamiliar badges don't render at full image dimensions. */
.contact-post-author-badges > img,
.contact-post-author-badges > svg,
.contact-post-author-badges > i,
.contact-post-author-badges > span {
	max-height: 22px;
	width: auto;
	vertical-align: middle;
}
.contact-post-author-badges > a {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	text-decoration: none;
}
.contact-post-author-badges > a > img,
.contact-post-author-badges > a > svg,
.contact-post-author-badges > a > i {
	max-height: 22px;
	width: auto;
}