/**
 * turnstile-dynamic.css
 *
 * Ensures the Cloudflare Turnstile iframe is never clipped by ancestor
 * containers that use overflow:hidden — the most common cause of the
 * "widget invisible inside popup" problem.
 *
 * Primary target: Magnific Popup (.mfp-wrap has `overflow: hidden auto`
 * set as an inline style; !important overrides inline styles in CSS).
 */

/* -------------------------------------------------------------------------
   1. The wrapper itself must never clip.
   ------------------------------------------------------------------------- */
.cftc-turnstile-wrapper {
	overflow: visible !important;
	/* Reserve minimum height so the parent row doesn't collapse. */
	min-height: 68px;
	position: relative;
	z-index: 1;
}

.cftc-turnstile-wrapper > div,
.cftc-turnstile-wrapper > iframe {
	overflow: visible !important;
}

/* -------------------------------------------------------------------------
   2. Magnific Popup — the clipping ancestors.

   .mfp-wrap has `style="overflow: hidden auto"` (inline) which clips the
   horizontal axis. !important overrides inline styles.

   We preserve the vertical scroll (auto) because removing it entirely would
   break the popup scroll-lock on long pages. Switching overflow-x to visible
   allows the Turnstile iframe (300 px) to paint without horizontal clipping.
   ------------------------------------------------------------------------- */
.mfp-wrap {
	overflow-x: visible !important;
}

.mfp-container,
.mfp-content,
.mfp-inline-holder,
.lightbox-content,
.lightbox-inner {
	overflow: visible !important;
}

/* Ensure the Turnstile widget inside Magnific Popup is never clipped. */
.mfp-content .cftc-turnstile-wrapper,
.mfp-container .cftc-turnstile-wrapper,
.lightbox-content .cftc-turnstile-wrapper,
.lightbox-inner .cftc-turnstile-wrapper {
	overflow: visible !important;
	z-index: 10;
}

/* -------------------------------------------------------------------------
   3. WooCommerce form rows that sometimes get overflow:hidden from themes.
   ------------------------------------------------------------------------- */
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-form-row,
.account-login-inner,
.account-register-inner,
.account-container {
	overflow: visible !important;
}

/* -------------------------------------------------------------------------
   4. Generic popup / modal compatibility.
   Covers Fancybox, Bootstrap modal, Elementor popup, Beaver Builder popup.
   ------------------------------------------------------------------------- */
.fancybox-content        .cftc-turnstile-wrapper,
.modal-body              .cftc-turnstile-wrapper,
.elementor-popup-modal   .cftc-turnstile-wrapper,
.dialog-widget-content   .cftc-turnstile-wrapper,
[class*="popup"]         .cftc-turnstile-wrapper,
[class*="modal"]         .cftc-turnstile-wrapper {
	overflow: visible !important;
}

/* -------------------------------------------------------------------------
   5. Standard (non-dynamic) auto-render widget.
   ------------------------------------------------------------------------- */
.cf-turnstile {
	overflow: visible !important;
	min-height: 68px;
	margin: 12px 0;
}