/* PRH In-card billing toggle (marketing pages) */

:root{
  --prh-accent: #2b5cff;
  --prh-accent2: #1a3ed1;
  --prh-glow: rgba(43, 92, 255, .22);
  --prh-border: rgba(255,255,255,.14);
  --prh-glass: rgba(10,18,35,.45);
}

/* wrapper placement inside cards */
.prhPkgCard .prhCardBillingWrap{
  margin:10px 0 12px 0;
  display:flex;
  justify-content:flex-start;
}

/* glass container */
.prhCardBilling{
  position:relative;
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding:6px;
  border-radius:999px;
  border:1px solid var(--prh-border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:
    0 10px 30px rgba(0,0,0,.40),
    0 0 0 1px rgba(43,92,255,.12) inset,
    0 0 22px var(--prh-glow);
}

/* blur if supported */
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .prhCardBilling{
    background: rgba(10,18,35,.35);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

/* subtle top shine */
.prhCardBilling:before{
  content:"";
  position:absolute;
  left:8px; right:8px; top:6px;
  height:18px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  pointer-events:none;
  opacity:.65;
}

/* buttons */
.prhCardBilling .prhCardBillBtn{
  appearance:none;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  color:#fff;
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
  line-height:1;
  letter-spacing:.2px;
  transition: transform .08s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  position:relative;
  z-index:1;
}

.prhCardBilling .prhCardBillBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.28);
}

/* active = neon gradient + glow */
.prhCardBilling .prhCardBillBtn.isActive{
  background: linear-gradient(180deg, var(--prh-accent), var(--prh-accent2));
  border-color: rgba(43,92,255,.95);
  box-shadow:
    0 10px 26px rgba(43,92,255,.18),
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 18px rgba(43,92,255,.35);
}

.prhCardBilling .prhCardBillBtn:focus{
  outline: none;
}