/* ==========================================================================
   Payment section
   Step 6's proof-of-payment actions, and the Pay to Insurer panel whose cards
   are built from the provider data the engine already carries.
   ========================================================================== */

/* ---------- step 6: sending the proof of payment ---------- */

/* How It Works runs as three cards: Get Started, Pay the Premium to Insurer and
   Accepted Payment Methods, which also carries the proof-of-payment buttons. */

/* the badge has to out-specify ".payment-step .step-num" to become a pill */
.payment-step .step-num-range {
    width: auto;
    min-width: 30px;
    padding: 0 0.6rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
}

/* Card 1's three entries use the same icon + heading + line layout as card 3. */
.payment-merged-list {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px dashed #dbe3ea;
}

.payment-merged-list .payment-inline-method h4 {
    margin: 0 0 0.12rem;
    color: var(--primary-navy);
    font-size: 0.82rem;
}

.payment-merged-list .payment-inline-method p {
    margin: 0;
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1.5;
}

.payment-merged-list .payment-inline-method > i {
    width: 18px;
    margin-top: 0.1rem;
    font-size: 0.92rem;
}

.payment-merged-list .payment-inline-method strong {
    /* the card's own `strong` rule styles headings, so reset it here */
    display: inline;
    margin: 0;
    font-size: inherit;
    color: var(--primary-navy);
    font-weight: 800;
}

.payment-proof-actions {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px dashed #dbe3ea;
}

.payment-proof-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    min-height: 52px;
    border-radius: 999px;
    color: #fff;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

/* label over address, both inside the pill */
.payment-proof-btn-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-width: 0;
}

.payment-proof-btn-label {
    font-size: 0.84rem;
    font-weight: 750;
}

.payment-proof-btn-detail {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    opacity: 0.82;
}

.payment-proof-btn > i {
    font-size: 0.95rem;
}

/* the IPF interest bands under card 2's two ways to pay */
.payment-pay-interest {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px dashed #dbe3ea;
}

.payment-pay-interest-title {
    margin: 0 0 0.45rem;
    color: var(--primary-navy);
    font-size: 0.78rem;
    font-weight: 800;
}

.payment-pay-interest-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
    line-height: 1.35;
}

.payment-pay-interest-table th {
    padding: 0 0 0.35rem;
    color: #94a3b8;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 1px solid #eef2f6;
}

.payment-pay-interest-table th:last-child,
.payment-pay-interest-table td:last-child {
    text-align: right;
}

.payment-pay-interest-table td {
    padding: 0.32rem 0;
    color: #475569;
    border-bottom: 1px solid #f2f6f8;
}

.payment-pay-interest-table tr:last-child td {
    border-bottom: 0;
    color: var(--primary-navy);
    font-weight: 800;
}

.payment-proof-btn:hover {
    transform: translateY(-1px);
}

.payment-proof-email {
    background: var(--accent-green);
}

.payment-proof-email:hover {
    background: #01545f;
}

.payment-proof-whatsapp {
    background: var(--whatsapp-green);
}

.payment-proof-whatsapp:hover {
    background: #1da851;
}

.payment-proof-btn:focus-visible {
    outline: 3px solid rgba(1,57,71, 0.3);
    outline-offset: 2px;
}

.payment-methods-block {
    /* The same measure as the three step cards above: 3 x 290px plus the two
       1rem gaps between them. The cards sit inside that width rather than
       running to the edges of the screen. */
    max-width: calc(3 * 290px + 2 * 1rem);
    margin: 2.6rem auto 0;
    /* the nav links straight here, so clear the sticky header */
    scroll-margin-top: 92px;
}

.payment-methods-title {
    margin: 0 0 0.45rem;
    text-align: center;
    color: var(--primary-navy);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.25;
}

.payment-methods-title span {
    color: var(--accent-red);
}

.payment-methods-desc {
    margin: 0 auto 1.6rem;
    max-width: 660px;
    text-align: center;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ---------- one card per insurer ---------- */

.pm-card-grid {
    display: grid;
    /* one insurer per line, each stretched to the container width */
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.pm-insurer-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 1.15rem 1.2rem 1.05rem;
}

.pm-insurer-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9rem 1.2rem;
}

.pm-insurer-id {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.pm-insurer-logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 52px;
    padding: 5px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e8eef2;
    box-sizing: border-box;
    overflow: hidden;
}

