/* Tante Tas Calculator – nieuwe tt-* stijlen */

:root {
  --coral: #D85A30;
  --coral-light: #FAECE7;
  --coral-mid: #F0997B;
  --coral-dark: #993C1D;
  --coral-deep: #712B13;
  --text: #1a1714;
  --text-muted: #6b6560;
  --text-hint: #a09890;
  --border-inner: rgba(26,23,20,0.12);
  --border-mid: rgba(26,23,20,0.20);
  --radius: 20px;
  --radius-sm: 10px;
}

.tt-page-wrap {
  font-family: 'Mona Sans', 'DM Sans', sans-serif;
  color: var(--text);
  /* dvh houdt rekening met de balken van de mobiele browser die in- en uitschuiven.
     Met vh springt de hoogte tijdens het scrollen. Vh blijft als terugval staan
     voor browsers die dvh niet kennen. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2.5rem 1rem 5rem;
  position: relative;

  /* De sierbollen staan tot 200 px buiten de rand (zie .tt-blob-2, right: -200px).
     Met overflow: visible tellen die mee voor de breedte van de pagina, en dan kun
     je op een telefoon zijwaarts vegen terwijl de inhoud wegschuift. Met clip
     wordt dat afgesneden zonder dat dit element een eigen schuifgebied wordt,
     wat bij overflow: hidden wel gebeurt en position: sticky zou breken. */
  overflow-x: clip;
  background: #f0e4da;
}

.tt-page-wrap * { box-sizing: border-box; margin: 0; padding: 0; }

.tt-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.tt-bg::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 180px;
  background: linear-gradient(to bottom, transparent, #ffffff);
  pointer-events: none;
}

.tt-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
  transition: transform 0.15s ease-out;
}

