/* Approved Step 7 Pay page layout. Scoped to the active payment card only. */
.pt-pay-main {
    padding: 24px;
}

.pt-pay-product-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--pt-store-line, #e2e8f0);
}

.pt-pay-product-copy {
    min-width: 0;
}

.pt-pay-product-type {
    display: block;
    margin-bottom: 5px;
    color: var(--pt-store-brand, #2563eb);
    font-size: 11px;
    font-weight: 800;
}

.pt-pay-product-copy h1 {
    margin: 0;
    color: var(--pt-store-ink, #0f172a);
    font-size: 20px;
    line-height: 1.4;
    font-weight: 800;
}

.pt-pay-main .pt-pay-amount {
    flex: 0 0 auto;
    margin: 0;
    text-align: right;
}

.pt-pay-main .pt-pay-amount span {
    display: block;
    margin-bottom: 2px;
    color: var(--pt-store-muted, #64748b);
    font-size: 11px;
    font-weight: 600;
}

.pt-pay-main .pt-pay-amount strong {
    display: block;
    color: var(--pt-store-ink, #0f172a);
    font-size: 25px;
    line-height: 1.15;
    font-weight: 900;
}

.pt-pay-cart-items {
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--pt-store-page, #f8fafc);
    border: 1px solid var(--pt-store-line, #e2e8f0);
    border-radius: 11px;
}

.pt-pay-cart-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    color: var(--pt-store-text, #334155);
    font-size: 12px;
}

.pt-pay-cart-row strong {
    flex: 0 0 auto;
    color: var(--pt-store-ink, #0f172a);
}

.pt-pay-main .pt-pay-steps {
    display: grid;
    gap: 10px;
    margin: 18px 0 4px;
    padding: 0;
}

.pt-pay-main .pt-pay-step {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.pt-pay-main .pt-pay-step > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: var(--pt-store-brand-hover, #1d4ed8);
    background: var(--pt-store-brand-soft, #eff6ff);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 900;
}

.pt-pay-main .pt-pay-step strong {
    display: block;
    margin-top: 2px;
    color: var(--pt-store-ink, #0f172a);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
}

.pt-pay-main .pt-pay-step p {
    margin: 2px 0 0;
    color: var(--pt-store-muted, #64748b);
    font-size: 12px;
    line-height: 1.45;
}

.pt-pay-main .pt-pay-block {
    margin: 18px 0 0;
    padding: 20px 0 0;
    border: 0;
    border-top: 1px solid var(--pt-store-line, #e2e8f0);
    border-radius: 0;
    background: transparent;
}

.pt-pay-main .pt-pay-block-label,
.pt-pay-main .pt-pay-form-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: var(--pt-store-ink, #0f172a);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 900;
}

.pt-pay-main .pt-pay-block-label > span,
.pt-pay-main .pt-pay-form-title > span {
    width: 26px;
    height: 26px;
    margin: 0;
    display: inline-grid;
    flex: 0 0 26px;
    place-items: center;
    color: var(--pt-store-brand-hover, #1d4ed8);
    background: var(--pt-store-brand-soft, #eff6ff);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 900;
}

.pt-pay-main .pt-pay-qr,
.pt-pay-main .pt-pay-qr-image {
    display: block;
    width: min(210px, 100%);
    height: auto;
    margin: 0 auto;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--pt-store-line, #e2e8f0);
    border-radius: 14px;
}

.pt-pay-main .pt-pay-qr canvas,
.pt-pay-main .pt-pay-qr img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Save the QR to the phone's gallery, so the student can pay from the UPI app
   without keeping this page open. Sits directly under the QR, above the note. */
.pt-pay-main .pt-pay-qr-save {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-height: 34px;
    margin: 9px auto 0;
    padding: 0 4px;
    color: var(--pt-store-brand-hover, #1d4ed8);
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    text-decoration: underline;
    cursor: pointer;
}

.pt-pay-main .pt-pay-qr-save svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

.pt-pay-main .pt-pay-qr-save:hover,
.pt-pay-main .pt-pay-qr-save:focus-visible {
    color: var(--pt-store-brand, #2563eb);
}

.pt-pay-main .pt-pay-qr-note {
    margin: 9px 0 0;
    color: var(--pt-store-muted, #64748b);
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}

.pt-pay-payment-meta {
    margin-top: 12px;
}

.pt-pay-main .pt-pay-copy-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    margin-top: 9px;
    padding: 8px 9px 8px 11px;
    background: #fff;
    border: 1px solid var(--pt-store-line, #e2e8f0);
    border-radius: 10px;
}

.pt-pay-main .pt-pay-copy-row > span {
    min-width: 0;
}

.pt-pay-main .pt-pay-copy-row small {
    display: block;
    margin-bottom: 2px;
    color: var(--pt-store-muted, #64748b);
    font-size: 10px;
}

/* Same cancel as store-checkout-pay.css, spelled out again: this selector is the
   more specific of the two, so leaving it out here would let store.css's padding
   back in depending on which file loads last. */
.pt-pay-main .pt-pay-copy-row code {
    display: block;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--pt-store-ink, #0f172a);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.pt-pay-main .pt-pay-copy-row .pt-btn {
    flex: 0 0 auto;
    min-width: 62px;
    min-height: 34px;
    margin: 0;
    padding: 6px 10px;
    color: var(--pt-store-brand-hover, #1d4ed8);
    background: #fff;
    border-color: var(--pt-store-brand-soft-border, #bfdbfe);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
}

.pt-pay-main .pt-pay-upi-open {
    width: 100%;
    min-height: 46px;
    margin: 10px 0 0;
    color: #fff;
    background: var(--pt-store-brand, #2563eb);
    border-color: var(--pt-store-brand-border, #1d4ed8);
    border-radius: 11px;
    box-shadow: none;
    font-weight: 800;
}

.pt-pay-main .pt-pay-upi-open:hover {
    color: #fff;
    background: var(--pt-store-brand-hover, #1d4ed8);
}

.pt-pay-main .pt-pay-custom-instructions {
    margin-top: 14px;
    padding: 11px 12px;
    color: var(--pt-store-text, #334155);
    background: var(--pt-store-page, #f8fafc);
    border: 1px solid var(--pt-store-line, #e2e8f0);
    border-radius: 11px;
    font-size: 12px;
    line-height: 1.5;
}

.pt-pay-main .pt-pay-upload {
    min-height: 94px;
    display: grid;
    place-items: center;
    padding: 16px;
    color: var(--pt-store-text, #334155);
    background: #fff;
    border: 1.5px dashed #94a3b8;
    border-radius: 14px;
    text-align: center;
    cursor: pointer;
}

.pt-pay-main .pt-pay-upload:hover,
.pt-pay-main .pt-pay-upload.is-attached {
    border-color: var(--pt-store-brand, #2563eb);
    background: var(--pt-store-brand-soft, #eff6ff);
}

.pt-pay-main .pt-pay-upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.pt-pay-upload-copy strong {
    display: block;
    color: var(--pt-store-ink, #0f172a);
    font-size: 13px;
}

.pt-pay-upload-copy small {
    display: block;
    margin-top: 3px;
    color: var(--pt-store-muted, #64748b);
    font-size: 11px;
}

.pt-pay-main .pt-pay-file-name {
    margin-top: 10px;
    padding: 10px 12px;
    color: var(--pt-store-success, #15803d);
    background: var(--pt-store-success-soft, #f0fdf4);
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    font-size: 12px;
}

.pt-pay-main .pt-pay-file-name strong,
.pt-pay-main .pt-pay-file-name span {
    display: block;
}

.pt-pay-main .pt-pay-file-name span {
    margin-top: 2px;
    color: #166534;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.pt-pay-main .pt-pay-contact-note {
    margin: -4px 0 11px;
    color: var(--pt-store-muted, #64748b);
    font-size: 11px;
    line-height: 1.5;
}

.pt-pay-delivery-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pt-pay-delivery-option {
    position: relative;
    min-height: 72px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--pt-store-line, #e2e8f0);
    border-radius: 12px;
    cursor: pointer;
}

.pt-pay-delivery-option input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/*
 * The radio itself is the source of truth. .is-active remains as the JS
 * fallback, while :has(input:checked) prevents the card from ever showing a
 * different selection from the value that will actually be submitted.
 */
.pt-pay-delivery-option.is-active,
.pt-pay-delivery-option:has(input:checked) {
    background: var(--pt-store-brand-soft, #eff6ff);
    border-color: var(--pt-store-brand, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .07);
}

.pt-pay-delivery-option strong,
.pt-pay-delivery-option span {
    display: block;
}

.pt-pay-delivery-option strong {
    color: var(--pt-store-ink, #0f172a);
    font-size: 13px;
    font-weight: 800;
}

.pt-pay-delivery-option.is-active strong,
.pt-pay-delivery-option:has(input:checked) strong {
    color: var(--pt-store-brand-hover, #1d4ed8);
}

.pt-pay-delivery-option span {
    margin-top: 4px;
    color: var(--pt-store-muted, #64748b);
    font-size: 11px;
    line-height: 1.4;
}

.pt-pay-delivery-panel {
    margin-top: 11px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--pt-store-line, #e2e8f0);
    border-radius: 12px;
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
}

.pt-pay-delivery-panel[hidden] {
    display: none !important;
}

.pt-pay-delivery-help,
.pt-pay-telegram-note {
    margin: 7px 0 0;
    color: var(--pt-store-muted, #64748b);
    font-size: 11px;
    line-height: 1.5;
}

.pt-pay-telegram-note {
    padding: 9px 10px;
    color: #1e40af;
    background: var(--pt-store-brand-soft, #eff6ff);
    border: 1px solid var(--pt-store-brand-soft-border, #bfdbfe);
    border-radius: 10px;
}

.pt-pay-main .pt-pay-submit {
    width: 100%;
    min-height: 49px;
    margin-top: 18px;
    color: #fff;
    background: var(--pt-store-brand, #2563eb);
    border-color: var(--pt-store-brand-border, #1d4ed8);
    border-radius: 11px;
    box-shadow: none;
    font-size: 15px;
    font-weight: 800;
}

.pt-pay-main .pt-pay-submit:hover {
    color: #fff;
    background: var(--pt-store-brand-hover, #1d4ed8);
}

.pt-pay-main .pt-pay-trust {
    margin: 9px 0 0;
    color: var(--pt-store-muted, #64748b);
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}

.pt-pay-main .pt-pay-message.is-error {
    margin-top: 14px;
    padding: 10px 12px;
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    font-size: 12px;
}

@media (max-width: 640px) {
    .pt-pay-main {
        padding: 16px;
    }

    .pt-pay-product-head {
        display: block;
    }

    .pt-pay-main .pt-pay-amount {
        margin-top: 9px;
        text-align: left;
    }

    .pt-pay-main .pt-pay-amount span,
    .pt-pay-main .pt-pay-amount strong {
        display: inline;
    }

    .pt-pay-main .pt-pay-amount span {
        margin-right: 5px;
    }

    .pt-pay-main .pt-pay-amount strong {
        font-size: 23px;
    }
}

@media (max-width: 350px) {
    .pt-pay-main {
        padding: 14px;
    }

    .pt-pay-delivery-options {
        gap: 8px;
    }

    .pt-pay-delivery-option {
        padding: 10px;
    }
}

/* ==========================================================
   Pay page v2 — the layout Rakesh approved.

   The page reads as one box with its parts told apart inside it, rather than a
   stack of separate cards: an earlier try put each step in its own card and the
   page stopped reading as one flow. Green is spent on a single button; the
   step numbers, the info box and the app buttons all carry their own colour so
   nothing else competes with it.
   ========================================================== */

/* ---------- product name ---------- */
.pt-pay-main .pt-pay-product-head {
    display: block;
    margin: 0;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--pt-store-line, #e2e8f0);
}

.pt-pay-main .pt-pay-product-type {
    display: inline-block;
    margin: 0 0 8px;
    padding: 3px 10px;
    color: #475569;
    background: #f1f5f9;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Colour alone lifts the name off the page. A tinted band behind it was tried
   first and sat at the same lightness as the theme's own background, so it
   disappeared; this holds whatever the theme puts behind the card. */
.pt-pay-main .pt-pay-product-head h1 {
    margin: 0;
    color: #1d4ed8;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* ---------- what to do, in four lines and no more ---------- */
.pt-pay-main .pt-pay-how {
    margin: 0;
    padding: 15px 0 16px;
}

.pt-pay-main .pt-pay-how__lead {
    margin: 0 0 11px;
    color: var(--pt-store-ink, #0f172a);
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.5;
}

.pt-pay-main .pt-pay-how__list {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pt-pay-main .pt-pay-how__list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #334155;
    font-size: 13px;
    line-height: 1.55;
}

.pt-pay-main .pt-pay-how__n {
    flex: 0 0 21px;
    width: 21px;
    height: 21px;
    margin-top: 1px;
    display: inline-grid;
    place-items: center;
    color: #fff;
    background: var(--pt-store-ink, #0f172a);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
}

/* Amber, because this is what happens next -- not a confirmation that it did. */
.pt-pay-main .pt-pay-after {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 14px 0 0;
    padding: 12px 13px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 11px;
}

.pt-pay-main .pt-pay-after svg {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    color: #b45309;
}

.pt-pay-main .pt-pay-after p {
    margin: 0;
    color: #78350f;
    font-size: 12.5px;
    line-height: 1.6;
}

/* ---------- each step, kept apart inside the one box ---------- */
.pt-pay-main .pt-pay-block,
.pt-pay-main .pt-pay-form-section {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--pt-store-line, #e2e8f0);
}

.pt-pay-main .pt-pay-block-label,
.pt-pay-main .pt-pay-form-title {
    margin: 0;
    padding: 13px 0;
    gap: 10px;
    font-size: 13.5px;
}

.pt-pay-main .pt-pay-block-label > span,
.pt-pay-main .pt-pay-form-title > span {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    color: #fff;
    background: var(--pt-store-ink, #0f172a);
    font-size: 12px;
}

/* ---------- the amount sits with the QR it is paid against ---------- */
.pt-pay-main .pt-pay-amount {
    display: grid;
    justify-items: center;
    gap: 2px;
    margin: 0 0 13px;
}

.pt-pay-main .pt-pay-amount span {
    color: var(--pt-store-muted, #64748b);
    font-size: 11px;
    font-weight: 700;
}

.pt-pay-main .pt-pay-amount strong {
    color: var(--pt-store-ink, #0f172a);
    font-size: 33px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.5px;
    line-height: 1.05;
}

/* ---------- one link into the buyer's own UPI app ---------- */
/* A quiet line, not a button: the QR above is the main route, and five app
   buttons took a whole screen of room for something the phone can offer
   itself. */
.pt-pay-main .pt-pay-openapp {
    margin: 0;
    text-align: center;
}

.pt-pay-main .pt-pay-openapp__link {
    /* The blue of the demo Rakesh picked, and of the product name above it --
       the teal next to it already belongs to "QR download करें". */
    color: #1d4ed8;
    font-size: 14px;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
    /* A line of 14px text is a 16px-tall thing to hit with a thumb. The padding
       is what makes it tappable; the margin above was cut to match, so it sits
       where it did. */
    display: inline-block;
    padding: 14px;
}

/* ---------- UPI ID fallback: short, centered and clearly secondary ---------- */
.pt-pay-main .pt-pay-fallback-sep {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 12px;
    color: #94a3b8;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
}

.pt-pay-main .pt-pay-fallback-sep::before,
.pt-pay-main .pt-pay-fallback-sep::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--pt-store-line, #e2e8f0);
}

.pt-pay-main .pt-pay-fallback {
    margin: 0;
    padding: 13px 12px 14px;
    background: #fbfefd;
    border: 1px solid #d8e3e2;
    border-radius: 14px;
    text-align: center;
}

.pt-pay-main .pt-pay-fallback__label {
    margin: 0 0 9px;
    color: var(--pt-store-muted, #64748b);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
}

.pt-pay-main .pt-pay-fallback__row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    margin: 0 auto;
    padding: 8px 8px 8px 12px;
    background: #fff;
    border: 1px solid var(--pt-store-line, #e2e8f0);
    border-radius: 11px;
}

.pt-pay-main .pt-pay-fallback__id {
    min-width: 0;
    color: var(--pt-store-ink, #0f172a);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* ---------- upload ---------- */
.pt-pay-main .pt-pay-upload {
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 24px 14px;
    background: #fff;
    border: 1.5px dashed #cbd5e1;
    border-radius: 12px;
    text-align: center;
}

.pt-pay-main .pt-pay-upload:hover {
    background: #fcfdfe;
    border-color: #94a3b8;
}

.pt-pay-main .pt-pay-upload__icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #475569;
    background: #f1f5f9;
    border-radius: 50%;
}

.pt-pay-main .pt-pay-upload__icon svg {
    width: 18px;
    height: 18px;
}

/* ---------- the one green thing on the page ---------- */
.pt-pay-main .pt-pay-submit {
    width: 100%;
    min-height: 52px;
    margin: 18px 0 0;
    color: #fff;
    background: var(--pt-store-brand, #2563eb);
    border-color: var(--pt-store-brand-border, #1d4ed8);
    border-radius: 13px;
    font-size: 15.5px;
    font-weight: 800;
}

.pt-pay-main .pt-pay-submit:hover {
    color: #fff;
    background: var(--pt-store-brand-hover, #1d4ed8);
}

@media (max-width: 360px) {
    .pt-pay-main .pt-pay-amount strong { font-size: 29px; }
}

/* ---------- the arrow between two steps ---------- */
.pt-pay-main .pt-pay-next-step {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.pt-pay-main .pt-pay-next-step::before,
.pt-pay-main .pt-pay-next-step::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--pt-store-line, #e2e8f0);
}

.pt-pay-main .pt-pay-next-step__mark {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    color: #94a3b8;
    background: #fff;
    border: 1px solid var(--pt-store-line, #e2e8f0);
    border-radius: 50%;
}

.pt-pay-main .pt-pay-next-step__mark svg {
    width: 13px;
    height: 13px;
}

/* The arrow draws the join, so the section below it must not draw one too. */
.pt-pay-main .pt-pay-next-step + .pt-pay-block,
.pt-pay-main .pt-pay-next-step + .pt-pay-form-section,
.pt-pay-main .pt-pay-next-step + form .pt-pay-form-section:first-of-type {
    border-top: 0;
}

/* Once a screenshot is picked the box says so itself, in place of its own
   prompt -- a second box underneath left two of them on screen. */
.pt-pay-main .pt-pay-upload.is-attached {
    background: #eff6ff;
    border-style: solid;
    border-color: #5eead4;
}

.pt-pay-main .pt-pay-upload.is-attached .pt-pay-upload__icon {
    color: #1d4ed8;
    background: #dbeafe;
}

.pt-pay-main .pt-pay-upload.is-attached .pt-pay-upload-copy {
    display: none;
}

/* :not([hidden]) because pay.js toggles the attribute, and a bare display:block
   overrules it -- the confirmation showed before any file was picked. */
.pt-pay-main .pt-pay-file-name:not([hidden]) {
    display: block;
    text-align: center;
}

.pt-pay-main .pt-pay-file-name strong {
    display: block;
    color: #1d4ed8;
    font-size: 13.5px;
    font-weight: 800;
}

.pt-pay-main .pt-pay-file-name [data-pay-file-label] {
    display: block;
    margin-top: 3px;
    color: #1e40af;
    font-size: 11.5px;
    overflow-wrap: anywhere;
}


/* ==========================================================================
   Telegram OIDC delivery choice
   ========================================================================== */

.pt-pay-main .pt-pay-delivery-option {
    min-height: 66px;
    display: flex;
    align-items: center;
    padding: 13px 42px 13px 13px;
}

.pt-pay-main .pt-pay-delivery-option .pt-pay-delivery-check {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 24px;
    height: 24px;
    margin: 0;
    display: grid;
    place-items: center;
    color: #15803d;
    background: #dcfce7;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    opacity: 0;
    transform: translateY(-50%) scale(.72);
    transition: opacity .14s ease, transform .14s ease;
}

.pt-pay-main .pt-pay-delivery-option.is-active .pt-pay-delivery-check,
.pt-pay-main .pt-pay-delivery-option:has(input:checked) .pt-pay-delivery-check {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

/*
 * Incomplete submit is genuinely disabled so its behavior cannot disagree
 * with the selected delivery route or required Email field.
 */
.pt-pay-main .pt-pay-submit.is-inactive,
.pt-pay-main .pt-pay-submit.is-inactive:hover,
.pt-pay-main .pt-pay-submit.is-inactive:focus {
    color: #fff;
    background: #cbd5e1;
    border-color: #cbd5e1;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.pt-pay-main .pt-pay-submit[hidden] {
    display: none !important;
}

/* Clean submit progress — no card/box around it. */
.pt-pay-main .pt-pay-submit-progress {
    margin-top: 18px;
}

.pt-pay-main .pt-pay-submit-progress[hidden] {
    display: none !important;
}

.pt-pay-main .pt-pay-submit-progress__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
}

.pt-pay-main .pt-pay-submit-progress__spinner {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border: 3px solid #dbeafe;
    border-top-color: var(--pt-store-brand, #2563eb);
    border-radius: 50%;
    animation: pt-pay-submit-spin .8s linear infinite;
}

.pt-pay-main .pt-pay-submit-progress.is-complete .pt-pay-submit-progress__spinner {
    position: relative;
    border: 0;
    background: #16a34a;
    animation: none;
}

.pt-pay-main .pt-pay-submit-progress.is-complete .pt-pay-submit-progress__spinner::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}

.pt-pay-main .pt-pay-submit-progress__copy strong {
    display: block;
    color: var(--pt-store-ink, #0f172a);
    font-size: 14px;
    font-weight: 850;
}

.pt-pay-main .pt-pay-submit-progress__copy span {
    display: block;
    margin-top: 2px;
    color: var(--pt-store-muted, #64748b);
    font-size: 12px;
    line-height: 1.45;
}

.pt-pay-main .pt-pay-submit-progress__copy span:empty {
    display: none;
}

.pt-pay-main .pt-pay-submit-progress__track {
    --pt-submit-line-progress: 0%;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    margin-top: 4px;
}

.pt-pay-main .pt-pay-submit-progress__track::before,
.pt-pay-main .pt-pay-submit-progress__track::after {
    content: "";
    position: absolute;
    left: 16.666%;
    top: 9px;
    height: 4px;
    border-radius: 999px;
}

.pt-pay-main .pt-pay-submit-progress__track::before {
    right: 16.666%;
    background: #e2e8f0;
}

.pt-pay-main .pt-pay-submit-progress__track::after {
    width: var(--pt-submit-line-progress);
    max-width: 66.668%;
    background: #16a34a;
    transition: width .4s ease;
}

.pt-pay-main .pt-pay-submit-progress__step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    transition: color .2s ease;
}

.pt-pay-main .pt-pay-submit-progress__dot {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    margin-bottom: 7px;
    color: transparent;
    background: #fff;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    transition: all .2s ease;
}

.pt-pay-main .pt-pay-submit-progress__step.is-active {
    color: var(--pt-store-brand-hover, #1d4ed8);
}

.pt-pay-main .pt-pay-submit-progress__step.is-active .pt-pay-submit-progress__dot {
    border-color: var(--pt-store-brand, #2563eb);
    box-shadow: 0 0 0 4px #dbeafe;
}

.pt-pay-main .pt-pay-submit-progress__step.is-complete {
    color: #15803d;
}

.pt-pay-main .pt-pay-submit-progress__step.is-complete .pt-pay-submit-progress__dot {
    color: #fff;
    background: #16a34a;
    border-color: #16a34a;
    box-shadow: none;
}

.pt-pay-main .pt-pay-submit-progress__step.is-complete .pt-pay-submit-progress__dot::before {
    content: "✓";
}

.pt-pay-main .pt-pay-submit-progress__percent {
    margin-top: 10px;
    color: var(--pt-store-muted, #64748b);
    font-size: 11px;
    font-weight: 800;
    text-align: right;
}

.pt-pay-main .pt-pay-submit-progress__percent strong {
    color: #15803d;
}

@keyframes pt-pay-submit-spin {
    to { transform: rotate(360deg); }
}


.pt-pay-choice-hint {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: -2px 0 9px 36px;
    color: var(--pt-store-muted, #64748b);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}

.pt-pay-choice-hint svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--pt-store-brand, #2563eb);
}


/* ==========================================================================
   Three-part Pay flow — Instructions → Payment → Proof & Delivery
   ========================================================================== */

.pt-pay-main .pt-pay-flow-progress {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    margin: 15px 0 18px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--pt-store-line, #e2e8f0);
}

.pt-pay-main .pt-pay-flow-progress__item {
    min-width: 0;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 9px;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid var(--pt-store-line, #e2e8f0);
    border-radius: 12px;
    font: inherit;
    text-align: center;
    cursor: pointer;
    appearance: none;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.pt-pay-main .pt-pay-flow-progress__copy {
    min-width: 0;
    display: grid;
    gap: 2px;
    text-align: center;
}

.pt-pay-main .pt-pay-flow-progress__copy small {
    color: #94a3b8;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pt-pay-main .pt-pay-flow-progress__copy strong {
    min-width: 0;
    color: var(--pt-store-text, #334155);
    font-size: 11.5px;
    font-weight: 850;
    line-height: 1.22;
}

.pt-pay-main .pt-pay-flow-progress__item:hover,
.pt-pay-main .pt-pay-flow-progress__item:focus-visible {
    border-color: #94a3b8;
    outline: none;
}

.pt-pay-main .pt-pay-flow-progress__item.is-active {
    background: var(--pt-store-brand-soft, #eff6ff);
    border-color: var(--pt-store-brand, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .06);
}

.pt-pay-main .pt-pay-flow-progress__item.is-active .pt-pay-flow-progress__copy small {
    color: var(--pt-store-brand-hover, #1d4ed8);
}

.pt-pay-main .pt-pay-flow-progress__item.is-active .pt-pay-flow-progress__copy strong {
    color: var(--pt-store-ink, #0f172a);
}

.pt-pay-main .pt-pay-flow-progress__item.is-complete {
    background: #f0fdf4;
    border-color: #86efac;
}

.pt-pay-main .pt-pay-flow-progress__item.is-complete .pt-pay-flow-progress__copy small,
.pt-pay-main .pt-pay-flow-progress__item.is-complete .pt-pay-flow-progress__copy strong {
    color: #166534;
}

/* Directional connectors make the order of the three parts obvious. */
.pt-pay-main .pt-pay-flow-progress__line {
    position: relative;
    height: 3px;
    background: #cbd5e1;
    border-radius: 999px;
    transition: background .22s ease;
}

.pt-pay-main .pt-pay-flow-progress__line::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1px;
    width: 9px;
    height: 9px;
    border-top: 3px solid #cbd5e1;
    border-right: 3px solid #cbd5e1;
    transform: translateY(-50%) rotate(45deg);
    transition: border-color .22s ease, transform .22s ease;
}

.pt-pay-main .pt-pay-flow-progress__item.is-complete + .pt-pay-flow-progress__line {
    background: var(--pt-store-brand, #2563eb);
}

.pt-pay-main .pt-pay-flow-progress__item.is-complete + .pt-pay-flow-progress__line::after {
    border-color: var(--pt-store-brand, #2563eb);
    transform: translateY(-50%) rotate(45deg) scale(1.06);
}

.pt-pay-main .pt-pay-flow-step[hidden] {
    display: none !important;
}

/* ---------- Part 1: instructions ---------- */
.pt-pay-main .pt-pay-instructions-title {
    margin: 0 0 16px;
    color: var(--pt-store-ink, #0f172a);
    font-size: 18px;
    font-weight: 900;
    line-height: 1.45;
}

.pt-pay-main .pt-pay-instructions-list {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pt-pay-main .pt-pay-instructions-list li {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
    color: var(--pt-store-text, #334155);
    font-size: 15px;
    line-height: 1.55;
}

.pt-pay-main .pt-pay-instructions-num {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--pt-store-ink, #0f172a);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 900;
}

.pt-pay-main .pt-pay-instructions-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 20px 0 0;
    padding: 16px 18px;
    color: #7c4a1e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 15px;
}

.pt-pay-main .pt-pay-instructions-note svg {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin-top: 1px;
    color: #b45309;
}

.pt-pay-main .pt-pay-instructions-note p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
}

.pt-pay-main [data-pay-flow-step="2"] .pt-pay-payment-block,
.pt-pay-main [data-pay-flow-step="3"] .pt-pay-form-section:first-of-type {
    border-top: 0;
}

.pt-pay-main .pt-pay-flow-next {
    width: 100%;
    min-height: 50px;
    margin: 18px 0 0;
    color: #fff;
    background: var(--pt-store-brand, #2563eb);
    border-color: var(--pt-store-brand-border, #1d4ed8);
    border-radius: 12px;
    box-shadow: none;
    font-size: 14px;
    font-weight: 900;
}

.pt-pay-main .pt-pay-flow-next:hover,
.pt-pay-main .pt-pay-flow-next:focus-visible {
    color: #fff;
    background: var(--pt-store-brand-hover, #1d4ed8);
}

.pt-pay-main [data-pay-flow-step="3"] .pt-pay-form-section + .pt-pay-form-section {
    margin-top: 19px;
    padding-top: 19px;
    border-top: 1px solid var(--pt-store-line, #e2e8f0);
}

.pt-pay-main .pt-pay-choice-hint {
    margin-left: 36px;
}

@media (max-width: 520px) {
    .pt-pay-main .pt-pay-flow-progress {
        grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr);
        gap: 4px;
    }

    .pt-pay-main .pt-pay-flow-progress__item {
        min-height: 50px;
        padding: 6px;
    }

    .pt-pay-main .pt-pay-flow-progress__copy small {
        font-size: 7.5px;
    }

    .pt-pay-main .pt-pay-flow-progress__copy strong {
        font-size: 9.7px;
    }

    .pt-pay-main .pt-pay-instructions-title {
        font-size: 17px;
    }

    .pt-pay-main .pt-pay-instructions-list li {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 11px;
        font-size: 14px;
    }

    .pt-pay-main .pt-pay-instructions-num {
        width: 30px;
        height: 30px;
    }

    .pt-pay-main .pt-pay-instructions-note {
        padding: 14px;
    }
}

@media (max-width: 350px) {
    .pt-pay-main .pt-pay-flow-progress {
        grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr);
        gap: 3px;
    }

    .pt-pay-main .pt-pay-flow-progress__item {
        padding: 5px 4px;
    }

    .pt-pay-main .pt-pay-flow-progress__copy strong {
        font-size: 9px;
    }
}