/**
 * Travel Suite front end.
 *
 * Every value that decides how this looks is a custom property, set from the
 * settings screen and overridable by a theme, the customiser or an Elementor
 * control. Nothing here sets a font family or a text colour of its own, so the
 * plugin inherits the theme it lands in.
 */

.wts,
.wts-loop,
.wts-single,
.wts-enquiry,
.wts-filters {
	--wts-brand: #1f7a5c;
	--wts-brand-ink: #fff;
	--wts-accent: #d9822b;
	--wts-radius: 14px;
	--wts-gap: 24px;
	--wts-ratio: 4 / 3;
	--wts-columns: 3;
	--wts-line: color-mix(in oklab, currentColor 14%, transparent);
	--wts-sunk: color-mix(in oklab, currentColor 4%, transparent);
	--wts-star: #f2a20c;
	--wts-star-size: 15px;
	--wts-card-shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 8px 24px rgb(16 24 40 / 6%);
}

/* ---------------------------------------------------------------- listings */

.wts-loop {
	display: grid;
	gap: var(--wts-gap);
	grid-template-columns: repeat(var(--wts-columns), minmax(0, 1fr));
}

.wts-loop--list {
	grid-template-columns: minmax(0, 1fr);
}

.wts-loop--masonry {
	display: block;
	columns: var(--wts-columns);
	column-gap: var(--wts-gap);
}

.wts-loop--masonry > * {
	margin-bottom: var(--wts-gap);
	break-inside: avoid;
}

.wts-loop--slider {
	grid-auto-flow: column;
	grid-auto-columns: minmax(min(78%, 320px), 1fr);
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	padding-bottom: 4px;
}

.wts-loop--slider > * {
	scroll-snap-align: start;
}

@media (max-width: 900px) {
	.wts-loop:not(.wts-loop--slider) {
		grid-template-columns: repeat(min(var(--wts-columns), 2), minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.wts-loop:not(.wts-loop--slider) {
		grid-template-columns: minmax(0, 1fr);
	}

	.wts-loop--masonry {
		columns: 1;
	}
}

/* ------------------------------------------------------------------- cards */

.wts-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--wts-line);
	border-radius: var(--wts-radius);
	box-shadow: var(--wts-card-shadow);
	background: var(--wts-sunk);
}

.wts-card__media {
	display: block;
	overflow: hidden;
	position: relative;
	line-height: 0;
}

.wts-card__media img,
.wts-card__img {
	width: 100%;
	height: 100%;
	aspect-ratio: var(--wts-ratio);
	object-fit: cover;
	transition: transform .5s ease;
}

.wts-card:hover .wts-card__img {
	transform: scale(1.04);
}

.wts-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: .5rem;
	padding: 1.1rem 1.15rem 1.15rem;
}

.wts-card__eyebrow {
	margin: 0;
	font-size: .78rem;
	letter-spacing: .04em;
	opacity: .7;
}

.wts-card__eyebrow a {
	text-decoration: none;
	color: inherit;
}

.wts-card__title {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.3;
	text-wrap: balance;
}

.wts-card__title a {
	color: inherit;
	text-decoration: none;
}

.wts-card__title a:hover {
	color: var(--wts-brand);
}

.wts-card__excerpt,
.wts-card__meta {
	margin: 0;
	font-size: .92rem;
	opacity: .8;
}

.wts-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .9rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .85rem;
	opacity: .75;
}

.wts-card__facts li + li::before {
	content: "·";
	margin-right: .55rem;
	opacity: .6;
}

.wts-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-top: auto;
	padding-top: .85rem;
	border-top: 1px solid var(--wts-line);
	flex-wrap: wrap;
}

.wts-card__price {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: .35rem;
	flex-wrap: wrap;
}

.wts-card__price strong {
	font-size: 1.1rem;
}

.wts-card__price-label,
.wts-card__price small {
	font-size: .78rem;
	opacity: .7;
}

.wts-card__was {
	opacity: .55;
	font-size: .85rem;
}

/* An overlay card is one link, so the whole tile is the target. */
.wts-card--place .wts-card__link {
	display: block;
	position: relative;
	color: #fff;
	text-decoration: none;
	min-height: 260px;
}

.wts-card--place .wts-card__media {
	position: absolute;
	inset: 0;
}

.wts-card--place .wts-card__media img {
	aspect-ratio: auto;
}

