/* Plan Builder opt-in and thank-you styles. From snippet 7277 (CSS half). */
/* "Learn more" becomes a compact circled i. Text stays in the DOM for screen readers. */
.tm-pb5 .elementor-field-subgroup .elementor-field-option label .tm-lm-toggle{
  font-size:0 !important;
  width:23px !important;
  height:23px !important;
  min-width:23px !important;
  padding:0 !important;
  border:1.6px solid currentColor !important;
  border-radius:50% !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-left:auto !important;
  /*
   * 16px, not 0. The zero was incidental - it arrived with the reset that
   * turns the words "Learn more" into a compact circled i - and it collapsed
   * the gap between that circle and the checkbox circle drawn by label::after,
   * so the two read as a single control. The widget stylesheet did ask for
   * 14px, but lost to this !important, which is why the intended spacing never
   * appeared. Reported by Kirk 2026-09-14: "too close to the check mark".
   */
  margin-right:16px !important;
  flex:0 0 auto !important;
  transition:background .15s ease,border-color .15s ease,color .15s ease !important;
}
.tm-pb5 .elementor-field-subgroup .elementor-field-option label .tm-lm-toggle:before{
  content:"i";
  font-family:Georgia,'Times New Roman',serif;
  font-style:italic;
  font-weight:700;
  font-size:13px;
  line-height:1;
}
.tm-pb5 .elementor-field-subgroup .elementor-field-option label .tm-lm-toggle:after{
  display:none !important;
}
.tm-pb5 .elementor-field-subgroup .elementor-field-option label .tm-lm-toggle.tm-open{
  background:#f57b20 !important;
  border-color:#f57b20 !important;
  color:#fff !important;
}
.tm-pb5 .elementor-field-subgroup .elementor-field-option:has(input:checked) label .tm-lm-toggle.tm-open{
  background:#fff !important;
  border-color:#fff !important;
  color:#f57b20 !important;
}

/*
 * Marketing opt-in on the details step.
 *
 * Rebuilt 2026-09-14 to match the app demo form. It used to sit in a grey
 * bordered card, which made it read as a separate panel rather than the last
 * row of the form - and the account checkbox directly above it had no card, so
 * two adjacent checkboxes looked like two unrelated things. The card is gone;
 * they are now the same control twice.
 *
 * Numbers here are shared with tm-plan-account.css and tm-forms.css. Change
 * one, change all three.
 */
.tm-pb5 .tm-q-wrap .tm-optin{
  margin:10px 0 0 !important;
  padding:0 !important;
  background:none !important;
  border:0 !important;
  box-sizing:border-box !important;
  width:100% !important;
  text-align:left !important;
}
.tm-pb5 .tm-q-wrap .tm-optin label{
  font-family:Poppins,sans-serif !important;
  font-size:14px !important;
  color:#3F4150 !important;
  line-height:1.625 !important;
  display:flex !important;
  align-items:flex-start !important;
  gap:12px !important;
  margin:0 !important;
  cursor:pointer !important;
  text-align:left !important;
}
.tm-pb5 .tm-q-wrap .tm-optin input[type=checkbox]{
  appearance:none;
  -webkit-appearance:none;
  margin:2px 0 0 !important;
  flex:0 0 auto !important;
  width:20px !important;
  height:20px !important;
  background-color:#fff;
  border:2px solid #e1e4ed;
  border-radius:5px;
  cursor:pointer;
  transition:background-color .12s ease,border-color .12s ease;
}
.tm-pb5 .tm-q-wrap .tm-optin input[type=checkbox]:checked{
  background-color:#f57b20;
  border-color:#f57b20;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:12px 12px;
}
.tm-pb5 .tm-q-wrap .tm-optin input[type=checkbox]:focus-visible{
  outline:3px solid rgba(245,123,32,.35);
  outline-offset:2px;
}

/* Thank you step */
.tm-pb5 .elementor-message-success{display:none !important;}
.tm-pb5 .tm-thanks{font-family:Poppins,sans-serif;text-align:center;padding:38px 10px 26px;}
.tm-pb5 .tm-thanks .tm-thanks-tick{width:64px;height:64px;border-radius:50%;background:#fff1e3;color:#f57b20;font-size:30px;line-height:64px;margin:0 auto 18px;font-weight:700;}
.tm-pb5 .tm-thanks h3{font-size:28px;font-weight:700;color:#283071;margin:0 0 14px;line-height:1.25;}
.tm-pb5 .tm-thanks p{font-size:15px;color:#6B7090;line-height:1.65;max-width:520px;margin:0 auto 12px;}
.tm-pb5 .tm-thanks p.tm-thanks-sub{font-size:13px;color:#6b7090;}
.tm-pb5 .tm-thanks a.tm-thanks-btn{display:inline-block;margin-top:22px;background:#283071;color:#fff;font-size:15px;font-weight:600;padding:14px 32px;border-radius:50px;text-decoration:none;}
.tm-pb5 .tm-thanks a.tm-thanks-btn:hover{background:#f57b20;}
@media (max-width:600px){
  .tm-pb5 .tm-thanks{padding:28px 4px 20px;}
  .tm-pb5 .tm-thanks h3{font-size:20px;}
}