/* Business Hub widget baseline — zero-specificity fallback (template CSS wins). */
[data-slot="lead-form"], [data-slot="reviews-widget"], [data-slot="gbp-map"], [data-slot="video"], [data-slot="project-preview"] {
  --bh-w-radius: 10px;
  --bh-w-border: color-mix(in srgb, currentColor 22%, transparent);
  --bh-w-border-soft: color-mix(in srgb, currentColor 13%, transparent);
  --bh-w-surface: color-mix(in srgb, currentColor 6%, transparent);
  --bh-w-surface-raised: color-mix(in srgb, currentColor 9%, transparent);
  --bh-w-muted: color-mix(in srgb, currentColor 62%, transparent);
  --bh-w-error: #e5484d;
  --bh-w-star: #eab308;
}

/* ---- functional floors (REAL specificity on purpose) ---- */
[data-slot="reviews-widget"] .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[data-slot="lead-form"] [hidden], [data-slot="reviews-widget"] [hidden], [data-slot="gbp-map"] [hidden], [data-slot="video"] [hidden], [data-slot="project-preview"] [hidden] { display: none !important; }
/* Radio/checkbox SIZING is a floor too: template-wide "input { width:100% }"
 * rules (very common) would otherwise stretch the circles across the row.
 * Colors stay themeable; a template explicitly targeting radio inputs wins. */
[data-slot="lead-form"] .radio-option input[type="radio"],
[data-slot="lead-form"] .checkbox-option input[type="checkbox"] {
  width: 18px; height: 18px; min-height: 0; flex: none;
}

/* ---- lead form (+ shared form classes reused by the preview widget) ---- */
:where([data-slot="lead-form"] .lead-form) { display: grid; gap: 16px; font: inherit; }
:where([data-slot="lead-form"] .field,
       [data-slot="project-preview"] .field) { display: grid; gap: 6px; margin: 0; }
:where([data-slot="lead-form"] .field label,
       [data-slot="project-preview"] .field label,
       [data-slot="lead-form"] .radio-group legend) {
  font-size: 0.9em; font-weight: 600; letter-spacing: 0.01em;
}
:where([data-slot="lead-form"] .optional) { color: var(--bh-w-muted); font-weight: 400; }
:where([data-slot="lead-form"] input:not([type="checkbox"]):not([type="radio"]),
       [data-slot="lead-form"] select,
       [data-slot="lead-form"] textarea,
       [data-slot="project-preview"] input[type="email"],
       [data-slot="project-preview"] textarea) {
  width: 100%; box-sizing: border-box; font: inherit; color: inherit;
  background: var(--bh-w-surface);
  border: 1px solid var(--bh-w-border);
  border-radius: var(--bh-w-radius);
  padding: 11px 13px; min-height: 44px; transition: border-color .15s ease;
}
:where([data-slot="lead-form"] textarea,
       [data-slot="project-preview"] textarea) { min-height: 96px; resize: vertical; }
:where([data-slot="lead-form"] input::placeholder,
       [data-slot="lead-form"] textarea::placeholder,
       [data-slot="project-preview"] input::placeholder,
       [data-slot="project-preview"] textarea::placeholder) { color: var(--bh-w-muted); opacity: 1; }
:where([data-slot="lead-form"] input:hover, [data-slot="lead-form"] select:hover,
       [data-slot="lead-form"] textarea:hover,
       [data-slot="project-preview"] input[type="email"]:hover,
       [data-slot="project-preview"] textarea:hover) { border-color: color-mix(in srgb, currentColor 38%, transparent); }
:where([data-slot="lead-form"] input[aria-invalid="true"],
       [data-slot="lead-form"] select[aria-invalid="true"],
       [data-slot="lead-form"] textarea[aria-invalid="true"]) { border-color: var(--bh-w-error); }
