/* Single action-button component shared by customer and back-office pages.
   Scoped !important declarations isolate appearance from legacy page selectors. */
:root {
    --button-height-sm: 36px;
    --button-height-md: 44px;
    --button-height-lg: 52px;
    --button-radius: 12px;
}
body .ui-button {
    --ui-button-bg: var(--surface);
    --ui-button-text: var(--text-primary);
    --ui-button-border: var(--border);
    --ui-button-hover: var(--surface-hover);
    min-width: 0; max-width: 100%; min-height: var(--button-height-md);
    margin: 0; padding: 10px 18px;
    align-items: center; justify-content: center; gap: 8px;
    appearance: none; cursor: pointer; vertical-align: middle;
    border: 1px solid var(--ui-button-border) !important;
    border-radius: var(--button-radius) !important;
    color: var(--ui-button-text) !important;
    background: var(--ui-button-bg) !important;
    box-shadow: none !important;
    font-family: var(--ui-font, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
    font-size: 14px !important; font-weight: 650 !important; line-height: 1.35 !important;
    text-align: center; text-decoration: none !important; white-space: normal !important;
    overflow-wrap: anywhere; user-select: none; touch-action: manipulation;
    transform: none !important;
    transition: background-color 120ms ease, border-color 120ms ease;
}
body .ui-button:not(.backoffice-menu-button):not(.topbar-menu-button) { display: inline-flex; }
body .ui-button--primary { --ui-button-bg: var(--primary); --ui-button-text: var(--text-inverse); --ui-button-border: var(--primary); --ui-button-hover: var(--primary-hover); }
body .ui-button--danger { --ui-button-bg: var(--danger); --ui-button-text: var(--text-inverse); --ui-button-border: var(--danger); --ui-button-hover: var(--danger-hover, var(--danger)); }
body .ui-button--secondary { --ui-button-bg: var(--surface); --ui-button-text: var(--text-primary); --ui-button-border: var(--border); --ui-button-hover: var(--surface-hover); }
body .ui-button--ghost { --ui-button-bg: transparent; --ui-button-text: var(--text-secondary); --ui-button-border: transparent; --ui-button-hover: var(--surface-hover); }
body .ui-button--inverse { --ui-button-bg: var(--text-inverse); --ui-button-text: var(--primary-strong); --ui-button-border: var(--text-inverse); --ui-button-hover: var(--surface-soft); }
@media (hover: hover) { body .ui-button:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--ui-button-hover) !important; } }
body .ui-button:focus-visible { outline: 2px solid var(--primary) !important; outline-offset: 3px; }
body .ui-button:active:not(:disabled) { filter: brightness(.95); }
body .ui-button--sm { min-height: var(--button-height-sm); padding: 7px 12px; font-size: 13px !important; }
body .ui-button--lg { min-height: var(--button-height-lg); padding: 12px 22px; }
body .ui-button--square { width: 44px; height: 44px; flex: 0 0 44px; padding: 10px; }
body .ui-button--block { width: 100%; }
body .ui-button svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body .ui-button:disabled, body .ui-button[aria-disabled="true"], body .ui-button.is-disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
body .ui-button.is-loading { cursor: wait; }
body .ui-button.is-loading::before { content: ""; width: 14px; height: 14px; flex-shrink: 0; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ui-button-spin .8s linear infinite; }
@keyframes ui-button-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) { body .ui-button--sm { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { body .ui-button { transition: none; } body .ui-button.is-loading::before { animation: none; border-style: dotted; } }