/*
 * Monster User Reviews – front end.
 *
 * Colours are set on the Branding tab. Layout values can be overridden in
 * Appearance > Customize > Additional CSS, e.g. .mur-ui { --mur-lines: 8; }
 */

.mur-ui {
	/* Colours. All of them can be changed on the Branding tab (defaults in includes/branding.php). */
	--mur-accent: #cc0000;
	--mur-accent-dark: #a30000;
	--mur-button-text: #ffffff;
	--mur-heading: #141414;
	--mur-text: #4a4b51;
	--mur-muted: #6b6c73;
	--mur-card-bg: #ffffff;
	--mur-border: #e4e4e9;
	--mur-field-border: #c9c9d0;
	--mur-hover-bg: #f5f5f7;
	--mur-avatar-bg: #141414;
	--mur-avatar-text: #ffffff;
	--mur-star: #f7be68;
	--mur-star-empty: #dcdce1;
	--mur-recommend: #1877f2;
	--mur-recommend-text: #1464d8;
	--mur-tripadvisor: #00aa6c;
	--mur-google-star: #fbbc04;
	--mur-success-bg: #edf7ee;
	--mur-success-text: #1b4d1f;
	--mur-success-border: #2e7d32;
	--mur-error-bg: #fdecec;
	--mur-error-text: #7a0000;
	--mur-error-border: #cc0000;
	--mur-info-bg: #f3f3f5;
	--mur-accent-text: var(--mur-accent); /* "Read more" and "See response". Lighter in the dark scheme. */

	/* Layout. */
	--mur-radius: 10px;
	--mur-gap: 24px;
	--mur-lines: 6;
	--mur-thumb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM2 13a2 2 0 0 1 2-2h2v11H4a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
	--mur-title-font: "Roboto Condensed", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mur-bubble-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.6' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E");
	--mur-bubble-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6.4'/%3E%3C/svg%3E");
	--mur-star-mask: 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.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E");
	--mur-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3'/%3E%3C/svg%3E");
	--mur-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23141414' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--mur-reply-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z'/%3E%3C/svg%3E");

	margin: 0 0 32px;
	color: var(--mur-text);
	font-size: 16px;
	line-height: 1.6;
	text-align: left;
}

.mur-ui *,
.mur-ui *::before,
.mur-ui *::after {
	box-sizing: border-box;
}

.mur-ui .mur-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Stars ------------------------------------------------------------------ */

.mur-ui .mur-stars {
	--mur-star-size: 20px;
	--mur-fill: 100%;
	display: block;
	width: calc(var(--mur-star-size) * 5);
	height: var(--mur-star-size);
	background: linear-gradient(90deg, var(--mur-star) var(--mur-fill), var(--mur-star-empty) var(--mur-fill));
	-webkit-mask-image: var(--mur-star-mask);
	mask-image: var(--mur-star-mask);
	-webkit-mask-size: var(--mur-star-size) var(--mur-star-size);
	mask-size: var(--mur-star-size) var(--mur-star-size);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
}

.mur-ui .mur-stars--lg { --mur-star-size: 24px; }
.mur-ui .mur-stars--0 { --mur-fill: 0%; }
.mur-ui .mur-stars--0-5 { --mur-fill: 10%; }
.mur-ui .mur-stars--1 { --mur-fill: 20%; }
.mur-ui .mur-stars--1-5 { --mur-fill: 30%; }
.mur-ui .mur-stars--2 { --mur-fill: 40%; }
.mur-ui .mur-stars--2-5 { --mur-fill: 50%; }
.mur-ui .mur-stars--3 { --mur-fill: 60%; }
.mur-ui .mur-stars--3-5 { --mur-fill: 70%; }
.mur-ui .mur-stars--4 { --mur-fill: 80%; }
.mur-ui .mur-stars--4-5 { --mur-fill: 90%; }
.mur-ui .mur-stars--5 { --mur-fill: 100%; }

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

.mur-ui .mur-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	margin: 0;
	padding: 10px 24px;
	border: 2px solid var(--mur-accent);
	border-radius: 8px;
	background: var(--mur-accent);
	box-shadow: none;
	color: var(--mur-button-text);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.mur-ui .mur-btn:hover,
.mur-ui .mur-btn:focus {
	border-color: var(--mur-accent-dark);
	background: var(--mur-accent-dark);
	color: var(--mur-button-text);
	text-decoration: none;
}

.mur-ui .mur-btn:focus-visible {
	outline: 2px solid var(--mur-heading);
	outline-offset: 2px;
}

