.pledge-pay-hidden {
    display: none;
}

.pledge-pay-layout {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.pledge-pay-page {
    --ppay-line: color-mix(in srgb, var(--border-color) 82%, transparent);
    --ppay-tint: color-mix(in srgb, var(--accent) 5%, var(--field-bg) 95%);
    width: 100%;
    max-width: 860px;
    min-width: 0;
    margin-inline: auto;
    padding: 1rem 0.35rem 2.5rem;
    text-align: left;

    @media (min-width: 768px) {
        padding: 1.5rem 0 6rem;
    }

    .ppay-hero {
        padding: 0 0.35rem 1.25rem;
        text-align: start;

        .ppay-hero__title {
            margin: 0;
            font-family: var(--font-sans);
            font-size: clamp(1.6rem, 4.5vw, 2.35rem);
            font-weight: 700;
            line-height: 1.08;
            letter-spacing: -0.02em;
            color: var(--white-fixed);
        }
    }

    .pledge-pay-panel {
        display: block;
        padding: clamp(0.85rem, 2.4vw, 1.4rem);
        border: 1px solid var(--border-color);
        border-radius: 16px;
        background: var(--field-bg);
        box-shadow: 0 18px 48px var(--shadow-card), 0 2px 6px var(--shadow-subtle);
    }

    .ppay-step {
        margin: 0;
        padding: 0.9rem 0;
        border-top: 1px solid var(--ppay-line);

        &:first-of-type {
            padding-top: 0;
            border-top: 0;
        }
    }

    #multi_gateway_payment_mode_warning + .ppay-step,
    #payment_content.ppay-step {
        padding-top: 0;
        border-top: 0;
    }

    #pledge_pay_body .payment_type .payment-mode-toggle-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
        max-width: 100%;
        padding: 0.35rem;
        border-radius: 14px;
        background: var(--ppay-tint);

        @media (min-width: 768px) {
            flex-direction: row;
            border-radius: var(--radius-pill);
        }

        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            flex: 1 1 0;
            border: 0;
            border-radius: 10px;
            background: transparent;
            color: var(--text-muted);
            font-weight: 600;
            box-shadow: none;
            transition: var(--transition-bg-color-fast);

            @media (min-width: 768px) {
                border-radius: var(--radius-pill);
            }

            &.active {
                background: var(--field-bg);
                color: var(--text-color);
                box-shadow: 0 2px 8px var(--shadow-card);

                i {
                    color: var(--text-color);
                }
            }

            &.is-disabled {
                background: var(--btn-disabled-bg);
                color: var(--btn-disabled-text);
                cursor: not-allowed;
                opacity: 0.65;
            }
        }
    }

    .pledge-pay-table-wrap {
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        .pledge-payment-order-num {
            font-size: 0;
        }
    }

    #pledge_pay_body .pledge-pay-panel__table-shell {
        border: 0;
        background: transparent;
        overflow: visible;

        table {
            display: block;
            width: 100%;
            min-width: 0;
            margin: 0;
        }

        thead {
            display: none;
        }

        tbody {
            display: block;

            tr {
                display: block;
                padding: 0.9rem 0.95rem;
                border-top: 1px solid var(--ppay-line);

                &:first-child {
                    border-top: 0;
                }
            }

            td {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 1rem;
                padding: 0.25rem 0;
                border: 0;
                color: var(--text-color);
                text-align: right;

                &::before {
                    content: attr(data-label);
                    font-size: 0.72rem;
                    font-weight: 700;
                    letter-spacing: 0.04em;
                    text-transform: uppercase;
                    color: var(--text-muted);
                    text-align: left;
                }
            }

            td.pledge-pay-campaign {
                display: block;
                margin-bottom: 0.4rem;
                font-size: 1rem;
                font-weight: 700;
                color: var(--text-color);
                text-align: left;

                &::before {
                    content: none;
                }
            }

            td.pledge-pay-desc:empty {
                display: none;
            }
        }

        @media (min-width: 768px) {
            table {
                display: table;
                table-layout: auto;
            }

            thead {
                display: table-header-group;

                th {
                    padding: 0.75rem 0.9rem;
                    border-top: none;
                    border-bottom: 1px solid var(--ppay-line);
                    background: var(--ppay-tint);
                    font-size: 0.68rem;
                    font-weight: 700;
                    letter-spacing: 0.08em;
                    text-transform: uppercase;
                    color: var(--text-muted);
                }
            }

            tbody {
                display: table-row-group;

                tr {
                    display: table-row;
                    padding: 0;

                    &:first-child td {
                        border-top: 0;
                    }
                }

                td {
                    display: table-cell;
                    gap: 0;
                    justify-content: unset;
                    padding: 0.8rem 0.9rem;
                    border-top: 1px solid var(--ppay-line);
                    vertical-align: middle;
                    text-align: left;
                    overflow-wrap: anywhere;

                    &::before {
                        content: none;
                    }
                }

                td.pledge-pay-campaign {
                    display: table-cell;
                    margin: 0;
                    font-size: inherit;
                    font-weight: 400;
                }

                td.pledge-pay-desc:empty {
                    display: table-cell;
                }
            }
        }
    }

    .amount_value {
        width: 100%;
        max-width: 150px;
        box-sizing: border-box;
        border: 1px solid var(--field-border);
        border-radius: 8px;
        text-align: right;

        &:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-border);
            outline: none;
        }
    }

    .pledge-pay-method-pill span {
        white-space: nowrap;
    }

    .pledge-pay-panel__recurring-summary {
        width: min(100%, 460px);
        margin: 1.25rem auto 0;
        padding: 0.85rem 1.1rem;
        border: 1px solid var(--accent-border);
        border-radius: 12px;
        background: var(--ppay-tint);
        color: var(--text-color);
        text-align: center;
    }

    .pledge-pay-panel__recurring-note {
        margin-top: 0.25rem;
        font-style: italic;
        color: var(--text-muted);
    }

    #mgr_recurring_fields_slot .recurring-setup.row {
        margin-left: 0;
        margin-right: 0;
    }

    .mgr-pledge-surcharge-section {
        margin-top: 0.5rem;
    }

    .mgr-pledge-surcharge-panel {
        padding: 0.5rem 0.75rem;
    }

    .mgr-pledge-optional-surcharge-check {
        width: 1rem;
        height: 1rem;
    }

    .mgr-pledge-surcharge-optional .form-check-label {
        font-size: 0.88rem;
        line-height: 1.3;
    }

    .mgr-pledge-summary-block {
        margin-top: 0.5rem;
    }

    .mgr-pledge-panel--summary {
        padding: 0.75rem 1rem;
        border-color: var(--ppay-line);
        box-shadow: none;
    }

    .mgr-pledge-payment-method-panel {
        padding: 0.75rem;
    }

    .mgr-summary-lines--breakdown div:not(:has(.mgr-summary-open-payment-deduction)) {
        display: none;
    }

    .mgr-pledge-gateway-header {
        padding: 0.5rem 0.7rem;
    }

    .mgr-pledge-gateway-icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    .mgr-pledge-gateway-title {
        font-size: 0.65rem;
    }

    .mgr-gateway-credit-panel {
        padding: 0.6rem 0.7rem;
    }

    .ppay-actionbar {
        display: flex;
        margin-top: 0.25rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--ppay-line);

        #pay_now_button {
            width: 100%;
            justify-content: center;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        * {
            transition: none !important;
        }
    }
}

.mgr-pledge-surcharge-panel {
    padding: 0.85rem 1rem;
    border: 1px solid var(--manager-surface-border);
    border-radius: 4px;
    background: var(--field-bg);

    & + .mgr-pledge-surcharge-panel {
        margin-top: 0.5rem;
    }

    &.mgr-pledge-surcharge-panel--disabled {
        opacity: 0.55;
        pointer-events: none;
    }
}

.mgr-pledge-force-surcharge-message {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    color: var(--yellow);
    font-weight: 600;
}

.mgr-pledge-force-surcharge-icon {
    flex-shrink: 0;
    line-height: 1;
    color: var(--yellow);
}

.mgr-pledge-surcharge-optional {
    align-items: flex-start;
    gap: 0.75rem;

    .form-check-label {
        line-height: 1.4;
        color: var(--text-color);
    }
}

.mgr-pledge-optional-surcharge-check {
    position: relative;
    margin: 0.125rem 0 0;
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--accent);
}