/* ==========================================================================
   REVIEW FORM — look + gentle motion
   --------------------------------------------------------------------------
   Minimal white card (same in dark and light mode), thin borders, compact
   text: labels 14px, help 13px, inputs 44px high. Purple for actions and
   chosen answers, gold for stars. Mobile first; wider screens at the bottom.

   Motion (all switched off by the block's "Animation" toggle = .is-static,
   and for visitors who ask for reduced motion):
     - each step fades in softly
     - progress bar parts fill in
     - stars pop when tapped
     - happy potato pops in on the thank-you card
   ========================================================================== */

.th-rf {
	--rf-ink: var(--th-charcoal, #141219);
	--rf-head: var(--th-indigo, #36136E);
	--rf-accent: var(--th-purple, #6733BA);
	--rf-grey: #666666;
	--rf-line: #D9D4E6;     /* input borders */
	--rf-soft-line: #ECE8F3; /* dividers inside the card */
	--rf-soft: #F6F3FB;     /* soft lavender boxes */
	--rf-star: #F5B400;
	--rf-error: #C8102E;
	position: relative;
	max-width: 640px;
	margin-inline: auto;
	scroll-margin-top: var(--th-header-offset, 80px);
	font-size: 15px;
	line-height: 1.6;
}
.th-rf .th-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.th-rf [hidden] { display: none !important; }


/* ---------- The card ---------- */
.th-rf-card {
	position: relative;
	background: #FFFFFF;
	color: var(--rf-ink);
	border: 1px solid rgba(54, 19, 110, .12);
	border-radius: 20px;
	padding: 24px 18px 20px;
	box-shadow: 0 12px 32px rgba(20, 10, 50, .18);
}
.th-rf-card :where(h2, h3) { color: var(--rf-head); }


/* ---------- Progress: text line + thin bar in 5 parts ---------- */
.th-rf-progress { margin-bottom: 24px; }
.th-rf .th-rf-progress__text { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 8px; font-size: 13px; line-height: 1.4; }
.th-rf-progress__now { font-weight: 600; color: var(--rf-head); }
.th-rf-progress__next { color: var(--rf-grey); }
.th-rf-progress__bar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.th-rf-progress__seg { height: 4px; border-radius: 4px; background: var(--rf-soft-line); position: relative; overflow: hidden; }
.th-rf-progress__seg::after { content: ""; position: absolute; inset: 0; background: var(--rf-accent); transform: scaleX(0); transform-origin: left; transition: transform .4s ease-out; }
.th-rf-progress__seg.is-on::after { transform: none; }


/* ---------- Titles + small texts ---------- */
.th-rf-step.is-current { animation: th-rf-in .3s ease-out both; }
@keyframes th-rf-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.th-rf .th-rf-title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; outline: none; }
.th-rf .th-rf-intro { margin: 4px 0 22px; font-size: 14px; color: var(--rf-grey); }
.th-rf .th-rf-subtitle { margin: 26px 0 2px; font-size: 15px; font-weight: 600; line-height: 1.4; }
.th-rf .th-rf-help { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--rf-grey); font-weight: 400; }
/* Required fields: a small red * after the label (class "is-req", set in render.php) */
.th-rf .th-rf-field.is-req:not(.th-rf-check) > label::after, .th-rf .is-req > legend::after, .th-rf .is-req .th-rf-rate__name::after,
.th-rf .is-req .th-rf-drop strong::after, .th-rf .th-rf-check.is-req span::after { content: " *"; color: var(--rf-error); font-weight: 600; }
.th-rf .th-rf-req-note { margin: -14px 0 20px; font-size: 12px; color: var(--rf-grey); }
.th-rf .th-rf-req-note span { color: var(--rf-error); font-weight: 600; }
.th-rf .th-rf-error { margin: 6px 0 0; font-size: 13px; font-weight: 500; color: var(--rf-error); }
.th-rf-error:empty { display: none; }


/* ---------- Text boxes ---------- */
.th-rf-field, .th-rf-links, .th-rf-stars, .th-rf-pills, .th-rf-upload { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.th-rf-field > label, .th-rf legend { display: block; margin: 0 0 6px; padding: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--rf-ink); }
.th-rf-field > label + .th-rf-help, .th-rf legend + .th-rf-help { margin-top: -2px; }
.th-rf input[type="text"], .th-rf input[type="email"], .th-rf input[type="tel"], .th-rf input[type="date"], .th-rf input[type="number"], .th-rf select, .th-rf textarea {
	display: block;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--rf-line);
	border-radius: 10px;
	background: #FFFFFF;
	color: var(--rf-ink);
	font: inherit;
	font-size: 15px;
	transition: border-color .15s, box-shadow .15s;
}
.th-rf textarea { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; }
.th-rf input[readonly] { background: var(--rf-soft); color: var(--rf-grey); }
.th-rf ::placeholder { color: #999999; font-weight: 300; opacity: 1; }
.th-rf input:focus, .th-rf select:focus, .th-rf textarea:focus { outline: none; border-color: var(--rf-accent); box-shadow: 0 0 0 3px rgba(103, 51, 186, .15); }
.th-rf .is-invalid input, .th-rf .is-invalid select, .th-rf .is-invalid textarea, .th-rf .th-rf-links.is-invalid .th-rf-link { border-color: var(--rf-error); }
.th-rf .th-rf-count { margin: 4px 0 0; font-size: 12px; color: var(--rf-grey); text-align: right; }
.th-rf-field--short { max-width: 280px; }

/* Two fields side by side on wider screens (name + category, email + name) */
.th-rf-row { display: grid; column-gap: 14px; }
/* Boxes in a row line up at the top: labels, then boxes level; a longer
   message under one box just hangs lower, it never moves the other box */
.th-rf-row { align-items: start; }

/* "We know this product" note */
.th-rf .th-rf-found { margin: -6px 0 18px; padding: 10px 12px; border-radius: 10px; background: #EAF7EF; color: #0E6B33; font-size: 13px; font-weight: 500; animation: th-rf-in .25s ease-out both; }
.th-rf-found::before { content: "✓ "; }

/* Shop links: a fixed-width tag column so all three boxes line up */
.th-rf-link { display: grid; grid-template-columns: 96px 1fr; align-items: stretch; border: 1px solid var(--rf-line); border-radius: 10px; overflow: hidden; background: #FFFFFF; transition: border-color .15s, box-shadow .15s; }
.th-rf-linkbox { margin-top: 8px; } /* one per platform, with its own message line */
.th-rf-links legend + .th-rf-help + .th-rf-linkbox, .th-rf-links legend + .th-rf-linkbox { margin-top: 0; }
.th-rf .th-rf-linkbox.is-invalid .th-rf-link { border-color: var(--rf-error); }
.th-rf-link:focus-within { border-color: var(--rf-accent); box-shadow: 0 0 0 3px rgba(103, 51, 186, .15); }
.th-rf-link__tag { display: flex; align-items: center; padding: 0 12px; background: var(--rf-soft); border-right: 1px solid var(--rf-line); font-size: 13px; font-weight: 500; color: var(--rf-head); }
.th-rf .th-rf-link input { height: 42px; border: 0; border-radius: 0; box-shadow: none; }


/* ---------- Stars ---------- */
.th-rf-stars__row { display: flex; align-items: center; gap: 2px; }
.th-rf-star { cursor: pointer; line-height: 0; transition: transform .15s; }
.th-rf-star input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.th-rf-star svg { width: 28px; height: 28px; fill: #E6E1F0; transition: fill .15s; }
.th-rf-star.is-on svg, .th-rf-star.is-hover svg { fill: var(--rf-star); }
.th-rf-star:hover { transform: scale(1.12); }
.th-rf-star:focus-within svg { stroke: var(--rf-accent); stroke-width: 1.5; }
.th-rf-star.is-pop { animation: th-rf-pop .3s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes th-rf-pop { 40% { transform: scale(1.3); } }

/* Overall: one bigger row in a soft box, with a word ("Good") */
.th-rf-stars--lg .th-rf-stars__row { gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--rf-soft); }
.th-rf-stars--lg .th-rf-star svg { width: 34px; height: 34px; }
.th-rf-stars__word { margin-left: 10px; font-size: 14px; font-weight: 600; color: var(--rf-head); }

/* The 5 shop ratings: one list, a row each (name + help left, stars right) */
.th-rf-rates { margin-top: 10px; border: 1px solid var(--rf-soft-line); border-radius: 14px; }
.th-rf .th-rf-rate { display: grid; grid-template-columns: 1fr; gap: 6px 16px; align-items: center; margin: 0; padding: 12px 14px; border-top: 1px solid var(--rf-soft-line); }
.th-rf-rate:first-child { border-top: 0; }
.th-rf-rate__name { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; }
.th-rf-rate__help { display: block; font-size: 12px; line-height: 1.4; color: var(--rf-grey); }
.th-rf-rate .th-rf-error { grid-column: 1 / -1; margin: 0; }


/* ---------- Choice pills ---------- */
.th-rf-pills__row { display: flex; flex-wrap: wrap; gap: 6px; }
.th-rf-pill { cursor: pointer; }
.th-rf-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.th-rf-pill span {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--rf-line);
	border-radius: 999px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--rf-ink);
	transition: background .15s, color .15s, border-color .15s;
}
.th-rf-pill:hover span { border-color: var(--rf-accent); }
.th-rf-pill input:checked + span { background: var(--rf-accent); border-color: var(--rf-accent); color: #FFFFFF; }
.th-rf-pill input:focus-visible + span { outline: 2px solid var(--rf-accent); outline-offset: 2px; }
.th-rf-pills.is-required legend::after { content: " *"; color: var(--rf-error); }

/* Experience questions: equal-width pills in fixed columns (--th-cols from
   render.php: 3 answers = 3 per row, else 2 per row), so every row starts
   at the left edge and ends at the right edge, and every pill is the same size */
.th-rf-questions { margin: 16px 0 26px; }
.th-rf-questions .th-rf-pills { margin: 0 0 28px; }
.th-rf-questions .th-rf-pills:last-child { margin-bottom: 0; }
.th-rf-questions .th-rf-pills legend { float: left; width: 100%; font-weight: 500; margin-bottom: 10px; }
.th-rf-questions .th-rf-pills legend + * { clear: both; }
.th-rf-questions .th-rf-pills__row { display: grid; grid-template-columns: repeat(var(--th-cols, 2), minmax(0, 1fr)); gap: 8px; }
.th-rf-questions .th-rf-pill span {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 42px;
	padding: 10px 8px; /* 10px 14px from 600px up */
	text-align: center;
	line-height: 1.3;
}


/* ---------- Uploads: 3 equal tiles ---------- */
.th-rf-uploads { display: grid; gap: 12px; align-items: start; }
.th-rf-uploads .th-rf-upload { margin: 0; }
.th-rf-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	height: 160px; /* fixed, so the 3 tiles are always equal */
	padding: 16px 12px;
	border: 1px dashed #BFB6D3;
	border-radius: 14px;
	text-align: center;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.th-rf-drop:hover, .th-rf-drop:focus-within { background: var(--rf-soft); border-color: var(--rf-accent); }
.th-rf-drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.th-rf-drop__icon { width: 26px; height: 26px; margin-bottom: 4px; fill: none; stroke: var(--rf-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.th-rf-drop strong { font-size: 14px; font-weight: 600; line-height: 1.4; }
.th-rf-drop small { font-size: 12px; line-height: 1.4; color: var(--rf-grey); }
.th-rf-tag { margin-top: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: #F1EEF6; color: #5B5670; }
.th-rf-upload.is-invalid .th-rf-drop { border-color: var(--rf-error); }

.th-rf-files { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.th-rf-files:empty { display: none; }
.th-rf-file { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--rf-soft-line); border-radius: 10px; animation: th-rf-in .2s ease-out both; }
.th-rf-file img, .th-rf-file__icon { flex: none; width: 36px; height: 36px; border-radius: 8px; object-fit: cover; display: grid; place-items: center; background: var(--rf-soft); }
.th-rf-file__icon svg { width: 18px; height: 18px; fill: none; stroke: var(--rf-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.th-rf-file__info { flex: 1; min-width: 0; }
.th-rf-file__name { display: block; font-size: 12px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-rf-file__bar { display: block; height: 3px; margin-top: 5px; border-radius: 3px; background: var(--rf-soft-line); overflow: hidden; }
.th-rf-file__bar span { display: block; height: 100%; width: 0; background: var(--rf-accent); transition: width .2s; }
.th-rf-file.is-done .th-rf-file__bar span { background: #1E9E55; }
.th-rf-file.is-failed .th-rf-file__bar span { background: var(--rf-error); width: 100% !important; }
.th-rf-file__remove { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.th-rf-file__remove svg { width: 14px; height: 14px; stroke: var(--rf-grey); stroke-width: 2; stroke-linecap: round; }
.th-rf-file__remove:hover { background: #FCE8EC; }
.th-rf-file__remove:hover svg { stroke: var(--rf-error); }


/* ---------- Notes, ticks, buttons ---------- */
.th-rf .th-rf-banner { margin: 0 0 18px; padding: 10px 12px; border-radius: 10px; background: var(--rf-soft); color: var(--rf-head); font-size: 13px; font-weight: 500; }
.th-rf .th-rf-banner--error { background: #FCE8EC; color: var(--rf-error); }
/* "We kept the answers you typed earlier" + Start over */
.th-rf .th-rf-banner--draft { display: flex; align-items: center; gap: 10px; background: #EAF7EF; color: #0E6B33; }
.th-rf .th-rf-banner--draft span { flex: 1; }
.th-rf .th-rf-banner--draft button { flex: none; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: inherit; text-decoration: underline; cursor: pointer; }
.th-rf-check { margin-bottom: 10px; }
.th-rf .th-rf-check label { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; line-height: 1.45; font-weight: 400; cursor: pointer; } /* ticks: same small size as the help text (owner, 7 Nov 2026) */
.th-rf .th-rf-check .th-legal-consent { font-size: 13px; line-height: 1.45; gap: 8px; }
.th-rf-check input { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--rf-accent); }
/* Legal tick: its text has links in it, so it is one flowing sentence with the box on the left */
.th-rf .th-rf-legal label { display: block; position: relative; padding-left: 28px; line-height: 1.5; }
.th-rf .th-rf-legal input { position: absolute; left: 0; top: 0; }
.th-rf .th-rf-legal a { color: var(--rf-accent); text-decoration: underline; }
.th-rf .th-rf-legal.is-req label::after { content: " *"; color: var(--rf-error); font-weight: 600; }
.th-rf-step[data-step="5"] > .th-rf-help { margin-bottom: 14px; }

.th-rf-nav { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rf-soft-line); }
.th-rf-nav [data-go="next"], .th-rf-nav [data-go="submit"] { margin-left: auto; }
.th-rf .th-rf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--rf-accent);
	color: #FFFFFF;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s;
}
.th-rf .th-rf-btn:hover { background: var(--rf-head); }
.th-rf .th-rf-btn:focus-visible { outline: 2px solid var(--rf-accent); outline-offset: 3px; }
.th-rf-btn:disabled { opacity: .7; cursor: progress; }
.th-rf-back { padding: 8px 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--rf-accent); cursor: pointer; }
.th-rf-back:hover { text-decoration: underline; text-underline-offset: 3px; }


/* ---------- Thank-you card ---------- */
.th-rf-done { text-align: center; padding: 32px 20px; }
.th-rf .th-rf-done:focus, .th-rf .th-rf-done:focus-visible { outline: none; } /* focused for screen readers only */
.th-rf-done .th-rf-intro { max-width: 40ch; margin-inline: auto; }
/* The happy potato (moods + their motion live in assets/css/potato.css); it pops in once */
.th-rf-done__potato { width: 120px; margin: 0 auto 14px; }
.th-rf-done.is-playing .th-rf-done__potato { animation: th-rf-done-pop .7s cubic-bezier(.2, .9, .25, 1.15) both; }
@keyframes th-rf-done-pop { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: none; opacity: 1; } }


/* ---------- Motion off ---------- */
.th-rf.is-static *, .th-rf.is-static *::before, .th-rf.is-static *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
	.th-rf *, .th-rf *::before, .th-rf *::after { animation: none !important; transition: none !important; }
}


/* ---------- Bigger screens ---------- */
@media (min-width: 520px) {
	.th-rf .th-rf-rate { grid-template-columns: 1fr auto; }
}
@media (min-width: 600px) {
	.th-rf-card { padding: 30px 36px 26px; }
	.th-rf-row { grid-template-columns: 1fr 1fr; }
	.th-rf-uploads { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.th-rf-questions .th-rf-pill span { padding: 10px 14px; }
	.th-rf-done { padding: 40px 36px; }
}


/* ---------- Fixing an On-hold review: the parts the moderator asked about (owner, 6 Nov 2026) ----------
   view.js adds .th-rf-fixme to each field named in the "what to fix" lines and opens
   the form on the first step that has one. A gold ring on the progress bar marks each such step. */
.th-rf .th-rf-fixme { position: relative; padding: 12px 12px 10px; margin-inline: -12px; border-radius: 12px; background: #FFF8E1; box-shadow: inset 0 0 0 1.5px #F5B700; }
.th-rf .th-rf-fixme__tag { display: inline-block; margin: 0 0 6px; padding: 2px 9px; border-radius: 999px; background: #F5B700; color: #3A2A00; font-size: 12px; font-weight: 600; line-height: 1.5; }
.th-rf-progress__seg.has-fix { box-shadow: 0 0 0 2px #F5B700; } /* gold ring = this step has something to fix */

/* Step 4: "no video = no reward" box (campaign running) + "spots full" note; Hide my name under the name */
.th-rf-novideo { margin: 16px 0 0; padding: 14px 16px; border-radius: 12px; background: #FFF8DB; border: 1px solid #F0D36B; color: #4A3B00; font-size: 14px; line-height: 1.5; }
.th-rf-novideo[hidden] { display: none; }
.th-rf-novideo p { margin: 0 0 10px; }
.th-rf-novideo__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.th-rf-novideo__buttons button { margin: 0; }
.th-rf-spots-full { margin-top: 16px !important; }
.th-rf .th-rf-hide-name { margin: -4px 0 6px; }