/*
 * WP360 Vendors Design: browse-by-category strip ([wp360_vendor_categories]).
 *
 * Replaces 16 full-width 270px photo tiles (four rows, ~1,300px of scroll on desktop and
 * ~4,600px on a phone) with one compact strip: two rows of small square tiles on desktop,
 * a two-row swipe rail below 1025px. Brand navy #203d67 matches the theme's buttons.
 */

.wp360-cats {
	--wp360-navy: #203d67;
	--wp360-ink: #1c2230;
	--wp360-muted: #566070;
	--wp360-line: #e6e8ec;
	--wp360-tile: 1fr;
	margin: 8px 0 56px;
	font-family: Montserrat, system-ui, sans-serif;
}

.wp360-cats__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 24px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.wp360-cats h2.wp360-cats__title {
	margin: 0;
	font-size: 32px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--wp360-ink);
}

.wp360-cats p.wp360-cats__sub {
	margin: 6px 0 0;
	font-size: 17px;
	line-height: 1.5;
	color: var(--wp360-muted);
}

.wp360-cats__all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 20px;
	border: 1.5px solid var(--wp360-navy);
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	color: var(--wp360-navy);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease;
}

.wp360-cats__all:hover,
.wp360-cats__all:focus-visible {
	background: var(--wp360-navy);
	color: #fff;
}

.wp360-cats__grid {
	display: grid;
	grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr));
	gap: 24px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp360-cat {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp360-cat__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	border-radius: 18px;
	outline-offset: 4px;
}

.wp360-cat__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 18px;
	background: #f1ede8;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
	transition: box-shadow .25s ease, transform .25s ease;
}

.wp360-cat__media::after {
	/* Hairline ring keeps pale photos from bleeding into the white page. */
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .08);
	pointer-events: none;
}

/* Listeo sets img { height: auto } globally, so pin the photo to the square explicitly. */
.wp360-cats .wp360-cat__media .wp360-cat__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}

.wp360-cat__mono {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	font-size: 40px;
	font-weight: 700;
	color: var(--wp360-navy);
	background: linear-gradient(135deg, #eef2f8, #f7f1ea);
}

.wp360-cat__label {
	font-size: 16px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-align: center;
	color: var(--wp360-ink);
	transition: color .2s ease;
}

.wp360-cat__link:hover .wp360-cat__media,
.wp360-cat__link:focus-visible .wp360-cat__media {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px -10px rgba(16, 24, 40, .35);
}

.wp360-cats .wp360-cat__link:hover .wp360-cat__img,
.wp360-cats .wp360-cat__link:focus-visible .wp360-cat__img {
	transform: scale(1.06);
}

.wp360-cat__link:hover .wp360-cat__label,
.wp360-cat__link:focus-visible .wp360-cat__label {
	color: var(--wp360-navy);
}

/* Tablet and phone: two-row swipe rail instead of a tall wrap. */
@media (max-width: 1024px) {
	.wp360-cats {
		margin-bottom: 40px;
	}

	.wp360-cats__grid {
		grid-template-columns: none;
		grid-template-rows: repeat(2, auto);
		grid-auto-flow: column;
		grid-auto-columns: 128px;
		gap: 20px 14px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 0;
		padding-bottom: 6px;
		scrollbar-width: none;
		/* Fade the trailing edge so the cut-off column reads as "swipe for more". */
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
	}

	.wp360-cats__grid::-webkit-scrollbar {
		display: none;
	}

	.wp360-cat {
		scroll-snap-align: start;
	}
}

@media (max-width: 600px) {
	.wp360-cats__head {
		margin-bottom: 18px;
	}

	.wp360-cats h2.wp360-cats__title {
		font-size: 26px;
	}

	.wp360-cats p.wp360-cats__sub {
		font-size: 16px;
	}

	.wp360-cats__all {
		min-height: 48px;
	}

	.wp360-cats__grid {
		grid-auto-columns: 124px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp360-cat__media,
	.wp360-cats .wp360-cat__media .wp360-cat__img {
		transition: none;
	}
}

/* =========================================================================
 * Hold your date card (wp360-hold-my-date.php), first in the listing sidebar.
 * Inputs are 17px so iOS does not zoom on focus; every target is 48px+.
 * ====================================================================== */

.wp360-hold {
	--wp360-navy: #203d67;
	--wp360-ink: #1c2230;
	--wp360-muted: #566070;
	margin: 0 0 24px;
	padding: 0 0 24px;
	border-bottom: 1px solid #e3e6eb;
	font-family: Montserrat, system-ui, sans-serif;
	scroll-margin-top: 96px;
}

/* The listing template already frames the sidebar in a grey panel; turn that panel white
 * and let the card be its content rather than a box inside a box. */
.elementor-widget-container:has(> .wp360-hold) {
	background: #fff !important;
	border-color: #e3e6eb !important;
	box-shadow: 0 18px 40px -24px rgba(16, 24, 40, .35);
}

.wp360-hold h3.wp360-hold__title {
	margin: 0;
	font-size: 24px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--wp360-ink);
}

.wp360-hold p.wp360-hold__sub {
	margin: 6px 0 20px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--wp360-muted);
}

