.physikit-radio {
    display: flex; /* instead of inline-flex */
    flex-direction: row;
    align-items: center;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    gap: 8px;
    width: 100%; /* <--- add this */
    margin-bottom: 8px; /* <--- add this for little spacing */
}

.physikit-radio-input {
    display: none; /* hide default */
}

.physikit-radio-dot-wrapper {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.physikit-radio-dot {
    width: 100%;
    height: 100%;
    background: #fff;
    border: 2px solid #ccc;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
    position: relative;
}

.physikit-radio-dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--theme-palette-color-1);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8); /* center + scale */
    transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
}


/* Hover */
.physikit-radio:hover .physikit-radio-dot {
    border-color: var(--theme-palette-color-1);
}

/* Checked State */
.physikit-radio--checked .physikit-radio-dot {
    border-color: var(--theme-palette-color-1);
}

.physikit-radio--checked .physikit-radio-dot::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.physikit-radio-label {
    font-weight: 500;
    line-height: 20px;
}

/* Focus */
.physikit-radio:has(.physikit-radio-input:focus-visible) .physikit-radio-dot {
    box-shadow: 0 0 0 3px rgba(48, 209, 117, 0.3);
}