/* pgaddons: one-time Top-Up under a Connectivity Plans service tab (user 2026-10-06), v1.
   A Yes/No pair styled like the Local/Global switch above it. Each option is a real .pg-addon-row radio,
   so the product page's add to cart picks up "Yes" like any other add-on. */

.pg-dpt__topup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
  row-gap: .15rem;
  margin-top: .6rem;
  padding: .7rem 0 0;
  border-top: 1px solid var(--rule-soft, rgba(17,17,16,.08));
}
.pg-dpt__topup-name {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink, #111110);
}
.pg-dpt__topup-price {
  margin-left: .5rem;
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: .8125rem;
  color: var(--ink, #111110);
  white-space: nowrap;
}
.pg-dpt__topup-desc {
  grid-column: 1;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--muted, #5a5852);
}
.pg-dpt__topup-sku {
  display: block;
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: .72rem;
  color: var(--muted-2, #8a8880);
}
.pg-dpt__yn {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 3.5rem;
  border: 1px solid var(--ink, #111110);
}
.pg-dpt .pg-dpt__yn .pg-addon-row.pg-dpt__yn-opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: .45rem 0;
  border: 0;
  background: #fff;
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink, #111110);
  cursor: pointer;
}
.pg-dpt .pg-dpt__yn .pg-addon-row.pg-dpt__yn-opt + .pg-dpt__yn-opt { border-left: 1px solid var(--ink, #111110); }
.pg-dpt .pg-dpt__yn .pg-addon-row.pg-dpt__yn-opt:hover { background: var(--paper, #f4f2eb); }
.pg-dpt .pg-dpt__yn .pg-addon-row.pg-dpt__yn-opt:has(input:checked) { background: var(--ink, #111110); color: #fff; }
.pg-dpt .pg-dpt__yn .pg-addon-row.pg-dpt__yn-opt:has(input:focus-visible) { outline: 2px solid var(--accent, #0d6efd); outline-offset: 2px; z-index: 1; }
.pg-dpt .pg-dpt__yn .pg-addon-row.pg-dpt__yn-opt:has(input:disabled) { color: var(--muted-2, #8a8880); background: #fff; cursor: not-allowed; }
.pg-dpt__yn input {
  position: absolute !important;
  opacity: 0;
  width: 1px !important;
  height: 1px !important;
  pointer-events: none;
}
.pg-dpt__topup-hint {
  grid-column: 1 / -1;
  margin: .2rem 0 0;
  font-size: .8125rem;
  color: var(--muted-2, #8a8880);
}
@media (max-width: 480px) {
  .pg-dpt__topup-price { display: block; margin-left: 0; }
}