/* ==========================================================================
   MEETR listing detail
   Brands ListingPro's native single listing by targeting its own classes.
   Scoped to body.single-listing so it never leaks. No template is replaced,
   so every ListingPro widget and all listing data carry forward untouched.
   ========================================================================== */

/* Section canvas ----------------------------------------------------------- */
body.single-listing .aliceblue,
body.single-listing .listing-second-view { background: var(--meetr-snow); }

body.single-listing .content-white-area,
body.single-listing .post-meta-left-box,
body.single-listing .sidebar-post {
	font-family: var(--meetr-font-body);
	color: var(--meetr-summit);
}

/* Header: breadcrumb, title, tagline --------------------------------------- */
body.single-listing .post-meta-left-box .breadcrumbs {
	font-family: var(--meetr-font-mono);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	padding-left: 0;
}
body.single-listing .post-meta-left-box .breadcrumbs,
body.single-listing .post-meta-left-box .breadcrumbs a { color: var(--meetr-stone); }
body.single-listing .post-meta-left-box .breadcrumbs a:hover { color: var(--meetr-alpine); }

body.single-listing .post-meta-left-box h1 {
	font-family: var(--meetr-font-display);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: var(--meetr-summit);
	font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
	margin: 0.1em 0 0.15em;
}
/* Listing logo ( inc/listing-logo.php ) -------------------------------------
   A circle by the title: 56px on desktop, 44px under 768px. object-fit: contain on white with a thin border
   and padding, so a wide or tall logo is never cropped ( the padding keeps even a square logo's corners inside
   the circle: a square of side d fits a circle of diameter D when d * 1.4142 <= D, so 56 - 2 * 8 = 40 and
   44 - 2 * 7 = 30 both fit ). With no logo none of this is printed and the header is ListingPro's own. */
body.single-listing .meetr-listing-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0.1em 0 0.15em;
}
body.single-listing .meetr-listing-head h1 {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}
body.single-listing .meetr-listing-logo {
	display: block;
	flex: none;
	box-sizing: border-box;
	width: 56px;
	height: 56px;
	padding: 8px;
	border: 1px solid var(--m-line, #DCE4EA);
	border-radius: 50%;
	background: #fff;
	object-fit: contain;
}
body.single-listing .meetr-listing-logo-wrap {
	display: flex;
	justify-content: center;
	margin: 0 0 8px;
}
@media (max-width: 767px) {
	body.single-listing .meetr-listing-head { gap: 12px; }
	body.single-listing .meetr-listing-logo { width: 44px; height: 44px; padding: 7px; }
}

body.single-listing .post-meta-left-box > p {
	font-family: var(--meetr-font-display);
	font-style: italic;
	font-size: 1.15rem;
	color: var(--meetr-stone);
}

/* Claimed / verified badge ------------------------------------------------- */
body.single-listing .claimed {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--meetr-font-mono);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--meetr-summit);
	background: transparent;
	vertical-align: middle;
	margin-left: 0.5em;
}
body.single-listing .claimed::before {
	content: "";
	width: 0.5em; height: 0.5em;
	border-radius: 50%;
	background: var(--meetr-ember);
}

/* Save / Share -------------------------------------------------------------- */
body.single-listing .post-meta-right-box .btn {
	background: transparent;
	border: 1px solid var(--meetr-border);
	color: var(--meetr-summit);
	border-radius: var(--meetr-radius);
	font-family: var(--meetr-font-body);
	font-weight: 600;
	transition: border-color 0.18s var(--meetr-ease), color 0.18s var(--meetr-ease);
}
body.single-listing .post-meta-right-box .btn:hover {
	border-color: var(--meetr-alpine);
	color: var(--meetr-alpine);
}

/* Widget cards ------------------------------------------------------------- */
body.single-listing .widget-box {
	background: var(--meetr-surface);
	border: 1px solid var(--meetr-border);
	border-radius: var(--meetr-radius-lg);
	box-shadow: var(--meetr-shadow);
	padding: var(--meetr-space-m);
	margin-bottom: var(--meetr-space-m);
}
body.single-listing .widget-box h2,
body.single-listing .widget-box h3,
body.single-listing .widget-box h4 {
	font-family: var(--meetr-font-display);
	font-weight: 500;
	color: var(--meetr-summit);
	letter-spacing: -0.01em;
	position: relative;
	padding-top: 0.6rem;
}
body.single-listing .widget-box h2::before,
body.single-listing .widget-box h3::before {
	content: "";
	position: absolute; top: 0; left: 0;
	width: 1.75rem; height: 2px;
	background: var(--meetr-gradient);
}

/* Buttons ------------------------------------------------------------------ */
/* ListingPro forces its primary color with !important, so match that weight.
   Alpine over white keeps the CTA legible; glacier over white fails contrast. */
body.single-listing .btn-primary,
body.single-listing a.btn-primary,
body.single-listing .btn.btn-primary {
	background: var(--meetr-alpine) !important;
	border: 1px solid var(--meetr-alpine) !important;
	color: #fff !important;
	border-radius: var(--meetr-radius);
	font-family: var(--meetr-font-body);
	font-weight: 600;
	transition: transform 0.18s var(--meetr-ease), background 0.18s var(--meetr-ease);
}
body.single-listing .btn-primary:hover,
body.single-listing a.btn-primary:hover,
body.single-listing .btn.btn-primary:hover {
	background: var(--meetr-summit) !important;
	border-color: var(--meetr-summit) !important;
	color: #fff !important;
	transform: translateY(-1px);
}

/* Lead / contact form ------------------------------------------------------ */
body.single-listing .business-contact input[type="text"],
body.single-listing .business-contact input[type="email"],
body.single-listing .business-contact input[type="tel"],
body.single-listing .business-contact textarea,
body.single-listing .lp-booking-form-input {
	border: 1px solid var(--meetr-border);
	border-radius: var(--meetr-radius);
	font-family: var(--meetr-font-body);
	color: var(--meetr-summit);
}
body.single-listing .business-contact input:focus,
body.single-listing .business-contact textarea:focus {
	outline: 2px solid var(--meetr-alpine);
	outline-offset: 1px;
	border-color: var(--meetr-alpine);
}

/* Detail and feature lists ------------------------------------------------- */
body.single-listing .listing-detail-infos,
body.single-listing .features-listing.extra-fields { color: var(--meetr-summit); }
body.single-listing .content-white-area a { color: var(--meetr-alpine); }
body.single-listing .content-white-area a:hover { color: var(--meetr-summit); }

/* Listing owner image ------------------------------------------------------
   ListingPro emits <img src=""> in .author-img when the WordPress user has no
   avatar meta, which paints an empty circle. inc/listing-media.php resolves the
   right image ( company logo, then featured image, then the MEETR mark ) and
   meetr-listing-fix.js writes it in. These rules only make sure whatever lands
   there fills the circle cleanly.

   A photo is cropped to fill. A company logo is letterboxed on white so a wide
   wordmark is never sliced in half. The fit class is chosen server side.
   -------------------------------------------------------------------------- */
body.single-listing .author-img img.meetr-owner-img {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 50%;
	background: #fff;
}
body.single-listing .author-img img.meetr-owner-img--cover { object-fit: cover; }
body.single-listing .author-img img.meetr-owner-img--contain {
	object-fit: contain;
	padding: 4px;
}