.tt-blob-1 { width: 650px; height: 650px; background: #F0997B; opacity: 0.6; top: -160px; left: -180px; }
.tt-blob-2 { width: 520px; height: 520px; background: #D85A30; opacity: 0.25; top: 25%; right: -200px; }
.tt-blob-3 { width: 420px; height: 420px; background: #fde8dc; opacity: 0.8; bottom: -100px; left: 15%; }
.tt-blob-4 { width: 280px; height: 280px; background: #993C1D; opacity: 0.18; top: 55%; left: -60px; }

.tt-container {
  width: 100%;
  max-width: 560px;
  position: relative;
  z-index: 1;
}

.tt-header {
  text-align: center;
  margin-bottom: 2rem;
  animation: fadeUp 0.7s ease both;
}

.tt-header img {
  height: 72px; width: auto;
  display: block; margin: 0 auto;
  filter: drop-shadow(0 2px 12px rgba(216,90,48,0.2));
}

.tt-progress-wrap { margin-bottom: 1.5rem; animation: fadeUp 0.7s 0.06s ease both; }

.tt-progress-meta {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
}

.tt-step-label { font-size: 12px; color: rgba(26,23,20,0.45); letter-spacing: 0.05em; }
.tt-step-name { font-size: 12px; color: var(--coral-dark); font-weight: 500; }

.tt-bar { height: 2px; background: rgba(26,23,20,0.12); border-radius: 2px; overflow: hidden; }
.tt-fill { height: 100%; background: var(--coral); border-radius: 2px; transition: width 0.5s cubic-bezier(0.4,0,0.2,1); }

.tt-card {
  background: rgba(255,255,255,0.68);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius);
  overflow: hidden;
  animation: fadeUp 0.7s 0.1s ease both;
  box-shadow:
    0 8px 48px rgba(153,60,29,0.10),
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 -1px 0 rgba(216,90,48,0.06) inset;
}

.tt-card-inner { padding: 2rem; }
.tt-screen { position: relative; overflow: hidden; }

.tt-step { display: none; }
.tt-step.active { display: block; }
.tt-step.tt-enter      { animation: ttEnterFwd 0.34s ease both; }
.tt-step.tt-enter-back { animation: ttEnterBck 0.34s ease both; }
.tt-step.tt-exit      { position: absolute; top: 0; left: 0; right: 0; display: block; pointer-events: none; animation: ttExitFwd  0.26s ease both; }
.tt-step.tt-exit-back { position: absolute; top: 0; left: 0; right: 0; display: block; pointer-events: none; animation: ttExitBck  0.26s ease both; }

@keyframes ttEnterFwd  { from { opacity:0; transform:translateX(28px);  } to { opacity:1; transform:translateX(0); } }
@keyframes ttEnterBck  { from { opacity:0; transform:translateX(-28px); } to { opacity:1; transform:translateX(0); } }
@keyframes ttExitFwd   { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(-28px); } }
@keyframes ttExitBck   { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(28px);  } }

.tt-qlabel { font-size: 11px; font-weight: 500; color: var(--coral); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.5rem; }
.tt-q { font-family: 'editorsnote', 'Butler', 'DM Serif Display', serif; font-weight: 300; font-size: 26px; color: var(--text); line-height: 1.25; margin-bottom: 0.4rem; }
.tt-hint { font-size: 14px; color: var(--text-muted); line-height: 1.55; margin-bottom: 1.5rem; }

.tt-choices { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1.75rem; }

.tt-choice {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  border: 1.5px solid rgba(26,23,20,0.22); border-radius: var(--radius-sm);
  cursor: pointer; background: rgba(255,255,255,0.75);
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  font-size: 14px; color: var(--text); text-align: left; width: 100%;
  font-family: 'Mona Sans', 'DM Sans', sans-serif;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .tt-choice:hover { border-color: var(--coral-mid); background: rgba(250,236,231,0.8); box-shadow: 0 2px 8px rgba(216,90,48,0.12); }
}
.tt-choice.sel { border-color: var(--coral); background: rgba(250,236,231,0.85); }
.tt-choice.tt-disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

/* Antwoorden met een voorbeeld eronder.
   Het voorbeeld is wat de vraag beantwoordbaar maakt: "redelijk actief" zegt
   niemand iets, "winkelmedewerker, of thuis veel bezig met het huishouden en
   de kinderen" wel. Daarom staat het onder het antwoord en niet in een aparte
   uitleg die niemand opent. Kleiner en grijzer, zodat het antwoord zelf
   leesbaar blijft als je snel scant.

   Twee kolommen: het lettertje links, verticaal in het midden van het hele
   blok, en rechts de tekst strak onder elkaar. Dat scheelt de inspringing van
   de vorige opzet, waarbij het voorbeeld op een eigen regel onder de titel
   uitkwam met een marge ter breedte van het lettertje ernaast. */
.tt-choice-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0; /* laat lange woorden afbreken in plaats van de knop oprekken */
}
.tt-choice-titel { line-height: 1.35; }

.tt-choice-uitleg {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-hint);
}

