/* Button Arrow Styles - Left-aligned text with right-aligned arrow */
.wp-block-button .wp-element-button,
.wp-block-button__link {
    position: relative !important;
    padding-left: 1.5rem !important; /* Space for the arrow */
    padding-right: 6rem !important; /* Space for the arrow */
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: flex-start !important; /* Left-align the text */
    align-items: center !important;
    text-align: left !important;
}

/* Add the arrow as a pseudo-element */
.wp-block-button .wp-element-button::after,
.wp-block-button__link::after {
    content: "" !important;
    width: 22px !important;
    height: 22px !important;
    position: absolute !important;
    right: 1rem !important; /* Consistent distance from right edge */
    top: 50% !important;
    transform: translateY(-50%) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30.908' height='30.908' viewBox='0 0 30.908 30.908'%3E%3Cg transform='translate(2 2)'%3E%3Cpath d='M0,28.908a1.994,1.994,0,0,1-1.414-.586,2,2,0,0,1,0-2.828L25.494-1.414a2,2,0,0,1,2.828,0,2,2,0,0,1,0,2.828L1.414,28.322A1.994,1.994,0,0,1,0,28.908Z' fill='%23fff'/%3E%3Cpath d='M0,16.949a2,2,0,0,1-2-2V0A2,2,0,0,1,0-2,2,2,0,0,1,2,0V14.949A2,2,0,0,1,0,16.949Z' transform='translate(26.908)' fill='%23fff'/%3E%3Cpath d='M14.949,2H0A2,2,0,0,1-2,0,2,2,0,0,1,0-2H14.949a2,2,0,0,1,2,2A2,2,0,0,1,14.949,2Z' transform='translate(11.959)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    transition: transform 0.3s !important;
}

/* Ensure strong tags and text are left aligned */
.wp-block-button .wp-element-button strong,
.wp-block-button__link strong {
    text-align: left !important;
}

/* Hover effects */
.wp-block-button .wp-element-button:hover,
.wp-block-button__link:hover {
    background-color: #a81f1d !important; /* Darker version of #d2302d */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(-2px) !important;
}

.wp-block-button .wp-element-button:hover::after,
.wp-block-button__link:hover::after {
    transform: translateY(-50%) rotate(45deg) !important;
}

/* Ripple effect */
.wp-block-button .wp-element-button .ripple,
.wp-block-button__link .ripple {
    position: absolute !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.4) !important;
    width: 100px !important;
    height: 100px !important;
    margin-top: -50px !important;
    margin-left: -50px !important;
    animation: ripple 0.6s linear !important;
    transform: scale(0) !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

@keyframes ripple {
    to {
        transform: scale(4) !important;
        opacity: 0 !important;
    }
}