/*!
 * Shop Type chooser — Superadmin Business Create / Business Show only.
 *
 * Presentation for a plain radio group. The radio is still the control and
 * still what posts; the card is a label wrapped around it, so keyboard and
 * screen-reader behaviour is the browser's own and nothing depends on script.
 *
 * Borrows the tracking-card language already used on the product form rather
 * than introducing a second look for the same kind of choice. No framework.
 */

.st-card {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    width: 100%;
    margin-bottom: 12px;
    padding: 13px 14px;
    border: 1px solid #E6E0F0;
    border-radius: 10px;
    background: #FAF8FD;
    cursor: pointer;
    font-weight: 400;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.st-card:hover {
    border-color: #C4A2F8;
    background: #F5EFFE;
}

/* The chosen one. Set on the label by the server, and kept in step by
   :has() where the browser supports it, so clicking is instant without JS. */
.st-card.is-on,
.st-card:has(input:checked) {
    border-color: #7C3AED;
    background: #F3EDFE;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}

/* The radio itself stays in the DOM and stays reachable; it is simply not
   the thing being looked at. */
.st-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.st-card:focus-within {
    outline: 2px solid #7C3AED;
    outline-offset: 2px;
}

.st-card__icon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #fff;
    border: 1px solid #E6E0F0;
    color: #7C3AED;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.st-card.is-on .st-card__icon,
.st-card:has(input:checked) .st-card__icon {
    background: #7C3AED;
    border-color: #7C3AED;
    color: #fff;
}

.st-card__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.st-card__name {
    font-size: 13.5px;
    font-weight: 600;
    color: #3B1063;
    line-height: 1.3;
}

.st-card__desc {
    font-size: 11.5px;
    color: #6B6484;
    line-height: 1.35;
    margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .st-card { transition: none; }
}