/* Bannez service pages + clean agency service cards */

/* Single service: remove marketplace view count under the title. */
.single-listing_type .bannez-service-sidebar [data-list-k="views_icon"] {
	display: none !important;
}

/* Safety fallback: seller/profile marketplace box should never appear. */
.single-listing_type .maincontent [ppt-box]:has(a[onclick^="processMessage"]),
.single-listing_type .maincontent [ppt-box]:has(a.btn-system.list.btn-block[href="#"]) {
	display: none !important;
}

/* Full-resolution responsive service image. */
.bannez-service-gallery {
	width: 100%;
}

.bannez-service-image-card {
	width: 100%;
	background: #fff;
	border: 1px solid rgba(31, 41, 55, 0.10);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 6px 22px rgba(31, 41, 55, 0.06);
}

.bannez-service-image-card > a {
	display: block;
	width: 100%;
}

.bannez-service-featured-image {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	object-fit: contain;
	margin: 0 auto;
}

/* =========================================================
   CLEAN BANNEZ SERVICE CARD
   Image + title + View Service only.
   ========================================================= */
.bannez-service-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid rgba(31, 41, 55, 0.11);
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(31, 41, 55, 0.06);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.bannez-service-card:hover {
	transform: translateY(-3px);
	border-color: rgba(250, 132, 46, 0.28);
	box-shadow: 0 12px 28px rgba(31, 41, 55, 0.11);
}

.bannez-service-card-image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f7f8fa;
}

.bannez-service-card-image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	transition: transform .3s ease;
}

.bannez-service-card:hover .bannez-service-card-image img {
	transform: scale(1.025);
}

.bannez-service-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 13px 13px 12px;
}

.bannez-service-card-title {
	display: block;
	color: #111827 !important;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.24;
	text-decoration: none !important;
	margin-bottom: 14px;
}

.bannez-service-card-title:hover {
	color: #FA842E !important;
}

