/* Location search loading state, driven by search-loading.js: busy button or place link, header bar, then a panel over the page. */

/* === Busy button or link: label kept but hidden so the width holds === */
:is(a, button).wd-search-busy[aria-busy='true'] { display: inline-grid; place-items: center; cursor: progress; text-decoration: none; }
.wd-search-busy > span { grid-area: 1 / 1; }
.wd-search-busy__label { visibility: hidden; }
.wd-search-busy__status { display: inline-flex; align-items: center; gap: var(--wd-space-sm); white-space: nowrap; }
.wd-search-busy__spinner, .wd-search-busy-row::after { width: var(--wd-space-lg); height: var(--wd-space-lg); flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: wd-search-spin .7s linear infinite; }
.wd-search-form--loading input[name='weather_location'] { opacity: .6; }

/* === Busy list row (drawer places): the trailing arrow turns into the spinner, the row keeps its layout === */
.wd-search-busy-row { cursor: progress; }
.wd-search-busy-row > :last-child { display: none; }
.wd-search-busy-row::after { content: ''; box-sizing: border-box; }

/* === Header bar: creeps to 85% like a browser's, the next page replaces it === */
.wd-sitebar--loading::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: calc(var(--wd-space-xs) * .75); background: var(--wd-cta); transform-origin: left; animation: wd-search-creep 8s cubic-bezier(.1, .7, .2, 1) forwards; }

/* === Panel over the old page, under the sticky header === */
.wd-search-loading { position: fixed; inset: 0; z-index: 999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--wd-space-xs); padding: var(--wd-space-xl); background: color-mix(in srgb, var(--wd-bg-page) 88%, transparent); font-family: var(--wd-font); text-align: center; animation: wd-search-fade .2s ease-out; }
.wd-search-loading img { margin-bottom: var(--wd-space-sm); animation: wd-search-bob .9s ease-in-out infinite alternate; }
.wd-search-loading__title { margin: 0; color: var(--wd-text-primary); font-size: var(--wd-font-size-lg); font-weight: 800; line-height: 1.3; }
.wd-search-loading__hint { margin: 0; color: var(--wd-text-secondary); font-size: var(--wd-font-size-sm); }
.wd-night-tab .wd-search-loading { background: color-mix(in srgb, var(--wd-chrome) 90%, transparent); }
.wd-night-tab .wd-search-loading__title { color: var(--wd-text-on-green); }
.wd-night-tab .wd-search-loading__hint { color: var(--wd-text-on-dark-muted); }

@keyframes wd-search-spin { to { transform: rotate(360deg); } }
@keyframes wd-search-creep { from { transform: scaleX(0); } to { transform: scaleX(.85); } }
@keyframes wd-search-fade { from { opacity: 0; } }
@keyframes wd-search-bob { to { transform: translateY(calc(var(--wd-space-xs) * -1.5)); } }

@media (prefers-reduced-motion: reduce) {
  .wd-search-loading, .wd-search-loading img { animation: none; }
}