/*
 * PropertyFlow Pro — property page design system.
 *
 * Palette: warm paper background, near-black ink text, deep emerald as the
 * single brand accent (booking CTAs, links, active nav state), muted ochre
 * reserved only for the rating star. Deliberately not the cream+terracotta
 * or near-black+neon combinations that show up by default — this is a
 * boutique-hospitality palette instead: calm, warm, editorial.
 *
 * Type: Fraunces (a soft-contrast display serif) for headings and price,
 * Work Sans for everything functional. Loaded from Google Fonts by
 * PropertyPageRenderer::enqueue_assets().
 */

.pfp-root,
.pfp-root * {
	box-sizing: border-box;
}

.pfp-root {
	--pfp-ink: #211d18;
	--pfp-ink-soft: #6d6558;
	--pfp-paper: #fbf9f5;
	--pfp-card: #ffffff;
	--pfp-line: #e7e1d3;
	--pfp-accent: #2f5d50;
	--pfp-accent-ink: #1d3d34;
	--pfp-accent-tint: #e7efec;
	--pfp-gold: #c98a3e;
	--pfp-radius: 14px;
	--pfp-radius-sm: 8px;
	--pfp-content-width: 1180px;
	--pfp-showcase-width: 1520px;
	--pfp-font-display: 'Fraunces', ui-serif, Georgia, serif;
	--pfp-font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-family: var(--pfp-font-body);
	color: var(--pfp-ink);
	line-height: 1.55;
	display: block;
}

/* Header (title) sits in the normal reading-width column, centered. */
.pfp-page-header {
	max-width: var(--pfp-content-width);
	margin: 32px auto 0;
	padding: 0 24px;
}

@media (max-width: 640px) {
	.pfp-page-header {
		padding: 0 16px;
	}
}

/* The gallery band breaks out to the full viewport width regardless of
   any ancestor container's max-width/padding (a common WordPress theme
   constraint on the_content output) using the standard 100vw breakout
   technique. The inner grid still centers itself with its own max-width
   so photos aren't literally edge-to-edge on very wide screens. */
.pfp-page-gallery-band {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	margin-top: 20px;
	padding: 0 24px;
}

.pfp-page-gallery-band > .pfp-gallery {
	max-width: var(--pfp-showcase-width);
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 640px) {
	.pfp-page-gallery-band {
		padding: 0 16px;
	}
}

.pfp-page {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 48px;
	max-width: var(--pfp-content-width);
	margin: 40px auto 0;
	padding: 0 24px;
}

@media (max-width: 960px) {
	.pfp-page {
		grid-template-columns: 1fr;
		gap: 32px;
		margin-top: 24px;
		padding-bottom: 88px; /* room for the mobile sticky bar */
	}
}

.pfp-page__main {
	min-width: 0;
}

/* ---------- Header ---------- */

.pfp-header {
	margin-bottom: 20px;
}

.pfp-header__title {
	font-family: var(--pfp-font-display);
	font-weight: 500;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.15;
	margin: 0 0 10px;
	letter-spacing: -0.01em;
}

.pfp-header__meta {
	font-size: 14px;
	color: var(--pfp-ink-soft);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.pfp-header__rating {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--pfp-ink);
	font-weight: 500;
}

.pfp-header__rating svg {
	color: var(--pfp-gold);
}

.pfp-header__dot {
	opacity: 0.5;
}

/* ---------- Sticky sub-nav ---------- */

.pfp-nav {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	gap: 4px;
	padding: 14px 0;
	margin-bottom: 24px;
	background: var(--pfp-paper);
	border-bottom: 1px solid var(--pfp-line);
	overflow-x: auto;
	scrollbar-width: none;
}

.pfp-nav::-webkit-scrollbar {
	display: none;
}

.pfp-nav a {
	flex: none;
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	color: var(--pfp-ink-soft);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}

.pfp-nav a:hover {
	background: var(--pfp-accent-tint);
	color: var(--pfp-accent-ink);
}

.pfp-nav a.is-active {
	background: var(--pfp-accent);
	color: #fff;
}

/* ---------- Gallery ---------- */

.pfp-gallery {
	margin-bottom: 40px;
	position: relative;
}

.pfp-gallery__grid {
	display: grid;
	gap: 8px;
	border-radius: var(--pfp-radius);
	overflow: hidden;
	height: 520px;
	box-shadow: 0 8px 30px rgba(33, 29, 24, 0.08);
}

