/* ==========================================================================
   Bike Plates Direct - checkout theming
   --------------------------------------------------------------------------
   The checkout pages (basket, payment, success) do not load bpd-brand.css,
   so they kept CPD's palette: green #4f7d00 and #2ecc71 primary actions and
   blue #4a90e2 secondary ones.

   Deliberately a small separate file rather than linking bpd-brand.css here.
   That stylesheet carries the site chrome, the hero and the whole builder
   layout, none of which the checkout has, and several of its rules are broad
   enough to disturb the checkout's own layout.

   Colour split: primary actions take the BPD orange, small secondary controls
   take BPD black. Everything orange would be overwhelming on a page that is
   mostly form fields.
   ========================================================================== */

:root {
    --bpd-orange: #fa4c06;
    --bpd-orange-dark: #d63f04;
    --bpd-black: #131313;
}

/* ---------- primary actions ---------- */
.checkout-btn,
.sticky-btn,
.pay-now-btn,
.add-new-plates-btn,
.basket-empty-btn,
button[style*="2ecc71"] {
    background: var(--bpd-orange) !important;
    background-color: var(--bpd-orange) !important;
    border-color: var(--bpd-orange) !important;
    color: #fff !important;
}
.checkout-btn:hover,
.sticky-btn:hover,
.pay-now-btn:hover,
.add-new-plates-btn:hover,
.basket-empty-btn:hover,
button[style*="2ecc71"]:hover {
    background: var(--bpd-orange-dark) !important;
    background-color: var(--bpd-orange-dark) !important;
}

/* ---------- secondary controls ----------
   Apply and Update Plate carry their colour in an inline style attribute with
   no class to hook, so they are matched on the attribute's contents. Unusual,
   but it beats adding classes to markup David also edits. */
/* "View options" (.options-toggle-btn) is deliberately NOT themed here. It is
   a text link carrying background:transparent inline, and it was both listed
   in this rule and caught by the attribute selector below - which matches the
   colour string ANYWHERE in the inline style attribute, including an element's
   TEXT colour. The result was a solid black chip behind the link (Matt,
   16 Sept). Hence the :not() as well as the removal. */
.mobile-fitting-btn,
button[style*="4a90e2"]:not(.options-toggle-btn),
a[style*="4a90e2"] {
    background: var(--bpd-black) !important;
    background-color: var(--bpd-black) !important;
    border-color: var(--bpd-black) !important;
    color: #fff !important;
}
.mobile-fitting-btn:hover,
button[style*="4a90e2"]:not(.options-toggle-btn):hover {
    background: #2b2b2b !important;
    background-color: #2b2b2b !important;
}

/* ---------- accents ---------- */
.basket-quantity input:focus,
.qty-control-row input:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--bpd-orange) !important;
    outline-color: var(--bpd-orange) !important;
}

/* Progress bar towards free delivery, and the running totals, were green. */
.basket-status,
div[style*="4a90e2"][style*="357abd"] {
    background: var(--bpd-orange) !important;
    background-image: none !important;
}
.sale-discount,
.subtotal,
.check-list li strong {
    color: var(--bpd-orange) !important;
}

/* Undo toast action */
.undo-toast .undo-btn {
    background: var(--bpd-orange) !important;
    color: #fff !important;
}
.undo-toast .undo-btn:hover { background: var(--bpd-orange-dark) !important; }

/* The tick marks in "Why buy from us?" were CPD green. */
.check-list li::before,
.why-buy li::before { color: var(--bpd-orange) !important; }