/*
 * Public survey page (/s/{token}) — Notion epic
 * 3cdc00e6-855a-81c0-ae76-f2ee66c784b5, phase 4.
 *
 * Registered and enqueued by handle from Tmt_Survey_Page, only on a survey
 * request. Nothing here is ever emitted inline (`.cursorrules`).
 *
 * The page renders inside the active theme, so this file deliberately styles
 * only its own `tmt-survey*` classes and sets no page-level type, colour or
 * background — the theme owns those, and a survey that restyles the shop
 * around it is the failure mode this file is trying not to be. The accent
 * comes from --tmt-primary, which the brand mu-plugin exposes to every
 * stylesheet, with a fallback for a site where it is absent.
 */

.tmt-survey {
	margin: 0 auto;
	max-width: 44rem;
	padding: 2rem 1rem 3rem;
}

.tmt-survey__title {
	margin: 0 0 1rem;
}

.tmt-survey__intro,
.tmt-survey__thanks {
	margin-bottom: 1.5rem;
}

.tmt-survey__reward {
	border-left: 3px solid var(--tmt-primary, #39d8e0);
	font-weight: 600;
	margin-bottom: 1.5rem;
	padding-left: 0.75rem;
}

.tmt-survey__message {
	margin-bottom: 1.5rem;
}

.tmt-survey__error,
.tmt-survey__field-error {
	background: rgba(200, 0, 0, 0.07);
	border-left: 3px solid #c00;
	margin-bottom: 1rem;
	padding: 0.6rem 0.75rem;
}

.tmt-survey__signin {
	margin-bottom: 1.5rem;
}

.tmt-survey__field {
	margin-bottom: 2rem;
}

.tmt-survey__field--missing {
	border-left: 3px solid #c00;
	padding-left: 0.75rem;
}

.tmt-survey-question__prompt {
	display: block;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.tmt-survey-question__help {
	margin: 0 0 0.5rem;
	opacity: 0.8;
}

.tmt-survey-question--choice {
	border: 0;
	margin: 0;
	padding: 0;
}

.tmt-survey-question__option {
	align-items: baseline;
	cursor: pointer;
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.35rem;
}

.tmt-survey-question--text input[type="text"],
.tmt-survey-question--text textarea {
	display: block;
	max-width: 100%;
	width: 100%;
}

.tmt-survey-question--text textarea {
	min-height: 8rem;
}

.tmt-survey__actions {
	margin-top: 2rem;
}

/*
 * The read-only states (logged out, already answered) render the very same
 * fields with `disabled`, so they are dimmed rather than restyled — the
 * customer should recognise the form they are looking at.
 */
.tmt-survey__form--readonly .tmt-survey-question__option,
.tmt-survey__form--readonly .tmt-survey-question--text input[type="text"],
.tmt-survey__form--readonly .tmt-survey-question--text textarea {
	cursor: default;
	opacity: 0.75;
}

/*
 * The promo strip ([tmt_survey_promo]) and the operator-only notice the
 * survey shortcode shows when there is nothing a customer may see.
 *
 * The strip is deliberately quiet: it sits on a homepage an editor has laid
 * out, so it borrows the page's type and only claims a coloured edge and some
 * breathing room. It is not a second hero competing with the real one.
 */

.tmt-survey-promo {
	align-items: center;
	border-left: 4px solid var(--tmt-primary, #39d8e0);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	justify-content: space-between;
	margin: 0 auto 1.5rem;
	max-width: 60rem;
	padding: 1rem 1.25rem;
}

.tmt-survey-promo__text {
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0;
}

.tmt-survey-promo__action {
	margin: 0;
}

.tmt-survey-promo__link {
	border: 2px solid var(--tmt-primary, #39d8e0);
	border-radius: 999px;
	display: inline-block;
	font-weight: 600;
	padding: 0.5rem 1.25rem;
	text-decoration: none;
}

.tmt-survey-promo__link:hover,
.tmt-survey-promo__link:focus {
	background: var(--tmt-primary, #39d8e0);
}

/*
 * Only an editor ever sees this — render_survey() returns an empty string for
 * everybody else — so it is styled as an admin aside, not as page content.
 */
.tmt-survey-notice {
	border: 1px dashed #c00;
	margin: 0 auto 1.5rem;
	max-width: 60rem;
	padding: 0.75rem 1rem;
}

.tmt-survey-notice p {
	margin: 0;
}