.mur-ui .mur-btn[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.mur-ui .mur-btn--ghost {
	border-color: var(--mur-heading);
	background: transparent;
	color: var(--mur-heading);
}

.mur-ui .mur-btn--ghost:hover,
.mur-ui .mur-btn--ghost:focus {
	border-color: var(--mur-heading);
	background: var(--mur-heading);
	color: var(--mur-card-bg);
}

.mur-ui .mur-btn[hidden] {
	display: none;
}

/* Summary and controls --------------------------------------------------- */

.mur-ui .mur-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 32px;
	margin: 0 0 var(--mur-gap);
	padding: 20px 24px;
	border: 1px solid var(--mur-border);
	border-radius: var(--mur-radius);
	background: var(--mur-card-bg);
}

.mur-ui .mur-summary__scores {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 40px;
}

.mur-ui .mur-summary__score {
	display: flex;
	align-items: center;
	gap: 16px;
}

.mur-ui .mur-summary__average {
	color: var(--mur-heading);
	font-family: var(--mur-title-font);
	font-size: 52px;
	font-weight: 700;
	line-height: 1;
}

.mur-ui .mur-summary__count {
	display: block;
	margin-top: 6px;
	color: var(--mur-muted);
	font-size: 14px;
	line-height: 1.3;
}

/* Tripadvisor-style rating circles: a ring for every circle, filled up to the rating. */
.mur-ui .mur-bubbles {
	--mur-bubble-size: 18px;
	position: relative;
	display: inline-block;
	flex: none;
	width: calc(var(--mur-bubble-size) * 5);
	height: var(--mur-bubble-size);
	vertical-align: middle;
}

.mur-ui .mur-bubbles::before,
.mur-ui .mur-bubbles::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: var(--mur-tripadvisor);
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
	-webkit-mask-size: var(--mur-bubble-size) var(--mur-bubble-size);
	mask-size: var(--mur-bubble-size) var(--mur-bubble-size);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
}

.mur-ui .mur-bubbles::before {
	width: 100%;
	-webkit-mask-image: var(--mur-bubble-ring);
	mask-image: var(--mur-bubble-ring);
}

.mur-ui .mur-bubbles::after {
	width: var(--mur-fill, 100%);
	-webkit-mask-image: var(--mur-bubble-dot);
	mask-image: var(--mur-bubble-dot);
}

/* Compact style: Tripadvisor score next to the Facebook one. */
.mur-ui .mur-rating-line {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--mur-heading);
	font-size: 14px;
	font-weight: 700;
	line-height: 24px;
}

.mur-ui .mur-summary .mur-bubbles {
	--mur-bubble-size: 22px;
}

/* Review site boxes: [review_sites], and the large boxes above the reviews. One small card per site, in its colours. */
.mur-ui.mur-sites {
	margin: 0 0 var(--mur-gap);
}

.mur-ui .mur-summary--boxes {
	display: block;
	padding: 0;
	border: 0;
	background: none;
}

.mur-ui .mur-summary--boxes .mur-summary__actions {
	justify-content: space-between;
}

.mur-ui .mur-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin: 0 0 var(--mur-gap);
}

.mur-ui.mur-sites .mur-badges {
	margin: 0;
}

.mur-ui .mur-badge {
	--mur-brand: var(--mur-accent);
	--mur-badge-star: var(--mur-star);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	flex: 1 1 230px;
	min-width: 0;
	max-width: 300px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--mur-border);
	border-top: 3px solid var(--mur-brand);
	border-radius: var(--mur-radius);
	background: var(--mur-card-bg);
	box-shadow: 0 1px 2px rgba(20, 20, 20, 0.04), 0 8px 20px -16px rgba(20, 20, 20, 0.25);
	color: var(--mur-heading);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Site colours. Facebook blue, Tripadvisor green and Google stars can be changed on the Branding tab.
   Your own reviews use the site's Accent colour, with the same stars as the review cards. */