.pm-insurer-logo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.pm-insurer-logo-text {
    background: #eaf6f5;
    border-color: #dbe8e9;
    color: var(--primary-navy);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.pm-insurer-title {
    min-width: 0;
}

.pm-insurer-title h4 {
    margin: 0;
    color: var(--primary-navy);
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.pm-insurer-title span {
    display: block;
    margin-top: 0.15rem;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* ---------- the method menu ---------- */

.pm-method-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-left: auto;
}

.pm-chip {
    font: inherit;
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1.5px solid #d9e0e8;
    background: #fff;
    color: #475569;
    font-size: 0.79rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.pm-chip:hover {
    border-color: rgba(1,57,71, 0.4);
    color: var(--primary-navy);
}

.pm-chip[aria-expanded="true"] {
    background: var(--primary-navy);
    border-color: var(--primary-navy);
    color: #fff;
}

.pm-chip:focus-visible {
    outline: 3px solid rgba(1,57,71, 0.3);
    outline-offset: 2px;
}

/* ---------- the open panel ---------- */

.pm-panel {
    margin-top: 1rem;
    padding: 0.9rem 1rem 0.4rem;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    background: #fbfdfd;
}

.pm-panel-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.75rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid #eef2f6;
    color: var(--primary-navy);
    font-size: 1rem;
    font-weight: 800;
}

.pm-panel-title .pm-method-logo,
.pm-panel-title .pm-method-icon {
    margin: 0;
}

.pm-method-logo,
.pm-method-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 34px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid #e8eef2;
    box-sizing: border-box;
    overflow: hidden;
}

.pm-method-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A bank's wordmark is wider than M-PESA's tile, so it is shown whole rather
   than cropped, and the tile is outlined in the bank's own colour. */
.pm-method-logo-bank {
    border-color: var(--pay-brand, #e8eef2);
}

.pm-method-logo-bank img {
    object-fit: contain;
    padding: 4px;
    box-sizing: border-box;
}

/* ---------- the bank's own mark ----------
   A bank or M-PESA tile on a payment card: their logo in a small white chip
   outlined in the brand's colour. The chip size is set by --pay-mark-h so the
   compact popup and the full payment card can each choose their own. */
.pay-method-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--pay-mark-h, 26px);
    min-width: 30px;
    padding: 3px 6px;
    border: 1px solid var(--pay-brand, #e2e8f0);
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
}

.pay-bank-logo {
    display: block;
    height: calc(var(--pay-mark-h, 26px) - 8px);
    width: auto;
    max-width: 104px;
    object-fit: contain;
}

/* The same mark beside a bank name inside a line of text, rather than in the
   title row of a payment card. */
.pay-method-mark-inline {
    --pay-mark-h: 22px;
    margin: 0 6px 0 0;
    vertical-align: middle;
}

/* ---------- the mark inside a method button ----------
   The bank is recognised before its panel is opened, so the button carries the
   same mark the panel title does. */
.pm-chip-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 17px;
    margin-right: 0.4rem;
}

.pm-chip-mark img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pm-chip-text {
    flex: 0 1 auto;
    min-width: 0;
}

/* ===== the NCBA IPF plan on a quote card =====
   Listed inside the payment-method card, beside the insurer's own ways to pay,
   so one quote states every way the premium can be settled: the plan's name,
   the three figures behind it, then the four payments. */
.payment-method-ipf .ipf-heading {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--primary-navy);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.25;
}

/* What the bank finances, what the financing costs, and what the four
   payments come to. */
.payment-method-ipf .ipf-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.15rem;
}

.payment-method-ipf .ipf-figures span {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.payment-method-ipf .ipf-figures small {
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 700;
}

.payment-method-ipf .ipf-figures strong {
    color: #0f172a;
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
}

.payment-method-ipf .payment-ipf-steps {
    display: grid;
    gap: 0.3rem;
    margin: 0.5rem 0 0.25rem;
    padding: 0;
    list-style: none;
}

.payment-method-ipf .payment-ipf-steps li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.74rem;
    color: #334155;
}

/* The month, then the payment: "September — KSh 26,168". */
.payment-method-ipf .ipf-step-when {
    min-width: 0;
    color: #013947;
    font-weight: 700;
}

.payment-method-ipf .ipf-step-when::after {
    content: ' \2014';
    color: #94a3b8;
    font-weight: 600;
}

/* The condition the bank attaches to the plan, stated with the plan. */
.payment-method-ipf .ipf-approval {
    display: block;
    margin-top: 0.4rem;
    font-style: italic;
}

