.ap-wrapper {
    display: flex;
    width: 100%;
}

.ap-pill {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 40px;
    padding: 12px 24px 12px 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    gap: 16px;
}

.ap-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ebf7ee;
    color: #327c4b;
    font-weight: bold;
    font-size: 14px;
    padding: 12px;
    min-width: 48px;
    height: 48px;
    border-radius: 16px;
    transition: all 0.3s ease;
    overflow: hidden; /* For image rounded corners */
}

.ap-badge svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.ap-badge img {
    max-width: 100%;
    height: auto;
    display: block;
}

.ap-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ap-title {
    font-size: 16px;
    font-weight: 700;
    color: #1b233a;
    line-height: 1.2;
    margin-bottom: 4px;
}

.ap-subtitle {
    font-size: 13px;
    color: #8892a3;
    line-height: 1.2;
}

/* Hover Animations */
.ap-hover-float:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.ap-hover-scale:hover {
    transform: scale(1.03);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.ap-hover-glow:hover {
    box-shadow: 0 0 20px rgba(50, 124, 75, 0.3);
}
.ap-hover-glow:hover .ap-badge {
    box-shadow: 0 0 15px rgba(50, 124, 75, 0.5);
}

/* Continuous Animations */
@keyframes ap-pulse-continuous {
    0% { transform: scale(1); }
    50% { transform: scale(1.04); }
    100% { transform: scale(1); }
}
.ap-continuous-pulse {
    animation: ap-pulse-continuous 2s infinite ease-in-out;
}

@keyframes ap-float-continuous {
    0% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}
.ap-continuous-float_continuous {
    animation: ap-float-continuous 3s infinite ease-in-out;
}

@keyframes ap-bounce-continuous {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.ap-continuous-bounce {
    animation: ap-bounce-continuous 2s infinite cubic-bezier(0.28, 0.84, 0.42, 1);
}

/* Pause continuous animation on hover so hover animation takes over if selected */
.ap-pill:hover {
    animation-play-state: paused;
}