/**
 * Empex Cloudflare Turnstile – Frontend Stylesheet
 *
 * Provides layout safety for Turnstile widget containers
 * across all form integrations.
 *
 * @package Empex_Cloudflare_Turnstile
 * @since   1.0.0
 */

/* ================================================================== */
/* Widget Wrapper                                                     */
/* ================================================================== */

.empex-ct-widget-wrap {
	margin: 16px 12px;
	clear: both;
	min-height: 65px;
	/* Claim the entire row regardless of what flex container we land in
	 * (e.g. Elementor's flex-wrap field container). Without this, the
	 * wrap shrinks to the width of the Turnstile box itself, leaving
	 * leftover space on the same line for the submit button to slot
	 * into — which is what caused the widget and button to collide
	 * side-by-side instead of the button wrapping to its own line. */
	width: 100%;
	flex: 1 1 100%;
	box-sizing: border-box;
}

.empex-ct-align-left   { display: flex; flex-wrap: wrap; justify-content: flex-start; margin-left: 0;   margin-right: auto; }
.empex-ct-align-right  { display: flex; flex-wrap: wrap; justify-content: flex-end;  margin-right: 0;   margin-left: auto; }
.empex-ct-align-center { display: flex; flex-wrap: wrap; justify-content: center;   margin-left: auto; margin-right: auto; }

.empex-ct-widget-wrap .empex-ct-turnstile,
.empex-ct-widget-wrap .cf-turnstile {
	display: block;
}

.empex-ct-message {
	color: #b32d2e;
	font-size: 13px;
	line-height: 1.4;
	margin-top: 8px;
	/* .empex-ct-widget-wrap becomes a flex row when an alignment class is
	 * active, and this message is appended as a sibling of the widget
	 * inside that same row. Without an explicit full-width basis, both
	 * items shrink to fit one line, crushing the message text into an
	 * unreadable vertical sliver (and squeezing the widget with it). */
	flex-basis: 100%;
	width: 100%;
}

/* ================================================================== */
/* Flexible size — fluid width (Cloudflare native responsive mode)    */
/* Min width is 300px per Cloudflare; only fits containers >= 300px.  */
/* ================================================================== */

.empex-ct-widget-wrap .empex-ct-turnstile[data-size="flexible"],
.empex-ct-widget-wrap .cf-turnstile[data-size="flexible"] {
	width: 100%;
	min-height: 65px;
}

/* ================================================================== */
/* Compact size — fixed small footprint for very narrow sidebars      */
/* ================================================================== */

.empex-ct-widget-wrap .empex-ct-turnstile[data-size="compact"],
.empex-ct-widget-wrap .cf-turnstile[data-size="compact"] {
	width: 150px;
	max-width: 150px;
	min-height: 140px;
}

/* ================================================================== */
/* WordPress Login / Registration / Lost Password                     */
/*                                                                    */
/* The #login card is 320px wide while the #loginform content box is  */
/* only ~272px (320 - 2x24 padding). A fixed 300px "normal" widget    */
/* left-aligned to the content box runs past the card's right edge    */
/* and clips the Cloudflare logo. Seat it inside the wider card with  */
/* a small negative margin instead of resizing the widget.            */
/* ================================================================== */

.login .empex-ct-widget-wrap,
.empex-ct-widget-wrap--narrow {
	margin: 16px 0 10px;
}

.login .empex-ct-widget-wrap .empex-ct-turnstile[data-size="normal"],
.login .empex-ct-widget-wrap .cf-turnstile[data-size="normal"],
.empex-ct-widget-wrap--narrow .empex-ct-turnstile[data-size="normal"],
.empex-ct-widget-wrap--narrow .cf-turnstile[data-size="normal"] {
	margin-left: -15px;
}

/* ================================================================== */
/* WordPress Comments                                                 */
/* ================================================================== */

.comment-form .empex-ct-widget-wrap {
	margin: 12px 0;
}

/* ================================================================== */
/* WooCommerce Checkout                                               */
/* ================================================================== */

.woocommerce-checkout .empex-ct-widget-wrap {
	margin: 15px 0;
}

/* ================================================================== */
/* WooCommerce My Account                                             */
/* ================================================================== */

.woocommerce-account .empex-ct-widget-wrap {
	margin: 12px 0;
}

/* ================================================================== */
/* WooCommerce Blocks Checkout                                        */
/* ================================================================== */

.wc-block-checkout .empex-ct-widget-wrap {
	margin: 16px 0;
}

/* ================================================================== */
/* Hidden Token Input (accessibility)                                 */
/* ================================================================== */

.empex-ct-widget-wrap input[name="empex-ct-token"] {
	display: none !important;
	visibility: hidden !important;
	position: absolute !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* ================================================================== */
/* RTL Support                                                        */
/* ================================================================== */

[dir="rtl"] .empex-ct-widget-wrap {
	text-align: right;
}

[dir="rtl"] .login .empex-ct-widget-wrap .empex-ct-turnstile[data-size="normal"],
[dir="rtl"] .login .empex-ct-widget-wrap .cf-turnstile[data-size="normal"],
[dir="rtl"] .empex-ct-widget-wrap--narrow .empex-ct-turnstile[data-size="normal"],
[dir="rtl"] .empex-ct-widget-wrap--narrow .cf-turnstile[data-size="normal"] {
	margin-left: 0;
	margin-right: -15px;
}

/* ================================================================== */
/* Floating attribution badge                                         */
/* ================================================================== */

.empex-ct-floating-badge {
	position: fixed;
	bottom: 20px;
	z-index: 9999;
	background: #fff;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.empex-ct-floating-badge:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.empex-ct-badge-bottom-right { right: 20px; }
.empex-ct-badge-bottom-left  { left: 20px; }

.empex-ct-floating-badge img {
	width: 20px;
	height: 20px;
	display: block;
}

.empex-ct-floating-badge.is-hidden {
	transform: translateY(120%);
	opacity: 0;
}

@media (max-width: 480px) {
	.empex-ct-floating-badge { width: 32px; height: 32px; }
	.empex-ct-floating-badge img { width: 18px; height: 18px; }
}