/*
	Theme Name: Musanedpro
	Author: SC
	Version: 1.0.0
	Text Domain: musanedpro
	Description: Standalone custom theme for musanedpro (formerly "Child Theme" on parent hello-elementor). Elementor is no longer used anywhere on this site, so the parent-theme dependency was removed -- see CLAUDE.md for the full migration notes.
*/


/* Legacy per-user membership badge system (.p_silver/.p_gold/.p_black,
   .badge-wrapper) is superseded by Musaned Verified's own tier system
   (verified-tier-* classes below) but still wired into several templates
   -- suppressed here rather than removed until that old system is
   formally retired everywhere it's still coded. See the redesign plan's
   "badge system" note. */
.p_silver,
.p_gold,
.p_black {
	display: none !important;
}

.badge-wrapper {
	display: none !important;
}

.row {
	justify-content: center;
}

.musaned-header {
	background: var(--light-color);
	border: 1px solid var(--border-color);
	border-radius: calc(var(--border-radius) * 2);
	padding: 1.5rem 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.musaned-header h1 {
	text-align: center;
}

.musaned-header h1 a {
	color: var(--secondary-color-dark);
	text-decoration: none;
}

hr.ms_divider {
	width: 80%;
	height: 1px;
	border: 0;
	background: linear-gradient(to right, #eaeaea, #afafaf, #eaeaea);
}

/* Map page (/map/) chrome: .musaned-map-toggle / #musaned-map / the pin
   popup styling belong to the musaned-map plugin's own stylesheet
   (wp-content/plugins/musaned-map/assets/map.css) -- a real, working
   Leaflet integration with JS bound to these exact selectors -- not to
   this theme file. An earlier pass in this session wrongly assumed no
   map implementation existed and duplicated these selectors here; that
   CSS is removed. The token/palette update those plugin rules needed to
   match this redesign was made in map.css itself, not here. .musaned-header
   is shared with page-listing.php's card treatment already, so no
   separate rule is needed for this page's title block either.
   See the redesign plan's map-page note for the corrected record. */

/* Homepage search + filter row: one bordered surface instead of controls
   floating loose on the page background -- see the surface brief's
   Direction contract. All child element IDs/classes that custom.js binds
   to (select2 init, mobile dropdown reflow, AJAX filter reads) are
   untouched; this only adds a container treatment + spacing. */
.musaned-filter-bar {
	background: var(--light-color);
	border: 1px solid var(--border-color);
	border-radius: calc(var(--border-radius) * 2);
	padding: 1.25rem 1rem;
	margin-bottom: 1.5rem !important;
}

/* Sponsored-content framing for the Musaned Ads placements -- a labeled,
   bordered slot instead of raw stacked shortcode output, so ads read as
   clearly distinct from the directory grid and from each other. */
.musaned-ad-slot {
	position: relative;
	margin: 1.5rem 0;
	padding: 1.5rem 1rem 1rem;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
}

/* Each placement shortcode returns an empty string when it has nothing
   configured to show, leaving only the label span -- hide the whole slot
   (border + label included) rather than showing an empty framed box. */
.musaned-ad-slot:has(> .musaned-ad-slot__label:only-child) {
	display: none;
}

.musaned-ad-slot__label {
	position: absolute;
	top: -0.65rem;
	right: 1rem;
	background: var(--light-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	padding: 0.1rem 0.6rem;
	font-size: 0.7rem;
	color: var(--border-color-dark);
	letter-spacing: 0.02em;
}





@font-face {
	font-family: "blfont";
	src: url("/media/NeoSansArabic-Light.woff2");
	font-weight: 300;
}

@font-face {
	font-family: "blfont";
	src: url("/media/NeoSansArabic.woff2");
	font-weight: 400;
}

@font-face {
	font-family: "blfont";
	src: url("/media/NeoSansArabic-Medium.woff2");
	font-weight: 600;
}


:root {
	--primary-color: #59A7C4;
	--primary-color-light: #80BBD8;
	--border-color: #D4D4D4;
	--border-color-dark: #AFAFAF;
	--border-radius: 4px;
	--background-color: #EEEEEE;
	--light-color: #FAFAFA;
	--secondary-color: #404040;
	--secondary-color-dark: #1A1A1A;

	--p-claimed: #909090;
	--p-silver: #909090;
	--p-gold: #ddac00;
	--p-black: #292929;
}


h1,
h2,
h2,
h3,
h4,
h5,
h6 {
	font-family: "blfont" !important;
	font-weight: 600 !important;
}


h1 {
	font-size: 2rem !important;
}

h2 {
	font-size: 1.75rem !important;
}

h3 {
	font-size: 1.5rem !important;
}

h4 {
	font-size: 1.25rem !important;
}

h5 {
	font-size: 1rem !important;
}

h6 {
	font-size: .85rem !important;
}


p,
a {
	font-family: "blfont" !important;
	font-weight: 400 !important;
}

body {
	font-family: "blfont" !important;
}

a {
	color: #1A1A1A !important;
}

a:hover {
	text-decoration: none;
}



.btn-primary {
	background: var(--border-color);
	border: 1px solid var(--border-color);
}

.comparison-whatsapp {
	background: #59a7c4 !important;
	border: 1px solid var(--border-color);
}

.btn {
	border: 1px solid var(--border-color-dark);
	border-radius: 0.25rem;
	padding: .5rem 2rem;
}

.btn:hover {
	background: var(--background-color);
	border: 1px solid var(--border-color-dark);
}

/* .btn-close added to both :not() lists (2026-09-15): this broad button
   reset was also catching Bootstrap's modal close button (a real
   <button type="button">), forcing a solid dark background over its
   transparent-background SVG X icon -- rendered as a solid black square
   instead of a visible close glyph. Found via a real browser test while
   fixing the header quickbutton popups. The --bs-btn-close-opacity line
   already hinted whoever wrote this knew .btn-close matched here, but
   only patched opacity, not the background/color/border that actually
   hid the icon. */
[type=button]:not(.select2-selection__choice__remove, .accordion-button, .accordion-toggler, .btn-close),
[type=submit],
button:not(.accordion-button, .select2-selection__choice__remove, .btn-close) {
	background: var(--secondary-color-dark) !important;
	color: #fff !important;
	border: 1px solid var(--border-color-dark) !important;
	--bs-btn-close-opacity: 1 !important;
}


/* .hide-tags gets toggled by custom.js's select2 change handler when a
   filter has 1+ selections -- CSS-hides the real tag <li> pills (kept in
   the DOM, not removed) and shows "تحديد" as generated content instead
   of custom.js writing text directly into this element, which used to
   replace ALL of its children (including select2's own empty-state
   placeholder/search-box rendering) any time it ran, even with nothing
   selected -- see custom.js's initializeSelect2() for the full story. */
.select2-selection__rendered.hide-tags li {
	display: none;
}

.select2-selection__rendered.hide-tags::after {
	content: "تحديد";
	line-height: 26px;
}

.select2-selection__rendered.hide-tags {
	/* Was `right: 40px !important` with no `left`, so this box's width
	   was purely content-fit (padding + floated clear icon) while still
	   anchored 40px from the container's right edge -- on a ~238px-wide
	   filter that pushed its left edge ~38px past the filter's own left
	   border, and .select2-selection--multiple's overflow:hidden (below)
	   hard-clipped it there. Rendered as a narrow gray pill with a hard
	   cut edge and the clear "x" stuck mid-box instead of at a clean
	   edge (confirmed with a real browser + measured getBoundingClientRect:
	   rendered box left=102 vs. container left=141). Anchoring both
	   `right`/`left` to the same 15px inset the search-box placeholder
	   state already uses (below) makes this state span the same box the
	   unselected placeholder does, so it can't overflow.
	   Background dropped to transparent -- solid var(--border-color) was
	   only ever needed to visually paper over that overflow clipping,
	   and now looks like a stray floating chip instead of the same
	   control. justify-content:center on this flex row reproduces the
	   old visually-centered text now that the floated clear icon is
	   pulled out of flow (see .select2-selection__clear override
	   below) instead of consuming inline space next to it. */
	padding: 0px 15px !important;
	background-color: transparent;
	right: 15px !important;
	left: 15px !important;
	position: absolute;
	top: 5px;
	/* !important on display/width specifically: select2's own CDN
	   stylesheet (functions.php enqueues it AFTER this file, so it wins
	   ties) sets `display:inline-block` and `width:100%` on
	   `.select2-selection--multiple .select2-selection__rendered` --
	   also 2 classes deep, same specificity as this selector, and later
	   in source order wins a tie. Confirmed via computed styles in a
	   real browser: without !important here, display stayed "block" and
	   width stayed content-fit (236px) despite this rule, silently
	   undoing the right/left-anchored sizing above. */
	display: flex !important;
	width: auto !important;
	align-items: center;
	justify-content: center;
	/* .select2-selection__rendered's own height:0!important (further
	   below, 3 chained class selectors) otherwise beats this rule's
	   lower specificity even with !important on both -- CSS resolves
	   competing !important declarations by specificity, not source
	   order. That zero height clipped this "تحديد" pseudo-element's
	   painted text inside .select2-selection--multiple's
	   overflow:hidden, even though the box itself was correctly
	   positioned in view (confirmed with a real browser: the element's
	   own bounding rect and the pseudo's `content` value were both
	   correct, but nothing painted). The extra chained selector below
	   matches that specificity to actually win. */
}

/* Pulled out of the default float:right flow (which floated it right
   inside the now content-fit-width box, contributing to the clipping
   above) and pinned to this box's own right edge instead -- reads
   cleanly at any filter width since it's independent of the centered
   "تحديد" text's own width. */
.select2-selection__rendered.hide-tags .select2-selection__clear {
	float: none;
	margin: 0;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}


.select2-container .select2-selection--multiple {
	min-height: 36px;
	max-height: 36px;
	overflow: hidden;
}


body {
	direction: rtl;
	text-align: right;
}

.business-logo {
	width: 50px;
	height: 50px;
	max-width: 50px;
	max-height: 50px;
	object-fit: contain;
	margin-left: 10px;
	border-radius: 100%;
	border: 1px solid var(--border-color-dark);
}

.listing-header {
	border-bottom: 1px solid var(--background-color);
	padding: 1.5rem 1rem 1rem;
}

.services {
	padding: 0;
	height: 300px;
	overflow-y: scroll;
}

.services::-webkit-scrollbar {
	width: 5px;
	border-radius: 5px;
}

.services::-webkit-scrollbar-thumb {
	background-color: #afafaf;
	border-radius: 20px;
	border: 3px solid #afafaf;
}

.services::-webkit-scrollbar-track {
	background-color: #fafafa;
}


.nationality-flags {
	border-bottom: 1px solid var(--background-color);
	padding: 1rem;
	display: flex;
	overflow-x: scroll;
}

.nationality-flags img {
	cursor: pointer;
	border: 1px solid #afafaf;
	border-radius: 2px;
	margin: 0 4px;
	min-height: 22px;
	min-width: 36px;
}

.occupations-flags {
	/*border-bottom: 1px solid var(--border-color);*/
	padding: .5rem 1.25rem;
	display: flex;
}

.nationality-flags .skeleton-anim {
	min-width: 40px;
	margin: 0 4px;
}

.occupations-flags img {
	cursor: pointer;
	border: 1px solid #afafaf;
	border-radius: 100%;
	margin: 0 4px;
	width: 32px;
	height: 32px;
}

.occupations-flags .skeleton-anim {
	min-width: 32px;
	min-height: 32px;
	margin: 0 4px;
	border-radius: 100%;
}

/* 31 Oct by MA */

.filter-wrapper {
	margin: auto;
}

.nationality-flags a {
	padding: 3px 0px;
	border-radius: 5px;
}

.nationality-flags a:hover {
	background: var(--background-color);
}

.occupations-flags a {
	padding: 5px 1px;
	border-radius: 100%;
	min-width: max-content;
}

.occupations-flags a:hover {
	background: var(--background-color);
}

/**/


.city-name {
	cursor: pointer;
}


#listingModal {
	top: 10%;
}

button.close {
	margin: 0 !important;
	opacity: 1;
	width: 30px;
	height: 30px;
	padding: 0 !important;
	font-size: 30px;
}


.search-wrapper {
	display: flex;
}

.search-wrapper input {
	/* Live/debounced search (custom.js) replaced the submit button, so this
	   is the only element in the wrapper now -- rounded on both sides. */
	border-radius: 4px !important;
	border: 1px solid var(--border-color-dark) !important;
}



.filters {
	display: flex;
	align-items: center;
}

/*
.more-filters {
    margin-right: auto;
}
*/
a#moreFiltersDropdown {
	margin-left: .5rem;
	cursor: pointer;
}

.more-filters .dropdown-menu {
	width: max-content;
}

.dropdown-menu li:not(:last-child) {
	margin-bottom: .8rem;
}

.filters .select2 {
	max-width: max-content;
	min-width: 100%;
}


.filters-list .filter-wrapper {
	min-width: 22%;
	width: 22%;
	display: none;
}

#clear-filters {
	cursor: pointer;
	padding: 5px;
	width: 35px;
	height: 35px;
	border: 1px solid #afafaf;
	border-radius: 4px;
	color: #afafaf;
	/* inline SVG (inc/icons.php) uses currentColor */
}