.mur-ui .mur-badge--facebook { --mur-brand: var(--mur-recommend); --mur-brand-text: var(--mur-recommend-text); }
.mur-ui .mur-badge--tripadvisor { --mur-brand: var(--mur-tripadvisor); }
.mur-ui .mur-badge--google { --mur-brand: var(--mur-google-star); --mur-brand-text: #1a73e8; --mur-badge-star: var(--mur-google-star); }
.mur-ui .mur-badge--trustpilot { --mur-brand: #00b67a; --mur-badge-star: #00b67a; }
.mur-ui .mur-badge--own { --mur-brand: var(--mur-accent); --mur-brand-text: var(--mur-accent-dark); }
.mur-ui .mur-logo--own { color: var(--mur-accent); }

.mur-ui a.mur-badge:hover,
.mur-ui a.mur-badge:focus {
	color: var(--mur-heading);
	text-decoration: none;
}

.mur-ui a.mur-badge:focus-visible {
	outline: 2px solid var(--mur-brand-text, var(--mur-brand));
	outline-offset: 3px;
}

@media (hover: hover) {
	.mur-ui a.mur-badge:hover {
		box-shadow: 0 1px 2px rgba(20, 20, 20, 0.04), 0 14px 26px -16px rgba(20, 20, 20, 0.35);
		transform: translateY(-2px);
	}

	.mur-ui a.mur-badge:hover .mur-badge__cta {
		text-decoration: underline;
	}
}

/* Top: logo, business name and site name. */
.mur-ui .mur-badge__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	max-width: 100%;
	text-align: left;
}

.mur-ui .mur-logo {
	flex: none;
	width: 32px;
	height: 32px;
}

.mur-ui .mur-badge__names {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mur-ui .mur-badge__title {
	font-size: 16px;
	overflow-wrap: anywhere;
}

.mur-ui .mur-badge__site {
	color: var(--mur-muted);
	font-size: 13px;
}

.mur-ui .mur-badge--facebook .mur-badge__site {
	color: var(--mur-recommend-text);
}

.mur-ui .mur-badge--own .mur-badge__site {
	color: var(--mur-brand-text);
}

.mur-ui .mur-badge__site--google span:nth-child(3n + 1) { color: #4285f4; }
.mur-ui .mur-badge__site--google span:nth-child(2),
.mur-ui .mur-badge__site--google span:nth-child(6) { color: #ea4335; }
.mur-ui .mur-badge__site--google span:nth-child(3) { color: #fbbc05; }
.mur-ui .mur-badge__site--google span:nth-child(5) { color: #34a853; }

/* Middle: the score. */
.mur-ui .mur-badge__figure {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.mur-ui .mur-badge__score {
	font-family: var(--mur-title-font);
	font-size: 26px;
	line-height: 1;
}

.mur-ui .mur-badge .mur-stars {
	--mur-star: var(--mur-badge-star);
	--mur-star-size: 20px;
}

.mur-ui .mur-badge .mur-bubbles {
	--mur-bubble-size: 19px;
}

.mur-ui .mur-badge__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 13px 4px 11px;
	border-radius: 999px;
	background: var(--mur-brand);
	color: #fff;
	font-size: 15px;
	line-height: 1.3;
}

.mur-ui .mur-badge__thumb {
	flex: none;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--mur-thumb-icon) center / contain no-repeat;
	mask: var(--mur-thumb-icon) center / contain no-repeat;
}

/* Bottom: small print and number of reviews, then "Read our reviews on …". */
.mur-ui .mur-badge__foot {
	color: var(--mur-muted);
	font-size: 13px;
	font-weight: 600;
}

.mur-ui .mur-badge__cta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--mur-brand-text, var(--mur-brand));
	font-size: 13px;
}

.mur-ui .mur-badge--tripadvisor .mur-badge__cta {
	color: #00764b;
	color: color-mix(in srgb, var(--mur-tripadvisor) 72%, #000);
}

.mur-ui .mur-badge--trustpilot .mur-badge__cta {
	color: #00774f;
}

/* A small link icon: after "Read our reviews on …", or after the number of reviews when that is hidden. */
.mur-ui .mur-badge__cta::after,
.mur-ui a.mur-badge:not(.mur-badge--cta) .mur-badge__foot::after {
	content: "";
	display: inline-block;
	flex: none;
	width: 11px;
	height: 11px;
	background: currentColor;
	-webkit-mask: var(--mur-link-icon) center / contain no-repeat;
	mask: var(--mur-link-icon) center / contain no-repeat;
}

.mur-ui a.mur-badge:not(.mur-badge--cta) .mur-badge__foot::after {
	margin-left: 5px;
	vertical-align: -1px;
}

/* Your own reviews stay on this site: red wording, no "opens elsewhere" icon, and a down arrow for "Read reviews below". */
.mur-ui .mur-badge--own .mur-badge__cta {
	color: var(--mur-accent-text);
}

.mur-ui .mur-badge--own .mur-badge__cta::after {
	content: none;
}

.mur-ui .mur-badge--own .mur-badge__cta--below::after {
	content: "";
	width: 10px;
	height: 10px;
	-webkit-mask: var(--mur-chevron) center / contain no-repeat;
	mask: var(--mur-chevron) center / contain no-repeat;
}

/* "Read reviews below" jumps here; room is left for sticky headers. */
.mur-ui.mur-board {
	scroll-margin-top: 120px;
}

.mur-ui .mur-summary__actions,
.mur-ui .mur-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
}

.mur-ui .mur-select {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
}

/* Dropdown arrow, drawn in the heading colour so it follows the branding. */
.mur-ui .mur-select::after {
	content: "";
	position: absolute;
	right: 14px;
	bottom: 17px;
	width: 12px;
	height: 12px;
	background: var(--mur-heading);
	-webkit-mask: var(--mur-chevron) center / contain no-repeat;
	mask: var(--mur-chevron) center / contain no-repeat;
	pointer-events: none;
}

.mur-ui .mur-select__label {
	color: var(--mur-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
}

.mur-ui .mur-select select {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	min-width: 170px;
	height: 46px;
	margin: 0;
	padding: 0 40px 0 14px;
	border: 1px solid var(--mur-field-border);
	border-radius: 8px;
	background: var(--mur-card-bg);
	box-shadow: none;
	color: var(--mur-heading);
	font: inherit;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
}

.mur-ui .mur-select select:focus {
	border-color: var(--mur-accent);
	outline: none;
	box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.15);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mur-accent) 18%, transparent);
}

/* Grid ------------------------------------------------------------------- */

.mur-ui .mur-reviews {
	--mur-cols: 3;
	--mur-min: 280px;
	display: grid;
	/* Up to --mur-cols equal columns, dropping to fewer when cards would get narrower than --mur-min. */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--mur-min), (100% - (var(--mur-cols) - 1) * var(--mur-gap)) / var(--mur-cols) - 1px)), 1fr));
	gap: var(--mur-gap);
	margin: 0;
	padding: 0;
}

