/**
 * Guide Feedback block — frontend + editor styles.
 *
 * Matches the prototype: border-top separator, transparent buttons with
 * Desert Zen tokens, and a bordered card for the inline feedback form.
 *
 * @package JapanSimplifiedBlocks
 */

/* ── Block root ────────────────────────────────────────────────────────────── */

.jsb-gf {
	border-top: 1px solid #D4C4A0;
	padding-top: 1.5rem;
	font-family: 'Inter', -apple-system, sans-serif;
}

.jsb-gf__prompt {
	font-size: 14px;
	color: #3A3430;
	margin: 0 0 12px;
	opacity: 0.75;
}

/* ── Action row ────────────────────────────────────────────────────────────── */

.jsb-gf__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 0;
}

/* ── Base button ───────────────────────────────────────────────────────────── */

.jsb-gf .jsb-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 16px;
	border-radius: 6px;
	border: 1px solid #D4C4A0;
	background: transparent;
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	color: #3A3430;
	line-height: 1.4;
	transition: background 0.15s, border-color 0.15s;
	-webkit-appearance: none;
	appearance: none;
}

.jsb-gf .jsb-btn:hover {
	background: #EDE5D0;
}

.jsb-gf .jsb-btn i {
	font-size: 16px;
	flex-shrink: 0;
}

/* ── Helpful button — voted state ──────────────────────────────────────────── */

.jsb-gf .jsb-btn--helpful[aria-pressed="true"] {
	background: #EDF1E9;
	border-color: #8B9D77;
	color: #3d6e3d;
	font-weight: 500;
}

/* Voted state on hover — slightly darker to signal it's clickable (to withdraw). */
.jsb-gf .jsb-btn--helpful[aria-pressed="true"]:hover {
	background: #d6e4ce;
	border-color: #6f8860;
}

/* ── Helpful count ─────────────────────────────────────────────────────────── */

.jsb-gf .jsb-count {
	font-size: 13px;
	opacity: 0.75;
}

/* ── Submit button (primary CTA) ───────────────────────────────────────────── */

.jsb-gf .jsb-btn--submit {
	background: #B87355;
	border-color: #B87355;
	color: #fff;
	font-weight: 500;
}

.jsb-gf .jsb-btn--submit:hover {
	background: #9B5E35;
	border-color: #9B5E35;
	color: #fff;
}

.jsb-gf .jsb-btn--submit:disabled {
	opacity: 0.6;
	cursor: default;
}

/* ── Cancel button ─────────────────────────────────────────────────────────── */

.jsb-gf .jsb-btn--cancel {
	color: #757575;
	border-color: transparent;
	background: transparent;
}

.jsb-gf .jsb-btn--cancel:hover {
	background: transparent;
	color: #3A3430;
}

/* ── Feedback form ─────────────────────────────────────────────────────────── */

.jsb-gf .jsb-form {
	margin-top: 14px;
	border: 1px solid #D4C4A0;
	border-radius: 6px;
	padding: 14px;
	background: #fff;
}

.jsb-gf .jsb-form label {
	display: block;
	font-size: 13px;
	color: #757575;
	margin-bottom: 8px;
}

.jsb-gf .jsb-form textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #D4C4A0;
	border-radius: 6px;
	padding: 10px 12px;
	font-size: 14px;
	font-family: inherit;
	color: #3A3430;
	background: #F5F0E8;
	resize: vertical;
	min-height: 80px;
	outline: none;
	transition: border-color 0.15s;
	-webkit-appearance: none;
	appearance: none;
}

.jsb-gf .jsb-form textarea:focus {
	border-color: #8B9D77;
	background: #fff;
}

.jsb-gf .jsb-form-footer {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	align-items: center;
	flex-wrap: wrap;
}

/* ── Status messages ───────────────────────────────────────────────────────── */

.jsb-gf .jsb-msg {
	font-size: 13px;
	padding: 8px 12px;
	border-radius: 6px;
	margin-top: 10px;
	line-height: 1.5;
}

.jsb-gf .jsb-msg i {
	vertical-align: -2px;
	margin-right: 4px;
}

.jsb-gf .jsb-msg--success {
	background: #EDF1E9;
	color: #3d6e3d;
	border: 1px solid #c8d7bc;
}

.jsb-gf .jsb-msg--error {
	background: #F5EDE5;
	color: #9B5E35;
	border: 1px solid #ddb995;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
	.jsb-gf__actions {
		flex-direction: column;
		align-items: flex-start;
	}
}