/* frontline-widgets - themed entirely through the host site's own CSS custom properties.
   The fallback chain means zero extra CSS is needed: var(--primary, var(--accent, <fallback>))
   picks up whatever the build already declared, and the widget looks native in any theme.

   Tokens a build MAY set (all optional - sensible fallbacks below):
     --primary / --accent      brand color (button + bar backgrounds, star fill via --accent)
     --on-primary              text/icon color ON --primary (default #fff - set this if --primary is light)
     --text                    body text color            (default #1a1a1a)
     --surface                 card background            (default #fff)
     --radius                  card + button corner radius(default 12px)
     --line / --border         hairline color             (default: a currentColor-derived hairline)
     --shadow                  card elevation             (default: a soft two-layer shadow)
     --success / --danger      open / closed status color (default green / red)
     --fw-open / --fw-closed   per-widget override for the two above, if a build wants a bespoke pair

   color-mix() is used for tints; every such rule ships a solid fallback first, so older
   engines that ignore color-mix still render a usable (if flatter) widget. */

/* ---------- shared card + button language ---------- */
:where(fw-map, fw-facebook-page, fw-instagram-embed) .fw-card,
.fw-map, .fw-embed {
  border-radius: var(--radius, 12px);
  background: var(--surface, #fff);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-color: var(--line, var(--border, color-mix(in srgb, currentColor 12%, transparent)));
  box-shadow: var(--shadow, 0 1px 2px rgba(16, 20, 24, 0.05), 0 8px 24px -10px rgba(16, 20, 24, 0.18));
  overflow: hidden;
}

.fw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.72em 1.15em;
  border-radius: var(--radius, 12px);
  background: var(--primary, var(--accent, #0a5cff));
  color: var(--on-primary, #fff);
  font: inherit;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: filter 0.16s ease, transform 0.16s ease;
}
.fw-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.fw-btn:active { transform: translateY(0); filter: brightness(0.97); }
.fw-btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- fw-hours: inline open/closed status chip ---------- */
fw-hours {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font: inherit;
  line-height: 1;
  color: var(--text, #1a1a1a);
  padding: 0.36em 0.72em 0.36em 0.62em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  background: color-mix(in srgb, var(--fw-status, #888) 12%, transparent);
  border: 1px solid transparent;
  border-color: color-mix(in srgb, var(--fw-status, #888) 24%, transparent);
}
.fw-hours.is-open { --fw-status: var(--fw-open, var(--success, #1f9d57)); }
.fw-hours.is-closed { --fw-status: var(--fw-closed, var(--danger, #c0392b)); }
.fw-hours-dot {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--fw-status, #999);
  flex: none;
}
.fw-hours.is-open .fw-hours-dot { animation: fw-hours-pulse 2.6s ease-out infinite; }
@keyframes fw-hours-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fw-status) 60%, transparent); }
  70%  { box-shadow: 0 0 0 0.55em color-mix(in srgb, var(--fw-status) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fw-status) 0%, transparent); }
}
.fw-hours-text { font-weight: 600; letter-spacing: 0.005em; }

/* ---------- fw-map ---------- */
fw-map { display: block; }
.fw-map-frame {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 0;
  display: block;
}
.fw-map-foot { padding: 0.85em; display: flex; }
.fw-map-foot .fw-btn { flex: 1; }
.fw-map--standalone { padding: 1.15em; text-align: center; }
.fw-map-addr {
  display: block;
  margin-bottom: 0.75em;
  color: var(--text, #1a1a1a);
  font-weight: 600;
}

/* ---------- fw-review-badge: proportionally-filled SVG stars ---------- */
.fw-review-badge { display: inline-block; }
.fw-review-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  color: inherit;
  text-decoration: none;
}
.fw-stars {
  --fw-star: var(--accent, var(--primary, #e8a317));
  position: relative;
  display: inline-flex;
  line-height: 0;
}
.fw-stars-row { display: inline-flex; gap: 0.06em; white-space: nowrap; }
.fw-stars-fill { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; }
.fw-stars svg { width: 1.05em; height: 1.05em; display: block; }
.fw-stars-empty svg { fill: rgba(0, 0, 0, 0.16); fill: color-mix(in srgb, var(--fw-star) 26%, transparent); }
.fw-stars-fill svg { fill: var(--fw-star); }
.fw-review-text {
  font-size: 0.92em;
  font-weight: 600;
  color: var(--text, inherit);
  letter-spacing: 0.005em;
}
.fw-review-count { font-weight: 400; opacity: 0.72; }

/* ---------- fw-contact-bar: sticky mobile-only action bar ---------- */
fw-contact-bar { display: none; }
@media (max-width: 640px) {
  fw-contact-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    z-index: 40;
    background: var(--primary, var(--accent, #111));
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08), 0 -10px 26px -8px rgba(0, 0, 0, 0.45);
  }
}
.fw-contact-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28em;
  padding: 0.72em 0 0.62em;
  color: var(--on-primary, #fff);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.82em;
  letter-spacing: 0.02em;
  transition: background 0.15s ease;
}
.fw-contact-btn:hover, .fw-contact-btn:active { background: rgba(255, 255, 255, 0.1); }
.fw-contact-btn svg { width: 1.35em; height: 1.35em; }
.fw-contact-btn:not(:last-child) { box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.16); }

/* ---------- fw-facebook-page / fw-instagram-embed: card frame + loading skeleton ---------- */
fw-facebook-page, fw-instagram-embed { display: block; max-width: 100%; }
.fw-embed { position: relative; max-width: 100%; }
.fw-embed.is-loading { min-height: var(--fw-embed-h, 500px); }
.fw-facebook-frame { max-width: 100%; display: block; position: relative; z-index: 0; }
.fw-embed .instagram-media { position: relative; z-index: 0; }
.fw-skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #eef0f2;
  background: color-mix(in srgb, var(--primary, #8895a5) 8%, #f2f3f5);
}
.fw-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: fw-shimmer 1.5s ease-in-out infinite;
}
.fw-embed.is-loaded .fw-skeleton { opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s; }
@keyframes fw-shimmer { 100% { transform: translateX(100%); } }
/* graceful fallback when a social embed fails to render (dead post, rate limit, blocked frame) */
.fw-embed-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 120px;
  padding: 1.6em 1.2em;
  text-align: center;
  color: var(--primary, var(--accent, #0a5cff));
  font-weight: 600;
  text-decoration: none;
}
.fw-embed-fallback svg { width: 1.4em; height: 1.4em; flex: none; }
.fw-embed-fallback:hover { text-decoration: underline; }

/* ---------- accessibility ---------- */
:is(fw-hours, .fw-btn, .fw-contact-btn, .fw-review-link, .fw-embed-fallback):focus-visible {
  outline: 2px solid var(--primary, var(--accent, #0a5cff));
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .fw-map-frame, .fw-contact-btn, .fw-btn { transition: none !important; }
  .fw-hours.is-open .fw-hours-dot, .fw-skeleton::after { animation: none !important; }
  .fw-btn:hover, .fw-btn:active { transform: none; }
  .fw-embed.is-loaded .fw-skeleton { transition: none !important; }
}