.wts-card--place .wts-card__body {
	position: relative;
	z-index: 1;
	justify-content: flex-end;
	min-height: 260px;
	padding: 1.4rem;
	background: linear-gradient(to top, rgb(0 0 0 / 72%) 0%, rgb(0 0 0 / 18%) 55%, transparent 100%);
	gap: .3rem;
}

.wts-card--place .wts-card__title {
	font-size: 1.35rem;
	font-weight: 600;
}

.wts-card--place .wts-card__eyebrow,
.wts-card--place .wts-card__meta {
	opacity: .85;
	font-size: .8rem;
}

.wts-badge {
	position: absolute;
	top: .7rem;
	left: .7rem;
	padding: .2rem .55rem;
	border-radius: calc(var(--wts-radius) / 2);
	background: var(--wts-accent);
	color: #fff;
	font-size: .72rem;
	letter-spacing: .04em;
	line-height: 1.6;
}

/* -------------------------------------------------------------- singles */

.wts-single {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	margin: 0 auto;
	padding: 2rem 1.25rem 4rem;
	max-width: 1100px;
}

.wts-hero {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.wts-hero__eyebrow {
	margin: 0;
	font-size: .85rem;
	opacity: .75;
}

.wts-hero__eyebrow a {
	color: inherit;
}

.wts-hero__title {
	margin: 0;
	text-wrap: balance;
}

.wts-hero__subtitle {
	margin: 0;
	font-size: 1.15rem;
	opacity: .8;
	max-width: 60ch;
}

.wts-hero__meta {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	margin-top: .5rem;
}

.wts-hero__price {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: .4rem;
}

.wts-hero__price strong {
	font-size: 1.6rem;
}

.wts-hero__price span,
.wts-hero__price small {
	opacity: .7;
	font-size: .85rem;
}

.wts-hero__image {
	margin: .75rem 0 0;
	overflow: hidden;
	border-radius: var(--wts-radius);
	line-height: 0;
}

.wts-hero__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.wts-section {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.wts-section > h2,
.wts-highlights > h2 {
	margin: 0;
}

/* --------------------------------------------------------------- facts */

.wts-facts {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	margin: 0;
	padding: 0;
	border: 1px solid var(--wts-line);
	border-radius: var(--wts-radius);
	overflow: hidden;
	background: var(--wts-line);
}

.wts-facts__item {
	padding: .9rem 1rem;
	background: var(--wts-sunk);
}

.wts-facts dt {
	margin: 0 0 .2rem;
	font-size: .75rem;
	letter-spacing: .05em;
	opacity: .65;
}

.wts-facts dd {
	margin: 0;
	font-weight: 600;
}

/* ---------------------------------------------------------- highlights */

.wts-highlights ul,
.wts-inclusions ul {
	margin: .5rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .5rem;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.wts-highlights li,
.wts-inclusions li {
	position: relative;
	padding-left: 1.5rem;
}

.wts-highlights li::before,
.wts-inclusions .is-in li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: .75rem;
	height: .42rem;
	border-left: 2px solid var(--wts-brand);
	border-bottom: 2px solid var(--wts-brand);
	transform: rotate(-45deg);
}

.wts-inclusions {
	display: grid;
	gap: var(--wts-gap);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.wts-inclusions .is-out li::before {
	content: "×";
	position: absolute;
	left: .15rem;
	top: 0;
	opacity: .5;
}

/* ---------------------------------------------------------- itinerary */

.wts-itinerary {
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.wts-itinerary__day {
	border: 1px solid var(--wts-line);
	border-radius: var(--wts-radius);
	overflow: hidden;
	background: var(--wts-sunk);
}

.wts-itinerary__day summary {
	display: flex;
	align-items: baseline;
	gap: .9rem;
	padding: .95rem 1.1rem;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
}

.wts-itinerary__day summary::-webkit-details-marker {
	display: none;
}

.wts-itinerary__number {
	flex: 0 0 auto;
	font-size: .74rem;
	letter-spacing: .06em;
	padding: .2rem .5rem;
	border-radius: 999px;
	background: var(--wts-brand);
	color: var(--wts-brand-ink);
}

.wts-itinerary__body {
	display: grid;
	gap: 1rem;
	padding: 0 1.1rem 1.1rem;
	grid-template-columns: minmax(0, 1fr);
}

.wts-itinerary__image {
	margin: 0;
	line-height: 0;
	border-radius: calc(var(--wts-radius) - 4px);
	overflow: hidden;
}

.wts-itinerary__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.wts-itinerary__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.5rem;
	margin: 0;
	padding: .8rem 0 0;
	border-top: 1px solid var(--wts-line);
	list-style: none;
	font-size: .9rem;
}

.wts-itinerary__meta span {
	display: block;
	font-size: .72rem;
	letter-spacing: .05em;
	opacity: .65;
}

/* --------------------------------------------------------- departures */

.wts-departures {
	overflow-x: auto;
	border: 1px solid var(--wts-line);
	border-radius: var(--wts-radius);
}

.wts-departures table {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
}

.wts-departures :is(th, td) {
	padding: .7rem .9rem;
	text-align: left;
	border-bottom: 1px solid var(--wts-line);
}

.wts-departures tbody tr:last-child :is(th, td) {
	border-bottom: 0;
}

.wts-pill {
	display: inline-block;
	padding: .15rem .55rem;
	border-radius: 999px;
	font-size: .78rem;
	background: var(--wts-sunk);
	border: 1px solid var(--wts-line);
}

.wts-pill--limited {
	border-color: var(--wts-accent);
	color: var(--wts-accent);
}

.wts-pill--full {
	opacity: .6;
}

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

.wts-gallery {
	display: grid;
	gap: .6rem;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.wts-gallery__item {
	margin: 0;
	line-height: 0;
	overflow: hidden;
	border-radius: calc(var(--wts-radius) - 4px);
}

.wts-gallery__item img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform .4s ease;
}

.wts-gallery__item:hover img {
	transform: scale(1.05);
}

/* --------------------------------------------------------------- stars */

.wts-stars {
	display: inline-flex;
	gap: 1px;
	vertical-align: middle;
}

.wts-star {
	width: var(--wts-star-size);
	height: var(--wts-star-size);
	background: currentColor;
	opacity: .22;
	-webkit-mask: var(--wts-star-shape) center / contain no-repeat;
	mask: var(--wts-star-shape) center / contain no-repeat;
	--wts-star-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z'/%3E%3C/svg%3E");
}

.wts-star.is-full {
	background: var(--wts-star);
	opacity: 1;
}

.wts-star.is-half {
	background: linear-gradient(90deg, var(--wts-star) 50%, currentColor 50%);
	opacity: 1;
}

.wts-stars__number {
	margin-left: .4rem;
	font-weight: 600;
}

.wts-rating-inline {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	flex-wrap: wrap;
}

.wts-rating-inline__count {
	font-size: .85rem;
	opacity: .7;
}

/* ------------------------------------------------------------- reviews */

.wts-reviews {
	display: grid;
	gap: var(--wts-gap);
	grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
	align-items: center;
	padding: 1.2rem;
	border: 1px solid var(--wts-line);
	border-radius: var(--wts-radius);
	background: var(--wts-sunk);
}

.wts-reviews__average {
	margin: 0;
	font-size: 2.6rem;
	line-height: 1;
	font-weight: 700;
}

.wts-reviews__count {
	margin: .35rem 0 0;
	font-size: .85rem;
	opacity: .7;
}

.wts-reviews__bars {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.wts-reviews__bars li {
	display: grid;
	grid-template-columns: 5rem minmax(0, 1fr) 2rem;
	align-items: center;
	gap: .6rem;
	font-size: .82rem;
}

.wts-reviews__bar {
	height: 8px;
	border-radius: 999px;
	background: var(--wts-line);
	overflow: hidden;
}

.wts-reviews__bar span {
	display: block;
	height: 100%;
	background: var(--wts-star);
}

.wts-review-rating {
	margin-bottom: .35rem;
}

.wts-rating-field select {
	max-width: 14rem;
}

@media (max-width: 600px) {
	.wts-reviews {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------- forms, filters */

.wts-enquiry {
	padding: 1.5rem;
	border: 1px solid var(--wts-line);
	border-radius: var(--wts-radius);
	background: var(--wts-sunk);
}

.wts-enquiry__title {
	margin: 0 0 .35rem;
}

.wts-enquiry__note {
	margin: 0 0 1rem;
	opacity: .8;
}

.wts-form,
.wts-filters {
	display: grid;
	gap: .9rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wts-form__row,
.wts-filters__field {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	margin: 0;
	grid-column: span 4;
}

.wts-form__row--half {
	grid-column: span 2;
}

.wts-form__row--third {
	grid-column: span 2;
}

.wts-form__row--quarter {
	grid-column: span 1;
}

.wts-filters__field {
	grid-column: span 1;
}

.wts-filters__field--grow {
	grid-column: span 2;
}

.wts-form label,
.wts-filters label,
.wts-form legend {
	font-size: .82rem;
	letter-spacing: .02em;
	opacity: .8;
}

.wts-form :is(input, select, textarea),
.wts-filters :is(input, select) {
	width: 100%;
	padding: .6rem .7rem;
	border: 1px solid var(--wts-line);
	border-radius: calc(var(--wts-radius) / 2);
	background: transparent;
	color: inherit;
	font: inherit;
}

.wts-form :is(input, select, textarea):focus-visible,
.wts-filters :is(input, select):focus-visible {
	outline: 2px solid var(--wts-brand);
	outline-offset: 1px;
}

.wts-form__check {
	display: flex;
	align-items: center;
	gap: .5rem;
	opacity: 1;
}

.wts-form__check input {
	width: auto;
}

.wts-form fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.wts-form__heading {
	margin: .5rem 0 0;
}

.wts-form__help {
	font-size: .78rem;
	opacity: .65;
}

/* The honeypot has to be reachable by a bot and invisible to a person. */
.wts-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wts-form__actions,
.wts-filters__actions {
	grid-column: span 4;
	display: flex;
	align-items: center;
	gap: .9rem;
	margin: 0;
	flex-wrap: wrap;
}

.wts-filters__actions {
	grid-column: span 1;
	align-items: end;
}

.wts-form__status:not(:empty) {
	font-size: .9rem;
}

.wts-form.is-sent .wts-form__status {
	color: var(--wts-brand);
}

.wts-form.is-error .wts-form__status {
	color: #b3261e;
}

@media (max-width: 720px) {
	.wts-form,
	.wts-filters {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wts-form__row,
	.wts-form__actions,
	.wts-filters__field,
	.wts-filters__actions {
		grid-column: span 2;
	}
}

/* ------------------------------------------------------- buttons, chips */

.wts-button {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .6rem 1.1rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--wts-brand);
	color: var(--wts-brand-ink);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: filter .2s ease, transform .2s ease;
}

.wts-button:hover {
	filter: brightness(1.08);
	color: var(--wts-brand-ink);
}

.wts-button:active {
	transform: translateY(1px);
}

.wts-button[disabled] {
	opacity: .6;
	cursor: progress;
}

.wts-button--quiet {
	background: transparent;
	border-color: var(--wts-line);
	color: inherit;
	font-weight: 500;
	padding: .4rem .85rem;
}

.wts-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wts-chips a {
	display: inline-block;
	padding: .25rem .7rem;
	border: 1px solid var(--wts-line);
	border-radius: 999px;
	font-size: .85rem;
	text-decoration: none;
	color: inherit;
}

.wts-chips a:hover {
	border-color: var(--wts-brand);
	color: var(--wts-brand);
}

/* ------------------------------------------------- pagination, notices */

.wts-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	justify-content: center;
	margin-top: var(--wts-gap);
}

.wts-pagination :is(a, span) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	padding: .35rem .7rem;
	border: 1px solid var(--wts-line);
	border-radius: 999px;
	text-decoration: none;
	color: inherit;
}

.wts-pagination .current {
	background: var(--wts-brand);
	border-color: var(--wts-brand);
	color: var(--wts-brand-ink);
}

.wts-empty,
.wts-notice {
	margin: 0;
	padding: 1rem 1.1rem;
	border: 1px dashed var(--wts-line);
	border-radius: var(--wts-radius);
	opacity: .85;
}

.wts-notice--good {
	border-style: solid;
	border-color: var(--wts-brand);
}

.wts-editor-note {
	padding: .9rem 1rem;
	border: 1px dashed currentColor;
	border-radius: var(--wts-radius);
	opacity: .6;
	font-size: .9rem;
}

.wts-archive {
	display: flex;
	flex-direction: column;
	gap: var(--wts-gap);
	max-width: 1100px;
	margin: 0 auto;
	padding: 2rem 1.25rem 4rem;
}

.wts-archive__head h1 {
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.wts-card,
	.wts-card__img,
	.wts-gallery__item img,
	.wts-button {
		transition: none;
	}

	.wts-card:hover .wts-card__img,
	.wts-gallery__item:hover img {
		transform: none;
	}
}