/* [CSS-006 | Payment/ButtonPrimaryPay] ====================================================
     Purpose: Primary "Pay" button default (enabled) appearance
     Dependencies: <button class="btn-pay">
     ================================================================================ */
button.btn-pay {
    background: #16a34a;
    color: #fff;
    padding: 8px 20px;
    border: 0;
    border-radius: 10px; /* optional; rounded like the screenshot */
    cursor: pointer;
    transition: background-color .15s ease, opacity .15s ease, filter .15s ease;
}

    /* [CSS-007 | Payment/ButtonPrimaryPayDisabled] ============================================
     Purpose: Very clear disabled state for Pay button
     Dependencies: <button class="btn-pay" disabled>
     ================================================================================ */
    button.btn-pay:disabled {
        background: #9ca3af; /* gray */
        color: #f3f4f6; /* lighter text */
        opacity: 0.75; /* slightly faded */
        cursor: not-allowed;
        filter: grayscale(0.2);
        box-shadow: none;
    }

    /* [CSS-008 | Payment/ButtonPrimaryPayHover] ===============================================
     Purpose: Hover effect only when button is enabled (avoid hover on disabled)
     Dependencies: <button class="btn-pay"> (enabled)
     ================================================================================ */
    button.btn-pay:not(:disabled):hover {
        background: #15803d;
    }