/* =====================================================================
   Unified feedback engine — shared styling for the data-driven renderer
   (feedback_engine.js + _feedback_engine.html). Concession / event /
   restaurant surfaces. Colours come from the concession theme vars (--cn-*)
   when present, with fallbacks so it looks right everywhere.
   ===================================================================== */

.cn-feedback-engine {
  --fe-primary: var(--cn-primary, #f15a48);
  --fe-primary-strong: var(--cn-primary-strong, #b8331f);
  --fe-primary-soft: var(--cn-primary-soft, #ffe4e1);
  --fe-ink: var(--cn-ink, #1c1410);
  --fe-muted: var(--cn-muted, #7a6256);
  --fe-surface: var(--cn-surface, #ffffff);
  --fe-surface-2: var(--cn-surface-2, #faf6f1);
  --fe-line: var(--cn-line, #ece3d8);
  --fe-radius: 16px;
  --fe-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --fe-r1: #ef4444; --fe-r2: #f97316; --fe-r3: #f59e0b; --fe-r4: #84cc16; --fe-r5: #22c55e;
  --fe-error: #dc2626;

  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 6px 14px 24px;
  box-sizing: border-box;
  color: var(--fe-ink);
  font-family: var(--cn-font-body, "Inter", -apple-system, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.cn-feedback-engine *,
.cn-feedback-engine *::before,
.cn-feedback-engine *::after { box-sizing: border-box; }

/* The engine toggles visibility via the `hidden` attribute — keep it winning. */
.cn-feedback-engine [hidden] { display: none !important; }

/* ---- progress ---- */
.cn-fe-progress { height: 5px; border-radius: 999px; background: var(--fe-line); overflow: hidden; }
.cn-fe-progress-bar {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--fe-primary), var(--fe-primary-strong));
  transition: width 0.34s var(--fe-ease);
}

/* ---- body / question + contact cards ---- */
.cn-fe-body { display: flex; flex-direction: column; gap: 9px; counter-reset: feq; }
/* contact page: vertically centre the card + footer together */
.cn-feedback-engine.cn-fe-contact-page { min-height: 68vh; justify-content: center; }

/* inline error (replaces alert) */
.cn-fe-error {
  margin: 2px auto 0;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: var(--fe-primary-strong);
  background: var(--fe-primary-soft);
  border: 1px solid var(--fe-primary);
  border-radius: 12px;
  animation: feShake 0.32s ease;
}
@keyframes feShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.cn-fe-question,
.cn-fe-contact {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 13px 14px 11px;
  background: var(--fe-surface);
  border: 1px solid var(--fe-line);
  border-radius: var(--fe-radius);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 10px 24px -20px rgba(0,0,0,0.28);
}
.cn-fe-qtext {
  font-family: var(--cn-font-heading, "Plus Jakarta Sans", "Inter", system-ui, sans-serif);
  font-size: 15px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: var(--fe-ink);
}
.cn-fe-question > .cn-fe-qtext::before {
  counter-increment: feq;
  content: counter(feq) ". ";
  color: var(--fe-primary);
  font-weight: 800;
}

/* custom message on the contact step */
.cn-fe-message {
  font-family: var(--cn-font-heading, "Plus Jakarta Sans", "Inter", system-ui, sans-serif);
  font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--fe-ink);
}
/* small-print terms link inside a contact message */
.cn-fe-tnc {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fe-ink);
  opacity: 0.65;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cn-fe-tnc:hover { opacity: 1; }

/* contact step — centred, clean entry UI */
.cn-fe-contact { align-items: center; text-align: center; gap: 14px; padding: 24px 16px 20px; }
.cn-fe-contact .cn-fe-field { width: 100%; max-width: 340px; align-items: center; gap: 8px; }
.cn-fe-contact .cn-fe-field > input { text-align: center; }

/* ---- rating (Font Awesome face scale, red -> green) ---- */
.cn-fe-rating { display: flex; gap: 5px; }
.cn-fe-rating-btn {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
  padding: 7px 2px 5px;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 13px;
  cursor: pointer;
  transition: transform 0.16s var(--fe-ease), background 0.16s, border-color 0.16s, opacity 0.16s;
}
.cn-fe-rating-btn > i { font-size: 23px; opacity: 0.9; transition: transform 0.16s var(--fe-ease), opacity 0.16s; }
.cn-fe-rating-btn[data-value="1"] > i { color: var(--fe-r1); }
.cn-fe-rating-btn[data-value="2"] > i { color: var(--fe-r2); }
.cn-fe-rating-btn[data-value="3"] > i { color: var(--fe-r3); }
.cn-fe-rating-btn[data-value="4"] > i { color: var(--fe-r4); }
.cn-fe-rating-btn[data-value="5"] > i { color: var(--fe-r5); }
.cn-fe-rating-btn > span:first-child:not(:last-child) { font-size: 25px; line-height: 1; }  /* emoji fallback */
.cn-fe-rating-btn > span:last-child:not(:first-child) {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fe-muted);
}
.cn-fe-rating-btn > span:first-child:last-child { font-size: 16px; font-weight: 800; color: var(--fe-ink); }
.cn-fe-rating-btn:hover { background: rgba(0,0,0,0.035); }
.cn-fe-rating-btn:active { transform: scale(0.9); }
.cn-fe-rating-btn.selected {
  background: var(--fe-primary-soft);
  border-color: var(--fe-primary);
  transform: translateY(-2px) scale(1.04);
}
.cn-fe-rating-btn.selected > i { opacity: 1; transform: scale(1.14); }
.cn-fe-rating-btn.selected > span:last-child { color: var(--fe-ink); }
/* dim the others once one is chosen (graceful where :has is unsupported) */
.cn-fe-rating:has(.selected) .cn-fe-rating-btn:not(.selected) { opacity: 0.4; }
/* per-option custom colour (Question.options[].color -> --fe-opt-color) */
.cn-fe-rating-btn.has-color {
  background: color-mix(in srgb, var(--fe-opt-color) 14%, transparent);
  border-color: color-mix(in srgb, var(--fe-opt-color) 40%, transparent);
}
.cn-fe-rating-btn.has-color > i { color: var(--fe-opt-color); }
.cn-fe-rating-btn.has-color.selected {
  background: color-mix(in srgb, var(--fe-opt-color) 28%, transparent);
  border-color: var(--fe-opt-color);
}

/* ---- single choice (pills) ---- */
.cn-fe-single { display: flex; flex-direction: column; gap: 7px; }
.cn-fe-choice-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; font-size: 15px; font-weight: 600; color: var(--fe-ink);
  background: var(--fe-surface-2); border: 1.5px solid var(--fe-line); border-radius: 13px;
  cursor: pointer; transition: border-color 0.16s, background 0.16s, transform 0.1s;
}
.cn-fe-choice-btn > i { font-size: 17px; width: 22px; text-align: center; color: var(--fe-muted); }
.cn-fe-choice-btn > span:first-child:not(:last-child) { font-size: 20px; }
.cn-fe-choice-btn:active { transform: scale(0.99); }
.cn-fe-choice-btn.selected { background: var(--fe-primary-soft); border-color: var(--fe-primary); color: var(--fe-primary-strong); }
.cn-fe-choice-btn.selected > i { color: var(--fe-primary-strong); }
/* per-option custom colour (Question.options[].color -> --fe-opt-color) */
.cn-fe-choice-btn.has-color {
  background: color-mix(in srgb, var(--fe-opt-color) 10%, var(--fe-surface-2));
  border-color: color-mix(in srgb, var(--fe-opt-color) 45%, var(--fe-line));
}
.cn-fe-choice-btn.has-color > i { color: var(--fe-opt-color); }
.cn-fe-choice-btn.has-color.selected {
  background: color-mix(in srgb, var(--fe-opt-color) 22%, var(--fe-surface-2));
  border-color: var(--fe-opt-color);
}

/* ---- multi choice ---- */
.cn-fe-multi { display: flex; flex-direction: column; gap: 7px; }
.cn-fe-multi-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; font-size: 15px; font-weight: 600;
  background: var(--fe-surface-2); border: 1.5px solid var(--fe-line); border-radius: 13px; cursor: pointer;
}
.cn-fe-multi-item input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--fe-primary); }
.cn-fe-multi-item > i { font-size: 17px; color: var(--fe-muted); }

/* ---- yes / no ---- */
.cn-fe-yesno { display: flex; gap: 9px; }
.cn-fe-yesno-btn {
  flex: 1 1 0; padding: 14px 12px; font-size: 15px; font-weight: 800; color: var(--fe-ink);
  background: var(--fe-surface-2); border: 1.5px solid var(--fe-line); border-radius: 14px; cursor: pointer;
  transition: border-color 0.16s, background 0.16s, transform 0.1s;
}
.cn-fe-yesno-btn:active { transform: scale(0.98); }
.cn-fe-yesno-btn.selected { background: var(--fe-primary-soft); border-color: var(--fe-primary); color: var(--fe-primary-strong); }

/* ---- free text + comment ---- */
.cn-fe-text { display: flex; }
.cn-fe-textarea,
.cn-fe-comment {
  width: 100%; resize: vertical; min-height: 78px; padding: 12px 13px; font: inherit; font-size: 16px; line-height: 1.5;
  color: var(--fe-ink); background: var(--fe-surface-2); border: 1.5px solid var(--fe-line); border-radius: 13px;
  transition: border-color 0.16s;
}
.cn-fe-textarea::placeholder, .cn-fe-comment::placeholder { color: var(--fe-muted); opacity: 0.65; }
.cn-fe-textarea:focus, .cn-fe-comment:focus { outline: none; border-color: var(--fe-primary); }

/* expandable per-question comment (left-aligned, fixed size, animated open) */
.cn-fe-comment-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cn-fe-comment-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0; font-size: 13px; font-weight: 700; color: var(--fe-primary);
  background: none; border: none; cursor: pointer;
}
.cn-fe-comment-toggle > i { font-size: 11px; transition: transform 0.22s var(--fe-ease); }
.cn-fe-comment-wrap.open .cn-fe-comment-toggle > i { transform: rotate(90deg); }
.cn-fe-comment-box {
  width: 100%; max-width: 320px;
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  transition: max-height 0.28s var(--fe-ease), opacity 0.22s, margin-top 0.28s;
}
.cn-fe-comment-wrap.open .cn-fe-comment-box { max-height: 100px; opacity: 1; margin-top: 2px; }
.cn-fe-comment {
  width: 100%; height: 70px; min-height: 70px;
  font-size: 16px; text-align: left; resize: none;
}
.cn-fe-comment::placeholder { text-align: left; }

/* contact validation: card goes red + shakes, error under the field */
.cn-fe-contact.cn-fe-invalid {
  border-color: var(--fe-error);
  box-shadow: 0 0 0 1.5px var(--fe-error), 0 10px 24px -20px rgba(0,0,0,0.28);
  animation: feShake 0.34s ease;
}
.cn-fe-contact.cn-fe-invalid .cn-fe-field > input { border-color: var(--fe-error); }
.cn-fe-field-error { font-size: 13px; font-weight: 600; color: var(--fe-error); text-align: center; }

/* ---- contact step ---- */
.cn-fe-field { display: flex; flex-direction: column; gap: 6px; }
.cn-fe-field > span { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fe-muted); }
.cn-fe-field > input {
  width: 100%; padding: 13px 14px; font: inherit; font-size: 16px; color: var(--fe-ink);
  background: var(--fe-surface-2); border: 1.5px solid var(--fe-line); border-radius: 13px;
}
.cn-fe-field > input:focus { outline: none; border-color: var(--fe-primary); }
.cn-fe-consent, .cn-fe-marketing {
  display: flex; align-items: flex-start; gap: 11px; font-size: 13px; line-height: 1.45; color: var(--fe-ink); cursor: pointer;
}
.cn-fe-consent input[type="checkbox"], .cn-fe-marketing input[type="checkbox"] {
  width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--fe-primary);
}

