/**
 * MU Portal — Registration Options (single product page).
 *
 * Tokens match Figma "MU – CLIENT-SHARE" node 116:3656.
 * Inter is loaded by the active theme; we just reference the family.
 */

#mu-reg-options-wrap {
    --mu-ro-text:         #131313;
    --mu-ro-label:        #131313;
    --mu-ro-section:      #374151;
    --mu-ro-border:       #D1D5DB;
    --mu-ro-border-light: #E5E7EB;
    --mu-ro-accent:       #00843D; /* MU green for checked state */
    --mu-ro-disabled:     #9CA3AF;

    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--mu-ro-text);
    margin: 24px 0 16px;
    padding-top: 20px;
    border-top: 1px solid var(--mu-ro-border-light);
}

/* Each group: label + its options. 24px gap between groups matches the
   Figma "Registration Fees" → "Russell Library Tours:" rhythm. */
#mu-reg-options-wrap .mu-reg-group {
    margin: 0 0 24px;
    padding: 0;
}

#mu-reg-options-wrap .mu-reg-group:last-of-type {
    margin-bottom: 0;
}

/* Group label — Inter Medium 14/20, near-black. Specificity is raised
   (and !important on weight) because the active theme paints <p> + <strong>
   inside .product-summary-wrapper at 700; we explicitly want Medium. */
#mu-reg-options-wrap .mu-reg-group .mu-reg-group-label {
    font-size: 14px !important;
    line-height: 20px;
    font-weight: 500 !important;
    letter-spacing: 0.07px;
    color: var(--mu-ro-label);
    margin: 0 0 8px;
    padding: 0;
    text-transform: none;
}

#mu-reg-options-wrap .mu-reg-group .mu-reg-group-label strong {
    font-size: 14px !important;
    line-height: 20px;
    font-weight: 500 !important;
    letter-spacing: 0.07px;
}

#mu-reg-options-wrap .mu-reg-group .mu-reg-group-label .required {
    color: var(--mu-ro-accent);
    margin-left: 2px;
    font-weight: 500;
}

/* Single option row — label wraps the native input + text + price.
   Theme often adds vertical margin to <label> in WC summary; we reset
   it so spacing matches the Figma 4-8px option gap. */
#mu-reg-options-wrap .mu-reg-group .mu-reg-option {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 6px 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: 0.032px;
    color: var(--mu-ro-text);
    cursor: pointer;
}

/* Radio groups (required_single / single) use the larger 18/28 type
   per Figma "Registration Fees" radios. !important defends against the
   theme's own `.summary label { font-size: 16px }` from leaking through. */
#mu-reg-options-wrap .mu-reg-group[data-group-type="required_single"] .mu-reg-option,
#mu-reg-options-wrap .mu-reg-group[data-group-type="single"]          .mu-reg-option {
    font-size: 18px !important;
    line-height: 28px;
    letter-spacing: 0;
}

/* Native input — sized to match the 18px icon in the design.
   Accent-color paints the check/dot in MU green without custom SVG. */
#mu-reg-options-wrap .mu-reg-option input[type="radio"],
#mu-reg-options-wrap .mu-reg-option input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--mu-ro-accent);
    cursor: pointer;
}

/* Price suffix "(+€100.00)" — same weight as label, slightly muted */
#mu-reg-options-wrap .mu-reg-option-price {
    color: var(--mu-ro-text);
    white-space: nowrap;
}

#mu-reg-options-wrap .mu-reg-option-price .woocommerce-Price-amount {
    font-weight: inherit;
    color: inherit;
}

/* Sold-out state */
#mu-reg-options-wrap .mu-reg-option--soldout {
    color: var(--mu-ro-disabled);
    cursor: not-allowed;
}

#mu-reg-options-wrap .mu-reg-option--soldout input {
    cursor: not-allowed;
}

#mu-reg-options-wrap .mu-reg-soldout-text {
    font-size: 13px;
    color: var(--mu-ro-disabled);
    font-style: italic;
}

/* Surcharge total line (shown by JS once any option is picked) */
#mu-reg-surcharge {
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--mu-ro-border-light);
    font-size: 16px;
    line-height: 24px;
    color: var(--mu-ro-section);
}

#mu-reg-surcharge strong {
    font-weight: 600;
    margin-right: 4px;
}