/* Payment methods and refund summary */
.d2-payment {
    padding: 115px max(28px, calc((100vw - 1240px) / 2));
    color: #0b214f;
    background: #fff;
}

.d2-payment-head {
    display: grid;
    grid-template-columns: 1fr .7fr;
    gap: 65px;
    align-items: end;
}

.d2-payment-head small {
    color: var(--blue);
    font: 800 9px Consolas, monospace;
    letter-spacing: .11em;
}

.d2-payment-head h2 {
    margin: 18px 0 0;
    font-size: clamp(39px, 5vw, 64px);
    line-height: 1;
    letter-spacing: -.045em;
}

.d2-payment-head > p {
    margin: 0;
    color: #60708c;
    font-size: 15px;
    line-height: 1.75;
}

.d2-payment-grid {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: 26px;
    margin-top: 58px;
}

.d2-payment-grid > article {
    padding: 30px;
    border: 1px solid #b9c9e3;
    background: #f4f7fc;
    box-shadow: 9px 9px 0 #dce5f4;
}

.d2-payment-grid > article > span {
    color: var(--blue);
    font: 900 9px Consolas, monospace;
    letter-spacing: .09em;
}

.d2-payment-grid h3 {
    margin: 17px 0 12px;
    font-size: 27px;
}

.d2-payment-grid p {
    color: #5a6d8d;
    font-size: 13px;
    line-height: 1.7;
}

.d2-payment-online {
    border-top: 6px solid #155eef !important;
}

.d2-payment-online ul {
    display: grid;
    gap: 10px;
    margin: 24px 0;
    padding: 21px 0;
    border-top: 1px solid #cbd7ea;
    border-bottom: 1px solid #cbd7ea;
    list-style: none;
}

.d2-payment-online li::before {
    content: '\2713';
    margin-right: 10px;
    color: #155eef;
    font-weight: 900;
}

.d2-payment-button {
    display: block;
    padding: 15px 16px;
    color: #fff;
    background: #155eef;
    text-align: center;
    text-decoration: none;
    font: 900 10px Consolas, monospace;
    letter-spacing: .05em;
}

.d2-payment-button:hover {
    background: #0b48ba;
}

.d2-payment-button:focus-visible {
    outline: 3px solid #ffb068;
    outline-offset: 3px;
}

.d2-paypal-product-button {
    display: block;
    margin: 12px 0;
    padding: 14px 16px;
    color: #071d52 !important;
    background: #ffc439;
    border: 1px solid #e3a900;
    text-align: center;
    text-decoration: none;
    font: 900 10px Consolas, monospace !important;
    line-height: 1.45;
    letter-spacing: .04em;
    box-shadow: 4px 4px 0 rgba(7, 29, 82, .14);
}

.d2-paypal-product-button:hover {
    color: #071d52;
    background: #ffda79;
    transform: translateY(-1px);
}

.d2-paypal-product-button:focus-visible {
    outline: 3px solid #155eef;
    outline-offset: 3px;
}

.pd-price-card .d2-paypal-product-button {
    margin-top: 18px;
}

.pd-price-card .pd-payment-note {
    margin: 12px 0 0;
    padding: 11px 12px;
    color: #536784;
    background: #f4f7fc;
    border-left: 3px solid #ffc439;
    font-size: 10px;
    line-height: 1.55;
}

.d2-payment-options {
    display: grid;
    gap: 10px;
}

.d2-payment-options .d2-payment-button {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
    text-align: left;
}

.d2-payment-options .d2-payment-button span {
    text-align: right;
}

.d2-payment-options .is-paypal {
    color: #071d52;
    background: #ffc439;
}

.d2-payment-options .is-paypal:hover {
    background: #ffda79;
}

.d2-payment-options .is-generic {
    color: #fff;
    background: #155eef;
}

.d2-payment-online > small {
    display: block;
    margin-top: 13px;
    color: #71809a;
    font-size: 10px;
    line-height: 1.55;
}

.d2-payment-bank {
    border-top: 6px solid #098f72 !important;
}

.d2-payment-bank > span {
    color: #098f72 !important;
}

.d2-bank-list {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.d2-bank-list > div {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 18px;
    align-items: center;
    padding: 15px 16px;
    background: #fff;
    border: 1px solid #cbd7ea;
}

.d2-bank-list b {
    font-size: 12px;
}

.d2-bank-list code {
    color: #075b4b;
    font: 800 13px Consolas, monospace;
    letter-spacing: .025em;
    word-break: break-word;
}

.d2-payment-reference {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 18px;
    margin-top: 16px;
    padding: 16px;
    color: #124c42;
    background: #dff4ee;
    border-left: 4px solid #098f72;
    font-size: 12px;
    line-height: 1.55;
}

.d2-payment-proof {
    margin-bottom: 0 !important;
}

.d2-payment-proof a {
    color: #155eef;
    font-weight: 800;
}

.d2-refund-summary {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 45px;
    align-items: center;
    margin-top: 34px;
    padding: 25px 28px;
    color: #f5f8ff;
    background: #071d52;
    border-left: 6px solid #ff7a1a;
}

.d2-refund-summary small {
    color: #8ae8ff;
    font: 900 9px Consolas, monospace;
    letter-spacing: .1em;
}

.d2-refund-summary h3 {
    margin: 8px 0 7px;
    font-size: 22px;
}

.d2-refund-summary p {
    max-width: 780px;
    margin: 0;
    color: #adbbd6;
    font-size: 12px;
    line-height: 1.65;
}

.d2-refund-summary > a {
    max-width: 320px;
    padding: 14px 17px;
    color: #071d52;
    background: #8ae8ff;
    text-align: center;
    text-decoration: none;
    font: 900 9px Consolas, monospace;
    line-height: 1.45;
}

.d2-refund-summary > a:hover {
    background: #fff;
}

.d2-refund-summary > a:focus-visible {
    outline: 3px solid #ffb068;
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .d2-payment-head,
    .d2-payment-grid,
    .d2-refund-summary {
        grid-template-columns: 1fr;
    }

    .d2-payment-head {
        gap: 25px;
    }

    .d2-refund-summary > a {
        max-width: none;
    }
}

@media (max-width: 620px) {
    .d2-payment {
        padding: 75px 18px;
    }

    .d2-payment-head h2 {
        font-size: 40px;
    }

    .d2-payment-grid > article {
        padding: 23px 19px;
    }

    .d2-bank-list > div,
    .d2-payment-reference {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .d2-bank-list code {
        font-size: 11px;
    }

    .d2-payment-options .d2-payment-button {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .d2-payment-options .d2-payment-button span {
        text-align: left;
    }

    .d2-refund-summary {
        padding: 22px 19px;
    }
}