.payment-method-ipf .payment-ipf-steps strong {
    white-space: nowrap;
}

.pm-method-icon {
    width: 34px;
    background: #eaf6f5;
    border-color: #dbe8e9;
    color: var(--primary-navy);
    font-size: 0.9rem;
}

/* The payment reference is stated once under the section heading, not on every
   insurer's card. */
.payment-methods-reference {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.4rem;
    max-width: 720px;
    margin: -0.9rem auto 1.6rem;
    padding: 0.55rem 0.9rem;
    border-radius: 10px;
    background: #eaf6f5;
    border: 1px solid #cfe4e5;
    color: #01545f;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
}

.payment-methods-reference i {
    margin-top: 0.2rem;
    color: var(--accent-green);
}

.pm-account {
    padding: 0 1rem 1rem;
}

.pm-account + .pm-account {
    border-top: 1px dashed #dfe7e7;
    padding-top: 0.9rem;
}

/* every figure reads as a label over its value, so paybills and account
   numbers carry the weight rather than sitting inside a sentence */
.pm-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.75rem 1.2rem;
}

.pm-figure {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.pm-label {
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pm-value {
    color: var(--primary-navy);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.005em;
    min-width: 0;
    overflow-wrap: anywhere;
}

.pm-note {
    margin: 1.2rem auto 0;
    max-width: 760px;
    text-align: center;
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.55;
}

@media (max-width: 640px) {
    .pm-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pm-insurer-card {
        padding: 1rem 0.95rem 0.9rem;
    }

    .pm-insurer-title h4 {
        font-size: 1.05rem;
    }

    .pm-insurer-logo {
        width: 54px;
        height: 46px;
    }

    .pm-method-menu {
        margin-left: 0;
        width: 100%;
    }

    .pm-chip {
        padding: 0.4rem 0.75rem;
        font-size: 0.74rem;
    }

    .pm-panel {
        padding: 0.8rem 0.85rem 0.3rem;
    }

    .pm-value {
        font-size: 1rem;
    }

    .pm-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   The three step cards read larger than the rest of the section.
   Placed last so these sizes win over the defaults they inherit.
   ========================================================================== */

.payment-step-grid-flow .payment-step > strong {
    font-size: 1.125rem;
}

.payment-step-grid-flow .payment-step .step-num {
    font-size: 0.94rem;
}

.payment-step-grid-flow .payment-inline-method h4 {
    font-size: 0.95rem;
}

.payment-step-grid-flow .payment-inline-method p {
    font-size: 0.875rem;
}

/* The split inside card 2's IPF option is part of the entry's copy, so it takes
   the same size, colour and marker as every other line in the cards. */
.payment-step-grid-flow .payment-pay-sub {
    display: grid;
    gap: 0.35rem;
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
}

.payment-step-grid-flow .payment-pay-sub li {
    position: relative;
    padding-left: 0.95rem;
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.5;
}

.payment-step-grid-flow .payment-pay-sub li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-green);
}

.payment-step-grid-flow .payment-pay-interest-title {
    font-size: 0.9rem;
}

.payment-step-grid-flow .payment-pay-interest-table th {
    font-size: 0.7rem;
}

.payment-step-grid-flow .payment-pay-interest-table td {
    font-size: 0.82rem;
}

.payment-step-grid-flow .payment-proof-btn-label {
    font-size: 0.95rem;
}

.payment-step-grid-flow .payment-proof-btn-detail {
    font-size: 0.78rem;
}

/* ==========================================================================
   The section reads as three numbered blocks: Pay the Insurer, Payment Method
   and Next Steps, each with its own heading and one-line explanation.
   ========================================================================== */

.payment-anchor {
    display: block;
    height: 0;
    /* the nav links straight here, so clear the sticky header */
    scroll-margin-top: 92px;
}

.payment-block {
    /* The same width as the partners container: both sit straight in the page
       container, so their edges line up. */
    width: 100%;
    max-width: none;
    margin: 2.6rem auto 0;
}

.payment-block-head {
    display: flex;
    align-items: flex-start;
    justify-content: center !important;
    gap: 0.7rem;
    max-width: 760px;
    margin: 0 auto 1.1rem;
    text-align: center !important;
}

.payment-block-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary-navy);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 800;
}

