/**
 * Block: CTA Button - Styles
 */

/* Base Styles */
.acf-block {
    position: relative;
}

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Montserrat:wght@400;500;600;700;800;900&family=Roboto:wght@400;500;700;900&family=Lexend:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');

/* Font Family Classes */
.font-inter {
    font-family: 'Inter', sans-serif;
}

.font-montserrat {
    font-family: 'Montserrat', sans-serif;
}

.font-roboto {
    font-family: 'Roboto', sans-serif;
}

.font-lexend {
    font-family: 'Lexend', sans-serif;
}

.font-plus-jakarta-sans {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* CTA Button Block */
.cta-button-block {
    padding: 0;
}

/* Alignment */
.cta-button-block.align-left {
    text-align: left;
}

.cta-button-block.align-center {
    text-align: center;
}

.cta-button-block.align-right {
    text-align: right;
}

/* Button base */
.cta-button {
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
}

.cta-button i {
    flex-shrink: 0;
}

/* Display type: Inline (inline-flex) — default */
.cta-button-block.btn-inline .cta-button {
    display: inline-flex;
    width: auto;
}

/* Display type: Block (flex) */
.cta-button-block.btn-block .cta-button {
    display: flex;
    width: 100%;
}

/* Display type: Inline Block */
.cta-button-block.btn-inline-block .cta-button {
    display: inline-block;
    width: auto;
}

/* Mobile: only force full-width for block display type */
@media (max-width: 640px) {
    .cta-button-block.btn-block .cta-button {
        width: 100%;
        justify-content: center;
    }
}

/* Hover Effect Keyframes */
@keyframes cta-shake {
    0%, 100% { transform: translateX(0); }
    15%       { transform: translateX(-6px) rotate(-2deg); }
    30%       { transform: translateX(6px) rotate(2deg); }
    45%       { transform: translateX(-5px) rotate(-1deg); }
    60%       { transform: translateX(5px) rotate(1deg); }
    75%       { transform: translateX(-3px); }
    90%       { transform: translateX(3px); }
}

@keyframes cta-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.07); }
}

@keyframes cta-bounce {
    0%, 100% { transform: translateY(0); }
    40%       { transform: translateY(-10px); }
    70%       { transform: translateY(-5px); }
}

@keyframes cta-wobble {
    0%, 100% { transform: rotate(0deg); }
    15%       { transform: rotate(-5deg); }
    30%       { transform: rotate(5deg); }
    45%       { transform: rotate(-4deg); }
    60%       { transform: rotate(4deg); }
    75%       { transform: rotate(-2deg); }
    90%       { transform: rotate(2deg); }
}