/*
  The Fit Class onboarding webform CSS
  Optimised version: embedded base64 icons have been moved to PNG/SVG/JPG files.
  Upload this CSS and the generated image folder together.
*/


/* =========================================================
   The Fit Class Premium Onboarding v7
   Complete CSS rebuild. Icons are CSS-only and do not rely on JS.
   Replace premium-webform.css completely with this file.
   ========================================================= */

.ai-premium-form {
  --tfc-blue: #2563eb;
  --tfc-blue-2: #3b82f6;
  --tfc-blue-dark: #1557d8;
  --tfc-ink: #0f172a;
  --tfc-text: #1f2937;
  --tfc-muted: #667085;
  --tfc-line: #e5eaf2;
  --tfc-bg: #f6f8fb;
  --tfc-card: #ffffff;
  --tfc-soft: #f8fafc;
  --tfc-radius: 24px;
  --tfc-shadow: 0 14px 36px rgba(15, 23, 42, .075);

  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  padding: 8px 14px 28px;
  color: var(--tfc-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: transparent;
}

.ai-premium-form,
.ai-premium-form * {
  box-sizing: border-box;
}

/* =========================================================
   Progress
   ========================================================= */

.ai-premium-form .webform-progress {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 auto 18px !important;
  padding: 0 !important;
}

.ai-premium-form .webform-progress__status {
  order: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.ai-premium-form .webform-progress__percentage,
.ai-premium-form .percentage,
.ai-premium-form .progress-percentage {
  display: inline-block !important;
  color: #8d95a5 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

.ai-premium-form .webform-progress-tracker {
  order: 2 !important;
  display: flex !important;
  width: min(220px, 66vw) !important;
  max-width: 220px !important;
  height: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  list-style: none !important;
  border-radius: 999px !important;
  background: #e8edf5 !important;
  box-shadow: none !important;
}

.ai-premium-form .webform-progress-tracker::before,
.ai-premium-form .webform-progress-tracker::after,
.ai-premium-form .webform-progress-tracker *::before,
.ai-premium-form .webform-progress-tracker *::after {
  display: none !important;
  content: none !important;
}

.ai-premium-form .webform-progress-tracker .progress-step {
  flex: 1 1 0 !important;
  height: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.ai-premium-form .webform-progress-tracker .progress-marker {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ai-premium-form .webform-progress-tracker .progress-title,
.ai-premium-form .webform-progress-tracker .progress-text,
.ai-premium-form .webform-progress-tracker .progress-step-text {
  display: none !important;
}

.ai-premium-form .webform-progress-tracker .progress-step.is-active .progress-marker,
.ai-premium-form .webform-progress-tracker .progress-step.is-complete .progress-marker,
.ai-premium-form .webform-progress-tracker .progress-step[aria-current="step"] .progress-marker {
  background: linear-gradient(90deg, var(--tfc-blue) 0%, var(--tfc-blue-2) 100%) !important;
}

/* =========================================================
   Page shell
   ========================================================= */

.ai-premium-card,
.ai-premium-form .webform-wizard-page {
  width: 100%;
  margin: 0 auto;
  padding: 26px 20px 20px;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: var(--tfc-radius);
  background: var(--tfc-card);
  box-shadow: var(--tfc-shadow);
}

.ai-premium-form.ai-quiz-mode .webform-wizard-page {
  min-height: 0;
  padding: 26px 20px 20px;
}

.ai-premium-form .form-item,
.ai-premium-form .js-form-item,
.ai-premium-form .form-wrapper {
  margin: 0;
}

.ai-premium-form.ai-quiz-mode .ai-quiz-question {
  display: none;
  margin: 0;
}

.ai-premium-form.ai-quiz-mode .ai-quiz-question.is-active {
  display: block;
  animation: tfcFadeUp .18s ease;
}

.ai-premium-form.ai-quiz-mode .ai-quiz-static {
  margin: 0;
}

/* =========================================================
   Typography
   ========================================================= */

.ai-premium-form.ai-quiz-mode .ai-quiz-question > label,
.ai-premium-form.ai-quiz-mode .ai-quiz-question > legend,
.ai-premium-form.ai-quiz-mode .ai-quiz-question .fieldset__legend,
.ai-premium-form.ai-quiz-structured .ai-question-title,
.ai-premium-form.ai-quiz-structured .ai-question-block h1,
.ai-premium-form.ai-quiz-structured .ai-question-block h2,
.ai-premium-form.ai-quiz-structured .ai-question-block h3 {
  display: block;
  max-width: 330px;
  margin: 0 auto 18px !important;
  color: var(--tfc-ink);
  text-align: center !important;
  font-size: clamp(21px, 6vw, 27px) !important;
  line-height: 1.1 !important;
  font-weight: 850 !important;
  letter-spacing: -0.04em !important;
}

.ai-premium-form .ai-question-block {
  margin: 0 0 20px !important;
}

.ai-premium-form.ai-quiz-mode .ai-quiz-question .description,
.ai-premium-form.ai-quiz-mode .ai-quiz-question .form-item__description,
.ai-premium-form.ai-quiz-structured .ai-question-helper,
.ai-premium-form.ai-quiz-structured .ai-page-intro p,
.ai-premium-form.ai-quiz-structured .ai-welcome-copy p {
  max-width: 300px;
  margin: -8px auto 20px;
  color: var(--tfc-muted);
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
}

.ai-premium-form.ai-quiz-structured .ai-question-field > label,
.ai-premium-form.ai-quiz-structured .ai-question-field > legend,
.ai-premium-form.ai-quiz-structured .ai-question-field .fieldset__legend {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================================================
   Inputs
   ========================================================= */

.ai-premium-form input[type="text"],
.ai-premium-form input[type="number"],
.ai-premium-form input[type="email"],
.ai-premium-form input[type="password"],
.ai-premium-form textarea,
.ai-premium-form select {
  width: 100%;
  border: 1px solid #e3e8f0;
  background: #fbfcfe;
  color: var(--tfc-ink);
  border-radius: 17px;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, .025);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.ai-premium-form input[type="text"],
.ai-premium-form input[type="number"],
.ai-premium-form input[type="email"],
.ai-premium-form input[type="password"],
.ai-premium-form select {
  min-height: 56px;
  padding: 0 16px;
  font-size: 17px;
  font-weight: 650;
}

.ai-premium-form textarea {
  min-height: 126px;
  padding: 14px 15px;
  resize: vertical;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 560;
}

.ai-premium-form input:focus,
.ai-premium-form textarea:focus,
.ai-premium-form select:focus {
  outline: 0;
  border-color: rgba(37, 99, 235, .48);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

/* =========================================================
   Choice system
   ========================================================= */

.ai-premium-form .ai-choice-group .form-radios,
.ai-premium-form .ai-choice-group .form-checkboxes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin: 0;
  padding: 0;
}

.ai-premium-form .ai-choice-group .form-type-radio,
.ai-premium-form .ai-choice-group .form-type-checkbox {
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
}

.ai-premium-form .ai-choice-group input[type="radio"],
.ai-premium-form .ai-choice-group input[type="checkbox"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  left: 0 !important;
  top: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.ai-premium-form .ai-choice-group input[type="radio"] + label,
.ai-premium-form .ai-choice-group input[type="checkbox"] + label {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 40.5px !important;
  margin: 0 !important;
  padding: 11px 42px 11px 46px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #202a3a !important;
  box-shadow: 0 5px 14px rgba(15, 23, 42, .028) !important;
  font-size: 13px !important;
  line-height: 1.18 !important;
  font-weight: 780 !important;
  letter-spacing: -.018em !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease;
}

/* Left icon circle */
.ai-premium-form .ai-choice-group input[type="radio"] + label::before,
.ai-premium-form .ai-choice-group input[type="checkbox"] + label::before {
  content: "" !important;
  position: absolute !important;
  left: 11px !important;
  right: auto !important;
  top: 50% !important;
  display: grid !important;
  place-items: center !important;
  width: 26px !important;
  height: 26px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f3f7fc !important;
  color: var(--tfc-blue) !important;
  box-shadow: none !important;
  transform: translateY(-50%) !important;
  opacity: 1 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

/* Right select circle / tick */
.ai-premium-form .ai-choice-group input[type="radio"] + label::after,
.ai-premium-form .ai-choice-group input[type="checkbox"] + label::after {
  content: "" !important;
  position: absolute !important;
  left: auto !important;
  right: 13px !important;
  top: 50% !important;
  display: grid !important;
  place-items: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  border: 1.5px solid #cfd6e2 !important;
  background: #fff !important;
  color: #fff !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  transform: translateY(-50%) !important;
  opacity: 1 !important;
  transition: all .14s ease;
}

.ai-premium-form .ai-choice-group input[type="radio"]:checked + label,
.ai-premium-form .ai-choice-group input[type="checkbox"]:checked + label {
  border-color: #2f80ed !important;
  background: linear-gradient(180deg, #ffffff 0%, #f2f7ff 100%) !important;
  color: #0f4ea8 !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .12) !important;
}

.ai-premium-form .ai-choice-group input[type="radio"]:checked + label::after,
.ai-premium-form .ai-choice-group input[type="checkbox"]:checked + label::after {
  content: "✓" !important;
  border-color: var(--tfc-blue) !important;
  background: var(--tfc-blue) !important;
}

.ai-premium-form .ai-choice-group input[type="radio"] + label:active,
.ai-premium-form .ai-choice-group input[type="checkbox"] + label:active {
  transform: scale(.985);
}

/* =========================================================
   CSS-only option icons
   ========================================================= */

/* Activity */
.ai-premium-form input[value="sedentary"] + label::before { content: "🪑" !important; background: #fff1f2 !important; color: #e11d48 !important; }
.ai-premium-form input[value="light"] + label::before { content: "🚶" !important; background: #fff7ed !important; color: #ea580c !important; }
.ai-premium-form input[value="moderate"] + label::before { content: "🏃" !important; background: #ecfdf5 !important; color: #16a34a !important; }
.ai-premium-form input[value="high"] + label::before { content: "⚡" !important; background: #fefce8 !important; color: #ca8a04 !important; }
.ai-premium-form input[value="athlete"] + label::before { content: "🏅" !important; background: #f0fdf4 !important; color: #16a34a !important; }

/* Goals */
.ai-premium-form input[value="strength"] + label::before { content: "🏋️" !important; background: #eff6ff !important; }
.ai-premium-form input[value="endurance"] + label::before { content: "♡" !important; background: #fff1f2 !important; color: #e11d48 !important; }
.ai-premium-form input[value="mobility"] + label::before { content: "✣" !important; background: #faf5ff !important; color: #9333ea !important; }
.ai-premium-form input[value="posture"] + label::before { content: "♙" !important; background: #f0fdf4 !important; color: #16a34a !important; }
.ai-premium-form input[value="energy"] + label::before { content: "⚡" !important; background: #fefce8 !important; color: #ca8a04 !important; }
.ai-premium-form input[value="confidence"] + label::before { content: "☆" !important; background: #fff1f2 !important; color: #e11d48 !important; }

/* Primary goal */
.ai-premium-form input[value="fat_loss"] + label::before { content: "🔥" !important; background: #fff7ed !important; }
.ai-premium-form input[value="muscle_gain"] + label::before { content: "💪" !important; background: #eff6ff !important; }
.ai-premium-form input[value="recomp"] + label::before { content: "⚖" !important; background: #f8fafc !important; }
.ai-premium-form input[value="performance"] + label::before { content: "🚀" !important; background: #eff6ff !important; }
.ai-premium-form input[value="general_fitness"] + label::before { content: "🌿" !important; background: #ecfdf5 !important; }

/* Diet */
.ai-premium-form input[value="none"] + label::before { content: "🌿" !important; background: #ecfdf5 !important; color: #16a34a !important; }
.ai-premium-form input[value="vegetarian"] + label::before { content: "🥬" !important; background: #f0fdf4 !important; }
.ai-premium-form input[value="vegan"] + label::before { content: "🌱" !important; background: #ecfdf5 !important; }
.ai-premium-form input[value="pescatarian"] + label::before { content: "🐟" !important; background: #eff6ff !important; }
.ai-premium-form input[value="halal"] + label::before { content: "☾" !important; background: #f8fafc !important; color: #475569 !important; }
.ai-premium-form input[value="kosher"] + label::before { content: "✡" !important; background: #f8fafc !important; color: #475569 !important; }
.ai-premium-form input[value="low_carb"] + label::before { content: "🥑" !important; background: #f0fdf4 !important; }
.ai-premium-form input[value="keto"] + label::before { content: "🔥" !important; background: #fff7ed !important; }
.ai-premium-form input[value="low_fodmap"] + label::before { content: "🍃" !important; background: #ecfdf5 !important; }
.ai-premium-form input[value="gluten_free"] + label::before { content: "🌾" !important; background: #fefce8 !important; }
.ai-premium-form input[value="dairy_free"] + label::before { content: "🥛" !important; background: #eff6ff !important; }

/* Allergens */
.ai-premium-form input[value="peanuts"] + label::before { content: "🥜" !important; background: #fff7ed !important; }
.ai-premium-form input[value="tree_nuts"] + label::before { content: "🌰" !important; background: #fff7ed !important; }
.ai-premium-form input[value="sesame"] + label::before { content: "◌" !important; background: #f8fafc !important; }
.ai-premium-form input[value="soy"] + label::before { content: "🫛" !important; background: #f0fdf4 !important; }
.ai-premium-form input[value="eggs"] + label::before { content: "🥚" !important; background: #fefce8 !important; }
.ai-premium-form input[value="milk"] + label::before { content: "🥛" !important; background: #eff6ff !important; }
.ai-premium-form input[value="fish"] + label::before { content: "🐟" !important; background: #eff6ff !important; }
.ai-premium-form input[value="shellfish"] + label::before { content: "🦐" !important; background: #fff7ed !important; }
.ai-premium-form input[value="gluten"] + label::before { content: "🌾" !important; background: #fefce8 !important; }
.ai-premium-form input[value="other"] + label::before { content: "+" !important; background: #f8fafc !important; color: #475569 !important; }

/* Cuisines */
.ai-premium-form input[value="british"] + label::before { content: "🇬🇧" !important; background: #eff6ff !important; }
.ai-premium-form input[value="mediterranean"] + label::before { content: "🌊" !important; background: #f0fdf4 !important; }
.ai-premium-form input[value="italian"] + label::before { content: "🍕" !important; background: #fff7ed !important; }
.ai-premium-form input[value="indian"] + label::before { content: "🍛" !important; background: #fff7ed !important; }
.ai-premium-form input[value="chinese"] + label::before { content: "🥢" !important; background: #fefce8 !important; }
.ai-premium-form input[value="thai"] + label::before { content: "🍜" !important; background: #fff7ed !important; }
.ai-premium-form input[value="mexican"] + label::before { content: "🌮" !important; background: #fefce8 !important; }
.ai-premium-form input[value="japanese"] + label::before { content: "🍣" !important; background: #fff1f2 !important; }
.ai-premium-form input[value="greek"] + label::before { content: "🫓" !important; background: #fefce8 !important; }
.ai-premium-form input[value="middle_eastern"] + label::before { content: "🧆" !important; background: #fff7ed !important; }
.ai-premium-form input[value="korean"] + label::before { content: "🍲" !important; background: #fff7ed !important; }
.ai-premium-form input[value="caribbean"] + label::before { content: "🌶️" !important; background: #fff1f2 !important; }

/* Session length / style */
.ai-premium-form input[value="30"] + label::before,
.ai-premium-form input[value="45"] + label::before,
.ai-premium-form input[value="60"] + label::before,
.ai-premium-form input[value="75"] + label::before,
.ai-premium-form input[value="90"] + label::before { content: "◷" !important; background: #f8fafc !important; color: #94a3b8 !important; }

/* =========================================================
   Layout variants driven by wrapper classes
   ========================================================= */

/* List-style choices */
.ai-premium-form .ai-choice-group--tiles .form-radios,
.ai-premium-form .ai-choice-group--tiles .form-checkboxes {
  grid-template-columns: 1fr;
  gap: 9px;
}

/* 2-column card choices */
.ai-premium-form .ai-choice-group--chips .form-checkboxes,
.ai-premium-form .ai-choice-group--chips .form-radios {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

/* Secondary goals and cuisines cards */
.ai-premium-form .ai-field-secondary-goals .form-checkboxes,
.ai-premium-form .ai-field-cuisines .form-checkboxes,
.ai-premium-form .form-item-secondary-goals .form-checkboxes,
.ai-premium-form .form-item-cuisines .form-checkboxes {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

.ai-premium-form .ai-field-secondary-goals input[type="checkbox"] + label,
.ai-premium-form .form-item-secondary-goals input[type="checkbox"] + label {
  min-height: 96px !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  flex-direction: column !important;
  padding: 38px 31px 13px 12px !important;
  border-radius: 16px !important;
  font-size: 13px !important;
}

.ai-premium-form .ai-field-secondary-goals input[type="checkbox"] + label::before,
.ai-premium-form .form-item-secondary-goals input[type="checkbox"] + label::before {
  top: 13px !important;
  left: 12px !important;
  transform: none !important;
}

.ai-premium-form .ai-field-secondary-goals input[type="checkbox"] + label::after,
.ai-premium-form .form-item-secondary-goals input[type="checkbox"] + label::after {
  top: 14px !important;
  right: 11px !important;
  transform: none !important;
}

.ai-premium-form .ai-field-cuisines input[type="checkbox"] + label,
.ai-premium-form .form-item-cuisines input[type="checkbox"] + label {
  min-height: 64px !important;
  padding-left: 43px !important;
  font-size: 12.5px !important;
}

/* Allergy compact grid */
.ai-premium-form .ai-field-allergens .form-checkboxes,
.ai-premium-form .form-item-allergens .form-checkboxes {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.ai-premium-form .ai-field-allergens input[type="checkbox"] + label,
.ai-premium-form .form-item-allergens input[type="checkbox"] + label {
  min-height: 42px !important;
  padding: 8px 31px 8px 37px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
}

.ai-premium-form .ai-field-allergens input[type="checkbox"] + label::before,
.ai-premium-form .form-item-allergens input[type="checkbox"] + label::before {
  width: 22px !important;
  height: 22px !important;
  left: 8px !important;
  font-size: 12px !important;
}

.ai-premium-form .ai-field-allergens input[type="checkbox"] + label::after,
.ai-premium-form .form-item-allergens input[type="checkbox"] + label::after {
  width: 16px !important;
  height: 16px !important;
  right: 8px !important;
  font-size: 10px !important;
}

/* Training days circle selector */
.ai-premium-form .ai-field-days-per-week .form-checkboxes,
.ai-premium-form .form-item-days-per-week .form-checkboxes {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 14px 12px !important;
  max-width: 292px !important;
  margin: 2px auto 0 !important;
}

.ai-premium-form .ai-field-days-per-week .form-type-checkbox,
.ai-premium-form .form-item-days-per-week .form-type-checkbox {
  width: 60px !important;
  height: 60px !important;
}

.ai-premium-form .ai-field-days-per-week input[type="checkbox"] + label,
.ai-premium-form .form-item-days-per-week input[type="checkbox"] + label {
  display: grid !important;
  place-items: center !important;
  width: 60px !important;
  height: 60px !important;
  min-height: 60px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  text-align: center !important;
  color: #253044 !important;
  font-size: 0 !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

.ai-premium-form .ai-field-days-per-week input[value="mon"] + label::before,
.ai-premium-form .form-item-days-per-week input[value="mon"] + label::before { content: "Mon" !important; }
.ai-premium-form .ai-field-days-per-week input[value="tue"] + label::before,
.ai-premium-form .form-item-days-per-week input[value="tue"] + label::before { content: "Tue" !important; }
.ai-premium-form .ai-field-days-per-week input[value="wed"] + label::before,
.ai-premium-form .form-item-days-per-week input[value="wed"] + label::before { content: "Wed" !important; }
.ai-premium-form .ai-field-days-per-week input[value="thu"] + label::before,
.ai-premium-form .form-item-days-per-week input[value="thu"] + label::before { content: "Thu" !important; }
.ai-premium-form .ai-field-days-per-week input[value="fri"] + label::before,
.ai-premium-form .form-item-days-per-week input[value="fri"] + label::before { content: "Fri" !important; }
.ai-premium-form .ai-field-days-per-week input[value="sat"] + label::before,
.ai-premium-form .form-item-days-per-week input[value="sat"] + label::before { content: "Sat" !important; }
.ai-premium-form .ai-field-days-per-week input[value="sun"] + label::before,
.ai-premium-form .form-item-days-per-week input[value="sun"] + label::before { content: "Sun" !important; }

.ai-premium-form .ai-field-days-per-week input[type="checkbox"] + label::before,
.ai-premium-form .form-item-days-per-week input[type="checkbox"] + label::before {
  position: static !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  transform: none !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

.ai-premium-form .ai-field-days-per-week input[type="checkbox"] + label::after,
.ai-premium-form .form-item-days-per-week input[type="checkbox"] + label::after {
  content: "" !important;
  top: 8px !important;
  right: auto !important;
  left: 50% !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 10px !important;
  transform: translateX(-50%) !important;
}

.ai-premium-form .ai-field-days-per-week input[type="checkbox"]:checked + label,
.ai-premium-form .form-item-days-per-week input[type="checkbox"]:checked + label {
  border-color: transparent !important;
  background: linear-gradient(180deg, #2f80ed 0%, #155fe5 100%) !important;
  color: #fff !important;
  box-shadow: 0 12px 22px rgba(37, 99, 235, .22) !important;
}

.ai-premium-form .ai-field-days-per-week input[type="checkbox"]:checked + label::after,
.ai-premium-form .form-item-days-per-week input[type="checkbox"]:checked + label::after {
  content: "✓" !important;
}

/* Helper notes */
.ai-premium-form .ai-field-days-per-week::after,
.ai-premium-form .form-item-days-per-week::after {
  content: "📅  We'll build a plan that works around your schedule.";
  display: flex;
  align-items: center;
  margin: 18px 0 0;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%);
  color: #334155;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 650;
}

.ai-premium-form .ai-field-cuisines::after,
.ai-premium-form .form-item-cuisines::after {
  content: "✦  Pick meals you’ll actually look forward to eating.";
  display: block;
  margin: 16px 0 0;
  color: var(--tfc-muted);
  text-align: center;
  font-size: 12.5px;
  font-weight: 650;
}

/* =========================================================
   Welcome
   ========================================================= */

.ai-premium-form .ai-welcome-copy {
  text-align: center;
}

.ai-premium-form .ai-welcome-copy::before {
  content: "";
  display: block;
  width: 130px;
  height: 130px;
  margin: 2px auto 24px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 28% 31%, #eef6ff 0 17px, transparent 18px),
    radial-gradient(circle at 70% 25%, #dafbe8 0 16px, transparent 17px),
    radial-gradient(circle at 79% 61%, #ffe8e8 0 15px, transparent 16px),
    linear-gradient(135deg, #eaf2ff 0%, #dceafe 55%, #f5f8ff 100%);
  box-shadow: 0 18px 42px rgba(37, 99, 235, .12);
}

.ai-premium-form .ai-welcome-copy p:first-child {
  max-width: 300px;
  margin: 0 auto 14px !important;
  color: var(--tfc-ink) !important;
  text-align: center;
  font-size: clamp(27px, 8vw, 36px) !important;
  line-height: 1.05 !important;
  font-weight: 880 !important;
  letter-spacing: -0.055em !important;
}

.ai-premium-form .ai-welcome-copy p:first-child strong {
  color: inherit;
}

.ai-premium-form .ai-welcome-copy p:not(:first-child) {
  max-width: 290px;
  margin: 0 auto !important;
  color: var(--tfc-muted) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 550 !important;
}

/* =========================================================
   Buttons
   ========================================================= */

.ai-premium-form .form-actions,
.ai-premium-form .webform-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ai-premium-form .button,
.ai-premium-form .webform-button--next,
.ai-premium-form .webform-button--previous,
.ai-premium-form .webform-button--submit,
.ai-premium-form.ai-quiz-mode .ai-quiz-btn {
  min-height: 54px;
  border: 0;
  border-radius: 15px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -.018em;
  cursor: pointer;
}

.ai-premium-form .webform-button--next,
.ai-premium-form .webform-button--submit,
.ai-premium-form .button--primary,
.ai-premium-form.ai-quiz-mode .ai-quiz-btn--primary {
  color: #fff;
  background: linear-gradient(180deg, #3b8cff 0%, #145fe6 100%);
  box-shadow: 0 14px 28px rgba(37, 99, 235, .22);
}

.ai-premium-form .webform-button--previous,
.ai-premium-form .button:not(.webform-button--next):not(.webform-button--submit),
.ai-premium-form.ai-quiz-mode .ai-quiz-btn--ghost {
  color: var(--tfc-ink);
  background: #fff;
  border: 1px solid #edf1f7;
  box-shadow: 0 7px 18px rgba(15, 23, 42, .035);
}

.ai-premium-form .webform-button--next,
.ai-premium-form .webform-button--previous,
.ai-premium-form .webform-button--submit {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0;
}

.ai-premium-form.ai-quiz-mode .webform-actions,
.ai-premium-form.ai-quiz-mode .form-actions {
  display: none !important;
}

.ai-premium-form.ai-quiz-mode .ai-quiz-nav {
  margin-top: 20px;
}

.ai-premium-form.ai-quiz-mode .ai-quiz-nav__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ai-premium-form.ai-quiz-mode .ai-quiz-btn[hidden] {
  display: none !important;
}

.ai-premium-form.ai-quiz-mode .ai-quiz-error {
  margin: 0 0 12px;
  padding: 11px 13px;
  border-radius: 13px;
  background: #fff1f2;
  color: #be123c;
  font-size: 13px;
  font-weight: 700;
}

/* =========================================================
   Equipment
   ========================================================= */

.ai-premium-form .ai-equipment-details {
  margin-top: 16px;
  border: 1px solid #e5eaf2;
  border-radius: 20px;
  background: #fff;
  padding: 12px;
  box-shadow: none;
}

.ai-premium-form .ai-equipment-details > summary,
.ai-premium-form .ai-equipment-details > legend span,
.ai-premium-form .ai-equipment-details > legend .fieldset-legend,
.ai-premium-form .ai-equipment-details > legend .fieldset__label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid #e5eaf2;
  background: #fff;
  color: var(--tfc-ink);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.ai-premium-form .ai-equipment-details[open] > summary,
.ai-premium-form .ai-equipment-details.is-selected > summary {
  border-color: #2f80ed;
  background: #f2f7ff;
  color: #0f4ea8;
}

.ai-premium-form .ai-equipment-intro {
  margin: 10px 4px 14px;
  color: var(--tfc-muted);
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
}

.ai-premium-form fieldset.ai-equipment-accordion {
  margin: 0 0 10px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e5eaf2;
  border-radius: 15px;
  background: #fff;
}

.ai-premium-form fieldset.ai-equipment-accordion > legend {
  width: 100%;
  margin: 0;
  padding: 0;
}

.ai-premium-form fieldset.ai-equipment-accordion > legend span,
.ai-premium-form fieldset.ai-equipment-accordion > legend .fieldset-legend,
.ai-premium-form fieldset.ai-equipment-accordion > legend .fieldset__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 0 15px;
  color: var(--tfc-ink);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.ai-premium-form fieldset.ai-equipment-accordion > legend span::after,
.ai-premium-form fieldset.ai-equipment-accordion > legend .fieldset-legend::after,
.ai-premium-form fieldset.ai-equipment-accordion > legend .fieldset__label::after {
  content: "▾";
  color: #7b8494;
  font-size: 12px;
  transition: transform .18s ease;
}

.ai-premium-form fieldset.ai-equipment-accordion.is-open > legend span::after,
.ai-premium-form fieldset.ai-equipment-accordion.is-open > legend .fieldset-legend::after,
.ai-premium-form fieldset.ai-equipment-accordion.is-open > legend .fieldset__label::after {
  transform: rotate(180deg);
}

.ai-premium-form fieldset.ai-equipment-accordion .fieldset-wrapper,
.ai-premium-form fieldset.ai-equipment-accordion .fieldset__wrapper {
  display: none;
  padding: 0 12px 12px;
}

.ai-premium-form fieldset.ai-equipment-accordion.is-open .fieldset-wrapper,
.ai-premium-form fieldset.ai-equipment-accordion.is-open .fieldset__wrapper {
  display: block;
}

.ai-premium-form .ai-equipment-root .form-checkboxes {
  display: grid;
  gap: 8px;
}

.ai-premium-form .ai-equipment-root .form-type-checkbox {
  position: relative;
  margin: 0;
}

.ai-premium-form .ai-equipment-root .form-type-checkbox > input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ai-premium-form .ai-equipment-root .form-type-checkbox > label {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #e5eaf2;
  border-radius: 12px;
  background: #fff;
  color: #1f2937;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 700;
  cursor: pointer;
}

.ai-premium-form .ai-equipment-root .form-type-checkbox > input[type="checkbox"]:checked + label {
  border-color: #2f80ed;
  background: #f2f7ff;
  color: #0f4ea8;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 430px) {
  .ai-premium-form {
    max-width: 100%;
    padding-left: 14px;
    padding-right: 14px;
  }

  .ai-premium-card,
  .ai-premium-form .webform-wizard-page,
  .ai-premium-form.ai-quiz-mode .webform-wizard-page {
    padding: 26px 18px 20px;
    border-radius: 24px;
  }
}

@media (max-width: 355px) {
  .ai-premium-form .ai-choice-group--chips .form-checkboxes,
  .ai-premium-form .ai-choice-group--chips .form-radios,
  .ai-premium-form .ai-field-secondary-goals .form-checkboxes,
  .ai-premium-form .ai-field-cuisines .form-checkboxes,
  .ai-premium-form .ai-field-allergens .form-checkboxes {
    grid-template-columns: 1fr !important;
  }
}

@keyframes tfcFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}



/* =========================================================
   ICON FIX v9 — matches Drupal/Webform actual wrappers
   Uses :has(input[value="..."]) so it works even when label is
   not directly next to the input.
   ========================================================= */

/* Ensure label icon bubble exists and text has space */
.ai-premium-form .ai-choice-group .form-type-radio > label,
.ai-premium-form .ai-choice-group .form-type-checkbox > label,
.ai-premium-form .ai-choice-group .js-form-type-radio > label,
.ai-premium-form .ai-choice-group .js-form-type-checkbox > label,
.ai-premium-form .ai-choice-group .form-item > label,
.ai-premium-form .ai-choice-group label.option {
  position: relative !important;
  padding-left: 46px !important;
}

/* The left icon bubble */
.ai-premium-form .ai-choice-group .form-type-radio > label::before,
.ai-premium-form .ai-choice-group .form-type-checkbox > label::before,
.ai-premium-form .ai-choice-group .js-form-type-radio > label::before,
.ai-premium-form .ai-choice-group .js-form-type-checkbox > label::before,
.ai-premium-form .ai-choice-group .form-item > label::before,
.ai-premium-form .ai-choice-group label.option::before {
  position: absolute !important;
  left: 11px !important;
  top: 50% !important;
  display: grid !important;
  place-items: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
  background: #f3f7fc !important;
  color: #2563eb !important;
  transform: translateY(-50%) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  z-index: 2 !important;
}

/* =========================================================
   PNG ICON OVERRIDE v14
   Keeps v9 working design, replaces emoji content only.
   ========================================================= */

.ai-premium-form .form-item:has(input[value="sedentary"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="sedentary"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="sedentary"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="sedentary"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="sedentary"]) > label::before {
  content: "" !important;
  background-color: #fff1f2 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/sedentary.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="light"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="light"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="light"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="light"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="light"]) > label::before {
  content: "" !important;
  background-color: #fff7ed !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/light.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="moderate"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="moderate"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="moderate"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="moderate"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="moderate"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/moderate.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="high"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="high"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="high"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="high"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="high"]) > label::before {
  content: "" !important;
  background-color: #fefce8 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/high.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="athlete"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="athlete"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="athlete"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="athlete"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="athlete"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/athlete.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="male"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="male"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="male"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="male"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="male"]) > label::before {
  content: "" !important;
  background-color: #eff6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/male.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="female"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="female"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="female"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="female"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="female"]) > label::before {
  content: "" !important;
  background-color: #faf5ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/female.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="other"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="other"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="other"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="other"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="other"]) > label::before {
  content: "" !important;
  background-color: #f8fafc !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/other.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="beginner"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="beginner"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="beginner"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="beginner"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="beginner"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/beginner.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="intermediate"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="intermediate"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="intermediate"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="intermediate"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="intermediate"]) > label::before {
  content: "" !important;
  background-color: #eff6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/intermediate.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="advanced"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="advanced"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="advanced"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="advanced"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="advanced"]) > label::before {
  content: "" !important;
  background-color: #faf5ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/advanced.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="fat_loss"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="fat_loss"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="fat_loss"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="fat_loss"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="fat_loss"]) > label::before {
  content: "" !important;
  background-color: #fff7ed !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/fat-loss.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="muscle_gain"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="muscle_gain"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="muscle_gain"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="muscle_gain"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="muscle_gain"]) > label::before {
  content: "" !important;
  background-color: #eff6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/muscle-gain.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="recomp"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="recomp"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="recomp"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="recomp"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="recomp"]) > label::before {
  content: "" !important;
  background-color: #f8fafc !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/recomp.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="performance"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="performance"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="performance"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="performance"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="performance"]) > label::before {
  content: "" !important;
  background-color: #eff6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/performance.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="general_fitness"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="general_fitness"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="general_fitness"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="general_fitness"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="general_fitness"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/general-fitness.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="strength"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="strength"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="strength"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="strength"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="strength"]) > label::before {
  content: "" !important;
  background-color: #eff6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/strength.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="endurance"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="endurance"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="endurance"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="endurance"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="endurance"]) > label::before {
  content: "" !important;
  background-color: #fff1f2 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/endurance.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="mobility"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="mobility"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="mobility"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="mobility"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="mobility"]) > label::before {
  content: "" !important;
  background-color: #faf5ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/mobility.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="posture"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="posture"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="posture"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="posture"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="posture"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/posture.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="energy"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="energy"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="energy"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="energy"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="energy"]) > label::before {
  content: "" !important;
  background-color: #fefce8 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/energy.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="confidence"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="confidence"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="confidence"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="confidence"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="confidence"]) > label::before {
  content: "" !important;
  background-color: #fff1f2 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/confidence.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="friendly"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="friendly"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="friendly"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="friendly"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="friendly"]) > label::before {
  content: "" !important;
  background-color: #fff1f2 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/friendly.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="direct"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="direct"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="direct"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="direct"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="direct"]) > label::before {
  content: "" !important;
  background-color: #eff6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/direct.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="technical"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="technical"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="technical"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="technical"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="technical"]) > label::before {
  content: "" !important;
  background-color: #faf5ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/technical.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="playful"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="playful"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="playful"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="playful"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="playful"]) > label::before {
  content: "" !important;
  background-color: #fefce8 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/playful.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="none"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="none"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="none"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="none"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="none"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/none.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="vegetarian"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="vegetarian"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="vegetarian"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="vegetarian"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="vegetarian"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/vegetarian.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="vegan"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="vegan"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="vegan"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="vegan"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="vegan"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/vegan.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="pescatarian"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="pescatarian"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="pescatarian"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="pescatarian"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="pescatarian"]) > label::before {
  content: "" !important;
  background-color: #eff6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/pescatarian.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="halal"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="halal"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="halal"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="halal"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="halal"]) > label::before {
  content: "" !important;
  background-color: #f8fafc !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/halal.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="kosher"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="kosher"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="kosher"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="kosher"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="kosher"]) > label::before {
  content: "" !important;
  background-color: #f8fafc !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/kosher.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="low_carb"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="low_carb"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="low_carb"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="low_carb"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="low_carb"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/low-carb.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="keto"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="keto"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="keto"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="keto"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="keto"]) > label::before {
  content: "" !important;
  background-color: #fff7ed !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/keto.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="low_fodmap"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="low_fodmap"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="low_fodmap"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="low_fodmap"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="low_fodmap"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/low-fodmap.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="gluten_free"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="gluten_free"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="gluten_free"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="gluten_free"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="gluten_free"]) > label::before {
  content: "" !important;
  background-color: #fefce8 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/gluten-free.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="dairy_free"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="dairy_free"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="dairy_free"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="dairy_free"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="dairy_free"]) > label::before {
  content: "" !important;
  background-color: #eff6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/dairy-free.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="peanuts"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="peanuts"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="peanuts"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="peanuts"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="peanuts"]) > label::before {
  content: "" !important;
  background-color: #fff7ed !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/peanuts.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="tree_nuts"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="tree_nuts"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="tree_nuts"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="tree_nuts"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="tree_nuts"]) > label::before {
  content: "" !important;
  background-color: #fff7ed !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/tree-nuts.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="sesame"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="sesame"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="sesame"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="sesame"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="sesame"]) > label::before {
  content: "" !important;
  background-color: #f8fafc !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/sesame.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="soy"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="soy"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="soy"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="soy"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="soy"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/soy.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="eggs"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="eggs"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="eggs"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="eggs"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="eggs"]) > label::before {
  content: "" !important;
  background-color: #fefce8 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/eggs.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="milk"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="milk"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="milk"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="milk"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="milk"]) > label::before {
  content: "" !important;
  background-color: #eff6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/milk.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="fish"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="fish"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="fish"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="fish"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="fish"]) > label::before {
  content: "" !important;
  background-color: #eff6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/fish.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="shellfish"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="shellfish"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="shellfish"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="shellfish"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="shellfish"]) > label::before {
  content: "" !important;
  background-color: #fff7ed !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/shellfish.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="gluten"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="gluten"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="gluten"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="gluten"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="gluten"]) > label::before {
  content: "" !important;
  background-color: #fefce8 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/gluten.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="british"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="british"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="british"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="british"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="british"]) > label::before {
  content: "" !important;
  background-color: #eff6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/british.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="mediterranean"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="mediterranean"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="mediterranean"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="mediterranean"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="mediterranean"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/mediterranean.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="italian"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="italian"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="italian"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="italian"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="italian"]) > label::before {
  content: "" !important;
  background-color: #fff7ed !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/italian.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="indian"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="indian"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="indian"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="indian"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="indian"]) > label::before {
  content: "" !important;
  background-color: #fff7ed !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/indian.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="chinese"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="chinese"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="chinese"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="chinese"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="chinese"]) > label::before {
  content: "" !important;
  background-color: #fefce8 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/chinese.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="thai"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="thai"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="thai"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="thai"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="thai"]) > label::before {
  content: "" !important;
  background-color: #fff7ed !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/thai.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="mexican"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="mexican"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="mexican"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="mexican"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="mexican"]) > label::before {
  content: "" !important;
  background-color: #fefce8 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/mexican.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="japanese"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="japanese"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="japanese"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="japanese"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="japanese"]) > label::before {
  content: "" !important;
  background-color: #fff1f2 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/japanese.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="greek"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="greek"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="greek"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="greek"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="greek"]) > label::before {
  content: "" !important;
  background-color: #fefce8 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/greek.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="middle_eastern"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="middle_eastern"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="middle_eastern"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="middle_eastern"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="middle_eastern"]) > label::before {
  content: "" !important;
  background-color: #fff7ed !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/middle-eastern.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="korean"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="korean"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="korean"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="korean"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="korean"]) > label::before {
  content: "" !important;
  background-color: #fff7ed !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/korean.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="caribbean"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="caribbean"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="caribbean"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="caribbean"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="caribbean"]) > label::before {
  content: "" !important;
  background-color: #fff1f2 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/caribbean.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="standard_gym"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="standard_gym"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="standard_gym"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="standard_gym"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="standard_gym"]) > label::before {
  content: "" !important;
  background-color: #eff6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/standard-gym.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="dumbbells_bench"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="dumbbells_bench"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="dumbbells_bench"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="dumbbells_bench"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="dumbbells_bench"]) > label::before {
  content: "" !important;
  background-color: #eff6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/dumbbells-bench.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="bodyweight"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="bodyweight"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="bodyweight"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="bodyweight"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="bodyweight"]) > label::before {
  content: "" !important;
  background-color: #fefce8 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/bodyweight.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="full_gym"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="full_gym"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="full_gym"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="full_gym"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="full_gym"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/full-gym.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="custom"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="custom"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="custom"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="custom"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="custom"]) > label::before {
  content: "" !important;
  background-color: #f8fafc !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/custom.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="basic"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="basic"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="basic"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="basic"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="basic"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/basic.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="competent"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="competent"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="competent"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="competent"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="competent"]) > label::before {
  content: "" !important;
  background-color: #eff6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/competent.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="confident"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="confident"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="confident"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="confident"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="confident"]) > label::before {
  content: "" !important;
  background-color: #faf5ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/confident.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="quick"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="quick"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="quick"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="quick"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="quick"]) > label::before {
  content: "" !important;
  background-color: #fefce8 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/quick.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="family"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="family"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="family"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="family"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="family"]) > label::before {
  content: "" !important;
  background-color: #fff1f2 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/family.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="meal_prep"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="meal_prep"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="meal_prep"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="meal_prep"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="meal_prep"]) > label::before {
  content: "" !important;
  background-color: #eff6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/meal-prep.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="gourmet"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="gourmet"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="gourmet"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="gourmet"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="gourmet"]) > label::before {
  content: "" !important;
  background-color: #faf5ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/gourmet.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="low"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="low"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="low"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="low"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="low"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/low.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="medium"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="medium"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="medium"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="medium"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="medium"]) > label::before {
  content: "" !important;
  background-color: #eff6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/medium.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="standard"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="standard"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="standard"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="standard"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="standard"]) > label::before {
  content: "" !important;
  background-color: #eff6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/standard.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="shift"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="shift"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="shift"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="shift"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="shift"]) > label::before {
  content: "" !important;
  background-color: #faf5ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/shift.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="variable"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="variable"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="variable"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="variable"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="variable"]) > label::before {
  content: "" !important;
  background-color: #f8fafc !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/variable.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="morning"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="morning"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="morning"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="morning"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="morning"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/morning.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="midday"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="midday"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="midday"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="midday"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="midday"]) > label::before {
  content: "" !important;
  background-color: #eff6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/midday.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="evening"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="evening"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="evening"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="evening"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="evening"]) > label::before {
  content: "" !important;
  background-color: #faf5ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/evening.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="flexible"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="flexible"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="flexible"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="flexible"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="flexible"]) > label::before {
  content: "" !important;
  background-color: #f8fafc !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/flexible.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="concise"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="concise"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="concise"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="concise"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="concise"]) > label::before {
  content: "" !important;
  background-color: #f8fafc !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/concise.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="deep"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="deep"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="deep"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="deep"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="deep"]) > label::before {
  content: "" !important;
  background-color: #faf5ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/deep.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="auto"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="auto"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="auto"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="auto"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="auto"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/auto.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="yes"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="yes"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="yes"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="yes"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="yes"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/yes.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="no"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="no"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="no"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="no"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="no"]) > label::before {
  content: "" !important;
  background-color: #fff1f2 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/no.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="0"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="0"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="0"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="0"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="0"]) > label::before {
  content: "" !important;
  background-color: #f8fafc !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/0.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="1"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="1"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="1"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="1"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="1"]) > label::before {
  content: "" !important;
  background-color: #eff6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/1.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="2"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="2"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="2"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="2"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="2"]) > label::before {
  content: "" !important;
  background-color: #faf5ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/2.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="3"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="3"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="3"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="3"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="3"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/3.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="4"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="4"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="4"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="4"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="4"]) > label::before {
  content: "" !important;
  background-color: #fff7ed !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/4.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="10"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="10"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="10"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="10"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="10"]) > label::before {
  content: "" !important;
  background-color: #eff6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/10.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="20"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="20"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="20"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="20"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="20"]) > label::before {
  content: "" !important;
  background-color: #eff6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/20.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="30"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="30"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="30"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="30"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="30"]) > label::before {
  content: "" !important;
  background-color: #eff6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/30.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="45"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="45"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="45"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="45"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="45"]) > label::before {
  content: "" !important;
  background-color: #eff6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/45.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="60"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="60"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="60"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="60"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="60"]) > label::before {
  content: "" !important;
  background-color: #eff6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/60.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="75"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="75"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="75"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="75"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="75"]) > label::before {
  content: "" !important;
  background-color: #eff6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/75.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .form-item:has(input[value="90"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="90"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="90"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="90"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="90"]) > label::before {
  content: "" !important;
  background-color: #eff6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/legacy-option-icons/90.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  color: transparent !important;
  font-size: 0 !important;
}


.ai-premium-form .ai-field-allergens .form-item > label::before,
.ai-premium-form .ai-choice--allergens .form-item > label::before {
  background-size: 13px 13px !important;
}



/* =========================================================
   TFC REFERENCE MOCKUP OVERRIDE v15
   App-like onboarding polish to match the 3-screen mockup:
   welcome, sex and daily activity.
   ========================================================= */

.ai-premium-form {
  --tfc-blue: #1f7bff;
  --tfc-blue-2: #0f63e8;
  --tfc-blue-dark: #0b55d8;
  --tfc-ink: #0d1728;
  --tfc-muted: #667085;
  --tfc-radius: 26px;
  --tfc-shadow: 0 22px 52px rgba(15, 23, 42, .085);
  max-width: 390px !important;
  padding: 8px 14px 30px !important;
}

/* softer app background around the form */
body:has(.ai-premium-form),
.page-wrapper:has(.ai-premium-form),
.dialog-off-canvas-main-canvas:has(.ai-premium-form),
main:has(.ai-premium-form) {
  background:
    radial-gradient(circle at 50% 8%, rgba(37,99,235,.06), transparent 34%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 34%, #f6f8fb 100%) !important;
}

/* Progress like the reference */
.ai-premium-form .webform-progress {
  gap: 9px !important;
  margin: 0 auto 24px !important;
}

.ai-premium-form .webform-progress__percentage,
.ai-premium-form .percentage,
.ai-premium-form .progress-percentage {
  color: #8b95a7 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

.ai-premium-form .webform-progress-tracker {
  width: min(220px, 58vw) !important;
  max-width: 220px !important;
  height: 4px !important;
  background: #e9eef6 !important;
}

.ai-premium-form .webform-progress-tracker .progress-step.is-active .progress-marker,
.ai-premium-form .webform-progress-tracker .progress-step.is-complete .progress-marker,
.ai-premium-form .webform-progress-tracker .progress-step[aria-current="step"] .progress-marker {
  background: linear-gradient(90deg, #2082ff 0%, #0f63e8 100%) !important;
  box-shadow: 0 0 10px rgba(37,99,235,.34) !important;
}

/* Main card */
.ai-premium-card,
.ai-premium-form .webform-wizard-page,
.ai-premium-form.ai-quiz-mode .webform-wizard-page {
  width: 100% !important;
  margin: 0 auto !important;
  padding: 34px 18px 22px !important;
  border: 1px solid rgba(226,232,240,.82) !important;
  border-radius: 27px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.98) 100%) !important;
  box-shadow:
    0 24px 55px rgba(15,23,42,.085),
    0 1px 0 rgba(255,255,255,.9) inset !important;
}

/* Titles + helper lines */
.ai-premium-form.ai-quiz-mode .ai-quiz-question > label,
.ai-premium-form.ai-quiz-mode .ai-quiz-question > legend,
.ai-premium-form.ai-quiz-mode .ai-quiz-question .fieldset__legend,
.ai-premium-form.ai-quiz-structured .ai-question-title,
.ai-premium-form.ai-quiz-structured .ai-question-block h1,
.ai-premium-form.ai-quiz-structured .ai-question-block h2,
.ai-premium-form.ai-quiz-structured .ai-question-block h3 {
  max-width: 310px !important;
  margin: 0 auto 9px !important;
  color: #0d1728 !important;
  font-size: clamp(20px, 5.5vw, 25px) !important;
  line-height: 1.08 !important;
  font-weight: 880 !important;
  letter-spacing: -0.045em !important;
}

.ai-premium-form .ai-question-block {
  margin: 0 0 22px !important;
}

.ai-premium-form .ai-question-block::after {
  display: block;
  max-width: 235px;
  margin: 9px auto 0;
  color: #667085;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: -.015em;
}

.ai-premium-form .ai-field-sex ~ .ai-question-block::after {
  content: "";
}

.ai-premium-form:has(input[name^="sex"]) .ai-question-block::after {
  content: "Select the option that applies to you.";
}

.ai-premium-form:has(input[name^="activity_level"]) .ai-question-block::after {
  content: "Choose the option that best describes your day.";
}

.ai-premium-form:has(input[name^="secondary_goals"]) .ai-question-block::after {
  content: "Pick any that matter to you.";
}

/* Choice tiles */
.ai-premium-form .ai-choice-group .form-radios,
.ai-premium-form .ai-choice-group .form-checkboxes {
  gap: 10px !important;
}

.ai-premium-form .ai-choice-group input[type="radio"] + label,
.ai-premium-form .ai-choice-group input[type="checkbox"] + label {
  min-height: 58px !important;
  padding: 11px 44px 11px 52px !important;
  border: 1px solid rgba(226,232,240,.86) !important;
  border-radius: 15px !important;
  background: #fff !important;
  color: #1e293b !important;
  box-shadow:
    0 1px 2px rgba(15,23,42,.035),
    0 11px 24px rgba(15,23,42,.035) !important;
  font-size: 13px !important;
  line-height: 1.16 !important;
  font-weight: 820 !important;
  letter-spacing: -.025em !important;
}

/* Icon bubble */
.ai-premium-form .ai-choice-group input[type="radio"] + label::before,
.ai-premium-form .ai-choice-group input[type="checkbox"] + label::before,
.ai-premium-form .ai-choice-group .form-type-radio > label::before,
.ai-premium-form .ai-choice-group .form-type-checkbox > label::before,
.ai-premium-form .ai-choice-group .js-form-type-radio > label::before,
.ai-premium-form .ai-choice-group .js-form-type-checkbox > label::before,
.ai-premium-form .ai-choice-group .form-item > label::before,
.ai-premium-form .ai-choice-group label.option::before {
  left: 13px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  background-size: 17px 17px !important;
  box-shadow: 0 8px 16px rgba(15,23,42,.04) !important;
}

/* Right circle */
.ai-premium-form .ai-choice-group input[type="radio"] + label::after,
.ai-premium-form .ai-choice-group input[type="checkbox"] + label::after {
  right: 14px !important;
  width: 19px !important;
  height: 19px !important;
  border: 1.5px solid #cfd6e2 !important;
  background: #fff !important;
}

.ai-premium-form .ai-choice-group input[type="radio"]:checked + label,
.ai-premium-form .ai-choice-group input[type="checkbox"]:checked + label {
  border-color: #2f80ed !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%) !important;
  color: #0f4ea8 !important;
  box-shadow:
    0 0 0 1px rgba(47,128,237,.02),
    0 16px 32px rgba(37,99,235,.12) !important;
}

.ai-premium-form .ai-choice-group input[type="radio"]:checked + label::after,
.ai-premium-form .ai-choice-group input[type="checkbox"]:checked + label::after {
  content: "✓" !important;
  border-color: #1f7bff !important;
  background: linear-gradient(180deg, #3b8cff 0%, #1464e8 100%) !important;
  box-shadow: 0 7px 14px rgba(37,99,235,.24) !important;
  color: #fff !important;
}

/* Activity screen: separate label and description visually, based on existing text */
.ai-premium-form .form-item:has(input[value="sedentary"]) > label,
.ai-premium-form .form-item:has(input[value="light"]) > label,
.ai-premium-form .form-item:has(input[value="moderate"]) > label,
.ai-premium-form .form-item:has(input[value="high"]) > label,
.ai-premium-form .form-item:has(input[value="athlete"]) > label {
  align-items: center !important;
}

/* Welcome screen like the mockup */
.ai-premium-form .ai-welcome-copy {
  text-align: center !important;
  padding: 4px 0 2px !important;
}

.ai-premium-form .ai-welcome-copy::before {
  content: "" !important;
  display: block !important;
  width: 154px !important;
  height: 154px !important;
  margin: 0 auto 28px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 28% 28%, rgba(255,255,255,.95) 0 20px, transparent 21px),
    radial-gradient(circle at 74% 25%, #cbfce0 0 18px, transparent 19px),
    radial-gradient(circle at 80% 66%, #ffdede 0 17px, transparent 18px),
    radial-gradient(circle at 35% 36%, rgba(255,255,255,.38), transparent 28%),
    linear-gradient(145deg, #8dc4ff 0%, #428df5 45%, #eaf3ff 100%) !important;
  box-shadow:
    0 28px 60px rgba(37,99,235,.20),
    inset 0 14px 36px rgba(255,255,255,.38) !important;
  position: relative !important;
}

.ai-premium-form .ai-welcome-copy p:first-child {
  max-width: 285px !important;
  margin: 0 auto 18px !important;
  color: #0d1728 !important;
  font-size: clamp(28px, 8.2vw, 35px) !important;
  line-height: 1.06 !important;
  font-weight: 900 !important;
  letter-spacing: -0.062em !important;
}

.ai-premium-form .ai-welcome-copy p:first-child strong {
  display: inline !important;
}

.ai-premium-form .ai-welcome-copy p:not(:first-child) {
  max-width: 270px !important;
  margin: 0 auto !important;
  color: #667085 !important;
  font-size: 13.5px !important;
  line-height: 1.52 !important;
  font-weight: 620 !important;
  letter-spacing: -.012em !important;
}

.ai-premium-form .ai-welcome-copy::after {
  content: "🔒  Your data stays private" !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 34px auto 0 !important;
  color: #667085 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

/* Buttons like the mockup */
.ai-premium-form.ai-quiz-mode .ai-quiz-nav {
  margin-top: 24px !important;
}

.ai-premium-form.ai-quiz-mode .ai-quiz-nav__buttons {
  gap: 14px !important;
  grid-template-columns: .86fr 1.14fr !important;
}

.ai-premium-form.ai-quiz-mode .ai-quiz-btn,
.ai-premium-form .button,
.ai-premium-form .webform-button--next,
.ai-premium-form .webform-button--previous,
.ai-premium-form .webform-button--submit {
  min-height: 40.5px !important;
  border-radius: 15px !important;
  font-size: 14px !important;
  font-weight: 860 !important;
  letter-spacing: -.02em !important;
}

.ai-premium-form.ai-quiz-mode .ai-quiz-btn--primary,
.ai-premium-form .webform-button--next,
.ai-premium-form .webform-button--submit,
.ai-premium-form .button--primary {
  background: linear-gradient(180deg, #3b8cff 0%, #1769ed 78%, #115bdc 100%) !important;
  box-shadow:
    0 18px 34px rgba(37,99,235,.25),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
}

.ai-premium-form.ai-quiz-mode .ai-quiz-btn--primary::after {
  content: "→";
  margin-left: 12px;
  font-weight: 900;
}

.ai-premium-form.ai-quiz-mode .ai-quiz-btn--ghost,
.ai-premium-form .webform-button--previous {
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(237,241,247,.95) !important;
  box-shadow:
    0 14px 30px rgba(15,23,42,.045),
    inset 0 1px 0 rgba(255,255,255,.8) !important;
}

/* One-button welcome state */
.ai-premium-form.ai-quiz-mode .ai-quiz-btn--ghost[hidden] + .ai-quiz-btn--primary {
  grid-column: 1 / -1 !important;
}

/* Secondary goals should match the two-column reference */
.ai-premium-form .ai-field-secondary-goals input[type="checkbox"] + label,
.ai-premium-form .form-item-secondary-goals input[type="checkbox"] + label {
  min-height: 112px !important;
  padding: 42px 31px 14px 13px !important;
  border-radius: 16px !important;
}

.ai-premium-form .ai-field-secondary-goals input[type="checkbox"] + label::before,
.ai-premium-form .form-item-secondary-goals input[type="checkbox"] + label::before {
  top: 13px !important;
  left: 13px !important;
  transform: none !important;
}

.ai-premium-form .ai-field-secondary-goals input[type="checkbox"] + label::after,
.ai-premium-form .form-item-secondary-goals input[type="checkbox"] + label::after {
  top: 14px !important;
  right: 12px !important;
  transform: none !important;
}

/* Keep day circles clean */
.ai-premium-form .ai-field-days-per-week input[type="checkbox"] + label,
.ai-premium-form .form-item-days-per-week input[type="checkbox"] + label {
  width: 58px !important;
  height: 58px !important;
  min-height: 58px !important;
}

.ai-premium-form .ai-field-days-per-week::after,
.ai-premium-form .form-item-days-per-week::after {
  content: "We'll build a plan that works around your schedule." !important;
}

/* Override old emoji icons with PNG icons */

.ai-premium-form .form-item:has(input[value="male"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="male"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="male"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="male"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="male"]) > label::before {
  content: "" !important;
  background-color: #eef6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/male.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="female"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="female"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="female"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="female"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="female"]) > label::before {
  content: "" !important;
  background-color: #faf5ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/female.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="other"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="other"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="other"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="other"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="other"]) > label::before {
  content: "" !important;
  background-color: #f8fafc !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/other.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="sedentary"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="sedentary"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="sedentary"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="sedentary"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="sedentary"]) > label::before {
  content: "" !important;
  background-color: #fff1f2 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/sedentary.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="light"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="light"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="light"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="light"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="light"]) > label::before {
  content: "" !important;
  background-color: #fff7ed !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/light.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="moderate"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="moderate"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="moderate"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="moderate"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="moderate"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/moderate.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="high"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="high"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="high"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="high"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="high"]) > label::before {
  content: "" !important;
  background-color: #fefce8 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/high.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="athlete"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="athlete"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="athlete"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="athlete"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="athlete"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/athlete.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="strength"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="strength"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="strength"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="strength"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="strength"]) > label::before {
  content: "" !important;
  background-color: #eef6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/strength.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="endurance"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="endurance"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="endurance"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="endurance"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="endurance"]) > label::before {
  content: "" !important;
  background-color: #fff1f2 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/endurance.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="mobility"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="mobility"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="mobility"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="mobility"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="mobility"]) > label::before {
  content: "" !important;
  background-color: #faf5ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/mobility.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="posture"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="posture"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="posture"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="posture"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="posture"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/posture.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="energy"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="energy"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="energy"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="energy"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="energy"]) > label::before {
  content: "" !important;
  background-color: #fefce8 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/energy.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="confidence"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="confidence"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="confidence"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="confidence"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="confidence"]) > label::before {
  content: "" !important;
  background-color: #fff1f2 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/confidence.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="fat_loss"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="fat_loss"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="fat_loss"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="fat_loss"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="fat_loss"]) > label::before {
  content: "" !important;
  background-color: #fff7ed !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/fat-loss.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="muscle_gain"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="muscle_gain"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="muscle_gain"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="muscle_gain"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="muscle_gain"]) > label::before {
  content: "" !important;
  background-color: #eef6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/muscle-gain.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="recomp"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="recomp"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="recomp"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="recomp"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="recomp"]) > label::before {
  content: "" !important;
  background-color: #f8fafc !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/recomp.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="performance"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="performance"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="performance"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="performance"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="performance"]) > label::before {
  content: "" !important;
  background-color: #eef6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/performance.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="general_fitness"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="general_fitness"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="general_fitness"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="general_fitness"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="general_fitness"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/general-fitness.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="none"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="none"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="none"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="none"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="none"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/none.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="vegetarian"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="vegetarian"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="vegetarian"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="vegetarian"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="vegetarian"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/vegetarian.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="vegan"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="vegan"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="vegan"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="vegan"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="vegan"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/vegan.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="pescatarian"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="pescatarian"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="pescatarian"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="pescatarian"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="pescatarian"]) > label::before {
  content: "" !important;
  background-color: #eef6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/pescatarian.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="halal"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="halal"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="halal"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="halal"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="halal"]) > label::before {
  content: "" !important;
  background-color: #f8fafc !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/halal.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="kosher"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="kosher"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="kosher"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="kosher"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="kosher"]) > label::before {
  content: "" !important;
  background-color: #f8fafc !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/kosher.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="low_carb"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="low_carb"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="low_carb"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="low_carb"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="low_carb"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/low-carb.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="keto"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="keto"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="keto"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="keto"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="keto"]) > label::before {
  content: "" !important;
  background-color: #fff7ed !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/keto.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="low_fodmap"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="low_fodmap"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="low_fodmap"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="low_fodmap"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="low_fodmap"]) > label::before {
  content: "" !important;
  background-color: #ecfdf5 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/low-fodmap.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="gluten_free"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="gluten_free"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="gluten_free"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="gluten_free"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="gluten_free"]) > label::before {
  content: "" !important;
  background-color: #fefce8 !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/gluten-free.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="dairy_free"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="dairy_free"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="dairy_free"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="dairy_free"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="dairy_free"]) > label::before {
  content: "" !important;
  background-color: #eef6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/dairy-free.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="30"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="30"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="30"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="30"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="30"]) > label::before {
  content: "" !important;
  background-color: #f8fafc !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/30.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="45"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="45"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="45"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="45"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="45"]) > label::before {
  content: "" !important;
  background-color: #f8fafc !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/45.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="60"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="60"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="60"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="60"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="60"]) > label::before {
  content: "" !important;
  background-color: #eef6ff !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/60.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="75"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="75"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="75"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="75"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="75"]) > label::before {
  content: "" !important;
  background-color: #f8fafc !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/75.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item:has(input[value="90"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="90"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="90"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="90"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="90"]) > label::before {
  content: "" !important;
  background-color: #f8fafc !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/90.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  color: transparent !important;
  font-size: 0 !important;
}


@media (max-width: 430px) {
  .ai-premium-card,
  .ai-premium-form .webform-wizard-page,
  .ai-premium-form.ai-quiz-mode .webform-wizard-page {
    padding: 34px 17px 22px !important;
    border-radius: 27px !important;
  }

  .ai-premium-form .ai-welcome-copy p:first-child {
    max-width: 286px !important;
  }
}

@media (max-width: 360px) {
  .ai-premium-form .ai-choice-group input[type="radio"] + label,
  .ai-premium-form .ai-choice-group input[type="checkbox"] + label {
    font-size: 12.5px !important;
    padding-right: 40px !important;
  }

  .ai-premium-form .ai-welcome-copy p:first-child {
    font-size: 28px !important;
  }
}


/* =========================================================
   TFC HERO CENTERED FINAL v25
   Inline transparent PNG, centred artwork, no crop edge.
   Strength / Nutrition / Wellbeing cards match the cleaner Design 2 style.
   ========================================================= */

.ai-premium-form .webform-wizard-page:has(.ai-welcome-copy),
.ai-premium-form.ai-quiz-mode .webform-wizard-page:has(.ai-welcome-copy) {
  padding: 28px 22px 24px !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(37,99,235,.035), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 78%, #fbfdff 100%) !important;
  overflow: hidden !important;
  box-shadow:
    0 24px 60px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.ai-premium-form .ai-welcome-copy {
  width: 100% !important;
  text-align: center !important;
  overflow: visible !important;
}

.ai-premium-form .ai-welcome-copy::before {
  content: "" !important;
  display: block !important;
  width: min(326px, 87vw) !important;
  height: 270px !important;
  margin: -2px auto 16px !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/onboarding-icon-063.png") !important;
  background-size: contain !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  filter:
    drop-shadow(0 24px 42px rgba(37,99,235,.12))
    drop-shadow(0 8px 18px rgba(15,23,42,.03)) !important;
}

.ai-premium-form .ai-welcome-copy p:first-child {
  max-width: 318px !important;
  margin: 0 auto 18px !important;
  color: #0d1728 !important;
  text-align: center !important;
  font-size: clamp(30px, 7.8vw, 38px) !important;
  line-height: 1.03 !important;
  font-weight: 900 !important;
  letter-spacing: -0.064em !important;
}

.ai-premium-form .ai-welcome-copy p:first-child strong {
  color: inherit !important;
  font-weight: 900 !important;
}

.ai-premium-form .ai-welcome-copy p:not(:first-child) {
  max-width: 286px !important;
  margin: 0 auto !important;
  color: #667085 !important;
  text-align: center !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 620 !important;
  letter-spacing: -.012em !important;
}

.ai-premium-form .ai-welcome-copy::after {
  content: "🔒  Your data stays private" !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 30px auto 0 !important;
  color: #697386 !important;
  font-size: 12.7px !important;
  line-height: 1 !important;
  font-weight: 760 !important;
}

.ai-premium-form.ai-quiz-mode .webform-wizard-page:has(.ai-welcome-copy) .ai-quiz-nav {
  margin-top: 28px !important;
}

.ai-premium-form.ai-quiz-mode .webform-wizard-page:has(.ai-welcome-copy) .ai-quiz-nav__buttons {
  grid-template-columns: 1fr !important;
}

.ai-premium-form.ai-quiz-mode .webform-wizard-page:has(.ai-welcome-copy) .ai-quiz-btn--primary,
.ai-premium-form .webform-wizard-page:has(.ai-welcome-copy) .webform-button--next {
  min-height: 56px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #3188ff 0%, #1769ee 76%, #0f5edc 100%) !important;
  box-shadow:
    0 20px 36px rgba(37,99,235,.26),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}

.ai-premium-form.ai-quiz-mode .webform-wizard-page:has(.ai-welcome-copy) .ai-quiz-btn--primary::after,
.ai-premium-form .webform-wizard-page:has(.ai-welcome-copy) .webform-button--next::after {
  content: "→" !important;
  display: inline-block !important;
  margin-left: 13px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  opacity: .95 !important;
}

@media (max-width: 380px) {
  .ai-premium-form .ai-welcome-copy::before {
    width: min(304px, 87vw) !important;
    height: 252px !important;
    margin-bottom: 14px !important;
  }

  .ai-premium-form .ai-welcome-copy p:first-child {
    max-width: 292px !important;
    font-size: 29px !important;
  }

  .ai-premium-form .ai-welcome-copy p:not(:first-child) {
    max-width: 258px !important;
    font-size: 13.3px !important;
  }
}


/* =========================================================
   TFC AI ONBOARDING HERO IMAGE UPDATE v26
   Replaces the old blue-person artwork with the cleaner
   Bark-style AI onboarding illustration.
   ========================================================= */

.ai-premium-form .webform-wizard-page:has(.ai-welcome-copy),
.ai-premium-form.ai-quiz-mode .webform-wizard-page:has(.ai-welcome-copy) {
  padding: 28px 22px 24px !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(37,99,235,.045), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 78%, #fbfdff 100%) !important;
  overflow: hidden !important;
  box-shadow:
    0 24px 60px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.ai-premium-form .ai-welcome-copy {
  width: 100% !important;
  text-align: center !important;
  overflow: visible !important;
}

.ai-premium-form .ai-welcome-copy::before {
  content: "" !important;
  display: block !important;
  width: min(326px, 88vw) !important;
  height: 222px !important;
  margin: -4px auto 18px !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/onboarding-icon-064.webp") !important;
  background-size: contain !important;
  background-position: 50% 50% !important;
  background-repeat: no-repeat !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  filter:
    drop-shadow(0 24px 42px rgba(37,99,235,.12))
    drop-shadow(0 8px 18px rgba(15,23,42,.03)) !important;
}

.ai-premium-form .ai-welcome-copy p:first-child {
  max-width: 320px !important;
  margin: 0 auto 16px !important;
  color: #0d1728 !important;
  text-align: center !important;
  font-size: clamp(31px, 8.2vw, 42px) !important;
  line-height: .98 !important;
  font-weight: 900 !important;
  letter-spacing: -0.066em !important;
}

.ai-premium-form .ai-welcome-copy p:first-child::before {
  content: "✦  AI ONBOARDING" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  margin: 0 auto 16px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(124,58,237,.08) !important;
  color: #6d48f5 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  -webkit-text-fill-color: #6d48f5 !important;
}

.ai-premium-form .ai-welcome-copy p:first-child strong {
  color: inherit !important;
  font-weight: 900 !important;
}

.ai-premium-form .ai-welcome-copy p:first-child span,
.ai-premium-form .ai-welcome-copy p:first-child .tfc-gradient-word {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.ai-premium-form .ai-welcome-copy p:not(:first-child) {
  max-width: 292px !important;
  margin: 0 auto !important;
  color: #667085 !important;
  text-align: center !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  font-weight: 620 !important;
  letter-spacing: -.012em !important;
}

.ai-premium-form .ai-welcome-copy::after {
  content: "🔒  Your data stays private and secure" !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 28px auto 0 !important;
  color: #697386 !important;
  font-size: 12.7px !important;
  line-height: 1 !important;
  font-weight: 760 !important;
}

.ai-premium-form.ai-quiz-mode .webform-wizard-page:has(.ai-welcome-copy) .ai-quiz-nav {
  margin-top: 28px !important;
}

.ai-premium-form.ai-quiz-mode .webform-wizard-page:has(.ai-welcome-copy) .ai-quiz-nav__buttons {
  grid-template-columns: 1fr !important;
}

.ai-premium-form.ai-quiz-mode .webform-wizard-page:has(.ai-welcome-copy) .ai-quiz-btn--primary,
.ai-premium-form .webform-wizard-page:has(.ai-welcome-copy) .webform-button--next {
  min-height: 56px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #3188ff 0%, #1769ee 76%, #0f5edc 100%) !important;
  box-shadow:
    0 20px 36px rgba(37,99,235,.26),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}

.ai-premium-form.ai-quiz-mode .webform-wizard-page:has(.ai-welcome-copy) .ai-quiz-btn--primary::after,
.ai-premium-form .webform-wizard-page:has(.ai-welcome-copy) .webform-button--next::after {
  content: "→" !important;
  display: inline-block !important;
  margin-left: 13px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  opacity: .95 !important;
}

@media (max-width: 380px) {
  .ai-premium-form .ai-welcome-copy::before {
    width: min(302px, 88vw) !important;
    height: 205px !important;
    margin-bottom: 15px !important;
  }

  .ai-premium-form .ai-welcome-copy p:first-child {
    max-width: 292px !important;
    font-size: 30px !important;
  }

  .ai-premium-form .ai-welcome-copy p:not(:first-child) {
    max-width: 260px !important;
    font-size: 13.4px !important;
  }
}

/* =========================================================
   TFC AI ONBOARDING WELCOME FIX v27
   Fixes the welcome screen so the hero image blends into a
   pure white quiz card and the badge/title stack correctly.
   ========================================================= */

.ai-premium-form,
.ai-premium-form.ai-quiz-structured,
.ai-premium-form.ai-premium-wizard {
  background: #ffffff !important;
}

.ai-premium-form .ai-premium-card,
.ai-premium-form .webform-wizard-page,
.ai-premium-form.ai-quiz-mode .webform-wizard-page {
  background: #ffffff !important;
}

.ai-premium-form .webform-wizard-page:has(.ai-welcome-copy),
.ai-premium-form.ai-quiz-mode .webform-wizard-page:has(.ai-welcome-copy) {
  padding: 26px 20px 22px !important;
  border: 1px solid rgba(226,232,240,.88) !important;
  border-radius: 28px !important;
  background: #ffffff !important;
  box-shadow: 0 22px 54px rgba(15,23,42,.075) !important;
  overflow: hidden !important;
}

.ai-premium-form .webform-wizard-page:has(.ai-welcome-copy)::before,
.ai-premium-form.ai-quiz-mode .webform-wizard-page:has(.ai-welcome-copy)::before,
.ai-premium-form .webform-wizard-page:has(.ai-welcome-copy)::after,
.ai-premium-form.ai-quiz-mode .webform-wizard-page:has(.ai-welcome-copy)::after {
  display: none !important;
  content: none !important;
}

.ai-premium-form .ai-welcome-copy {
  width: 100% !important;
  text-align: center !important;
}

.ai-premium-form .ai-welcome-copy::before {
  width: min(338px, 92vw) !important;
  height: 224px !important;
  margin: -2px auto 18px !important;
  background-color: #ffffff !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

.ai-premium-form .ai-welcome-copy p:first-child {
  display: block !important;
  max-width: 315px !important;
  margin: 0 auto 16px !important;
  color: #0d1728 !important;
  text-align: center !important;
  font-size: clamp(30px, 8.8vw, 42px) !important;
  line-height: 1.02 !important;
  font-weight: 900 !important;
  letter-spacing: -0.066em !important;
}

.ai-premium-form .ai-welcome-copy p:first-child::before {
  content: "✦  AI ONBOARDING" !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  margin: 0 auto 16px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(124,58,237,.08) !important;
  color: #6d48f5 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  -webkit-text-fill-color: #6d48f5 !important;
}

.ai-premium-form .ai-welcome-copy p:first-child strong {
  font-weight: inherit !important;
}

.ai-premium-form .ai-welcome-copy p:first-child span,
.ai-premium-form .ai-welcome-copy p:first-child .tfc-gradient-word,
.ai-premium-form .ai-welcome-copy p:first-child strong .tfc-gradient-word {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.ai-premium-form .ai-welcome-copy p:not(:first-child) {
  max-width: 292px !important;
  margin: 0 auto !important;
  color: #667085 !important;
  text-align: center !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  font-weight: 620 !important;
  letter-spacing: -.012em !important;
}

.ai-premium-form .ai-welcome-copy::after {
  content: "🔒  Your data stays private and secure" !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 28px auto 0 !important;
  color: #697386 !important;
  font-size: 12.7px !important;
  line-height: 1.2 !important;
  font-weight: 760 !important;
}

.ai-premium-form.ai-quiz-mode .webform-wizard-page:has(.ai-welcome-copy) .ai-quiz-nav,
.ai-premium-form .webform-wizard-page:has(.ai-welcome-copy) .form-actions,
.ai-premium-form .webform-wizard-page:has(.ai-welcome-copy) .webform-actions {
  margin-top: 28px !important;
}

.ai-premium-form.ai-quiz-mode .webform-wizard-page:has(.ai-welcome-copy) .ai-quiz-nav__buttons {
  grid-template-columns: 1fr !important;
}

@media (max-width: 380px) {
  .ai-premium-form .webform-wizard-page:has(.ai-welcome-copy),
  .ai-premium-form.ai-quiz-mode .webform-wizard-page:has(.ai-welcome-copy) {
    padding: 24px 18px 20px !important;
  }

  .ai-premium-form .ai-welcome-copy::before {
    width: min(310px, 90vw) !important;
    height: 205px !important;
    margin-bottom: 14px !important;
  }

  .ai-premium-form .ai-welcome-copy p:first-child {
    max-width: 292px !important;
    font-size: 30px !important;
  }
}

/* =========================================================
   AI ONBOARDING HERO — final premium seamless version
   ========================================================= */

html,
body,
.ai-premium-form,
.ai-premium-form .webform-submission-form,
.ai-premium-form .webform-wizard-pages,
.ai-premium-form .webform-wizard-page,
.ai-premium-form .ai-premium-step,
.ai-premium-form .ai-step-shell {
  background: #ffffff !important;
}

.ai-premium-card,
.ai-premium-form .webform-wizard-page {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, .76) !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .044), 0 2px 10px rgba(15, 23, 42, .02) !important;
}

.ai-premium-form .ai-welcome-copy::before,
.ai-premium-form .ai-onboarding-hero__image {
  display: none !important;
  content: none !important;
}

.ai-premium-form.ai-quiz-structured .ai-welcome-copy p,
.ai-premium-form .ai-welcome-copy p,
.ai-premium-form .ai-welcome-copy p:first-child,
.ai-premium-form .ai-welcome-copy p:not(:first-child) {
  max-width: none !important;
  margin: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
}

.ai-premium-form .ai-welcome-copy {
  width: 100% !important;
  text-align: center !important;
}

.ai-premium-form .ai-welcome-copy > p {
  display: none !important;
}

.ai-premium-form .ai-onboarding-hero {
  position: relative !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  overflow: visible !important;
}

.ai-premium-form .ai-onboarding-hero::after {
  content: "" !important;
  position: absolute !important;
  top: 6px !important;
  left: 48% !important;
  width: 108% !important;
  height: 236px !important;
  transform: translateX(-50%) !important;
  background: radial-gradient(circle at 26% 52%, rgba(45, 212, 191, .15), transparent 48%), radial-gradient(circle at 54% 42%, rgba(37, 99, 235, .14), transparent 50%), radial-gradient(circle at 76% 52%, rgba(124, 58, 237, .15), transparent 50%) !important;
  filter: blur(30px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.ai-premium-form .ai-onboarding-hero::before {
  content: "" !important;
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: min(112%, 360px) !important;
  aspect-ratio: 1.78 / 1 !important;
  margin: -8px auto 14px !important;
  transform: translateX(-7px) !important;
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/welcome-hero/onboarding-icon-065.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  filter: drop-shadow(0 18px 34px rgba(59, 130, 246, .064)) drop-shadow(0 10px 20px rgba(124, 58, 237, .052)) !important;
}

.ai-premium-form .ai-onboarding-hero__eyebrow,
.ai-premium-form .ai-onboarding-hero__title,
.ai-premium-form .ai-onboarding-hero__text,
.ai-premium-form .ai-onboarding-hero__privacy {
  position: relative !important;
  z-index: 2 !important;
}

.ai-premium-form .ai-onboarding-hero__eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 auto 17px !important;
  padding: 9px 19px !important;
  border-radius: 999px !important;
  background: rgba(124, 58, 237, .08) !important;
  color: #7c3aed !important;
  font-size: 11.5px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: .155em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

.ai-premium-form .ai-onboarding-hero__eyebrow::before {
  content: "✦" !important;
  display: inline-block !important;
  color: #2563eb !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.ai-premium-form .ai-onboarding-hero__title {
  max-width: 335px !important;
  margin: 0 auto 16px !important;
  color: #08122e !important;
  text-align: center !important;
  font-size: clamp(32px, 9.05vw, 40px) !important;
  line-height: .965 !important;
  font-weight: 920 !important;
  letter-spacing: -.068em !important;
}

.ai-premium-form .ai-onboarding-hero__title span,
.ai-premium-form .ai-onboarding-hero__title .ai-onboarding-hero__gradient {
  display: block !important;
  background: linear-gradient(100deg, #0b7cff 0%, #2563eb 32%, #6d5dfc 58%, #8b35ff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.ai-premium-form .ai-onboarding-hero__text {
  max-width: 304px !important;
  margin: 0 auto !important;
  color: #747e91 !important;
  text-align: center !important;
  font-size: 14.8px !important;
  line-height: 1.56 !important;
  font-weight: 500 !important;
  letter-spacing: -.018em !important;
}

.ai-premium-form .ai-onboarding-hero__privacy {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  margin: 20px auto 0 !important;
  padding: 0 !important;
  color: #6b7485 !important;
  font-size: 13.5px !important;
  line-height: 1.2 !important;
  font-weight: 750 !important;
  letter-spacing: -.018em !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ai-premium-form .ai-onboarding-hero__privacy::before {
  content: "🔒" !important;
  display: inline-block !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

.ai-premium-form .ai-onboarding-hero__privacy + .ai-onboarding-hero__privacy {
  display: none !important;
}

.ai-premium-form .form-actions,
.ai-premium-form .webform-actions {
  margin-top: 24px !important;
}

.ai-premium-form .webform-button--next,
.ai-premium-form .webform-button--submit,
.ai-premium-form .button--primary {
  min-height: 58px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #2f86ff 0%, #145fe6 100%) !important;
  box-shadow: 0 18px 34px rgba(37, 99, 235, .22) !important;
  font-size: 16px !important;
  font-weight: 850 !important;
}

@media (max-width: 430px) {
  .ai-premium-form {
    padding-top: 8px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    background: #ffffff !important;
  }

  .ai-premium-card,
  .ai-premium-form .webform-wizard-page,
  .ai-premium-form.ai-quiz-mode .webform-wizard-page {
    padding: 26px 18px 20px !important;
    border-radius: 34px !important;
  }

  .ai-premium-form .ai-onboarding-hero::before {
    width: min(112%, 348px) !important;
    margin: -8px auto 13px !important;
    transform: translateX(-8px) !important;
  }

  .ai-premium-form .ai-onboarding-hero::after {
    top: 4px !important;
    left: 47.5% !important;
    height: 214px !important;
  }

  .ai-premium-form .ai-onboarding-hero__title {
    max-width: 335px !important;
    font-size: clamp(32px, 9.05vw, 40px) !important;
  }

  .ai-premium-form .ai-onboarding-hero__privacy {
    margin-top: 20px !important;
  }
}

@media (max-width: 360px) {
  .ai-premium-form .ai-onboarding-hero::before {
    width: min(110%, 310px) !important;
    transform: translateX(-6px) !important;
  }

  .ai-premium-form .ai-onboarding-hero__title {
    max-width: 292px !important;
    font-size: 31px !important;
  }

  .ai-premium-form .ai-onboarding-hero__text {
    max-width: 278px !important;
    font-size: 14.5px !important;
  }
}

/* =========================================================
   AI QUESTION LAYOUT — YAML MATCHED
   Built around the exact Webform classes in your YAML:
   .ai-question-block
   .ai-question-field
   .ai-field
   .ai-choice-group
   .ai-choice-group--tiles
   .ai-choice-group--chips
   .ai-page-intro
   .ai-premium-details
   ========================================================= */

/* Keep the percentage progress bar. */
.ai-premium-form .webform-progress {
  margin: 0 auto 22px !important;
}

.ai-premium-form .webform-progress__percentage,
.ai-premium-form .progress__percentage,
.ai-premium-form .webform-progress .percentage {
  color: #8993a4 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  letter-spacing: -.02em !important;
}

.ai-premium-form .webform-progress__track,
.ai-premium-form .webform-progress-tracker,
.ai-premium-form .progress {
  max-width: 250px !important;
  height: 5px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 999px !important;
  background: #e9eef6 !important;
}

/* Question pages: keep card, but make it cleaner and more app-like. */
.ai-premium-form .ai-premium-step.ai-step-shell:not(:has(.ai-onboarding-hero)) {
  padding: 26px 18px 24px !important;
  border-radius: 34px !important;
  border: 1px solid rgba(226, 232, 240, .78) !important;
  background: #ffffff !important;
  box-shadow:
    0 16px 38px rgba(15, 23, 42, .045),
    0 2px 10px rgba(15, 23, 42, .018) !important;
}

/* Question title area from YAML: page_heading_X wrapper class = ai-question-block. */
.ai-premium-form .ai-question-block {
  margin: 0 0 18px !important;
  padding: 0 !important;
  text-align: left !important;
}

.ai-premium-form .ai-question-title {
  max-width: 100% !important;
  margin: 0 !important;
  color: #08122e !important;
  text-align: left !important;
  font-size: clamp(30px, 8vw, 38px) !important;
  line-height: 1.02 !important;
  font-weight: 920 !important;
  letter-spacing: -.065em !important;
}

/* Reduce very long titles so they stop looking broken. */
.ai-premium-form .ai-question-title {
  text-wrap: balance;
}

/* Intro copy, e.g. equipment_intro. */
.ai-premium-form .ai-page-intro {
  margin: 0 0 16px !important;
  padding: 14px 15px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%) !important;
  border: 1px solid rgba(226, 232, 240, .82) !important;
}

.ai-premium-form .ai-page-intro p {
  margin: 0 0 6px !important;
  color: #667085 !important;
  font-size: 13.5px !important;
  line-height: 1.42 !important;
  font-weight: 650 !important;
}

.ai-premium-form .ai-page-intro p:last-child {
  margin-bottom: 0 !important;
}

/* Field wrappers from YAML. */
.ai-premium-form .ai-question-field,
.ai-premium-form .ai-field {
  margin: 0 !important;
  padding: 0 !important;
}

/* Text / number / textarea inputs. */
.ai-premium-form .ai-field input[type="text"],
.ai-premium-form .ai-field input[type="number"],
.ai-premium-form .ai-field input[type="email"],
.ai-premium-form .ai-field input[type="password"],
.ai-premium-form .ai-question-field input[type="text"],
.ai-premium-form .ai-question-field input[type="number"],
.ai-premium-form .ai-question-field input[type="email"],
.ai-premium-form .ai-question-field input[type="password"] {
  width: 100% !important;
  min-height: 62px !important;
  padding: 0 18px !important;
  border: 1px solid #dce4ef !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  color: #08122e !important;
  box-shadow:
    inset 0 1px 0 rgba(15, 23, 42, .018),
    0 10px 24px rgba(15, 23, 42, .028) !important;
  font-size: 19px !important;
  line-height: 1 !important;
  font-weight: 780 !important;
  letter-spacing: -.035em !important;
}

.ai-premium-form .ai-field textarea,
.ai-premium-form .ai-question-field textarea,
.ai-premium-form .ai-field--textarea textarea {
  width: 100% !important;
  min-height: 160px !important;
  padding: 16px !important;
  border: 1px solid #dce4ef !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  color: #08122e !important;
  box-shadow:
    inset 0 1px 0 rgba(15, 23, 42, .018),
    0 10px 24px rgba(15, 23, 42, .028) !important;
  font-size: 15.5px !important;
  line-height: 1.5 !important;
  font-weight: 620 !important;
  letter-spacing: -.018em !important;
}

.ai-premium-form .ai-field input:focus,
.ai-premium-form .ai-question-field input:focus,
.ai-premium-form .ai-field textarea:focus,
.ai-premium-form .ai-question-field textarea:focus {
  outline: none !important;
  border-color: rgba(124, 58, 237, .64) !important;
  box-shadow:
    0 0 0 4px rgba(124, 58, 237, .105),
    0 12px 26px rgba(37, 99, 235, .075) !important;
}

/* Description text from Drupal, e.g. body fat description. */
.ai-premium-form .ai-field .description,
.ai-premium-form .ai-field .form-item__description,
.ai-premium-form .ai-question-field .description,
.ai-premium-form .ai-question-field .form-item__description {
  margin-top: 10px !important;
  color: #667085 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 650 !important;
}

/* Choice groups from YAML. */
.ai-premium-form .ai-choice-group {
  margin: 0 !important;
  padding: 0 !important;
}

/* Drupal usually renders radios/checkboxes inside .form-radios / .form-checkboxes. */
.ai-premium-form .ai-choice-group .form-radios,
.ai-premium-form .ai-choice-group .form-checkboxes {
  display: grid !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Default tile layout: stacked premium app cards. */
.ai-premium-form .ai-choice-group--tiles .form-radios,
.ai-premium-form .ai-choice-group--tiles .form-checkboxes,
.ai-premium-form .ai-equipment-preset .form-radios {
  grid-template-columns: 1fr !important;
}

/* Short numeric options can be two-column. */
.ai-premium-form .ai-choice-group--tiles:has(input[value="30"]) .form-radios,
.ai-premium-form .ai-choice-group--tiles:has(input[value="45"]) .form-radios,
.ai-premium-form .ai-choice-group--tiles:has(input[value="2"]) .form-radios,
.ai-premium-form .ai-choice-group--tiles:has(input[value="3"]) .form-radios,
.ai-premium-form .ai-choice-group--tiles:has(input[value="morning"]) .form-radios,
.ai-premium-form .ai-choice-group--tiles:has(input[value="low"]) .form-radios,
.ai-premium-form .ai-choice-group--tiles:has(input[value="friendly"]) .form-radios,
.ai-premium-form .ai-choice-group--tiles:has(input[value="basic"]) .form-radios,
.ai-premium-form .ai-choice-group--tiles:has(input[value="concise"]) .form-radios,
.ai-premium-form .ai-choice-group--tiles:has(input[value="auto"]) .form-radios {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Chips layout from YAML. */
.ai-premium-form .ai-choice-group--chips .form-checkboxes,
.ai-premium-form .ai-choice-group--chips .form-radios {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

/* The actual Drupal form item wrappers. */
.ai-premium-form .ai-choice-group .form-item,
.ai-premium-form .ai-choice-group .js-form-item,
.ai-premium-form .ai-choice-group .form-type-radio,
.ai-premium-form .ai-choice-group .form-type-checkbox {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide the real radio/checkbox but keep it accessible. */
.ai-premium-form .ai-choice-group input[type="radio"],
.ai-premium-form .ai-choice-group input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Option labels. This matches your YAML because the label sits inside .ai-choice-group. */
.ai-premium-form .ai-choice-group label.option,
.ai-premium-form .ai-choice-group .form-item > label,
.ai-premium-form .ai-choice-group .js-form-item > label {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 76px !important;
  margin: 0 !important;
  padding: 15px 46px 15px 58px !important;
  border: 1px solid #e1e8f2 !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .96) !important;
  color: #111c33 !important;
  box-shadow:
    0 1px 0 rgba(15, 23, 42, .025),
    0 10px 24px rgba(15, 23, 42, .032) !important;
  font-size: 14.5px !important;
  line-height: 1.18 !important;
  font-weight: 820 !important;
  letter-spacing: -.028em !important;
  cursor: pointer !important;
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease !important;
}

/* Icon placeholder bubble. */
.ai-premium-form .ai-choice-group label.option::before,
.ai-premium-form .ai-choice-group .form-item > label::before,
.ai-premium-form .ai-choice-group .js-form-item > label::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 14px !important;
  width: 32px !important;
  height: 32px !important;
  transform: translateY(-50%) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(37, 99, 235, .16), transparent 34%),
    #eef4ff !important;
}

/* Radio/check circle. */
.ai-premium-form .ai-choice-group label.option::after,
.ai-premium-form .ai-choice-group .form-item > label::after,
.ai-premium-form .ai-choice-group .js-form-item > label::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: 15px !important;
  width: 22px !important;
  height: 22px !important;
  transform: translateY(-50%) !important;
  border: 2px solid #d0dae7 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
}

/* Selected state — works with Drupal structure because :has() checks input inside .form-item. */
.ai-premium-form .ai-choice-group .form-item:has(input:checked) > label,
.ai-premium-form .ai-choice-group .js-form-item:has(input:checked) > label,
.ai-premium-form .ai-choice-group input:checked + label.option {
  border-color: rgba(124, 58, 237, .78) !important;
  background:
    radial-gradient(circle at 92% 12%, rgba(124,58,237,.11), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8f3ff 100%) !important;
  color: #10172f !important;
  box-shadow:
    0 0 0 3px rgba(124, 58, 237, .075),
    0 14px 30px rgba(37, 99, 235, .10) !important;
}

.ai-premium-form .ai-choice-group .form-item:has(input:checked) > label::after,
.ai-premium-form .ai-choice-group .js-form-item:has(input:checked) > label::after,
.ai-premium-form .ai-choice-group input:checked + label.option::after {
  content: "✓" !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 16px rgba(37, 99, 235, .22) !important;
}

/* Chip cards need to be shorter and more readable. */
.ai-premium-form .ai-choice-group--chips label.option,
.ai-premium-form .ai-choice-group--chips .form-item > label,
.ai-premium-form .ai-choice-group--chips .js-form-item > label {
  min-height: 64px !important;
  padding: 12px 34px 12px 42px !important;
  border-radius: 18px !important;
  font-size: 12.5px !important;
  line-height: 1.12 !important;
  letter-spacing: -.03em !important;
}

.ai-premium-form .ai-choice-group--chips label.option::before,
.ai-premium-form .ai-choice-group--chips .form-item > label::before,
.ai-premium-form .ai-choice-group--chips .js-form-item > label::before {
  left: 10px !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 9px !important;
}

.ai-premium-form .ai-choice-group--chips label.option::after,
.ai-premium-form .ai-choice-group--chips .form-item > label::after,
.ai-premium-form .ai-choice-group--chips .js-form-item > label::after {
  right: 9px !important;
  width: 19px !important;
  height: 19px !important;
}

/* Days are chips, but should look like clean day buttons. */
.ai-premium-form .ai-choice-group--chips:has(input[value="mon"]) .form-checkboxes {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.ai-premium-form .ai-choice-group--chips:has(input[value="mon"]) label.option,
.ai-premium-form .ai-choice-group--chips:has(input[value="mon"]) .form-item > label,
.ai-premium-form .ai-choice-group--chips:has(input[value="mon"]) .js-form-item > label {
  min-height: 40.5px !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 17px !important;
  font-size: 12.5px !important;
}

.ai-premium-form .ai-choice-group--chips:has(input[value="mon"]) label.option::before,
.ai-premium-form .ai-choice-group--chips:has(input[value="mon"]) label.option::after,
.ai-premium-form .ai-choice-group--chips:has(input[value="mon"]) .form-item > label::before,
.ai-premium-form .ai-choice-group--chips:has(input[value="mon"]) .form-item > label::after {
  display: none !important;
}

.ai-premium-form .ai-choice-group--chips:has(input[value="mon"]) .form-item:has(input:checked) > label,
.ai-premium-form .ai-choice-group--chips:has(input[value="mon"]) .js-form-item:has(input:checked) > label {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
}

/* Fieldset for strength maxes. */
.ai-premium-form .ai-premium-fieldset {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ai-premium-form .ai-premium-fieldset .fieldset-wrapper,
.ai-premium-form .ai-premium-fieldset .fieldset__wrapper {
  display: grid !important;
  gap: 12px !important;
}

/* Fine tune equipment details. */
.ai-premium-form .ai-premium-details,
.ai-premium-form .ai-equipment-details {
  margin-top: 16px !important;
  padding: 14px !important;
  border: 1px solid #e1e8f2 !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .032) !important;
}

.ai-premium-form .ai-premium-details summary,
.ai-premium-form .ai-equipment-details summary {
  cursor: pointer !important;
  font-size: 15px !important;
  font-weight: 820 !important;
  color: #08122e !important;
}

/* Review screen. */
.ai-premium-form .ai-review-copy {
  padding: 15px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%) !important;
  color: #667085 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 650 !important;
}

.ai-premium-form .ai-premium-compact-check {
  margin-top: 14px !important;
  padding: 15px !important;
  border: 1px solid #e1e8f2 !important;
  border-radius: 18px !important;
  background: #ffffff !important;
}

/* Buttons. */
.ai-premium-form .form-actions,
.ai-premium-form .webform-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin-top: 24px !important;
}

.ai-premium-form .webform-button--previous,
.ai-premium-form .webform-button--next,
.ai-premium-form .webform-button--submit {
  width: 100% !important;
  min-height: 58px !important;
  border-radius: 17px !important;
  border: 0 !important;
  font-size: 15.5px !important;
  font-weight: 870 !important;
}

.ai-premium-form .webform-button--previous {
  background: #eef4fb !important;
  color: #3b4658 !important;
  box-shadow: none !important;
}

.ai-premium-form .webform-button--next,
.ai-premium-form .webform-button--submit {
  background: linear-gradient(180deg, #2f86ff 0%, #145fe6 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 34px rgba(37, 99, 235, .22) !important;
}

/* If only one action exists, let it span full width. */
.ai-premium-form .form-actions input:only-child,
.ai-premium-form .webform-actions input:only-child {
  grid-column: 1 / -1 !important;
}

/* Mobile-specific polish. */
@media (max-width: 430px) {
  .ai-premium-form .ai-premium-step.ai-step-shell:not(:has(.ai-onboarding-hero)) {
    padding: 24px 18px 22px !important;
    border-radius: 34px !important;
  }

  .ai-premium-form .ai-question-title {
    font-size: clamp(29px, 7.9vw, 37px) !important;
  }

  .ai-premium-form .ai-choice-group--chips label.option,
  .ai-premium-form .ai-choice-group--chips .form-item > label,
  .ai-premium-form .ai-choice-group--chips .js-form-item > label {
    min-height: 66px !important;
    font-size: 12.2px !important;
  }
}

@media (max-width: 370px) {
  .ai-premium-form .ai-choice-group--chips .form-checkboxes,
  .ai-premium-form .ai-choice-group--chips .form-radios {
    grid-template-columns: 1fr !important;
  }

  .ai-premium-form .ai-choice-group--chips:has(input[value="mon"]) .form-checkboxes {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   AI QUESTION LAYOUT V4 — layout fixes
   Fixes the current issues:
   - question cards too narrow/centred
   - answer cards too compressed
   - secondary-goal text colliding with tick circles
   - buttons sitting too detached
   - title alignment inconsistent
   ========================================================= */

/* Wider, less cramped question card */
.ai-premium-form .ai-premium-step.ai-step-shell:not(:has(.ai-onboarding-hero)) {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 26px 18px 24px !important;
  border-radius: 34px !important;
}

/* Keep titles readable, but align them like an app question */
.ai-premium-form .ai-question-block {
  margin: 0 0 18px !important;
  text-align: left !important;
}

.ai-premium-form .ai-question-title {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Centre only the short choice questions where it looks better */
.ai-premium-form .ai-premium-step.ai-step-shell:has(.ai-choice-group):not(:has(.ai-choice-group--chips)) .ai-question-title {
  text-align: center !important;
}

/* But keep long titles left-aligned */
.ai-premium-form .ai-premium-step.ai-step-shell:has(input[name^="secondary_goals"]) .ai-question-title,
.ai-premium-form .ai-premium-step.ai-step-shell:has(input[name^="cuisines"]) .ai-question-title,
.ai-premium-form .ai-premium-step.ai-step-shell:has(input[name^="allergens"]) .ai-question-title,
.ai-premium-form .ai-premium-step.ai-step-shell:has(textarea) .ai-question-title,
.ai-premium-form .ai-premium-step.ai-step-shell:has(input[name="body_fat_pct"]) .ai-question-title,
.ai-premium-form .ai-premium-step.ai-step-shell:has(input[name="deadline_weeks"]) .ai-question-title,
.ai-premium-form .ai-premium-step.ai-step-shell:has(input[name="target_weight_kg"]) .ai-question-title {
  text-align: left !important;
}

/* Input-only pages should not feel like a tiny card floating in space */
.ai-premium-form .ai-premium-step.ai-step-shell:has(.ai-field):not(:has(.ai-choice-group)):not(:has(.ai-onboarding-hero)) {
  padding: 28px 18px 26px !important;
}

.ai-premium-form .ai-premium-step.ai-step-shell:has(.ai-field):not(:has(.ai-choice-group)):not(:has(.ai-onboarding-hero)) .ai-question-title {
  text-align: left !important;
}

/* Text/number fields should fill the card properly */
.ai-premium-form .ai-field input[type="text"],
.ai-premium-form .ai-field input[type="number"],
.ai-premium-form .ai-field input[type="email"],
.ai-premium-form .ai-field input[type="password"],
.ai-premium-form .ai-question-field input[type="text"],
.ai-premium-form .ai-question-field input[type="number"],
.ai-premium-form .ai-question-field input[type="email"],
.ai-premium-form .ai-question-field input[type="password"] {
  min-height: 64px !important;
  border-radius: 18px !important;
}

/* Give normal radio options more breathing room */
.ai-premium-form .ai-choice-group label.option,
.ai-premium-form .ai-choice-group .form-item > label,
.ai-premium-form .ai-choice-group .js-form-item > label {
  min-height: 78px !important;
  padding: 16px 52px 16px 64px !important;
  border-radius: 20px !important;
  font-size: 14.5px !important;
}

/* Keep icon and check circles aligned */
.ai-premium-form .ai-choice-group label.option::before,
.ai-premium-form .ai-choice-group .form-item > label::before,
.ai-premium-form .ai-choice-group .js-form-item > label::before {
  left: 17px !important;
  width: 34px !important;
  height: 34px !important;
}

.ai-premium-form .ai-choice-group label.option::after,
.ai-premium-form .ai-choice-group .form-item > label::after,
.ai-premium-form .ai-choice-group .js-form-item > label::after {
  right: 17px !important;
  width: 23px !important;
  height: 23px !important;
}

/* Secondary goals / cuisines / allergens: fix text collision */
.ai-premium-form .ai-choice-group--chips .form-checkboxes,
.ai-premium-form .ai-choice-group--chips .form-radios {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

/* Chips need more height and much more right padding for the check circle */
.ai-premium-form .ai-choice-group--chips label.option,
.ai-premium-form .ai-choice-group--chips .form-item > label,
.ai-premium-form .ai-choice-group--chips .js-form-item > label {
  min-height: 76px !important;
  padding: 14px 42px 14px 46px !important;
  border-radius: 18px !important;
  font-size: 12.4px !important;
  line-height: 1.12 !important;
  letter-spacing: -.035em !important;
  overflow: hidden !important;
}

/* Smaller left icon bubble on chips */
.ai-premium-form .ai-choice-group--chips label.option::before,
.ai-premium-form .ai-choice-group--chips .form-item > label::before,
.ai-premium-form .ai-choice-group--chips .js-form-item > label::before {
  left: 11px !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 10px !important;
}

/* Move check circle further right and stop it covering text */
.ai-premium-form .ai-choice-group--chips label.option::after,
.ai-premium-form .ai-choice-group--chips .form-item > label::after,
.ai-premium-form .ai-choice-group--chips .js-form-item > label::after {
  right: 11px !important;
  width: 20px !important;
  height: 20px !important;
}

/* Secondary goals are the most text-heavy: make them slightly wider-feeling */
.ai-premium-form .ai-premium-step.ai-step-shell:has(input[name^="secondary_goals"]) {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.ai-premium-form .ai-premium-step.ai-step-shell:has(input[name^="secondary_goals"]) .ai-question-title {
  max-width: 330px !important;
  font-size: clamp(27px, 7.3vw, 34px) !important;
  line-height: 1.04 !important;
}

/* Specific long option fix */
.ai-premium-form .ai-choice-group--chips .form-item:has(input[value="mobility"]) > label,
.ai-premium-form .ai-choice-group--chips .js-form-item:has(input[value="mobility"]) > label {
  font-size: 11.15px !important;
  line-height: 1.06 !important;
}

/* Primary goal / activity long options: avoid cramped text */
.ai-premium-form .ai-premium-step.ai-step-shell:has(input[name="primary_goal"]) .ai-choice-group label.option,
.ai-premium-form .ai-premium-step.ai-step-shell:has(input[name="activity_level"]) .ai-choice-group label.option,
.ai-premium-form .ai-premium-step.ai-step-shell:has(input[name="diet"]) .ai-choice-group label.option,
.ai-premium-form .ai-premium-step.ai-step-shell:has(input[name="equipment_preset"]) .ai-choice-group label.option {
  min-height: 74px !important;
  padding-right: 54px !important;
}

/* Pull the buttons closer to the card */
.ai-premium-form .form-actions,
.ai-premium-form .webform-actions {
  margin-top: 20px !important;
  gap: 14px !important;
}

/* Buttons slightly less huge so the screen breathes */
.ai-premium-form .webform-button--previous,
.ai-premium-form .webform-button--next,
.ai-premium-form .webform-button--submit {
  min-height: 56px !important;
  border-radius: 17px !important;
}

/* Reduce blank white vertical dead space a bit */
.ai-premium-form {
  padding-bottom: 20px !important;
}

/* Mobile refinements */
@media (max-width: 430px) {
  .ai-premium-form {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .ai-premium-form .ai-premium-step.ai-step-shell:not(:has(.ai-onboarding-hero)) {
    padding: 24px 16px 22px !important;
  }

  .ai-premium-form .ai-choice-group label.option,
  .ai-premium-form .ai-choice-group .form-item > label,
  .ai-premium-form .ai-choice-group .js-form-item > label {
    min-height: 76px !important;
    padding-left: 62px !important;
    padding-right: 50px !important;
  }

  .ai-premium-form .ai-choice-group--chips label.option,
  .ai-premium-form .ai-choice-group--chips .form-item > label,
  .ai-premium-form .ai-choice-group--chips .js-form-item > label {
    min-height: 74px !important;
    padding: 13px 40px 13px 44px !important;
    font-size: 12px !important;
  }
}

/* Very narrow screens: secondary goals become one column to avoid ugly wrapping */
@media (max-width: 370px) {
  .ai-premium-form .ai-premium-step.ai-step-shell:has(input[name^="secondary_goals"]) .form-checkboxes {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   AI QUESTION LAYOUT V6 — MOCKUP MATCH
   Matches your YAML classes and keeps existing CSS icons.
   Key point: this does NOT replace label::before icon images.
   ========================================================= */

/* Page spacing around the quiz */
.ai-premium-form.ai-quiz-structured {
  padding-left: 14px !important;
  padding-right: 14px !important;
  background: #ffffff !important;
}

/* Progress bar stays as current percentage style */
.ai-premium-form.ai-quiz-structured .webform-progress {
  margin-bottom: 24px !important;
}

/* Main question card — closer to the mockup */
.ai-premium-form.ai-quiz-structured .ai-premium-step.ai-step-shell:not(:has(.ai-onboarding-hero)) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 34px 24px 30px !important;
  border: 1px solid rgba(217, 226, 238, .92) !important;
  border-radius: 34px !important;
  background: #ffffff !important;
  box-shadow:
    0 18px 42px rgba(15, 23, 42, .045),
    0 2px 8px rgba(15, 23, 42, .018) !important;
}

/* Question title */
.ai-premium-form.ai-quiz-structured .ai-question-block {
  margin: 0 0 26px !important;
  padding: 0 !important;
}

.ai-premium-form.ai-quiz-structured .ai-question-title {
  max-width: 100% !important;
  margin: 0 !important;
  color: #08122e !important;
  font-size: clamp(32px, 8.4vw, 42px) !important;
  line-height: 1.02 !important;
  font-weight: 920 !important;
  letter-spacing: -.066em !important;
  text-wrap: balance !important;
}

/* Choice questions look best centred like the mockup */
.ai-premium-form.ai-quiz-structured .ai-premium-step.ai-step-shell:has(.ai-choice-group) .ai-question-title {
  text-align: center !important;
}

/* Long / text input pages stay left-aligned */
.ai-premium-form.ai-quiz-structured .ai-premium-step.ai-step-shell:has(.ai-field):not(:has(.ai-choice-group)) .ai-question-title,
.ai-premium-form.ai-quiz-structured .ai-premium-step.ai-step-shell:has(textarea) .ai-question-title,
.ai-premium-form.ai-quiz-structured .ai-premium-step.ai-step-shell:has(.ai-choice-group--chips) .ai-question-title {
  text-align: left !important;
}

/* Existing helper text below titles */
.ai-premium-form.ai-quiz-structured .ai-question-block + .ai-choice-group,
.ai-premium-form.ai-quiz-structured .ai-question-block + .ai-question-field,
.ai-premium-form.ai-quiz-structured .ai-question-block + .ai-field {
  margin-top: 0 !important;
}

/* Choice group wrappers from your YAML */
.ai-premium-form.ai-quiz-structured .ai-choice-group,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Drupal radio/checkbox containers */
.ai-premium-form.ai-quiz-structured .ai-choice-group .form-radios,
.ai-premium-form.ai-quiz-structured .ai-choice-group .form-checkboxes {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 14px !important;
}

/* Tile groups: single column like the mockup */
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-radios,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-checkboxes,
.ai-premium-form.ai-quiz-structured .ai-equipment-preset .form-radios {
  grid-template-columns: 1fr !important;
}

/* Form item wrappers */
.ai-premium-form.ai-quiz-structured .ai-choice-group .form-item,
.ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-item,
.ai-premium-form.ai-quiz-structured .ai-choice-group .form-type-radio,
.ai-premium-form.ai-quiz-structured .ai-choice-group .form-type-checkbox {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide native inputs without touching icon pseudo-elements */
.ai-premium-form.ai-quiz-structured .ai-choice-group input[type="radio"],
.ai-premium-form.ai-quiz-structured .ai-choice-group input[type="checkbox"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Main option rows: this is the big layout fix */
.ai-premium-form.ai-quiz-structured .ai-choice-group label.option,
.ai-premium-form.ai-quiz-structured .ai-choice-group .form-item > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-item > label {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 86px !important;
  margin: 0 !important;
  padding: 18px 62px 18px 84px !important;
  border: 1px solid #dde5ef !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  color: #08122e !important;
  box-shadow:
    0 1px 0 rgba(15, 23, 42, .022),
    0 10px 22px rgba(15, 23, 42, .030) !important;
  font-size: 15.2px !important;
  line-height: 1.18 !important;
  font-weight: 850 !important;
  letter-spacing: -.032em !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    transform .16s ease !important;
}

/* IMPORTANT:
   Keep existing icon images/characters.
   Only resize/reposition the icon bubble; do not replace background-image.
*/
.ai-premium-form.ai-quiz-structured .ai-choice-group label.option::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group .form-item > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-item > label::before {
  position: absolute !important;
  top: 50% !important;
  left: 24px !important;
  width: 44px !important;
  height: 44px !important;
  transform: translateY(-50%) !important;
  border-radius: 16px !important;
  background-size: 24px 24px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* Radio/check circle */
.ai-premium-form.ai-quiz-structured .ai-choice-group label.option::after,
.ai-premium-form.ai-quiz-structured .ai-choice-group .form-item > label::after,
.ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-item > label::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: 26px !important;
  width: 26px !important;
  height: 26px !important;
  transform: translateY(-50%) !important;
  border: 2px solid #cfd8e6 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

/* Selected state */
.ai-premium-form.ai-quiz-structured .ai-choice-group .form-item:has(input:checked) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-item:has(input:checked) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group input:checked + label,
.ai-premium-form.ai-quiz-structured .ai-choice-group input:checked ~ label {
  border-color: rgba(124, 58, 237, .76) !important;
  background:
    radial-gradient(circle at 96% 18%, rgba(124, 58, 237, .11), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f8f4ff 100%) !important;
  box-shadow:
    0 0 0 3px rgba(124, 58, 237, .07),
    0 16px 30px rgba(37, 99, 235, .105) !important;
}

/* Selected tick */
.ai-premium-form.ai-quiz-structured .ai-choice-group .form-item:has(input:checked) > label::after,
.ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-item:has(input:checked) > label::after,
.ai-premium-form.ai-quiz-structured .ai-choice-group input:checked + label::after,
.ai-premium-form.ai-quiz-structured .ai-choice-group input:checked ~ label::after {
  content: "✓" !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 16px rgba(37, 99, 235, .22) !important;
}

/* Chips: secondary goals / cuisines / allergens */
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-checkboxes,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-radios {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

/* Chips get more room so the text doesn't crash into the tick */
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips label.option,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item > label {
  min-height: 80px !important;
  padding: 14px 46px 14px 54px !important;
  border-radius: 20px !important;
  font-size: 12.4px !important;
  line-height: 1.10 !important;
  letter-spacing: -.035em !important;
}

/* Chip icons: preserve icon, resize only */
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips label.option::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item > label::before {
  left: 14px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 12px !important;
  background-size: 18px 18px !important;
}

/* Chip tick */
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips label.option::after,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item > label::after,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item > label::after {
  right: 13px !important;
  width: 22px !important;
  height: 22px !important;
}

/* Long secondary goal label fix */
.ai-premium-form.ai-quiz-structured .ai-premium-step:has(input[name^="secondary_goals"]) .ai-question-title {
  font-size: clamp(28px, 7.2vw, 35px) !important;
  line-height: 1.04 !important;
  text-align: left !important;
}

.ai-premium-form.ai-quiz-structured .ai-premium-step:has(input[value="mobility"]) .form-item:has(input[value="mobility"]) > label,
.ai-premium-form.ai-quiz-structured .ai-premium-step:has(input[value="mobility"]) .js-form-item:has(input[value="mobility"]) > label {
  font-size: 11px !important;
  line-height: 1.05 !important;
}

/* Input-only pages */
.ai-premium-form.ai-quiz-structured .ai-field input[type="text"],
.ai-premium-form.ai-quiz-structured .ai-field input[type="number"],
.ai-premium-form.ai-quiz-structured .ai-field input[type="email"],
.ai-premium-form.ai-quiz-structured .ai-field input[type="password"],
.ai-premium-form.ai-quiz-structured .ai-question-field input[type="text"],
.ai-premium-form.ai-quiz-structured .ai-question-field input[type="number"],
.ai-premium-form.ai-quiz-structured .ai-question-field input[type="email"],
.ai-premium-form.ai-quiz-structured .ai-question-field input[type="password"] {
  width: 100% !important;
  min-height: 66px !important;
  padding: 0 18px !important;
  border: 1px solid #dce4ef !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  color: #08122e !important;
  box-shadow:
    inset 0 1px 0 rgba(15,23,42,.018),
    0 10px 24px rgba(15,23,42,.028) !important;
  font-size: 20px !important;
  font-weight: 780 !important;
  letter-spacing: -.035em !important;
}

/* Textareas */
.ai-premium-form.ai-quiz-structured .ai-field textarea,
.ai-premium-form.ai-quiz-structured .ai-question-field textarea,
.ai-premium-form.ai-quiz-structured .ai-field--textarea textarea {
  width: 100% !important;
  min-height: 164px !important;
  padding: 16px !important;
  border: 1px solid #dce4ef !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  font-size: 15.5px !important;
  line-height: 1.5 !important;
}

/* Buttons closer and more like the mockup */
.ai-premium-form.ai-quiz-structured .form-actions,
.ai-premium-form.ai-quiz-structured .webform-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  width: 100% !important;
  margin-top: 26px !important;
}

.ai-premium-form.ai-quiz-structured .webform-button--previous,
.ai-premium-form.ai-quiz-structured .webform-button--next,
.ai-premium-form.ai-quiz-structured .webform-button--submit {
  width: 100% !important;
  min-height: 64px !important;
  border-radius: 18px !important;
  border: 0 !important;
  font-size: 16px !important;
  font-weight: 870 !important;
}

.ai-premium-form.ai-quiz-structured .webform-button--previous {
  background: #eef4fb !important;
  color: #3b4658 !important;
  box-shadow: none !important;
}

.ai-premium-form.ai-quiz-structured .webform-button--next,
.ai-premium-form.ai-quiz-structured .webform-button--submit {
  background: linear-gradient(180deg, #2f86ff 0%, #145fe6 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 34px rgba(37,99,235,.22) !important;
}

/* Mobile match */
@media (max-width: 430px) {
  .ai-premium-form.ai-quiz-structured .ai-premium-step.ai-step-shell:not(:has(.ai-onboarding-hero)) {
    padding: 32px 18px 28px !important;
    border-radius: 34px !important;
  }

  .ai-premium-form.ai-quiz-structured .ai-question-title {
    font-size: clamp(31px, 8vw, 39px) !important;
  }

  .ai-premium-form.ai-quiz-structured .ai-choice-group label.option,
  .ai-premium-form.ai-quiz-structured .ai-choice-group .form-item > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-item > label {
    min-height: 84px !important;
    padding: 17px 58px 17px 78px !important;
  }

  .ai-premium-form.ai-quiz-structured .ai-choice-group label.option::before,
  .ai-premium-form.ai-quiz-structured .ai-choice-group .form-item > label::before,
  .ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-item > label::before {
    left: 22px !important;
    width: 42px !important;
    height: 42px !important;
  }

  .ai-premium-form.ai-quiz-structured .ai-choice-group label.option::after,
  .ai-premium-form.ai-quiz-structured .ai-choice-group .form-item > label::after,
  .ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-item > label::after {
    right: 22px !important;
    width: 26px !important;
    height: 26px !important;
  }

  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips label.option,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item > label {
    min-height: 78px !important;
    padding: 13px 42px 13px 52px !important;
    font-size: 12px !important;
  }

  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips label.option::before,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item > label::before,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item > label::before {
    left: 13px !important;
    width: 30px !important;
    height: 30px !important;
  }

  .ai-premium-form.ai-quiz-structured .form-actions,
  .ai-premium-form.ai-quiz-structured .webform-actions {
    gap: 18px !important;
    margin-top: 26px !important;
  }

  .ai-premium-form.ai-quiz-structured .webform-button--previous,
  .ai-premium-form.ai-quiz-structured .webform-button--next,
  .ai-premium-form.ai-quiz-structured .webform-button--submit {
    min-height: 62px !important;
  }
}

/* Very narrow phones: keep heavy multi-selects readable */
@media (max-width: 370px) {
  .ai-premium-form.ai-quiz-structured .ai-premium-step:has(input[name^="secondary_goals"]) .form-checkboxes,
  .ai-premium-form.ai-quiz-structured .ai-premium-step:has(input[name^="cuisines"]) .form-checkboxes,
  .ai-premium-form.ai-quiz-structured .ai-premium-step:has(input[name^="allergens"]) .form-checkboxes {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   V7 FINAL — YML MATCHED OPTION SPACING FIX
   Works with the supplied YAML:
   - .ai-premium-form.ai-quiz-structured
   - .ai-premium-step.ai-step-shell
   - .ai-choice-group / .ai-choice-group--tiles / .ai-choice-group--chips
   Purpose: keep the current icons, but stop answer cards looking
   smudged together by forcing real gaps between Drupal form items.
   ========================================================= */

/* 1) Force real spacing on the actual Drupal wrappers, not just the label. */
.ai-premium-form.ai-quiz-structured .ai-choice-group .form-radios,
.ai-premium-form.ai-quiz-structured .ai-choice-group .form-checkboxes,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-radios,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-checkboxes,
.ai-premium-form.ai-quiz-structured .ai-equipment-preset .form-radios {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  row-gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2) Backup spacing if the browser/theme does not honour gap on the wrapper. */
.ai-premium-form.ai-quiz-structured .ai-choice-group .form-item,
.ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-item,
.ai-premium-form.ai-quiz-structured .ai-choice-group .form-type-radio,
.ai-premium-form.ai-quiz-structured .ai-choice-group .form-type-checkbox,
.ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-type-radio,
.ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-type-checkbox {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group .form-item + .form-item,
.ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-item + .js-form-item,
.ai-premium-form.ai-quiz-structured .ai-choice-group .form-type-radio + .form-type-radio,
.ai-premium-form.ai-quiz-structured .ai-choice-group .form-type-checkbox + .form-type-checkbox,
.ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-type-radio + .js-form-type-radio,
.ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-type-checkbox + .js-form-type-checkbox {
  margin-top: 14px !important;
}

/* 3) Make each option card slightly more compact so the new gaps fit better. */
.ai-premium-form.ai-quiz-structured .ai-choice-group label.option,
.ai-premium-form.ai-quiz-structured .ai-choice-group .form-item > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-item > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group .form-type-radio > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group .form-type-checkbox > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-type-radio > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-type-checkbox > label {
  min-height: 78px !important;
  margin: 0 !important;
  border-radius: 22px !important;
  box-shadow:
    0 1px 0 rgba(15, 23, 42, .018),
    0 8px 18px rgba(15, 23, 42, .026) !important;
}

/* 4) Stop the selected purple glow bleeding into the card above/below. */
.ai-premium-form.ai-quiz-structured .ai-choice-group .form-item:has(input:checked) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-item:has(input:checked) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group .form-type-radio:has(input:checked) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group .form-type-checkbox:has(input:checked) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-type-radio:has(input:checked) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-type-checkbox:has(input:checked) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group input:checked + label.option {
  box-shadow:
    0 0 0 2px rgba(124, 58, 237, .075),
    0 10px 22px rgba(37, 99, 235, .085) !important;
}

/* 5) Multi-select chip pages: keep the two-column layout but add genuine breathing room. */
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-checkboxes,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-radios {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  row-gap: 14px !important;
  column-gap: 14px !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item + .form-item,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item + .js-form-item,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-type-checkbox + .form-type-checkbox,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-type-checkbox + .js-form-type-checkbox {
  margin-top: 0 !important;
}

/* 6) Keep training days as compact day buttons, not big separated list cards. */
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips:has(input[value="mon"]) .form-checkboxes {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  row-gap: 10px !important;
  column-gap: 10px !important;
}

/* 7) Mobile tuning — exactly where your screenshots are coming from. */
@media (max-width: 430px) {
  .ai-premium-form.ai-quiz-structured .ai-choice-group .form-radios,
  .ai-premium-form.ai-quiz-structured .ai-choice-group .form-checkboxes,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-radios,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-checkboxes,
  .ai-premium-form.ai-quiz-structured .ai-equipment-preset .form-radios {
    gap: 13px !important;
    row-gap: 13px !important;
  }

  .ai-premium-form.ai-quiz-structured .ai-choice-group .form-item + .form-item,
  .ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-item + .js-form-item,
  .ai-premium-form.ai-quiz-structured .ai-choice-group .form-type-radio + .form-type-radio,
  .ai-premium-form.ai-quiz-structured .ai-choice-group .form-type-checkbox + .form-type-checkbox,
  .ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-type-radio + .js-form-type-radio,
  .ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-type-checkbox + .js-form-type-checkbox {
    margin-top: 13px !important;
  }

  .ai-premium-form.ai-quiz-structured .ai-choice-group label.option,
  .ai-premium-form.ai-quiz-structured .ai-choice-group .form-item > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-item > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group .form-type-radio > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group .form-type-checkbox > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-type-radio > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group .js-form-type-checkbox > label {
    min-height: 80px !important;
    border-radius: 22px !important;
  }

  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-checkboxes,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-radios {
    gap: 12px !important;
    row-gap: 12px !important;
    column-gap: 12px !important;
  }

  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item + .form-item,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item + .js-form-item,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-type-checkbox + .form-type-checkbox,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-type-checkbox + .js-form-type-checkbox {
    margin-top: 0 !important;
  }
}


/* =========================================================
   ACTIVITY ICON UPGRADE v8.1
   Cleaner SVG icons for the Typical daily activity question.
   Matches the current YAML values: sedentary, light, moderate, high, athlete.
   ========================================================= */

.ai-premium-form .form-item:has(input[value="sedentary"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="sedentary"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="sedentary"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="sedentary"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="sedentary"]) > label::before {
  content: "" !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 16px !important;
  background-color: #fff1f2 !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e11d48%22%20stroke-width%3D%222.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%207h12%22/%3E%3Cpath%20d%3D%22M8%207v10%22/%3E%3Cpath%20d%3D%22M16%207v10%22/%3E%3Cpath%20d%3D%22M7%2017h10%22/%3E%3Cpath%20d%3D%22M9%204h6%22/%3E%3Cpath%20d%3D%22M10%204v3%22/%3E%3Cpath%20d%3D%22M14%204v3%22/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .035) !important;
}

.ai-premium-form .form-item:has(input[value="light"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="light"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="light"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="light"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="light"]) > label::before {
  content: "" !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 16px !important;
  background-color: #fff7ed !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ea580c%22%20stroke-width%3D%222.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2213%22%20cy%3D%224.5%22%20r%3D%221.7%22/%3E%3Cpath%20d%3D%22M11.7%208.2%209.5%2012l3.1%202.2%22/%3E%3Cpath%20d%3D%22M12.7%208.4%2016%2010.2%22/%3E%3Cpath%20d%3D%22M12.6%2014.2%2011.2%2020%22/%3E%3Cpath%20d%3D%22M9.6%2012.1%206.7%2018.2%22/%3E%3Cpath%20d%3D%22M16%2010.2l1.6%203.1%22/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .035) !important;
}

.ai-premium-form .form-item:has(input[value="moderate"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="moderate"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="moderate"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="moderate"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="moderate"]) > label::before {
  content: "" !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 16px !important;
  background-color: #ecfdf5 !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2316a34a%22%20stroke-width%3D%222.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2215.5%22%20cy%3D%224.8%22%20r%3D%221.7%22/%3E%3Cpath%20d%3D%22M13.5%208.3%2010%2011.5l4.2%202.2%22/%3E%3Cpath%20d%3D%22M13.8%208.4%2017.8%2010%22/%3E%3Cpath%20d%3D%22M14.2%2013.6%2018.5%2019%22/%3E%3Cpath%20d%3D%22M10.1%2011.7%206.2%2019%22/%3E%3Cpath%20d%3D%22M6%2012h3.8%22/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .035) !important;
}

.ai-premium-form .form-item:has(input[value="high"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="high"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="high"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="high"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="high"]) > label::before {
  content: "" !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 16px !important;
  background-color: #fefce8 !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23ca8a04%22%3E%3Cpath%20d%3D%22M13.5%202.7%204.8%2013.2c-.43.52-.06%201.3.61%201.3h5.13l-1.2%206.74c-.15.85.93%201.34%201.47.67l8.45-10.55c.42-.53.05-1.31-.62-1.31h-5.01l1.21-6.7c.15-.84-.88-1.34-1.34-.65Z%22/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .035) !important;
}

.ai-premium-form .form-item:has(input[value="athlete"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="athlete"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[value="athlete"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="athlete"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[value="athlete"]) > label::before {
  content: "" !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 16px !important;
  background-color: #ecfdf5 !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2316a34a%22%20stroke-width%3D%222.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%204h8v4.5a4%204%200%200%201-8%200V4Z%22/%3E%3Cpath%20d%3D%22M8%206H5.5a2%202%200%200%200%202%203.5H8%22/%3E%3Cpath%20d%3D%22M16%206h2.5a2%202%200%200%201-2%203.5H16%22/%3E%3Cpath%20d%3D%22M12%2013v4%22/%3E%3Cpath%20d%3D%22M8.5%2020h7%22/%3E%3Cpath%20d%3D%22M10%2017h4%22/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .035) !important;
}


.ai-premium-form .form-item:has(input[value="sedentary"]) > label,
.ai-premium-form .form-item:has(input[value="light"]) > label,
.ai-premium-form .form-item:has(input[value="moderate"]) > label,
.ai-premium-form .form-item:has(input[value="high"]) > label,
.ai-premium-form .form-item:has(input[value="athlete"]) > label,
.ai-premium-form .form-type-radio:has(input[value="sedentary"]) > label,
.ai-premium-form .form-type-radio:has(input[value="light"]) > label,
.ai-premium-form .form-type-radio:has(input[value="moderate"]) > label,
.ai-premium-form .form-type-radio:has(input[value="high"]) > label,
.ai-premium-form .form-type-radio:has(input[value="athlete"]) > label,
.ai-premium-form .js-form-type-radio:has(input[value="sedentary"]) > label,
.ai-premium-form .js-form-type-radio:has(input[value="light"]) > label,
.ai-premium-form .js-form-type-radio:has(input[value="moderate"]) > label,
.ai-premium-form .js-form-type-radio:has(input[value="high"]) > label,
.ai-premium-form .js-form-type-radio:has(input[value="athlete"]) > label {
  padding-left: 88px !important;
}

.ai-premium-form .form-item:has(input[value="sedentary"]) > label::before,
.ai-premium-form .form-item:has(input[value="light"]) > label::before,
.ai-premium-form .form-item:has(input[value="moderate"]) > label::before,
.ai-premium-form .form-item:has(input[value="high"]) > label::before,
.ai-premium-form .form-item:has(input[value="athlete"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="sedentary"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="light"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="moderate"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="high"]) > label::before,
.ai-premium-form .form-type-radio:has(input[value="athlete"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="sedentary"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="light"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="moderate"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="high"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[value="athlete"]) > label::before {
  left: 24px !important;
}

@media (max-width: 380px) {
  .ai-premium-form .form-item:has(input[value="sedentary"]) > label,
  .ai-premium-form .form-item:has(input[value="light"]) > label,
  .ai-premium-form .form-item:has(input[value="moderate"]) > label,
  .ai-premium-form .form-item:has(input[value="high"]) > label,
  .ai-premium-form .form-item:has(input[value="athlete"]) > label,
  .ai-premium-form .form-type-radio:has(input[value="sedentary"]) > label,
  .ai-premium-form .form-type-radio:has(input[value="light"]) > label,
  .ai-premium-form .form-type-radio:has(input[value="moderate"]) > label,
  .ai-premium-form .form-type-radio:has(input[value="high"]) > label,
  .ai-premium-form .form-type-radio:has(input[value="athlete"]) > label {
    padding-left: 78px !important;
  }

  .ai-premium-form .form-item:has(input[value="sedentary"]) > label::before,
  .ai-premium-form .form-item:has(input[value="light"]) > label::before,
  .ai-premium-form .form-item:has(input[value="moderate"]) > label::before,
  .ai-premium-form .form-item:has(input[value="high"]) > label::before,
  .ai-premium-form .form-item:has(input[value="athlete"]) > label::before,
  .ai-premium-form .form-type-radio:has(input[value="sedentary"]) > label::before,
  .ai-premium-form .form-type-radio:has(input[value="light"]) > label::before,
  .ai-premium-form .form-type-radio:has(input[value="moderate"]) > label::before,
  .ai-premium-form .form-type-radio:has(input[value="high"]) > label::before,
  .ai-premium-form .form-type-radio:has(input[value="athlete"]) > label::before {
    left: 18px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
    background-size: 20px 20px !important;
  }
}

/* =========================================================
   AI QUESTION LAYOUT V18 — ACTIVITY ICONS 25% SMALLER
   Same new icon pack, cropped tighter with black background removed.
   Icons are embedded directly in this CSS.
   ========================================================= */

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="activity_level"]) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="activity_level"]) > label {
  padding-left: 86px !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="activity_level"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="activity_level"]) > label::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 24px !important;
  width: 40.5px !important;
  height: 40.5px !important;
  transform: translateY(-50%) !important;
  border-radius: 18px !important;
  background-color: transparent !important;
  background-size: 40.5px 40.5px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[value="sedentary"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[value="sedentary"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/activity-level/activity-level.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[value="light"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[value="light"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/activity-level/activity-level-02.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[value="moderate"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[value="moderate"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/activity-level/moderate.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[value="high"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[value="high"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/activity-level/high.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[value="athlete"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[value="athlete"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/activity-level/athlete.png") !important;
}

@media (max-width: 430px) {
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="activity_level"]) > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="activity_level"]) > label {
    padding-left: 82px !important;
  }

  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="activity_level"]) > label::before,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="activity_level"]) > label::before {
    left: 22px !important;
    width: 39px !important;
    height: 39px !important;
    background-size: 39px 39px !important;
  }
}

/* =========================================================
   TRAINING EXPERIENCE ICONS — BEGINNER / INTERMEDIATE / ADVANCED
   Uses uploaded PNG icons embedded directly in this CSS.
   Matches the same structure as the activity-level icons.
   ========================================================= */

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="experience"]) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="experience"]) > label {
  padding-left: 86px !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="experience"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="experience"]) > label::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 24px !important;
  width: 40.5px !important;
  height: 40.5px !important;
  transform: translateY(-50%) !important;
  border-radius: 14px !important;
  background-color: transparent !important;
  background-size: 40.5px 40.5px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="experience"][value="beginner"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="experience"][value="beginner"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/training-experience/experience.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="experience"][value="intermediate"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="experience"][value="intermediate"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/training-experience/experience-02.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="experience"][value="advanced"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="experience"][value="advanced"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/training-experience/experience-03.png") !important;
}

@media (max-width: 430px) {
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="experience"]) > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="experience"]) > label {
    padding-left: 82px !important;
  }

  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="experience"]) > label::before,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="experience"]) > label::before {
    left: 22px !important;
    width: 39px !important;
    height: 39px !important;
    background-size: 39px 39px !important;
  }
}

/* =========================================================
   PRIMARY GOAL ICONS — FAT LOSS / BUILD MUSCLE / RECOMP / PERFORMANCE / GENERAL FITNESS
   Uses uploaded PNG icons embedded directly in this CSS.
   Matches the activity + training experience icon sizing.
   ========================================================= */

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="primary_goal"]) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="primary_goal"]) > label {
  padding-left: 86px !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="primary_goal"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="primary_goal"]) > label::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 24px !important;
  width: 40.5px !important;
  height: 40.5px !important;
  transform: translateY(-50%) !important;
  border-radius: 14px !important;
  background-color: transparent !important;
  background-size: 40.5px 40.5px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="primary_goal"][value="fat_loss"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="primary_goal"][value="fat_loss"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/training-experience/primary-goal.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="primary_goal"][value="muscle_gain"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="primary_goal"][value="muscle_gain"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/training-experience/primary-goal-02.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="primary_goal"][value="recomp"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="primary_goal"][value="recomp"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/training-experience/primary-goal-03.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="primary_goal"][value="performance"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="primary_goal"][value="performance"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/training-experience/primary-goal-04.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="primary_goal"][value="general_fitness"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="primary_goal"][value="general_fitness"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/training-experience/primary-goal-05.png") !important;
}

@media (max-width: 430px) {
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="primary_goal"]) > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="primary_goal"]) > label {
    padding-left: 82px !important;
  }

  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="primary_goal"]) > label::before,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="primary_goal"]) > label::before {
    left: 22px !important;
    width: 39px !important;
    height: 39px !important;
    background-size: 39px 39px !important;
  }
}


/* =========================================================
   FINAL SECONDARY GOAL PNG ICONS v21
   Uses uploaded PNG icon pack directly in CSS.
   Matches YAML values: strength, endurance, mobility, posture, energy, confidence.
   ========================================================= */

/* Give secondary-goal cards enough room so icons/text/tick do not crash into each other */
.ai-premium-form .form-item-secondary-goals .form-checkboxes,
.ai-premium-form .ai-field-secondary-goals .form-checkboxes {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.ai-premium-form .form-item-secondary-goals input[type="checkbox"] + label,
.ai-premium-form .ai-field-secondary-goals input[type="checkbox"] + label {
  min-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-direction: row !important;
  padding: 13px 38px 13px 58px !important;
  border-radius: 18px !important;
  font-size: 13px !important;
  line-height: 1.08 !important;
  font-weight: 850 !important;
  letter-spacing: -0.035em !important;
  overflow: hidden !important;
}

.ai-premium-form .form-item-secondary-goals input[type="checkbox"] + label::before,
.ai-premium-form .ai-field-secondary-goals input[type="checkbox"] + label::before {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
  transform: translateY(-50%) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
}

.ai-premium-form .form-item-secondary-goals input[type="checkbox"] + label::after,
.ai-premium-form .ai-field-secondary-goals input[type="checkbox"] + label::after {
  top: 50% !important;
  right: 12px !important;
  width: 19px !important;
  height: 19px !important;
  transform: translateY(-50%) !important;
}

.ai-premium-form .form-item-secondary-goals .form-item:has(input[value="strength"]) > label::before,
.ai-premium-form .form-item-secondary-goals .form-type-checkbox:has(input[value="strength"]) > label::before,
.ai-premium-form .form-item-secondary-goals .js-form-type-checkbox:has(input[value="strength"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .form-item:has(input[value="strength"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .form-type-checkbox:has(input[value="strength"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .js-form-type-checkbox:has(input[value="strength"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/secondary-goals/strength.png") !important;
}

.ai-premium-form .form-item-secondary-goals .form-item:has(input[value="endurance"]) > label::before,
.ai-premium-form .form-item-secondary-goals .form-type-checkbox:has(input[value="endurance"]) > label::before,
.ai-premium-form .form-item-secondary-goals .js-form-type-checkbox:has(input[value="endurance"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .form-item:has(input[value="endurance"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .form-type-checkbox:has(input[value="endurance"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .js-form-type-checkbox:has(input[value="endurance"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/secondary-goals/endurance.png") !important;
}

.ai-premium-form .form-item-secondary-goals .form-item:has(input[value="mobility"]) > label::before,
.ai-premium-form .form-item-secondary-goals .form-type-checkbox:has(input[value="mobility"]) > label::before,
.ai-premium-form .form-item-secondary-goals .js-form-type-checkbox:has(input[value="mobility"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .form-item:has(input[value="mobility"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .form-type-checkbox:has(input[value="mobility"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .js-form-type-checkbox:has(input[value="mobility"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/secondary-goals/mobility.png") !important;
}

.ai-premium-form .form-item-secondary-goals .form-item:has(input[value="posture"]) > label::before,
.ai-premium-form .form-item-secondary-goals .form-type-checkbox:has(input[value="posture"]) > label::before,
.ai-premium-form .form-item-secondary-goals .js-form-type-checkbox:has(input[value="posture"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .form-item:has(input[value="posture"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .form-type-checkbox:has(input[value="posture"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .js-form-type-checkbox:has(input[value="posture"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/secondary-goals/posture.png") !important;
}

.ai-premium-form .form-item-secondary-goals .form-item:has(input[value="energy"]) > label::before,
.ai-premium-form .form-item-secondary-goals .form-type-checkbox:has(input[value="energy"]) > label::before,
.ai-premium-form .form-item-secondary-goals .js-form-type-checkbox:has(input[value="energy"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .form-item:has(input[value="energy"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .form-type-checkbox:has(input[value="energy"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .js-form-type-checkbox:has(input[value="energy"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/secondary-goals/energy.png") !important;
}

.ai-premium-form .form-item-secondary-goals .form-item:has(input[value="confidence"]) > label::before,
.ai-premium-form .form-item-secondary-goals .form-type-checkbox:has(input[value="confidence"]) > label::before,
.ai-premium-form .form-item-secondary-goals .js-form-type-checkbox:has(input[value="confidence"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .form-item:has(input[value="confidence"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .form-type-checkbox:has(input[value="confidence"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .js-form-type-checkbox:has(input[value="confidence"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/secondary-goals/confidence.png") !important;
}

@media (max-width: 360px) {
  .ai-premium-form .form-item-secondary-goals .form-checkboxes,
  .ai-premium-form .ai-field-secondary-goals .form-checkboxes {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   SECONDARY GOAL ICON CLEAN CROP FIX v22
   Replaces the previous embedded secondary-goal PNGs with
   cleaned transparent-crop versions so no chequered pattern
   appears around the icon cards.
   ========================================================= */


.ai-premium-form .form-item-secondary-goals input[type="checkbox"] + label::before,
.ai-premium-form .ai-field-secondary-goals input[type="checkbox"] + label::before {
  content: "" !important;
  width: 34px !important;
  height: 34px !important;
  left: 12px !important;
  top: 50% !important;
  border-radius: 11px !important;
  transform: translateY(-50%) !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  overflow: visible !important;
}
.ai-premium-form .form-item-secondary-goals .form-item:has(input[value="strength"]) > label::before,
.ai-premium-form .form-item-secondary-goals .form-type-checkbox:has(input[value="strength"]) > label::before,
.ai-premium-form .form-item-secondary-goals .js-form-type-checkbox:has(input[value="strength"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .form-item:has(input[value="strength"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .form-type-checkbox:has(input[value="strength"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .js-form-type-checkbox:has(input[value="strength"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/secondary-goals/strength-02.png") !important;
}

.ai-premium-form .form-item-secondary-goals .form-item:has(input[value="endurance"]) > label::before,
.ai-premium-form .form-item-secondary-goals .form-type-checkbox:has(input[value="endurance"]) > label::before,
.ai-premium-form .form-item-secondary-goals .js-form-type-checkbox:has(input[value="endurance"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .form-item:has(input[value="endurance"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .form-type-checkbox:has(input[value="endurance"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .js-form-type-checkbox:has(input[value="endurance"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/secondary-goals/endurance-02.png") !important;
}

.ai-premium-form .form-item-secondary-goals .form-item:has(input[value="mobility"]) > label::before,
.ai-premium-form .form-item-secondary-goals .form-type-checkbox:has(input[value="mobility"]) > label::before,
.ai-premium-form .form-item-secondary-goals .js-form-type-checkbox:has(input[value="mobility"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .form-item:has(input[value="mobility"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .form-type-checkbox:has(input[value="mobility"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .js-form-type-checkbox:has(input[value="mobility"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/secondary-goals/mobility-02.png") !important;
}

.ai-premium-form .form-item-secondary-goals .form-item:has(input[value="posture"]) > label::before,
.ai-premium-form .form-item-secondary-goals .form-type-checkbox:has(input[value="posture"]) > label::before,
.ai-premium-form .form-item-secondary-goals .js-form-type-checkbox:has(input[value="posture"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .form-item:has(input[value="posture"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .form-type-checkbox:has(input[value="posture"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .js-form-type-checkbox:has(input[value="posture"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/secondary-goals/posture-02.png") !important;
}

.ai-premium-form .form-item-secondary-goals .form-item:has(input[value="energy"]) > label::before,
.ai-premium-form .form-item-secondary-goals .form-type-checkbox:has(input[value="energy"]) > label::before,
.ai-premium-form .form-item-secondary-goals .js-form-type-checkbox:has(input[value="energy"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .form-item:has(input[value="energy"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .form-type-checkbox:has(input[value="energy"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .js-form-type-checkbox:has(input[value="energy"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/secondary-goals/energy-02.png") !important;
}

.ai-premium-form .form-item-secondary-goals .form-item:has(input[value="confidence"]) > label::before,
.ai-premium-form .form-item-secondary-goals .form-type-checkbox:has(input[value="confidence"]) > label::before,
.ai-premium-form .form-item-secondary-goals .js-form-type-checkbox:has(input[value="confidence"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .form-item:has(input[value="confidence"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .form-type-checkbox:has(input[value="confidence"]) > label::before,
.ai-premium-form .ai-field-secondary-goals .js-form-type-checkbox:has(input[value="confidence"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/secondary-goals/confidence-02.png") !important;
}

/* =========================================================
   SECONDARY GOAL ICONS — NEW UPLOADED PNG SET
   Strength / Endurance / Mobility / Posture / Energy / Confidence
   Black screenshot background removed and PNGs embedded directly.
   ========================================================= */

.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="secondary_goals"]) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="secondary_goals"]) > label {
  padding-left: 70px !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="secondary_goals"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="secondary_goals"]) > label::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 18px !important;
  width: 38px !important;
  height: 38px !important;
  transform: translateY(-50%) !important;
  border-radius: 13px !important;
  background-color: transparent !important;
  background-size: 38px 38px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="secondary_goals"][value="strength"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="secondary_goals"][value="strength"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/secondary-goals/onboarding-icon-091.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="secondary_goals"][value="endurance"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="secondary_goals"][value="endurance"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/secondary-goals/onboarding-icon-092.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="secondary_goals"][value="mobility"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="secondary_goals"][value="mobility"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/secondary-goals/onboarding-icon-093.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="secondary_goals"][value="posture"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="secondary_goals"][value="posture"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/secondary-goals/onboarding-icon-094.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="secondary_goals"][value="energy"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="secondary_goals"][value="energy"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/secondary-goals/onboarding-icon-095.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="secondary_goals"][value="confidence"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="secondary_goals"][value="confidence"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/secondary-goals/onboarding-icon-096.png") !important;
}

@media (max-width: 430px) {
  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="secondary_goals"]) > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="secondary_goals"]) > label {
    padding-left: 66px !important;
  }

  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="secondary_goals"]) > label::before,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="secondary_goals"]) > label::before {
    left: 16px !important;
    width: 36px !important;
    height: 36px !important;
    background-size: 36px 36px !important;
  }
}

/* =========================================================
   EQUIPMENT SETUP ICONS — WHAT BEST DESCRIBES YOUR SETUP?
   Matches YAML values:
   standard_gym / dumbbells_bench / bodyweight / full_gym / custom
   ========================================================= */

.ai-premium-form.ai-quiz-structured .ai-equipment-preset .form-item > label,
.ai-premium-form.ai-quiz-structured .ai-equipment-preset .js-form-item > label {
  padding-left: 78px !important;
}

.ai-premium-form.ai-quiz-structured .ai-equipment-preset .form-item > label::before,
.ai-premium-form.ai-quiz-structured .ai-equipment-preset .js-form-item > label::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 20px !important;
  width: 44px !important;
  height: 44px !important;
  transform: translateY(-50%) !important;
  border-radius: 14px !important;
  background-color: transparent !important;
  background-size: 44px 44px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
}

.ai-premium-form.ai-quiz-structured .ai-equipment-preset .form-item:has(input[value="standard_gym"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-equipment-preset .js-form-item:has(input[value="standard_gym"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/equipment-setup/standard-gym.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-equipment-preset .form-item:has(input[value="dumbbells_bench"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-equipment-preset .js-form-item:has(input[value="dumbbells_bench"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/equipment-setup/dumbbells-bench.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-equipment-preset .form-item:has(input[value="bodyweight"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-equipment-preset .js-form-item:has(input[value="bodyweight"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/equipment-setup/bodyweight.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-equipment-preset .form-item:has(input[value="full_gym"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-equipment-preset .js-form-item:has(input[value="full_gym"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/equipment-setup/full-gym.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-equipment-preset .form-item:has(input[value="custom"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-equipment-preset .js-form-item:has(input[value="custom"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/equipment-setup/custom.png") !important;
}

@media (max-width: 430px) {
  .ai-premium-form.ai-quiz-structured .ai-equipment-preset .form-item > label,
  .ai-premium-form.ai-quiz-structured .ai-equipment-preset .js-form-item > label {
    padding-left: 72px !important;
  }

  .ai-premium-form.ai-quiz-structured .ai-equipment-preset .form-item > label::before,
  .ai-premium-form.ai-quiz-structured .ai-equipment-preset .js-form-item > label::before {
    left: 18px !important;
    width: 40px !important;
    height: 40px !important;
    background-size: 40px 40px !important;
  }
}

/* =========================================================
   COOKING SKILL + MEAL STYLE ICONS
   Matches YAML values:
   cooking_skill: basic / competent / confident
   cooking_style: quick / family / meal_prep / gourmet
   ========================================================= */

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="cooking_skill"]) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="cooking_skill"]) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="cooking_style"]) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="cooking_style"]) > label {
  padding-left: 78px !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="cooking_skill"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="cooking_skill"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="cooking_style"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="cooking_style"]) > label::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 20px !important;
  width: 44px !important;
  height: 44px !important;
  transform: translateY(-50%) !important;
  border-radius: 14px !important;
  background-color: transparent !important;
  background-size: 44px 44px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
}

/* Cooking skill */
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="cooking_skill"][value="basic"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="cooking_skill"][value="basic"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/cooking-and-meal-style/cooking-skill.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="cooking_skill"][value="competent"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="cooking_skill"][value="competent"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/cooking-and-meal-style/cooking-skill-02.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="cooking_skill"][value="confident"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="cooking_skill"][value="confident"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/cooking-and-meal-style/cooking-skill-03.png") !important;
}

/* Meal style preference */
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="cooking_style"][value="quick"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="cooking_style"][value="quick"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/cooking-and-meal-style/cooking-style.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="cooking_style"][value="family"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="cooking_style"][value="family"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/cooking-and-meal-style/cooking-style-02.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="cooking_style"][value="meal_prep"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="cooking_style"][value="meal_prep"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/cooking-and-meal-style/cooking-style-03.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="cooking_style"][value="gourmet"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="cooking_style"][value="gourmet"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/cooking-and-meal-style/cooking-style-04.png") !important;
}

@media (max-width: 430px) {
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="cooking_skill"]) > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="cooking_skill"]) > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="cooking_style"]) > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="cooking_style"]) > label {
    padding-left: 72px !important;
  }

  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="cooking_skill"]) > label::before,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="cooking_skill"]) > label::before,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="cooking_style"]) > label::before,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="cooking_style"]) > label::before {
    left: 18px !important;
    width: 40px !important;
    height: 40px !important;
    background-size: 40px 40px !important;
  }
}

/* =========================================================
   MEALS PER DAY + SNACKS PER DAY ICONS
   Matches YAML values:
   meals_per_day: 2 / 3 / 4
   snacks_per_day: 0 / 1 / 2
   ========================================================= */

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="meals_per_day"]) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="meals_per_day"]) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="snacks_per_day"]) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="snacks_per_day"]) > label {
  padding-left: 78px !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="meals_per_day"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="meals_per_day"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="snacks_per_day"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="snacks_per_day"]) > label::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 20px !important;
  width: 44px !important;
  height: 44px !important;
  transform: translateY(-50%) !important;
  border-radius: 14px !important;
  background-color: transparent !important;
  background-size: 44px 44px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
}

/* Meals per day */
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="meals_per_day"][value="2"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="meals_per_day"][value="2"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/meals-and-snacks/meals-per-day.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="meals_per_day"][value="3"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="meals_per_day"][value="3"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/meals-and-snacks/meals-per-day-02.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="meals_per_day"][value="4"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="meals_per_day"][value="4"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/meals-and-snacks/meals-per-day-03.png") !important;
}

/* Snacks per day */
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="snacks_per_day"][value="0"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="snacks_per_day"][value="0"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/meals-and-snacks/snacks-per-day.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="snacks_per_day"][value="1"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="snacks_per_day"][value="1"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/meals-and-snacks/snacks-per-day-02.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="snacks_per_day"][value="2"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="snacks_per_day"][value="2"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/meals-and-snacks/snacks-per-day-03.png") !important;
}

@media (max-width: 430px) {
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="meals_per_day"]) > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="meals_per_day"]) > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="snacks_per_day"]) > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="snacks_per_day"]) > label {
    padding-left: 72px !important;
  }

  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="meals_per_day"]) > label::before,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="meals_per_day"]) > label::before,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="snacks_per_day"]) > label::before,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="snacks_per_day"]) > label::before {
    left: 18px !important;
    width: 40px !important;
    height: 40px !important;
    background-size: 40px 40px !important;
  }
}

/* =========================================================
   DIET PATTERN ICONS — FINAL PNG SET
   Matches YAML values:
   none / vegetarian / vegan / pescatarian / halal / kosher /
   low_carb / keto / low_fodmap / gluten_free / dairy_free
   ========================================================= */

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="diet"]) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="diet"]) > label {
  padding-left: 78px !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="diet"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="diet"]) > label::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 20px !important;
  width: 44px !important;
  height: 44px !important;
  transform: translateY(-50%) !important;
  border-radius: 14px !important;
  background-color: transparent !important;
  background-size: 44px 44px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="diet"][value="none"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="diet"][value="none"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/diet-pattern/diet.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="diet"][value="vegetarian"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="diet"][value="vegetarian"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/diet-pattern/diet-02.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="diet"][value="vegan"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="diet"][value="vegan"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/diet-pattern/diet-03.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="diet"][value="pescatarian"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="diet"][value="pescatarian"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/diet-pattern/diet-04.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="diet"][value="halal"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="diet"][value="halal"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/diet-pattern/diet-05.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="diet"][value="kosher"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="diet"][value="kosher"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/diet-pattern/diet-06.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="diet"][value="low_carb"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="diet"][value="low_carb"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/diet-pattern/diet-07.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="diet"][value="keto"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="diet"][value="keto"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/diet-pattern/diet-08.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="diet"][value="low_fodmap"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="diet"][value="low_fodmap"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/diet-pattern/diet-09.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="diet"][value="gluten_free"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="diet"][value="gluten_free"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/diet-pattern/diet-10.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="diet"][value="dairy_free"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="diet"][value="dairy_free"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/diet-pattern/diet-11.png") !important;
}

@media (max-width: 430px) {
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="diet"]) > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="diet"]) > label {
    padding-left: 72px !important;
  }

  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="diet"]) > label::before,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="diet"]) > label::before {
    left: 18px !important;
    width: 40px !important;
    height: 40px !important;
    background-size: 40px 40px !important;
  }
}

/* =========================================================
   ALLERGY ICONS — PNG SET
   Matches YAML values:
   peanuts / tree_nuts / sesame / soy / eggs / milk / fish /
   shellfish / gluten / other
   ========================================================= */

.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="allergens"]) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="allergens"]) > label {
  padding-left: 72px !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="allergens"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="allergens"]) > label::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 18px !important;
  width: 40px !important;
  height: 40px !important;
  transform: translateY(-50%) !important;
  border-radius: 13px !important;
  background-color: transparent !important;
  background-size: 40px 40px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name="allergens[peanuts]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name="allergens[peanuts]"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/allergies/allergens-peanuts.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name="allergens[tree_nuts]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name="allergens[tree_nuts]"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/allergies/allergens-tree-nuts.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name="allergens[sesame]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name="allergens[sesame]"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/allergies/allergens-sesame.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name="allergens[soy]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name="allergens[soy]"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/allergies/allergens-soy.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name="allergens[eggs]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name="allergens[eggs]"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/allergies/allergens-eggs.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name="allergens[milk]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name="allergens[milk]"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/allergies/allergens-milk.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name="allergens[fish]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name="allergens[fish]"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/allergies/allergens-fish.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name="allergens[shellfish]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name="allergens[shellfish]"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/allergies/allergens-shellfish.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name="allergens[gluten]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name="allergens[gluten]"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/allergies/allergens-gluten.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name="allergens[other]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name="allergens[other]"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/allergies/allergens-other.png") !important;
}

@media (max-width: 430px) {
  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="allergens"]) > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="allergens"]) > label {
    padding-left: 68px !important;
  }

  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="allergens"]) > label::before,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="allergens"]) > label::before {
    left: 16px !important;
    width: 38px !important;
    height: 38px !important;
    background-size: 38px 38px !important;
  }
}

/* =========================================================
   ALCOHOL + STRESS ICONS — CORRECTED PNG SET
   Alcohol:
   0 = grey
   1-6 = green
   7-14 = orange
   15+ = red

   Stress:
   low = green
   medium = orange
   high = red
   ========================================================= */

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="alcohol_per_week"]) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="alcohol_per_week"]) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="stress_level"]) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="stress_level"]) > label {
  padding-left: 86px !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="alcohol_per_week"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="alcohol_per_week"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="stress_level"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="stress_level"]) > label::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 22px !important;
  width: 48px !important;
  height: 48px !important;
  transform: translateY(-50%) !important;
  border-radius: 15px !important;
  background-color: transparent !important;
  background-size: 48px 48px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
}

/* Alcohol options */
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="alcohol_per_week"][value="0"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="alcohol_per_week"][value="0"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/alcohol-and-stress/alcohol-per-week.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="alcohol_per_week"][value="1-6"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="alcohol_per_week"][value="1-6"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/alcohol-and-stress/alcohol-per-week-02.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="alcohol_per_week"][value="7-14"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="alcohol_per_week"][value="7-14"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/alcohol-and-stress/alcohol-per-week-03.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="alcohol_per_week"][value="15+"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="alcohol_per_week"][value="15+"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/alcohol-and-stress/alcohol-per-week-04.png") !important;
}

/* Stress options */
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="stress_level"][value="low"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="stress_level"][value="low"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/alcohol-and-stress/stress-level.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="stress_level"][value="medium"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="stress_level"][value="medium"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/alcohol-and-stress/stress-level-02.png") !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="stress_level"][value="high"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="stress_level"][value="high"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/alcohol-and-stress/stress-level-03.png") !important;
}

@media (max-width: 430px) {
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="alcohol_per_week"]) > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="alcohol_per_week"]) > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="stress_level"]) > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="stress_level"]) > label {
    padding-left: 80px !important;
  }

  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="alcohol_per_week"]) > label::before,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="alcohol_per_week"]) > label::before,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name="stress_level"]) > label::before,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name="stress_level"]) > label::before {
    left: 20px !important;
    width: 44px !important;
    height: 44px !important;
    background-size: 44px 44px !important;
  }
}

/* =========================================================
   CUISINE FLAGS
   Matches YAML values:
   british / mediterranean / italian / indian / chinese / thai /
   mexican / japanese / greek / middle_eastern / korean / caribbean

   Mediterranean, Middle Eastern and Caribbean are regions;
   Mediterranean uses a wave icon, with UAE and Jamaica as representative regional flags.
   ========================================================= */

.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="cuisines"]) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="cuisines"]) > label {
  padding-left: 82px !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="cuisines"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="cuisines"]) > label::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 22px !important;
  width: 46px !important;
  height: 46px !important;
  transform: translateY(-50%) !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 15px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(244,248,255,.88)) !important;
  box-shadow:
    0 10px 22px rgba(15, 23, 42, .08),
    inset 0 0 0 1px rgba(210, 221, 235, .8) !important;
  font-size: 25px !important;
  line-height: 1 !important;
  background-image: none !important;
  background-size: auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}


.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="cuisines"][value="british"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="cuisines"][value="british"]) > label::before {
  content: "🇬🇧" !important;
}


.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="cuisines"][value="mediterranean"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="cuisines"][value="mediterranean"]) > label::before {
  content: "🌊" !important;
}


.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="cuisines"][value="italian"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="cuisines"][value="italian"]) > label::before {
  content: "🇮🇹" !important;
}


.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="cuisines"][value="indian"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="cuisines"][value="indian"]) > label::before {
  content: "🇮🇳" !important;
}


.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="cuisines"][value="chinese"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="cuisines"][value="chinese"]) > label::before {
  content: "🇨🇳" !important;
}


.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="cuisines"][value="thai"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="cuisines"][value="thai"]) > label::before {
  content: "🇹🇭" !important;
}


.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="cuisines"][value="mexican"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="cuisines"][value="mexican"]) > label::before {
  content: "🇲🇽" !important;
}


.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="cuisines"][value="japanese"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="cuisines"][value="japanese"]) > label::before {
  content: "🇯🇵" !important;
}


.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="cuisines"][value="greek"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="cuisines"][value="greek"]) > label::before {
  content: "🇬🇷" !important;
}


.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="cuisines"][value="middle_eastern"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="cuisines"][value="middle_eastern"]) > label::before {
  content: "🇦🇪" !important;
}


.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="cuisines"][value="korean"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="cuisines"][value="korean"]) > label::before {
  content: "🇰🇷" !important;
}


.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="cuisines"][value="caribbean"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="cuisines"][value="caribbean"]) > label::before {
  content: "🇯🇲" !important;
}


@media (max-width: 430px) {
  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="cuisines"]) > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="cuisines"]) > label {
    padding-left: 76px !important;
  }

  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="cuisines"]) > label::before,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="cuisines"]) > label::before {
    left: 18px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    font-size: 23px !important;
  }
}

/* =========================================================
   FINAL CUISINE FLAG FIX
   Targets the exact Drupal Webform checkbox names from the YAML:
   cuisines[british], cuisines[italian], cuisines[middle_eastern], etc.
   This removes the old generic dot icons on the cuisine question only.
   ========================================================= */

.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="cuisines["]) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="cuisines["]) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-type-checkbox:has(input[name^="cuisines["]) > label {
  position: relative !important;
  padding-left: 82px !important;
  overflow: hidden !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="cuisines["]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="cuisines["]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-type-checkbox:has(input[name^="cuisines["]) > label::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 22px !important;
  width: 46px !important;
  height: 46px !important;
  transform: translateY(-50%) !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 15px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(244,248,255,.9)) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .08), inset 0 0 0 1px rgba(210, 221, 235, .8) !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
  font-size: 25px !important;
  line-height: 1 !important;
  text-align: center !important;
  color: initial !important;
  background-image: none !important;
  background-size: auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="cuisines["]) > label::after,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="cuisines["]) > label::after,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-type-checkbox:has(input[name^="cuisines["]) > label::after {
  right: 22px !important;
}


