/* Opt-in form styles - copied verbatim from the WordPress page's custom CSS.
   Selectors keep FunnelKit's class names; index.html reuses that markup. */
.ic-optin-sec{
  scroll-margin-top:90px;
  width:100%;
  padding:96px 16px !important;
  background:#f8fafc !important;
  /* deterministic stacking whichever container type Elementor gives you
     (classic .e-con has an .e-con-inner, the new atomic flexbox does not) */
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:0 !important;
}
.ic-optin-sec > .e-con-inner{
  display:flex !important;flex-direction:column !important;align-items:center !important;
  gap:0 !important;width:100% !important;max-width:none !important;padding:0 !important;
}

/* heading + subtitle, matching the FAQ / Support section treatment */
.ic-optin-sec .elementor-widget-heading .elementor-heading-title{
  font-family:"Clash Display",Arial,Helvetica,sans-serif !important;
  font-size:1.875rem !important;
  font-weight:700 !important;
  line-height:1.15 !important;
  letter-spacing:-.025em !important;
  color:#0f172b !important;
  text-align:center !important;
  margin:0 0 12px !important;
}
.ic-optin-sec .elementor-widget-text-editor,
.ic-optin-sec .elementor-widget-text-editor p{
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
  font-size:.875rem !important;
  font-weight:400 !important;
  line-height:1.7 !important;
  color:#62748e !important;
  text-align:center !important;
  margin:0 !important;
}
.ic-optin-sec .elementor-widget-heading,
.ic-optin-sec .elementor-widget-text-editor{width:100% !important;max-width:640px;margin-inline:auto !important}
.ic-optin-sec .elementor-widget-text-editor{margin-bottom:36px !important}

/* ---- 2. the form widget: width + the gradient glow ---------- */
.elementor-widget-wffn-optin-form{
  position:relative;
  margin-left:auto !important; margin-right:auto !important;
  width:100% !important; max-width:600px !important;
}
/* same glow that wraps the Cheat Profiles card */
.elementor-widget-wffn-optin-form::before{
  content:"";position:absolute;inset:-5px;z-index:0;pointer-events:none;
  border-radius:30px;
  background:linear-gradient(90deg,#f6339a,#8d54ff,#3080ff);
  opacity:.18;filter:blur(22px);
  transition:opacity .5s;
}
.elementor-widget-wffn-optin-form:hover::before{opacity:.28}

/* ---- 2. tokens + the card ---------------------------------- */
.wffn-optin-form{
  --ic-clash:"Clash Display",Arial,Helvetica,sans-serif;
  --ic-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ic-pink:#f6339a;
  --ic-violet:#7f22fe;
  --ic-ink:#f1f5f9;      /* input text          */
  --ic-dim:#62748e;      /* labels, placeholder */
  --ic-line:#1d293d;     /* borders             */
  --ic-line-h:#314158;   /* borders on hover    */
  --ic-field:#0f1420;    /* input fill          */
  --ic-red:#ff6568;

  position:relative;
  padding:40px 32px 36px !important;
  border-radius:24px !important;
  border:1px solid var(--ic-line) !important;
  background:
    radial-gradient(130% 70% at 50% -8%,rgba(246,51,154,.16),transparent 62%),
    linear-gradient(160deg,#0d1424 0%,#0b1220 55%,#120f22 100%) !important;
  box-shadow:0 30px 60px -20px rgba(11,18,32,.55),
             0 0 0 1px rgba(255,255,255,.04) inset !important;
  z-index:1;
  -webkit-font-smoothing:antialiased;
  /* NO overflow:hidden - it would clip the country dropdown */
}
/* centred hairline, same treatment as the footer panel */
.wffn-optin-form::before{
  content:"";position:absolute;top:0;left:18%;right:18%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#314158,transparent);
}
.wffn-optin-form > *{position:relative;z-index:1}

/* border-box, or width:100% + padding pushes the fields past the card edge
   and inflates their height. Do not remove. */
.wffn-optin-form,
.wffn-optin-form *,
.wffn-optin-form *::before,
.wffn-optin-form *::after{box-sizing:border-box !important}

/* ---- 3. field rows ----------------------------------------- */
.wffn-optin-form .bwfac_form_sec{
  margin:0 0 18px !important;
  padding:0 !important;
  width:100% !important;
  float:none !important;
}
.wffn-optin-form .bwfac_form_sec.submit_button{margin-top:26px !important;margin-bottom:0 !important}
.wffn-optin-form .wfop_input_cont{width:100% !important;margin:0 !important}

/* ---- 4. labels --------------------------------------------- */
.wffn-optin-form .bwfac_form_sec > label{
  display:block !important;
  margin:0 0 8px !important;
  padding:0 !important;
  font-family:var(--ic-mono) !important;
  font-size:10px !important;
  font-weight:700 !important;
  line-height:1.4 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:var(--ic-dim) !important;
}
.wffn-optin-form .bwfac_form_sec > label span{
  color:var(--ic-pink) !important;
  margin-left:3px;
  font-weight:700;
}

/* ---- 5. inputs --------------------------------------------- */
.wffn-optin-form .wffn-optin-input,
.wffn-optin-form input[type="text"],
.wffn-optin-form input[type="email"],
.wffn-optin-form input[type="tel"],
.wffn-optin-form input[type="number"],
.wffn-optin-form select,
.wffn-optin-form textarea{
  width:100% !important;
  min-height:54px !important;
  margin:0 !important;
  border:1px solid var(--ic-line) !important;
  border-radius:12px !important;
  background:var(--ic-field) !important;
  color:var(--ic-ink) !important;
  font-family:var(--ic-clash) !important;
  font-size:15px !important;
  font-weight:500 !important;
  line-height:1.4 !important;
  letter-spacing:normal !important;
  box-shadow:none !important;
  outline:none !important;
  -webkit-appearance:none;appearance:none;
  transition:border-color .2s,background-color .2s,box-shadow .2s;
}
/* every field except the phone one gets the full padding shorthand */
.wffn-optin-form .wffn-optin-input:not(.iti__tel-input),
.wffn-optin-form select,
.wffn-optin-form textarea{padding:15px 16px !important}
/* the phone input keeps intl-tel-input's runtime padding-left */
.wffn-optin-form .iti__tel-input{
  padding-top:15px !important;padding-bottom:15px !important;padding-right:16px !important;
}
.wffn-optin-form textarea{min-height:110px !important;resize:vertical}

.wffn-optin-form .wffn-optin-input::placeholder,
.wffn-optin-form textarea::placeholder{
  color:var(--ic-dim) !important;opacity:1 !important;font-weight:400 !important;
}

.wffn-optin-form .wffn-optin-input:hover{border-color:var(--ic-line-h) !important}

.wffn-optin-form .wffn-optin-input:focus,
.wffn-optin-form textarea:focus,
.wffn-optin-form select:focus{
  border-color:var(--ic-pink) !important;
  background:#121829 !important;
  box-shadow:0 0 0 3px rgba(246,51,154,.18) !important;
}

/* kill Chrome's yellow autofill */
.wffn-optin-form input:-webkit-autofill,
.wffn-optin-form input:-webkit-autofill:hover,
.wffn-optin-form input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ic-ink) !important;
  -webkit-box-shadow:inset 0 0 0 1000px var(--ic-field) !important;
  caret-color:var(--ic-ink);
  transition:background-color 9999s ease-out 0s;
}

