/* BrightKey loading indicator: Loading UI-inspired morphing dash ring. */
:root {
  --bk-spinner-color: var(--cyan, #06b6d4);
  --bk-spinner-size: 39.6px;
  --bk-spinner-stroke: 3px;
  --bk-loading-gap: 1rem;
  --bk-loading-text-color: #52525b;
  --bk-loading-text-size: 1.1rem;
  --bk-loading-text-weight: 500;
}

@property --bk-dash-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 55deg;
}

:is(.spinner, .spinner-cyan, .bk-spinner, .btn-spinner, .loading-spinner, .month-loading-spinner, .panel-loading-spinner, .payout-loading-spinner, .dashboard-search-spinner, .installer-notes-spinner, .installer-refresh-spinner, .catalog-load-more__spinner, .loader, .public-affiliate-loading > span) {
  position: relative !important;
  display: inline-block;
  flex: 0 0 auto;
  border: 0 !important;
  border-radius: 50%;
  background: transparent !important;
  color: var(--bk-spinner-color) !important;
  animation: none !important;
  overflow: visible;
}

:is(.spinner, .spinner-cyan, .bk-spinner, .btn-spinner, .loading-spinner, .month-loading-spinner, .panel-loading-spinner, .payout-loading-spinner, .dashboard-search-spinner, .installer-notes-spinner, .installer-refresh-spinner, .catalog-load-more__spinner, .loader, .public-affiliate-loading > span)::before,
:is(.spinner, .spinner-cyan, .bk-spinner, .btn-spinner, .loading-spinner, .month-loading-spinner, .panel-loading-spinner, .payout-loading-spinner, .dashboard-search-spinner, .installer-notes-spinner, .installer-refresh-spinner, .catalog-load-more__spinner, .loader, .public-affiliate-loading > span)::after {
  content: '';
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border-radius: 50%;
}

:is(.spinner, .spinner-cyan, .bk-spinner, .btn-spinner, .loading-spinner, .month-loading-spinner, .panel-loading-spinner, .payout-loading-spinner, .dashboard-search-spinner, .installer-notes-spinner, .installer-refresh-spinner, .catalog-load-more__spinner, .loader, .public-affiliate-loading > span)::before {
  border: var(--bk-spinner-stroke) solid currentColor;
  opacity: 0.2;
}

:is(.spinner, .spinner-cyan, .bk-spinner, .btn-spinner, .loading-spinner, .month-loading-spinner, .panel-loading-spinner, .payout-loading-spinner, .dashboard-search-spinner, .installer-notes-spinner, .installer-refresh-spinner, .catalog-load-more__spinner, .loader, .public-affiliate-loading > span)::after {
  background: conic-gradient(currentColor 0deg, currentColor var(--bk-dash-angle), transparent var(--bk-dash-angle));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--bk-spinner-stroke)), #000 calc(100% - var(--bk-spinner-stroke) + 0.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--bk-spinner-stroke)), #000 calc(100% - var(--bk-spinner-stroke) + 0.5px));
  animation: bk-dash-ring-rotate 0.9s linear infinite, bk-dash-ring-morph 1.6s ease-in-out infinite alternate;
}

/* Shared page-level loading state: ring first, caption directly below. */
.bk-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bk-loading-gap);
  max-width: 100%;
  box-sizing: border-box;
  padding-inline: 1rem;
  color: var(--bk-loading-text-color);
}

.bk-loading-state > .bk-spinner {
  width: var(--bk-spinner-size);
  height: var(--bk-spinner-size);
}

.bk-loading-text {
  color: inherit;
  font-family: system-ui, sans-serif;
  font-size: var(--bk-loading-text-size);
  font-weight: var(--bk-loading-text-weight);
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Existing page, table, panel, and modal loaders consume the same composition. */
:is(
  .loading-wrapper,
  .portal-loading,
  .installer-notes-loading,
  .flow-loading,
  .onboarding-loading,
  .all-bookings-loading,
  .month-loading-overlay,
  .payout-loading-content,
  .panel-loading-overlay,
  .loading-state,
  .size-saved-state,
  .saved-canvases-state,
  .resources-picker-state,
  .browse-images-state,
  .template-loading,
  .quotation-loading,
  .hr-contracts-loading-state
):has(> :is(.spinner, .spinner-cyan, .bk-spinner, .loading-spinner, .month-loading-spinner, .panel-loading-spinner, .payout-loading-spinner, .installer-notes-spinner)) {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--bk-loading-gap) !important;
  max-width: 100%;
  box-sizing: border-box;
  color: var(--bk-loading-text-color) !important;
  font-family: system-ui, sans-serif !important;
  font-size: var(--bk-loading-text-size) !important;
  font-weight: var(--bk-loading-text-weight) !important;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
}

