/**
 * Musaned Verified -- card styling for tier/pin matches.
 *
 * Tier styling (2026-09-14 follow-up) is based on the REAL design assets
 * supplied at ~/Downloads/verifications/: 5 card mockups (card-basic/
 * claimed/silver/gold/black.png) + 5 checkmark badge SVGs (checkmark-
 * claimed/silver/gold/black/blue.svg, copied into this plugin's own
 * assets/badges/). What the mockups actually show:
 *   - Basic:   no border, no badge at all (the plain/default look).
 *   - Claimed: no border -- just a small checkmark badge, no card outline.
 *   - Silver/Gold/Black: a colored card border/outline (silver #afafaf,
 *              gold #ddac00, black #292929 -- gold/black match this
 *              theme's own pre-existing --p-gold/--p-black CSS vars in
 *              style.css exactly, from the older, unrelated per-user
 *              membership_status/.p_{status} system) PLUS the same
 *              checkmark badge, colored to match.
 *   - Blue: no mockup card was supplied, only a checkmark SVG (#59a7c4)
 *           -- treated the same as Silver/Gold/Black (bordered + badge).
 * No mockup showed a background-color change, unlike the earlier
 * (now-superseded) Tanazul-ported styling -- border only.
 *
 * The badge itself renders inline right after the office name in
 * content-title.php (X/Twitter-style, per a 2026-09-14 follow-up --
 * originally placed on the avatar's corner instead, matching the
 * mockups literally) -- see .mv-badge below and content-title.php's
 * musaned_verified_get_tier() call. Dedicated class, not .badge-wrapper
 * itself, so unaffected by style.css's "Testing On" block that
 * force-hides .badge-wrapper/.p_silver/.p_gold/.p_black for that older,
 * still-dormant system.
 */

/* Base: any matched card gets a slightly elevated, "special" card so a
   plain unmatched listing still reads as the default/neutral option. */
.verified-tier .card,
.verified-fixed .card,
.verified-absolute .card {
	position: relative;
	overflow: visible;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	transition: border-color 0.15s ease;
}

/* Tier: Basic -- no border at all (card-basic.png). */

/* Tier: Claimed -- also no border (card-claimed.png); only the avatar
   checkmark badge below marks it. */

/* Tier: Silver (card-silver.png). Same color also applied to the card's
   own .card-icons footer bar (bottom icon row), per follow-up request --
   ties the icon row into the same tier color as the card border, at a
   lighter/translucent strength (rgba, not the full-strength hex) so the
   icon row stays legible rather than a heavy solid block of color. */
.verified-tier-silver .card {
	border: 3px solid #afafaf !important;
}

.verified-tier-silver .card-icons {
	background: rgba(175, 175, 175, 0.15);
}

/* Tier: Gold (card-gold.png) -- matches style.css's --p-gold exactly. */
.verified-tier-gold .card {
	border: 3px solid #ddac00 !important;
}

.verified-tier-gold .card-icons {
	background: rgba(221, 172, 0, 0.35);
}

/* Tier: Black (card-black.png) -- matches style.css's --p-black exactly. */
.verified-tier-black .card {
	border: 3px solid #292929 !important;
}

.verified-tier-black .card-icons {
	background: rgba(41, 41, 41, 0.45);
}

/* Tier: Blue -- no card mockup supplied, only the checkmark SVG; given
   the same bordered treatment as Silver/Gold/Black for consistency. */
.verified-tier-blue .card {
	border: 3px solid #59a7c4 !important;
}

.verified-tier-blue .card-icons {
	background: rgba(89, 167, 196, 0.35);
}

/* Fixed and Absolute pins deliberately do NOT change the card's own
   border color (2026-09-14 follow-up: "don't change border colors when
   it's in absolute (purple) or absolute+fixed (green)") -- a pinned card
   looks like any other card of its own tier (or a plain untiered card if
   it has none); the only visible marker for a pin is the "AD" tag next
   to the info-icon (Absolute) and/or the pro's own entry in the separate
   Fixed bottom bar (Fixed). */

/*
 * Tier checkmark badge -- rendered inline right after the office name
 * text (content-title.php, inside the <h5>), X/Twitter-style, rather
 * than floating over the card's or avatar's own corner like earlier
 * iterations of this styling did.
 */