.tt-key {
  width: 22px; height: 22px; border-radius: 5px;
  background: rgba(243,240,235,0.9); border: 1px solid var(--border-inner);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 500; color: var(--text-hint); flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tt-choice.sel .tt-key { background: var(--coral); border-color: var(--coral); color: #fff; }

.tt-input-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 1.75rem; }

.tt-big-input {
  font-family: 'Butler', 'DM Serif Display', serif; font-weight: 300; font-size: 52px; color: var(--coral);
  border: none; border-bottom: 2px solid var(--coral); background: transparent;
  outline: none; width: 130px; padding: 4px 0; line-height: 1;
}
.tt-big-input::placeholder { color: var(--coral-mid); opacity: 0.5; }

.tt-naam-input {
  font-family: 'Mona Sans', 'DM Sans', sans-serif; font-weight: 400; font-size: 42px; color: var(--coral);
  border: none; border-bottom: 2px solid var(--coral); background: transparent;
  outline: none; width: 100%; padding: 4px 0; line-height: 1;
}
.tt-naam-input::placeholder { color: #828282; opacity: 1; }

.tt-unit { font-size: 18px; color: var(--text-muted); }

.tt-slider-wrap { margin-bottom: 1.75rem; }
.tt-big-num { font-family: 'Butler', 'DM Serif Display', serif; font-weight: 300; font-size: 52px; color: var(--coral); line-height: 1; margin-bottom: 0.75rem; }
.tt-big-num .tt-unit { font-size: 20px; }

/* Stepper */
.tt-stepper-label { font-size: 13px; color: var(--text-muted); margin-bottom: 0.5rem; font-weight: 500; }
.tt-stepper { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 20px; margin-bottom: 1.5rem; }
.tt-stepper-val {
  font-family: 'Butler', 'DM Serif Display', serif; font-weight: 300;
  font-size: 52px; color: var(--coral); line-height: 1; text-align: center;
  min-width: 140px; flex-shrink: 1;
}
.tt-stepper-val .tt-unit { font-size: 20px; }
.tt-stepper-input {
  font-family: 'Butler', 'DM Serif Display', serif !important; font-weight: 300 !important;
  font-size: 52px !important; color: var(--coral) !important; line-height: 1 !important;
  text-align: center !important; border: none !important; border-radius: 0 !important;
  background: none !important; outline: none !important; box-shadow: none !important;
  width: 120px !important; padding: 0 !important;
  -moz-appearance: textfield !important;
}
.tt-stepper-input::-webkit-outer-spin-button,
.tt-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; }
.tt-stepper-input:focus { color: var(--coral-dark) !important; outline: none !important; box-shadow: none !important; }
.tt-step-btn {
  width: 56px !important; height: 56px !important; min-width: 56px !important;
  border-radius: 50% !important; border: 2px solid var(--coral) !important;
  background: transparent !important; color: var(--coral) !important;
  font-size: 28px !important; line-height: 1 !important; padding: 0 !important;
  cursor: pointer; display: inline-flex !important; align-items: center !important;
  justify-content: center !important; flex-shrink: 0 !important;
  transition: background 0.15s, color 0.15s; user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.tt-step-btn:hover, .tt-step-btn:active { background: var(--coral) !important; color: #fff !important; }

.tt-page-wrap input[type=range] {
  -webkit-appearance: none; width: 100%; height: 3px;
  background: rgba(26,23,20,0.15); border-radius: 2px; outline: none;
  accent-color: var(--coral); margin-bottom: 6px;
}
.tt-page-wrap input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--coral); cursor: pointer; border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--coral); transition: transform 0.15s;
}
.tt-page-wrap input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); }

.tt-range-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-hint); }

.tt-note {
  background: rgba(250,236,231,0.85); border-left: 3px solid var(--coral);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 14px; font-size: 13px; color: var(--coral-deep);
  line-height: 1.55; margin-bottom: 1.25rem;
}

