/* Keep native form semantics with one branded appearance across layouts. */
body { --control-accent: var(--primary,var(--pink,var(--accent,#e11d48))); --control-border: #c8c9ce; --control-soft: color-mix(in srgb,var(--control-accent) 9%,white); }
body input[type="checkbox"],body input[type="radio"] {
    -webkit-appearance: none; appearance: none; display: inline-grid; place-content: center;
    box-sizing: border-box; width: 20px; min-width: 20px; height: 20px; flex: 0 0 20px;
    margin: 0; padding: 0; border: 1.5px solid var(--control-border); border-radius: 5px;
    background: #fff; color: var(--control-accent); box-shadow: none; vertical-align: middle;
    cursor: pointer; transition: border-color .15s,background-color .15s,box-shadow .15s;
}
body input[type="radio"] { border-radius: 50%; }
body input[type="checkbox"]:checked {
    border-color: var(--control-accent); background-color: var(--control-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4.5 10 3.4 3.5 7.6-7.3' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: center; background-size: 18px; background-repeat: no-repeat;
}
body input[type="checkbox"]:indeterminate { border-color: var(--control-accent); background: linear-gradient(#fff,#fff) center/10px 2px no-repeat var(--control-accent); }
body input[type="radio"]:checked { border-color: var(--control-accent); background: radial-gradient(circle,var(--control-accent) 0 38%,#fff 43%); }
body input[type="checkbox"]:hover:not(:disabled),body input[type="radio"]:hover:not(:disabled) { border-color: var(--control-accent); }
body input[type="checkbox"]:focus-visible,body input[type="radio"]:focus-visible { outline: 2px solid var(--control-accent); outline-offset: 3px; box-shadow: none; }
body input[type="checkbox"]:disabled,body input[type="radio"]:disabled { opacity: .45; cursor: not-allowed; }
body select:not([multiple]) {
    -webkit-appearance: none; appearance: none; width: 100%; min-height: 42px;
    box-sizing: border-box; padding: 10px 40px 10px 12px; border: 1px solid var(--control-border);
    border-radius: 9px; background-color: #fff; color: inherit; font: inherit; font-size: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 7.5 5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 17px;
    cursor: pointer; transition: border-color .15s,box-shadow .15s;
}
body select:not([multiple]):hover:not(:disabled) { border-color: var(--control-accent); }
body select:not([multiple]):focus-visible { outline: 2px solid var(--control-accent); outline-offset: 2px; border-color: var(--control-accent); box-shadow: none; }
body select:disabled { opacity: .5; cursor: not-allowed; }
body select option { color: #27272a; background: #fff; }
body .allergen-choices label:has(input:checked) { border-color: var(--control-accent); background: var(--control-soft,#fff4f6); }
@supports (appearance: base-select) {
    body select:not([multiple]),body select:not([multiple])::picker(select) { appearance: base-select; }
    body select:not([multiple])::picker-icon { display: none; }
    body select:not([multiple])::picker(select) { margin-top: 5px; border: 1px solid #dedee3; border-radius: 10px; background: #fff; box-shadow: 0 10px 30px #18181b20; padding: 5px; }
    body select:not([multiple]) option { padding: 10px; border-radius: 6px; gap: 8px; }
    body select:not([multiple]) option:hover,body select:not([multiple]) option:checked { background: var(--control-soft,#fff4f6); color: #27272a; }
    body select:not([multiple]) option::checkmark { color: var(--control-accent); }
}
@media (forced-colors: active) {
    body input[type="checkbox"],body input[type="radio"] { appearance: auto; background-image: none; }
}