.pfp-gallery__grid--1 {
	grid-template-columns: 1fr;
}

.pfp-gallery__grid--2,
.pfp-gallery__grid--3,
.pfp-gallery__grid--4,
.pfp-gallery__grid--5 {
	grid-template-columns: 1.3fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}

.pfp-gallery__grid--2 .pfp-gallery__tile:first-child,
.pfp-gallery__grid--3 .pfp-gallery__tile:first-child,
.pfp-gallery__grid--4 .pfp-gallery__tile:first-child,
.pfp-gallery__grid--5 .pfp-gallery__tile:first-child {
	grid-row: 1 / 3;
	grid-column: 1;
}

.pfp-gallery__tile {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	overflow: hidden;
}

.pfp-gallery__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.pfp-gallery__tile:hover img {
	transform: scale(1.035);
}

.pfp-gallery__more {
	position: absolute;
	right: 16px;
	bottom: 16px;
	padding: 9px 16px;
	background: #fff;
	border: 1px solid var(--pfp-ink);
	border-radius: var(--pfp-radius-sm);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	font-family: var(--pfp-font-body);
	display: none;
}

.pfp-gallery--overflow .pfp-gallery__more {
	display: block;
}

@media (max-width: 720px) {
	.pfp-gallery__grid {
		height: 300px;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
	}

	/* Only hide the extra photo tiles on mobile — .pfp-gallery__more (the
	   "Show all photos" button) is also a direct child of this grid and
	   must stay visible; a previous version of this rule targeted *all*
	   non-first children and accidentally hid that button too. */
	.pfp-gallery__tile:not(:first-child) {
		display: none;
	}

	.pfp-gallery__grid--1 .pfp-gallery__tile:first-child,
	.pfp-gallery__grid .pfp-gallery__tile:first-child {
		grid-row: auto;
		grid-column: auto;
	}

	.pfp-gallery__more {
		right: 12px;
		bottom: 12px;
		font-size: 12px;
		padding: 8px 12px;
		display: block;
	}
}

/* ---------- Lightbox ---------- */

.pfp-lightbox {
	position: fixed;
	inset: 0;
	/* WordPress's own admin toolbar (visible to any logged-in user, e.g.
	   an owner previewing their own site) uses z-index: 99999 — well
	   above this lightbox's previous z-index of 1000, which meant the
	   admin bar sat on top of and covered the close button and photo
	   counter entirely for anyone logged in. This value is deliberately
	   set far above any realistic WordPress core or plugin z-index
	   (WordPress core itself never exceeds 100000) rather than just
	   edging past 99999, so a future, even higher-z-indexed element
	   can't reintroduce this same bug. */
	z-index: 999999;
	background: rgba(20, 17, 13, 0.96);
	display: flex;
	flex-direction: column;
	color: #fff;
}

.pfp-lightbox[hidden] {
	display: none;
}

.pfp-lightbox__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 24px;
	font-size: 14px;
}

.pfp-lightbox__close {
	background: none;
	border: none;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
}

.pfp-lightbox__stage {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 0;
	padding: 0 16px;
}

.pfp-lightbox__stage img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 6px;
}

.pfp-lightbox__nav {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 24px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.pfp-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.24);
}

.pfp-lightbox__filmstrip {
	display: flex;
	gap: 8px;
	padding: 16px 24px;
	overflow-x: auto;
}

.pfp-lightbox__thumb {
	flex: none;
	width: 64px;
	height: 48px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.pfp-lightbox__thumb.is-active {
	opacity: 1;
	border-color: #fff;
}

.pfp-lightbox__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- Cards / sections ---------- */

.pfp-section-wrap + .pfp-section-wrap .pfp-card {
	border-top: 1px solid var(--pfp-line);
	padding-top: 32px;
}

.pfp-card {
	padding-bottom: 32px;
}

.pfp-card--muted {
	background: var(--pfp-accent-tint);
	border: none !important;
	border-radius: var(--pfp-radius);
	padding: 18px 20px !important;
	margin-bottom: 8px;
	font-size: 14px;
}

.pfp-card__title {
	font-family: var(--pfp-font-display);
	font-weight: 500;
	font-size: 22px;
	margin: 0 0 14px;
	letter-spacing: -0.005em;
}

.pfp-overview__stats {
	font-size: 15px;
	color: var(--pfp-ink-soft);
	margin: 0 0 14px;
}

.pfp-overview__description {
	font-size: 15px;
}

.pfp-link {
	color: var(--pfp-accent);
	font-weight: 600;
	text-decoration: none;
}

.pfp-link:hover {
	text-decoration: underline;
}

/* ---------- Amenities ---------- */

.pfp-bedroom-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 18px;
	margin-top: 16px;
}

