/* Indicatori di attesa condivisi, coerenti con i colori del sito. */
.page-data-status {
    color: var(--text-muted, #ccc);
    font: 14px/1.5 var(--font-main, sans-serif);
    padding: 10px 16px;
    margin-bottom: 12px;
    border: 1px solid #ffffff20;
    border-radius: 10px;
}
.page-data-status[hidden] { display: none; }
.page-data-status[role="alert"] { border-color: #f8961e; }
.page-data-status button {
    margin-left: 12px;
    padding: 6px 12px;
    border: 1px solid currentColor;
    border-radius: 6px;
    background: transparent;
    color: var(--primary-color, #ff6600);
    cursor: pointer;
}
#loading-screen {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 28px;
    min-height: 100dvh;
    background: radial-gradient(ellipse at 50% 38%, rgba(var(--primary-color-rgb, 255, 102, 0), .10), transparent 55%), #181818;
    color: #f5f5f5;
    font-family: var(--font-main, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
    text-align: center;
    isolation: isolate;
}
#loading-screen, #loading-screen * { box-sizing: border-box; }
#loading-screen.visible { display: flex; visibility: visible; }
#loading-screen.hidden { display: none; visibility: hidden; pointer-events: none; }
#loading-screen [hidden] { display: none !important; }
#loading-screen .loading-brand {
    margin: 0 0 8px;
    color: var(--primary-color, #ff6600);
    font: 650 32px/1.2 var(--font-main, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
    letter-spacing: -.8px;
}
#loading-screen .loading-brand span { color: #f5f5f5; }
#loading-screen .progress-bar-container {
    width: min(272px, 100%);
    height: 4px;
    margin: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
}
#loading-screen .progress-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--primary-color, #ff6600);
    transition: width .18s ease;
}
#loading-screen.visible:not(.loading-error):not(.loading-indeterminate) .progress-bar {
    min-width: 4px;
    background-image: linear-gradient(90deg, transparent, #ffffff80, transparent);
    background-size: 100px 100%;
    animation: fitsuite-loader-activity 1.2s linear infinite;
}
#loading-screen.loading-indeterminate .progress-bar {
    width: 36%;
    animation: fitsuite-loader-progress 1.4s ease-in-out infinite;
}
#loading-screen .loading-status {
    min-height: 44px;
    max-width: 440px;
    margin: 0;
    color: #c9c9c9;
    font: 400 14px/1.6 var(--font-main, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
    letter-spacing: .1px;
    text-wrap: pretty;
}
#loading-screen .loading-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
#loading-screen .loading-actions button {
    padding: 12px 18px;
    border: 1px solid #777;
    border-radius: 10px;
    background: #282828;
    color: #fff;
    font: 600 14px/1.4 var(--font-main, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
    cursor: pointer;
}
#loading-screen .loading-actions button:focus-visible { outline: 2px solid var(--primary-color, #ff6600); outline-offset: 4px; }
#loading-screen.loading-error .progress-bar-container { visibility: hidden; }
@keyframes fitsuite-loader-activity { from { background-position: -100px 0; } to { background-position: 100px 0; } }
@keyframes fitsuite-loader-progress { from { transform: translateX(-100%); } to { transform: translateX(280%); } }
@media (prefers-reduced-motion: reduce) {
    #loading-screen.loading-indeterminate .progress-bar { animation-duration: 4s; animation-timing-function: linear; }
    #loading-screen .progress-bar { transition: none; }
    #loading-screen.visible:not(.loading-error):not(.loading-indeterminate) .progress-bar { animation: none; }
}

/* Opzione Linea scorrevole: tutti i pulsanti in attesa usano lo stesso
   indicatore, anche quando il codice precedente inserisce un'icona spinner. */
html body button:is([aria-busy="true"], .btn-loading, .loading, :has(.fa-spinner)) {
    position: relative;
    overflow: hidden;
    cursor: progress;
}
html body button:is([aria-busy="true"], .btn-loading, .loading, :has(.fa-spinner))::after {
    content: "" !important;
    display: block;
    position: absolute;
    inset: auto auto 0 0;
    box-sizing: border-box;
    width: 38%;
    height: 3px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: currentColor;
    opacity: .8;
    transform: translateX(-110%);
    animation: fitsuite-loader-progress 1.5s ease-in-out infinite;
    pointer-events: none;
}
html body button:is([aria-busy="true"], .btn-loading, .loading, :has(.fa-spinner))::before {
    content: none !important;
}
/* Nessuna seconda animazione o icona circolare nei pulsanti. */
html body button .fa-spinner, html body button .btn-progress { display: none !important; }
/* Feedback testuale e toast mantengono una piccola linea accanto al messaggio. */
html body .loading-feedback[aria-busy="true"]:not(button)::before,
html body .fa-spinner:not(button *) {
    content: "";
    display: inline-block;
    box-sizing: border-box;
    width: 32px;
    min-width: 32px;
    height: 3px;
    margin-inline-end: .6em;
    vertical-align: .2em;
    border: 0;
    border-radius: 999px;
    color: var(--primary-color, #ff6600);
    background: linear-gradient(90deg, transparent 0 30%, currentColor 45% 60%, transparent 75%);
    background-size: 250% 100%;
    animation: fitsuite-loader-line 1.5s ease-in-out infinite;
    pointer-events: none;
}
html body .fa-spinner::before { content: none; }
button[aria-busy="true"] { opacity: 1; }
.loading-feedback[hidden] { display: none !important; }
/* I comandi circolari conservano la loro icona: la linea occupa il bordo inferiore. */
html body button.fs-icon-button:is([aria-busy="true"], .btn-loading, :has(.fa-spinner)) { opacity: 1; cursor: progress; }
@keyframes fitsuite-loader-line { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
    html body button:is([aria-busy="true"], .btn-loading, .loading, :has(.fa-spinner))::after,
    html body .loading-feedback[aria-busy="true"]:not(button)::before,
    html body .fa-spinner:not(button *) { animation-duration: 4s; }
}

/* Avviso giallo disponibile anche nelle pagine che non caricano toast.js.
   Sopra il loader e separato dalle notifiche di conferma, senza bloccare la pagina. */
#loading-delay-notice {
    position: fixed;
    right: max(20px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 12030;
    box-sizing: border-box;
    width: min(420px, calc(100% - 40px));
    padding: 16px 44px 16px 20px;
    border: 1px solid #ffc107;
    border-radius: 12px;
    background: linear-gradient(135deg, #5a5a2d, #3a3a1a);
    box-shadow: 0 8px 32px #0006;
    color: #f5f5f5;
    font: 400 14px/1.5 var(--font-main, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
    text-align: left;
}
#loading-delay-notice strong { display: block; margin-bottom: 6px; color: #ffc107; font-weight: 600; }
#loading-delay-notice p { margin: 0; }
#loading-delay-notice button {
    position: absolute; top: 4px; right: 2px; width: 40px; height: 40px;
    padding: 0; border: 0; border-radius: 8px; background: transparent;
    color: #ffc107; font: 24px/1 sans-serif; cursor: pointer;
}
#loading-delay-notice button:focus-visible { outline: 2px solid #ffc107; outline-offset: -4px; }