/* ===========================================================
   FunnelKit checkout skin — brand colours only.
   Palette lifted from src/tailwind.css (#static custom props) so the
   checkout matches the landing pages. Layout/typography stay FunnelKit's;
   we only re-colour buttons, links, icons and form accents.
   Scoped to body.woocommerce-checkout so nothing bleeds elsewhere.
   =========================================================== */

body.woocommerce-checkout {
    --opp-white: #ffffff;
    --opp-brand-red: #fb2c36;
    --opp-brand-green: #00c950;
    --opp-brand-dark: #111827;
    --opp-brand-gray: #f3f4f6;
    --opp-brand-darkgreen: #0d542b;
    --opp-brand-green800: #016630;
    --opp-brand-lightgreen: #eaf8ee;
    --opp-brand-darksection: #0a2012;
    --opp-brand-blackish: #141414;
    --opp-brand-featurebg: #2a2626;
    --opp-red-600: #dc2626;
    --opp-red-800: #991b1b;
}

/* --- Primary action: Place Order --------------------------------- */
body.woocommerce-checkout .wfacp_main_form #payment button#place_order,
body.woocommerce-checkout button#place_order {
    background-color: var(--opp-red-600) !important;
    border-color: var(--opp-red-600) !important;
    color: var(--opp-white) !important;
}

body.woocommerce-checkout .wfacp_main_form #payment button#place_order:hover,
body.woocommerce-checkout button#place_order:hover {
    background-color: var(--opp-red-800) !important;
    border-color: var(--opp-red-800) !important;
}

/* --- Secondary action: coupon Apply ------------------------------- */
body.woocommerce-checkout .wfacp-coupon-btn {
    background-color: var(--opp-brand-dark) !important;
    border-color: var(--opp-brand-dark) !important;
    color: var(--opp-white) !important;
}

body.woocommerce-checkout .wfacp-coupon-btn:hover {
    background-color: var(--opp-brand-blackish) !important;
    border-color: var(--opp-brand-blackish) !important;
}

/* --- Section headings --------------------------------------------- */
body.woocommerce-checkout .wfacp_section_heading.wfacp_section_title {
    color: var(--opp-brand-dark);
}

/* --- Links (continue shopping, login, change address…) ------------ */
body.woocommerce-checkout .wfacp_main_form a,
body.woocommerce-checkout .wfacp_mini_cart a:not(.wfacp_mini_cart_remove_item_from_cart),
body.woocommerce-checkout a.wfacp_continue_shopping {
    color: var(--opp-brand-green800);
}

body.woocommerce-checkout .wfacp_main_form a:hover,
body.woocommerce-checkout .wfacp_mini_cart a:not(.wfacp_mini_cart_remove_item_from_cart):hover,
body.woocommerce-checkout a.wfacp_continue_shopping:hover {
    color: var(--opp-brand-darkgreen);
}

/* --- Form accents: radios, checkboxes, focused fields -------------- */
body.woocommerce-checkout .wfacp_main_form input[type="radio"],
body.woocommerce-checkout .wfacp_main_form input[type="checkbox"] {
    accent-color: var(--opp-red-600);
}

body.woocommerce-checkout .wfacp_main_form .wfacp-form-control:focus,
body.woocommerce-checkout .wfacp_main_form .wfacp-form-control-wrapper.wfacp_field_focus {
    border-color: var(--opp-brand-dark);
}

/* --- Mini-cart: quantity stepper + remove icon --------------------- */
body.woocommerce-checkout .wfacp_quantity_selector a,
body.woocommerce-checkout .wfacp_quantity_selector span {
    color: var(--opp-brand-dark);
}

body.woocommerce-checkout .wfacp_quantity_selector a:hover {
    color: var(--opp-red-600);
}

/* FunnelKit draws the delete control three ways depending on layout: an
   inline SVG (fill="currentColor", but FK sets color:#bbb on the svg
   element itself), an a:before { content:'x' } pseudo-element, and a
   circular border — each carries its own explicit #bbb colour, so each
   needs its own red rule. */
body.woocommerce-checkout .wfacp_mini_cart_remove_item_from_cart,
body.woocommerce-checkout .wfacp_delete_item_wrap a,
body.woocommerce-checkout .wfacp_delete_item_wrap a svg {
    color: var(--opp-red-600) !important;
    border-color: var(--opp-red-600) !important;
    opacity: 1;
}

body.woocommerce-checkout .wfacp_delete_item_wrap a:before {
    color: var(--opp-red-600) !important;
}

body.woocommerce-checkout .wfacp_mini_cart_remove_item_from_cart:hover,
body.woocommerce-checkout .wfacp_delete_item_wrap a:hover,
body.woocommerce-checkout .wfacp_delete_item_wrap a:hover svg {
    color: var(--opp-red-800) !important;
    border-color: var(--opp-red-800) !important;
}

body.woocommerce-checkout .wfacp_delete_item_wrap a:hover:before {
    color: var(--opp-red-800) !important;
}

/* --- Trust blurb icons: force brand red ---------------------------- */
/* The icons are <img> SVGs, so recolour via filter: flatten to black,
   then build #dc2626 (red-600). Works for any icon image dropped in. */
body.woocommerce-checkout .et_pb_blurb .et_pb_main_blurb_image img {
    filter: brightness(0) saturate(100%) invert(18%) sepia(85%) saturate(4292%) hue-rotate(351deg) brightness(92%) contrast(89%);
}

/* If a blurb uses a Divi font icon instead of an image, colour it directly. */
body.woocommerce-checkout .et_pb_blurb .et-pb-icon {
    color: var(--opp-red-600) !important;
}

/* --- Totals row emphasis ------------------------------------------ */
body.woocommerce-checkout .wfacp_mini_cart .order-total .woocommerce-Price-amount {
    color: var(--opp-brand-dark);
}

/* --- Success / discount touches ------------------------------------ */
body.woocommerce-checkout .wfacp_mini_cart .cart-discount,
body.woocommerce-checkout .wfacp_active_coupon {
    color: var(--opp-brand-green800);
}