.mur-ui .mur-reviews--cols-1 { --mur-cols: 1; }
.mur-ui .mur-reviews--cols-2 { --mur-cols: 2; }
.mur-ui .mur-reviews--cols-3 { --mur-cols: 3; }
.mur-ui .mur-reviews--cols-4 { --mur-cols: 4; }

/* Card ------------------------------------------------------------------- */

.mur-ui .mur-review {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 26px 24px 18px;
	border: 1px solid var(--mur-border);
	border-top: 3px solid var(--mur-accent);
	border-radius: var(--mur-radius);
	background: var(--mur-card-bg);
	box-shadow: 0 1px 2px rgba(20, 20, 20, 0.04), 0 10px 24px -14px rgba(20, 20, 20, 0.18);
	overflow-wrap: break-word;
	scroll-margin-top: 120px;
}

.mur-ui .mur-review[hidden] {
	display: none;
}

.mur-ui .mur-review::before {
	content: "\201C";
	position: absolute;
	top: 8px;
	right: 18px;
	color: var(--mur-accent);
	font: 700 64px/1 Georgia, "Times New Roman", serif;
	opacity: 0.12;
	pointer-events: none;
}

.mur-ui .mur-review__main {
	flex: 1 0 auto;
	padding-bottom: 16px;
}

.mur-ui .mur-review__title {
	margin: 0 0 8px;
	padding: 0 36px 0 0;
	color: var(--mur-heading);
	font-family: var(--mur-title-font);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.25;
	text-transform: none;
}

.mur-ui .mur-review .mur-stars {
	margin: 0 0 14px;
}

/* Facebook recommendations: a blue thumbs up where the stars would be, with Facebook wording. */
.mur-ui .mur-recommend {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	color: var(--mur-recommend-text);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
}

.mur-ui .mur-recommend__icon {
	flex: none;
	width: 20px;
	height: 20px;
	background: var(--mur-recommend);
	-webkit-mask: var(--mur-thumb-icon) center / contain no-repeat;
	mask: var(--mur-thumb-icon) center / contain no-repeat;
}

.mur-ui .mur-recommend.is-no {
	color: var(--mur-muted);
}

.mur-ui .mur-recommend.is-no .mur-recommend__icon {
	background: var(--mur-muted);
	transform: rotate(180deg);
}

.mur-ui .mur-summary .mur-recommend {
	margin: 0;
}

.mur-ui .mur-recommend--lg {
	line-height: 24px;
}

.mur-ui .mur-recommend--lg .mur-recommend__icon {
	width: 24px;
	height: 24px;
}

.mur-ui .mur-review__body {
	position: relative;
	max-height: calc(1.65em * var(--mur-lines));
	overflow: hidden;
	color: var(--mur-text);
	font-size: 16px;
	line-height: 1.65;
}

