/**
 * Review photo picker - the dropzone, the thumbnail strip and their controls.
 *
 * Shared, because two bundles draw it: the submit form and the dashboard's
 * inline editor, where a reviewer swaps the photos on a review they already
 * left. It used to live inside form/styles.css under `.w2rr-form-mount`, which
 * meant the dashboard rendered the same markup with none of these rules.
 *
 * No ancestor scope: `w2rr-images` is our namespace and cannot occur in a
 * theme's markup. The two controls that are <button> elements double their own
 * class instead, to keep the weight the ancestor used to lend them against a
 * theme styling buttons by element.
 */

/* Drag-and-drop dropzone - matches the listing-submit uploader look. */
.w2rr-images__drop {
	border: 2px dashed rgba( 0, 0, 0, 0.2 );
	border-radius: 8px;
	padding: 18px 16px;
	text-align: center;
	background: #fafafa;
	transition: border-color 0.15s, background 0.15s;
}

.w2rr-images__drop.is-dragover,
.w2rr-images__drop:hover {
	border-color: var( --w2rr-primary, var( --w2dc-primary, var( --rmaps-primary, #2271b1 ) ) );
	background: #f4f8fc;
}

.w2rr-images__drop-icon {
	font-size: 24px;
	line-height: 1;
	margin-bottom: 4px;
}

.w2rr-images__drop-text {
	font-size: 0.9em;
	opacity: 0.7;
	margin-bottom: 8px;
}

.w2rr-images__browse.w2rr-images__browse {
	appearance: none;
	font: inherit;
	font-size: 0.85em;
	padding: 6px 14px;
	border: 1px solid rgba( 0, 0, 0, 0.25 );
	border-radius: 6px;
	background: #fff;
	color: inherit;
	cursor: pointer;
}

.w2rr-images__browse.w2rr-images__browse:hover {
	border-color: var( --w2rr-primary, var( --w2dc-primary, var( --rmaps-primary, #2271b1 ) ) );
}

.w2rr-images__browse.w2rr-images__browse:focus-visible {
	outline: 2px solid var( --w2rr-primary, var( --w2dc-primary, var( --rmaps-primary, #2271b1 ) ) );
	outline-offset: 2px;
}

.w2rr-images__browse.w2rr-images__browse[disabled] {
	opacity: 0.6;
	cursor: default;
}

.w2rr-images__constraint {
	font-size: 0.78em;
	opacity: 0.55;
	margin-top: 8px;
}

.w2rr-images__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 10px 0 0;
	padding: 0;
}

.w2rr-images__item {
	position: relative;
	margin: 0;
}

.w2rr-images__thumb {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 3px;
	border: 1px solid rgba( 0, 0, 0, 0.15 );
	max-width: 100%;
}

.w2rr-images__remove.w2rr-images__remove {
	position: absolute;
	top: -7px;
	right: -7px;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #b32d2e;
	color: #fff;
	font-size: 13px;
	line-height: 20px;
	text-align: center;
	cursor: pointer;
}

.w2rr-images__remove.w2rr-images__remove:focus-visible {
	outline: 2px solid var( --w2rr-primary, var( --w2dc-primary, var( --rmaps-primary, #2271b1 ) ) );
	outline-offset: 1px;
}

/*
 * Front review form - everything scoped under .w2rr-form-mount so the bundle
 * can never restyle theme chrome. Neutral and theme-friendly: fonts inherit,
 * accents ride CSS vars with fallbacks (--w2rr-accent) so a theme can retint
 * the form without touching the bundle.
 */

.w2rr-form-mount {
	font-size: 15px;
	line-height: 1.5;
	color: inherit;
	/* The form is a plate like a review card - same white, same inset, same
	   corner - so the page reads as one stack of cards rather than a list of
	   cards followed by loose form controls. The top rule that used to separate
	   it from the list is gone with it: two plates with a gap between them
	   already say where one ends and the next begins. */
	margin-top: 32px;
	background-color: #fff;
	padding: 15px;
	border-radius: 5px;
}

/* Inside a directory listing page the host already carries the page's
   horizontal inset, so the plate drops its own - see the same rule for
   .w2rr-review in display/styles.css. */
.w2rr-form-mount.w2rr-in-listing {
	padding-left: 0;
	padding-right: 0;
}

/* No max-width: the form fills its plate, the way the review cards fill theirs.
   A 640px cap made it a narrow column inside a full-width card. */
.w2rr-form-mount .w2rr-form {
	max-width: none;
}

.w2rr-form-mount .w2rr-form__fields {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
	/* Themes paint bare `fieldset` (Storefront: `fieldset, fieldset legend
	   { background-color: #e8e8e8 }`), which put a grey slab across the form
	   inside its own white plate. The fieldset is a grouping element here, not
	   a panel, so it carries no surface of its own. */
	background-color: transparent;
}

/* Freeze Quill/reCAPTCHA too while a submit is in flight - a disabled
   fieldset only reaches native controls. */
.w2rr-form-mount .w2rr-form__fields[disabled] {
	opacity: 0.65;
	pointer-events: none;
}

/* --- the host theme's focus ring, once, for the whole form ----------
   Storefront and themes like it paint
     a:focus, input:focus, textarea:focus, button:focus { outline: 2px solid <accent> }
   and it fires on a plain MOUSE CLICK, so every button here kept a hard
   rectangle long after the click that pressed it. `:focus:not( :focus-visible )`
   matches exactly when the browser would NOT have drawn a ring of its own - a
   click, never a Tab - so the keyboard rings below are all still reached and
   nothing has to be reinstated control by control.

   Outline only: a text field's focus ring is a border plus a shadow and has to
   survive a mouse click, or you cannot see which field you are typing in. */
.w2rr-form-mount :is( a, button, input, select, textarea, summary ):focus:not( :focus-visible ) {
	outline: none;
}

/* The plain-text body field (allow_format="0"). Sized like the editor it
   replaces, so a form reads the same either way, and resizable only downward:
   a textarea dragged wider would break out of the plate around it. */
.w2rr-form-mount .w2rr-form__plain {
	display: block;
	width: 100%;
	min-height: 150px;
	resize: vertical;
	font: inherit;
	line-height: 1.5;
}

/* --- banners / notices ---------------------------------------------------- */

.w2rr-form-mount .w2rr-form__banner {
	padding: 12px 16px;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-left-width: 4px;
	border-radius: 3px;
	background: rgba( 0, 0, 0, 0.02 );
	margin: 0 0 16px;
}

.w2rr-form-mount .w2rr-form__banner--error {
	border-left-color: #b32d2e;
}

.w2rr-form-mount .w2rr-form__banner--info {
	border-left-color: var( --w2rr-primary, var( --w2dc-primary, var( --rmaps-primary, #2271b1 ) ) );
}

.w2rr-form-mount .w2rr-form__banner--success {
	border-left-color: #1a7f37;
}

.w2rr-form-mount .w2rr-form__banner p {
	margin: 0;
}

.w2rr-form-mount .w2rr-form__banner p + p {
	margin-top: 6px;
}

.w2rr-form-mount .w2rr-form__note {
	font-size: 0.9em;
	opacity: 0.8;
}

.w2rr-form-mount .w2rr-form__retry {
	appearance: none;
	margin-left: 12px;
	padding: 3px 12px;
	border: 1px solid rgba( 0, 0, 0, 0.25 );
	border-radius: 3px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.9em;
	cursor: pointer;
}

/* --- loading skeleton ----------------------------------------------------- */

.w2rr-form-mount .w2rr-form__skeleton-line {
	display: block;
	height: 14px;
	border-radius: 3px;
	background: rgba( 0, 0, 0, 0.08 );
	margin-bottom: 12px;
	animation: w2rr-skeleton-pulse 1.2s ease-in-out infinite;
}

.w2rr-form-mount .w2rr-form__skeleton-line--tall {
	height: 96px;
}

@keyframes w2rr-skeleton-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.45; }
}

/* --- fields ---------------------------------------------------------------- */

.w2rr-form-mount .w2rr-form__field {
	margin-bottom: 18px;
}

.w2rr-form-mount .w2rr-form__label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

.w2rr-form-mount .w2rr-form__optional {
	font-weight: 400;
	font-size: 0.85em;
	opacity: 0.7;
}

.w2rr-form-mount .w2rr-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid rgba( 0, 0, 0, 0.25 );
	border-radius: 3px;
	background: #fff;
	color: inherit;
	font: inherit;
}

.w2rr-form-mount .w2rr-input:focus,
.w2rr-form-mount .w2rr-input:focus-visible {
	outline: 2px solid var( --w2rr-primary, var( --w2dc-primary, var( --rmaps-primary, #2271b1 ) ) );
	outline-offset: 1px;
	border-color: transparent;
}

.w2rr-form-mount .w2rr-form__hint {
	font-size: 0.85em;
	opacity: 0.7;
	margin: 6px 0 0;
}

.w2rr-form-mount .w2rr-form__error-inline {
	color: #b32d2e;
	font-size: 0.88em;
	margin: 6px 0 0;
}

.w2rr-form-mount .w2rr-form__anon {
	margin-bottom: 4px;
}

/* --- star ratings ---------------------------------------------------------- */

.w2rr-form-mount .w2rr-form__ratings {
	margin-bottom: 20px;
}

/* The per-criterion rows are set apart from the Overall row with a rule + gap,
   so the overall score reads as the headline and the criteria as its breakdown. */
.w2rr-form-mount .w2rr-form__criteria {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid rgba( 0, 0, 0, 0.1 );
}

.w2rr-form-mount .w2rr-star-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-bottom: 8px;
}

.w2rr-form-mount .w2rr-star-row__label {
	flex: 0 0 11em;
	font-weight: 600;
}

.w2rr-form-mount .w2rr-star-row__stars {
	display: inline-flex;
	align-items: center;
}

/* The input icons are 1.375x the base, which is the 22px they have always
   been at the default 16px base. One number controls a form and the block it
   sits in alike (see the display sheet's note). */
.w2rr-form-mount .w2rr-star {
	position: relative;
	display: inline-block;
	font-size: var( --w2rr-icon-size, 16px );
	line-height: 1;
	margin-right: 3px;
	/* Grows under the pointer, like the maps search form's rating filter. A
	   transform, so the icon that swells does not push its neighbours along the
	   row: nothing here is re-laid out, only painted larger. */
	transition: transform 0.1s ease;
}

/* FIXED ADVANCE WIDTH (FA's own fa-fw metric) on the GLYPH - never on the slot.
   Criteria may each pick a different icon and glyph widths differ wildly (a
   bell is far narrower than a circle), so without this the input rows of a
   multi-criteria form staircase instead of lining up one under another.
   1.2857em is >= every glyph on the sheet, so centering can't overlap a
   neighbour.
   WHY THE GLYPH AND NOT THE SLOT: `.w2rr-star__fill` is an absolutely
   positioned box only `width:50%` of the slot for a half score. Sizing +
   centering the SLOT made that narrow box re-center its own glyph, so the half
   star visibly jumped while the full one (100% box = slot) stayed put. With
   the width on the glyph itself, base and fill lay out identically and the
   fill purely CLIPS. */
.w2rr-form-mount .w2rr-star .w2rr-fa {
	display: inline-block;
	width: 1.28571429em;
	text-align: center;
}

.w2rr-form-mount .w2rr-star__base .w2rr-fa {
	color: var( --w2rr-star-empty, #cfcfcf );
}

/* The 50% clip: an overflow-hidden wrapper over the SAME glyph - no
   fractional-pixel math anywhere else. */
.w2rr-form-mount .w2rr-star__fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	overflow: hidden;
	white-space: nowrap;
	pointer-events: none;
}

/* Invisible half-width hit areas: left commits n-0.5, right commits n. */
.w2rr-form-mount .w2rr-star__hit {
	position: absolute;
	top: 0;
	height: 100%;
	width: 50%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.w2rr-form-mount .w2rr-star__hit--left {
	left: 0;
}

.w2rr-form-mount .w2rr-star__hit--right {
	left: 50%;
}

/* Both halves of a slot are one icon, so the whole slot grows however the
   pointer entered it. Not while the form is submitting: the hit areas are
   disabled then, and an icon that still reacts would promise a click that
   does nothing. */
.w2rr-form-mount .w2rr-star:hover {
	transform: scale( 1.15 );
}

.w2rr-form-mount .w2rr-form__fields[disabled] .w2rr-star:hover {
	transform: none;
}

/* Suppress the THEME's mouse-click focus box on the star (storefront et al. put
   an outline/box-shadow on :focus). Declared BEFORE :focus-visible so keyboard
   focus still wins (equal specificity → later rule applies) and stays accessible. */
.w2rr-form-mount .w2rr-star__hit:focus {
	outline: none;
	box-shadow: none;
}

.w2rr-form-mount .w2rr-star__hit:focus-visible {
	outline: 2px solid var( --w2rr-primary, var( --w2dc-primary, var( --rmaps-primary, #2271b1 ) ) );
	outline-offset: -1px;
}

.w2rr-form-mount .w2rr-star-row__value {
	margin-left: 8px;
	font-size: 0.9em;
	opacity: 0.75;
	min-width: 2em;
}

.w2rr-form-mount .w2rr-star-row__clear {
	appearance: none;
	margin-left: 4px;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 1px solid rgba( 0, 0, 0, 0.2 );
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.7;
}

.w2rr-form-mount .w2rr-star-row__clear:hover,
.w2rr-form-mount .w2rr-star-row__clear:focus-visible {
	opacity: 1;
	outline: 2px solid var( --w2rr-primary, var( --w2dc-primary, var( --rmaps-primary, #2271b1 ) ) );
	outline-offset: 1px;
}

/* --- rich text (Quill) ------------------------------------------------------ */

.w2rr-form-mount .w2rr-quill-wrap .ql-toolbar {
	border-radius: 3px 3px 0 0;
}

.w2rr-form-mount .w2rr-quill-wrap .ql-container {
	border-radius: 0 0 3px 3px;
	font: inherit;
	font-size: 0.95em;
	background: #fff;
}

.w2rr-form-mount .w2rr-quill-wrap .ql-editor {
	min-height: var( --editor-height, 140px );
}

.w2rr-form-mount .w2rr-quill-wrap textarea.w2rr-input {
	min-height: var( --editor-height, 140px );
	resize: vertical;
}

/* --- images ----------------------------------------------------------------- */



/* --- buttons ---------------------------------------------------------------- */

/* Follows the HOST's button palette so "Submit review" matches the directory's
   own buttons (Choose plan, Submit listing, …) instead of shipping its own
   accent. The var chain covers every context this form renders in: a shipped
   w2dc build emits --w2dc-* (its codemod rebrands --rmaps-*), a rocket-maps /
   dev tree emits --rmaps-*, a standalone install falls back to --w2rr-accent.
   Geometry copied from .w2dc-submit-plan__choose (8px 12px / radius 4). */
.w2rr-form-mount .w2rr-form__button {
	appearance: none;
	display: inline-block;
	padding: 9px 22px;
	border: 0;
	border-radius: 4px;
	background: var( --w2rr-button-primary, var( --w2dc-button-primary, var( --rmaps-button-primary, #2271b1 ) ) );
	color: var( --w2rr-button-text, var( --w2dc-button-text, var( --rmaps-button-text, #fff ) ) );
	font: inherit;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
}

/* The success panel can offer two things at once: go to the item (primary) and
   write another review (secondary), so the second one steps back rather than
   competing with the first. */
.w2rr-form-mount .w2rr-form__success-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.w2rr-form-mount .w2rr-form__button--ghost {
	background: transparent;
	border: 1px solid rgba( 0, 0, 0, 0.25 );
	color: inherit;
}

.w2rr-form-mount .w2rr-form__button--ghost:hover {
	background: rgba( 0, 0, 0, 0.04 );
	border-color: rgba( 0, 0, 0, 0.45 );
}

.w2rr-form-mount .w2rr-form__button:hover {
	background: var(
		--w2rr-button-secondary,
		var( --w2dc-button-secondary, var( --rmaps-button-secondary, #135e96 ) )
	);
	color: var( --w2rr-button-text, var( --w2dc-button-text, var( --rmaps-button-text, #fff ) ) );
}

.w2rr-form-mount .w2rr-form__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.w2rr-form-mount .w2rr-form__button[disabled] {
	cursor: default;
	opacity: 0.7;
}

.w2rr-form-mount .w2rr-form__footer {
	margin-top: 4px;
}

/* --- responsive -------------------------------------------------------------- */

@media ( max-width: 480px ) {
	.w2rr-form-mount .w2rr-star-row__label {
		flex-basis: 100%;
	}
}