.pfp-bedroom-card {
	border-radius: var(--pfp-radius-sm, 12px);
	overflow: hidden;
	border: 1px solid var(--pfp-line);
	background: var(--pfp-paper);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.pfp-bedroom-card:hover {
	box-shadow: 0 8px 24px rgba(33, 29, 24, 0.08);
	transform: translateY(-2px);
}

.pfp-bedroom-card__image {
	height: 160px;
	background-size: cover;
	background-position: center;
	background-color: var(--pfp-accent-tint, #eaf5ee);
	position: relative;
	overflow: hidden;
}

.pfp-bedroom-card__image--placeholder {
	background: linear-gradient(135deg, var(--pfp-accent-tint, #eaf5ee), var(--pfp-paper));
}

.pfp-bedroom-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.pfp-bedroom-slide.is-active {
	opacity: 1;
}

.pfp-bedroom-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.85);
	color: var(--pfp-ink, #211d18);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: background 0.15s ease;
}

.pfp-bedroom-slider__arrow:hover {
	background: #fff;
}

.pfp-bedroom-slider__arrow--prev {
	left: 8px;
}

.pfp-bedroom-slider__arrow--next {
	right: 8px;
}

.pfp-bedroom-slider__count {
	position: absolute;
	bottom: 8px;
	right: 8px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 999px;
	z-index: 2;
}

.pfp-bedroom-card__body {
	padding: 14px 16px 16px;
}

.pfp-bedroom-card__name {
	font-family: var(--pfp-font-display);
	font-weight: 500;
	font-size: 16px;
	margin: 0 0 4px;
}

.pfp-bedroom-card__bed-type {
	color: var(--pfp-accent);
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 6px;
}

.pfp-bedroom-card__description {
	font-size: 13px;
	color: var(--pfp-ink-soft);
	margin: 0;
	line-height: 1.5;
}

.pfp-amenities {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 14px 16px;
}

.pfp-amenities li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
}

.pfp-amenities svg {
	flex: none;
	color: var(--pfp-accent);
}

.pfp-plain-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pfp-plain-list li {
	padding: 8px 0;
	border-bottom: 1px solid var(--pfp-line);
	font-size: 14px;
}

.pfp-plain-list li:last-child {
	border-bottom: none;
}

/* ---------- Host ---------- */

.pfp-host {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.pfp-host__photo,
.pfp-host__initial {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.pfp-host__initial {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pfp-accent);
	color: #fff;
	font-family: var(--pfp-font-display);
	font-size: 22px;
}

.pfp-host__name {
	font-size: 15px;
}

.pfp-host__bio {
	font-size: 14px;
	color: var(--pfp-ink-soft);
	margin: 4px 0 0;
}

/* ---------- FAQ ---------- */

.pfp-faq__item {
	border-bottom: 1px solid var(--pfp-line);
	padding: 14px 0;
}

.pfp-faq__item summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
	font-size: 15px;
}

.pfp-faq__item summary::-webkit-details-marker {
	display: none;
}

.pfp-faq__chevron {
	flex: none;
	color: var(--pfp-ink-soft);
	transition: transform 0.2s ease;
}

.pfp-faq__item[open] .pfp-faq__chevron {
	transform: rotate(180deg);
}

.pfp-faq__item p {
	font-size: 14px;
	color: var(--pfp-ink-soft);
	margin: 10px 0 0;
}

/* ---------- Footer CTA ---------- */

.pfp-footer-cta {
	text-align: center;
	padding: 40px 0;
	border-top: 1px solid var(--pfp-line);
}

.pfp-footer-cta h2 {
	font-family: var(--pfp-font-display);
	font-weight: 500;
	font-size: 24px;
	margin: 0 0 18px;
}

/* ---------- Buttons ---------- */

.pfp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 26px;
	border-radius: var(--pfp-radius-sm);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	font-family: var(--pfp-font-body);
}

.pfp-button--primary {
	background: var(--pfp-accent);
	color: #fff;
	transition: background-color 0.15s ease;
}

.pfp-button--primary:hover {
	background: var(--pfp-accent-ink);
	color: #fff;
}

/* ---------- Sidebar (desktop sticky booking card / mobile modal) ---------- */

.pfp-page__sidebar {
	min-width: 0;
}

.pfp-page__sidebar-inner {
	position: sticky;
	top: 24px;
}

.pfp-modal-close {
	display: none;
}

@media (max-width: 960px) {
	/* On mobile the sidebar becomes a bottom-sheet modal, hidden until
	   the mobile bar or footer CTA opens it via JS (see property-page.js),
	   rather than being permanently display:none — the booking widget
	   needs to be reachable somehow on mobile, since there's no sticky
	   sidebar column to show it in inline. */
	.pfp-page__sidebar {
		position: fixed;
		inset: 0;
		z-index: 200;
		display: none;
		align-items: flex-end;
		justify-content: center;
		background: rgba(33, 29, 24, 0.45);
	}

	.pfp-page__sidebar.is-open {
		display: flex;
	}

	.pfp-page__sidebar-inner {
		position: static;
		width: 100%;
		max-height: 88vh;
		overflow-y: auto;
		background: var(--pfp-card);
		border-radius: 18px 18px 0 0;
		padding: 20px 20px 28px;
		box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
	}

	.pfp-modal-close {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 12px;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		border: none;
		background: var(--pfp-accent-tint);
		color: var(--pfp-accent-ink);
		font-size: 18px;
		cursor: pointer;
	}
}

/* ---------- Mobile sticky bar ---------- */

.pfp-mobile-bar {
	display: none;
}

@media (max-width: 960px) {
	.pfp-mobile-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 30;
		background: #fff;
		border-top: 1px solid var(--pfp-line);
		padding: 12px 20px;
		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
	}
}