#sort-filters {
	margin-left: .5rem;
}

#sort-filters label {
	border: 1px solid var(--border-color);
	cursor: pointer;
	background: var(--light-color);
	padding: .5rem;
}

#sort-filters label.active {
	background-color: var(--border-color-dark);
	border: 1px solid var(--border-color-dark);
}

.sort-filter .dropdown-menu {
	width: max-content;
	inset: 0px auto auto auto !important;
}

.sort-icon-label {
	cursor: pointer;
	color: #afafaf;
	/* inline SVG (inc/icons.php) uses currentColor */
}

#filters-wrapper .select2-dropdown--below {
	border-top: 1px solid var(--border-color);
	max-height: 100px;
}

.filters .select2-selection {
	border: 1px solid var(--border-color);
	cursor: pointer;
	border-radius: var(--border-radius);

}

.filters textarea {
	font-weight: 600 !important;
	color: #000;
}

.filters-list {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	margin: auto;
	place-items: center;
	justify-content: center;
	width: 100%;
	left: 0;
	right: 0;
	text-align-last: center;
}

.title-wrapper {
	/*overflow: hidden;*/
	width: 100%;
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}

.card-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	margin: 0;
	min-width: 140px;
}

.sub-title-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.city-wrapper {
	display: flex;
	width: max-content;
	align-items: center;
}

.city-wrapper.skeleton-anim {
	min-width: 50px;
}


.stars {
	display: inline-block;
	font-size: 22px;
	line-height: 20px;
}

.star {
	color: #DA9A09;
	font-size: 20px;
	display: inline-block;
	position: relative;
}

.star.full {
	color: #DA9A09;
	/* Full star color */
}

.star.half::after {
	content: '\2605';
	position: absolute;
	left: 0;
	top: 0;
	color: transparent;
	background: linear-gradient(90deg, #DA9A09 52%, #ddd 52%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.star.empty {
	color: #ddd;
}

.rating-wrapper {
	font-size: 16px;
}

/* === Remove Later
span.dot {
	display: inline-flex;
	margin: 3%;
	background: #999;
	width: 12px;
	height: 10px;
	border-radius: 50px;
	margin-left: 8px;
}

span.dot.active{
	background: #24c524;
}
*/

.l-info-icon {
	cursor: pointer;
	position: absolute;
	left: 10px;
	top: 10px;
	color: #afafaf;
	/* inline SVG (inc/icons.php) uses currentColor */
}

.status-icon {
	margin-left: 8px;
	margin-top: 2px;
}

/* Musaned platform performance/review data (single-listing.php) */
.musaned-performance-panel {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.performance-block {
	flex: 1 1 320px;
	background: var(--light-color);
	border: 1px solid var(--border-color);
	border-radius: calc(var(--border-radius) * 2);
	padding: 1.25rem 1.5rem;
}

.performance-block-title {
	margin: 0 0 1rem;
	font-size: 1rem;
	font-weight: 700;
}

.performance-stats-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.performance-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 90px;
}

.performance-stat-value {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--primary-color);
}

.performance-stat-label {
	font-size: 0.8rem;
	color: var(--secondary-color);
	text-align: center;
}

