/* To‘lov usuli tanlash bloki (includes/payment_methods.html) – checkout.html, series_checkout.html, subscribe.html ichida. */
.pay-title { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ui-dim); }
.pay-list { display: grid; gap: 10px; }
.pay-radio { position: relative; display: block; }
.pay-radio input { position: absolute; opacity: 0; pointer-events: none; }
.pay-radio .box { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ui-line-strong); background: var(--ui-chip); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.pay-radio .box:hover { background: var(--ui-chip-hover); }
.pay-radio .brand { display: flex; align-items: center; gap: 12px; }
.pay-radio .logo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; font-family: Inter, sans-serif; font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.pay-radio .logo--click { background: #00a3ff; color: #fff; }
.pay-radio .logo--payme { background: #33cccc; color: #fff; }
.pay-radio .name { font-size: 15px; font-weight: 700; color: var(--ui-heading); }
.pay-radio .hint { display: block; font-size: 12px; font-weight: 500; color: var(--ui-muted); }
.pay-radio .tick { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ui-line-strong); color: transparent; transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.pay-radio input:checked + .box { border-color: var(--ui-red); background: var(--ui-red-soft); }
.pay-radio input:checked + .box .tick { border-color: var(--ui-red); background: var(--ui-red); color: #fff; }
.pay-radio input:focus-visible + .box { outline: 2px solid var(--ui-red); outline-offset: 2px; }