.payment-block-copy h3,
.payment-block-copy h1 {
    margin: 0 0 0.3rem;
    text-align: center !important;
    color: var(--primary-navy);
    /* the same weight of heading as "Our Trusted Insurers" */
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.2;
}

.payment-block-copy p {
    margin: 0;
    text-align: center !important;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* The steps that now sit under one heading, and the single Next Steps card. */
.payment-step-grid-methods {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
    margin: 1.6rem 0 0 !important;
}

.payment-step-grid-methods .payment-step {
    flex: 1 1 210px;
    max-width: 290px;
}

/* A phone cannot carry the desktop heading size, so it steps down. */
@media (max-width: 1024px) {
    .payment-block-copy h3,
    .payment-block-copy h1 {
        font-size: 1.7rem;
    }
}

/* ===== steps-match-partner-cards =====
   The Get Started cards take the same measure as the partner cards: the same
   three columns and gap inside a container of the same width, so the two grids
   line up card for card. */
#payment .payment-step-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.15rem !important;
    align-items: stretch !important;
}

#payment .payment-step-grid .payment-step {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
}

/* tablet: two per line, mobile: one - the same steps the partner grid takes */
@media (max-width: 1024px) {
    #payment .payment-step-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    #payment .payment-step-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.8rem !important;
    }
}

/* ==========================================================================
   Dark theme: each block sits in its own container, the first in deep green
   and the second in deep purple, so the section reads as two panels rather
   than one long light strip. The cards inside stay white and keep their own
   colours.
   ========================================================================== */

