@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.w-tab-pane.w--tab-active {
    animation: fadeInTab 1s ease;
    /* Ensure the tab is visible and animates in */
    opacity: 1;
}

@keyframes tiltLeftAndBack {
    0% {
        transform: rotate(0deg);
    }

    40% {
        transform: rotate(-10deg);
    }
}

.tilt-animate {
    animation: tiltLeftAndBack 0.3s cubic-bezier(0.2, 0.2, 0.2, 0.2);
}

.smarties-arrow {
    animation: tiltLeftAndBack 3s ease-in-out infinite;
}

.seesmarties-arrow-2 {
    animation: tiltLeftAndBack 3s ease-in-out infinite;
}

@keyframes loaderRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loader-spin {
    animation: loaderRotate 1s linear infinite;
}

/* Journey sections fade-in */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Active state for journey step indicator */
.step-indicator.w--current {
    /* make this heartbeat like big -> small -> big */
    animation: heartbeat 1s ease-in-out infinite;
}

.fade-in {
    opacity: 0;
    transition: opacity 1.5s ease-out;
}

.fade-in.is-visible {
    opacity: 1;
}


/* PhoneNumberField */
.copy-swap {
    position: relative;
}

.copy-swap .number-text {
    opacity: 1;
    transition: opacity .2s ease;
}

.copy-swap .number-text.hidden {
    opacity: 0;
}

.copy-swap .copied-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s ease;
}

.copy-swap .copied-text.show {
    opacity: 1;
}

.call-mini-dial {
    display: inline-flex;
    margin-left: 10px;
    vertical-align: middle;
    border-radius: 999px;
    background: #dbedde;
    padding: 6px;
}

.call-mini-dial img {
    width: 18px;
    height: 18px;
}

.cs-number-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Step 3 slides fade animations */
@keyframes slideFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

.newdemo-03 .slide-fade-in {
    animation: slideFadeIn 1.5s ease both;
}

.newdemo-03 .slide-fade-out {
    animation: slideFadeOut 1.5s ease both;
}

/* Smooth selection transition for number cards */
.show-number-card {
    transition: border-color 0.35s ease, filter 0.35s ease;
}

/* Keep website icon visible regardless of autofill */
.inputwebsite {
    position: relative;
}

.inputwebsite .inputwebsite-field {
    background-image: none !important;
    padding-left: 40px;
}

.inputwebsite::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 42%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    background: url('../images/smarties-icon-inputwebsite.svg') no-repeat center/20px 20px;
    pointer-events: none;
}

/* Chrome/Safari autofill */
.inputwebsite .inputwebsite-field:-webkit-autofill,
.inputwebsite .inputwebsite-field:-webkit-autofill:hover,
.inputwebsite .inputwebsite-field:-webkit-autofill:focus,
.inputwebsite .inputwebsite-field:-webkit-autofill:active {
    -webkit-text-fill-color: #333;
    -webkit-box-shadow: 0 0 0px 1000px #f5f5f5 inset;
    background-image: none !important;
}

/* Firefox (approximate) */
.inputwebsite .inputwebsite-field:autofill,
.inputwebsite .inputwebsite-field:-moz-autofill {
    background-image: none !important;
}