/* Load LAST in , after page styles. Legacy names below are compatibility aliases. :root body gives this single bridge precedence over old scoped component styles. New components use .sw-button / .sw-input and modifiers, not stronger selectors. */ body { font-family: var(--sw-font-body); color: var(--sw-color-text); } button, input, textarea, select { font-family: inherit; } h1, h2, h3, h4, h5, h6 { font-family: var(--sw-font-heading); } :root body :is(.sw-button, .button, .formular-btn-submit, .order-summary-btn, .status-link-btn) { display: inline-flex; align-items: center; justify-content: center; gap: var(--sw-space-2); min-height: var(--sw-control-height); height: auto; max-width: 100%; padding: 10px var(--sw-space-6); border: 0; border-radius: var(--sw-radius-control); background: var(--sw-color-brand); color: var(--sw-color-white); font: 400 14px/20px var(--sw-font-body); letter-spacing: .1px; text-align: center; text-decoration: none; white-space: normal; cursor: pointer; position: relative; transition: background-color var(--sw-transition), color var(--sw-transition), opacity var(--sw-transition); } :root body :is(.sw-button, .button, .formular-btn-submit, .order-summary-btn, .status-link-btn):hover { background: var(--sw-color-brand-hover); color: var(--sw-color-white); transform: none; box-shadow: none; } :root body :is(.sw-button--secondary, .button.style2, .order-summary-btn-secondary) { background: var(--sw-color-secondary); color: var(--sw-color-text); } :root body :is(.sw-button--secondary, .button.style2, .order-summary-btn-secondary):hover { background: var(--sw-color-text); color: var(--sw-color-white); } /* Historical secondary class used for a primary space CTA. */ :root body .button.style2.space-detail-button { background: var(--sw-color-brand); color: var(--sw-color-white); } :root body .button.style2.space-detail-button:hover { background: var(--sw-color-brand-hover); } :root body .button.style2.none { display: none; } :root body .formular-btn-submit { align-self: center; } :root body .order-summary-btn { flex: 1; } :root body .status-link-btn { margin-top: var(--sw-space-2); } :root body :is(.sw-button--compact, .button.style2):not(.space-detail-button) { min-height: var(--sw-control-compact-height); padding: 10px var(--sw-space-4); } :root body :is(.sw-button, .button, .formular-btn-submit, .order-summary-btn, .status-link-btn):active { transform: none; box-shadow: none; } :root body .b2b-month-overview-head > .b2b-mini-nav.button.style2 { min-height: 34px; padding: 6px; font-size: 12px; } :root body .b2b-mobile-editor-remove.button.style2 { color: var(--sw-color-error); } :root body :is(.sw-button, .button, .formular-btn-submit, .order-summary-btn, .status-link-btn, .admin-btn):is(:disabled, [aria-disabled="true"], [aria-busy="true"]) { opacity: var(--sw-disabled-opacity); cursor: not-allowed; transform: none; box-shadow: none; } :root body :is(.sw-button, .button, .formular-btn-submit, .order-summary-btn, .status-link-btn):disabled:hover { background: var(--sw-color-brand); color: var(--sw-color-white); } :root body :is(.sw-button--secondary, .button.style2, .order-summary-btn-secondary):disabled:hover { background: var(--sw-color-secondary); color: var(--sw-color-text); } /* Shared text-entry controls. Checkbox, radio, calendar and admin density are separate roles. */ :root body :is(.sw-input, .formular-input-field), :root body :is(.event-inquiry-field, .b2b-form-col, .upcoming-event-form-field) :is(input, textarea, select) { box-sizing: border-box; width: 100%; height: auto; min-height: var(--sw-control-height); padding: var(--sw-space-3) var(--sw-space-4); border: 1px solid var(--sw-color-input-border); border-radius: var(--sw-radius-control); background: var(--sw-color-white); color: var(--sw-color-text); font: 400 16px/22px var(--sw-font-body); letter-spacing: normal; transition: border-color var(--sw-transition), box-shadow var(--sw-transition); } :root body textarea.sw-input, :root body :is(.event-inquiry-field, .b2b-form-col, .upcoming-event-form-field) textarea { min-height: 128px; resize: vertical; } :root body :is(.sw-input, .formular-input-field)::placeholder, :root body :is(.event-inquiry-field, .b2b-form-col, .upcoming-event-form-field) :is(input, textarea)::placeholder { color: var(--sw-color-muted); opacity: 1; } :root body :is(.sw-input, .formular-input-field):focus, :root body :is(.event-inquiry-field, .b2b-form-col, .upcoming-event-form-field) :is(input, textarea, select):focus { border-color: var(--sw-color-brand); outline: none; box-shadow: 0 0 0 3px var(--sw-color-brand-light); } :root body :is(.sw-input, .formular-input-field)[aria-invalid="true"] { border-color: var(--sw-color-error); } :root body :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--sw-color-brand-hover); outline-offset: 3px; } /* Visually hidden checkboxes must expose focus on their visible replacement. */ :root body .formular-checkbox-wrapper input:focus-visible + .formular-checkbox-custom { outline: 2px solid var(--sw-color-brand-hover); outline-offset: 3px; } :root body .admin-btn-primary { background: var(--sw-color-brand); } :root body .admin-btn-primary:hover { background: var(--sw-color-brand-hover); } /* New layout primitives. Existing one-off composition dimensions remain local. */ .sw-container { width: 100%; max-width: var(--sw-content-width); margin-inline: auto; } .sw-card { border: 1px solid var(--sw-color-border); border-radius: var(--sw-radius-control); background: var(--sw-color-white); padding: var(--sw-space-6); } .sw-panel { border: 1px solid var(--sw-color-border); border-radius: var(--sw-radius-panel); background: var(--sw-color-white); padding: var(--sw-space-8); } @media (prefers-reduced-motion: reduce) { :root { --sw-transition: 0s; --sw-transition-fast: 0s; } :root body :is(.sw-button, .button, .admin-btn, .sw-input, .formular-input-field) { transition: none; } }