/* ---- 6. phone field (intl-tel-input) ----------------------- */
.wffn-optin-form .iti{width:100% !important;display:block !important}
/* fallback only - no !important, so intl-tel-input's measured inline value wins */
.wffn-optin-form .wfop_input_cont.phone_flag_code input[type="tel"]{padding-left:96px}

.wffn-optin-form .iti__country-container{
  padding:1px !important;z-index:3;
}
.wffn-optin-form .iti__selected-country{
  height:calc(100% - 2px) !important;
  padding:0 10px 0 14px !important;
  border:0 !important;
  border-right:1px solid var(--ic-line) !important;
  border-radius:11px 0 0 11px !important;
  background:#141b2b !important;
  color:var(--ic-ink) !important;
  transition:background-color .2s;
}
.wffn-optin-form .iti__selected-country:hover,
.wffn-optin-form .iti__selected-country:focus{background:#1a2237 !important;outline:none !important}

.wffn-optin-form .iti__selected-dial-code{
  font-family:var(--ic-mono) !important;
  font-size:13px !important;
  color:var(--ic-dim) !important;
  margin-left:6px;
}
.wffn-optin-form .iti__arrow{border-top-color:var(--ic-dim) !important;margin-left:6px}
.wffn-optin-form .iti__arrow--up{border-bottom-color:var(--ic-dim) !important}
.wffn-optin-form .iti__flag{border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.08)}

