/**
 * Infini checkout styles
 *
 * 网关标识 = 品牌标识 + 支付方式图标条。
 * 尺寸一律用 em，跟随商户主题的字号走；颜色用 currentColor，深浅色主题自适应。
 * 不设固定像素高度 —— 主题字号差异极大，写死会在小字号主题下过分抢眼。
 */

.infini-gateway-icon {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em;
    vertical-align: middle;
    line-height: 1;
    max-width: 100%;
}

/* ── 支付方式图标条 ──────────────────────────────────────── */

.infini-methods {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    flex-wrap: wrap;
    min-width: 0;
}

.infini-methods__group {
    display: inline-flex;
    align-items: center;
}

/* 币种图标并排，留细缝分隔。
   曾用负 margin 叠排 + 一圈与背景同色的描边来切分相邻图标，但那个描边色
   只能靠 prefers-color-scheme 猜：系统深色而商店主题是浅色时（很常见），
   描边取了深色值，在浅底上就成了一圈黑框。页面背景色是拿不到的，与其猜错，
   不如不叠 —— 留缝分隔在任何主题下都成立，也不再需要描边。 */
.infini-methods__group--coins .infini-methods__coin + .infini-methods__coin {
    margin-left: 0.15em;
}

.infini-methods__coin {
    display: inline-flex;
    border-radius: 50%;
    position: relative;
}

.infini-methods__coin svg {
    width: 1.32em;
    height: 1.32em;
    display: block;
    border-radius: 50%;
}

.infini-methods__group--wallets {
    gap: 0.25em;
}

.infini-methods__item {
    display: inline-flex;
}

/* 方形图块（Apple Pay / Binance Pay / 卡组织）。
   略大于币种图标 —— 卡组织图块内含 VISA + Mastercard 两个标记上下排布，
   尺寸与币种一致时会糊到认不出。 */
/* 不画任何描边：每个图块的外形由素材自身决定（Apple Pay 是 rx≈25% 的圆角方，
   Google Pay 是完整胶囊形，Binance / 卡组织是各自带圆角的位图）。CSS 描边只能
   沿 border-radius 画一个统一形状，必然与其中某些对不上 —— Google Pay 上就表现为
   白色胶囊外围多出一圈更方的框。白底图块与结账页背景本就有明度差，不需要这道边。 */
.infini-methods__tile {
    width: 1.5em;
    height: 1.5em;
    display: block;
    object-fit: contain;
}

/* 横长图块（Google Pay 含文字标，比例约 1.88:1） */
.infini-methods__wide {
    height: 1.5em;
    width: 2.82em;
    display: block;
}

/* 币种组与钱包组之间的竖线分隔 */
.infini-methods__sep {
    width: 1px;
    height: 0.95em;
    background: currentColor;
    opacity: 0.18;
    flex-shrink: 0;
}

/* ── Block Checkout ─────────────────────────────────────── */

.infini-gateway-icon__methods {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.infini-gateway-icon__title {
    flex-shrink: 0;
}

/* ── 深色主题：白底图块的内描边反色，避免黑边 ─────────────── */

/* ── 窄屏：图标条换行到标题下方，不挤压网关名 ─────────────── */

@media (max-width: 480px) {
    .infini-gateway-icon {
        gap: 0.4em;
    }

    .infini-methods {
        flex-basis: 100%;
    }
}

/* ── 无障碍：视觉隐藏但读屏可读 ──────────────────────────── */

/* 标题可留空（结账页只显示图标条），此时这段文本是屏幕阅读器识别本支付方式的
   唯一依据。WordPress 核心与多数主题都定义了 .screen-reader-text，但不能假设
   一定存在 —— 缺失时这段文字会直接显示在页面上，故在此自带一份定义。 */
.infini-gateway-icon .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}