.performance-review-stars {
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.performance-review-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.performance-review-label {
	font-size: 0.85rem;
	color: var(--secondary-color);
	flex: 1;
}

.stars.small .star {
	font-size: 14px;
}

.performance-review-value {
	font-size: 0.85rem;
	font-weight: 700;
	min-width: 24px;
	text-align: center;
}

.performance-review-count {
	font-size: 0.75rem;
	color: var(--border-color-dark);
	white-space: nowrap;
}

/* Lightweight confirmation toast (custom.js) -- used where an action needs
   feedback but the page has no dedicated widget to update in place, e.g.
   "add to compare" on single-listing.php, which has no comparison bar. */
.musaned-toast {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	background: var(--secondary-color-dark);
	color: #fff;
	padding: .6rem 1.25rem;
	border-radius: 999px;
	font-size: .85rem;
	opacity: 0;
	transition: opacity .25s ease, transform .25s ease;
	z-index: 2000;
	pointer-events: none;
}

.musaned-toast.visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* "Why choose this office" trust-summary box (single-listing.php) */
.trust-summary-box {
	background: #F2F8FA;
	border: 1px solid var(--primary-color-light);
	border-radius: calc(var(--border-radius) * 2);
	padding: 1rem 1.25rem;
	margin-top: 1.25rem;
	text-align: right;
}

.trust-summary-title {
	margin: 0 0 .6rem;
	font-size: .95rem;
	font-weight: 700;
	color: var(--primary-color);
}

.trust-summary-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.trust-summary-list li {
	font-size: .85rem;
	color: var(--secondary-color-dark);
	padding-right: 1.4rem;
	position: relative;
}

/* Renamed from the generic Bootstrap ".text-center" (2026-09-15 follow-up)
   so the "تكاليف الاستقدام" button wrapper has its own stable selector to
   anchor other elements against, now that the trust-summary box/established
   badge sit directly above it. */
.pricing-text-center {
	text-align: center;
}

/* Icon + number only, moved into .single-header-utility (2026-09-16
   follow-up) -- centered via absolute positioning within that row rather
   than flex order, since justify-content:space-between doesn't put a 3rd
   middle child at the row's true center when the two outer items (the
   #pro-id tag, the share button) aren't equal width. This is a contained,
   self-referential position:absolute (top/left relative to
   .single-header-utility's own box) -- not the old straddling-the-card-
   border technique .single-header-utility itself replaced, see the comment
   above that class. Full "شوهد هذا الملف N مرة" text shows via the
   [data-tooltip] hover pill below (see .single-header-utility
   [data-tooltip] rules further down), same as #listingID/#shareDropdown. */
.listing-view-count {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: .8rem;
	color: var(--secondary-color);
	cursor: default;
}

.listing-view-count svg {
	flex-shrink: 0;
}

/* Hover tooltip for the 3 .single-header-utility controls (#listingID,
   .listing-view-count, #shareDropdown) -- same dark-pill-below-the-element
   look as .musaned-quickbutton::after (masthead buttons), but keyed off a
   plain data-tooltip attribute instead of aria-label, since these already
   have their own aria-label/visible text serving a different purpose. */
/* :not(.listing-view-count) -- that element already sets its own
   position:absolute (for centering, see its own rule above) with lower
   specificity than this selector; without the exclusion, this rule's
   "position: relative" would win and silently break the centering. */
.single-header-utility [data-tooltip]:not(.listing-view-count) {
	position: relative;
}

.single-header-utility [data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	right: 50%;
	transform: translateX(50%) translateY(4px);
	white-space: nowrap;
	background: var(--secondary-color-dark);
	color: #fff;
	font-size: 0.75rem;
	padding: 4px 10px;
	border-radius: var(--border-radius);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 5;
}

.single-header-utility [data-tooltip]:hover::after,
.single-header-utility [data-tooltip]:focus-visible::after {
	opacity: 1;
	transform: translateX(50%) translateY(0);
}

.trust-summary-list li::before {
	content: '✓';
	position: absolute;
	right: 0;
	color: var(--primary-color);
	font-weight: 700;
}

/* Suspension banner, name subtitle, 12-month trend, feature badges
   (single-listing.php) */
.suspension-banner {
	background: #FDECEA;
	color: #C62828;
	border: 1px solid #F5C6C0;
	border-radius: var(--border-radius);
	padding: 0.6rem 1rem;
	font-size: 0.85rem;
	font-weight: 600;
	text-align: center;
	margin-bottom: 1rem;
}

.single-title-en {
	color: var(--border-color-dark);
	font-size: 0.9rem;
	margin-top: -0.5rem;
	margin-bottom: 0.5rem;
}

.rating-12-month {
	font-size: 0.8rem;
	color: var(--secondary-color);
	margin: 0.25rem 0 0.75rem;
}

.feature-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.75rem 0;
	justify-content: center;
}

.feature-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: var(--light-color);
	border: 1px solid var(--border-color);
	color: var(--secondary-color-dark);
	text-decoration: none;
}

.feature-badge-featured {
	background: #FFF8E1;
	border-color: #F0D48A;
	color: #8A6100;
}

.feature-badge-edit,
.feature-badge-delete {
	display: inline-flex;
	opacity: .6;
	cursor: pointer;
}

.feature-badge-edit:hover,
.feature-badge-delete:hover {
	opacity: 1;
}

.feature-badge-action {
	font-size: 0.75rem;
	padding: 0.3rem 0.7rem;
}

.trust-summary-list li .trust-point-edit,
.trust-summary-list li .trust-point-delete {
	display: inline-flex;
	opacity: .55;
	cursor: pointer;
	margin-right: .35rem;
	vertical-align: middle;
}

.trust-summary-list li .trust-point-edit:hover,
.trust-summary-list li .trust-point-delete:hover {
	opacity: 1;
}

.trust-summary-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: .75rem;
	padding-top: .6rem;
	border-top: 1px dashed var(--primary-color-light);
}

.trust-summary-actions .edit-icon {
	font-size: .75rem;
}

/* Contract-application outcome breakdown bar */
.outcome-bar {
	display: flex;
	width: 100%;
	height: 12px;
	border-radius: 999px;
	overflow: hidden;
	background: var(--background-color);
}

.outcome-bar-segment {
	height: 100%;
}

.outcome-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	margin-top: 0.85rem;
	font-size: 0.8rem;
	color: var(--secondary-color);
}

.outcome-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.outcome-legend-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	display: inline-block;
}

/* Male-worker recruitment quota bar */
.quota-bar-track {
	width: 100%;
	height: 10px;
	border-radius: 999px;
	background: var(--background-color);
	overflow: hidden;
}

.quota-bar-fill {
	height: 100%;
	background: var(--primary-color);
	border-radius: 999px;
}

.quota-caption {
	margin-top: 0.6rem;
	font-size: 0.8rem;
	color: var(--secondary-color);
}

/* Official registration info / Saudi National Address lists */
.registration-info-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.registration-info-list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	font-size: 0.85rem;
	border-bottom: 1px dashed var(--border-color);
	padding-bottom: 0.5rem;
}

.registration-info-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.registration-info-list li span {
	color: var(--secondary-color);
}

.registration-info-list li strong {
	font-weight: 700;
	text-align: left;
}

#listing-container .card-body {
	padding: 0;
	height: 250px;
}

/* Featured/Nearby/Other Offices cards (single-listing.php,
   musaned_render_listing_cards_row()) use a minimal card (content-
   relatedcard.php: logo/title/city/stars + a "See more" link -- no flag
   rows or action icon bar, per 2026-09-15 follow-up) reusing the same
   .card/.listing-header/.city-wrapper/.title-wrapper classes as the full
   homepage card. That markup is nested inside .single-listing for the
   first time here -- which already has several rules scoped to style THIS
   page's own header identity block and its "تكاليف الاستقدام" quick-view
   modal (#listingModal, whose injected markup also uses .listing-header/
   .city-wrapper -- see load_listing_details_ajax() in functions.php).
   Those rules unintentionally also matched the reused card's same class
   names, breaking its layout (title-wrapper forced into a column,
   listing-header forced into a bordered flex row that overflowed the
   card). .related-offices-grid resets each of those properties back to
   their un-scoped, homepage-identical values. */
.single-listing .related-offices-grid .card {
	align-items: stretch;
}

.single-listing .related-offices-grid .card-body {
	padding: 1rem;
	height: auto;
}

.single-listing .related-offices-grid .title-wrapper {
	width: 100%;
	flex-direction: row;
}

.single-listing .related-offices-grid .listing-header {
	display: block;
	border: 0;
	column-gap: normal;
}

.single-listing .related-offices-grid .city-wrapper {
	width: max-content;
	justify-content: flex-start;
}

/* .single-listing .business-logo (100px) is sized for THIS page's own big
   header avatar -- reset back to the plain 50px .business-logo look here
   so a related-office's real logo matches the .image_placeholder span's
   size (50px, unaffected by that header-scoped rule) instead of ballooning
   past it. */
.single-listing .related-offices-grid .business-logo {
	width: 50px;
	height: 50px;
	max-width: 50px;
	min-height: 0;
	padding: 0;
	margin-top: 0;
	object-fit: contain;
}

.related-office-more {
	display: block;
	text-align: center;
	padding: .6rem;
	border-top: 1px solid var(--border-color);
	color: var(--primary-color);
	font-weight: 600;
	font-size: .9rem;
}

.related-office-more:hover {
	background: var(--light-color);
	color: var(--primary-color);
}

.hscroll {
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
}

.hscroll::-webkit-scrollbar {
	width: 4px;
	height: 4px;
	border-radius: 4px;
}

.hscroll::-webkit-scrollbar-thumb {
	background-color: var(--light-color);
	border-radius: 20px;
	border: 3px solid var(--border-color);
}

.hscroll::-webkit-scrollbar-track {
	background: var(--light-color);
}