.mur-ui .mur-review__body p {
	margin: 0 0 0.8em;
	padding: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.mur-ui .mur-review__body p:last-child {
	margin-bottom: 0;
}

.mur-ui .mur-review.is-clamped .mur-review__body {
	-webkit-mask-image: linear-gradient(#000 calc(100% - 3em), transparent);
	mask-image: linear-gradient(#000 calc(100% - 3em), transparent);
}

.mur-ui .mur-review.is-open .mur-review__body,
.mur-ui .mur-review.is-full .mur-review__body {
	max-height: none;
	-webkit-mask-image: none;
	mask-image: none;
}

@media (prefers-reduced-motion: no-preference) {
	.mur-ui .mur-review__body {
		transition: max-height 0.35s ease;
	}
}

.mur-ui button.mur-review__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: 4px 0 0;
	padding: 8px 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--mur-accent-text);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.mur-ui button.mur-review__toggle[hidden] {
	display: none;
}

.mur-ui button.mur-review__toggle::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}

.mur-ui .mur-review.is-open button.mur-review__toggle::after {
	transform: translateY(2px) rotate(-135deg);
}

.mur-ui button.mur-review__toggle:hover,
.mur-ui button.mur-review__toggle:focus {
	background: none;
	color: var(--mur-accent-dark);
}

.mur-ui button.mur-review__toggle:focus-visible {
	outline: 2px solid var(--mur-accent);
	outline-offset: 2px;
}

/* Photos: small thumbnails under the review, opening larger inside the review box. */
.mur-ui .mur-photos {
	margin: 14px 0 0;
}

.mur-ui .mur-photos__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mur-ui .mur-photos__list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mur-ui .mur-photos__list li::before {
	content: none;
}

.mur-ui a.mur-photos__thumb {
	display: block;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border: 1px solid var(--mur-border);
	border-radius: 8px;
	background: var(--mur-hover-bg);
	cursor: zoom-in;
}

.mur-ui .mur-photos__thumb img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
	transition: transform 0.2s ease;
}

@media (hover: hover) {
	.mur-ui a.mur-photos__thumb:hover img {
		transform: scale(1.06);
	}
}

.mur-ui a.mur-photos__thumb.is-active {
	border-color: var(--mur-accent);
	box-shadow: 0 0 0 2px var(--mur-accent);
	cursor: zoom-out;
}

.mur-ui a.mur-photos__thumb:focus-visible {
	outline: 2px solid var(--mur-accent);
	outline-offset: 2px;
}

.mur-ui .mur-photos__view {
	position: relative;
	margin: 10px 0 0;
	padding: 0;
}

.mur-ui .mur-photos__view[hidden] {
	display: none;
}

.mur-ui .mur-photos__view img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: 420px;
	margin: 0;
	border-radius: 8px;
	background: var(--mur-hover-bg);
	object-fit: contain;
}

.mur-ui button.mur-photos__close {
	position: absolute;
	top: 8px;
	right: 8px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.62);
	box-shadow: none;
	color: #fff;
	font: 700 22px/1 Arial, sans-serif;
	cursor: pointer;
}

.mur-ui button.mur-photos__close:hover,
.mur-ui button.mur-photos__close:focus {
	background: rgba(0, 0, 0, 0.82);
	color: #fff;
}

.mur-ui button.mur-photos__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

/* Response from the business, under the review. Long ones fold away behind "See response". */
.mur-ui .mur-reply {
	margin: 16px 0 0;
	padding: 12px 14px;
	border-left: 3px solid var(--mur-accent);
	border-radius: 0 8px 8px 0;
	background: var(--mur-hover-bg);
}

.mur-ui .mur-reply__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 8px;
	margin: 0;
	padding: 0;
	color: var(--mur-heading);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.mur-ui .mur-reply__icon {
	flex: none;
	width: 16px;
	height: 16px;
	background: var(--mur-accent);
	-webkit-mask: var(--mur-reply-icon) center / contain no-repeat;
	mask: var(--mur-reply-icon) center / contain no-repeat;
}

.mur-ui .mur-reply__date {
	color: var(--mur-muted);
	font-size: 12px;
	font-weight: 400;
}

.mur-ui .mur-reply__body {
	margin: 8px 0 0;
	color: var(--mur-text);
	font-size: 15px;
	line-height: 1.6;
}

.mur-ui .mur-reply__body[hidden] {
	display: none;
}

