.viewer-skeleton { color: var(--bs-secondary-color); }
.viewer-skeleton .placeholder { cursor: default; }
.viewer-skeleton-avatar { width: 3.5rem; height: 3.5rem; flex: none; }
.viewer-skeleton-chip { width: 7rem; height: 2rem; flex: none; }
@media (prefers-reduced-motion: reduce) {
    .viewer-skeleton .placeholder { animation: none; }
}

/* Blazor-native replacements for Owl geometry and icon loading; design palette stays in root.css. */
.viewer-carousel { display:flex; gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:.25rem .25rem 1rem; }
.viewer-carousel > * { flex:0 0 min(80vw,20rem); scroll-snap-align:start; }
.viewer-category-strip > * { flex-basis:6rem; text-align:center; }
.viewer-category-icon { position:relative; display:inline-block; width:3.125rem; height:3.125rem; }
.viewer-category-icon > img, .viewer-category-icon > lord-icon { width:100%; height:100%; object-fit:contain; }
.viewer-category-icon > lord-icon { position:absolute; inset:0; opacity:0; }
.viewer-category-icon[data-icon-ready] > lord-icon { opacity:1; }
.viewer-category-icon[data-icon-ready] > img { visibility:hidden; }
.viewer-category-strip .cat-item > a > img, .viewer-category-strip .cat-item > button > img { width:3.125rem; height:3.125rem; }
.viewer-offer-image { aspect-ratio:16 / 10; object-fit:cover; }
.viewer-business-logo { width:3.5rem; height:3.5rem; object-fit:cover; }
.viewer-hero-carousel > * { flex-basis:100%; }
.viewer-hero-image { aspect-ratio:16 / 7; max-height:32.5rem; object-fit:cover; }

.viewer-full-map { height: calc(100dvh - 13rem); min-height: 24rem; }
.viewer-map-offers { pointer-events: none; }
.viewer-map-offers a { pointer-events: auto; white-space: nowrap; }
.viewer-map-offers .viewer-carousel > * { flex-basis: auto; }
.viewer-day-strip > * { flex-basis: auto; }

.viewer-profile-avatar { width: 4.5rem; height: 4.5rem; flex: none; }
.viewer-profile-details { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* The upstream dark variables omit heading color; inherit its emphasis color. */
[data-bs-theme="dark"] { --bs-heading-color: var(--bs-emphasis-color); }

/* Compatibility names used by retained app-specific layouts. */
:root {
  --color-heading: var(--bs-heading-color);
  --color-surface-muted: var(--bs-tertiary-bg);
  --color-text: var(--bs-body-color);
  --cl-accent: #ff9933;
  --cl-bg-card: var(--bs-body-bg);
  --cl-border: var(--bs-border-color);
  --cl-inactive: #6c757d;
  --cl-muted: var(--bs-secondary-color);
  --cl-pending: #fd7e14;
  --cl-primary: #222266;
  --cl-primary-dark: #111133;
  --cl-radius-card: 14px;
  --cl-radius-input: 8px;
  --cl-shadow-card: 0 2px 8px rgba(34, 34, 102, 0.08);
  --color-accent: var(--bs-warning);
  --color-accent-soft: rgba(255,153,51,0.12);
  --color-bg: var(--bs-body-bg);
  --color-border: var(--bs-border-color);
  --color-danger: var(--bs-danger);
  --color-primary: var(--bs-primary);
  --color-primary-soft: rgba(34,34,102,0.08);
  --color-success: var(--bs-success);
  --color-surface: var(--bs-body-bg);
  --color-text-heading: var(--bs-heading-color);
  --color-text-link: var(--bs-link-color);
  --color-text-muted: var(--bs-secondary-color);
  --color-text-primary: var(--bs-body-color);
  --color-text-secondary: var(--bs-secondary-color);
  --color-warning: var(--bs-warning);
  --color-warning-soft: rgba(255,153,51,0.15);
  --color-warning-text: #c06a00;
  --font-family: var(--bs-font-sans-serif);
  --font-size-sm: 0.8125rem;
  --font-weight-semibold: 600;
  --fw-bold: 700;
  --fw-medium: 500;
  --fw-regular: 400;
  --fw-semibold: 600;
  --radius: 8px;
  --radius-full: 50rem;
  --radius-lg: 14px;
  --radius-md: 10px;
  --shadow-lg: 0 1rem 3rem rgba(0,0,0,0.175);
  --shadow-md: 0 0.5rem 1rem rgba(0,0,0,0.15);
  --shadow-xs: 0 1px 4px rgba(34,34,102,0.04);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --text-21: 1.3125rem;
  --transition-base: 200ms ease;
  --transition-fast: 120ms ease;
}

/* Adapt vendor literals to the active Bootstrap theme. */
a { color: var(--bs-link-color); }
.header .top-links a, .nav-foot .nav-link, a.back-link, a.back-link:hover { color: var(--bs-body-color); }
.nav-foot { background-color: var(--bs-body-bg); }
.header lord-icon, .nav-foot lord-icon, .viewer-category-icon lord-icon {
  --lord-icon-primary: var(--bs-emphasis-color);
  --lord-icon-secondary: var(--bs-warning);
}
[data-bs-theme="dark"] img[src$="logo-connect-local.svg"] { filter: brightness(0) invert(1); }
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-border-color: var(--bs-link-color);
  --bs-btn-hover-color: var(--bs-body-bg);
  --bs-btn-hover-bg: var(--bs-link-color);
  --bs-btn-hover-border-color: var(--bs-link-color);
  --bs-btn-active-color: var(--bs-body-bg);
  --bs-btn-active-bg: var(--bs-link-color);
  --bs-btn-active-border-color: var(--bs-link-color);
}

.viewer-page-progress { position:fixed; inset:0 0 auto; height:3px; z-index:11000; overflow:hidden; background:transparent; }
.business-viewer-map-pin { position:absolute; display:inline-flex; align-items:center; gap:.375rem; width:max-content; height:auto; padding:.25rem .5rem; border-radius:2rem; background:var(--bs-body-bg); pointer-events:auto; z-index:3; }
.business-viewer-map-pin .pin-thumb { display:inline-flex; width:28px; height:28px; border-radius:50%; }
#components-reconnect-modal { display:none; position:fixed; inset:0; z-index:12000; align-items:center; justify-content:center; background:rgba(0,0,0,.45); padding:1rem; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display:flex; }
.viewer-reconnect-card { border-radius:1rem; padding:2rem; text-align:center; background:var(--bs-body-bg); color:var(--bs-body-color); box-shadow:0 .5rem 2rem rgba(0,0,0,.2); }
.viewer-reconnect-reload { display:none; }
.components-reconnect-failed .viewer-reconnect-wait,
.components-reconnect-rejected .viewer-reconnect-wait { display:none; }
.components-reconnect-failed .viewer-reconnect-reload,
.components-reconnect-rejected .viewer-reconnect-reload { display:block; }
.viewer-page-progress span { display:block; width:40%; height:100%; background:var(--bs-primary); animation:viewer-page-progress 1.2s ease-in-out infinite; }
@keyframes viewer-page-progress { from { transform:translateX(-100%); } to { transform:translateX(350%); } }
@media (prefers-reduced-motion: reduce) { .viewer-page-progress span { animation:none; width:100%; } }