.payment-section {
    background: linear-gradient(180deg, #0f292a 0%, #0b1e1f 60%, #0a191a 100%) !important;
}

.payment-block {
    /* The wide bands on the page share one measure: the Medical Provider
       Directory's outer container. Flexible below that on a narrow screen. */
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 2.1rem 1.9rem 2.3rem;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(135deg, #143e40 0%, #0d2a2c 55%, #0a2223 100%);
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* the second container carries the closing CTA's purple, so the two read as a
   pair rather than one flat band */
.payment-block + .payment-block {
    background: linear-gradient(135deg, #2b1745 0%, #1d1030 55%, #150b25 100%);
    border-color: rgba(236, 194, 122, 0.22);
}

.payment-block-copy h3,
.payment-block-copy h1 {
    color: #fff !important;
}

.payment-block-copy p {
    color: rgba(255, 255, 255, 0.82) !important;
}

/* the words the copy emphasises pick up the gold the dark bands use */
.payment-block-copy p strong {
    color: #ecc27a;
}

/* the closing note sits on the dark band now */
.payment-section .payment-note {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #d8e5e6 !important;
}

.payment-section .payment-note strong {
    color: #fff;
}

/* the panel's own footnote, and any plain caption under the insurer cards */
.payment-section .pm-note,
.payment-section .payment-methods-note {
    color: rgba(255, 255, 255, 0.72) !important;
}

@media (max-width: 1024px) {
    .payment-block {
        /* the partners shell tightens the same way on a phone */
        padding: 1.2rem 0.9rem 1.4rem;
        border-radius: 20px;
    }
}


/* ===== the call to action at the foot of step 1 =====
   Same gold pill as the quote form's own Get My Quotes button, so the step
   reads as the way in to the form. */
.payment-step .payment-step-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 1rem;
  padding: 0.7rem 1.1rem;
  border-radius: 40px;
  background: #D5A72A;
  color: #013947;
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 6px 16px rgb(12, 29, 30, 0.22);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.payment-step .payment-step-cta i { font-size: 0.9em; }
.payment-step .payment-step-cta:hover,
.payment-step .payment-step-cta:focus-visible {
  background: #B98D1F;
  color: #013947;
  transform: translateY(-2px);
  box-shadow: 0 9px 20px rgb(12, 29, 30, 0.26);
}
.payment-step .payment-step-cta:focus-visible {
  outline: 3px solid rgba(213, 167, 42, 0.5);
  outline-offset: 2px;
}
@media (max-width: 1024px) {
  .payment-step .payment-step-cta { font-size: 0.82rem; padding: 0.62rem 1rem; }
}

/* ==========================================================================
   Pay Insurer page: the two ways to pay, the Payment Methods heading and the
   NCBA IPF interest table. They sit on the page's dark band, so the blocks
   reuse the white-on-green treatment of the insurer cards.
   ========================================================================== */

.pay-ways {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    width: 100%;
    max-width: 1100px;
    margin: 1.2rem auto 1.8rem;
}

/* One way to pay in full up here, so the block takes the whole width rather
   than sitting in the left half of a two-column grid. */
.pay-ways.is-single {
    grid-template-columns: 1fr;
}


.pay-way {
    padding: 1rem 1.15rem 1.1rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
}

.pay-way h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.45rem;
    color: #fff;
    font-size: 1.02rem;
    font-weight: 800;
}

.pay-way h4 i {
    color: #ecc27a;
    font-size: 0.95em;
}

.pay-way p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.9rem;
    line-height: 1.6;
}

.pay-way p strong {
    color: #ecc27a;
}

/* Payment Methods ------------------------------------------------------- */

.payment-methods-heading {
    margin: 0 0 0.35rem;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    text-align: center;
}

.payment-methods-lead {
    margin: 0 auto 1.1rem;
    max-width: 760px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
}

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

/* The two ways to pay are headed the same way: "Pay in Full" over the payment
   details, "Pay in 4 Instalments" over the NCBA card. */
.pay-way-heading,
.pay-in-4-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.pay-in-4-heading {
    margin-top: 1.9rem;
}

.pay-way-heading {
    margin: 1.4rem 0 0.35rem;
}

.pay-way-heading i,
.pay-in-4-heading i {
    color: #ecc27a;
    font-size: 0.92em;
}

/* NCBA Insurance Premium Financing ------------------------------------- */

.pay-ipf {
    width: 100%;
    max-width: 1100px;
    margin: 1.5rem auto 0;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: #fff;
    overflow: hidden;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

.pay-ipf-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    padding: 1rem 1.15rem 0.75rem;
    border-bottom: 1px solid #eef1f3;
}

.pay-ipf-logo {
    flex: 0 0 auto;
    display: block;
    width: auto;
    height: 38px;
    max-width: 160px;
    object-fit: contain;
}

.pay-ipf-title {
    flex: 1 1 260px;
    margin: 0;
    color: var(--primary-navy, #013947);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
}

/* What the instalment route is, then the form to apply on. */
.pay-ipf-lead {
    margin: 0.85rem 1.15rem 0;
    color: #4f666d;
    font-size: 0.92rem;
    line-height: 1.6;
}

.pay-ipf-lead strong {
    color: #013947;
}

/* The link inside the closing line keeps the weight of the sentence it sits
   in, with an underline to say it can be tapped. */
.pay-ipf-lead a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The line that says how to reach us stands a step below the paragraph, so the
   two do not read as one run of type. */
.pay-ipf-contact {
    margin: 0.7rem 1.15rem 0;
    color: #013947;
    font-size: 0.92rem;
    line-height: 1.6;
}

.pay-ipf-contact a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pay-ipf-actions {
    display: flex;
    justify-content: flex-start;
    margin: 0.75rem 1.15rem 0.2rem;
}

.pay-ipf-actions .pay-ipf-form-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    font-size: 0.82rem;
}

/* The blank bank form, for anyone who wants to read it before they apply. */
.pay-ipf-form-link {
    flex: 0 0 auto;
    padding: 0.4rem 0.75rem;
    border: 1px solid #d9e2e2;
    border-radius: 999px;
    background: #fff;
    color: #013947;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.pay-ipf-form-link:hover {
    border-color: #013947;
    background: #f4f8f8;
}

.pay-ipf-table-wrap {
    padding: 0.35rem 1.15rem 1.05rem;
}

.pay-ipf-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    color: #013947;
    font-size: 0.88rem;
}

.pay-ipf-table-wrap th,
.pay-ipf-table-wrap td {
  /* One band to a line, whatever the width: the fit script eases the type
     down and shortens the figures rather than letting a row wrap. */
  white-space: nowrap;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid #eef1f3;
    text-align: left;
}

.pay-ipf-table-wrap th {
    color: #8a6d1f;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pay-ipf-table-wrap tbody tr:nth-child(odd) {
    background: #f8fafa;
}

.pay-ipf-table-wrap td:last-child,
.pay-ipf-table-wrap th:last-child {
    text-align: right;
    font-weight: 700;
}

.pay-ipf-table-wrap tr:last-child td { border-bottom: 0; }

/* The 4-instalment calculator ------------------------------------------
   Sits under the bands it works from: the client types the premium and the
   page answers with the interest, the total and the monthly figure. */

.pay-ipf-calc {
    margin: 0 1.15rem 1.15rem;
    padding: 1rem 1.05rem 1.05rem;
    border: 1px solid #d5e1e0;
    border-radius: 14px;
    background: #f7fbfa;
}

.pay-ipf-calc-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.7rem;
    color: #013947;
    font-size: 0.92rem;
    font-weight: 800;
}