.card-icons {
	display: flex;
	align-items: center;
	border: 1px solid var(--border-color);
	margin-top: 1rem;
	justify-content: center;
	height: 40px;
	border-radius: 0 0 5px 5px;
}

.card-icons>a {
	padding: 0.3rem;
	width: 25%;
	text-align: center;
	/* border: 1px solid var(--border-color); */
	box-sizing: border-box;
	cursor: pointer;
	border-radius: 4px;
	/* Icons are inline SVG using fill/stroke: currentColor (inc/icons.php)
	   -- this sets their visible color; same dark shade the old static
	   icon files used, so this is a like-for-like swap, not a new look. */
	color: #292929;
}

.card-icons>a:hover {
	/* Lighten in place on hover -- opacity, not a background-color swap,
	   so a tier-tinted .card-icons bar (musaned-verified.css) keeps its
	   own color on hover instead of flashing to an unrelated gray. */
	opacity: 0.7;
}

.card-icons img,
.card-icons svg {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.card-icons .skeleton-anim {
	margin: auto;
	padding: 0.2rem;
	width: 50px;
}

.card {
	border: 1px solid var(--border-color-dark);
}

.card:hover {
	border: 1px solid #afafaf;
	background: #fafafa;
}

.card-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--light-color);
	border-radius: 0.5rem;
	display: none;
	z-index: 5;
	text-align: center;
	padding: 1rem;
	opacity: 0;
	align-content: center;
	transition: opacity 1s ease-in-out;
}

.active .card-overlay {
	display: block;
	opacity: 1;
}

.close_overlay {
	cursor: pointer;
	position: absolute;
	left: 6px;
	top: 6px;
	z-index: 1;
	color: #afafaf;
	/* inline SVG (inc/icons.php) uses currentColor */
}

.share-icons {
	display: flex;
	gap: .8rem;
	position: absolute;
	top: 10px;
	right: 10px;
	color: #292929;
	/* inline SVG (inc/icons.php) uses currentColor */
}

.modal-title {
	margin: 0 auto;
}

#listingModal .modal-body {
	padding: 0;
}

/*
#listingModal .service-item {
    display: flex;
	width: 100%;
}

#listingModal .service-item > div {
    border: 1px solid var(--border-color);
	width: 20%;
	text-align: center;
}
*/

.services td,
.services th {
	white-space: nowrap;
}

#listingModal .service-item>.service-period {
	width: 50px;
}

.service-item.header>div {
	font-weight: 600;
}

#listingModal .modal-dialog {
	max-width: 700px;
}



@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}


.active .card-overlay {
	animation: fadeIn 1s forwards;
}

.inactive .card-overlay {
	animation: fadeOut 1s forwards;
}


h1.single-title {
	padding-top: 1rem !important;
	font-size: 1.5rem !important;
	margin: 0;
}

/* .mv-badge (musaned-verified.css) is sized for the 0.85-1rem listing
   card title -- scale it up slightly to stay legible at this page's
   larger 1.5rem heading. */
h1.single-title .mv-badge {
	width: 22px;
	height: 22px;
}


.single-listing-form .btn {
	width: 175px;
}

.whatsapp-comparison img {
	padding-right: 10px;
}

.single-listing .business-logo {
	border-radius: 50%;
	padding: 2px;
	/* Was margin-top:-4rem, making the avatar "poke" above the card's top
	   border -- on mobile this directly overlapped .single-header-utility
	   above it (the pro-id tag/edit link/share button), a real collision
	   confirmed with a real browser. Sits in normal flow now. */
	margin-top: .5rem;
	width: 100px;
	height: 100px;
	border: 1px solid var(--border-color-dark);
	background-color: #fff;
	min-height: 100px;
	max-width: 100px;
	object-fit: cover;
}

.single-listing .occupations-flags,
.single-listing .nationality-flags {
	border: 0;
	padding: 0;
	overflow: hidden;
	flex-wrap: wrap;
	justify-content: center;
}

.single-listing .card {
	text-align: center;
	align-items: center;
	border-radius: 0.25rem;
	position: relative;

}

.single-listing .card .card-img-top {
	margin-top: -2.5rem;
	object-fit: cover;
	height: 70px;
	width: 70px;
	border-radius: 50%;
	border: 1px solid var(--border-color-dark);
	background-color: #fff;
}

.single-listing .single-listing-cards {
	margin-right: 20px;
}


.single-listing .single-listing-btn:hover {
	background-color: var(--border-color);
}

.single-listing .title-wrapper {
	width: auto;
}

.single-listing .listing-header {
	border: 1px solid var(--border-color);
	column-gap: 2rem;
	display: flex;
}

.single-listing .title-wrapper {
	flex-direction: column;
}

.single-listing .city-wrapper {
	justify-content: center;
	width: 100%;
}

.single-listing .card-body {
	padding: 1rem 0;
}


.dropdown-toggle#shareDropdown::after {
	all: unset;
}

/* The `all: unset` above (strips Bootstrap's dropdown-caret ::after) also
   wipes out the [data-tooltip] tooltip rule further up this file for this
   one element, since an ID selector always outranks a plain class/attribute
   one regardless of source order. Redeclared here with matching specificity
   (ID + 2 classes) so #shareDropdown's tooltip still renders. */
.single-header-utility .dropdown-toggle#shareDropdown::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	right: 50%;
	transform: translateX(50%) translateY(4px);
	white-space: nowrap;
	background: var(--secondary-color-dark);
	color: #fff;
	font-size: 0.75rem;
	padding: 4px 10px;
	border-radius: var(--border-radius);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 5;
}

.single-header-utility .dropdown-toggle#shareDropdown:hover::after,
.single-header-utility .dropdown-toggle#shareDropdown:focus-visible::after {
	opacity: 1;
	transform: translateX(50%) translateY(0);
}

.single-share a.dropdown-item {
	text-align: center;
}

/* single-listing-header redesign (2026-09-15): the old .single-ctas-wrapper
   absolutely-positioned the pro-id tag/share button/gov-link/claim button
   straddling the card's top border via translateY(-50%) -- on mobile this
   directly overlapped the profile logo underneath it (confirmed with a
   real browser). Replaced with .single-header-utility (a normal-flow row:
   pro-id tag, owner-only edit link, share button) and .single-header-ctas
   (a normal-flow wrapping button row below the identity block) -- see
   both below. No more absolute positioning or overlap tricks in this card. */
.single-header-utility {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .5rem;
}

.single-header-tag {
	display: inline-flex;
	align-items: center;
	font-size: .8rem;
	font-weight: 600;
	color: var(--secondary-color);
	background: var(--light-color);
	border: 1px solid var(--border-color);
	border-radius: 999px;
	padding: .3rem .8rem;
	text-decoration: none;
}

.single-header-tag:hover {
	color: var(--primary-color);
	border-color: var(--primary-color);
}

.single-header-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--light-color);
	border: 1px solid var(--border-color);
	color: var(--secondary-color);
}

.single-header-icon-btn:hover {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
}

.single-header-ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--border-color);
}


.sc-flex {
	width: 50%;
	/* 	border: solid 1px; */
	padding: .5rem 2.5rem 2rem 0rem;
	align-items: center;
	text-align: center;
	background: #fafafa;
	display: flex;
	justify-content: space-around;
	position: relative;
}

.occupation-sc-flex {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
}

.sc-flex-riyal {
	position: absolute;
	left: 0;
	right: 0;
	transform: translate(-50%, 70%);
	width: 50%;
	border: 1px solid var(--border-color-dark);
	padding: 15px 25px;
	justify-content: space-between;
	display: flex;
	border-radius: 50px;
	background: #fafafa;

}

.border-left {
	border-right: 1px solid var(--border-color);
}

.single-listing-icons img {
	width: 24px;
	height: 24px;
}

.services-container {
	row-gap: 6rem;
	justify-content: center;
}

.transport-services {
	row-gap: 2rem;
	justify-content: center;
}

.single-content-wrapper {
	text-align: center;
	position: relative;
	margin-bottom: 1.5rem;
}

.listing-data {
	font-weight: 500;
	margin-bottom: 1rem;
}

.listing-data img {
	border: 1px solid #afafaf;
	border-radius: 100%;
}

.service-info {
	display: flex;
	justify-content: space-between;
	width: 100%;
	border-top: 1px solid var(--border-color);
}

.service-text {
	display: flex;
	justify-content: space-around;
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
	width: -webkit-fill-available;
}

.small {
	color: var(--border-color-dark);
}

.main-heading {
	text-align: center;
	padding: 3rem 0rem 1rem 0rem;
}

.single-map-title {
	text-align: center;
}

.atc-wrapper {
	text-align: center;
}

.comparison {
	width: 100%;
	bottom: 0;
	z-index: 2000;
	position: fixed;
	background: #F8F9FA;
	box-shadow: 0px 15px 18px 20px rgba(51, 70, 129, 0.2);
	border-radius: 8px;
	display: none;
	padding: 1rem 0;
}


