/*
 * survey.css — Aveniqx Client Satisfaction Survey
 * Scoped styles for the survey template. Loaded only on template-survey.php.
 * Colours match the site palette: teal #2B7A78 · dark teal #1F5F5D · light teal #E0F2F1
 */

/* ─────────────────────────────────────────────────────────────────────────────
   HONEYPOT  —  Visually hidden but NOT display:none (some bots skip hidden els)
   ───────────────────────────────────────────────────────────────────────────── */
.survey-honeypot {
	position: absolute;
	left:     -9999px;
	top:      -9999px;
	width:    1px;
	height:   1px;
	overflow: hidden;
	opacity:  0;
	pointer-events: none;
	tabindex: -1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SHARED FORM INPUTS
   ───────────────────────────────────────────────────────────────────────────── */
.survey-text-input,
.survey-select,
.survey-textarea {
	display: flex;
	width:            100%;
	background-color: #ffffff;
	border:           1.5px solid #E5E5E5;
	border-radius:    0.375rem; /* rounded-md */
	padding:          0 1rem;
	font-size:        1rem;
	color:            #333333;
	transition:       border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance:       none;
}

.survey-text-input,
.survey-select {
	height: 3rem; /* h-12 */
	line-height: 3rem;
}

.survey-textarea {
	min-height: 7.5rem; /* ~120px */
	padding:    0.75rem 1rem;
	line-height: 1.5;
	resize:     vertical;
}

.survey-text-input:focus,
.survey-select:focus,
.survey-textarea:focus {
	outline:      none;
	border-color: #2B7A78;
	box-shadow:   0 0 0 3px rgba(43, 122, 120, 0.15);
}

/* Error state */
.survey-input-error,
.survey-input-error:focus {
	border-color: #F44336 !important;
	box-shadow:   0 0 0 3px rgba(244, 67, 54, 0.12) !important;
}

/* Field-level error message */
.survey-field-error {
	display:     flex;
	align-items: center;
	gap:         0.25rem;
	margin-top:  0.35rem;
	font-size:   0.75rem;
	font-weight: 600;
	color:       #F44336;
	line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────────────────────
   STAR RATING  —  Section 2
   ───────────────────────────────────────────────────────────────────────────── */

/* The star button itself */
.star-btn {
	background: none;
	border:     none;
	cursor:     pointer;
	padding:    0.25rem;
	line-height: 1;
	transition: transform 0.15s ease;
}

.star-btn:hover,
.star-btn:focus-visible {
	transform: scale(1.15);
	outline:   none;
}

/* Lucide icon inside the button — default (empty) state */
.star-btn [data-lucide="star"] {
	width:  2.25rem; /* w-9 */
	height: 2.25rem;
	color:  #D9D9D9;
	/* stroke only by default */
	fill:   none;
	stroke: #D9D9D9;
	stroke-width: 1.75;
	transition: color 0.15s ease, fill 0.15s ease, stroke 0.15s ease;
}

/* Filled state — added by JS as .star-filled on the <i> */
.star-btn [data-lucide="star"].star-filled {
	fill:   #F59E0B; /* amber-400 */
	stroke: #F59E0B;
	color:  #F59E0B;
}

/* Hover preview — parent .star-btn gets .star-hover-preview via JS */
.star-btn.star-hover-preview [data-lucide="star"] {
	fill:   #FCD34D; /* amber-300 */
	stroke: #FCD34D;
	color:  #FCD34D;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SCALE BUTTONS  —  Section 3  (1–5 circular buttons)
   ───────────────────────────────────────────────────────────────────────────── */
.scale-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           2.5rem;   /* w-10 */
	height:          2.5rem;   /* h-10 */
	border-radius:   9999px;   /* full circle */
	border:          2px solid #D9D9D9;
	background:      #ffffff;
	color:           #6B6B6B;
	font-size:       0.875rem; /* text-sm */
	font-weight:     600;
	cursor:          pointer;
	transition:      border-color 0.15s ease, background-color 0.15s ease,
	                 color 0.15s ease, transform 0.1s ease,
	                 box-shadow 0.15s ease;
	/* Prevent text selection on rapid clicks */
	user-select:     none;
	-webkit-user-select: none;
}

.scale-btn:hover {
	border-color: #2B7A78;
	color:        #2B7A78;
	transform:    scale(1.08);
}

.scale-btn:focus-visible {
	outline:    none;
	box-shadow: 0 0 0 3px rgba(43, 122, 120, 0.25);
}

/* Selected / active state — toggled by JS */
.scale-btn-active,
.scale-btn.scale-btn-active {
	background-color: #2B7A78;
	border-color:     #2B7A78;
	color:            #ffffff;
	box-shadow:       0 2px 8px rgba(43, 122, 120, 0.35);
	transform:        scale(1.08);
}

/* Ensure active state wins over hover */
.scale-btn.scale-btn-active:hover {
	background-color: #1F5F5D;
	border-color:     #1F5F5D;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SUBMIT BUTTON  —  loading state
   ───────────────────────────────────────────────────────────────────────────── */
#survey-submit-btn[disabled] {
	opacity: 0.7;
	pointer-events: none;
	cursor: not-allowed;
}

/* Spinner keyframe for optional JS-driven loading state */
@keyframes survey-spin {
	to { transform: rotate(360deg); }
}

.survey-spinning {
	animation: survey-spin 0.75s linear infinite;
	display:   inline-block;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE TWEAKS
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.scale-btn {
		width:  2.25rem;
		height: 2.25rem;
		font-size: 0.8125rem;
	}

	.star-btn [data-lucide="star"] {
		width:  1.875rem;
		height: 1.875rem;
	}
}