.homepage-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.2s ease;
    position: relative;
    overflow: hidden;
}

.homepage-action-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0);
    transition: background 0.18s ease;
}

.homepage-action-btn:hover::after {
    background: rgba(255,255,255,0.12);
}

.homepage-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.homepage-action-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.homepage-action-btn .btn-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Re-initiate Payment — dark navy */
.reinitiate-btn {
    background: linear-gradient(135deg, #2b2b5d 0%, #3d3d80 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(43,43,93,0.35);
}

/* Renew Cover — teal accent — visually distinct, same weight */
.renew-btn {
    background: linear-gradient(135deg, #43938f 0%, #2b5f60 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(43,143,140,0.35);
}

    /* Pulse ring on the Renew button to draw attention */
    .renew-btn::before {
        content: '';
        position: absolute;
        inset: -3px;
        border-radius: 10px;
        border: 2px solid rgba(67,147,143,0.5);
        animation: renew-pulse 2.4s ease-in-out infinite;
        pointer-events: none;
    }

@keyframes renew-pulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }

    50% {
        opacity: 0;
        transform: scale(1.06);
    }
}