.close_compare {
	position: absolute;
	right: 10px;
	top: 10px;
	cursor: pointer;
	color: #292929;
	/* inline SVG (inc/icons.php) uses currentColor */
}

.cmp-column {
	padding: .5rem;
}

.cmp-listing.card {
	border: 1px solid var(--border-color-dark);
	height: 112px;
	padding: 16px;
	background: #FFFFFF;

}

.cmp-header {
	display: flex;
	gap: 0.5rem;
}

.cmp-remove {
	margin-right: auto;
	width: 24px;
	height: 24px;
	cursor: pointer;
}

.cmp-listing .card-title {
	width: -webkit-fill-available;
}

.profile-logo-wrapper {
	position: relative;
	display: inline-block;
}

/* Edit-image affordance placed directly on the profile logo itself
   (2026-09-15 follow-up) -- previously the only way to change this image
   was the unrelated "تحرير المعلومات" text link further down the page,
   with no visual link to the image it actually edits. Still opens
   #editProfileModal (the only place image upload lives), just from a
   standard corner-badge overlay on the avatar instead. */
.profile-logo-edit {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--primary-color);
	color: #fff;
	border: 2px solid #fff;
	border-radius: 50%;
	cursor: pointer;
}

.profile-logo-edit:hover {
	background: var(--primary-color-light);
}

#claimProfileModal {
	top: 10%;
}



.profile-btn {
	font-size: .85rem;
	border-radius: 999px !important;
	background: var(--light-color) !important;
	color: var(--secondary-color-dark) !important;
	border: 1px solid var(--border-color-dark) !important;
	white-space: nowrap;
}

.profile-btn:hover,
.profile-btn:active {
	background: var(--background-color) !important;
}

/* "طلب التوثيق" (request verification) is the header's one real
   conversion action for an unclaimed office -- primary-color instead of
   the neutral tag/gov-link treatment, so it reads as the featured CTA. */
#claim-profile.profile-btn {
	background: var(--primary-color) !important;
	color: #fff !important;
	border-color: var(--primary-color) !important;
}

div#claim-profile-message {
	text-align: center;
	margin-top: 1rem;
}

form#claim-profile-form {
	text-align: center;
}

/* Comparison page tables -- unified under one class name. The summary
   table used to be misspelled "comparsion-table" with its own separate
   ruleset from the services/transport tables' "comparison-table"; fixed
   the typo in markup and merged both rulesets so all three tables share
   one consistent look. */
.comparison-table td,
.comparison-table th {
	text-align: center;
	border: none;
	padding: 0.6rem 0.75rem;
}

.compare-icon {
	width: 30px;
	object-fit: contain;
}

.comparison-table {
	margin-top: 1rem;
	border-collapse: collapse;
	width: 100%;
}

.comparison-table tbody>tr:nth-child(odd)>td,
.comparison-table tbody>tr:nth-child(odd)>th {
	background-color: var(--light-color);
}

.comparison-table tr {
	border-top: 1px solid var(--border-color-dark);
	border-bottom: 1px solid var(--border-color-dark);
}

/* First column (row label) stays visible while the rest of the table
   scrolls horizontally on narrow screens -- the comparison's whole point
   is reading a row across 2-3 offices, which a plain scroll-and-lose-the-
   label pattern defeats. */
.comparison-table th:first-child,
.comparison-table td:first-child {
	position: sticky;
	right: 0;
	background: var(--light-color);
	box-shadow: -6px 0 8px -6px rgba(26, 26, 26, 0.12);
}

.comparison-table tbody>tr:nth-child(odd) th:first-child,
.comparison-table tbody>tr:nth-child(odd) td:first-child {
	background: var(--light-color);
}

.comparison-table tbody>tr:nth-child(even) th:first-child,
.comparison-table tbody>tr:nth-child(even) td:first-child {
	background: #fff;
}


.compare-logo {
	height: 65px;
	width: 65px;
	border: 1px solid #ddd;
	border-radius: 100%;
	object-fit: contain;
}

tr th:first-child,
tr td:first-child {
	border-left: 1px solid #afafaf;
}

.single-listing-header {
	border: 1px solid var(--border-color);
	background: #fff;
	box-shadow: 0 2px 12px rgba(26, 26, 26, 0.06);
	margin: 3rem auto 0;
	max-width: 640px;
	width: 100%;
	padding: 1.25rem 1.5rem 1.75rem;
	border-radius: calc(var(--border-radius) * 3);
}

/* Owner-edit affordances (edit/add/delete) now use the inline-SVG icon
   set (inc/icons.php) instead of emoji -- align them on the text
   baseline with a small gap instead of emoji's default inline spacing. */
.edit-icon svg,
.add_service_icon svg,
.delete-service svg,
.delete-transport svg {
	vertical-align: -2px;
	margin-inline-start: 2px;
}

.single-content-wrapper>*:not(img, input, .profile-btn, .edit-nationality, .edit-occupation, .single_image_placeholder, .profile-logo-wrapper, .badge-wrapper) {
	padding-top: 1.3rem;
}

/* Contact icon row (map/email/phone/WhatsApp) -- was a separately
   floating pill hanging off the card's bottom border via
   margin-bottom:-1.5rem; now a normal in-card bottom bar, consistent
   with the rest of this header's redesign (no more overlap tricks). */
.single-listing-icons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	margin: 1.5rem auto 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--border-color);
}

.single-listing-icons>a,
.single-listing-icons>.dropdown>a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--light-color);
	border: 1px solid var(--border-color);
	color: var(--secondary-color-dark);
	text-align: center;
	box-sizing: border-box;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.single-listing-icons>a:hover,
.single-listing-icons>.dropdown>a:hover {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
}

.single-listing-icons>a.disabled-icon {
	opacity: .4;
	pointer-events: none;
}

.single-listing-icons img {
	width: 22px;
	height: 22px;
}

.full-width-map {
	width: 100%;
	height: 500px;
	margin-top: 2rem;
	border: 1px solid #afafaf;
	border-radius: 10px;
	background: #efefef;
}

.vb {
	/* padding-top trimmed from 5rem (80px) -- with the sitewide masthead now
	   sitting flush above this container on every page that uses it (list,
	   map, single-listing, comparison, archive), the old 80px gap read as a
	   dead empty band between the header and the page title/toggle. */
	padding-top: 1.5rem;
	padding-bottom: 0rem;
}

.transport-services .card-body {
	display: flex;
	justify-content: center;
	gap: .3rem;
}

#services-toggle {
	margin-bottom: 5rem;
	width: 100%;
	justify-content: center;
}

.btn-group-toggle .btn {
	padding: .5rem;
	max-width: 200px;
	width: 200px;
	height: 3rem;
	align-content: center;
}

.btn-group-toggle .btn:nth-child(2) {
	border-radius: 50px 0 0 50px;
}

.btn-group-toggle .btn:first-child {
	border-radius: 0 50px 50px 0rem !important;
}

.btn-group-toggle .btn.active {
	background-color: var(--border-color-dark);
	color: #fff;
	border: 1px solid var(--border-color-dark);
}

.transport-price {
	position: absolute;
	left: 0;
	right: 0;
	transform: translate(-50%, 90%);
	width: 50%;
	border: 1px solid var(--border-color-dark);
	padding: 15px 25px;
	justify-content: space-between;
	display: flex;
	border-radius: 50px;
	background: #fafafa;
}

.single-listing .card-transport {
	border-radius: 0.25rem;
	position: relative;
	padding-bottom: 2rem;
	margin-bottom: 2rem;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background-clip: border-box;
	border: 1px solid var(--border-color-dark);
}

.modal-content {
	border: none !important;
	border-radius: calc(var(--border-radius) * 2) !important;
	box-shadow: 0 12px 32px rgba(26, 26, 26, 0.18);
}

.btn-close {
	--bs-btn-close-opacity: 1 !important;
	padding-bottom: .8rem !important;
	/* Bootstrap's non-RTL build hardcodes margin-left:auto here (this site
	   loads bootstrap.min.css, not the .rtl. build -- a sitewide gap, out
	   of scope to fix by swapping the whole build unverified, but this
	   specific rule fights .modal-header's own flex placement and can
	   misplace the close button). .modal-header's flex + DOM order
	   already positions it correctly under direction:rtl on their own. */
	margin: 0 !important;
}

.modal-header {
	border-bottom: 1px solid var(--border-color);
	padding: 1.1rem 1.25rem;
}

.modal-title {
	font-family: "blfont";
	font-weight: 600;
	font-size: 1.15rem;
}

.modal-body {
	padding: 1.5rem 1.25rem;
}

/* Bootstrap form controls used inside modals sitewide (verify/advertise
   quickbuttons, claim/upgrade, owner-edit modals) -- previously bare
   Bootstrap defaults with no token styling. */