:is(
  .loading-wrapper,
  .portal-loading,
  .installer-notes-loading,
  .flow-loading,
  .onboarding-loading,
  .all-bookings-loading,
  .month-loading-overlay,
  .payout-loading-content,
  .panel-loading-overlay,
  .loading-state,
  .size-saved-state,
  .saved-canvases-state,
  .resources-picker-state,
  .browse-images-state,
  .template-loading,
  .quotation-loading,
  .hr-contracts-loading-state
) > :is(.spinner, .spinner-cyan, .bk-spinner, .loading-spinner, .month-loading-spinner, .panel-loading-spinner, .payout-loading-spinner, .installer-notes-spinner) {
  width: var(--bk-spinner-size) !important;
  height: var(--bk-spinner-size) !important;
  margin: 0 !important;
}

:is(
  .loading-wrapper,
  .portal-loading,
  .installer-notes-loading,
  .flow-loading,
  .onboarding-loading,
  .all-bookings-loading,
  .month-loading-overlay,
  .payout-loading-content,
  .panel-loading-overlay,
  .loading-state,
  .size-saved-state,
  .saved-canvases-state,
  .resources-picker-state,
  .browse-images-state,
  .template-loading,
  .quotation-loading,
  .hr-contracts-loading-state
) > :is(span, p, small):not(.spinner):not(.spinner-cyan):not(.bk-spinner):not(.loading-spinner):not(.month-loading-spinner):not(.panel-loading-spinner):not(.payout-loading-spinner):not(.installer-notes-spinner) {
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  text-align: inherit !important;
}

@media (max-width: 1024px) {
  :root {
    --bk-spinner-size: 38px;
    --bk-loading-gap: 0.875rem;
    --bk-loading-text-size: 1.05rem;
  }
}

@media (max-width: 640px) {
  :root {
    --bk-spinner-size: 36px;
    --bk-loading-gap: 0.75rem;
    --bk-loading-text-size: 1rem;
  }
}

@keyframes bk-dash-ring-rotate { to { transform: rotate(360deg); } }
@keyframes bk-dash-ring-morph {
  0% { --bk-dash-angle: 45deg; }
  50% { --bk-dash-angle: 250deg; }
  100% { --bk-dash-angle: 85deg; }
}

/* Legacy loading buttons have no dedicated spinner element. */
.btn-loading:not(:has(.bk-spinner)) { position: relative; }
button.btn-loading:not(:has(.bk-spinner)) { padding-right: 2.5rem; }

.btn-loading:not(:has(.bk-spinner))::before,
.btn-loading:not(:has(.bk-spinner))::after {
  content: '' !important;
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 14px !important;
  height: 14px !important;
  box-sizing: border-box;
  margin-top: -7px;
  border-radius: 50%;
}

.btn-loading:not(:has(.bk-spinner))::before {
  border: var(--bk-spinner-stroke) solid var(--bk-spinner-color) !important;
  opacity: 0.2;
}

.btn-loading:not(:has(.bk-spinner))::after {
  border: 0 !important;
  background: conic-gradient(var(--bk-spinner-color) 0deg, var(--bk-spinner-color) var(--bk-dash-angle), transparent var(--bk-dash-angle));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--bk-spinner-stroke)), #000 calc(100% - var(--bk-spinner-stroke) + 0.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--bk-spinner-stroke)), #000 calc(100% - var(--bk-spinner-stroke) + 0.5px));
  animation: bk-dash-ring-rotate 0.9s linear infinite, bk-dash-ring-morph 1.6s ease-in-out infinite alternate !important;
}

.btn-loading:not(button):not(:has(.bk-spinner))::before,
.btn-loading:not(button):not(:has(.bk-spinner))::after {
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  :is(.spinner, .spinner-cyan, .bk-spinner, .btn-spinner, .loading-spinner, .month-loading-spinner, .panel-loading-spinner, .payout-loading-spinner, .dashboard-search-spinner, .installer-notes-spinner, .installer-refresh-spinner, .catalog-load-more__spinner, .loader, .public-affiliate-loading > span)::after,
  .btn-loading:not(:has(.bk-spinner))::after {
    --bk-dash-angle: 105deg;
    animation: none !important;
  }
}