.wp360-hold__form {
	display: grid;
	gap: 14px;
	margin: 0;
}

.wp360-hold__row {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 12px;
}

.wp360-hold__field {
	display: grid;
	gap: 6px;
	margin: 0;
}

.wp360-hold__field > span {
	font-size: 15px;
	font-weight: 600;
	color: var(--wp360-ink);
}

.wp360-hold__field em {
	font-style: normal;
	font-weight: 500;
	color: var(--wp360-muted);
}

.wp360-hold .wp360-hold__field input,
.wp360-hold .wp360-hold__field select,
.wp360-hold .wp360-hold__field textarea {
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 12px 14px;
	border: 1.5px solid #cfd4dc;
	border-radius: 12px;
	background: #fff;
	box-shadow: none;
	font: 500 17px/1.4 Montserrat, system-ui, sans-serif;
	color: var(--wp360-ink);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.wp360-hold .wp360-hold__field textarea {
	min-height: 96px;
	resize: vertical;
}

.wp360-hold .wp360-hold__field input:focus,
.wp360-hold .wp360-hold__field select:focus,
.wp360-hold .wp360-hold__field textarea:focus {
	outline: none;
	border-color: var(--wp360-navy);
	box-shadow: 0 0 0 4px rgba(32, 61, 103, .15);
}

.wp360-hold__more {
	margin: 0;
}

.wp360-hold__more > summary {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	font-size: 16px;
	font-weight: 600;
	color: var(--wp360-navy);
	cursor: pointer;
	list-style: none;
}

.wp360-hold__more > summary::-webkit-details-marker {
	display: none;
}

.wp360-hold__more > summary::before {
	content: "+";
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin-right: 10px;
	border-radius: 50%;
	background: #e8eef7;
	font-size: 17px;
	line-height: 1;
}

.wp360-hold__more[open] > summary::before {
	content: "\2212";
}

.wp360-hold__more[open] > summary {
	margin-bottom: 6px;
}

.wp360-hold__more .wp360-hold__field + .wp360-hold__field {
	margin-top: 14px;
}

.wp360-hold__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wp360-hold .wp360-hold__btn {
	width: 100%;
	min-height: 56px;
	margin: 4px 0 0;
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	background: var(--wp360-navy);
	color: #fff;
	font: 700 17px/1 Montserrat, system-ui, sans-serif;
	letter-spacing: .005em;
	cursor: pointer;
	transition: background-color .2s ease, transform .1s ease;
}

.wp360-hold .wp360-hold__btn:hover {
	background: #162d4f;
}

.wp360-hold .wp360-hold__btn:active {
	transform: translateY(1px);
}

.wp360-hold .wp360-hold__btn:disabled {
	opacity: .7;
	cursor: wait;
}

.wp360-hold p.wp360-hold__msg {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
}

.wp360-hold p.wp360-hold__msg:empty {
	display: none;
}

.wp360-hold p.wp360-hold__msg.is-error {
	color: #b42318;
	font-weight: 600;
}

.wp360-hold__done {
	padding: 18px;
	border-radius: 14px;
	background: #ecf6ef;
	color: #14532d;
}

.wp360-hold__done strong {
	display: block;
	font-size: 19px;
	margin-bottom: 6px;
}

.wp360-hold__done p {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: #1c3b2a;
}

.wp360-hold ul.wp360-hold__trust {
	display: grid;
	gap: 10px;
	margin: 20px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid #edf0f3;
	list-style: none;
}

.wp360-hold ul.wp360-hold__trust li {
	position: relative;
	margin: 0;
	padding: 0 0 0 30px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--wp360-muted);
}

