/* Content stays hidden/blurred until unlocked (or restored via localStorage) */
#txl-gated-content.txl-gated {
  filter: blur(10px);
  user-select: none;
  pointer-events: none;
  min-height: 400px;
  overflow: hidden;
}
html.txl-wp-already-unlocked #txl-gated-content.txl-gated {
  filter: none;
  user-select: auto;
  pointer-events: auto;
}
html.txl-wp-unlocked #txl-gated-content.txl-gated {
  filter: none;
  user-select: auto;
  pointer-events: auto;
}

/* Overlay */
.txl-gate-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 5, 73, 0.55);
  backdrop-filter: blur(3px);
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: 'Poppins', sans-serif;
}
.txl-gate-overlay.txl-gate-open {
  display: flex;
}

.txl-gate-modal {
  background: #fff;
  border-radius: 20px;
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,.35);
  animation: txl-gate-pop .25s ease;
}
@keyframes txl-gate-pop {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.txl-gate-modal-body {
  padding: 40px 36px 32px;
}

.txl-gate-title {
  font-size: 22px;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0 0 8px;
  line-height: 1.3;
}
.txl-gate-desc {
  font-size: 14.5px;
  color: #5a5a5a;
  line-height: 1.6;
  margin: 0 0 24px;
}
.txl-gate-missing-form {
  font-size: 13.5px;
  color: #a15c00;
  background: #fff8ec;
  border: 1px solid #fde4c0;
  border-radius: 10px;
  padding: 14px 16px;
}

.txl-gate-continue-btn {
  display: none;
  width: 100%;
  margin-top: 20px;
  background: linear-gradient(135deg, #5C76FF 25%, #945CFF 100%);
  color: #fff;
  border: none;
  padding: 15px 20px;
  border-radius: 50px;
  font-family: 'Poppins', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(92,118,255,.3);
  transition: all .25s ease;
  opacity: 0;
  transform: translateY(6px);
}
.txl-gate-continue-btn.txl-gate-show {
  display: block;
  animation: txl-gate-fade-in .35s ease forwards;
}
.txl-gate-continue-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(92,118,255,.45);
}
@keyframes txl-gate-fade-in {
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 560px) {
  .txl-gate-modal-body { padding: 32px 24px 24px; }
  .txl-gate-title { font-size: 19px; }
}

/* ============================================================
   HubSpot form overrides — this is the SAME pattern already proven
   working on home-v3.php's hero form (.pf-form-card block), just
   rescoped to #txl-hs-form-wrap. Plain CSS + !important, no shadow
   DOM involved — that theory was wrong; this form renders in normal
   light DOM the whole time.
   ============================================================ */

/* Legal-consent text, checkbox label, and privacy text ship with inline
   color:#ffffff — invisible on our white popup. !important is required
   since inline styles otherwise always win over a stylesheet. */
#txl-hs-form-wrap .hsfc-DataPrivacyField .hsfc-RichText span,
#txl-hs-form-wrap .hsfc-CheckboxField label span span {
  color: #1a1a1a !important;
}
#txl-hs-form-wrap .hsfc-DataPrivacyField .hsfc-Row {
  margin: 0 !important;
  padding: 0 !important;
}
#txl-hs-form-wrap .hsfc-DataPrivacyField .hsfc-RichText {
  margin: 2px 0 !important;
  line-height: 1.35 !important;
}
#txl-hs-form-wrap .hsfc-DataPrivacyField .hsfc-CheckboxField {
  margin: 4px 0 !important;
}
#txl-hs-form-wrap .hsfc-DataPrivacyField .hsfc-CheckboxField label {
  align-items: flex-start !important;
  gap: 4px !important;
}

/* Removes HubSpot's own step padding, which was adding extra spacing
   on top of our modal's padding. */
#txl-hs-form-wrap .hsfc-Step__Content {
  padding: 0 !important;
}
#txl-hs-form-wrap [data-hsfc-id="Renderer"] .hsfc-Step .hsfc-Step__Content > :last-child {
  margin-top: 0 !important;
}
#txl-hs-form-wrap .hsfc-Row,
#txl-hs-form-wrap div.hsfc-Row,
#txl-hs-form-wrap [data-hsfc-id="Row"].hsfc-Row {
  margin: 10px !important;
  padding: 0 !important;
}

/* HubSpot post-submit success/thank-you message — force text to black
   (also overrides inline white on that screen). */
#txl-hs-form-wrap .hsfc-RichText p,
#txl-hs-form-wrap .hsfc-RichText span,
#txl-hs-form-wrap .hsfc-RichText strong,
#txl-hs-form-wrap .hsfc-RichText a {
  color: #1a1a1a !important;
}

/* Force Poppins across the entire embedded HubSpot form */
#txl-hs-form-wrap,
#txl-hs-form-wrap * {
  font-family: 'Poppins', sans-serif !important;
}