/* ==========================================================================
   PAY PAGE - LIGHT BAND

   "Pay Insurer" printed on a dark teal band with a deep panel inside it, while
   everything below it - the NCBA IPF card, the instalment calculator, the
   payment-proof form - was already white. The page therefore read as a dark
   slab with white cards floating on it, and the NCBA table had to hold its
   own against the band behind it.

   This sheet answers that band in the same currency its own stylesheet uses:
   payment-methods.css writes its colours with !important, so this has to as
   well. The cards are left alone - they were already the light part of the
   page, and they are the content. The colours are the ones the page already
   speaks: the navy it heads with, the grey-green of its body copy, and the
   deep gold of the NCBA table's headings, rather than a second palette.

   The footer is not touched here: it is the site's own, and shared with every
   page that is not the front page.
   ========================================================================== */

.payment-section {
    background: linear-gradient(180deg, #eef4f4 0%, #e9f1f1 60%, #e5eeee 100%) !important;
}

/* The panel keeps its shape and gives up its colour. It takes a pale ground of
   its own rather than plain white: the insurer rows, the NCBA card and the
   proof card are all white, and on a white panel they stopped reading as cards
   at all - the page went soft. On the tint they sit as they did on the band,
   which is what the rows are: a table of insurers. */
.payment-block {
    border: 1px solid rgba(1, 57, 71, 0.10);
    background: #f7fbfa;
    box-shadow: 0 16px 38px rgba(13, 52, 65, 0.08);
}

.payment-block + .payment-block {
    background: #f7fbfa;
    border-color: rgba(1, 57, 71, 0.10);
}

/* One row per insurer, drawn as a table row rather than a card that happens to
   sit there: a dark rule around each one, in the navy the page heads with, on
   white over the tint. The lift stays, but it is the border that says where
   one insurer ends and the next begins. */
.pm-insurer-card {
    border: 1px solid #013947;
    box-shadow: 0 5px 14px rgba(13, 52, 65, 0.05);
}

.payment-block-copy h3,
.payment-block-copy h1 {
    color: var(--primary-navy, #013947) !important;
}

.payment-block-copy p {
    color: #4f666d !important;
}

/* the words the copy emphasises pick up the gold, as they did on the band */
.payment-block-copy p strong {
    color: #8a6d1f;
}

/* the headings over each way to pay */
.payment-methods-heading {
    color: var(--primary-navy, #013947);
}

.payment-methods-lead {
    color: #4f666d;
}

.payment-methods-lead strong {
    color: #8a6d1f;
}

.pay-way-heading i,
.pay-in-4-heading i {
    color: #8a6d1f;
}

/* The two cards that state each way to pay, carried by other pages that use
   this stylesheet. They were glass on the band; on a light one they need a
   ground of their own. */
.pay-way {
    background: #f6fbfa;
    border: 1px solid rgba(1, 57, 71, 0.10);
}

.pay-way h4 {
    color: var(--primary-navy, #013947);
}

.pay-way h4 i,
.pay-way p strong {
    color: #8a6d1f;
}

.pay-way p {
    color: #4f666d;
}

/* The NCBA card and the payment-proof card take the same edge as the insurer
   rows, so the page's three blocks are drawn the same way: a dark table line,
   white inside, on the tint. */
.pay-ipf {
    border: 1px solid #013947;
    box-shadow: 0 12px 26px rgba(13, 52, 65, 0.07);
}

/* The proof form is a sub-container of the block rather than a card of its
   own, so the sheet underneath drew it as a plain section. It takes the same
   frame as the NCBA card above it: white, dark edge, 16px corners. */
.payment-block .payment-proof-card {
    border: 1px solid #013947;
    border-radius: 16px;
    background: #ffffff;
}

/* The reminder under the table. It was a white wash on the dark band; on this
   ground it becomes the pale gold it always meant. */
.pay-important {
    border: 1px solid rgba(138, 109, 31, 0.28);
    border-left: 4px solid #d4af37;
    background: #fffaef;
    color: #4f666d;
}

.pay-important strong {
    color: var(--primary-navy, #013947);
}

.pay-important strong:last-of-type {
    color: #8a6d1f;
}

/* the notes that stood on the band */
.payment-section .payment-note {
    background: #f3f8f8 !important;
    border: 1px solid rgba(1, 57, 71, 0.10) !important;
    color: #4f666d !important;
}

.payment-section .payment-note strong {
    color: var(--primary-navy, #013947);
}

.payment-section .pm-note,
.payment-section .payment-methods-note {
    color: #5b6b62 !important;
}