/* ---- footer ---- */
.cn-fe-footer { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.cn-fe-back {
  padding: 15px 18px; font-size: 15px; font-weight: 700; color: var(--fe-muted);
  background: transparent; border: 1.5px solid var(--fe-line); border-radius: 999px; cursor: pointer;
}
.cn-fe-primary {
  flex: 1 1 auto; padding: 16px 20px; font-size: 16px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--fe-primary), var(--fe-primary-strong));
  border: none; border-radius: 999px; cursor: pointer;
  box-shadow: 0 10px 22px -10px var(--fe-primary);
  transition: transform 0.12s, box-shadow 0.12s, opacity 0.12s;
}
.cn-fe-primary:active { transform: translateY(1px) scale(0.99); }
.cn-fe-primary:disabled { opacity: 0.55; cursor: default; }

/* ---- thank-you (animated completion) ---- */
.cn-fe-thanks {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 44px 16px;
  animation: feThanksIn 0.5s var(--fe-ease) both;
}
.cn-fe-thanks::before {
  content: "\2713";
  display: flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; margin-bottom: 12px;
  font-size: 32px; font-weight: 800; color: #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--fe-primary), var(--fe-primary-strong));
  animation: feCheckPop 0.6s cubic-bezier(0.18, 0.9, 0.32, 1.4) 0.08s both,
             feCheckRing 0.9s ease-out 0.45s 1 both;
}
.cn-fe-thanks-title { font-size: 23px; font-weight: 800; color: var(--fe-ink); animation: feRise 0.5s var(--fe-ease) 0.28s both; }
.cn-fe-thanks-sub { font-size: 14px; color: var(--fe-muted); animation: feRise 0.5s var(--fe-ease) 0.38s both; }
.cn-fe-done {
  margin-top: 16px; padding: 13px 28px; font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--fe-primary), var(--fe-primary-strong));
  border: none; border-radius: 999px; cursor: pointer;
  animation: feRise 0.5s var(--fe-ease) 0.5s both;
}
@keyframes feThanksIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes feCheckPop { 0% { transform: scale(0) rotate(-25deg); opacity: 0; } 60% { transform: scale(1.18) rotate(4deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes feCheckRing { 0% { box-shadow: 0 0 0 0 var(--fe-primary-soft); } 100% { box-shadow: 0 0 0 26px transparent; } }
@keyframes feRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .cn-fe-thanks, .cn-fe-thanks::before, .cn-fe-thanks-title, .cn-fe-thanks-sub, .cn-fe-done { animation: none; }
}