.mur-ui .mur-reply__body p {
	margin: 0 0 0.7em;
	padding: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.mur-ui .mur-reply__body p:last-child {
	margin-bottom: 0;
}

.mur-ui button.mur-reply__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	margin: 4px 0 -4px;
	padding: 6px 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--mur-accent-text);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.mur-ui button.mur-reply__toggle::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}

.mur-ui .mur-reply.is-open button.mur-reply__toggle::after {
	transform: translateY(2px) rotate(-135deg);
}

.mur-ui button.mur-reply__toggle:hover,
.mur-ui button.mur-reply__toggle:focus {
	background: none;
	color: var(--mur-accent-dark);
}

.mur-ui button.mur-reply__toggle:focus-visible {
	outline: 2px solid var(--mur-accent);
	outline-offset: 2px;
}

/* Name and link stay on one line: a long name is shortened with "…" instead of wrapping. */
.mur-ui .mur-review__foot {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 16px;
	border-top: 1px solid var(--mur-border);
}

.mur-ui .mur-review__author {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.mur-ui .mur-review__avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--mur-avatar-bg);
	color: var(--mur-avatar-text);
	font-family: var(--mur-title-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.mur-ui .mur-review__meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	line-height: 1.3;
}

.mur-ui .mur-review__name,
.mur-ui .mur-review__date {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mur-ui .mur-review__name {
	color: var(--mur-heading);
	font-size: 14px;
	font-weight: 700;
}

.mur-ui .mur-review__date {
	color: var(--mur-muted);
	font-size: 12px;
}

.mur-ui .mur-review__source {
	--mur-brand: var(--mur-accent);
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 6px;
	min-height: 34px;
	margin: 0;
	padding: 6px 11px;
	border: 1px solid var(--mur-border);
	border-radius: 999px;
	background: var(--mur-card-bg);
	color: var(--mur-heading);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s, border-color 0.2s;
}

.mur-ui .mur-review__source::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mur-brand);
}

.mur-ui a.mur-review__source::after {
	content: "";
	flex: none;
	width: 12px;
	height: 12px;
	background: currentColor;
	-webkit-mask: var(--mur-link-icon) center / contain no-repeat;
	mask: var(--mur-link-icon) center / contain no-repeat;
}

.mur-ui a.mur-review__source:hover,
.mur-ui a.mur-review__source:focus {
	border-color: var(--mur-heading);
	background: var(--mur-hover-bg);
	color: var(--mur-heading);
	text-decoration: none;
}

.mur-ui a.mur-review__source:focus-visible {
	outline: 2px solid var(--mur-accent);
	outline-offset: 2px;
}