.wp360-hold ul.wp360-hold__trust li strong {
	color: var(--wp360-ink);
	font-weight: 600;
}

.wp360-hold ul.wp360-hold__trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #e8eef7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='%23203d67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* Pinned button for phones and tablets; desktop already shows the card beside the content. */
.wp360-hold-bar {
	display: none;
}

@media (max-width: 991px) {
	.wp360-hold-bar {
		position: fixed;
		left: 16px;
		right: 84px;
		bottom: 16px;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		min-height: 56px;
		border-radius: 999px;
		background: #203d67;
		color: #fff;
		font: 700 17px/1 Montserrat, system-ui, sans-serif;
		text-decoration: none;
		box-shadow: 0 14px 30px -12px rgba(16, 24, 40, .55);
		transition: opacity .2s ease, transform .2s ease;
	}

	.wp360-hold-bar small {
		font-size: 14px;
		font-weight: 500;
		opacity: .85;
	}

	.wp360-hold-bar:hover,
	.wp360-hold-bar:focus {
		color: #fff;
	}

	.wp360-hold-bar.is-hidden {
		opacity: 0;
		transform: translateY(20px);
		pointer-events: none;
	}

	body.single-listing {
		padding-bottom: 88px;
	}
}

/* Vendor pages on phones: the theme's full-width .row (negative gutters) and the section
 * tab bar both ran ~30px past the screen, so phones zoomed the page out and the pinned
 * button sat half off the bottom edge. Clip the stray gutter; let the tabs swipe. */
@media (max-width: 991px) {
	/* A Bootstrap .row placed straight in an Elementor widget, with no .container to
	 * absorb its -15px gutters. */
	body.single-listing .elementor-widget-container > .row {
		margin-left: 0;
		margin-right: 0;
	}

	body.single-listing #listing-nav {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		white-space: nowrap;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	body.single-listing #listing-nav::-webkit-scrollbar {
		display: none;
	}

	body.single-listing #listing-nav > li {
		flex: 0 0 auto;
	}

	.wp360-hold-bar {
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	}
}

/* Real rating on vendor pages (replaces the template's static five stars). */
.wp360-rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-family: Montserrat, system-ui, sans-serif;
	font-size: 16px;
	color: #1c2230;
}

.wp360-rating > span {
	color: #566070;
}

.wp360-rating__src {
	flex-basis: 100%;
	font-size: 14px;
	color: #566070;
}

.wp360-rating__src a {
	color: #566070;
}

p.wp360-rating--new {
	display: inline-flex;
	margin: 0;
	padding: 4px 12px;
	border-radius: 999px;
	background: #eef6f0;
	color: #1d5c34;
	font-size: 14px;
	font-weight: 600;
}

/* "All vendors" tile that closes an uneven last row: a 2x2 mosaic of category photos
 * under a navy wash with the live vendor count, so it matches the photo tiles beside it. */
.wp360-cat--all .wp360-cat__media {
	background: var(--wp360-navy);
}

.wp360-cat__mosaic {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template: 1fr 1fr / 1fr 1fr;
	gap: 2px;
}

.wp360-cats .wp360-cat__mosaic .wp360-cat__mosimg {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}

.wp360-cat__allcopy {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	color: #fff;
	text-align: center;
	background: linear-gradient(160deg, rgba(32, 61, 103, .72) 0%, rgba(20, 38, 66, .9) 100%);
	transition: background-color .25s ease;
}

