/* Loading indicator and per-item availability status for the config page and the cart (D-038); contrast WCAG AA in light and Lagom dark mode, reduced motion respected, links/buttons never underlined. */
/* [Claude 2026-10-17, 0.9.173, D-038] Dark mode follows the host page class (html.lagom-dark-mode), not prefers-color-scheme:
   an embedded UI must match the shop theme, not the OS setting. Ratios (text on background, computed): light ok 7.2:1, low 8.2:1,
   bad 7.7:1, checking 12.6:1, retry 6.4:1, text 14.1:1; dark ok 11.1:1, low 10.2:1, bad 10.5:1, checking 10.6:1, retry 8.8:1, text 12.5:1. */
.srv-avail-panel { --srv-av-bg: #f8fafc; --srv-av-fg: #1d2939; --srv-av-border: #cbd5e1;
  --srv-av-ok-bg: #d1e7dd; --srv-av-ok-fg: #0f5132; --srv-av-low-bg: #fff3cd; --srv-av-low-fg: #5c4503;
  --srv-av-bad-bg: #f8d7da; --srv-av-bad-fg: #7a1d26; --srv-av-wait-bg: #e8eefc; --srv-av-wait-fg: #1d2939; --srv-av-link: #1d4ed8;
  margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--srv-av-border); border-radius: 6px; background: var(--srv-av-bg); color: var(--srv-av-fg); text-align: left; }
html.lagom-dark-mode .srv-avail-panel, [data-theme="dark"] .srv-avail-panel { --srv-av-bg: #1e2433; --srv-av-fg: #e5e7eb; --srv-av-border: #3b4560;
  --srv-av-ok-bg: #12301f; --srv-av-ok-fg: #a7f3c4; --srv-av-low-bg: #3a2f05; --srv-av-low-fg: #ffe08a;
  --srv-av-bad-bg: #3d1418; --srv-av-bad-fg: #ffc2c6; --srv-av-wait-bg: #26304a; --srv-av-wait-fg: #e5e7eb; --srv-av-link: #9ec5ff; }
.srv-avail-heading { margin: 0 0 8px; font-size: 1rem; font-weight: 600; color: var(--srv-av-fg); }
.srv-avail-list { margin: 0; padding: 0; list-style: none; }
.srv-avail-item { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: flex-start; padding: 6px 0; border-top: 1px solid var(--srv-av-border); }
.srv-avail-item:first-child { border-top: 0; }
.srv-avail-name { font-weight: 600; min-width: 8em; }
.srv-avail { display: inline-flex; gap: 8px; align-items: flex-start; padding: 4px 8px; border-radius: 4px; line-height: 1.4; max-width: 100%; }
.srv-avail--checking { background: var(--srv-av-wait-bg); color: var(--srv-av-wait-fg); }
.srv-avail--ok { background: var(--srv-av-ok-bg); color: var(--srv-av-ok-fg); }
.srv-avail--low { background: var(--srv-av-low-bg); color: var(--srv-av-low-fg); }
.srv-avail--bad, .srv-avail--unknown { background: var(--srv-av-bad-bg); color: var(--srv-av-bad-fg); }
.srv-avail-icon { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; }
.srv-avail--checking .srv-avail-icon { border-right-color: transparent; animation: srv-av-spin .8s linear infinite; }
.srv-avail--ok .srv-avail-icon { background: currentColor; }
.srv-avail--low .srv-avail-icon { border-style: double; border-width: 3px; }
.srv-avail--bad .srv-avail-icon, .srv-avail--unknown .srv-avail-icon { border-radius: 2px; }
.srv-avail-retry { margin-top: 8px; padding: 4px 10px; border: 1px solid var(--srv-av-link); border-radius: 4px; background: transparent; color: var(--srv-av-link); text-decoration: none; cursor: pointer; font: inherit; }
.srv-avail-retry:hover, .srv-avail-retry:focus { text-decoration: none; outline: 2px solid var(--srv-av-link); outline-offset: 1px; }
.srv-avail-wait { display: block; margin-top: 4px; font-size: .875rem; }
@keyframes srv-av-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .srv-avail--checking .srv-avail-icon { animation: none; border-right-color: currentColor; border-style: dotted; }
}
/* [0.9.174] Remove link of an undeliverable cart item: standard link colour, never underlined, own line. */
.srv-avail-remove { display: block; margin-top: 6px; font-size: .875rem; color: var(--srv-av-link); text-decoration: none; }
.srv-avail-remove:hover, .srv-avail-remove:focus { text-decoration: none; outline: 2px solid var(--srv-av-link); outline-offset: 1px; }
/* [Claude 2026-10-18, 0.9.197] Snapshot disclaimer as a tooltip (replaces the 0.9.195 box): round "i" button on the heading/status, popover
   with the full text. Colours come from the panel tokens (text 14.1:1 light / 12.5:1 dark on the panel, link colour for the mark 6.4:1 / 8.8:1). */
