/* ============================================================================
   Shared BNPL band + dark modal (home band + category bands)
   ----------------------------------------------------------------------------
   The modal (#gpd-archive-bnpl-modal) and the provider pill sizing are shared
   between the home "Play now. Pay later." band and the category loop band, so
   both surfaces render the identical dark modal that mirrors the product page's
   plugin modal. De-scoped from gpd-archive.css (was body.archive) — the
   .gpd-bnpl-modal / banner classes are unique to BNPL bands, so this is safe to
   load wherever a band renders. Depends on gpd-tokens.css for the var(--…)s.
   ========================================================================== */

/* ── provider pills (DROIX_BNPL_Card::badge_html → .dx-bnpl-badge with inline
   brand colours); the plugin's bnpl-cards.css is not enqueued here, so size
   them ourselves in both the band and the modal ───────────────────────────── */
.gpd-home-bnpl .dx-bnpl-badge,
.gpd-loop-banner .dx-bnpl-badge,
.gpd-bnpl-modal .dx-bnpl-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    min-width: 58px;
    padding: 0 11px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: -0.2px;
    flex: 0 0 auto;
}
.gpd-home-bnpl .dx-bnpl-badge__logo,
.gpd-loop-banner .dx-bnpl-badge__logo,
.gpd-bnpl-modal .dx-bnpl-badge__logo { height: 13px; width: auto; display: block; }

/* ── modal: provider rows with computed plan summaries ─────────────────────── */
body.gpd-bnpl-modal-open { overflow: hidden; }

.gpd-bnpl-modal {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 8, 10, .7);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 20px;
}
.gpd-bnpl-modal[hidden] { display: none; }
.gpd-bnpl-modal__panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 86vh;
    overflow: auto;
    background: rgba(16, 20, 26, .98);
    border: 1px solid var(--line-1);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    padding: 26px 28px;
    text-align: left;
    cursor: auto;
}
.gpd-bnpl-modal__panel:focus { outline: none; }
.gpd-bnpl-modal__eyebrow {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--teal-500);
}
.gpd-bnpl-modal__panel h3 {
    margin: 0 0 6px;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.4px;
    color: #fff;
}
.gpd-bnpl-modal__intro {
    margin: 0 0 18px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--fg-tertiary);
}
.gpd-bnpl-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    color: #fff;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}
.gpd-bnpl-modal__close:hover { background: rgba(255, 255, 255, .15); }
.gpd-bnpl-modal__rows {
    list-style: none;
    margin: 0;
    padding: 0;
}
.gpd-bnpl-modal__rows li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--line-2);
}
.gpd-bnpl-modal__rows li:first-child { border-top: 0; }
.gpd-bnpl-modal__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gpd-bnpl-modal__body .main { color: #fff; font-size: 14px; font-weight: 600; }
.gpd-bnpl-modal__body .main strong { color: #fff; }
.gpd-bnpl-modal__body .sub { color: var(--fg-secondary); font-size: 12.5px; line-height: 1.45; }
.gpd-bnpl-modal__body .more { color: var(--teal-500); font-size: 12.5px; text-decoration: none; }
.gpd-bnpl-modal__body .more::after { content: " ›"; }
.gpd-bnpl-modal__body .more:hover { color: #fff; }
.gpd-bnpl-modal__disclaimer {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--line-2);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--fg-tertiary);
}