.mv-badge {
	width: 16px;
	height: 16px;
	margin-inline-start: 4px;
	vertical-align: middle;
	pointer-events: none;
}

/* Absolute pins -- simplified per 2026-09-14 follow-up request: no more
   per-slot S/A/B/C letter ribbon (slot order still drives pin priority in
   musaned_verified_get_pinned_post_ids(), it's just no longer shown on the
   card itself). Instead, a plain "AD" tag renders next to the card's
   #info-icon (markup in content-singlecard.php), matching Tanazul's own
   "(AD)" tag placed next to its share button -- same idea, different
   anchor point since this card has no share-button-in-header of its own. */
.verified-absolute {
	position: relative;
}

.verified-ad-tag {
	position: absolute;
	left: 30px;
	top: 13px;
	padding: 0px 5px;
	color: #afafaf;
	font-size: 0.75rem;
	font-weight: 700;
}

/* Pro ID label shown next to the card's overlay close button (markup in
   content-singlecard.php) -- plain visible "#<id>" text, unrelated to the
   verified tier/pin system itself but requested alongside it. */
.card-pro-id {
	position: absolute;
	/* .close_overlay (style.css) is positioned with physical `left`, not a
	   logical inline-start/end property, despite this being an RTL-first
	   site -- matching that same physical-left coordinate system here
	   (instead of inset-inline-*) is what actually keeps this badge
	   visually next to the close icon rather than on the opposite side. */
	left: 35px;
	top: 13px;
	font-size: 0.75rem;
	font-weight: 600;
	color: #afafaf;
	padding: 0px 5px;
	pointer-events: none;
}

/* Fixed pin bar -- permanent 3-column bar fixed to the bottom of the
   viewport (musaned_verified_render_fixed_bar() in musaned-verified.php).
   Structure/values mirror this theme's OWN comparison bar as closely as
   possible (see style.css: .comparison / .cmp-column / .close_compare),
   since that's the exact "3 cards fixed at the bottom" pattern already
   built and proven on this site -- deliberately not a fresh design. */
.musaned-fixed-bar {
	width: 100%;
	position: fixed;
	bottom: 0;
	z-index: 1050;
	/* just under .comparison's 2000, so opening Compare stays on top if both are visible */
	padding: 0.75rem 0;
}

/* Blur/opacity/rounding moved here (onto the inner .container) rather
   than the full-width outer .musaned-fixed-bar, per follow-up request --
   keeps the translucent panel sized to the content instead of spanning
   edge-to-edge. */
.musaned-fixed-bar__container.container {
	backdrop-filter: blur(2px);
	background: rgba(248, 249, 250, 0.35);
	border-radius: 5px;
}

.musaned-fixed-bar__column {
	padding: 0.5rem;
}

.musaned-fixed-bar__card {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--border-color-dark, #dcdfe4);
	border-radius: 8px;
	padding: 10px 12px;
	background: rgba(255, 255, 255, 0.85);
	position: relative;
}

.musaned-fixed-bar__link {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-grow: 1;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}

/* WhatsApp icon, positioned on the left -- replaces the old plain-text
   CTA label ("عرض المكتب") per the 2026-09-14 follow-up request. Uses the
   same physical `left` coordinate convention as .close_overlay/.card-pro-id
   above rather than a logical inline-start/end property. */
.musaned-fixed-bar__whatsapp {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-shrink: 0;
	color: #2e7d5b;
	/* inline SVG (theme's inc/icons.php) uses currentColor */
}

.musaned-fixed-bar__card:has(.musaned-fixed-bar__whatsapp) .musaned-fixed-bar__link {
	padding-left: 34px;
	/* room for the absolutely-positioned WhatsApp icon */
}

.musaned-fixed-bar__logo {
	border-radius: 6px;
	object-fit: cover;
	flex-shrink: 0;
}

.musaned-fixed-bar__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	min-width: 0;
}

.musaned-fixed-bar__name {
	font-weight: 700;
	font-size: 0.85rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.musaned-fixed-bar__description {
	font-size: 0.75rem;
	color: #666;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 767px) {
	.musaned-fixed-bar__row {
		flex-direction: column;
	}
}