.srv-avail-info { position: relative; display: inline-block; margin-left: 8px; vertical-align: middle; }
.srv-avail-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 2px solid var(--srv-av-link); border-radius: 50%; box-sizing: border-box; background: transparent; color: var(--srv-av-link); font: 700 12px/1 Georgia, serif; cursor: help; text-decoration: none; }
.srv-avail-info-btn:hover, .srv-avail-info-btn:focus { background: var(--srv-av-link); color: var(--srv-av-bg); outline: 2px solid var(--srv-av-link); outline-offset: 2px; text-decoration: none; }
.srv-avail-info-tip { position: fixed; z-index: 1080; left: 12px; top: 40%; width: min(360px, calc(100vw - 24px)); padding: 10px 12px; border: 1px solid var(--srv-av-border); border-radius: 6px; background: var(--srv-av-bg); color: var(--srv-av-fg); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); font-size: .875rem; font-weight: 400; line-height: 1.5; text-align: left; white-space: normal; }
.srv-avail-info-tip[hidden] { display: none; }

/* [Claude 2026-10-18, 0.9.186] Order summary: long product names wrap instead of "Plus S..." (Lagom clamps .item-name AND .name).
   Active only with html.srv-summary-wrap (OrderSummaryStyle, add-on setting order_summary_wide_name, default on). */
html.srv-summary-wrap #orderSummary .summary-item,html.srv-summary-wrap #orderSummaryMob .summary-item,html.srv-summary-wrap #producttotal .summary-item{flex-wrap:wrap!important;row-gap:4px}
html.srv-summary-wrap #orderSummary .summary-item .item-name,html.srv-summary-wrap #orderSummaryMob .summary-item .item-name,html.srv-summary-wrap #producttotal .summary-item .item-name{flex:1 1 9em!important;min-width:0!important;max-width:100%!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
html.srv-summary-wrap #orderSummary .summary-item .item-name .name,html.srv-summary-wrap #orderSummaryMob .summary-item .item-name .name,html.srv-summary-wrap #producttotal .summary-item .item-name .name{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;-webkit-line-clamp:unset!important;overflow-wrap:break-word;max-width:100%!important}
html.srv-summary-wrap #orderSummary .summary-item .item-value,html.srv-summary-wrap #orderSummaryMob .summary-item .item-value,html.srv-summary-wrap #producttotal .summary-item .item-value{margin-left:auto}

/* [Claude 2026-10-18, 0.9.198, D-100] Live panel: per-location list (collapsible, keeps the sticky order summary short), "Stand vor N s" and
   the notice when the chosen location sells out meanwhile. Colours only from the panel tokens above (light and html.lagom-dark-mode),
   ratios measured in tests/live-location-panel.php; links and buttons never underlined; rows wrap on narrow screens. */
.srv-avail-live { margin-top: 8px; border-top: 1px solid var(--srv-av-border); padding-top: 6px; }
.srv-avail-live[hidden] { display: none; }
.srv-avail-live-summary { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; cursor: pointer; padding: 2px 0; color: var(--srv-av-fg); list-style-position: inside; }
.srv-avail-live-summary:focus { outline: 2px solid var(--srv-av-link); outline-offset: 2px; }
.srv-avail-live-title { font-weight: 600; }
.srv-avail-live-count { font-size: .875rem; }
.srv-avail-locs { margin: 6px 0 0; padding: 0; list-style: none; }
.srv-avail-loc { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; padding: 4px 0; border-top: 1px solid var(--srv-av-border); font-size: .875rem; line-height: 1.4; }
.srv-avail-loc:first-child { border-top: 0; }
.srv-avail-loc-name { color: var(--srv-av-fg); min-width: 0; overflow-wrap: anywhere; }
.srv-avail-loc-state { font-weight: 600; }
.srv-avail-loc--ok .srv-avail-loc-state { color: var(--srv-av-ok-fg); }
.srv-avail-loc--low .srv-avail-loc-state { color: var(--srv-av-low-fg); }
.srv-avail-loc--bad .srv-avail-loc-state, .srv-avail-loc--unknown .srv-avail-loc-state { color: var(--srv-av-bad-fg); }
.srv-avail-loc.is-selected .srv-avail-loc-name { font-weight: 600; }
.srv-avail-age { margin: 6px 0 0; font-size: .8125rem; color: var(--srv-av-fg); }
.srv-avail-age[hidden] { display: none; }
.srv-avail-lost { margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--srv-av-bad-fg); border-radius: 4px; background: var(--srv-av-bad-bg); color: var(--srv-av-bad-fg); }
.srv-avail-lost[hidden] { display: none; }
.srv-avail-lost p { margin: 0; }
.srv-avail-lost-choose { margin-top: 6px !important; font-weight: 600; }
.srv-avail-alts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.srv-avail-alt { padding: 4px 10px; border: 1px solid var(--srv-av-link); border-radius: 4px; background: var(--srv-av-bg); color: var(--srv-av-link); font: inherit; font-size: .875rem; cursor: pointer; text-decoration: none; }
.srv-avail-alt:hover, .srv-avail-alt:focus { text-decoration: none; outline: 2px solid var(--srv-av-link); outline-offset: 1px; }
.srv-avail-change { display: inline-block; margin-top: 6px; padding: 2px 6px; border-radius: 4px; background: var(--srv-av-bg); color: var(--srv-av-link); text-decoration: none; }
.srv-avail-change:hover, .srv-avail-change:focus { text-decoration: none; outline: 2px solid var(--srv-av-link); outline-offset: 1px; }