.modal .form-control,
.modal .form-select {
	border: 1px solid var(--border-color-dark);
	border-radius: var(--border-radius);
	font-family: "blfont";
}

.modal .form-control:focus,
.modal .form-select:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(89, 167, 196, 0.15);
}

.modal .form-label,
.modal legend.form-label {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--secondary-color-dark);
}

.modal .btn-primary {
	background: var(--primary-color);
	border-color: var(--primary-color);
	font-weight: 600;
}

.modal .btn-primary:hover {
	background: #3d7d94;
	border-color: #3d7d94;
}

/* [musaned_advertise_request]'s form (musaned-ads plugin) ships with no
   Bootstrap classes at all -- bare <p>/<label>/<input>/<button> -- so it
   rendered as completely unstyled native browser controls inside the
   "أعلن معنا" quickbutton modal, next to the verify modal's properly
   Bootstrap-styled form. Styled by tag, scoped to this form's own
   wrapper, since the plugin markup itself isn't touched here. */
.musaned-ad-lead-request p {
	margin-bottom: 1rem;
}

.musaned-ad-lead-request label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--secondary-color-dark);
	margin-bottom: 0.35rem;
}

.musaned-ad-lead-request input[type="text"],
.musaned-ad-lead-request input[type="tel"],
.musaned-ad-lead-request textarea {
	width: 100%;
	font-family: "blfont";
	border: 1px solid var(--border-color-dark);
	border-radius: var(--border-radius);
	padding: .6rem .85rem;
}

.musaned-ad-lead-request input:focus,
.musaned-ad-lead-request textarea:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(89, 167, 196, 0.15);
}

.musaned-ad-lead-request fieldset {
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	padding: .75rem 1rem;
	margin-bottom: 1rem;
}

.musaned-ad-lead-request fieldset legend {
	font-weight: 600;
	font-size: 0.9rem;
	width: auto;
	padding: 0 .4rem;
}

.musaned-ad-lead-request fieldset label {
	font-weight: 400 !important;
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-bottom: .4rem;
}

.musaned-ad-lead-request button[type="submit"] {
	background: var(--primary-color);
	border: 1px solid var(--primary-color);
	color: #fff;
	font-weight: 600;
	border-radius: var(--border-radius);
	padding: .6rem 2rem;
	cursor: pointer;
}

.musaned-ad-lead-request button[type="submit"]:hover {
	background: #3d7d94;
	border-color: #3d7d94;
}

.musaned-ad-lead-request__message {
	background: var(--light-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	padding: .6rem .9rem;
	margin-bottom: 1rem;
}

/* Header Styles  */
.custom-logo-link {
	width: 3rem;
}

.site-header.header-stacked .header-inner {
	padding-bottom: 0px !important;
	background: E1F1F6 !important;
}

.site-header {
	background-color: var(--light-color) !important;
}


.spacer {
	height: 5rem;
}


.select2-container .select2-selection--multiple {
	min-height: 37px !important;
	position: relative;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
	height: 0px !important;
}

/* Chained selector matches (beats) the specificity above so the
   "تحديد" pseudo-element actually gets a real height to paint into --
   see the .hide-tags rule's own comment for the full story. */
.select2-container .select2-selection--multiple .select2-selection__rendered.hide-tags {
	height: 26px !important;
}

/* .select2-selection__rendered's own height:0 (above) clips ANY of its
   normal-flow content -- the .hide-tags "تحديد" state already escapes
   this via position:absolute, but the default empty-state placeholder
   (select2's search <li>, whose <input> carries the placeholder text
   passed to initializeSelect2()) had no such escape and was genuinely
   invisible, clipped to zero height. Confirmed with a real browser:
   every .filter-wrapper select on the homepage rendered as an empty box
   with no label text at all, not just #recruitment-filter. Same escape
   applied here so the placeholder actually shows. */
.select2-container .select2-selection--multiple .select2-search--inline {
	position: absolute;
	top: 5px;
	right: 15px;
	left: 15px;
}

.select2-container,
.select2-results__option,
.select2-selection__rendered,
.select2-search__field {
	font-family: 'blfont', sans-serif !important;
}

.select2-container .select2-search--inline .select2-search__field {
	font-size: 14px !important;
	line-height: 24px;
	height: 24px !important;
	width: 100% !important;
}

#more-filters {
	cursor: pointer;
	padding: 5px;
	width: 35px;
	height: 35px;
	border: 1px solid #afafaf;
	border-radius: 4px;
	color: #afafaf;
	/* inline SVG (inc/icons.php) uses currentColor */
}

.image_placeholder span {
	width: 50px;
	height: 50px;
	object-fit: contain;
	margin-left: 10px;
	border-radius: 100%;
	background: var(--background-color);
	border: 1px solid var(--border-color-dark);
	display: block;
}

.image_placeholder-comparison {
	width: 50px;
	height: 50px;
	margin: auto;
	border-radius: 100%;
	background: var(--light-color);
	border: 1px solid var(--border-color-dark);
}

.single_image_placeholder {
	border-radius: 50%;
	padding: 20px;
	/* Was margin-top:-70px -- see .single-listing .business-logo's note
	   on the same fix (this is its no-thumbnail fallback). */
	margin-top: .5rem;
	width: 100px;
	height: 100px;
	border: 1px solid var(--border-color-dark);
	background-color: #fff;
	display: inline-block;
}

.comparison-active .container.vb {
	padding-bottom: 200px;
}

.comparison-table th {
	vertical-align: middle;
}

.comparison-table-scroll th,
.comparison-table-scroll td {
	white-space: nowrap;
}

/* Give each of the three comparison tables (summary, services, transport)
   the same bordered card surface the rest of the redesigned site uses,
   instead of a bare scrolling <table> on the page background. */
.comparison-table-scroll {
	overflow-x: auto;
	background: #fff;
	border: 1px solid var(--border-color);
	border-radius: calc(var(--border-radius) * 2);
	margin: 0 0 2rem;
	padding: 0.5rem;
}

h1.single-title,
h2.mt-5,
.container.vb>h2 {
	margin-top: 2.5rem;
	margin-bottom: 0.75rem;
}



/* Single-listing FAQ accordion (single-listing.php). Real per-listing
   data now (get_field('faqs')/have_rows('faqs')) -- was a single
   hardcoded static block, previously mislabeled "test faqs" here even
   though this styling was always genuinely in use, not test code. */

.musaned-faqs .accordion {
	border: 1px solid var(--border-color);
	border-radius: calc(var(--border-radius) * 2);
	background: #fff;
	overflow: hidden;
}

.accordion-item {
	padding: 0;
	border-radius: 0 !important;
	text-align: right;
}

.accordion-item:not(:first-of-type) {
	border-top: 1px solid var(--border-color);
}

.accordion-button::after {
	display: none !important;
}

/* The question row: text fills the available width and stays flush to
   the card's inline-start edge (the right, in this RTL-only site), the
   toggle chevron sits at the opposite end -- both vertically centered
   on one clickable row. Previously the button and toggler were both
   natural-width flex items floating together away from the edge,
   leaving a large dead gap where the row should have started. */
.accordion-header {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 1.1rem 1.25rem;
	cursor: pointer;
	transition: background-color .15s ease;
}

.accordion-header:hover {
	background: var(--light-color);
}

.accordion-button {
	flex: 1 1 auto;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	background-color: transparent !important;
	color: var(--secondary-color-dark);
	font-family: "blfont";
	font-weight: 600;
	font-size: .98rem;
	line-height: 1.5;
	text-align: right;
}

/* Chevron drawn via CSS mask (not a unicode +/- glyph) so it takes its
   color from background-color like the rest of this icon system, and
   rotates smoothly on expand instead of swapping character content. */
.accordion-toggler {
	display: inline-flex;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	width: 28px;
	height: 28px;
	background-color: var(--light-color);
	border: 1px solid var(--border-color);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, transform .25s ease;
	position: relative;
}

.accordion-toggler::before {
	content: "";
	width: 12px;
	height: 12px;
	background-color: var(--secondary-color-dark);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .25s ease;
}

