/*
 * Front end styles.
 *
 * Signup plan selector
 * --------------------
 * Ultimate Multisite renders each plan as a <label> wrapping a checkbox that
 * is deliberately hidden (screen-reader-text + wu-hidden), with selection
 * shown by an absolutely positioned overlay that gains a blue border, and
 * interactivity implied by Tailwind-style utilities on the label.
 *
 * Those utilities do not survive on our front end, so the plan arrived as a
 * plain rectangle: no pointer cursor, no hover, nothing to suggest a click was
 * required. Without that click the summary stays empty and Checkout answers
 * "The Products field is required" with no explanation, which is exactly how a
 * tester concluded signup was broken.
 *
 * Restated here against the stable ids and structural classes the template
 * emits, rather than by forking the template, so a plugin update keeps working
 * and only the appearance is ours.
 */

[id^="wu-product-"] {
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

[id^="wu-product-"]:hover {
    border-color: #6366f1;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.18);
}

[id^="wu-product-"]:active {
    transform: translateY(1px);
}

/* Keyboard parity: the real checkbox is hidden, so the ring it would have had
   has to be drawn on the label it lives inside. */
[id^="wu-product-"]:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
}

/*
 * A control that can be chosen should look like one before it is chosen. The
 * template only ever styles the selected state, so an unselected plan carried
 * no mark at all. This draws the empty circle, and the rule below fills it
 * once the template's own overlay turns blue.
 */
[id^="wu-product-"]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.9rem;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: -0.525rem;
    border: 2px solid #c7c9d1;
    border-radius: 50%;
    background: #fff;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

[id^="wu-product-"]:hover::before {
    border-color: #6366f1;
}

/* Room for the marker, so it never sits on top of the plan name. */
[id^="wu-product-"] > .wu-flex:first-of-type {
    padding-left: 2.1rem;
}

/*
 * Selected state. The template marks selection by swapping the overlay's
 * border class, so that element is the only reliable signal available from
 * CSS alone, and it is what this hangs off.
 */
[id^="wu-product-"]:has(.wu-border-blue-500)::before {
    border-color: #4f46e5;
    box-shadow: inset 0 0 0 4px #4f46e5;
}

[id^="wu-product-"]:has(.wu-border-blue-500) {
    border-color: #4f46e5;
}