/*
 * WS Reviews — guest widget.
 *
 * Deliberately small and unopinionated: the widget lives inside the theme's
 * layout (header, fonts, colours, RTL direction all inherited). Only logical
 * properties are used, so nothing needs a mirrored RTL stylesheet.
 */

.wsr {
	--wsr-accent: var(--wp--preset--color--primary, #c9a227);
	--wsr-star: #f5b301;
	--wsr-text: inherit;
	--wsr-muted: rgba(0, 0, 0, .55);
	--wsr-btn-text: #fff;
	--wsr-line: rgba(0, 0, 0, .14);

	box-sizing: border-box;
	max-inline-size: 34rem;
	margin-inline: auto;
	padding-block: 2rem;
	padding-inline: 1rem;
	color: var(--wsr-text);
	text-align: center;
}

.wsr *,
.wsr *::before,
.wsr *::after {
	box-sizing: inherit;
}

/* Anything the widget hides stays hidden: .wsr__btn sets display, and that
 * beat the hidden attribute — with no Google link configured the guest saw a
 * big Google button leading to "#". Theme styles for links do the same. */
.wsr [hidden] {
	display: none !important;
}

/* Shown only to the owner, on the chosen page, while the feature is off. */
.wsr-off {
	max-inline-size: 34rem;
	margin: 1.5rem auto;
	padding: .75rem 1rem;
	border: 1px dashed #b32d2e;
	border-radius: .5rem;
	color: #b32d2e;
	text-align: center;
	font-size: .875rem;
}

.wsr__title {
	margin: 0 0 .5rem;
	font-size: clamp(1.25rem, 1rem + 1.6vw, 1.75rem);
	line-height: 1.25;
}

.wsr__branch {
	margin: -.25rem 0 .75rem;
	font-weight: 600;
	color: var(--wsr-muted);
}

.wsr__intro,
.wsr__lead {
	margin: 0 0 1.25rem;
	color: var(--wsr-muted);
	line-height: 1.5;
}

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

.wsr__stars {
	display: flex;
	justify-content: center;
	gap: .25rem;
	margin-block: 1rem 1.5rem;
}

/* 44px is the smallest tap target that a thumb reliably hits — this screen
   is used on a phone, standing, one-handed. */
/* Stars and the words under their ends share one box as wide as the stars. */
.wsr__scale {
	inline-size: -webkit-fit-content;
	inline-size: -moz-fit-content;
	inline-size: fit-content;
	max-inline-size: 100%;
	/* Physical first: margin-inline is iOS 14.5+, older iPhones pushed the
	   stars to the edge. */
	margin-left: auto;
	margin-right: auto;
	margin-inline: auto;
	margin-block: 1rem 1.5rem;
}

.wsr__scale .wsr__stars {
	margin-block: 0;
}

/* As wide as the stars, whatever the words: width 0 keeps long words from
   widening the box (the stars would centre in it and the words drift past
   the end stars), min-width 100% then takes the stars' width. */
.wsr__ends {
	display: flex;
	justify-content: space-between;
	inline-size: 0;
	min-inline-size: 100%;
	gap: 1rem;
	margin-block-start: .25rem;
	padding-inline: .25rem;
	font-size: .875rem;
	line-height: 1.3;
	color: var(--wsr-muted);
}

.wsr__ends span {
	max-inline-size: 50%;
}

.wsr__ends span:first-child {
	text-align: start;
}

.wsr__ends span:last-child {
	text-align: end;
}

.wsr__star {
	inline-size: 3rem;
	block-size: 3rem;
	min-inline-size: 44px;
	min-block-size: 44px;
	display: grid;
	place-items: center;
	padding: .25rem;
	border: 0;
	border-radius: .5rem;
	background: none;
	color: var(--wsr-star-off, var(--wsr-line));
	cursor: pointer;
	transition: transform .12s ease, color .12s ease;
	-webkit-tap-highlight-color: transparent;
}

.wsr__star svg {
	inline-size: 100%;
	block-size: 100%;
	fill: currentColor;
}

.wsr__star:hover,
.wsr__star:focus-visible,
.wsr__star.is-on {
	color: var(--wsr-star);
}

.wsr__star:focus-visible {
	outline: 2px solid var(--wsr-accent);
	outline-offset: 2px;
}

.wsr__star:active {
	transform: scale(.92);
}

.wsr.is-busy .wsr__star {
	pointer-events: none;
	opacity: .6;
}

/* --- Buttons and links -------------------------------------------------- */

.wsr__btn {
	display: inline-block;
	min-block-size: 44px;
	padding: .75rem 1.5rem;
	border: 0;
	border-radius: .5rem;
	font: inherit;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
}

.wsr__btn--primary {
	background: var(--wsr-accent);
	color: var(--wsr-btn-text);
}

/* The Google button is a link, and themes colour links inside their content
   blocks with stronger selectors — on Bursa ".about-wrap-desc a" painted the
   text purple on the purple button. Both colours are the owner's own settings,
   so here they are allowed to win over the theme. */
.wsr a.wsr__btn--primary,
.wsr a.wsr__btn--primary:link,
.wsr a.wsr__btn--primary:visited,
.wsr a.wsr__btn--primary:hover,
.wsr a.wsr__btn--primary:focus,
.wsr a.wsr__btn--primary:active,
.wsr button.wsr__btn--primary {
	background: var(--wsr-accent) !important;
	color: var(--wsr-btn-text, #fff) !important;
	text-decoration: none !important;
}

.wsr__btn[disabled] {
	opacity: .5;
	cursor: not-allowed;
}

.wsr__note {
	margin-block-start: .75rem;
	font-size: .8125rem;
	color: var(--wsr-muted);
}

/* The public-platform link stays available on the unhappy branch too: only
   its visual weight differs. Hiding it from unhappy guests is review gating
   and can cost the shop its listing. */
.wsr__alt {
	margin-block-start: 1.5rem;
	font-size: .8125rem;
	color: var(--wsr-muted);
}

.wsr__link {
	color: inherit;
	text-decoration: underline;
}

/* --- Private form ------------------------------------------------------- */

.wsr__form {
	text-align: start;
}

.wsr__label {
	display: block;
	margin-block: .75rem .25rem;
	font-size: .875rem;
	font-weight: 600;
}

/* Field border is the owner's colour, and a theme's own form reset
   ("textarea { border: 0 }" and friends) must not erase it: a borderless
   field on a white page is invisible. No dark-scheme variant on purpose —
   it followed the visitor's browser, not the site, and turned the border
   white on Bursa's white page. */
.wsr .wsr__textarea,
.wsr .wsr__input {
	inline-size: 100%;
	padding: .625rem .75rem;
	border: 1px solid var(--wsr-field-border, #c3c4c7) !important;
	border-radius: .5rem;
	font: inherit;
	background: #fff;
	color: inherit;
	box-shadow: none;
}

.wsr .wsr__textarea:focus,
.wsr .wsr__input:focus {
	border-color: var(--wsr-accent) !important;
	outline: 2px solid var(--wsr-accent);
	outline-offset: 0;
}

.wsr__textarea {
	resize: vertical;
	min-block-size: 6rem;
}

.wsr__hint {
	margin-block: .25rem 0;
	font-size: .75rem;
	color: var(--wsr-muted);
}

.wsr__check {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin-block-start: .75rem;
	font-size: .8125rem;
	text-align: start;
}

/* Consent next to the Google button ("after the stars" mode): centred like
 * the rest of the step. The button looks active from the start (Olga,
 * 04.10.2026); without the tick a press on it only shows the warning. */
.wsr__check--happy {
	justify-content: center;
	margin-block: .25rem 1rem;
}

/* The happy block under the stars (one page). */
.wsr__inline {
	margin-block-start: 1.25rem;
}

/* Saved: the stars stay as chosen and no longer react. */
.wsr--saved .wsr__star {
	cursor: default;
}

.wsr--saved .wsr__star:not(.is-on):hover,
.wsr--saved .wsr__star:not(.is-on):focus-visible {
	color: var(--wsr-star-off, var(--wsr-line));
}

.wsr--saved .wsr__star:active {
	transform: none;
}

/* "Back to the stars": a wrong tap is corrected by the next one (within
   30 minutes); in "after the stars" — only while nothing is saved yet. */
.wsr__back {
	display: block;
	margin: .75rem auto 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wsr-muted, #5c6470);
	font: inherit;
	font-size: .8125rem;
	text-decoration: underline;
	cursor: pointer;
}

.wsr__form .wsr__btn {
	margin-block-start: 1.25rem;
	inline-size: 100%;
}

.wsr__err {
	margin-block: .75rem 0;
	color: #b32d2e;
	font-size: .875rem;
}

.wsr__err[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.wsr * {
		transition: none !important;
	}
}