/* Wijzigen in plaats van annuleren, op /cancel-order/.
   Staat in het child theme en niet in de pagina-inhoud, om dezelfde reden als de js:
   WordPress bewerkt wat er in een pagina staat en dat sloopte het script op 23-09-2026.
   De kleur --ttgold komt van #tt-cancel zelf, die blijft in de pagina staan. */

#tt-cancel .ttwijz {
  border: 1px solid var(--ttgold);
  background: #141414;
  padding: 22px 22px 24px;
  margin: 0 0 30px;
  border-radius: 2px;
}
#tt-cancel .ttwijz h3 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.2px;
}
#tt-cancel .ttwijz p.uit {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.65;
  color: #b0b0b0;
}
#tt-cancel .ttwijz textarea { min-height: 76px; }

/* Minstens 44 pixels hoog, want dat is wat een duim nodig heeft. */
#tt-cancel button.ttbtn2 {
  background: var(--ttgold);
  color: #000;
  border: 0;
  padding: 15px 30px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  width: 100%;
  margin: 14px 0 0;
  min-height: 44px;
}
#tt-cancel button.ttbtn2[disabled] { opacity: .55; cursor: default; }

#tt-cancel .ttchat {
  margin: 10px 0 0;
  font-size: 13px;
  color: #8a8a8a;
  line-height: 1.6;
}
/* Het klikdoel is de hele regel en niet alleen de letters. Gemeten 23-09-2026 was de link
   15 pixels hoog, en een duim heeft er 44 nodig. */
#tt-cancel .ttchat a {
  display: inline-block;
  padding: 13px 4px;
  color: var(--ttgold);
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
  box-sizing: border-box;
  line-height: 1.45;
}

/* GEMETEN 23-09-2026 OP 390 PIXELS: elk invoerveld op deze pagina stond op 15px, en onder de
   16 zoomt de iPhone bij het aantikken vanzelf in en springt de pagina weg onder je duim.
   Dat gold ook voor de velden die er al stonden, dus dit repareert de hele pagina en niet
   alleen het nieuwe vak. Het beeld verandert nauwelijks, want het is een pixel.

   De selector begint bewust met body. De pagina heeft zijn eigen style-blok IN de body, dus
   dat komt later in het document en wint bij gelijke specificiteit; met body ervoor telt er
   een element-selector extra mee en wint deze regel wel. Gemeten: zonder body bleef het 15px. */
body #tt-cancel input[type=text],
body #tt-cancel input[type=email],
body #tt-cancel textarea,
body #tt-cancel select {
  font-size: 16px;
}

/* De slimme vangst, verborgen tot de klant een ruilreden tikt. */
#tt-cancel .ttvangst {
  border: 1px solid var(--ttgold);
  background: #171410;
  padding: 18px 20px;
  margin: 14px 0 0;
  border-radius: 2px;
  display: none;
}
#tt-cancel .ttvangst.on { display: block; }
#tt-cancel .ttvangst b {
  display: block;
  color: var(--ttgold);
  font-size: 15px;
  margin: 0 0 6px;
}
#tt-cancel .ttvangst p {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.65;
  color: #c8c8c8;
}

#tt-cancel .ttokblok {
  border: 1px solid #2a2a2a;
  border-left: 3px solid var(--ttgold);
  background: #141414;
  padding: 18px 20px;
  margin: 0 0 26px;
  display: none;
}
#tt-cancel .ttokblok.on { display: block; }
#tt-cancel .ttokblok p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #e6e6e6;
}

/* De honeypot. Buiten beeld maar wel in de tabvolgorde te vermijden, zodat een mens hem
   nooit invult en een bot wel. */
#tt-cancel .ttpot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}