/* ==========================================================================
   WSH Alohana — Component Styles
   DO NOT hardcode colors, fonts, or section padding in this file.
   All design values come from wsh-design-tokens.css as CSS custom properties.
   To update the plugin's visual style, edit wsh-design-tokens.css — not this file.
   ========================================================================== */

/*
 * [wsh_property_detail] — Property Detail page styles.
 *
 * Scope: .wsh-detail-page wrapper
 */

/* Suppress the WP/Elementor page title on detail pages */
.wsh-property-detail-page .entry-title,
.wsh-property-detail-page h1.page-title {
	display: none;
}

/* ---------- Booking expired notice ---------- */

.wsh-expired-notice { /* TODO: review — semantic status color */
	background: #fff8e1;
	border: 1px solid #ffe082;
	color: #6d4c00;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 14px;
	margin-bottom: 18px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.wsh-expired-notice__close {
	background: none;
	border: 0;
	font-size: 20px;
	line-height: 1;
	color: #6d4c00;
	cursor: pointer;
	padding: 0 4px;
	flex-shrink: 0;
}

.wsh-expired-notice__close:hover {
	color: #333;
}

.wsh-detail-page {
	max-width: 1280px;
	margin: 0 auto;
	padding: 20px 20px 60px;
	font-family: var(--wsh-font-body);
	color: var(--wsh-color-dark);
}

/* ---------- Not-found state ---------- */

.wsh-detail-notfound {
	max-width: 640px;
	margin: 80px auto;
	text-align: center;
	padding: 40px 20px;
}

.wsh-detail-notfound h2 {
	margin: 0 0 12px;
	color: var(--wsh-color-dark);
}

.wsh-detail-backbtn {
	display: inline-block;
	margin-top: 12px;
	padding: 10px 20px;
	background: var(--wsh-color-green);
	color: var(--wsh-color-white);
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
}

.wsh-detail-backbtn:hover {
	background: var(--wsh-color-green-dark);
	color: var(--wsh-color-white);
}

/* ---------- Breadcrumb ---------- */

.wsh-detail-breadcrumb {
	margin: 0 0 18px;
	font-size: 13px;
	color: #666; /* TODO: review — close but not exact palette match */
}

.wsh-detail-breadcrumb a {
	color: var(--wsh-color-green);
	text-decoration: none;
}

.wsh-detail-breadcrumb a:hover {
	text-decoration: underline;
}

.wsh-detail-breadcrumb__sep {
	margin: 0 8px;
	color: #bbb;
}

.wsh-detail-breadcrumb__current {
	color: var(--wsh-color-dark);
}

/* ---------- Photo gallery ---------- */

.wsh-detail-gallery {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 10px;
	margin-bottom: 36px;
	padding-bottom: 8px;
	max-height: 480px;
	overflow: hidden;
}

.wsh-detail-gallery__main {
	border-radius: 10px;
	overflow: hidden;
	background: linear-gradient(135deg, #e1eae4 0%, #cfdfd6 100%);
	min-height: 300px;
}

.wsh-detail-gallery__main--empty {
	min-height: 400px;
}

.wsh-detail-gallery__main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wsh-detail-gallery__thumbs {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 10px;
}

.wsh-detail-gallery__thumb {
	border-radius: 10px;
	overflow: hidden;
	background: linear-gradient(135deg, #e1eae4 0%, #cfdfd6 100%);
	min-height: 0;
}

.wsh-detail-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 800px) {
	.wsh-detail-gallery {
		grid-template-columns: 1fr;
		max-height: none;
	}
	.wsh-detail-gallery__thumbs {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
	}
	.wsh-detail-gallery__thumb {
		aspect-ratio: 4 / 3;
	}
}

/* ---------- Two-column layout ---------- */

.wsh-detail-cols {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 32px;
	margin-bottom: 40px;
}

@media (max-width: 800px) {
	.wsh-detail-cols {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* ---------- Left column ---------- */

.wsh-detail-title {
	margin: 0 0 6px;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wsh-color-dark);
}

.wsh-detail-headline {
	margin: 0 0 10px;
	font-size: 15px;
	color: #666; /* TODO: review — close but not exact palette match */
	font-style: italic;
}

.wsh-detail-meta {
	margin: 0 0 14px;
	font-size: 13px;
	color: #555; /* TODO: review — close but not exact palette match */
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.wsh-detail-meta span[aria-hidden] {
	color: #bbb;
}

.wsh-detail-badges {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.wsh-detail-badges li {
	background: #f4f6f8;
	border: 1px solid #e3e6ea;
	border-radius: 20px;
	padding: 6px 14px;
	font-size: 13px;
	color: #333;
}

.wsh-detail-badges strong {
	color: var(--wsh-color-green);
}

.wsh-detail-section {
	margin: 28px 0;
	padding-top: 22px;
	border-top: 1px solid #eef0f2;
}

.wsh-detail-section > h2 {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 600;
	color: var(--wsh-color-dark);
}

.wsh-detail-description {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: #444;
}

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

.wsh-detail-amenities {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 20px;
	font-size: 14px;
	color: #333;
}

.wsh-detail-amenities li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
}

.wsh-detail-amenities__dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wsh-color-green);
	flex-shrink: 0;
}

@media (max-width: 600px) {
	.wsh-detail-amenities { grid-template-columns: 1fr; }
}

/* ---------- Policies ---------- */

.wsh-detail-policies {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 18px;
	margin: 0;
	font-size: 14px;
}

.wsh-detail-policies dt {
	color: #666; /* TODO: review — close but not exact palette match */
	font-weight: 500;
}

.wsh-detail-policies dd {
	margin: 0;
	color: var(--wsh-color-dark);
}

/* ---------- Sticky sidebar ---------- */

.wsh-detail-sidebar {
	position: relative;
}

.wsh-detail-sidebar__inner {
	position: sticky;
	top: 20px;
	background: var(--wsh-color-white);
	border: 1px solid #e3e6ea;
	border-radius: 10px;
	padding: 18px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.wsh-detail-sidebar__price {
	margin: 0 0 2px;
	font-size: 15px;
	color: #555; /* TODO: review — close but not exact palette match */
}

.wsh-detail-sidebar__price strong {
	font-size: 24px;
	color: var(--wsh-color-green);
}

.wsh-detail-sidebar__price span {
	font-size: 13px;
	color: #666; /* TODO: review — close but not exact palette match */
}

/* "plus taxes & fees" footnote under the seasonal price range (v3.5.14). */
.wsh-detail-sidebar__price-note {
	margin: 0 0 8px;
	font-size: 12px;
	color: #888;
}

.wsh-detail-sidebar__window {
	margin: 0 0 14px;
	font-size: 12px;
	color: #888;
}

/* Sidebar calendar */

.wsh-detail-calendar {
	margin: 14px 0;
	padding: 12px;
	background: #fafbfc;
	border: 1px solid #e3e6ea;
	border-radius: 8px;
}

.wsh-detail-calendar__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.wsh-detail-calendar__nav button {
	background: var(--wsh-color-white);
	border: 1px solid #d5d8dc;
	border-radius: 4px;
	width: 28px;
	height: 28px;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	color: #333;
	padding: 0;
}

.wsh-detail-calendar__nav button:hover {
	background: #f3f5f7;
}

.wsh-detail-calendar__title {
	font-weight: 600;
	font-size: 13px;
	color: #333;
}

.wsh-detail-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.wsh-detail-calendar__dow {
	text-align: center;
	font-size: 10px;
	font-weight: 600;
	color: #999;
	padding: 3px 0;
	text-transform: uppercase;
}

.wsh-detail-calendar__day {
	text-align: center;
	font-size: 12px;
	padding: 5px 0;
	border-radius: 3px;
	cursor: default;
	user-select: none;
	line-height: 1.2;
	transition: background 0.12s;
}

.wsh-detail-calendar__day--empty { background: transparent; }

.wsh-detail-calendar__day--avail { /* TODO: review — calendar range tint of primary accent, may need systematic derivation */
	background: #E1F5EE;
	color: var(--wsh-color-green);
	cursor: pointer;
	font-weight: 600;
}

.wsh-detail-calendar__day--avail:hover { background: #c9ecdf; }

.wsh-detail-calendar__day--blocked {
	background: #f2f3f5;
	color: #b0b4ba;
}

/* Role-aware changeover slash (v3.5.13) — matrix parity. changeover-am = AM
   checkout-only (orange top-left); changeover-pm = PM check-in-only (orange
   bottom-right). Orange splits diagonally against the avail tint. */
.wsh-detail-calendar__day--changeover-am {
	background: linear-gradient(to bottom right, #ffb877 0, #ffb877 49%, #E1F5EE 51%, #E1F5EE 100%);
	color: var(--wsh-color-green);
	cursor: pointer;
	font-weight: 600;
}
.wsh-detail-calendar__day--changeover-pm {
	background: linear-gradient(to bottom right, #E1F5EE 0, #E1F5EE 49%, #ffb877 51%, #ffb877 100%);
	color: var(--wsh-color-green);
	cursor: pointer;
	font-weight: 600;
}

/* Lead-time grey (v3.5.13) — dates before the earliest valid check-in are
   dimmed over their underlying state; clicking shows the lead-time message. */
.wsh-detail-calendar__day--lead { opacity: 0.4; }

.wsh-detail-calendar__day--today {
	box-shadow: inset 0 0 0 2px var(--wsh-color-green);
}

.wsh-detail-calendar__day--start,
.wsh-detail-calendar__day--end {
	background: var(--wsh-color-green-dark) !important;
	color: #E1F5EE !important;
	font-weight: 700;
}

.wsh-detail-calendar__day--range {
	background: #9FE1CB !important;
	color: var(--wsh-color-green-dark) !important;
}

.wsh-detail-calendar__status {
	min-height: 18px;
	margin-top: 8px;
	font-size: 12px;
	color: #666; /* TODO: review — close but not exact palette match */
}

.wsh-detail-calendar__status[data-kind="error"] { color: #a02020; } /* TODO: review — semantic status color */
.wsh-detail-calendar__status[data-kind="info"]  { color: var(--wsh-color-green); }

/* Guest steppers */

.wsh-detail-guests {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 0;
	margin: 6px 0 10px;
	border-top: 1px solid #eef0f2;
	border-bottom: 1px solid #eef0f2;
}

.wsh-detail-stepper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
}

.wsh-detail-stepper__label {
	font-size: 14px;
	color: #333;
}

.wsh-detail-stepper__controls {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.wsh-detail-stepper__dec,
.wsh-detail-stepper__inc {
	width: 28px;
	height: 28px;
	border: 1px solid #d5d8dc;
	background: var(--wsh-color-white);
	border-radius: 50%;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	color: #333;
}

.wsh-detail-stepper__dec:hover,
.wsh-detail-stepper__inc:hover {
	background: #f3f5f7;
}

.wsh-detail-stepper__dec:disabled {
	color: #ccc;
	cursor: not-allowed;
}

.wsh-detail-stepper__value {
	min-width: 24px;
	text-align: center;
	font-weight: 600;
	font-size: 15px;
	color: var(--wsh-color-dark);
}

/* Pricing breakdown */

.wsh-detail-pricing {
	margin: 12px 0;
	padding: 12px;
	background: #f5fbf8;
	border: 1px solid #cde9de;
	border-radius: 6px;
	font-size: 13px;
}

.wsh-detail-pricing__row {
	display: flex;
	justify-content: space-between;
	padding: 4px 0;
	color: #333;
}

.wsh-detail-pricing__row--total {
	font-weight: 700;
	font-size: 15px;
	color: var(--wsh-color-green);
	border-top: 1px solid #cde9de;
	margin-top: 6px;
	padding-top: 8px;
}

.wsh-detail-pricing__loading {
	text-align: center;
	padding: 14px 0;
	color: #666; /* TODO: review — close but not exact palette match */
	font-style: italic;
}

.wsh-detail-pricing__error {
	color: #a02020;
	font-size: 13px;
	padding: 8px 0;
}

/* Action buttons */

.wsh-detail-book,
.wsh-detail-ask {
	display: block;
	width: 100%;
	border-radius: 6px;
	padding: 12px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	margin-top: 8px;
	transition: background 0.15s, color 0.15s;
}

.wsh-detail-book {
	background: var(--wsh-color-green);
	color: var(--wsh-color-white);
	border: 0;
}

.wsh-detail-book:hover:not(:disabled) {
	background: var(--wsh-color-green-dark);
}

.wsh-detail-book:disabled {
	background: #9fbeb4; /* TODO: review — disabled state tint of primary accent */
	cursor: not-allowed;
}

.wsh-detail-ask {
	background: transparent;
	color: var(--wsh-color-green);
	border: 1px solid var(--wsh-color-green);
}

.wsh-detail-ask:hover {
	background: var(--wsh-color-green);
	color: var(--wsh-color-white);
}

.wsh-detail-inquiry-slot {
	margin-top: 12px;
}

/* ---------- Similar properties ---------- */

.wsh-similar {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid #eef0f2;
}

.wsh-similar__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.wsh-similar__header h2 {
	margin: 0;
	font-size: 20px;
	color: var(--wsh-color-dark);
}

.wsh-similar__nav {
	display: inline-flex;
	gap: 8px;
}

.wsh-similar__prev,
.wsh-similar__next {
	width: 36px;
	height: 36px;
	border: 1px solid #d5d8dc;
	background: var(--wsh-color-white);
	border-radius: 50%;
	font-size: 18px;
	cursor: pointer;
	color: #333;
}

.wsh-similar__prev:hover,
.wsh-similar__next:hover {
	background: #f3f5f7;
	border-color: var(--wsh-color-green);
	color: var(--wsh-color-green);
}

.wsh-similar__row {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	padding-bottom: 8px;
}

.wsh-similar__row::-webkit-scrollbar {
	height: 6px;
}

.wsh-similar__row::-webkit-scrollbar-thumb {
	background: #cde9de;
	border-radius: 3px;
}

.wsh-similar-card {
	flex: 0 0 260px;
	scroll-snap-align: start;
	background: var(--wsh-color-sky);
	border: 1px solid #e3e6ea;
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s, transform 0.2s;
	display: flex;
	flex-direction: column;
	box-shadow: 0 0 0 6px var(--wsh-color-sky);
}

.wsh-similar-card:hover {
	box-shadow: 0 0 0 6px var(--wsh-color-sky), 0 4px 16px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
	color: inherit;
}

.wsh-similar-card__photo {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: linear-gradient(135deg, #e1eae4 0%, #cfdfd6 100%);
}

.wsh-similar-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wsh-similar-card__body {
	padding: 12px 14px 14px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wsh-similar-card__name {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--wsh-color-dark);
}

.wsh-similar-card__location {
	margin: 0;
	font-size: 12px;
	color: #666; /* TODO: review — close but not exact palette match */
}

.wsh-similar-card__meta {
	margin: 2px 0 0;
	font-size: 12px;
	color: #444;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.wsh-similar-card__meta span[aria-hidden] {
	color: #bbb;
}

.wsh-similar-card__price {
	margin: 6px 0 0;
	font-weight: 600;
	color: var(--wsh-color-green);
	font-size: 14px;
}

.wsh-similar-card__price span {
	font-weight: 400;
	color: #888;
	font-size: 12px;
}