.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name="cuisines[british]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name="cuisines[british]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-type-checkbox:has(input[name="cuisines[british]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[id*="cuisines-british"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[id*="cuisines-british"]) > label::before {
  content: "🇬🇧" !important;
}


.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name="cuisines[mediterranean]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name="cuisines[mediterranean]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-type-checkbox:has(input[name="cuisines[mediterranean]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[id*="cuisines-mediterranean"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[id*="cuisines-mediterranean"]) > label::before {
  content: "🌊" !important;
}


.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name="cuisines[italian]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name="cuisines[italian]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-type-checkbox:has(input[name="cuisines[italian]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[id*="cuisines-italian"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[id*="cuisines-italian"]) > label::before {
  content: "🇮🇹" !important;
}


.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name="cuisines[indian]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name="cuisines[indian]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-type-checkbox:has(input[name="cuisines[indian]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[id*="cuisines-indian"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[id*="cuisines-indian"]) > label::before {
  content: "🇮🇳" !important;
}


.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name="cuisines[chinese]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name="cuisines[chinese]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-type-checkbox:has(input[name="cuisines[chinese]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[id*="cuisines-chinese"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[id*="cuisines-chinese"]) > label::before {
  content: "🇨🇳" !important;
}


.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name="cuisines[thai]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name="cuisines[thai]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-type-checkbox:has(input[name="cuisines[thai]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[id*="cuisines-thai"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[id*="cuisines-thai"]) > label::before {
  content: "🇹🇭" !important;
}


.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name="cuisines[mexican]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name="cuisines[mexican]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-type-checkbox:has(input[name="cuisines[mexican]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[id*="cuisines-mexican"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[id*="cuisines-mexican"]) > label::before {
  content: "🇲🇽" !important;
}


.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name="cuisines[japanese]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name="cuisines[japanese]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-type-checkbox:has(input[name="cuisines[japanese]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[id*="cuisines-japanese"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[id*="cuisines-japanese"]) > label::before {
  content: "🇯🇵" !important;
}


.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name="cuisines[greek]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name="cuisines[greek]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-type-checkbox:has(input[name="cuisines[greek]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[id*="cuisines-greek"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[id*="cuisines-greek"]) > label::before {
  content: "🇬🇷" !important;
}


.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name="cuisines[middle_eastern]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name="cuisines[middle_eastern]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-type-checkbox:has(input[name="cuisines[middle_eastern]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[id*="cuisines-middle-eastern"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[id*="cuisines-middle-eastern"]) > label::before {
  content: "🌙" !important;
}


.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name="cuisines[korean]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name="cuisines[korean]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-type-checkbox:has(input[name="cuisines[korean]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[id*="cuisines-korean"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[id*="cuisines-korean"]) > label::before {
  content: "🇰🇷" !important;
}


.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name="cuisines[caribbean]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name="cuisines[caribbean]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-type-checkbox:has(input[name="cuisines[caribbean]"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[id*="cuisines-caribbean"]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[id*="cuisines-caribbean"]) > label::before {
  content: "🏝️" !important;
}


@media (max-width: 430px) {
  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="cuisines["]) > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="cuisines["]) > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-type-checkbox:has(input[name^="cuisines["]) > label {
    padding-left: 76px !important;
  }

  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="cuisines["]) > label::before,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="cuisines["]) > label::before,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-type-checkbox:has(input[name^="cuisines["]) > label::before {
    left: 18px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    font-size: 23px !important;
  }

  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-item:has(input[name^="cuisines["]) > label::after,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .js-form-item:has(input[name^="cuisines["]) > label::after,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--chips .form-type-checkbox:has(input[name^="cuisines["]) > label::after {
    right: 18px !important;
  }
}


/* Diet icon image variables reused by checkbox fix */
.ai-premium-form {
  --tfc-diet-none-icon: url("/modules/ai_dashboard/images/onboarding-icons/cuisines/diet-none.png");
  --tfc-diet-vegetarian-icon: url("/modules/ai_dashboard/images/onboarding-icons/cuisines/diet-vegetarian.png");
  --tfc-diet-vegan-icon: url("/modules/ai_dashboard/images/onboarding-icons/cuisines/diet-vegan.png");
  --tfc-diet-pescatarian-icon: url("/modules/ai_dashboard/images/onboarding-icons/cuisines/diet-pescatarian.png");
  --tfc-diet-halal-icon: url("/modules/ai_dashboard/images/onboarding-icons/cuisines/diet-halal.png");
  --tfc-diet-kosher-icon: url("/modules/ai_dashboard/images/onboarding-icons/cuisines/diet-kosher.png");
  --tfc-diet-low-carb-icon: url("/modules/ai_dashboard/images/onboarding-icons/cuisines/diet-low-carb.png");
  --tfc-diet-keto-icon: url("/modules/ai_dashboard/images/onboarding-icons/cuisines/diet-keto.png");
  --tfc-diet-low-fodmap-icon: url("/modules/ai_dashboard/images/onboarding-icons/cuisines/diet-low-fodmap.png");
  --tfc-diet-gluten-free-icon: url("/modules/ai_dashboard/images/onboarding-icons/cuisines/diet-gluten-free.png");
  --tfc-diet-dairy-free-icon: url("/modules/ai_dashboard/images/onboarding-icons/cuisines/diet-dairy-free.png");
}

/* =========================================================
   DIET PATTERN CHECKBOX ICON FIX
   Use after changing Diet pattern from radios to checkboxes.

   Targets Drupal/Webform checkbox names:
   diet[none], diet[vegetarian], diet[vegan], diet[pescatarian],
   diet[halal], diet[kosher], diet[low_carb], diet[keto],
   diet[low_fodmap], diet[gluten_free], diet[dairy_free]
   ========================================================= */

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name^="diet["]) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name^="diet["]) > label,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-type-checkbox:has(input[name^="diet["]) > label,
.ai-premium-form .form-item:has(input[name^="diet["]) > label,
.ai-premium-form .form-type-checkbox:has(input[name^="diet["]) > label,
.ai-premium-form .js-form-type-checkbox:has(input[name^="diet["]) > label {
  position: relative !important;
  padding-left: 78px !important;
}