.pfp-mobile-bar__price {
	font-family: var(--pfp-font-display);
	font-size: 18px;
	font-weight: 500;
}

.pfp-mobile-bar__price small {
	font-family: var(--pfp-font-body);
	font-size: 13px;
	font-weight: 400;
	color: var(--pfp-ink-soft);
}

/* ---------- Booking widget (re-themed to match) ---------- */
/* Scoped under .pfp-page so these reliably override booking-widget.css
   regardless of which stylesheet happens to load second. */

.pfp-page .pfp-booking-widget {
	border: 1px solid var(--pfp-line);
	border-radius: var(--pfp-radius);
	padding: 22px;
	font-family: var(--pfp-font-body);
	color: var(--pfp-ink);
	box-shadow: 0 1px 3px rgba(33, 29, 24, 0.06);
	background: var(--pfp-card);
}

.pfp-page .pfp-booking-widget__row label {
	color: var(--pfp-ink-soft);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.pfp-page .pfp-booking-widget__row input {
	border-color: var(--pfp-line);
	border-radius: var(--pfp-radius-sm);
	font-family: var(--pfp-font-body);
}

.pfp-page .pfp-price-lines__total {
	font-family: var(--pfp-font-display);
	border-top-color: var(--pfp-ink);
}

.pfp-page .pfp-price-lines__coupon {
	color: var(--pfp-accent);
}

.pfp-page .pfp-booking-widget__submit {
	background: var(--pfp-accent);
	border-radius: var(--pfp-radius-sm);
	font-family: var(--pfp-font-body);
}

.pfp-page .pfp-booking-widget__submit:hover:not(:disabled) {
	background: var(--pfp-accent-ink);
}

/* ---------- Videos & Virtual Tours ---------- */

.pfp-media-item {
	margin-bottom: 24px;
}

.pfp-media-item:last-child {
	margin-bottom: 0;
}

.pfp-media-item__label {
	font-weight: 600;
	font-size: 14px;
	margin: 0 0 8px;
}

.pfp-media-item__embed {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 */
	border-radius: var(--pfp-radius-sm);
	overflow: hidden;
	background: #000;
}

.pfp-media-item__embed iframe,
.pfp-media-item__embed embed,
.pfp-media-item__embed object {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.pfp-map {
	margin: 12px 0;
	border-radius: var(--pfp-radius-sm);
	overflow: hidden;
	height: 280px;
	background: #eee;
}

.pfp-map iframe {
	width: 100%;
	height: 100%;
	border: none;
}

.pfp-map--leaflet {
	z-index: 1; /* Keeps Leaflet's internal panes from stacking above the sticky nav/sidebar. */
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.pfp-gallery__tile img,
	.pfp-faq__chevron,
	.pfp-nav a,
	.pfp-lightbox__nav,
	.pfp-lightbox__thumb {
		transition: none !important;
	}
}