.accordion-header .accordion-button:not(.collapsed)~.accordion-toggler {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

.accordion-header .accordion-button:not(.collapsed)~.accordion-toggler::before {
	background-color: #fff;
	transform: rotate(180deg);
}

.accordion-body {
	padding: 0 1.25rem 1.25rem;
	color: var(--secondary-color);
	line-height: 1.7;
}

/* Owner-only edit/delete controls on an FAQ item -- same pattern as
   .service-editor-wrap for services/transport rows, styled as small
   pill buttons on their own subtle row instead of floating text links. */
/* Now sits inline in .accordion-header, beside .accordion-toggler on
   the question's own line, instead of a separate full-width row below
   it -- flex-shrink:0 keeps it from being squeezed by a long question
   (which itself has flex:1 and its own text truncation is fine to let
   wrap, this shouldn't). */
.faq-editor-wrap {
	display: flex;
	flex-shrink: 0;
	gap: .4rem;
}

.faq-editor-wrap a {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: .78rem;
	color: var(--secondary-color);
	background: var(--light-color);
	border: 1px solid var(--border-color);
	border-radius: 999px;
	padding: .25rem .7rem;
	cursor: pointer;
}

.faq-editor-wrap a:hover {
	color: var(--primary-color);
	border-color: var(--primary-color);
}

.faq-editor-wrap .delete-faq:hover {
	color: #c0392b;
	border-color: #c0392b;
}

/* Location edit/search/pin modal (#editLocationModal, single-listing.php)
   -- separate from the read-only "الموقع" iframe and the header's small
   map-wrapper pin icon. */
.location-picker-search {
	display: flex;
	gap: .5rem;
	margin-bottom: .5rem;
}

.location-picker-search .form-control {
	flex: 1 1 auto;
}

.location-search-results {
	list-style: none;
	margin: 0 0 .75rem;
	padding: 0;
	max-height: 160px;
	overflow-y: auto;
	border-radius: var(--border-radius);
}

.location-search-results:not(:empty) {
	border: 1px solid var(--border-color);
}

.location-search-result {
	padding: .55rem .9rem;
	cursor: pointer;
	border-bottom: 1px solid var(--border-color);
	font-size: .9rem;
}

.location-search-result:last-child {
	border-bottom: 0;
}

.location-search-result:hover {
	background: var(--light-color);
	color: var(--primary-color);
}

.location-search-status {
	padding: .55rem .9rem;
	color: var(--secondary-color);
	font-size: .85rem;
}

.location-picker-hint {
	font-size: .85rem;
	color: var(--secondary-color);
	margin-bottom: .5rem;
}

#location-picker-map {
	width: 100%;
	height: 340px;
	border-radius: var(--border-radius);
	border: 1px solid var(--border-color);
}

.location-picker-coords {
	margin: .6rem 0 0;
	font-size: .85rem;
	color: var(--secondary-color);
	text-align: center;
}

/* LOGIN PAGE STYLES TESTING START */
.login-page {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 50px 0;
}

.login-right-section {
	background: #fff;
	border-radius: 10px;
	padding: 2rem;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	width: 40%;
}

.login-left-section {
	text-align: center;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 60%;
}

/*         

        .login-left-section img {
            max-width: 100%;
            height: auto;
        }

        

        .form-check-label {
            margin-right: 0.5rem;
        }

        .btn-primary {
            background-color: #000;
            border: none;
        }

        .btn-primary:hover {
            background-color: #333;
        }

        .text-muted {
            color: #6c757d !important;
        }

        a {
            color: #000;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        } */


/* LOGIN PAGE STYLES TESTING END */

/* Header & Footer styles */
.site-footer {
	background-color: var(--light-color) !important;
}

.site-header .header-inner {
	justify-content: center !important;
}

.sort-filter .dropdown-toggle {
	background-color: white !important;
	border: 1px solid #afafaf !important;
	border-radius: 4px !important;
	color: #757575 !important;
	padding: 3px 10px;
	min-height: 37px;
	width: -webkit-fill-available;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
	height: 25px !important;
	width: 20px;
}

.dropdown li span {
	width: 160px;
}

p.site-description {
	display: none;
	position: absolute;
	text-align: center;
	margin: auto;
	left: 0;
	right: 0;
}

/*input#featured-image {
	transform: translate(-20%, 15%);
}*/
.edit-save-btn {
	margin-top: 20px;
}

.edit-btn {
	background: var(--bs-btn-bg) !important;
	color: #1A1A1A !important;
	border: 1px solid var(--border-color-dark) !important;
	border-radius: 0.25rem !important;
	padding: .5rem 2rem !important;
}

/* Skeleton styles */

.rating-wrapper.skeleton-anim {
	min-width: 100px;
}

.skeleton-anim {
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: loading 1.5s infinite;
}

.archive-cta {
	width: 100% !important;
}

.taxonomy-logo {
	max-width: 60px;
	margin-left: 1rem;
}

/* Category landing (template-cat-main.php) + taxonomy archive
   (archive.php) share this header block verbatim -- styled once here.
   Matches the card-surface language used elsewhere in the redesign
   (.musaned-header, .musaned-filter-bar). */
.archive-header {
	background: var(--light-color);
	border: 1px solid var(--border-color);
	border-radius: calc(var(--border-radius) * 2);
	padding: 2rem 1.5rem;
	margin-bottom: 1.5rem;
}

.archive-header .archive-image img {
	border-radius: 50%;
	border: 1px solid var(--border-color-dark);
	background: #fff;
	margin-bottom: 1rem;
}

.archive-description,
.description {
	color: var(--secondary-color);
	max-width: 65ch;
	margin: 0.5rem auto 0;
}

/* archive.php's second grid ("related offices") reads as clearly
   secondary/supplementary rather than a second identical grid --
   quieter heading, a top divider, and a muted section background. */
.musaned-related-section {
	margin-top: 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border-color);
}

.related-heading {
	font-size: 1.15rem !important;
	color: var(--secondary-color);
	text-align: center;
	margin-bottom: 1.25rem;
}

.archive-pagination {
	padding-bottom: 4rem;
	padding-top: 2rem;
}

.archive-image {
	padding: 1rem 0;
}

.archive-image img {
	border-radius: 100%;
	border: 1px solid var(--border-color);
	;
	object-fit: cover;
	width: 120px;
	height: 120px;
}

.archive-posts {
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 3rem;
}

.related-heading {
	margin-bottom: 3rem;
	text-align: center
}


@keyframes loading {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}


.select2-results__option--selected::before {
	content: '•';
	color: black;
	margin-right: 8px;
	font-size: 20px;
	font-weight: bold;
	position: absolute;
	left: 1rem;
}

.select2-results__option--selected {
	background-color: #f1f1f1;
}

.single-listing-form {
	text-align: center;
	max-width: 70%;
	margin: 0 auto;
	background: var(--light-color);
	border: 1px solid var(--border-color);
	border-radius: calc(var(--border-radius) * 2);
	padding: 1.75rem 1.5rem;
}

.single-listing-form .btn {
	margin-top: 1rem;
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
	font-weight: 600;
	padding: .6rem 3rem;
}

.single-listing-form .btn:hover {
	background: #3d7d94;
	border-color: #3d7d94;
}

.form-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 15px;
	gap: 1rem;
}

.single-form-title {
	text-align: center;
	padding-bottom: 2rem;
}

div#response-message {
	border: 1px solid;
	margin-top: 10px;
	padding: .5rem 1rem;
	display: none;
}

#tel {
	text-align: end;
}

/* Native form fields on the lead-capture form -- previously bare
   unstyled <input>/<textarea>, on the page most likely to convert a
   household into a lead. */
.single-listing-form input,
.single-listing-form textarea {
	width: 100%;
	font-family: "blfont";
	border: 1px solid var(--border-color-dark);
	border-radius: var(--border-radius);
	padding: .65rem .9rem;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.single-listing-form textarea {
	resize: vertical;
	margin-bottom: 1rem;
}

.single-listing-form input:focus,
.single-listing-form textarea:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(89, 167, 196, 0.15);
}

.single-listing-form input::placeholder,
.single-listing-form textarea::placeholder {
	color: var(--border-color-dark);
}

@media (max-width: 767px) {
	.single-listing-form {
		max-width: 100%;
	}
}

.select2-results__option {
	position: relative;
}

.empty-cards {
	text-align: center;
	padding: 3rem 0 7rem 0;
}

.disabled-icon {
	opacity: 0.15;
	pointer-events: none;
}

.nationality-placeholder {
	min-height: 24px;
}

.occupation-placeholder {
	min-height: 32px;
}

/* Edit Listing */
.input_editor {
	display: inline-block;
	max-width: 80%;
}

/* Owner-only editing controls across single-listing.php (info/contact
   edit, service/transport edit+delete) -- none of these are real
   <a href> links, only data-bs-toggle modal triggers, so browsers
   don't show a pointer cursor on them by default. Same small
   bordered-pill language as .faq-editor-wrap's buttons, so every
   owner-editing affordance on this page reads as one consistent
   button system instead of plain text links. */
.edit-icon,
.delete-service,
.delete-transport {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-size: .78rem;
	font-weight: 600;
	color: var(--secondary-color);
	background: var(--light-color);
	border: 1px solid var(--border-color);
	border-radius: 999px;
	padding: .3rem .8rem;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}

.edit-icon:hover {
	color: var(--primary-color);
	border-color: var(--primary-color);
}

.delete-service:hover,
.delete-transport:hover {
	color: #c0392b;
	border-color: #c0392b;
}