/* country dropdown */
.wffn-optin-form .bwfac_form_field_phone{position:relative;z-index:5}
.wffn-optin-form .iti__country-selector{z-index:60}
.wffn-optin-form .iti__country-selector .iti__dropdown-content,
.wffn-optin-form .iti__country-list{
  border:1px solid var(--ic-line) !important;
  border-radius:12px !important;
  background:#0f1420 !important;
  box-shadow:0 24px 48px -12px rgba(0,0,0,.6) !important;
  color:var(--ic-ink) !important;
  font-family:var(--ic-clash) !important;
  max-height:260px !important;
}
.wffn-optin-form .iti__search-input{
  min-height:0 !important;
  padding:11px 14px !important;
  border:0 !important;
  border-bottom:1px solid var(--ic-line) !important;
  border-radius:12px 12px 0 0 !important;
  background:#141b2b !important;
  color:var(--ic-ink) !important;
  font-size:14px !important;
  box-shadow:none !important;
}
.wffn-optin-form .iti__country{
  padding:9px 14px !important;
  font-size:14px !important;
  color:#cad5e2 !important;
}
.wffn-optin-form .iti__country.iti__highlight,
.wffn-optin-form .iti__country:hover{background:rgba(246,51,154,.12) !important;color:#fff !important}
.wffn-optin-form .iti__dial-code{color:var(--ic-dim) !important;font-family:var(--ic-mono) !important}
.wffn-optin-form .iti__country-name{color:inherit !important}

/* ---- 7. submit button -------------------------------------- */
.wffn-optin-form .bwf-custom-button{width:100% !important;margin:0 !important;text-align:center}

.wffn-optin-form .wfop_submit_btn,
.wffn-optin-form button[type="submit"]{
  position:relative;
  display:flex !important;
  align-items:center;justify-content:center;
  width:100% !important;
  min-height:56px !important;
  padding:16px 24px !important;
  border:0 !important;
  border-radius:12px !important;
  background:linear-gradient(100deg,var(--ic-pink) 0%,var(--ic-violet) 100%) !important;
  color:#fff !important;
  font-family:var(--ic-clash) !important;
  font-size:15px !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 14px 30px -12px rgba(246,51,154,.55) !important;
  transition:transform .25s,box-shadow .25s,filter .25s;
}
.wffn-optin-form .wfop_submit_btn .bwf_heading,
.wffn-optin-form .wfop_submit_btn .bwf-text-wrapper{
  position:relative;z-index:1;
  font-family:inherit !important;font-size:inherit !important;
  font-weight:inherit !important;letter-spacing:inherit !important;
  text-transform:inherit !important;color:inherit !important;
}
/* shimmer sweep, same as the hero CTA */
.wffn-optin-form .wfop_submit_btn::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:translateX(-100%);transition:transform .7s ease;
}
.wffn-optin-form .wfop_submit_btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:0 20px 38px -12px rgba(246,51,154,.65) !important;
}
.wffn-optin-form .wfop_submit_btn:hover::after{transform:translateX(100%)}
.wffn-optin-form .wfop_submit_btn:active{transform:translateY(0)}
.wffn-optin-form .wfop_submit_btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.wffn-optin-form .wfop_submit_btn[disabled]{opacity:.65;cursor:wait;transform:none}

/* ---- 8. validation errors ---------------------------------- */
.wffn-optin-form .bwfac_form_sec.bwfac_error .wffn-optin-input,
.wffn-optin-form .bwfac_error input,
.wffn-optin-form .bwfac_error textarea{
  border-color:#fb2c36 !important;
  background:rgba(251,44,54,.06) !important;
  box-shadow:0 0 0 3px rgba(251,44,54,.15) !important;
}
.wffn-optin-form .bwfac_form_sec span.error{
  display:block !important;
  margin-top:7px !important;
  padding:0 !important;
  background:none !important;
  border:0 !important;
  font-family:var(--ic-mono) !important;
  font-size:11px !important;
  font-weight:500 !important;
  line-height:1.5 !important;
  letter-spacing:.02em !important;
  color:var(--ic-red) !important;
}
.wffn-optin-form .bwfac_form_sec span.error::before{
  content:"!" !important;
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;margin-right:6px;
  border-radius:50%;
  background:rgba(251,44,54,.18);
  color:var(--ic-red);
  font-size:9px;font-weight:700;
  vertical-align:-2px;
}

/* ---- 9. mobile --------------------------------------------- */
@media (min-width:640px){
  .ic-optin-sec{padding-left:24px !important;padding-right:24px !important}
  .ic-optin-sec .elementor-widget-heading .elementor-heading-title{font-size:2.25rem !important}
  .ic-optin-sec .elementor-widget-text-editor,
  .ic-optin-sec .elementor-widget-text-editor p{font-size:1rem !important}
}
@media (max-width:600px){
  .ic-optin-sec{padding:64px 16px !important}
  .wffn-optin-form{padding:28px 20px 26px !important;border-radius:20px !important}
  .wffn-optin-form .wffn-optin-input{min-height:50px !important;font-size:16px !important} /* 16px stops iOS zoom */
  .wffn-optin-form .wfop_submit_btn{min-height:52px !important;font-size:14px !important}
}

@media (prefers-reduced-motion:reduce){
  .wffn-optin-form *{transition-duration:.01ms !important}
}
/* ---- 10. from the Elementor widget settings (post-16.css) ------ */
.wffn-optin-form .wfop_submit_btn{margin:15px 0 25px !important}