/**
 * Lexzur CTA block — shared styles.
 *
 * Loaded on the frontend AND inside the block editor via the block's
 * `style_handles` (see lexzur_cta_register_block() in functions.php).
 * The single editor-only rule lives at the bottom, scoped under
 * .editor-styles-wrapper so it is inert on the frontend.
 */

.lexzur-cta {
	position: relative;
	margin-top: 15px;
	margin-bottom: 15px;
	border-radius: 20px;
	padding: 48px 56px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(10, 18, 32, .08);
	box-shadow: 0 4px 20px rgba(10, 18, 32, .06);
	font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
	color: #0A1220;
}

/* The card itself is included deliberately: the frontend gets border-box from
   Bootstrap's global reset, but Bootstrap is not loaded in the block editor, so
   without this the horizontal padding is added outside the width the editor
   constrains the block to and the card renders wider than its siblings. */
.lexzur-cta,
.lexzur-cta *,
.lexzur-cta *::before,
.lexzur-cta *::after {
	box-sizing: border-box;
}

.lexzur-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(600px 220px at 8% 0%, rgba(142, 59, 218, .08), transparent 60%),
		radial-gradient(600px 260px at 100% 100%, rgba(37, 171, 134, .09), transparent 60%);
	pointer-events: none;
}

.lexzur-cta-body {
	position: relative;
	z-index: 1;
	max-width: 560px;
}

.lexzur-cta-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #1E8E6F;
	margin: 0 0 12px;
}

.lexzur-cta-eyebrow .lexzur-cta-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: linear-gradient(135deg, #8E3BDA, #34D3A6);
	flex: none;
}

.lexzur-cta-title {
	font-size: 26px;
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: -.01em;
	margin: 0 0 10px;
	color: #0A1220;
}

.lexzur-cta-sub {
	font-size: 15px;
	line-height: 1.6;
	color: #4C5467;
	margin: 0;
}

.lexzur-perks {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 18px;
	margin-top: 14px;
	flex-wrap: wrap;
}

.lexzur-perk {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #4C5467;
}

.lexzur-perk svg {
	flex: none;
	width: 14px;
	height: 14px;
	color: #25AB86;
	display: block;
}

.lexzur-cta-actions {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 12px;
	flex-shrink: 0;
	flex-wrap: wrap;
}

.lexzur-btn {
	appearance: none;
	border: none;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	padding: 14px 26px;
	border-radius: 10px;
	white-space: nowrap;
	transition: transform .16s cubic-bezier(.2, .6, .2, 1), box-shadow .16s, background .16s, border-color .16s;
}

.lexzur-btn svg {
	flex: none;
	width: 16px;
	height: 16px;
	display: block;
}

.lexzur-btn:hover {
	transform: translateY(-2px);
}

.lexzur-btn-primary {
	background: #25AB86;
	color: #fff !important;
	box-shadow: 0 8px 24px rgba(37, 171, 134, .35);
}

.lexzur-btn-primary:hover {
	background: #1E8E6F;
	box-shadow: 0 10px 28px rgba(37, 171, 134, .45);
}

.lexzur-btn-ghost {
	background: transparent;
	color: #0A1220 !important;
	border: 1.5px solid rgba(10, 18, 32, .16);
}

.lexzur-btn-ghost:hover {
	border-color: #25AB86;
	background: rgba(37, 171, 134, .06);
}

.lexzur-btn-secondary {
	background: rgba(37, 171, 134, .08);
	color: #1E8E6F !important;
	border: 1.5px solid rgba(37, 171, 134, .30);
}

.lexzur-btn-secondary:hover {
	background: rgba(37, 171, 134, .14);
	border-color: #25AB86;
}

@media (prefers-reduced-motion: reduce) {

	.lexzur-btn {
		transition: none;
	}

	.lexzur-btn:hover {
		transform: none;
	}
}

[dir="rtl"] .lexzur-btn svg {
	transform: scaleX(-1);
}

@media (max-width: 850px) {

	.lexzur-cta {
		flex-direction: column;
		align-items: flex-start;
		padding: 36px 28px;
	}

	.lexzur-cta-actions {
		width: 100%;
	}

	.lexzur-btn {
		flex: 1;
		justify-content: center;
	}
}

/* Block editor only — .editor-styles-wrapper never exists on the frontend.
   The canvas preview renders <span> elements, but neutralise pointer/selection
   behaviour anyway so clicks always land on the block, not its buttons. */
.editor-styles-wrapper .lexzur-btn {
	pointer-events: none;
	user-select: none;
}