/* "تحرير اتصال" sits alone after the contact-icon row, not inside a
   .service-editor-wrap -- centered under it like a real action rather
   than a full-width block stuck to one side. */
/* "تحرير المعلومات" and "تحرير اتصال" (info/contact edit) moved out of
   the header card entirely into one shared row below it, instead of
   living in two different corners of the card (the utility row up top,
   a lone centered link at the bottom) -- both real editing entry
   points for this listing belong together. */
.single-owner-edit-row {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin: 1.25rem auto 0;
}

.listing-descriptions p {
	margin-bottom: 0;
}

.service-editor-wrap {
	display: flex;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .75rem;
}

/* The "add" triggers (add a service/transport/FAQ row) are a real
   primary action, not an edit/delete affordance -- a bigger, outlined
   pill in the primary color instead of the neutral edit/delete pills. */
.add_service_icon {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .9rem;
	font-weight: 600;
	color: var(--primary-color);
	background: rgba(89, 167, 196, 0.08);
	border: 1px solid var(--primary-color);
	border-radius: 999px;
	padding: .6rem 1.4rem;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.add_service_icon:hover {
	background: var(--primary-color);
	color: #fff;
}


/* Memberships */
.badge-wrapper img {
	width: 35px;
	height: 35px;
	pointer-events: none;
}

.badge-wrapper {
	position: absolute;
	top: -5px;
	z-index: 2;
	right: -7px;
}


.title-wrapper .badge-wrapper img {
	width: 25px;
	height: 25px;
}

.title-wrapper .badge-wrapper {
	top: unset;
	bottom: -6px;
}


.p_claimed .card {
	border: 1px solid var(--p-claimed);
}

.p_silver .card {
	border: 3px solid var(--p-silver);
}

.p_gold .card {
	border: 3px solid var(--p-gold);
}

.p_black .card {
	border: 3px solid var(--p-black);
}







/* Responsiveness */

@media only screen and (min-width: 768px) and (max-width: 1199px) {
	.rating-wrapper {
		font-size: 14px;
	}

	.city-name {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 50px;
	}

}


@media only screen and (min-width: 768px) {}



@media only screen and (max-width: 1199px) {}


@media only screen and (max-width: 1024px) {
	.single-listing-header {
		max-width: 100%;
	}
}

@media only screen and (max-width: 767px) {

	.musaned-header h1 {
		text-align: center;
		font-size: 1.5rem !important;
	}

	.site-header.header-stacked .header-inner {
		flex-direction: row !important;
	}

	.site-navigation-toggle-holder {
		max-width: fit-content !important;
	}

	.spacer {
		height: 3rem;
	}

	#listingModal .modal-dialog {
		margin-left: 12px;
		margin-right: 12px;
	}

	.profile-btn {
		padding: .4rem 1rem;
	}

	.more-filters ul .dropdown-menu .p-3 {
		transform: translate3d(10px, 23.5px, 0px)
	}

	.filters {
		flex-direction: column;
	}

	.comparison-table-scroll {
		overflow-x: auto;
	}

	.close_compare {
		top: -10px;
	}

	.cmp-listing.card {
		padding: 10px;
		height: 70px;
	}

	.site-logo {
		text-align: center;
		display: flex;
		justify-content: center;
	}

	.more-filters {
		display: flex !important;
		gap: 10px;
		width: 100%;
	}

	.dropdownf-wrapper {
		display: none !important;
	}

	.filters-list {
		gap: 2%;
		row-gap: .875rem;
	}

	.filters-list .filter-wrapper {
		min-width: 49%;
		width: 49%;
	}

	#more-filters {
		width: 50vw;
	}

	#clear-filters {
		width: 50vw;
	}

	.comparison-active .container.vb {
		padding-bottom: 200px;
	}

	.whatsapp-comparison .btn {
		padding: .5rem 1rem;
	}

	.form-row {
		flex-direction: column;
	}
}

/* Site masthead + footer -- structurally mirrors Tanazulnet's own
   header/footer (see template-parts/header.php + footer.php). Extends the
   card system's own tokens (--primary-color, --border-radius, --border-color,
   blfont) rather than introducing a competing palette -- see the surface
   brief's Direction contract for the full rationale. */
.musaned-masthead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	background: var(--light-color);
	border-bottom: 1px solid var(--border-color);
	box-shadow: 0 2px 8px rgba(26, 26, 26, 0.05);
	/* No position/z-index here -- this shortcode's modal markup
	   ([musaned_verify_quickbutton]/[musaned_advertise_quickbutton])
	   renders INSIDE this header, and position:relative + z-index used
	   to create a new stacking context that trapped the modal inside it.
	   Bootstrap's backdrop is appended straight to <body> (outside this
	   context, at the root stacking level), so its z-index:1050 beat this
	   element's z-index:10 at the root -- even though the modal's own
	   z-index:1055 is higher, it was being compared in the wrong context
	   entirely. Net effect: the backdrop visually/interactively covered
	   the "open" modal, matching exactly the freeze reported and
	   confirmed with a real browser (Playwright): the close button was
	   unclickable, intercepted by .modal-backdrop. The box-shadow below
	   doesn't need z-index to render above page content in normal flow. */
}

.musaned-masthead__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

.musaned-masthead__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 0 0;
	min-width: 0;
}

.musaned-masthead__actions:first-child {
	justify-content: flex-start;
}

.musaned-masthead__actions:last-child {
	justify-content: flex-end;
}

.musaned-wordmark {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--secondary-color-dark);
}

.musaned-wordmark__mark {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 50%;
}

.musaned-wordmark__text {
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.2;
}

span.musaned-wordmark__text {
	display: none;
}

@media (max-width: 480px) {
	.musaned-wordmark__text {
		display: none;
	}
}

.musaned-quickbutton {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	flex-shrink: 0;
	border-radius: 50%;
	background: rgba(89, 167, 196, 0.1);
	/* A darker step of --primary-color, not --primary-color itself: the
	   token at full brightness on its own 10%-tint background measures
	   ~2.4:1, short of the 3:1 floor for icon/control contrast. */
	color: #3d7d94;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.musaned-quickbutton:hover,
.musaned-quickbutton:focus-visible {
	background: var(--primary-color);
	color: #fff;
}

/* Hover/focus tooltip sourced from the button's own aria-label -- real
   semantic text, not invented copy. */
.musaned-quickbutton::after {
	content: attr(aria-label);
	position: absolute;
	top: calc(100% + 8px);
	right: 50%;
	transform: translateX(50%) translateY(-4px);
	white-space: nowrap;
	background: var(--secondary-color-dark);
	color: #fff;
	font-size: 0.75rem;
	padding: 4px 10px;
	border-radius: var(--border-radius);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.musaned-quickbutton:hover::after,
.musaned-quickbutton:focus-visible::after {
	opacity: 1;
	transform: translateX(50%) translateY(0);
}

@media (max-width: 480px) {
	.musaned-quickbutton::after {
		display: none;
	}
}


.musaned-footer {
	background: var(--light-color);
	border-top: 1px solid var(--border-color);
}

.musaned-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 20px 16px;
}

.musaned-footer__top {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--border-color);
}

.musaned-footer__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--secondary-color-dark);
	font-weight: 600;
	font-size: 0.95rem;
}

.musaned-footer__brand span {
	display: none;
}

.musaned-footer__brand img {
	border-radius: 50%;
}

.musaned-footer__contact {
	display: flex;
	justify-content: center;
	gap: 10px;
}

.musaned-footer__contact a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	transition: opacity 0.15s ease;
}

.musaned-footer__contact a:hover {
	opacity: 0.85;
}

.musaned-footer__contact a[aria-label="Phone"] {
	background: var(--secondary-color-dark);
}

.musaned-footer__bar {
	text-align: center;
}

.musaned-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px 16px;
	font-size: 0.85rem;
	color: var(--secondary-color);
}

.musaned-footer__legal a {
	color: var(--secondary-color);
	text-decoration: none;
}

.musaned-footer__legal a:hover {
	color: var(--primary-color);
}

.musaned-footer__copy {
	color: var(--border-color-dark);
}

@media (max-width: 480px) {
	.musaned-footer__top {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Homepage List/Map view toggle -- reuses .btn-group-toggle/.btn's shared
   pill styling (see #services-toggle on single-listing.php) rather than
   its exact ID rule, since that one has 5rem/100%-width spacing that's
   specific to the services section, not this small top-of-page control. */
#view-toggle {
	display: flex;
	justify-content: center;
	margin-bottom: 1.5rem;
}

#view-toggle .btn {
	max-width: 140px;
	width: 140px;
	height: 2.5rem;
	padding: 0.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

@media (max-width: 576px) {
	#view-toggle .btn {
		width: 110px;
		max-width: 110px;
		font-size: 0.85rem;
	}
}