.mur-ui .mur-review__source--facebook { --mur-brand: #1877f2; }
.mur-ui .mur-review__source--google { --mur-brand: #4285f4; }
.mur-ui .mur-review__source--tripadvisor { --mur-brand: #34e0a1; }
.mur-ui .mur-review__source--trustpilot { --mur-brand: #00b67a; }

@media (hover: hover) {
	.mur-ui .mur-review {
		transition: box-shadow 0.25s ease;
	}

	.mur-ui .mur-review:hover {
		box-shadow: 0 1px 2px rgba(20, 20, 20, 0.04), 0 18px 34px -18px rgba(20, 20, 20, 0.28);
	}
}

/* Show more -------------------------------------------------------------- */

.mur-ui .mur-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 28px 0 0;
}

.mur-ui .mur-more__status {
	margin: 0;
	color: var(--mur-muted);
	font-size: 14px;
}

/* Review form ------------------------------------------------------------ */

.mur-ui.mur-form-wrap {
	max-width: 760px;
	margin: 48px auto;
	padding: 32px;
	border: 1px solid var(--mur-border);
	border-top: 3px solid var(--mur-accent);
	border-radius: var(--mur-radius);
	background: var(--mur-card-bg);
	box-shadow: 0 1px 2px rgba(20, 20, 20, 0.04), 0 10px 24px -14px rgba(20, 20, 20, 0.18);
	scroll-margin-top: 120px;
}

.mur-ui .mur-form__title {
	margin: 0 0 8px;
	padding: 0;
	color: var(--mur-heading);
	font-family: var(--mur-title-font);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.15;
	text-transform: none;
}

.mur-ui .mur-form__intro {
	margin: 0 0 24px;
	color: var(--mur-muted);
}

.mur-ui .mur-notice {
	margin: 0 0 20px;
	padding: 14px 16px;
	border-left: 4px solid;
	border-radius: 8px;
	font-weight: 500;
	white-space: pre-line; /* Keeps line breaks typed into the settings messages. */
}

.mur-ui .mur-notice:focus {
	outline: none;
}

.mur-ui .mur-notice[hidden] {
	display: none;
}

.mur-ui .mur-notice.is-success {
	border-color: var(--mur-success-border);
	background: var(--mur-success-bg);
	color: var(--mur-success-text);
}

.mur-ui .mur-notice.is-error {
	border-color: var(--mur-error-border);
	background: var(--mur-error-bg);
	color: var(--mur-error-text);
}

.mur-ui .mur-notice.is-info {
	border-color: var(--mur-muted);
	background: var(--mur-info-bg);
	color: var(--mur-heading);
}

.mur-ui .mur-form {
	display: grid;
	gap: 20px;
	margin: 0;
}

.mur-ui .mur-form[hidden] {
	display: none;
}

.mur-ui .mur-form__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
}

.mur-ui .mur-form__field {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.mur-ui .mur-form__label {
	display: block;
	float: none;
	width: auto;
	margin: 0 0 6px;
	padding: 0;
	color: var(--mur-heading);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.mur-ui .mur-req {
	color: var(--mur-accent);
}

.mur-ui .mur-form__optional {
	color: var(--mur-muted);
	font-weight: 400;
}

.mur-ui .mur-form input[type="text"],
.mur-ui .mur-form input[type="email"],
.mur-ui .mur-form input[type="date"],
.mur-ui .mur-form textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	min-height: 48px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--mur-field-border);
	border-radius: 8px;
	background: var(--mur-card-bg);
	box-shadow: none;
	color: var(--mur-heading);
	font: inherit;
	font-size: 16px; /* 16px stops iOS zooming in on focus. */
	line-height: 1.4;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.mur-ui .mur-form input[type="date"] {
	-webkit-appearance: none;
	appearance: none;
	text-align: left;
}

.mur-ui .mur-form input[type="date"]::-webkit-date-and-time-value {
	text-align: left;
}

.mur-ui .mur-form textarea {
	min-height: 150px;
	resize: vertical;
}

.mur-ui .mur-form input:focus,
.mur-ui .mur-form textarea:focus {
	border-color: var(--mur-accent);
	outline: none;
	box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.15);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mur-accent) 18%, transparent);
}

.mur-ui .mur-form__field--date {
	max-width: 260px;
}

.mur-ui .mur-form__hint {
	display: block;
	margin-top: 6px;
	color: var(--mur-muted);
	font-size: 13px;
	line-height: 1.4;
}

.mur-ui .mur-form__hint a {
	color: inherit;
	text-decoration: underline;
}

.mur-ui .mur-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Clickable stars. Inputs are listed 5→1 and shown reversed so "~" can light up the lower stars. */
.mur-ui .mur-rate__stars {
	position: relative;
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 2px;
	margin-left: -6px;
}

.mur-ui .mur-rate__stars input {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.mur-ui .mur-rate__stars label {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border-radius: 8px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.mur-ui .mur-rate__icon {
	width: 36px;
	height: 36px;
	background: var(--mur-star-empty);
	-webkit-mask: var(--mur-star-mask) center / contain no-repeat;
	mask: var(--mur-star-mask) center / contain no-repeat;
	transition: background-color 0.15s, transform 0.15s;
}

.mur-ui .mur-rate__stars input:checked ~ label .mur-rate__icon {
	background: var(--mur-star);
}

@media (hover: hover) {
	.mur-ui .mur-rate__stars:hover input ~ label .mur-rate__icon {
		background: var(--mur-star-empty);
	}

	.mur-ui .mur-rate__stars:hover label:hover .mur-rate__icon,
	.mur-ui .mur-rate__stars:hover label:hover ~ label .mur-rate__icon {
		background: var(--mur-star);
	}

	.mur-ui .mur-rate__stars label:hover .mur-rate__icon {
		transform: scale(1.1);
	}
}

.mur-ui .mur-rate__stars input:focus-visible + label {
	outline: 2px solid var(--mur-accent);
}

.mur-ui .mur-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.mur-ui .mur-check input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--mur-accent);
}

.mur-ui .mur-check label {
	margin: 0;
	color: var(--mur-text);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}

.mur-ui .mur-form__actions {
	margin: 0;
}

/* Dark colour scheme ----------------------------------------------------- */

/* Branding tab > Colour scheme > Dark, for black or dark pages. The colours must match
   monster_user_reviews_branding_dark_defaults() in includes/branding.php. Colours changed on
   the Branding tab still win: they are printed for .mur-ui.mur-scheme-dark too. */