.pay-ipf-calc-title i {
    color: #8a6d1f;
}

.pay-ipf-calc-field {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.15rem 0.85rem;
    border: 1.5px solid #b7dedd;
    border-radius: 999px;
    background: #ffffff;
}

.pay-ipf-calc-currency {
    color: #017a78;
    font-size: 0.85rem;
    font-weight: 800;
}

.pay-ipf-calc-field input {
    flex: 1;
    min-width: 0;
    padding: 0.55rem 0;
    border: 0;
    background: none;
    color: #013947;
    font-size: 1rem;
    font-weight: 700;
    outline: none;
}

.pay-ipf-calc-field input::placeholder {
    color: #94a3b8;
    font-weight: 500;
}

.pay-ipf-calc-field:focus-within {
    border-color: #017a78;
    box-shadow: 0 0 0 3px rgba(1, 122, 120, 0.13);
}

.pay-ipf-calc-out {
    display: grid;
    gap: 0.3rem;
    margin: 0.85rem 0 0;
}

.pay-ipf-calc-out[hidden] {
    display: none;
}

.pay-ipf-calc-out > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.3rem 0;
    border-bottom: 1px dashed #dbe8e7;
}

.pay-ipf-calc-out > div:last-child {
    border-bottom: 0;
}

.pay-ipf-calc-out dt {
    color: #4f666d;
    font-size: 0.82rem;
}

.pay-ipf-calc-out dd {
    margin: 0;
    color: #013947;
    font-size: 0.9rem;
    font-weight: 700;
}

.pay-ipf-calc-each {
    margin-top: 0.2rem;
    padding-top: 0.45rem !important;
    border-top: 1px solid #cfe0de !important;
}

.pay-ipf-calc-each dt,
.pay-ipf-calc-each dd {
    color: #013947;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
}

.pay-ipf-calc-each dd {
    color: #017a78 !important;
}

.pay-ipf-calc-note {
    margin: 0.75rem 0 0;
    color: #64748b;
    font-size: 0.76rem;
    line-height: 1.5;
}

/* The closing reminder ------------------------------------------------- */

.pay-important {
    width: 100%;
    max-width: 1100px;
    margin: 1.3rem auto 0;
    padding: 0.9rem 1.15rem;
    border-radius: 14px;
    border: 1px solid rgba(236, 194, 122, 0.32);
    border-left: 4px solid #ecc27a;
    background: rgba(255, 255, 255, 0.07);
    color: #d8e5e6;
    font-size: 0.9rem;
    line-height: 1.6;
}

.pay-important strong { color: #fff; }
.pay-important strong:last-of-type { color: #ecc27a; }

@media (max-width: 760px) {
    .pay-ways {
        grid-template-columns: 1fr;
        margin: 1rem auto 1.4rem;
    }
    .payment-methods-heading { font-size: 1.28rem; }
    .pay-ipf-head { padding: 0.85rem 0.9rem 0.65rem; gap: 0.35rem 0.8rem; }
    .pay-ipf-logo { height: 30px; max-width: 130px; }
    .pay-ipf-title { flex-basis: 100%; font-size: 0.95rem; }
    .pay-ipf-table-wrap { padding: 0.3rem 0.9rem 0.95rem; }
    .pay-ipf-table-wrap table { font-size: 0.82rem; }
    .pay-important { padding: 0.8rem 0.9rem; font-size: 0.86rem; }
}

/* ===== the two ways to pay read side by side, on every width =====
   Paying in full and paying in four installments are alternatives, so they are
   set in parallel rather than stacked: stacked, the second block reads as the
   next step instead of the other choice. On a phone the pair keeps two columns
   and the type steps down so both stay readable. */
@media (max-width: 760px) {
    .pay-ways {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
        margin: 1rem auto 1.4rem;
        align-items: start;
    }

    .pay-way {
        padding: 0.8rem 0.75rem 0.85rem;
        border-radius: 14px;
    }

    .pay-way h4 {
        gap: 0.35rem;
        margin-bottom: 0.4rem;
        font-size: 0.86rem;
        line-height: 1.25;
    }

    .pay-way p {
        font-size: 0.76rem;
        line-height: 1.5;
    }
}