/* Turnstile fit v2 (mobile-first, no extra panel)
   Fixes: right/left overflow when container width < 300px (common on small phones
   due to nested padding in wrap/panel).
   Approach: an invisible wrapper clips overflow + JS scales only when needed.
*/

/* Never let Turnstile flex items force overflow */
.turnstileRow{ width:100%; min-width:0; overflow:hidden; }
/* IMPORTANT: on mobile the button row becomes a column; any flex-grow here creates
   large vertical gaps (the Turnstile row stretches). Keep it non-growing. */
.btnRow > .turnstileRow{ flex: 0 0 auto; min-width:0; width:100%; }

/* Override legacy contact rule that used flex-grow in #contact (fine on desktop row,
   bad on mobile column). */
#contact .turnstileRow{ flex: 0 0 auto; }

/* Invisible fit wrapper (no border, no padding) */
.turnstileFit{ width:100%; max-width:100%; min-width:0; overflow:hidden; }

/* Keep the widget as a block so transforms are predictable */
.turnstileFit .cf-turnstile{ display:block; transform-origin: 0 0; }

/* If a parent is flex, allow shrinking */
.turnstileFit, .turnstileFit *{ min-width:0; }

/* v3 add-on: eliminate rare huge vertical gap on mobile by removing flex-column quirks.
   On narrow screens, render the action stack as a one-column grid.
   This keeps Turnstile and buttons tightly stacked with a normal gap.
*/
@media (max-width: 640px){
  form[data-fwl-form] .btnRow{
    display:grid !important;
    grid-template-columns: 1fr;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 12px !important;
  }
  form[data-fwl-form] .btnRow > *{
    width: 100% !important;
    min-width: 0;
  }
  form[data-fwl-form] .btnRow > .turnstileRow{
    margin: 2px 0 0 0 !important;
    align-self: start;
    justify-content: flex-start;
  }
}