/* Canonical single-product Global Options renderer (see class-rm-global-options-frontend.php,
   docs/GLOBAL_OPTIONS.md "Customer-facing rendering"). Visual language only - a light card per
   option, a clickable choice row, a blue selected state, a green price - is used as a design
   reference (see the quantity-lifecycle/live-price analysis); the data model and markup below
   are entirely RM's own, under RM's own rm-go-* classes. Colours are the Theme tokens
   (class-rm-theme.php) with the earlier literal as the fallback. The form controls (choice rows,
   textarea) are scoped under .rm-go-frontend so a theme's plain input/label rules cannot restyle them. */

.rm-go-frontend{margin:16px 0;display:flex;flex-direction:column;gap:12px}

.rm-go-frontend-option{background:#f9fafb;border:1px solid var(--rm-border,#e5e7eb);border-radius:var(--rm-radius,8px);padding:14px 16px;transition:border-color .15s ease}
.rm-go-frontend-option--error{border-color:var(--rm-danger,#b91c1c);background:var(--rm-danger-tint,#fef2f2)}

.rm-go-frontend-option-label{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-weight:600;margin:0 0 10px;color:var(--rm-text,#1f2933)}

.rm-go-required{display:inline-block;font-size:.7em;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--rm-danger,#b91c1c);background:#fee2e2;border-radius:10px;padding:2px 8px;line-height:1.4}

.rm-go-frontend-choices{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}

.rm-go-frontend-choice{margin:0}
.rm-go-frontend .rm-go-frontend-choice label{display:flex;align-items:center;gap:10px;font-weight:400;cursor:pointer;background:var(--rm-surface,#ffffff);border:1px solid var(--rm-border,#e5e7eb);border-radius:6px;padding:10px 12px;transition:border-color .15s ease,background-color .15s ease}
.rm-go-frontend .rm-go-frontend-choice label:hover{border-color:#93c5fd;background:#f5f9ff}
.rm-go-frontend .rm-go-frontend-choice label:has(input:checked){border-color:var(--rm-primary,#2563eb);background:var(--rm-primary-tint,#eff6ff);font-weight:600}

/* Hover follows the primary colour where the browser can mix colours; the literals above are the fallback. */
@supports (color:color-mix(in srgb,red,blue)){
  .rm-go-frontend .rm-go-frontend-choice label:hover{border-color:color-mix(in srgb,var(--rm-primary,#2563eb) 45%,#fff);background:color-mix(in srgb,var(--rm-primary,#2563eb) 4%,#fff)}
}

.rm-go-frontend .rm-go-frontend-choice input[type="checkbox"],
.rm-go-frontend .rm-go-frontend-choice input[type="radio"]{accent-color:var(--rm-primary,#2563eb);width:16px;height:16px;flex:0 0 auto}
.rm-go-frontend .rm-go-frontend-choice input:focus-visible{outline:2px solid var(--rm-focus,#2563eb);outline-offset:2px}

.rm-go-frontend-choice-name{flex:1 1 auto}
.rm-go-frontend-choice-price{color:var(--rm-success,#15803d);font-weight:600;font-size:.9em;white-space:nowrap}

.rm-go-frontend .rm-go-frontend-textarea{width:100%;max-width:480px;min-height:70px;box-sizing:border-box;border:1px solid var(--rm-border-strong,#8b93a1);border-radius:6px;padding:10px 12px;font:inherit;background:var(--rm-surface,#ffffff);color:var(--rm-text,#1f2933);transition:border-color .15s ease}
.rm-go-frontend .rm-go-frontend-textarea:focus{outline:none;border-color:var(--rm-primary,#2563eb);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.rm-go-frontend .rm-go-frontend-textarea:focus-visible{outline:2px solid var(--rm-focus,#2563eb);outline-offset:1px}

.rm-go-frontend-message{display:none;margin:8px 0 0;color:var(--rm-danger,#b91c1c);font-size:.85em}
.rm-go-frontend-message.is-visible{display:block}

.rm-go-frontend-total{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 0;padding:12px 16px;background:var(--rm-primary-tint,#eff6ff);border:1px solid #bfdbfe;border-radius:var(--rm-radius,8px);font-weight:600;color:var(--rm-text,#1f2933)}
.rm-go-frontend-total-label{text-transform:uppercase;font-size:.75em;letter-spacing:.04em;color:var(--rm-primary-hover,#1d4ed8)}
.rm-go-frontend-total-amount{font-size:1.1em;color:var(--rm-success,#15803d)}

@media(max-width:480px){
  .rm-go-frontend .rm-go-frontend-textarea{max-width:100%}
  .rm-go-frontend-total{flex-direction:column;align-items:flex-start;gap:2px}
}

/* Allergens (Phase 3 Stage B): the simple product-page display - semantic
   list, icon always paired with visible text, icon inherits text color via
   currentColor (inline SVG). Rendered only when allergens resolve. The three
   colours default to the Theme text colour; an allergen colour saved under
   Allergens still wins (RM_Allergen_Frontend::style_attribute() sets it inline). */
.rm-allergens{--rm-allergens-icon-color:var(--rm-text,#1f2933);--rm-allergens-text-color:var(--rm-text,#1f2933);--rm-allergens-heading-color:var(--rm-text,#1f2933);--rm-allergens-text-font-size:0.95em;--rm-allergens-heading-font-size:0.95em;margin:10px 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.rm-allergens-label{font-weight:600;color:var(--rm-allergens-heading-color);font-size:var(--rm-allergens-heading-font-size);flex:0 0 auto}
.rm-allergens-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px}
.rm-allergen{display:inline-flex;align-items:center;gap:6px;margin:0}
.rm-allergen-icon{display:inline-flex;flex:0 0 auto;color:var(--rm-allergens-icon-color)}
.rm-allergen-icon svg{width:1.15em;height:1.15em;display:block}
.rm-allergen-name{color:var(--rm-allergens-text-color);font-size:var(--rm-allergens-text-font-size);white-space:nowrap}