.funnel-landing-block {
    border-radius: 5px;
    color: white;
    padding: .5em;
    text-decoration: none;
}

.wpfnl-button-subtitle {
	display: block;
	text-align: center;
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.2;
}

// ---bricks next step button subtitle style----
.wpfnl-has-subtitle {
    .bricks-button {
      display: inline-flex;
      flex-flow: column;
      align-items: center;
      gap: 0;
      justify-content: center;

      .icon-wrapper {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        justify-content: center;
        line-height: 1.3;
      }

      small {
        display: block;
        line-height: 1.1;
        letter-spacing: normal;
          text-decoration: none;
      }
    }
}



// Button Entrance Animations
// Base: hidden until wpfnl-animated is added by JS (viewport trigger)
.wpfnl-animation {
	opacity: 0;
	transition: none;
}
.bricks-editor-active,
.bricks-editor-active .wpfnl-animation {
	opacity: 1;
}

.wpfnl-animation.wpfnl-animated {
	opacity: 1;
	animation-duration: 0.8s;
	animation-fill-mode: both;
}

@keyframes wpfnl-fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes wpfnl-fadeInUp {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes wpfnl-fadeInDown {
	from { opacity: 0; transform: translateY(-30px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes wpfnl-fadeInLeft {
	from { opacity: 0; transform: translateX(-30px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes wpfnl-fadeInRight {
	from { opacity: 0; transform: translateX(30px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes wpfnl-zoomIn {
	from { opacity: 0; transform: scale(0.6); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes wpfnl-zoomInUp {
	from { opacity: 0; transform: scale(0.6) translateY(30px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes wpfnl-bounceIn {
	0%   { opacity: 0; transform: scale(0.3); }
	50%  { opacity: 1; transform: scale(1.05); }
	70%  { transform: scale(0.9); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes wpfnl-bounceInUp {
	0%   { opacity: 0; transform: translateY(60px); }
	60%  { opacity: 1; transform: translateY(-10px); }
	80%  { transform: translateY(5px); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes wpfnl-slideInUp {
	from { opacity: 0; transform: translateY(50px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes wpfnl-slideInLeft {
	from { opacity: 0; transform: translateX(-50px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes wpfnl-slideInRight {
	from { opacity: 0; transform: translateX(50px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes wpfnl-flipInX {
	from { opacity: 0; transform: perspective(400px) rotateX(90deg); }
	to   { opacity: 1; transform: perspective(400px) rotateX(0); }
}
@keyframes wpfnl-flipInY {
	from { opacity: 0; transform: perspective(400px) rotateY(90deg); }
	to   { opacity: 1; transform: perspective(400px) rotateY(0); }
}
@keyframes wpfnl-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%       { transform: scale(1.06); }
}
@keyframes wpfnl-tada {
	0%   { transform: scale(1); }
	10%, 20% { transform: scale(0.9) rotate(-3deg); }
	30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
	40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
	100% { transform: scale(1) rotate(0); }
}
@keyframes wpfnl-wobble {
	0%   { transform: translateX(0); }
	15%  { transform: translateX(-10px) rotate(-5deg); }
	30%  { transform: translateX(8px) rotate(3deg); }
	45%  { transform: translateX(-6px) rotate(-3deg); }
	60%  { transform: translateX(4px) rotate(2deg); }
	75%  { transform: translateX(-2px) rotate(-1deg); }
	100% { transform: translateX(0); }
}

// Map animation keys to keyframes
.wpfnl-animation.wpfnl-animated {
	&.fadeIn      { animation-name: wpfnl-fadeIn; }
	&.fadeInUp    { animation-name: wpfnl-fadeInUp; }
	&.fadeInDown  { animation-name: wpfnl-fadeInDown; }
	&.fadeInLeft  { animation-name: wpfnl-fadeInLeft; }
	&.fadeInRight { animation-name: wpfnl-fadeInRight; }
	&.zoomIn      { animation-name: wpfnl-zoomIn; }
	&.zoomInUp    { animation-name: wpfnl-zoomInUp; }
	&.bounceIn    { animation-name: wpfnl-bounceIn; }
	&.bounceInUp  { animation-name: wpfnl-bounceInUp; }
	&.slideInUp   { animation-name: wpfnl-slideInUp; }
	&.slideInLeft { animation-name: wpfnl-slideInLeft; }
	&.slideInRight{ animation-name: wpfnl-slideInRight; }
	&.flipInX     { animation-name: wpfnl-flipInX; }
	&.flipInY     { animation-name: wpfnl-flipInY; }
	&.pulse       { animation-name: wpfnl-pulse; }
	&.tada        { animation-name: wpfnl-tada; }
	&.wobble      { animation-name: wpfnl-wobble; }
}

// Responsive Display - Bricks Next Step Button
// Matches the same breakpoints used in Gutenberg block (style.scss)
@media (min-width: 1200px) {
	.wpfnl-hide-desktop {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.wpfnl-hide-tablet {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.wpfnl-hide-mobile {
		display: none !important;
	}
}