Help needed with customizing WooCommerce checkout coupon layout

Hi,

I’m trying to reposition the coupon input field on my WooCommerce checkout page — specifically, I’ve successfully moved it below the list of products and above the order total using a custom PHP hook and some CSS. However, I’m having several display issues on both desktop and mobile views that I haven’t been able to resolve.

Desktop version:

– I would like the coupon input field and “Apply Coupon” button to stretch fully to match the margin of the “Your Order” section (right now it cuts short).

– When clicking on the “Have a coupon? Click here to enter your code” message, the text jumps to the center oddly — I’d prefer it remains aligned and doesn’t shift.

Mobile version:

– The “Have a coupon?” sentence should stay in place but be better styled to fit the mobile layout — it shouldn’t shift above or look too disconnected. How can I “have a coupon” align left and make it in one row?
– The “Apply coupon” button is fine in a second row, but I’d like it to stretch full width to align with the input field for better UX.

This is code I have beed used for Custom CSS:

.woocommerce-checkout .checkout_coupon {
display: flex;
gap: 10px;
padding: 0 !important;
margin: 0 !important;
border: none !important;
align-items: center;
}

.woocommerce-checkout .checkout_coupon input[type=”text”] {
flex: 1;
padding: 12px;
font-size: 14px;
border: 1px solid #ccc;
box-sizing: border-box;
}

.woocommerce-checkout .checkout_coupon input[type=”submit”] {
padding: 12px 20px;
font-size: 14px;
border: none;
background-color: #062a2e;
color: white;
cursor: pointer;
}

.woocommerce-checkout .checkout_coupon input[type=”submit”]:hover {
background-color: #0c3c40;
}

I’ve attached screenshots for reference.
Can you please help me adjust the layout and appearance so everything looks polished across both desktop and mobile? What code lines should I add?

Thank you so much in advance!