.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name^="diet["]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name^="diet["]) > label::before,
.ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-type-checkbox:has(input[name^="diet["]) > label::before,
.ai-premium-form .form-item:has(input[name^="diet["]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[name^="diet["]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[name^="diet["]) > label::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 20px !important;
  width: 44px !important;
  height: 44px !important;
  transform: translateY(-50%) !important;
  border-radius: 14px !important;
  background-color: transparent !important;
  background-size: 44px 44px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
}

/* No specific diet */
.ai-premium-form .form-item:has(input[name="diet[none]"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[name="diet[none]"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[name="diet[none]"]) > label::before,
.ai-premium-form .form-item:has(input[name^="diet["][value="none"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[name^="diet["][value="none"]) > label::before {
  background-image: var(--tfc-diet-none-icon, none) !important;
}

/* Vegetarian */
.ai-premium-form .form-item:has(input[name="diet[vegetarian]"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[name="diet[vegetarian]"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[name="diet[vegetarian]"]) > label::before,
.ai-premium-form .form-item:has(input[name^="diet["][value="vegetarian"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[name^="diet["][value="vegetarian"]) > label::before {
  background-image: var(--tfc-diet-vegetarian-icon, none) !important;
}

/* Vegan */
.ai-premium-form .form-item:has(input[name="diet[vegan]"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[name="diet[vegan]"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[name="diet[vegan]"]) > label::before,
.ai-premium-form .form-item:has(input[name^="diet["][value="vegan"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[name^="diet["][value="vegan"]) > label::before {
  background-image: var(--tfc-diet-vegan-icon, none) !important;
}

/* Pescatarian */
.ai-premium-form .form-item:has(input[name="diet[pescatarian]"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[name="diet[pescatarian]"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[name="diet[pescatarian]"]) > label::before,
.ai-premium-form .form-item:has(input[name^="diet["][value="pescatarian"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[name^="diet["][value="pescatarian"]) > label::before {
  background-image: var(--tfc-diet-pescatarian-icon, none) !important;
}

/* Halal */
.ai-premium-form .form-item:has(input[name="diet[halal]"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[name="diet[halal]"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[name="diet[halal]"]) > label::before,
.ai-premium-form .form-item:has(input[name^="diet["][value="halal"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[name^="diet["][value="halal"]) > label::before {
  background-image: var(--tfc-diet-halal-icon, none) !important;
}

/* Kosher */
.ai-premium-form .form-item:has(input[name="diet[kosher]"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[name="diet[kosher]"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[name="diet[kosher]"]) > label::before,
.ai-premium-form .form-item:has(input[name^="diet["][value="kosher"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[name^="diet["][value="kosher"]) > label::before {
  background-image: var(--tfc-diet-kosher-icon, none) !important;
}

/* Low-carb */
.ai-premium-form .form-item:has(input[name="diet[low_carb]"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[name="diet[low_carb]"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[name="diet[low_carb]"]) > label::before,
.ai-premium-form .form-item:has(input[name^="diet["][value="low_carb"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[name^="diet["][value="low_carb"]) > label::before {
  background-image: var(--tfc-diet-low-carb-icon, none) !important;
}

/* Keto */
.ai-premium-form .form-item:has(input[name="diet[keto]"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[name="diet[keto]"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[name="diet[keto]"]) > label::before,
.ai-premium-form .form-item:has(input[name^="diet["][value="keto"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[name^="diet["][value="keto"]) > label::before {
  background-image: var(--tfc-diet-keto-icon, none) !important;
}

/* Low-FODMAP */
.ai-premium-form .form-item:has(input[name="diet[low_fodmap]"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[name="diet[low_fodmap]"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[name="diet[low_fodmap]"]) > label::before,
.ai-premium-form .form-item:has(input[name^="diet["][value="low_fodmap"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[name^="diet["][value="low_fodmap"]) > label::before {
  background-image: var(--tfc-diet-low-fodmap-icon, none) !important;
}

/* Gluten-free */
.ai-premium-form .form-item:has(input[name="diet[gluten_free]"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[name="diet[gluten_free]"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[name="diet[gluten_free]"]) > label::before,
.ai-premium-form .form-item:has(input[name^="diet["][value="gluten_free"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[name^="diet["][value="gluten_free"]) > label::before {
  background-image: var(--tfc-diet-gluten-free-icon, none) !important;
}

/* Dairy-free */
.ai-premium-form .form-item:has(input[name="diet[dairy_free]"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[name="diet[dairy_free]"]) > label::before,
.ai-premium-form .js-form-type-checkbox:has(input[name="diet[dairy_free]"]) > label::before,
.ai-premium-form .form-item:has(input[name^="diet["][value="dairy_free"]) > label::before,
.ai-premium-form .form-type-checkbox:has(input[name^="diet["][value="dairy_free"]) > label::before {
  background-image: var(--tfc-diet-dairy-free-icon, none) !important;
}

@media (max-width: 430px) {
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name^="diet["]) > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name^="diet["]) > label,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-type-checkbox:has(input[name^="diet["]) > label,
  .ai-premium-form .form-item:has(input[name^="diet["]) > label,
  .ai-premium-form .form-type-checkbox:has(input[name^="diet["]) > label,
  .ai-premium-form .js-form-type-checkbox:has(input[name^="diet["]) > label {
    padding-left: 72px !important;
  }

  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-item:has(input[name^="diet["]) > label::before,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .js-form-item:has(input[name^="diet["]) > label::before,
  .ai-premium-form.ai-quiz-structured .ai-choice-group--tiles .form-type-checkbox:has(input[name^="diet["]) > label::before,
  .ai-premium-form .form-item:has(input[name^="diet["]) > label::before,
  .ai-premium-form .form-type-checkbox:has(input[name^="diet["]) > label::before,
  .ai-premium-form .js-form-type-checkbox:has(input[name^="diet["]) > label::before {
    left: 18px !important;
    width: 40px !important;
    height: 40px !important;
    background-size: 40px 40px !important;
  }
}

/* =========================================================
   FOOD BUDGET ICON FIX — final override
   This sits at the very bottom so generic input[value="high"]
   rules for activity/stress cannot steal the Premium/Flexible icon.
   YAML field/value targets:
   grocery_budget = low | medium | high
   ========================================================= */

.ai-premium-form .ai-choice-group .form-item:has(input[name="grocery_budget"]) label.option,
.ai-premium-form .ai-choice-group .js-form-item:has(input[name="grocery_budget"]) label.option,
.ai-premium-form .ai-choice-group .form-type-radio:has(input[name="grocery_budget"]) label.option,
.ai-premium-form .ai-choice-group .js-form-type-radio:has(input[name="grocery_budget"]) label.option,
.ai-premium-form .ai-choice-group .form-item:has(input[id*="grocery-budget"]) label.option,
.ai-premium-form .ai-choice-group .js-form-item:has(input[id*="grocery-budget"]) label.option,
.ai-premium-form .ai-choice-group .form-type-radio:has(input[id*="grocery-budget"]) label.option,
.ai-premium-form .ai-choice-group .js-form-type-radio:has(input[id*="grocery-budget"]) label.option,
.ai-premium-form .ai-choice-group .form-item:has(input[name="grocery_budget"]) > label,
.ai-premium-form .ai-choice-group .js-form-item:has(input[name="grocery_budget"]) > label,
.ai-premium-form .ai-choice-group .form-type-radio:has(input[name="grocery_budget"]) > label,
.ai-premium-form .ai-choice-group .js-form-type-radio:has(input[name="grocery_budget"]) > label {
  position: relative !important;
  padding-left: 78px !important;
}

.ai-premium-form .ai-choice-group .form-item:has(input[name="grocery_budget"]) label.option::before,
.ai-premium-form .ai-choice-group .js-form-item:has(input[name="grocery_budget"]) label.option::before,
.ai-premium-form .ai-choice-group .form-type-radio:has(input[name="grocery_budget"]) label.option::before,
.ai-premium-form .ai-choice-group .js-form-type-radio:has(input[name="grocery_budget"]) label.option::before,
.ai-premium-form .ai-choice-group .form-item:has(input[id*="grocery-budget"]) label.option::before,
.ai-premium-form .ai-choice-group .js-form-item:has(input[id*="grocery-budget"]) label.option::before,
.ai-premium-form .ai-choice-group .form-type-radio:has(input[id*="grocery-budget"]) label.option::before,
.ai-premium-form .ai-choice-group .js-form-type-radio:has(input[id*="grocery-budget"]) label.option::before,
.ai-premium-form .ai-choice-group .form-item:has(input[name="grocery_budget"]) > label::before,
.ai-premium-form .ai-choice-group .js-form-item:has(input[name="grocery_budget"]) > label::before,
.ai-premium-form .ai-choice-group .form-type-radio:has(input[name="grocery_budget"]) > label::before,
.ai-premium-form .ai-choice-group .js-form-type-radio:has(input[name="grocery_budget"]) > label::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 20px !important;
  width: 44px !important;
  height: 44px !important;
  transform: translateY(-50%) !important;
  border-radius: 14px !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 44px 44px !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
}

/* Budget-friendly */
.ai-premium-form .ai-choice-group .form-item:has(input[name="grocery_budget"][value="low"]) label.option::before,
.ai-premium-form .ai-choice-group .js-form-item:has(input[name="grocery_budget"][value="low"]) label.option::before,
.ai-premium-form .ai-choice-group .form-type-radio:has(input[name="grocery_budget"][value="low"]) label.option::before,
.ai-premium-form .ai-choice-group .js-form-type-radio:has(input[name="grocery_budget"][value="low"]) label.option::before,
.ai-premium-form .ai-choice-group .form-item:has(input[id*="grocery-budget-low"]) label.option::before,
.ai-premium-form .ai-choice-group .form-item:has(input[name="grocery_budget"][value="low"]) > label::before,
.ai-premium-form .ai-choice-group .js-form-item:has(input[name="grocery_budget"][value="low"]) > label::before,
.ai-premium-form .ai-choice-group .form-type-radio:has(input[name="grocery_budget"][value="low"]) > label::before,
.ai-premium-form .ai-choice-group .js-form-type-radio:has(input[name="grocery_budget"][value="low"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/food-budget/budget-friendly.png") !important;
}

/* Standard */
.ai-premium-form .ai-choice-group .form-item:has(input[name="grocery_budget"][value="medium"]) label.option::before,
.ai-premium-form .ai-choice-group .js-form-item:has(input[name="grocery_budget"][value="medium"]) label.option::before,
.ai-premium-form .ai-choice-group .form-type-radio:has(input[name="grocery_budget"][value="medium"]) label.option::before,
.ai-premium-form .ai-choice-group .js-form-type-radio:has(input[name="grocery_budget"][value="medium"]) label.option::before,
.ai-premium-form .ai-choice-group .form-item:has(input[id*="grocery-budget-medium"]) label.option::before,
.ai-premium-form .ai-choice-group .form-item:has(input[name="grocery_budget"][value="medium"]) > label::before,
.ai-premium-form .ai-choice-group .js-form-item:has(input[name="grocery_budget"][value="medium"]) > label::before,
.ai-premium-form .ai-choice-group .form-type-radio:has(input[name="grocery_budget"][value="medium"]) > label::before,
.ai-premium-form .ai-choice-group .js-form-type-radio:has(input[name="grocery_budget"][value="medium"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/food-budget/standard.png") !important;
}

/* Premium / flexible */
.ai-premium-form .ai-choice-group .form-item:has(input[name="grocery_budget"][value="high"]) label.option::before,
.ai-premium-form .ai-choice-group .js-form-item:has(input[name="grocery_budget"][value="high"]) label.option::before,
.ai-premium-form .ai-choice-group .form-type-radio:has(input[name="grocery_budget"][value="high"]) label.option::before,
.ai-premium-form .ai-choice-group .js-form-type-radio:has(input[name="grocery_budget"][value="high"]) label.option::before,
.ai-premium-form .ai-choice-group .form-item:has(input[id*="grocery-budget-high"]) label.option::before,
.ai-premium-form .ai-choice-group .form-item:has(input[name="grocery_budget"][value="high"]) > label::before,
.ai-premium-form .ai-choice-group .js-form-item:has(input[name="grocery_budget"][value="high"]) > label::before,
.ai-premium-form .ai-choice-group .form-type-radio:has(input[name="grocery_budget"][value="high"]) > label::before,
.ai-premium-form .ai-choice-group .js-form-type-radio:has(input[name="grocery_budget"][value="high"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/food-budget/premium-flexible.png") !important;
}

@media (max-width: 430px) {
  .ai-premium-form .ai-choice-group .form-item:has(input[name="grocery_budget"]) label.option,
  .ai-premium-form .ai-choice-group .js-form-item:has(input[name="grocery_budget"]) label.option,
  .ai-premium-form .ai-choice-group .form-type-radio:has(input[name="grocery_budget"]) label.option,
  .ai-premium-form .ai-choice-group .js-form-type-radio:has(input[name="grocery_budget"]) label.option,
  .ai-premium-form .ai-choice-group .form-item:has(input[id*="grocery-budget"]) label.option,
  .ai-premium-form .ai-choice-group .js-form-item:has(input[id*="grocery-budget"]) label.option,
  .ai-premium-form .ai-choice-group .form-type-radio:has(input[id*="grocery-budget"]) label.option,
  .ai-premium-form .ai-choice-group .js-form-type-radio:has(input[id*="grocery-budget"]) label.option,
  .ai-premium-form .ai-choice-group .form-item:has(input[name="grocery_budget"]) > label,
  .ai-premium-form .ai-choice-group .js-form-item:has(input[name="grocery_budget"]) > label,
  .ai-premium-form .ai-choice-group .form-type-radio:has(input[name="grocery_budget"]) > label,
  .ai-premium-form .ai-choice-group .js-form-type-radio:has(input[name="grocery_budget"]) > label {
    padding-left: 72px !important;
  }

  .ai-premium-form .ai-choice-group .form-item:has(input[name="grocery_budget"]) label.option::before,
  .ai-premium-form .ai-choice-group .js-form-item:has(input[name="grocery_budget"]) label.option::before,
  .ai-premium-form .ai-choice-group .form-type-radio:has(input[name="grocery_budget"]) label.option::before,
  .ai-premium-form .ai-choice-group .js-form-type-radio:has(input[name="grocery_budget"]) label.option::before,
  .ai-premium-form .ai-choice-group .form-item:has(input[id*="grocery-budget"]) label.option::before,
  .ai-premium-form .ai-choice-group .js-form-item:has(input[id*="grocery-budget"]) label.option::before,
  .ai-premium-form .ai-choice-group .form-type-radio:has(input[id*="grocery-budget"]) label.option::before,
  .ai-premium-form .ai-choice-group .js-form-type-radio:has(input[id*="grocery-budget"]) label.option::before,
  .ai-premium-form .ai-choice-group .form-item:has(input[name="grocery_budget"]) > label::before,
  .ai-premium-form .ai-choice-group .js-form-item:has(input[name="grocery_budget"]) > label::before,
  .ai-premium-form .ai-choice-group .form-type-radio:has(input[name="grocery_budget"]) > label::before,
  .ai-premium-form .ai-choice-group .js-form-type-radio:has(input[name="grocery_budget"]) > label::before {
    left: 18px !important;
    width: 40px !important;
    height: 40px !important;
    background-size: 40px 40px !important;
  }
}

/* =========================================================
   WORK PATTERN + TRAINING TIME ICONS
   YAML fields:
   work_pattern: standard, shift, variable
   training_time_pref: morning, midday, evening, flexible
   ========================================================= */

.ai-premium-form .form-item:has(input[name="work_pattern"]) > label,
.ai-premium-form .form-type-radio:has(input[name="work_pattern"]) > label,
.ai-premium-form .js-form-type-radio:has(input[name="work_pattern"]) > label,
.ai-premium-form .form-item:has(input[name="training_time_pref"]) > label,
.ai-premium-form .form-type-radio:has(input[name="training_time_pref"]) > label,
.ai-premium-form .js-form-type-radio:has(input[name="training_time_pref"]) > label {
  padding-left: 78px !important;
}

.ai-premium-form .form-item:has(input[name="work_pattern"]) > label::before,
.ai-premium-form .form-type-radio:has(input[name="work_pattern"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[name="work_pattern"]) > label::before,
.ai-premium-form .form-item:has(input[name="training_time_pref"]) > label::before,
.ai-premium-form .form-type-radio:has(input[name="training_time_pref"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[name="training_time_pref"]) > label::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 18px !important;
  width: 44px !important;
  height: 44px !important;
  transform: translateY(-50%) !important;
  border-radius: 14px !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 44px 44px !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
}

/* Work pattern */
.ai-premium-form .form-item:has(input[name="work_pattern"][value="standard"]) > label::before,
.ai-premium-form .form-type-radio:has(input[name="work_pattern"][value="standard"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[name="work_pattern"][value="standard"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/work-pattern/standard-daytime.png") !important;
}

.ai-premium-form .form-item:has(input[name="work_pattern"][value="shift"]) > label::before,
.ai-premium-form .form-type-radio:has(input[name="work_pattern"][value="shift"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[name="work_pattern"][value="shift"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/work-pattern/shift-work-nights.png") !important;
}

.ai-premium-form .form-item:has(input[name="work_pattern"][value="variable"]) > label::before,
.ai-premium-form .form-type-radio:has(input[name="work_pattern"][value="variable"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[name="work_pattern"][value="variable"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/work-pattern/variable-self-employed.png") !important;
}

/* Preferred training time */
.ai-premium-form .form-item:has(input[name="training_time_pref"][value="morning"]) > label::before,
.ai-premium-form .form-type-radio:has(input[name="training_time_pref"][value="morning"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[name="training_time_pref"][value="morning"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/training-time/morning.png") !important;
}

.ai-premium-form .form-item:has(input[name="training_time_pref"][value="midday"]) > label::before,
.ai-premium-form .form-type-radio:has(input[name="training_time_pref"][value="midday"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[name="training_time_pref"][value="midday"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/training-time/midday.png") !important;
}

.ai-premium-form .form-item:has(input[name="training_time_pref"][value="evening"]) > label::before,
.ai-premium-form .form-type-radio:has(input[name="training_time_pref"][value="evening"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[name="training_time_pref"][value="evening"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/training-time/evening.png") !important;
}

.ai-premium-form .form-item:has(input[name="training_time_pref"][value="flexible"]) > label::before,
.ai-premium-form .form-type-radio:has(input[name="training_time_pref"][value="flexible"]) > label::before,
.ai-premium-form .js-form-type-radio:has(input[name="training_time_pref"][value="flexible"]) > label::before {
  background-image: url("/modules/ai_dashboard/images/onboarding-icons/training-time/flexible.png") !important;
}

@media (max-width: 430px) {
  .ai-premium-form .form-item:has(input[name="work_pattern"]) > label,
  .ai-premium-form .form-type-radio:has(input[name="work_pattern"]) > label,
  .ai-premium-form .js-form-type-radio:has(input[name="work_pattern"]) > label,
  .ai-premium-form .form-item:has(input[name="training_time_pref"]) > label,
  .ai-premium-form .form-type-radio:has(input[name="training_time_pref"]) > label,
  .ai-premium-form .js-form-type-radio:has(input[name="training_time_pref"]) > label {
    padding-left: 72px !important;
  }

  .ai-premium-form .form-item:has(input[name="work_pattern"]) > label::before,
  .ai-premium-form .form-type-radio:has(input[name="work_pattern"]) > label::before,
  .ai-premium-form .js-form-type-radio:has(input[name="work_pattern"]) > label::before,
  .ai-premium-form .form-item:has(input[name="training_time_pref"]) > label::before,
  .ai-premium-form .form-type-radio:has(input[name="training_time_pref"]) > label::before,
  .ai-premium-form .js-form-type-radio:has(input[name="training_time_pref"]) > label::before {
    left: 17px !important;
    width: 40px !important;
    height: 40px !important;
    background-size: 40px 40px !important;
  }
}

/* === TFC MINIMAL FIX: hide choice ticks/circles ===
   Added to the latest icon CSS file.
   This does not change icon paths, card layout, fonts, or spacing.
   It only hides the right-side checkbox/radio circles/ticks so they stop covering text.
   ========================================================= */

.ai-premium-form .ai-choice-group input[type="radio"] + label::after,
.ai-premium-form .ai-choice-group input[type="checkbox"] + label::after,
.ai-premium-form .ai-choice-group .form-type-radio > label::after,
.ai-premium-form .ai-choice-group .form-type-checkbox > label::after,
.ai-premium-form .ai-choice-group .js-form-type-radio > label::after,
.ai-premium-form .ai-choice-group .js-form-type-checkbox > label::after,
.ai-premium-form .ai-choice-group .form-item > label::after,
.ai-premium-form .ai-choice-group label.option::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Slightly reduce the now-unused right padding, without touching icon spacing */
.ai-premium-form .ai-choice-group input[type="radio"] + label,
.ai-premium-form .ai-choice-group input[type="checkbox"] + label {
  padding-right: 16px !important;
}

/* =========================================================
   DIET PATTERN — compact 2-column grid like Allergies
   Added to make the Diet pattern step use two columns even when
   the YAML wrapper still uses ai-choice-group--tiles.
   ========================================================= */

.ai-premium-form .form-item-diet .form-checkboxes,
.ai-premium-form .ai-field-diet .form-checkboxes,
.ai-premium-form .js-form-item-diet .form-checkboxes,
.ai-premium-form [data-drupal-selector="edit-diet"] .form-checkboxes {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.ai-premium-form .form-item-diet input[type="checkbox"] + label,
.ai-premium-form .ai-field-diet input[type="checkbox"] + label,
.ai-premium-form .js-form-item-diet input[type="checkbox"] + label,
.ai-premium-form [data-drupal-selector="edit-diet"] input[type="checkbox"] + label,
.ai-premium-form .form-item-diet .form-type-checkbox > label,
.ai-premium-form .ai-field-diet .form-type-checkbox > label,
.ai-premium-form .js-form-item-diet .form-type-checkbox > label,
.ai-premium-form [data-drupal-selector="edit-diet"] .form-type-checkbox > label {
  min-height: 42px !important;
  padding: 8px 16px 8px 37px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  line-height: 1.12 !important;
}

.ai-premium-form .form-item-diet input[type="checkbox"] + label::before,
.ai-premium-form .ai-field-diet input[type="checkbox"] + label::before,
.ai-premium-form .js-form-item-diet input[type="checkbox"] + label::before,
.ai-premium-form [data-drupal-selector="edit-diet"] input[type="checkbox"] + label::before,
.ai-premium-form .form-item-diet .form-type-checkbox > label::before,
.ai-premium-form .ai-field-diet .form-type-checkbox > label::before,
.ai-premium-form .js-form-item-diet .form-type-checkbox > label::before,
.ai-premium-form [data-drupal-selector="edit-diet"] .form-type-checkbox > label::before {
  width: 22px !important;
  height: 22px !important;
  left: 8px !important;
  font-size: 12px !important;
  background-size: 14px 14px !important;
}

@media (max-width: 355px) {
  .ai-premium-form .form-item-diet .form-checkboxes,
  .ai-premium-form .ai-field-diet .form-checkboxes,
  .ai-premium-form .js-form-item-diet .form-checkboxes,
  .ai-premium-form [data-drupal-selector="edit-diet"] .form-checkboxes {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   TFC ICON SIZE FIX — 40px onboarding icons on all screen sizes
   Added after all existing icon rules so it overrides older
   background-size: 15px/14px settings without changing paths.
   ========================================================= */

/* Give non-day choice labels enough left padding for 40px icons */
.ai-premium-form .ai-choice-group .form-type-radio:not(.form-item-days-per-week) > label,
.ai-premium-form .ai-choice-group .form-type-checkbox:not(.form-item-days-per-week) > label,
.ai-premium-form .ai-choice-group .js-form-type-radio:not(.form-item-days-per-week) > label,
.ai-premium-form .ai-choice-group .js-form-type-checkbox:not(.form-item-days-per-week) > label,
.ai-premium-form .ai-choice-group .form-item:not(.form-item-days-per-week) > label,
.ai-premium-form .ai-choice-group label.option {
  padding-left: 68px !important;
}

/* Make the icon bubble/image 40px across the onboarding form */
.ai-premium-form .ai-choice-group .form-type-radio:not(.form-item-days-per-week) > label::before,
.ai-premium-form .ai-choice-group .form-type-checkbox:not(.form-item-days-per-week) > label::before,
.ai-premium-form .ai-choice-group .js-form-type-radio:not(.form-item-days-per-week) > label::before,
.ai-premium-form .ai-choice-group .js-form-type-checkbox:not(.form-item-days-per-week) > label::before,
.ai-premium-form .ai-choice-group .form-item:not(.form-item-days-per-week) > label::before,
.ai-premium-form .ai-choice-group label.option::before {
  width: 40px !important;
  height: 40px !important;
  left: 14px !important;
  background-size: 40px 40px !important;
}

/* Override every individual PNG rule that previously forced 15px icons */
.ai-premium-form .form-item:not(.form-item-days-per-week):has(input) > label::before,
.ai-premium-form .form-type-radio:not(.form-item-days-per-week):has(input) > label::before,
.ai-premium-form .form-type-checkbox:not(.form-item-days-per-week):has(input) > label::before,
.ai-premium-form .js-form-type-radio:not(.form-item-days-per-week):has(input) > label::before,
.ai-premium-form .js-form-type-checkbox:not(.form-item-days-per-week):has(input) > label::before {
  width: 40px !important;
  height: 40px !important;
  left: 14px !important;
  background-size: 40px 40px !important;
}

/* Keep the compact diet/allergy cards readable with the larger icons */
.ai-premium-form .form-item-diet input[type="checkbox"] + label,
.ai-premium-form .ai-field-diet input[type="checkbox"] + label,
.ai-premium-form .js-form-item-diet input[type="checkbox"] + label,
.ai-premium-form [data-drupal-selector="edit-diet"] input[type="checkbox"] + label,
.ai-premium-form .form-item-diet .form-type-checkbox > label,
.ai-premium-form .ai-field-diet .form-type-checkbox > label,
.ai-premium-form .js-form-item-diet .form-type-checkbox > label,
.ai-premium-form [data-drupal-selector="edit-diet"] .form-type-checkbox > label,
.ai-premium-form .form-item-allergens input[type="checkbox"] + label,
.ai-premium-form .ai-field-allergens input[type="checkbox"] + label,
.ai-premium-form .js-form-item-allergens input[type="checkbox"] + label,
.ai-premium-form [data-drupal-selector="edit-allergens"] input[type="checkbox"] + label,
.ai-premium-form .form-item-allergens .form-type-checkbox > label,
.ai-premium-form .ai-field-allergens .form-type-checkbox > label,
.ai-premium-form .js-form-item-allergens .form-type-checkbox > label,
.ai-premium-form [data-drupal-selector="edit-allergens"] .form-type-checkbox > label {
  min-height: 64px !important;
  padding-left: 64px !important;
}

.ai-premium-form .form-item-diet input[type="checkbox"] + label::before,
.ai-premium-form .ai-field-diet input[type="checkbox"] + label::before,
.ai-premium-form .js-form-item-diet input[type="checkbox"] + label::before,
.ai-premium-form [data-drupal-selector="edit-diet"] input[type="checkbox"] + label::before,
.ai-premium-form .form-item-diet .form-type-checkbox > label::before,
.ai-premium-form .ai-field-diet .form-type-checkbox > label::before,
.ai-premium-form .js-form-item-diet .form-type-checkbox > label::before,
.ai-premium-form [data-drupal-selector="edit-diet"] .form-type-checkbox > label::before,
.ai-premium-form .form-item-allergens input[type="checkbox"] + label::before,
.ai-premium-form .ai-field-allergens input[type="checkbox"] + label::before,
.ai-premium-form .js-form-item-allergens input[type="checkbox"] + label::before,
.ai-premium-form [data-drupal-selector="edit-allergens"] input[type="checkbox"] + label::before,
.ai-premium-form .form-item-allergens .form-type-checkbox > label::before,
.ai-premium-form .ai-field-allergens .form-type-checkbox > label::before,
.ai-premium-form .js-form-item-allergens .form-type-checkbox > label::before,
.ai-premium-form [data-drupal-selector="edit-allergens"] .form-type-checkbox > label::before {
  width: 40px !important;
  height: 40px !important;
  left: 14px !important;
  background-size: 40px 40px !important;
}