/*
 * JEG Restaurant Reviews — submission form + display styling.
 * Loaded only on singular "restaurant" pages (see jeg-review-cpt.php).
 * Follows the same plain-CSS, no-framework convention as jeg-nav.css.
 */

.jeg-review-section {
	font-family: inherit;
}

/* The site header is sticky (see jeg-nav.css). Any anchor-jump into this
 * section (e.g. the post-submission redirect to #jeg-review-form, or a
 * manual link to #jeg-reviews) should stop below it instead of sliding the
 * target's top edge under the fixed bar. */
#jeg-reviews,
#jeg-review-form {
	scroll-margin-top: 90px;
}

.jeg-review-notice {
	line-height: 1.6;
}

/* ---- honeypot field: hidden from real users, present for bots ---- */
.jeg-hp-wrap {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	margin: 0;
}

/* ---- form layout ---- */
.jeg-review-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.jeg-review-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.jeg-review-field label,
.jeg-review-field-label {
	font-size: 13px;
	font-weight: 700;
	color: #2B2420;
}

.jeg-review-field input[type="text"],
.jeg-review-field input[type="email"],
.jeg-review-field textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	border: 1px solid #D8D0C4;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 15px;
	font-family: inherit;
	color: #2B2420;
	background: #FFFFFF;
	-webkit-appearance: none;
	appearance: none;
}

.jeg-review-field input[type="text"]:focus,
.jeg-review-field input[type="email"]:focus,
.jeg-review-field textarea:focus {
	outline: 2px solid #1F3A5F;
	outline-offset: 1px;
}

.jeg-review-field textarea {
	resize: vertical;
	min-height: 110px;
}

.jeg-review-field input[type="file"] {
	font-size: 13px;
	max-width: 100%;
}

/* ---- custom file-upload control ----
 * Replaces the native <input type="file"> button/label, whose text ("Choose
 * File" / "ファイル選択" etc.) is drawn by the BROWSER according to the
 * visitor's browser/OS UI locale, not this page's language — so it could
 * show Japanese on an English page (or vice versa) regardless of $is_ja.
 * The real input stays in the document and keyboard/AT-focusable (opacity,
 * not display:none) so this stays fully accessible; a styled <label> sits
 * on top as the visible "Choose Files" button, and a status span (updated by
 * jeg-review.js) shows "No file chosen" or the current selection. */
.jeg-file-upload {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.jeg-file-upload-input {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	overflow: hidden;
	cursor: pointer;
}

.jeg-file-upload-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #FFFFFF;
	color: #1F3A5F;
	font-weight: 700;
	font-size: 13.5px;
	line-height: 1;
	padding: 10px 20px;
	border: 1.5px solid #1F3A5F;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.12s ease, color 0.12s ease;
}

.jeg-file-upload-button:hover {
	background: #1F3A5F;
	color: #FFFFFF;
}

/* Keyboard-focus ring on the real input shows up on the visible button that
 * sits right after it in the DOM, so keyboard users still get a clear focus
 * indicator even though the input itself is visually hidden. */
.jeg-file-upload-input:focus-visible + .jeg-file-upload-button,
.jeg-file-upload-input:focus + .jeg-file-upload-button {
	outline: 2px solid #1F3A5F;
	outline-offset: 2px;
}

.jeg-file-upload-status {
	font-size: 13px;
	color: #7A7168;
	overflow-wrap: anywhere;
}

.jeg-review-file-error {
	color: #8A2E27;
	font-size: 12.5px;
	margin: 4px 0 0;
}

