/* =====================================================================
   Jednotný loading stav tlačidiel (riadi ho static/js/btn-loading.js)

   Pravidlá:
   - rozmer tlačidla zamyká JS (inline width/height) -> NIKDY nepreskočí
   - text sa skrýva cez visibility (nie display), takže rozloženie ostane
   - výplň = vlastná akcentová farba tlačidla (--btn-accent), spinner má
     kontrastnú farbu (--btn-on) - rovnaký výsledok pre brand, danger, info…
   - vysoká špecifickosť (.is-loading x4) zámerne: generické
     .btn:not(...):hover v cc.css používa !important a inak by na hover
     prebilo farbu spinnera (čierna na čiernom)
   ===================================================================== */

@keyframes btn-spin  { to { transform: rotate(1turn); } }
@keyframes btn-pop   { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }
@keyframes btn-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes btn-draw  { to { stroke-dashoffset: 0; } }

.is-loading {
  box-sizing: border-box !important;
  cursor: progress !important;
  -webkit-user-select: none;
  user-select: none;
}

html body .is-loading.is-loading.is-loading.is-loading {
  background-color: var(--btn-accent, var(--brand)) !important;
  background-image: none !important;
  border-color: var(--btn-accent, var(--brand)) !important;
  color: transparent !important;
  text-shadow: none !important;
  opacity: 1 !important;
  transition: background-color .2s ease, border-color .2s ease !important;
}

/* obsah (ikony, spany) ostáva v layoute, len sa nezobrazí */
.is-loading > :not(.btn-spinner) { visibility: hidden !important; }

/* ---- spinner ------------------------------------------------------ */
.btn-spinner {
  --s: 20px;
  --w: 2.5px;
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--s);
  height: var(--s);
  line-height: 0;
  pointer-events: none;
  color: var(--btn-on, #030303);
  animation: btn-pop .16s ease-out both;
}
html body .is-loading.is-loading.is-loading.is-loading .btn-spinner {
  color: var(--btn-on, #030303) !important;
}

/* kruh so zužujúcim sa chvostom (conic-gradient + maska) */
.btn-spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 6%, currentColor 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--w) - .5px), #000 calc(100% - var(--w)));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--w) - .5px), #000 calc(100% - var(--w)));
  animation: btn-spin .72s linear infinite;
}

/* overlay pre <input type="submit"> (void element nemôže mať deti) */
.btn-spinner-overlay {
  position: absolute;
  z-index: 2;
  display: block;
  pointer-events: none;
  color: var(--btn-on, #030303);
}

/* ---- stav hotovo / chyba ------------------------------------------ */
.btn-spinner svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}
html body .is-loading.is-loading.is-loading.is-loading .btn-spinner svg,
html body .is-loading.is-loading.is-loading.is-loading .btn-spinner svg path,
.btn-spinner-overlay .btn-spinner svg,
.btn-spinner-overlay .btn-spinner svg path {
  fill: none !important;
  stroke: var(--btn-on, #fff) !important;
  stroke-width: 2.6 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.btn-spinner svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }

.btn-spinner[data-state="success"]::before,
.btn-spinner[data-state="error"]::before { display: none; }

.btn-spinner[data-state="success"] svg,
.btn-spinner[data-state="error"] svg { display: block; }

.btn-spinner .ico-ok,
.btn-spinner .ico-x { display: none; }
.btn-spinner[data-state="success"] .ico-ok,
.btn-spinner[data-state="error"]   .ico-x  { display: inline; }

.btn-spinner[data-state="success"] .ico-ok path,
.btn-spinner[data-state="error"]   .ico-x  path { animation: btn-draw .3s .05s ease-out forwards; }

/* ---- prístupnosť -------------------------------------------------- */
.btn-loading-live {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation: none; }
  .btn-spinner::before {
    background: currentColor;
    animation: btn-pulse 1.4s ease-in-out infinite;
  }
  .btn-spinner svg path { animation-duration: .01s !important; }
}