:root{
  --sv-planSel: rgba(0,0,0,.06);
  --sv-planSelBorder: rgba(0,0,0,.14);
}
body.sv-dark{
  --sv-planSel: rgba(255,255,255,.08);
  --sv-planSelBorder: rgba(255,255,255,.16);
}

.sv-cpPlan.sv-cpPlan--selectable{cursor:pointer; transition:transform .08s ease, border-color .08s ease, background .08s ease;}
.sv-cpPlan.sv-cpPlan--selectable:hover{transform:translateY(-1px)}
.sv-cpPlan.sv-cpPlan--selected{background:var(--sv-planSel); border-color:var(--sv-planSelBorder);}

.sv-cpPickRow{display:flex; gap:10px; align-items:flex-start;}
.sv-cpPickRadio{width:18px; height:18px; border-radius:50%; border:2px solid var(--sv-border, rgba(0,0,0,.25)); margin-top:2px; flex:0 0 auto; position:relative;}
body.sv-dark .sv-cpPickRadio{border-color:var(--sv-border, rgba(255,255,255,.22));}
.sv-cpPlan--selected .sv-cpPickRadio{border-color:var(--sv-primary, #3b82f6);}
.sv-cpPlan--selected .sv-cpPickRadio:after{content:''; position:absolute; inset:3px; border-radius:50%; background:var(--sv-primary, #3b82f6);}

.sv-cpPayDock{margin-top:12px; padding-top:12px; border-top:1px solid var(--sv-border, rgba(0,0,0,.08));}
body.sv-dark .sv-cpPayDock{border-top-color:var(--sv-border, rgba(255,255,255,.10));}
.sv-cpPayDockTop{display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap;}
.sv-cpPayDockTop .sv-note{margin:0;}
.sv-cpPayDockBtn{min-width:180px;}
.sv-cpPayDockHost{margin-top:10px;}

@media (max-width: 520px){
  .sv-cpPayDockTop{flex-direction:column; align-items:stretch;}
  .sv-cpPayDockBtn{width:100%;}
}