/**
 * Survey field styles (frontend)
 *
 * Star Rating, NPS / Opinion Scale and Tabular Survey (Matrix) fields.
 * All interaction states (hover fill, selection) are pure CSS so the
 * fields work without any JavaScript.
 *
 * @package Auto_Form_Builder
 * @since 1.2.9
 */

/* =========================================================
   Shared
   ========================================================= */

/* Accessibility-only text. Defined here (not just in themes) because
   embed pages and many themes never ship a .screen-reader-text rule. */
.afb-star-rating .screen-reader-text,
.afb-matrix .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================
   Star rating
   ========================================================= */

.afb-star-rating {
	display: inline-flex;
	gap: 2px;
	line-height: 1;
}

.afb-star-rating .afb-star-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.afb-star-rating .afb-star {
	cursor: pointer;
	color: #c8cbd0;
	padding: 2px;
	transition: color 0.15s ease, transform 0.15s ease;
}

/* Higher specificity than the form's generated ".form-field label"
   rules so label color/weight/margin never leak into the stars. */
.form-field .afb-star-rating .afb-star {
	display: inline-block;
	margin: 0;
	font-weight: normal;
	color: #c8cbd0;
}

.afb-star-rating .afb-star-icon {
	display: block;
}

/* Fallback (no :has support): fill only the picked star. */
.afb-star-rating .afb-star-input:checked + .afb-star {
	color: #f5a623;
}

/* Fill every star up to and including the checked one. */
.afb-star-rating:has(.afb-star-input:checked) .afb-star {
	color: #f5a623;
}

.afb-star-rating .afb-star-input:checked ~ .afb-star-input ~ .afb-star {
	color: #c8cbd0;
}

/* Hover preview: fill up to the hovered star. */
.afb-star-rating:has(.afb-star:hover) .afb-star {
	color: #f5a623;
}

.afb-star-rating .afb-star:hover ~ .afb-star {
	color: #c8cbd0;
}

.afb-star-rating .afb-star:hover {
	transform: scale(1.15);
}

/* Keyboard focus ring. */
.afb-star-rating .afb-star-input:focus-visible + .afb-star {
	outline: 2px solid var(--afb-primary, #2271b1);
	outline-offset: 2px;
	border-radius: 4px;
}

/* =========================================================
   NPS / Opinion scale
   ========================================================= */

.afb-scale {
	max-width: 100%;
}

.afb-scale .afb-scale-options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.afb-scale .afb-scale-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.afb-scale .afb-scale-label {
	display: inline-block;
	min-width: 40px;
	padding: 10px 0;
	border: 1px solid #d0d5dd;
	border-radius: 6px;
	background: #fff;
	color: #344054;
	font-size: 14px;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Higher specificity than the form's generated ".form-field label"
   rules so label color/weight/margin never leak into the buttons. */
.form-field .afb-scale .afb-scale-label {
	display: inline-block;
	margin: 0;
	font-weight: 500;
	color: #344054;
}

.afb-scale .afb-scale-label:hover,
.form-field .afb-scale .afb-scale-label:hover {
	border-color: var(--afb-primary, #2271b1);
	color: var(--afb-primary, #2271b1);
}

.afb-scale .afb-scale-input:checked + .afb-scale-label {
	background: var(--afb-primary, #2271b1);
	border-color: var(--afb-primary, #2271b1);
	color: #fff;
}

.afb-scale .afb-scale-input:focus-visible + .afb-scale-label {
	outline: 2px solid var(--afb-primary, #2271b1);
	outline-offset: 2px;
}

/* NPS segment colors (only applied to the selected answer). */
.afb-nps .afb-nps-detractor .afb-scale-input:checked + .afb-scale-label {
	background: #d63638;
	border-color: #d63638;
}

.afb-nps .afb-nps-passive .afb-scale-input:checked + .afb-scale-label {
	background: #dba617;
	border-color: #dba617;
}

.afb-nps .afb-nps-promoter .afb-scale-input:checked + .afb-scale-label {
	background: #00a32a;
	border-color: #00a32a;
}

.afb-scale .afb-scale-end-labels {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 8px;
	font-size: 13px;
	color: #667085;
}

.afb-scale .afb-scale-end-labels .afb-scale-end-label:last-child {
	text-align: right;
}

/* =========================================================
   Tabular survey (matrix)
   ========================================================= */

.afb-matrix-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.afb-matrix {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.afb-matrix thead th {
	padding: 10px 12px;
	font-weight: 600;
	color: #344054;
	text-align: center;
	border-bottom: 2px solid #e4e7ec;
}

.afb-matrix tbody th.afb-matrix-question {
	padding: 12px;
	font-weight: 500;
	color: #344054;
	text-align: left;
	border-bottom: 1px solid #f0f0f1;
}

.afb-matrix .afb-matrix-cell {
	padding: 12px;
	text-align: center;
	border-bottom: 1px solid #f0f0f1;
}

.afb-matrix tbody tr:nth-child(odd) {
	background: rgb(0 0 0 / 2%);
}

.afb-matrix .afb-matrix-input {
	width: 18px;
	height: 18px;
	margin: 0;
	cursor: pointer;
	accent-color: var(--afb-primary, #2271b1);
}

/* Mobile: collapse the table into stacked question groups. */
@media (width <= 600px) {
	.afb-matrix,
	.afb-matrix thead,
	.afb-matrix tbody,
	.afb-matrix tr,
	.afb-matrix th,
	.afb-matrix td {
		display: block;
	}

	.afb-matrix thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.afb-matrix tbody tr {
		margin-bottom: 14px;
		border: 1px solid #e4e7ec;
		border-radius: 8px;
		padding: 6px 0;
		background: #fff;
	}

	.afb-matrix tbody th.afb-matrix-question {
		border-bottom: 1px solid #e4e7ec;
		padding: 10px 12px;
		font-weight: 600;
	}

	.afb-matrix .afb-matrix-cell {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 8px 12px;
		text-align: left;
		border-bottom: 0;
	}

	.afb-matrix .afb-matrix-cell::after {
		content: attr(data-label);
		color: #344054;
	}
}