.elementor-13159 .elementor-element.elementor-element-3273e4d{--display:flex;}/* Start custom CSS for shortcode, class: .elementor-element-3884a36 *//* Force custom gradient styling to the "Place Order" button */
button#place_order,
.woocommerce #payment #place_order.button.alt {
    background: linear-gradient(to right, #3C5480, #85D9BD) !important; /* Force gradient */
    color: #fff !important; /* Force white text */
    font-weight: bold !important;
    padding: 10px 20px !important;
    border: none !important;
    border-radius: 5px !important; /* Rounded corners */
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background-position 0.5s ease-in-out, transform 0.3s ease-in-out !important; /* Smooth transition */
    background-size: 200% 100% !important; /* Makes gradient larger for sliding effect */
    background-position: left center !important; /* Default gradient position */
}

/* Hover Effect: Slide the gradient to the right */
button#place_order:hover,
.woocommerce #payment #place_order.button.alt:hover {
    background-position: right center !important; /* Move gradient position smoothly */
    transform: scale(1.05) !important; /* Slight zoom on hover */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1) !important; /* Subtle shadow */
}

/* Make sure the button looks consistent across all views */
button#place_order:focus,
.woocommerce #payment #place_order.button.alt:focus {
    outline: none !important; /* Remove focus outline */
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2) !important; /* Add a subtle focus shadow */
}

/* Mobile adjustments for smaller screens */
@media (max-width: 768px) {
    button#place_order,
    .woocommerce #payment #place_order.button.alt {
        font-size: 14px !important; /* Slightly smaller text on mobile */
        padding: 8px 15px !important; /* Adjust padding for smaller screens */
    }
}

/* Apply custom gradient styling to the "Apply Coupon" button */
button.button[name="apply_coupon"] {
    background: linear-gradient(to right, #3C5480, #85D9BD) !important; /* Your gradient colors */
    color: #fff !important; /* White text */
    font-weight: bold !important;
    padding: 10px 20px !important;
    border: none !important;
    border-radius: 5px !important; /* Rounded corners */
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background-position 0.5s ease-in-out, transform 0.3s ease-in-out !important; /* Smooth transition */
    background-size: 200% 100% !important; /* Makes gradient larger for sliding effect */
    background-position: left center !important; /* Default gradient position */
}

/* Hover Effect: Slide the gradient to the right */
button.button[name="apply_coupon"]:hover {
    background-position: right center !important; /* Move gradient position smoothly */
    transform: scale(1.05) !important; /* Slight zoom on hover */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1) !important; /* Subtle shadow */
}

/* Make sure the button looks consistent across all views */
button.button[name="apply_coupon"]:focus {
    outline: none !important; /* Remove focus outline */
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2) !important; /* Add a subtle focus shadow */
}

/* Mobile adjustments for smaller screens */
@media (max-width: 768px) {
    button.button[name="apply_coupon"] {
        font-size: 14px !important; /* Slightly smaller text on mobile */
        padding: 8px 15px !important; /* Adjust padding for smaller screens */
    }
}/* End custom CSS */