/**
 * gp/review-modal
 *
 * The trigger takes the live button's shape — 8px radius, 8/16 padding, the
 * site's green — and the dialog is a plain panel: the form inside it is styled
 * by whatever section the block sits in, so nothing here touches the fields.
 */
.gp-review-modal__trigger {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--wp--preset--color--highlight-green);
	border-radius: 8px;
	background: var(--wp--preset--color--highlight-green);
	color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.1;
	text-decoration: none;
}

/* A solid button, so it takes live's solid hover: near-black ground, white
   label, #121212 rule. The keyboard ring is the doubled shadow live draws. */
.gp-review-modal__trigger:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
	border-color: #121212;
	text-decoration: none;
}

.gp-review-modal__trigger:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 2px var(--wp--preset--color--surface),
		0 0 0 4px var(--wp--preset--color--ink);
}

/* Until the script runs the dialog holds nothing and the trigger is a link to
   the form further down the page, so the element must not take up space. */
.gp-review-modal__dialog:not([open]) { display: none; }

.gp-review-modal__dialog {
	inline-size: min(560px, calc(100vw - 32px));
	max-block-size: calc(100vh - 48px);
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

.gp-review-modal__dialog::backdrop { background: rgba(0, 0, 0, 0.5); }

.gp-review-modal__panel {
	position: relative;
	box-sizing: border-box;
	max-block-size: calc(100vh - 48px);
	padding: 28px;
	overflow-y: auto;
	text-align: start;
}

.gp-review-modal__close {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 32px;
	block-size: 32px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.gp-review-modal__close:hover {
	border-color: var(--wp--preset--color--brand-green);
	color: var(--wp--preset--color--brand-green);
}

/* Inside the dialog the form is the whole content, so the heading it brings
   with it is the dialog's title and needs no margin above it. */
.gp-review-modal__body .comment-respond { margin-block-start: 0; }

.gp-review-modal__body .comment-reply-title { padding-inline-end: 40px; }

/* The fields are capped for a wide page column; in a 560px dialog that cap
   only makes them look unfinished. */
.gp-review-modal__body input[type="text"],
.gp-review-modal__body input[type="email"],
.gp-review-modal__body textarea,
.gp-review-modal__body select { max-inline-size: none; }

@media (max-width: 480px) {
	.gp-review-modal__panel { padding: 20px; }
}

/* ---------- the star rating ---------- */

/*
 * Built by view.js from the rating select. The stars are laid out in reverse
 * so that DOM order can run high to low: that is what lets a plain sibling
 * selector light the chosen star and every lower one, with no script watching
 * for hover or change.
 */
.gp-stars {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 4px;
	inline-size: fit-content;
}

/* Hidden, not removed: a required control the browser cannot focus makes it
   refuse the submit without saying why. */
.gp-stars__input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.gp-stars__star {
	margin: 0;
	font-size: 26px;
	line-height: 1;
	color: rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: color 0.12s ease;
}

.gp-stars__text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The chosen star and every one below it. */
.gp-stars__input:checked ~ .gp-stars__star { color: var(--wp--preset--color--brand-gold); }

/* Hover and keyboard focus preview the same way; the hovered star sits after
   the lower ones in the reversed row, so the same sibling rule applies. */
.gp-stars:hover .gp-stars__input:checked ~ .gp-stars__star { color: rgba(0, 0, 0, 0.2); }

.gp-stars__star:hover,
.gp-stars__star:hover ~ .gp-stars__star,
.gp-stars__input:focus-visible ~ .gp-stars__star { color: var(--wp--preset--color--brand-amber); }

.gp-stars__input:focus-visible + .gp-stars__star { outline: 2px solid var(--wp--preset--color--brand-green); outline-offset: 2px; }