.tt-result-hero {
  text-align: center; padding: 0.5rem 0 0.25rem;
}
.tt-kcal { font-family: 'Butler', 'DM Serif Display', serif; font-weight: 300; font-size: 56px; color: var(--coral); line-height: 1; }
.tt-kcal-label { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.tt-doel-context {
  text-align: left; font-size: 13px; color: var(--text); line-height: 1.55;
  padding: 0.5rem 0 0.75rem; border-bottom: 1px solid var(--border-inner); margin-bottom: 0.85rem;
}

/* BMI meter */
.tt-bmi-meter { margin-bottom: 0.85rem; }
.tt-bmi-meter-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 6px;
}
.tt-bmi-meter-val { font-size: 13px; color: var(--text-muted); }
.tt-bmi-meter-val strong { font-family: 'Butler', 'DM Serif Display', serif; font-weight: 300; font-size: 20px; color: var(--coral-dark); }
.tt-bmi-cat { font-size: 13px; font-weight: 600; }
.tt-bmi-cat.bmi-low  { color: #4a7cc9; }
.tt-bmi-cat.bmi-ok   { color: #3a9e6a; }
.tt-bmi-cat.bmi-warn { color: #c97a2a; }
.tt-bmi-cat.bmi-high { color: #c94040; }
.tt-bmi-track-wrap { position: relative; }
.tt-bmi-track {
  position: relative; height: 10px; border-radius: 5px; overflow: visible;
  background: linear-gradient(to right,
    #c94040 0%,  #c94040 4%,
    #c9a02a 4%,  #c9a02a 14%,
    #3a9e6a 14%, #3a9e6a 40%,
    #c9a02a 40%, #c9a02a 60%,
    #c94040 60%, #c94040 100%
  );
  margin-bottom: 4px;
}
.tt-bmi-needle {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 4px; height: 18px; background: #2a2a2a;
  border-radius: 2px; transition: left 0.4s ease;
  box-shadow: 0 0 0 2px #fff;
}
.tt-bmi-scale {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--text-muted); margin-bottom: 2px;
}
.tt-bmi-zones {
  display: grid; grid-template-columns: 4fr 10fr 26fr 20fr 40fr;
  font-size: 9px; color: var(--text-muted); text-align: center; line-height: 1.3;
}

/* Ondergewicht melding */
.tt-underweight-msg {
  background: #eef4fd; border: 1.5px solid #aac4e8; border-radius: var(--radius-sm);
  padding: 16px; margin: 1rem 0; color: #2a4a7a; font-size: 14px; line-height: 1.6;
}

.tt-zw-disclaimer {
  background: #f5f0fa; border: 1.5px solid #c9aee8; border-radius: var(--radius-sm);
  padding: 14px 16px; color: #4a2a7a; font-size: 13px; line-height: 1.6;
}
.tt-zw-disclaimer p { margin: 0; }

.tt-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 0.85rem; }
.tt-stat { background: var(--bg-card); border-radius: var(--radius-sm); padding: 10px 8px; text-align: center; border: 1px solid var(--border-inner); }
.tt-stat-val { font-family: 'Butler', 'DM Serif Display', serif; font-weight: 300; font-size: 20px; color: var(--coral-dark); letter-spacing: 0.01em; }
.tt-stat-lbl { font-size: 10px; color: var(--text-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.4; }

.tt-chart-wrap { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 0.85rem; }
.tt-chart-wrap svg { width: 90px; height: 90px; flex-shrink: 0; }
.tt-chart-legend { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--text); }
.tt-leg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; flex-shrink: 0; }

.tt-macros { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 1rem; }
.tt-macro {
  background: rgba(243,240,235,0.65); border-radius: var(--radius-sm);
  padding: 8px 6px; text-align: center;
  border: 1px solid rgba(255,255,255,0.55);
}
.tt-macro-val { font-family: 'Butler', 'DM Serif Display', serif; font-weight: 300; font-size: 20px; color: var(--text); }
.tt-macro-lbl { font-size: 10px; color: var(--text-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.05em; }

.tt-cta-text { font-size: 15px; color: var(--text-muted); line-height: 1.55; margin-bottom: 1rem; }
.tt-cta-text strong { color: var(--text); font-weight: 500; }

.tt-field-group { display: flex; flex-direction: column; gap: 10px; margin-bottom: 0.75rem; }
.tt-field-group input {
  width: 100%; font-size: 16px; font-family: 'Mona Sans', 'DM Sans', sans-serif;
  padding: 13px 15px; border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm); background: rgba(255,255,255,0.65);
  color: var(--text); outline: none; transition: border-color 0.15s, background 0.15s;
}
.tt-field-group input:focus { border-color: var(--coral); background: rgba(255,255,255,0.9); }
.tt-field-group input::placeholder { color: #828282; }

.tt-disclaimer { font-size: 11px; color: var(--text-hint); line-height: 1.5; margin-bottom: 1.25rem; }

.tt-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 1.25rem; border-top: 1px solid var(--border-inner); margin-top: 0.5rem;
}

.tt-back {
  background: transparent; border: none; font-size: 14px; color: var(--text-hint);
  cursor: pointer; padding: 8px 0; font-family: 'Mona Sans', 'DM Sans', sans-serif;
  display: flex; align-items: center; gap: 5px; transition: color 0.15s;
}
.tt-back:hover { color: var(--text); }

/* Raakvlak van minstens 44 px hoog. Met 11 px ruimte kwam deze knop op ongeveer
   40 px uit, net onder wat comfortabel is met een duim, en hij wordt per bezoeker
   dertien keer ingedrukt. */
.tt-next {
  display: flex; align-items: center; gap: 7px; padding: 14px 24px;
  min-height: 46px;
  background: var(--coral); color: #fff; border: none;
  border-radius: var(--radius-sm); font-size: 15px; font-weight: 500;
  font-family: 'Mona Sans', 'DM Sans', sans-serif; cursor: pointer;
  transition: opacity 0.15s, transform 0.1s; letter-spacing: 0.01em;
  box-shadow: 0 4px 16px rgba(216,90,48,0.28);
}
.tt-next:hover { opacity: 0.88; }
.tt-next:active { transform: scale(0.97); }
.tt-next:disabled { opacity: 0.45; cursor: default; box-shadow: none; }

.tt-error {
  font-size: 13px; color: var(--coral-dark); background: rgba(250,236,231,0.9);
  border-left: 3px solid var(--coral); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10px 14px; margin-bottom: 1rem;
}

.tt-email-hint {
  font-size: 13px; color: var(--text-muted);
  padding: 2px 2px 8px; line-height: 1.4;
}
.tt-email-hint .tt-email-fix {
  background: none; border: none; padding: 0;
  font-family: 'Mona Sans', 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--coral-dark); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.tt-email-hint .tt-email-fix:hover { text-decoration-style: dotted; }

.tt-video-wrap {
  position: relative; padding-bottom: 56.25%; height: 0; width: 100%;
  border-radius: var(--radius-sm); overflow: hidden;
  margin-bottom: 1.5rem; background: rgba(26,23,20,0.06);
}
#tt-s13 .tt-video-wrap { margin-top: 1.2rem; }
.tt-weekmenu-link {
  color: var(--coral-dark); text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 2px; cursor: pointer;
}
.tt-weekmenu-link:hover { text-decoration-style: solid; }
.tt-video-wrap iframe {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; border: none;
}

.tt-intro-start {
  display: flex; justify-content: center; padding-top: 0.25rem;
}

.tt-start-btn { padding: 12px 32px !important; font-size: 16px !important; gap: 6px !important; }
.tt-chev { display: inline-flex; gap: 1px; }
.tt-chev span { display: inline-block; animation: chevMove 1.4s ease-in-out infinite; }
.tt-chev span:nth-child(2) { animation-delay: 0.2s; }
@keyframes chevMove {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  50%       { transform: translateX(4px); opacity: 1; }
}

/* Route map – buiten het kaartje, altijd zichtbaar */
.tt-roadmap {
  margin-top: 1rem;
  /* Ruim onderin, om twee redenen die allebei op een telefoon spelen.
     Het onderste label loopt met te weinig ruimte tegen de rand van het scherm
     en wordt afgekapt. En rechtsonder zweeft de WhatsApp-knop van de site, die
     precies over de laatste stop heen valt zodra je helemaal naar beneden
     scrolt. Zeventig pixels houdt de routekaart daarboven. */
  padding: 1rem 0.5rem 4.5rem;
  opacity: 0.85; transition: opacity 0.4s;
}
.tt-roadmap:hover { opacity: 1; }
.tt-rm-row { display: flex; align-items: center; }
.tt-rm-stop { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tt-rm-dot {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: rgba(216,90,48,0.08); border: 1.5px solid rgba(216,90,48,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: rgba(216,90,48,0.5);
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.tt-rm-dot.done {
  background: var(--coral-light); border-color: var(--coral);
  color: var(--coral-dark);
}
.tt-rm-dot.active:not(.end) {
  background: var(--coral); border-color: var(--coral);
  color: #fff; box-shadow: 0 0 0 3px rgba(216,90,48,0.2);
}
.tt-rm-dot.end {
  width: 42px; height: 42px; font-size: 16px;
  background: rgba(216,90,48,0.15); border-color: rgba(216,90,48,0.3);
  color: rgba(216,90,48,0.5);
}
.tt-rm-dot.end.active, .tt-rm-dot.end.done {
  background: var(--coral); color: #fff; border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(216,90,48,0.15);
  animation: rmBeacon 2.4s ease-in-out infinite;
}
@keyframes rmBeacon {
  0%,100% { box-shadow: 0 0 0 4px rgba(216,90,48,0.15), 0 0 0 0   rgba(216,90,48,0.25); }
  55%      { box-shadow: 0 0 0 4px rgba(216,90,48,0.10), 0 0 0 12px rgba(216,90,48,0); }
}
.tt-rm-seg {
  flex: 1; height: 1.5px;
  background: linear-gradient(to right, rgba(216,90,48,0.15), rgba(216,90,48,0.15));
  transition: background 0.3s;
}
.tt-rm-seg.done { background: var(--coral); opacity: 0.5; }
.tt-rm-lbl { font-size: 9px; color: var(--text-muted); text-align: center; line-height: 1.3; opacity: 0.7; }
.tt-rm-lbl-end { font-size: 9px; color: var(--text-muted); text-align: center; line-height: 1.3; }
.tt-rm-lbl-end strong { display: block; font-size: 8px; color: var(--coral); font-weight: 600; margin-top: 1px; }

/* CTA blok – springt eruit op resultaatscherm */
.tt-cta-block {
  background: linear-gradient(160deg, #fff3ee, #fde8df);
  border: 2px solid rgba(216,90,48,0.45);
  border-radius: var(--radius-md);
  padding: 20px 18px 18px;
  margin-top: 1.5rem;
  box-shadow: 0 4px 22px rgba(216,90,48,0.14);
  animation: ctaBorderPulse 3s ease-in-out infinite;
}
@keyframes ctaBorderPulse {
  0%,100% { box-shadow: 0 4px 22px rgba(216,90,48,0.14); }
  50%      { box-shadow: 0 4px 32px rgba(216,90,48,0.28); }
}
.tt-cta-block .tt-field-group { margin-top: 0.75rem; }
.tt-cta-block .tt-submit-btn { width: 100%; margin-top: 0.75rem; }

.tt-reward-banner {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 0;
}
.tt-reward-icon { flex-shrink: 0; color: var(--coral); }
.tt-reward-banner strong { display: block; font-size: 15px; color: var(--text); font-weight: 700; margin-bottom: 3px; }
.tt-reward-banner span { font-size: 12px; color: var(--text-muted); line-height: 1.45; }

/* Submit-knop */
.tt-submit-btn {
  background: linear-gradient(135deg, var(--coral-dark), var(--coral)) !important;
  position: relative; overflow: hidden;
}
.tt-submit-btn::after {
  content: ''; position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  animation: btnShimmer 2.4s ease-in-out infinite;
}
@keyframes btnShimmer {
  0%    { left: -75%; }
  60%,100% { left: 125%; }
}

.tt-redirect { text-align: center; padding: 1.5rem 0 0.5rem; display: none; }

.tt-redirect-spinner {
  width: 48px; height: 48px;
  border: 3px solid rgba(216,90,48,0.15);
  border-top-color: var(--coral);
  border-radius: 50%;
  margin: 0 auto 1.5rem;
  animation: spin 0.85s linear infinite;
}

.tt-redirect h2 {
  font-family: 'Butler', 'DM Serif Display', serif; font-weight: 300;
  font-size: 24px; color: var(--text); margin-bottom: 0.6rem;
}

.tt-redirect p { font-size: 15px; color: var(--text-muted); line-height: 1.6; }

.tt-dots span { display: inline-block; animation: dots 1.4s infinite; opacity: 0; }
.tt-dots span:nth-child(2) { animation-delay: 0.2s; }
.tt-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dots { 0%,80%,100% { opacity: 0; } 40% { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 480px) {
  .tt-page-wrap { padding: 5.5rem 0.75rem 3rem; }
  .tt-card-inner { padding: 1.5rem; }
  .tt-q { font-size: 22px; }
  .tt-kcal { font-size: 52px; }
  .tt-big-num { font-size: 44px; }
  .tt-big-input { font-size: 44px; }
  .tt-naam-input { font-size: 34px; }
  .tt-blob-1 { width: 380px; height: 380px; }
  .tt-blob-2 { width: 320px; height: 320px; }
}

/* Medische kanttekening bij de eiwitwaarde. Klein maar zichtbaar: een algemene
   eiwitberekening hoort niet klakkeloos toegepast te worden bij nierschade. */
.tt-eiwit-note {
  margin: 0.9rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted);
  text-align: left;
  max-width: 46ch;
}

/* Vezels staan los van de macroverdeling: het is een hoeveelheid in gram en
   geen aandeel van de energie, dus hij hoort niet in de ring hierboven. */
.tt-vezel-note {
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: left;
  max-width: 46ch;
}