Soft Minimal Radio Selector

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="radio-card-502"><input type="radio" name="plan" checked><div class="content"><div class="radio-circle"></div><div class="info"><strong>Pro Member</strong><span>$12 / month</span></div></div></label>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.radio-card-502 { display: block; cursor: pointer; font-family: system-ui, sans-serif; width: 220px; }
.radio-card-502 input { display: none; }
.radio-card-502 .content { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #ffffff; border: 2px solid #e2e8f0; border-radius: 14px; transition: all 0.3s ease; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02); }
.radio-card-502:hover .content { border-color: #94a3b8; }
.radio-card-502 input:checked + .content { border-color: #0284c7; background: #f0f9ff; box-shadow: 0 10px 15px -3px rgba(2, 132, 199, 0.15); }
.radio-card-502 .radio-circle { width: 18px; height: 18px; border: 2px solid #cbd5e1; border-radius: 50%; transition: all 0.2s; position: relative; flex-shrink: 0; }
.radio-card-502 input:checked + .content .radio-circle { border-color: #0284c7; background: #0284c7; }
.radio-card-502 .info strong { display: block; font-size: 13px; color: #0f172a; }
.radio-card-502 .info span { font-size: 11px; color: #64748b; }