.jeg-review-submit {
	align-self: flex-start;
	background: #1F3A5F;
	color: #FFFFFF;
	font-weight: 700;
	font-size: 15px;
	padding: 12px 26px;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.jeg-review-submit:hover,
.jeg-review-submit:focus {
	background: #16283F;
}

.jeg-review-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ---- star rating widget: pure CSS, radio-based, works with JS disabled ----
 * Markup renders stars 5,4,3,2,1 in DOM order inside a row-reverse flex
 * container, so the visual order reads 1..5 left-to-right while the CSS
 * sibling combinator can "fill" every star from the clicked one down to 1. */
.jeg-star-input {
	border: none;
	padding: 0;
	margin: 0;
}

.jeg-star-input-row {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 2px;
}

.jeg-star-input-row input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.jeg-star-input-row label {
	font-size: 34px;
	line-height: 1;
	color: #D8D0C4;
	cursor: pointer;
	transition: color 0.12s ease;
	padding: 2px;
}

.jeg-star-input-row input:checked ~ label {
	color: #E0A526;
}

.jeg-star-input-row label:hover,
.jeg-star-input-row label:hover ~ label {
	color: #E0A526;
}

.jeg-star-input-row input:focus-visible + label {
	outline: 2px solid #1F3A5F;
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---- published review list ---- */
.jeg-review-item time {
	white-space: nowrap;
}

.jeg-review-photos a {
	display: inline-block;
	border-radius: 8px;
	overflow: hidden;
}

.jeg-review-photos img {
	display: block;
}

/* ---- AJAX success confirmation (2026-10-10) ----
 * Replaces the form in place after a successful submission (see
 * jeg-review.js). Deliberately a calm, soft-green "good news" style, kept
 * visually distinct from the .jeg-review-notice error/success banners above
 * (which are legacy, full-page-reload-redirect-driven and still used by the
 * non-JS fallback path). Colors match the owner-approved mockup. */
.jeg-review-confirmation {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	border: 1px solid #CFE3D4;
	background: #F2F8F3;
	border-radius: 12px;
	padding: 18px 20px;
}

.jeg-review-confirmation-icon {
	flex: 0 0 auto;
	margin-top: 1px;
	line-height: 0;
}

.jeg-review-confirmation-text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: #4E6B57;
}

/* ---- mobile: keep the form comfortable at narrow widths ---- */
@media (max-width: 480px) {
	.jeg-star-input-row label {
		font-size: 30px;
	}

	.jeg-review-form-wrap {
		padding: 16px !important;
	}

	.jeg-review-confirmation {
		padding: 14px 16px;
	}

	.jeg-review-average {
		flex-wrap: wrap;
	}

	.jeg-file-upload-status {
		width: 100%;
	}
}

/* ---- tap-to-answer questions (2026-11-01) ----
 * Radio/checkbox inputs styled as pill chips. The input stays in the label
 * (visually hidden, still focusable) so it works without JS. */
.jeg-review-questions {
	display: flex;
	flex-direction: column;
	gap: 14px;
	border-top: 1px solid #EDE6DC;
	border-bottom: 1px solid #EDE6DC;
	padding: 14px 0;
}
.jeg-review-q-lead {
	margin: 0;
	font-size: 12.5px;
	color: #7A7168;
	line-height: 1.6;
}
.jeg-review-q {
	border: none;
	padding: 0;
	margin: 0;
	min-width: 0;
}
.jeg-review-q legend {
	padding: 0;
	margin-bottom: 8px;
}
.jeg-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.jeg-qchip {
	position: relative;
	cursor: pointer;
}
.jeg-qchip input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}
.jeg-qchip span {
	display: inline-block;
	font-size: 13.5px;
	line-height: 1.3;
	color: #2B2420;
	background: #FFFFFF;
	border: 1.5px solid #D8D0C4;
	border-radius: 999px;
	padding: 8px 14px;
	transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.jeg-qchip input:checked + span {
	background: #1F3A5F;
	border-color: #1F3A5F;
	color: #FFFFFF;
}
.jeg-qchip input:focus-visible + span {
	outline: 2px solid #1F3A5F;
	outline-offset: 2px;
}

/* answers shown on each published review */
.jeg-review-chips {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.jeg-review-chips li {
	font-size: 12.5px;
	color: #1F3A5F;
	background: #EEF2F7;
	border-radius: 999px;
	padding: 4px 10px;
}

/* tally of everyone's answers, above the review list */
.jeg-review-summary {
	border: 1px solid #EDE6DC;
	border-radius: 12px;
	background: #FFFFFF;
	padding: 14px 18px;
	margin-bottom: 16px;
}
.jeg-review-summary-title {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	color: #1F3A5F;
}
.jeg-review-summary dl {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
}
.jeg-review-summary dt {
	color: #7A7168;
	font-size: 12.5px;
	margin-top: 8px;
}
.jeg-review-summary dt:first-child {
	margin-top: 0;
}
.jeg-review-summary dd {
	margin: 0;
	color: #2B2420;
}

/* top-of-page entry point (shops with no reviews yet) */
.jeg-review-cta {
	margin-top: var(--space-4, 16px);
	border: 1px dashed #D8D0C4;
	border-radius: 12px;
	padding: 14px 16px;
}
.jeg-review-cta p {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.7;
}
#jeg-review-write {
	scroll-margin-top: 90px;
}

/* ---- photo-first upload (2026-11-01) ---- */
.jeg-photo-hint,
.jeg-photo-note {
	margin: 0;
	font-size: 12.5px;
	color: #7A7168;
	line-height: 1.6;
}
.jeg-photo-drop {
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
}
.jeg-photo-drop-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 120px;
	border: 2px dashed #1F3A5F;
	border-radius: 14px;
	background: #FFFFFF;
	color: #1F3A5F;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.12s ease;
}
.jeg-photo-drop-button:hover {
	background: #EEF2F7;
}
.jeg-photo-drop .jeg-file-upload-input:focus-visible + .jeg-photo-drop-button,
.jeg-photo-drop .jeg-file-upload-input:focus + .jeg-photo-drop-button {
	outline: 2px solid #1F3A5F;
	outline-offset: 2px;
}
.jeg-photo-drop .jeg-file-upload-status {
	text-align: center;
}
.jeg-photo-preview {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.jeg-photo-preview:empty {
	display: none;
}
.jeg-photo-preview img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

/* photos on published reviews: large square tiles */
.jeg-review-photos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin-bottom: 6px;
}
.jeg-review-photos img,
.jeg-review-gallery-grid img {
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}
.jeg-review-credit {
	margin: 0;
	font-size: 12px;
	color: #7A7168;
}
.jeg-review-credit a {
	color: #A5342B;
}
.jeg-review-gallery {
	margin-bottom: 16px;
}
.jeg-review-gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
}