/* Smart CTA Builder - Frontend Styles */

.scta-cta {
	font-family: inherit;
	box-sizing: border-box;
}

/* Inline */
.scta-inline {
	width: 100%;
	margin: 2em auto;
	display: block;
	opacity: 0;
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.scta-inline.scta-visible { opacity: 1; }

/* Sticky */
.scta-sticky {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 99999;
	border-radius: 0 !important;
	max-width: 100% !important;
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.scta-sticky[data-position="bottom"] { bottom: 0; transform: translateY(110%); }
.scta-sticky[data-position="top"]    { top: 0;    transform: translateY(-110%); }
.scta-sticky.scta-visible { transform: translateY(0) !important; }
.scta-sticky .scta-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 24px;
}

/* Popup */
.scta-popup-wrap {
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	backdrop-filter: blur(4px);
}
.scta-popup-wrap.scta-visible {
	opacity: 1;
	visibility: visible;
}
.scta-popup-wrap .scta-popup-inner {
	position: relative;
	width: 90%;
	max-width: 640px;
	transform: translateY(24px) scale(0.97);
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.scta-popup-wrap.scta-visible .scta-popup-inner {
	transform: translateY(0) scale(1);
}

/* Inner layout */
.scta-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}
.scta-inner.scta-layout-left  { flex-direction: row;         text-align: left;  }
.scta-inner.scta-layout-right { flex-direction: row-reverse; text-align: right; }

.scta-text-block { flex: 1; }

.scta-heading {
	margin: 0 0 10px;
	font-size: 1.5em;
	font-weight: 800;
	line-height: 1.2;
}

.scta-subheading {
	margin: 0 0 20px;
	line-height: 1.6;
}

.scta-image {
	max-width: 120px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
}

.scta-close {
	position: absolute;
	top: 12px;
	right: 14px;
	background: none;
	border: none;
	font-size: 22px;
	cursor: pointer;
	opacity: 0.5;
	line-height: 1;
	padding: 4px 8px;
	transition: opacity 0.2s;
}
.scta-close:hover { opacity: 1; }

/* Animations */
.scta-anim-fade { animation: sctaFadeIn 0.5s ease forwards; }
.scta-anim-slide { animation: sctaSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.scta-anim-bounce { animation: sctaBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.scta-anim-pulse { animation: sctaPulse 0.5s ease forwards; }

@keyframes sctaFadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes sctaSlideIn {
	from { opacity: 0; transform: translateX(-32px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes sctaBounce {
	from { opacity: 0; transform: scale(0.8); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes sctaPulse {
	0%   { opacity: 0; transform: scale(0.95); }
	50%  { opacity: 1; transform: scale(1.02); }
	100% { opacity: 1; transform: scale(1); }
}

@media ( max-width: 600px ) {
	.scta-inner.scta-layout-left,
	.scta-inner.scta-layout-right {
		flex-direction: column;
		text-align: center;
	}
	.scta-sticky .scta-inner { padding: 12px 16px; }
}