/* ==========================================================================
   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: #1b5e20;
}

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

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

.payment-proof-btn:focus-visible {
    outline: 3px solid rgba(18, 53, 36, 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: #eef8f0;
    border-color: #dbe9df;
    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(18, 53, 36, 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(18, 53, 36, 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: #fbfdfb;
}

.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;
}

.pm-method-icon {
    width: 34px;
    background: #eef8f0;
    border-color: #dbe9df;
    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: #eef8f0;
    border: 1px solid #cfe5d4;
    color: #1b5e20;
    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 #dfe7e2;
    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 {
    margin: 0 0 0.3rem;
    text-align: center !important;
    color: var(--primary-navy);
    /* the same weight of heading as "Our Trusted Insurance Partners" */
    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: 700px) {
    .payment-block-copy h3 {
        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, #0f2a20 0%, #0b1f17 60%, #0a1a14 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, #14402e 0%, #0d2c20 55%, #0a231a 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 {
    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: #d8e6dd !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: 700px) {
    .payment-block {
        /* the partners shell tightens the same way on a phone */
        padding: 1.2rem 0.9rem 1.4rem;
        border-radius: 20px;
    }
}