/* One progress indicator for native, Alpine and React actions.
   U172 (Felix 2026-10-20): one spinner everywhere, the same one Messages had. A button or link that is
   working (aria-busy="true") keeps its size and colours, and its icon turns into the spinning loader
   icon in the same place. A button with no icon shows the loader in front of its words. This covers form
   buttons, pop-up buttons (View quote, View booking, Review...), list buttons and the payment steps.
   U177 (Felix 2026-10-20): buttons and tiles that open another page show it too (portal-action-feedback.js). */
:is(button, a)[aria-busy="true"] { cursor: progress !important; }
:is(button, a)[aria-busy="true"]:is(:disabled, .disabled, .is-disabled, [aria-disabled="true"]) { opacity: 1 !important; }
:is(button, a)[aria-busy="true"] > em.icon::before { content: "\ead2" !important; }
:is(button, a)[aria-busy="true"] > em.icon { display: inline-block; animation: portal-action-spin 1s linear infinite; }
:is(button, a)[aria-busy="true"]:not(:has(> em.icon)):not(.cx-dash-card)::before {
    content: "\ead2"; display: inline-block; flex: 0 0 auto; font-family: "Nioicon"; font-style: normal; font-weight: normal;
    line-height: 1; vertical-align: middle; animation: portal-action-spin 1s linear infinite;
}
:is(button, a)[aria-busy="true"]:not(:has(> em.icon)):not(:has(> span)):not(.cx-dash-card)::before { margin-right: 8px; }
/* U177: a dashboard tile that opens its page spins the icon in its tile, in the same place. */
a.cx-dash-card[aria-busy="true"] .cx-admin-dashboard-stat-icon::before { content: "\ead2" !important; }
a.cx-dash-card[aria-busy="true"] .cx-admin-dashboard-stat-icon { display: inline-block; animation: portal-action-spin 1s linear infinite; }
/* Only one spinner: older built-in spinners and pictures inside a working button step aside. */
:is(button, a)[aria-busy="true"]:not(:has(> em.icon)) > svg,
:is(button, a)[aria-busy="true"] .spinner-border,
:is(button, a)[aria-busy="true"] > .ni-loader:not(em.icon),
:is(button, a)[aria-busy="true"] > :not(em.icon) .ni-loader { display: none !important; }
@keyframes portal-action-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    :is(button, a)[aria-busy="true"] > em.icon,
    :is(button, a)[aria-busy="true"]:not(:has(> em.icon))::before,
    a.cx-dash-card[aria-busy="true"] .cx-admin-dashboard-stat-icon { animation: none; }
}

[data-action-error] { flex-basis:100%; color:#f0a5a0; font-size:14px; line-height:1.5; }