.bannez-view-service-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	margin-top: auto;
	padding: 10px 12px;
	border-radius: 7px;
	background: linear-gradient(135deg, #FA842E 0%, #ff9d54 100%);
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none !important;
	box-shadow:
		0 7px 18px rgba(250, 132, 46, 0.22),
		0 0 0 1px rgba(250, 132, 46, 0.06);
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.bannez-view-service-btn:hover,
.bannez-view-service-btn:focus {
	color: #fff !important;
	transform: translateY(-1px);
	filter: saturate(1.05);
	box-shadow:
		0 10px 24px rgba(250, 132, 46, 0.34),
		0 0 16px rgba(250, 132, 46, 0.18);
}

.bannez-view-service-arrow {
	display: inline-block;
	font-size: 19px;
	line-height: 1;
	transition: transform .2s ease;
}

.bannez-view-service-btn:hover .bannez-view-service-arrow,
.bannez-view-service-btn:focus .bannez-view-service-arrow {
	transform: translateX(4px);
}

/* Ensure no legacy marketplace elements leak into Bannez cards. */
.bannez-service-card .showfavs,
.bannez-service-card ._footer,
.bannez-service-card .badge,
.bannez-service-card .ppt-avatar,
.bannez-service-card [data-list-k="category"],
.bannez-service-card .bannez-card-price {
	display: none !important;
}

@media (max-width: 767.98px) {
	.bannez-service-image-card {
		border-radius: 8px;
	}

	.bannez-service-card-body {
		padding: 12px;
	}

	.bannez-service-card-title {
		font-size: 15px;
		margin-bottom: 12px;
	}

	.bannez-view-service-btn {
		padding: 10px 11px;
		font-size: 13px;
	}
}


/* =========================================================
   MJ10 AJAX CARD FALLBACK
   PremiumPress injects the search cards through AJAX and, in this view,
   it bypasses the child PHP card override. These rules target the actual
   MJ10 card markup so dynamically inserted cards still use Bannez's clean
   agency design.
   ========================================================= */

/* Card shell */
[ppt-box].h-m-mj {
	position: relative;
	display: flex !important;
	flex-direction: column;
	/* Leave real space between wrapped grid rows instead of letting a 100%
	   height card overlap its Bootstrap bottom margin. */
	height: calc(100% - 20px);
	margin-bottom: 20px !important;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(31, 41, 55, 0.12) !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 14px rgba(31, 41, 55, 0.06) !important;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

[ppt-box].h-m-mj:hover {
	transform: translateY(-3px);
	border-color: rgba(250, 132, 46, 0.30) !important;
	box-shadow: 0 12px 28px rgba(31, 41, 55, 0.12) !important;
}

/* Remove seller/avatar, category/rating row, icons, price and badges. */
[ppt-box].h-m-mj ._content > .position-absolute,
[ppt-box].h-m-mj ._content > .pb-2.mt-2,
[ppt-box].h-m-mj ._footer,
[ppt-box].h-m-mj [ppt-search-badges],
[ppt-box].h-m-mj .badge,
[ppt-box].h-m-mj .badge_tooltip,
[ppt-box].h-m-mj .ppt-avatar,
[ppt-box].h-m-mj .showfavs,
[ppt-box].h-m-mj .bannez-card-price {
	display: none !important;
}

/* Keep only a clean title section below the image. */
[ppt-box].h-m-mj ._content {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 0 13px 7px !important;
	border-top: 1px solid rgba(31, 41, 55, 0.08) !important;
}

[ppt-box].h-m-mj ._content > div:has(> ._adtitle) {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 13px 0 0 !important;
	margin: 0 !important;
	line-height: 1.25 !important;
}

[ppt-box].h-m-mj ._adtitle {
	display: flex !important;
	flex-direction: column;
	flex: 1;
	gap: 11px;
	color: #111827 !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	text-decoration: none !important;
}

[ppt-box].h-m-mj ._adtitle:hover {
	color: #111827 !important;
}

/* View Service CTA added inside the existing linked title, so the whole
   CTA is automatically linked to the correct service without extra JS. */
[ppt-box].h-m-mj ._adtitle::after {
	content: "View Service  \2192";
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-top: auto;
	padding: 10px 12px;
	box-sizing: border-box;
	border-radius: 7px;
	background: linear-gradient(135deg, #FA842E 0%, #ff9a4c 100%);
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .1px;
	text-decoration: none !important;
	box-shadow:
		0 7px 18px rgba(250, 132, 46, 0.24),
		0 0 0 1px rgba(250, 132, 46, 0.07);
	transition: transform .2s ease, box-shadow .2s ease, padding .2s ease;
}

[ppt-box].h-m-mj ._adtitle:hover::after {
	padding-left: 15px;
	padding-right: 9px;
	box-shadow:
		0 10px 24px rgba(250, 132, 46, 0.36),
		0 0 17px rgba(250, 132, 46, 0.20);
}

/* The image stays the visual focus and fills the card width cleanly. */
[ppt-box].h-m-mj figure,
[ppt-box].h-m-mj figure > a {
	display: block;
	width: 100%;
}

/* Mobile card cleanup: remove the old rating/price row and make the title
   itself carry the View Service CTA there too. */
.show-mobile .position-relative.mb-3 .lh-20.text-600[ppt-flex-between] {
	display: none !important;
}

.show-mobile .position-relative.mb-3 > .fs-14.text-600 {
	margin-top: 10px !important;
}

@media (max-width: 767.98px) {
	[ppt-box].h-m-mj ._content {
		padding-left: 11px !important;
		padding-right: 11px !important;
		padding-bottom: 7px !important;
	}

	[ppt-box].h-m-mj ._adtitle {
		font-size: 15px !important;
		gap: 10px;
	}

	[ppt-box].h-m-mj ._adtitle::after {
		margin-top: auto;
		padding: 10px 11px;
		font-size: 13px;
	}
}

/* =========================================================
   PERFORMANCE-FRIENDLY STAGGERED CARD REVEAL
   Each visible row reveals left-to-right, then the next row.
   Uses opacity + transform only so it stays GPU-friendly.
   ========================================================= */
html.bannez-card-reveal-enabled [ppt-box].h-m-mj.bannez-card-reveal,
html.bannez-card-reveal-enabled .bannez-service-card.bannez-card-reveal {
	opacity: 0;
	transform: translate3d(0, 26px, 0) scale(.88);
	transform-origin: center center;
	filter: blur(2px);
	transition:
		opacity .52s cubic-bezier(.2,.75,.2,1),
		transform .52s cubic-bezier(.2,.75,.2,1),
		filter .38s ease,
		box-shadow .22s ease,
		border-color .22s ease;
	will-change: opacity, transform;
}

html.bannez-card-reveal-enabled [ppt-box].h-m-mj.bannez-card-reveal.is-visible,
html.bannez-card-reveal-enabled .bannez-service-card.bannez-card-reveal.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
	filter: blur(0);
	will-change: auto;
}

/* Let the browser skip expensive paint/layout work for cards well below the viewport. */
#ajax-search-output > .row > [class*="col-"] {
	content-visibility: auto;
	contain-intrinsic-size: 360px;
}

/* Pure-CSS fallback: if the reveal script is blocked/delayed, cards still
   enter one-by-one instead of appearing all at once. This also works for
   PremiumPress AJAX-inserted Bootstrap columns. */
html:not(.bannez-card-reveal-enabled) .row > [class*="col-"]:has(> [ppt-box].h-m-mj) {
	opacity: 0;
	animation: bannezGridCardIn .55s cubic-bezier(.18,.78,.22,1) forwards;
}

html:not(.bannez-card-reveal-enabled) .row > [class*="col-"]:has(> [ppt-box].h-m-mj):nth-child(1)  { animation-delay: .08s; }
html:not(.bannez-card-reveal-enabled) .row > [class*="col-"]:has(> [ppt-box].h-m-mj):nth-child(2)  { animation-delay: .24s; }
html:not(.bannez-card-reveal-enabled) .row > [class*="col-"]:has(> [ppt-box].h-m-mj):nth-child(3)  { animation-delay: .40s; }
html:not(.bannez-card-reveal-enabled) .row > [class*="col-"]:has(> [ppt-box].h-m-mj):nth-child(4)  { animation-delay: .56s; }
html:not(.bannez-card-reveal-enabled) .row > [class*="col-"]:has(> [ppt-box].h-m-mj):nth-child(5)  { animation-delay: .88s; }
html:not(.bannez-card-reveal-enabled) .row > [class*="col-"]:has(> [ppt-box].h-m-mj):nth-child(6)  { animation-delay: 1.04s; }
html:not(.bannez-card-reveal-enabled) .row > [class*="col-"]:has(> [ppt-box].h-m-mj):nth-child(7)  { animation-delay: 1.20s; }
html:not(.bannez-card-reveal-enabled) .row > [class*="col-"]:has(> [ppt-box].h-m-mj):nth-child(8)  { animation-delay: 1.36s; }
html:not(.bannez-card-reveal-enabled) .row > [class*="col-"]:has(> [ppt-box].h-m-mj):nth-child(9)  { animation-delay: 1.68s; }
html:not(.bannez-card-reveal-enabled) .row > [class*="col-"]:has(> [ppt-box].h-m-mj):nth-child(10) { animation-delay: 1.84s; }
html:not(.bannez-card-reveal-enabled) .row > [class*="col-"]:has(> [ppt-box].h-m-mj):nth-child(11) { animation-delay: 2.00s; }
html:not(.bannez-card-reveal-enabled) .row > [class*="col-"]:has(> [ppt-box].h-m-mj):nth-child(12) { animation-delay: 2.16s; }

@keyframes bannezGridCardIn {
	0% {
		opacity: 0;
		transform: translate3d(0, 28px, 0) scale(.86);
		filter: blur(3px);
	}
	65% {
		opacity: 1;
		transform: translate3d(0, -3px, 0) scale(1.018);
		filter: blur(0);
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
		filter: blur(0);
	}
}