:where([data-slot="lead-form"] .radio-group) { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
:where([data-slot="lead-form"] .radio-option,
       [data-slot="lead-form"] .checkbox-option) {
  display: flex; align-items: center; gap: 10px; font-weight: 400; cursor: pointer; min-height: 30px;
}
:where([data-slot="lead-form"] input[type="radio"],
       [data-slot="lead-form"] input[type="checkbox"]) {
  width: 18px; height: 18px; margin: 0; accent-color: var(--bh-w-brand); flex: none;
}
:where([data-slot="lead-form"] .microcopy,
       [data-slot="project-preview"] .microcopy) {
  font-size: 0.8em; color: var(--bh-w-muted); margin: 0; line-height: 1.5;
}
:where([data-slot="lead-form"] .field-error,
       [data-slot="project-preview"] .field-error) {
  font-size: 0.83em; color: var(--bh-w-error); margin: 0; font-weight: 500;
}
:where([data-slot="project-preview"] .btn-primary),
:where([data-slot="lead-form"] .btn-primary) {
  display: block; width: 100%; box-sizing: border-box; font: inherit;
  font-weight: 700; font-size: 1.05em; cursor: pointer;
  padding: 14px 20px; border-radius: var(--bh-w-radius);
  border: 1px solid transparent;
  background: var(--bh-w-brand); color: var(--bh-w-brand-ink);
  transition: filter .15s ease, transform .05s ease;
}
:where([data-slot="lead-form"] .btn-primary:hover,
       [data-slot="project-preview"] .btn-primary:hover) { filter: brightness(1.08); }
:where([data-slot="lead-form"] .btn-primary:active,
       [data-slot="project-preview"] .btn-primary:active) { transform: translateY(1px); }
:where([data-slot="lead-form"] .btn-primary:disabled,
       [data-slot="project-preview"] .btn-primary:disabled) { opacity: .65; cursor: default; filter: none; }

/* ---- project preview (owner 2026-07-09) ---- */
:where([data-slot="project-preview"] .bh-preview__form) { display: grid; gap: 16px; font: inherit; }
:where([data-slot="project-preview"] .bh-preview__step) { display: grid; gap: 16px; }
/* req 73/75: the phone field's calling-code chip — a visitor-facing SELECT
 * since the owner follow-up (plugin config only sets the default). Shared by
 * the preview widget and lead form so both style as one. */
:where([data-slot="project-preview"] .bh-preview__phone,
       [data-slot="lead-form"] .bh-preview__phone) { display: flex; align-items: stretch; gap: 8px; }
:where([data-slot="project-preview"] .bh-preview__phone input[type="tel"],
       [data-slot="lead-form"] .bh-preview__phone input[type="tel"]) { flex: 1 1 auto; min-width: 0; }
:where([data-slot="project-preview"] .bh-preview__cc,
       [data-slot="lead-form"] .bh-preview__cc) {
  display: flex; align-items: center; flex: none; padding: 0 12px; min-height: 44px;
  border: 1px solid var(--bh-w-border); border-radius: var(--bh-w-radius);
  background: var(--bh-w-surface); color: var(--bh-w-muted); font-weight: 600;
}
:where([data-slot="project-preview"] select.bh-preview__cc,
       [data-slot="lead-form"] select.bh-preview__cc) {
  font: inherit; font-weight: 600; cursor: pointer;
  /* keep the native dropdown arrow — it's the visitor's cue that the
   * country code is changeable */
  appearance: auto; -webkit-appearance: auto;
}
/* FUNCTIONAL FLOOR (real specificity, like the radio sizing floor): the
 * phone row's layout must survive template CSS AND real mobile browsers.
 * - display:flex on a SELECT is nonstandard (the chip class was written for
 *   a span) — Safari/iOS renders it garbled; force the UA's own block model.
 * - the select's intrinsic width follows its WIDEST option (country names),
 *   which would crush the tel input on phones — cap it and let the tel
 *   input keep the room; template input/select width:100% rules must
 *   not blow the row apart either. */
[data-slot="project-preview"] .bh-preview__phone select.bh-preview__cc,
[data-slot="lead-form"] .bh-preview__phone select.bh-preview__cc {
  display: inline-block; width: auto; max-width: 42%; flex: none;
  padding: 0 8px; line-height: normal;
}
[data-slot="project-preview"] .bh-preview__phone input[type="tel"],
[data-slot="lead-form"] .bh-preview__phone input[type="tel"] {
  flex: 1 1 auto; width: auto; min-width: 0;
}
:where([data-slot="project-preview"] .bh-preview__drop) {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; min-height: 132px; padding: 14px;
  border: 1.5px dashed var(--bh-w-border); border-radius: var(--bh-w-radius);
  background: var(--bh-w-surface); text-align: center; cursor: pointer;
  transition: border-color .15s ease;
}
:where([data-slot="project-preview"] .bh-preview__drop:hover) {
  border-color: color-mix(in srgb, currentColor 38%, transparent);
}
:where([data-slot="project-preview"] .bh-preview__file) {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}
:where([data-slot="project-preview"] .bh-preview__thumb) {
  max-width: 100%; max-height: 200px; border-radius: calc(var(--bh-w-radius) - 4px);
}
:where([data-slot="project-preview"] .bh-preview__droplabel) {
  font-size: 0.9em; font-weight: 600; color: var(--bh-w-muted);
}
:where([data-slot="project-preview"] .bh-preview__back) {
  font: inherit; font-size: 0.88em; font-weight: 600; color: var(--bh-w-muted);
  background: none; border: 0; padding: 4px; cursor: pointer; justify-self: center;
}
:where([data-slot="project-preview"] .bh-preview__done) {
  display: grid; gap: 6px; padding: 18px 16px; text-align: center;
  border: 1px solid var(--bh-w-border-soft); border-radius: var(--bh-w-radius);
  background: var(--bh-w-surface);
}
:where([data-slot="project-preview"] .bh-preview__done-title) {
  margin: 0; font-weight: 700; font-size: 1.05em;
}

/* ---- reviews (horizontal snap-scroller — owner 2026-07-11) ---- */
:where([data-slot="reviews-widget"] .review-scroll) {
  display: flex; gap: 14px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /* overflow-y:hidden clips a card's drop-shadow into a hard squared box
     (owner 2026-07-11) — pad top/bottom so the SOFTENED card shadow below
     fits inside the clip region instead of being cut into an edge. */
  padding: 6px 2px 18px;
  max-width: 100%; min-width: 0; /* the strip scrolls internally — never the page */
  scrollbar-width: thin;
  scrollbar-color: var(--bh-w-border-soft) transparent;
}
:where([data-slot="reviews-widget"] .review-scroll > .review-card) {
  flex: 0 0 min(300px, 82%);     /* fixed card width; ~1 card + a peek on phones */
  scroll-snap-align: start;
  /* Owner 2026-07-13: uniform, reasonable HEIGHT — the blockquote flex-fills and
     clips; a review too long to fit gets a "Read more" popup (JS-added). */
  height: 16rem;
  display: flex; flex-direction: column;
  position: relative; /* anchors the read-more button */
}
/* Real specificity (beats the template's tall review-card shadow): a COMPACT
   shadow that fits within the scroller's padding, so the clip can't turn it
   into a squared box. */
[data-slot="reviews-widget"] .review-scroll > .review-card {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
:where([data-slot="reviews-widget"] .review-scroll)::-webkit-scrollbar { height: 8px; }
:where([data-slot="reviews-widget"] .review-scroll)::-webkit-scrollbar-thumb {
  background: var(--bh-w-border-soft); border-radius: 999px;
}
/* click-to-scroll arrows (owner 2026-07-11) — hidden until JS adds
   .review-scroller--nav, so a no-JS page never shows dead buttons. */
:where([data-slot="reviews-widget"] .review-scroller) { position: relative; }
:where([data-slot="reviews-widget"] .review-nav) {
  position: absolute; top: calc(50% - 5px); transform: translateY(-50%);
  z-index: 3; width: 40px; height: 40px; border-radius: 50%; padding: 0;
  display: none; align-items: center; justify-content: center;
  border: 1px solid var(--bh-w-border-soft); background: var(--bh-w-surface);
  color: inherit; cursor: pointer; font-size: 24px; line-height: 1;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
}
:where([data-slot="reviews-widget"] .review-nav--prev) { left: 2px; }
:where([data-slot="reviews-widget"] .review-nav--next) { right: 2px; }
:where([data-slot="reviews-widget"] .review-scroller--nav .review-nav) { display: inline-flex; }
:where([data-slot="reviews-widget"] .review-nav:disabled) { opacity: 0.3; cursor: default; }
@media (hover: hover) {
  :where([data-slot="reviews-widget"] .review-nav:not(:disabled):hover) {
    background: var(--bh-w-brand); color: #fff; border-color: transparent;
  }
}
:where([data-slot="reviews-widget"] .review-card) {
  background: var(--bh-w-surface);
  border: 1px solid var(--bh-w-border-soft);
  border-radius: var(--bh-w-radius);
  padding: 16px; margin: 0; min-width: 0;
}
@supports (backdrop-filter: blur(1px)) {
  :where([data-slot="reviews-widget"] .review-card) { backdrop-filter: blur(8px); }
}
:where([data-slot="reviews-widget"] .review-head) { display: flex; align-items: center; gap: 10px; }
:where([data-slot="reviews-widget"] .review-avatar) {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.82em; font-weight: 700;
  background: color-mix(in srgb, var(--bh-w-brand) 22%, transparent);
  color: inherit;
}
:where([data-slot="reviews-widget"] .review-meta) { min-width: 0; }
:where([data-slot="reviews-widget"] .review-name) { font-weight: 600; font-size: 0.95em; }
:where([data-slot="reviews-widget"] .review-loc) { color: var(--bh-w-muted); font-size: 0.82em; }
:where([data-slot="reviews-widget"] .review-source) {
  margin-left: auto; flex: none; font-size: 0.72em; font-weight: 600;
  color: var(--bh-w-muted); border: 1px solid var(--bh-w-border-soft);
  border-radius: 999px; padding: 3px 9px;
}
:where([data-slot="reviews-widget"] .review-stars) {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  color: var(--bh-w-star); letter-spacing: 2px; font-size: 0.95em;
}
:where([data-slot="reviews-widget"] .review-date) {
  color: var(--bh-w-muted); letter-spacing: normal; font-size: 0.82em;
}
:where([data-slot="reviews-widget"] .review-card blockquote) {
  margin: 10px 0 0; padding: 0; font-size: 0.95em; line-height: 1.55; color: inherit;
}

/* ---- reviews: uniform-height clamp + Read-more popup (owner 2026-07-13) ---- */
/* only the SCROLLER cards clamp — the popup's cloned card shows full text */
:where([data-slot="reviews-widget"] .review-scroll > .review-card blockquote) {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
}
/* JS marks an overflowing card: fade the clipped text so the cut isn't abrupt */
:where([data-slot="reviews-widget"] .review-card--clamped blockquote) {
  -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent);
  mask-image: linear-gradient(to bottom, #000 66%, transparent);
}
:where([data-slot="reviews-widget"] .review-more) {
  position: absolute; right: 12px; bottom: 10px; z-index: 1;
  font: inherit; font-size: 0.8em; font-weight: 600; line-height: 1;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--bh-w-border-soft);
  background: var(--bh-w-surface); color: var(--bh-w-brand);
}
@media (hover: hover) {
  :where([data-slot="reviews-widget"] .review-more:hover) {
    background: var(--bh-w-brand); color: #fff; border-color: transparent;
  }
}
/* the full-review popup — one per widget, hidden until a Read more click */
:where([data-slot="reviews-widget"] .review-modal) {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(0, 0, 0, 0.55); overscroll-behavior: contain;
}
[data-slot="reviews-widget"] .review-modal[hidden] { display: none; }
:where([data-slot="reviews-widget"] .review-modal__panel) {
  position: relative; width: 100%; max-width: 520px; max-height: 82vh; overflow-y: auto;
  background: var(--bh-w-surface); color: inherit;
  border: 1px solid var(--bh-w-border-soft); border-radius: var(--bh-w-radius);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4); padding: 26px 22px 22px;
}
:where([data-slot="reviews-widget"] .review-modal__close) {
  position: absolute; top: 8px; right: 8px; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: transparent; color: inherit;
  font-size: 26px; line-height: 1; cursor: pointer;
}
@media (hover: hover) {
  :where([data-slot="reviews-widget"] .review-modal__close:hover) {
    background: color-mix(in srgb, currentColor 12%, transparent);
  }
}
/* the cloned card inside the popup: drop the nested box, show full text */
[data-slot="reviews-widget"] .review-modal__body .review-card {
  border: none; box-shadow: none; background: transparent;
  backdrop-filter: none; padding: 0; height: auto; display: block; position: static;
}
[data-slot="reviews-widget"] .review-modal__body .review-card blockquote {
  overflow: visible; max-height: none; -webkit-mask-image: none; mask-image: none;
}

/* ---- map + video iframes: soften into any layout ---- */
:where([data-slot="gbp-map"] iframe, [data-slot="video"] iframe) {
  display: block; border-radius: var(--bh-w-radius);
}

/* ---- req 82: per-device video renditions (mobile ≤767px, desktop ≥768px —
   the asset-optimizer breakpoints). The renderer emits BOTH players for a
   dual-rendition slot; these rules show exactly one. NOTE: display:none does
   NOT stop Chromium from loading a lazy iframe (verified empirically) — the
   videoRenditionScript below assigns src to the picked rendition only. ---- */
@media (max-width: 767px) {
  :where([data-slot="video"]) .bh-video--desktop { display: none; }
}
@media (min-width: 768px) {
  :where([data-slot="video"]) .bh-video--mobile { display: none; }
}