.mur-ui.mur-scheme-dark {
	--mur-accent-dark: #e02424;
	--mur-heading: #f4f4f6;
	--mur-text: #c8c8ce;
	--mur-muted: #9b9ba3;
	--mur-card-bg: #16161a;
	--mur-border: #2e2e35;
	--mur-field-border: #4a4a52;
	--mur-hover-bg: #222228;
	--mur-avatar-bg: #f4f4f6;
	--mur-avatar-text: #141414;
	--mur-star-empty: #3d3d45;
	--mur-recommend: #2d88ff;
	--mur-recommend-text: #6aa8ff;
	--mur-success-bg: #10281a;
	--mur-success-text: #9fdfae;
	--mur-success-border: #3fa45a;
	--mur-error-bg: #2e1111;
	--mur-error-text: #ff9c9c;
	--mur-error-border: #e04040;
	--mur-info-bg: #202026;
	/* Links and "Read more" in a lighter shade of the accent, so they stay readable on dark boxes. */
	--mur-accent-text: color-mix(in srgb, var(--mur-accent) 62%, #fff);
	color-scheme: dark;
}

.mur-ui.mur-scheme-dark .mur-review,
.mur-ui.mur-scheme-dark .mur-badge,
.mur-ui.mur-scheme-dark.mur-form-wrap {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 24px -14px rgba(0, 0, 0, 0.7);
}

.mur-ui.mur-scheme-dark .mur-review::before {
	opacity: 0.28;
}

.mur-ui.mur-scheme-dark button.mur-review__toggle:hover,
.mur-ui.mur-scheme-dark button.mur-review__toggle:focus,
.mur-ui.mur-scheme-dark button.mur-reply__toggle:hover,
.mur-ui.mur-scheme-dark button.mur-reply__toggle:focus {
	color: var(--mur-heading);
}

/* Site boxes: brighter link colours on dark boxes. */
.mur-ui.mur-scheme-dark .mur-badge--google { --mur-brand-text: #8ab4f8; }
.mur-ui.mur-scheme-dark .mur-badge--own { --mur-brand-text: var(--mur-accent-text); }
.mur-ui.mur-scheme-dark .mur-badge--tripadvisor .mur-badge__cta { color: #34e0a1; }
.mur-ui.mur-scheme-dark .mur-badge--trustpilot .mur-badge__cta { color: #3fd49a; }

/* Small screens ---------------------------------------------------------- */

@media (max-width: 640px) {
	.mur-ui {
		--mur-gap: 16px;
	}

	.mur-ui .mur-summary {
		padding: 18px;
	}

	/* Centre the scores on phones. */
	.mur-ui .mur-summary__scores {
		justify-content: center;
		width: 100%;
	}

	.mur-ui .mur-summary__score {
		justify-content: center;
	}

	.mur-ui .mur-summary__actions,
	.mur-ui .mur-controls {
		width: 100%;
	}

	.mur-ui .mur-select {
		flex: 1 1 140px;
	}

	.mur-ui .mur-select select {
		min-width: 0;
		padding: 0 32px 0 12px;
	}

	.mur-ui .mur-select::after {
		right: 12px;
	}

	.mur-ui .mur-summary__actions .mur-btn,
	.mur-ui .mur-form__actions .mur-btn {
		width: 100%;
	}

	.mur-ui .mur-review {
		padding: 22px 18px 16px;
	}

	.mur-ui .mur-review__title {
		font-size: 19px;
	}

	.mur-ui.mur-form-wrap {
		margin: 32px 0;
		padding: 24px 18px;
	}

	.mur-ui .mur-form__title {
		font-size: 26px;
	}

	.mur-ui .mur-form__field--date {
		max-width: none;
	}
}

@media (forced-colors: active) {
	.mur-ui .mur-stars,
	.mur-ui .mur-bubbles,
	.mur-ui .mur-logo,
	.mur-ui .mur-badge__thumb,
	.mur-ui .mur-rate__icon,
	.mur-ui .mur-recommend__icon,
	.mur-ui .mur-reply__icon {
		forced-color-adjust: none;
	}
}

@media print {
	.mur-ui .mur-review[hidden] {
		display: flex;
	}

	.mur-ui .mur-review__body {
		max-height: none;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.mur-ui .mur-reply__body[hidden] {
		display: block;
	}

	.mur-ui .mur-controls,
	.mur-ui .mur-more,
	.mur-ui .mur-review__toggle,
	.mur-ui .mur-reply__toggle,
	.mur-ui .mur-photos__close,
	.mur-ui.mur-form-wrap {
		display: none;
	}
}