.wp360-cat__allcopy strong {
	font-size: 40px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.wp360-cat__allcopy span {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
}

.wp360-cat__allcopy .wp360-cat__allgo {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin-top: 10px;
	border-radius: 999px;
	background: #fff;
	color: var(--wp360-navy);
	font-size: 18px;
	letter-spacing: 0;
	transition: transform .25s ease;
}

.wp360-cats .wp360-cat--all .wp360-cat__link:hover .wp360-cat__mosimg,
.wp360-cats .wp360-cat--all .wp360-cat__link:focus-visible .wp360-cat__mosimg {
	transform: scale(1.08);
}

.wp360-cat--all .wp360-cat__link:hover .wp360-cat__allgo,
.wp360-cat--all .wp360-cat__link:focus-visible .wp360-cat__allgo {
	transform: translateX(4px);
}

@media (max-width: 1024px) {
	.wp360-cat__allcopy strong {
		font-size: 32px;
	}

	.wp360-cat__allcopy .wp360-cat__allgo {
		width: 30px;
		height: 30px;
		margin-top: 6px;
	}
}

/* -------------------------------------------------------------------------
 * Vendor page: Prices & packages, Meet the team, Past weddings
 * (rendered by wp360-vendors-design.php from listing meta).
 * ---------------------------------------------------------------------- */

.wp360-pk,
.wp360-team,
.wp360-pw {
	--navy: #203d67;
	--ink: #1c2230;
	--muted: #566070;
	--line: #e3e6eb;
	display: grid;
	gap: 16px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	font-family: Montserrat, system-ui, sans-serif;
}

.wp360-pk {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.wp360-pk__item {
	margin: 0;
	padding: 18px 20px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: #fff;
}

.wp360-pk h3.wp360-pk__name {
	margin: 0 0 6px;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--ink);
}

.wp360-pk p.wp360-pk__price {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--navy);
}

.wp360-pk p.wp360-pk__price span {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--muted);
}

.wp360-pk p.wp360-pk__price--ask {
	font-size: 17px;
}

.wp360-pk__inc {
	margin: 12px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--line);
	list-style: none;
}

.wp360-pk__inc li {
	position: relative;
	margin: 0 0 6px;
	padding-left: 22px;
	font-size: 16px;
	line-height: 1.45;
	color: var(--ink);
}

.wp360-pk__inc li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 6px;
	width: 10px;
	height: 6px;
	border-left: 2px solid var(--navy);
	border-bottom: 2px solid var(--navy);
	transform: rotate(-45deg);
}

p.wp360-pk__note {
	margin: 12px 0 0;
	font-family: Montserrat, system-ui, sans-serif;
	font-size: 14px;
	color: #566070;
}

.wp360-team {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.wp360-team__m {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 0;
}

.wp360-team .wp360-team__img,
.wp360-team__mono {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
}

.wp360-team__mono {
	display: grid;
	place-items: center;
	font-size: 26px;
	font-weight: 700;
	color: var(--navy);
	background: linear-gradient(135deg, #eef2f8, #f7f1ea);
}

.wp360-team h3.wp360-team__name {
	margin: 2px 0 2px;
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
}

.wp360-team p.wp360-team__role {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 600;
	color: var(--navy);
}

.wp360-team p.wp360-team__bio {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--muted);
}

.wp360-pw {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 24px;
}

.wp360-pw__w {
	margin: 0;
}

.wp360-pw__grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 4px;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 14px;
}

.wp360-pw__ph {
	position: relative;
	display: block;
	overflow: hidden;
	background: #f1ede8;
}

.wp360-pw__ph.is-lead {
	grid-row: span 2;
}

.wp360-pw__ph.is-extra {
	display: none;
}

/* Only a lead photo: let it fill the frame. */
.wp360-pw__ph.is-lead:only-child {
	grid-column: span 2;
}

.wp360-pw .wp360-pw__ph img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .4s ease;
}

.wp360-pw .wp360-pw__ph:hover img {
	transform: scale(1.04);
}

.wp360-pw__more {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(16, 24, 40, .45);
	font-size: 22px;
	font-weight: 700;
	color: #fff;
}

.wp360-pw h3.wp360-pw__title {
	margin: 12px 0 2px;
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
}

.wp360-pw p.wp360-pw__where,
.wp360-pw p.wp360-pw__credit {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--muted);
}

.wp360-pw p.wp360-pw__credit {
	font-size: 13px;
}

/* Unpriced tiers: compact cards, the inclusions carry them. */
.wp360-pk--services .wp360-pk__inc {
	margin-top: 8px;
	padding-top: 8px;
}